@rockshin/tao-ui 0.0.1 → 0.0.3

package/dist/components/select/select.css

@@ -87,7 +87,6 @@
       --tao-color-fill-quaternary: color-mix(in oklch, var(--tao-color-text-base) 3%, var(--tao-color-bg-base));
       --tao-color-bg-layout: color-mix(in oklch, var(--tao-color-text-base) 4%, var(--tao-color-bg-base));
       --tao-color-border: color-mix(in oklch, var(--tao-color-text-base) 18%, var(--tao-color-bg-base));
-      --tao-color-border-secondary: color-mix(in oklch, var(--tao-color-text-base) 10%, var(--tao-color-bg-base));
       --tao-control-outline: color-mix(in oklch, var(--tao-color-primary) 10%, transparent);
       --tao-color-error-outline: color-mix(in oklch, var(--tao-color-error) 10%, transparent);
       --tao-color-warning-outline: color-mix(in oklch, var(--tao-color-warning) 10%, transparent);
@@ -350,11 +349,16 @@
     --tao-radius: 6px;
     --tao-font-size: 14px;
     --tao-control-height: 36px;
+    --tao-control-width: 200px;
+    --tao-control-range-width: 360px;
     --tao-size-unit: 4px;
     --tao-line-width: 1px;
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }
@@ -572,8 +576,8 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-bg-container: var(--tao-color-bg-base);
-    --tao-color-bg-elevated: var(--tao-color-bg-base);
+    --tao-color-bg-container: oklch(100% 0 0);
+    --tao-color-bg-elevated: oklch(100% 0 0);
     --tao-color-border: var(--tao-color-text-base);
   }
 
