feat(hub): add SearchableSelectField component and update RoleCard to use it

This commit is contained in:
2026-07-19 14:32:01 +08:00
parent 854c6189bb
commit 3f3628e4a0
3 changed files with 143 additions and 11 deletions
+24 -6
View File
@@ -406,7 +406,8 @@
resize: vertical;
}
.saas-select-trigger {
.saas-select-trigger,
.saas-combobox-input {
display: inline-flex;
width: 100%;
align-items: center;
@@ -425,14 +426,25 @@
text-align: left;
}
.saas-combobox-input {
cursor: text;
padding-right: 2.25rem;
}
.saas-combobox-input::placeholder {
color: var(--color-surface-500);
}
.saas-select-trigger:focus-visible,
.saas-select-trigger[data-state='open'] {
.saas-select-trigger[data-state='open'],
.saas-combobox-input:focus {
border-color: var(--color-primary-600);
box-shadow: inset 0 0 0 1px var(--color-primary-600);
}
.saas-select-trigger:disabled,
.saas-select-trigger[data-disabled] {
.saas-select-trigger[data-disabled],
.saas-combobox-input:disabled {
cursor: not-allowed;
opacity: 0.55;
}
@@ -443,9 +455,15 @@
.saas-select-content {
z-index: 70;
max-height: min(18rem, var(--bits-select-content-available-height, 18rem));
width: var(--bits-select-anchor-width);
min-width: var(--bits-select-anchor-width);
max-height: min(
18rem,
var(
--bits-combobox-content-available-height,
var(--bits-select-content-available-height, 18rem)
)
);
width: var(--bits-combobox-anchor-width, var(--bits-select-anchor-width));
min-width: var(--bits-combobox-anchor-width, var(--bits-select-anchor-width));
overflow: hidden;
border-radius: 0;
border: 1px solid var(--color-surface-400);