@@ -584,16 +588,7 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-border-secondary: var(--tao-color-text-base);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, [data-tao-provider] {
-      --tao-color-border-secondary: color-mix(in oklch, var(--tao-color-text-base) 10%, var(--tao-color-bg-base));
-    }
-  }
-
-  :root, [data-tao-provider] {
+    --tao-color-border-secondary: #0000170b;
     --tao-radius-xs: 2px;
     --tao-radius-sm: calc(var(--tao-radius) - 2px);
     --tao-radius-md: var(--tao-radius);
@@ -676,6 +671,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -758,6 +757,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -770,6 +773,10 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .resize {
+    resize: both;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -785,6 +792,14 @@
     border-width: 1px;
   }
 
+  .italic {
+    font-style: italic;
+  }
+
+  .underline {
+    text-decoration-line: underline;
+  }
+
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -814,6 +829,24 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
+}
+
+[data-tao-control] {
+  box-sizing: border-box;
+  width: var(--tao-control-width);
+}
+
+[data-tao-control][data-tao-range-trigger] {
+  width: var(--tao-control-range-width);
+}
+
+[data-tao-form-field] [data-tao-control] {
+  width: 100%;
 }
 
 [data-tao-control] {
@@ -821,8 +854,8 @@
 }
 
 [data-tao-control][data-tao-variant="outlined"] {
-  background: var(--tao-color-bg-container);
   border: var(--tao-line-width) solid var(--tao-color-border);
+  background: none;
 }
 
 [data-tao-control][data-tao-variant="outlined"]:hover:not([data-disabled]):not(:focus-within):not([data-state="open"]) {
@@ -848,6 +881,25 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning] {
+  border-color: var(--tao-warning);
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  border-color: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    border-color: color-mix(in oklch, var(--tao-color-warning) 80%, white);
+  }
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-tao-warning][data-state="open"] {
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="outlined"][data-disabled], [data-tao-control][data-tao-variant="outlined"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);
@@ -892,6 +944,26 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="filled"][data-tao-warning] {
+  background: var(--tao-warning-bg);
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  background: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    background: color-mix(in oklch, var(--tao-color-warning) 10%, var(--tao-color-bg-base));
+  }
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="filled"][data-tao-warning][data-state="open"] {
+  background: var(--tao-color-bg-container);
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="filled"][data-disabled], [data-tao-control][data-tao-variant="filled"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);
@@ -923,7 +995,6 @@
 [data-tao-select] {
   align-items: center;
   gap: var(--tao-padding-xs);
-  width: 100%;
   font-family: var(--tao-font-family);
   cursor: pointer;
   outline: none;
@@ -969,15 +1040,6 @@ button[data-tao-select] {
   border-radius: var(--tao-radius-md);
 }
 
-[data-tao-select] > span:first-of-type {
-  text-align: start;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-}
-
 [data-tao-select-prefix] {
   color: var(--tao-color-text-tertiary);
   flex-shrink: 0;
@@ -985,6 +1047,23 @@ button[data-tao-select] {
   display: flex;
 }
 
+[data-tao-select] > span[data-tao-select-value-icon] {
+  border-radius: var(--tao-radius-sm);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+[data-tao-select-value-icon] > * {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
 [data-tao-select-icons] {
   flex-shrink: 0;
   align-items: center;
@@ -1012,6 +1091,10 @@ button[data-tao-select] {
   transform: rotate(180deg);
 }
 
+[data-tao-select][data-state="open"] [data-tao-select-icon][data-tao-custom-suffix], [data-tao-select][data-state="open"] [data-tao-select-icon][data-tao-select-loading-slot] {
+  transform: none;
+}
+
 [data-tao-select-clear] {
   color: var(--tao-color-text-quaternary);
   cursor: pointer;
@@ -1023,7 +1106,7 @@ button[data-tao-select] {
 }
 
 [data-tao-select-loading] {
-  color: var(--tao-color-text-quaternary);
+  color: var(--tao-color-text-tertiary);
   animation: .8s linear infinite tao-spin;
 }
 
@@ -1046,7 +1129,7 @@ button[data-tao-select] {
   border: var(--tao-line-width) solid var(--tao-color-border);
   border-radius: var(--tao-radius-lg);
   box-shadow: var(--tao-box-shadow-secondary);
-  z-index: 1000;
+  z-index: var(--tao-z-index-popup);
   min-width: var(--radix-select-trigger-width);
   animation-duration: var(--tao-motion-duration-fast);
   animation-timing-function: var(--tao-motion-ease-out-quint);
@@ -1057,6 +1140,10 @@ button[data-tao-select] {
   animation-name: tao-select-in;
 }
 
+[data-tao-select-content][data-tao-popup-width="content"] {
+  min-width: max-content;
+}
+
 @keyframes tao-select-in {
   0% {
     opacity: 0;
@@ -1098,6 +1185,19 @@ button[data-tao-select] {
   max-height: 256px;
 }
 
+[data-tao-select-group]:not(:first-child) {
+  margin-block-start: var(--tao-padding-xxs);
+}
+
+[data-tao-select-group-label] {
+  padding: var(--tao-padding-xs) var(--tao-padding-sm) var(--tao-padding-xxs);
+  font-size: var(--tao-font-size-xs);
+  font-weight: var(--tao-font-weight-medium);
+  color: var(--tao-color-text-tertiary);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 [data-tao-select-item] {
   min-height: var(--tao-control-height);
   padding-inline: var(--tao-padding-sm);
@@ -1128,6 +1228,47 @@ button[data-tao-select] {
   cursor: not-allowed;
 }
 
+[data-tao-select-item][data-tao-has-desc] {
+  min-height: auto;
+  padding-block: var(--tao-padding-xs);
+  align-items: center;
+}
+
+[data-tao-select-item-icon] {
+  border-radius: var(--tao-radius-md);
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin-inline-end: var(--tao-padding-xs);
+  display: inline-flex;
+  overflow: hidden;
+}
+
+[data-tao-select-item-icon] > * {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+[data-tao-select-item-main] {
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+[data-tao-select-item-desc] {
+  font-size: var(--tao-font-size-sm);
+  line-height: var(--tao-line-height-sm);
+  color: var(--tao-color-text-tertiary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-block-start: 2px;
+  overflow: hidden;
+}
+
 [data-tao-select-check] {
   color: var(--tao-primary);
   align-items: center;

package/dist/components/select/select.d.ts

@@ -1,32 +1,90 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { type TaoSize, type TaoVariant } from '../../provider/tao-provider';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
 import './select.css';
 export interface SelectOption {
     label: ReactNode;
     value: string;
     disabled?: boolean;
+    /** Leading icon/avatar shown in the option row and in the trigger when selected. */
+    icon?: ReactNode;
+    /** Secondary description line shown under the label in the option row. */
+    description?: ReactNode;
+    /** Nested options turn this entry into a group; `label` becomes the group title. */
+    options?: SelectOption[];
 }
+export type SelectSemanticPart = 'root' | 'prefix' | 'suffix' | 'placeholder' | 'clear' | 'popup' | 'search' | 'group' | 'groupLabel' | 'item' | 'itemIcon' | 'itemLabel' | 'itemDesc' | 'empty';
+export type SelectPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
 export interface SelectProps {
     options: SelectOption[];
     value?: string;
-    onChange?: (value: string) => void;
+    defaultValue?: string;
+    /** Fired on selection or clear. `option` is undefined when cleared. */
+    onChange?: (value: string, option?: SelectOption) => void;
+    /** Fired only when an option is picked (not on clear). */
+    onSelect?: (value: string, option: SelectOption) => void;
+    /** Fired when the value is cleared via the clear button. */
+    onClear?: () => void;
     placeholder?: string;
     size?: TaoSize;
     variant?: TaoVariant;
     disabled?: boolean;
+    /** Validation status. */
+    status?: 'error' | 'warning';
     /** Show search input in dropdown */
     showSearch?: boolean;
     /** Custom filter function, default matches label string */
     filterOption?: (input: string, option: SelectOption) => boolean;
-    /** Allow clearing the value */
-    allowClear?: boolean;
+    /** Controlled search text. */
+    searchValue?: string;
+    /** Fired when the search text changes. */
+    onSearch?: (value: string) => void;
+    /** Allow clearing the value; pass an object to customize the clear icon. */
+    allowClear?: boolean | {
+        clearIcon?: ReactNode;
+    };
     /** Show loading spinner */
     loading?: boolean;
+    /** Custom loading icon. */
+    loadingIcon?: ReactNode;
     /** Content when no options match */
     notFoundContent?: ReactNode;
     /** Prefix icon/element */
     prefix?: ReactNode;
+    /** Custom suffix (arrow) icon. */
+    suffixIcon?: ReactNode;
+    autoFocus?: boolean;
+    id?: string;
+    /** Name for hidden form field. */
+    name?: string;
+    /** Controlled open state of the dropdown. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Dropdown position. Defaults to `bottomLeft`. */
+    placement?: SelectPlacement;
+    /** Match popup width to trigger (true), a fixed px width (number), or fit content (false). */
+    popupMatchSelectWidth?: boolean | number;
+    /** Max height of the option list. Defaults to 256. */
+    listHeight?: number;
+    /** Parent node the popup renders into. Defaults to body. */
+    getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
+    /** Customize the rendering of each dropdown option. */
+    optionRender?: (option: SelectOption, info: {
+        index: number;
+    }) => ReactNode;
+    /** Customize the selected label shown in the trigger. */
+    labelRender?: (option: SelectOption) => ReactNode;
+    /** Wrap/customize the dropdown content. */
+    popupRender?: (menu: ReactNode) => ReactNode;
     /** Force mobile mode (bottom sheet) regardless of screen size */
     mobile?: boolean;
+    /** Merged onto the trigger root; use to override width etc. */
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<SelectSemanticPart>;
+    styles?: SemanticStyles<SelectSemanticPart>;
 }
 export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
+/** Double chevron (↕) for a switcher-style trigger. Pass to `suffixIcon`. */
+export declare function ChevronsUpDownIcon(): import("react/jsx-runtime").JSX.Element;