@rockshin/tao-ui 0.0.1 → 0.0.2

package/dist/components/scroll-area/scroll-area.css

@@ -307,6 +307,8 @@
     --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;
@@ -529,8 +531,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);
   }
 
@@ -541,16 +543,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);
@@ -633,6 +626,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -715,6 +712,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -727,6 +728,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;
   }
@@ -742,6 +747,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);
@@ -771,6 +784,11 @@
     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-scroll-area] {

package/dist/components/select/mobile-select.css

@@ -307,6 +307,8 @@
     --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;
@@ -529,8 +531,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);
   }
 
@@ -541,16 +543,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);
@@ -633,6 +626,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -715,6 +712,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -727,6 +728,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;
   }
@@ -742,6 +747,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);
@@ -771,6 +784,11 @@
     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-drawer]:has([data-tao-sheet-list]) [data-tao-drawer-body] {
@@ -838,10 +856,44 @@
   cursor: not-allowed;
 }
 
+[data-tao-sheet-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-sm);
+  display: inline-flex;
+  overflow: hidden;
+}
+
+[data-tao-sheet-item-icon] > * {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+[data-tao-sheet-item-main] {
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
 [data-tao-sheet-item-label] {
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 1;
+  overflow: hidden;
+}
+
+[data-tao-sheet-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;
 }
 

package/dist/components/select/mobile-select.js

@@ -78,10 +78,24 @@ function MobileSelectContent(t0) {
                 onClick: ()=>{
                     if (!opt.disabled) handleSelect(opt.value);
                 },
+                "data-tao-has-desc": null != opt.description || void 0,
                 children: [
-                    /*#__PURE__*/ jsx("span", {
-                        "data-tao-sheet-item-label": "",
-                        children: opt.label
+                    null != opt.icon && /*#__PURE__*/ jsx("span", {
+                        "data-tao-sheet-item-icon": "",
+                        children: opt.icon
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        "data-tao-sheet-item-main": "",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                "data-tao-sheet-item-label": "",
+                                children: opt.label
+                            }),
+                            null != opt.description && /*#__PURE__*/ jsx("span", {
+                                "data-tao-sheet-item-desc": "",
+                                children: opt.description
+                            })
+                        ]
                     }),
                     isSelected && /*#__PURE__*/ jsx("span", {
                         "data-tao-sheet-item-check": "",

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,6 +349,8 @@
     --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;
@@ -572,8 +573,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 +585,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 +668,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -758,6 +754,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -770,6 +770,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 +789,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 +826,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 +851,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"]) {
@@ -923,7 +953,6 @@
 [data-tao-select] {
   align-items: center;
   gap: var(--tao-padding-xs);
-  width: 100%;
   font-family: var(--tao-font-family);
   cursor: pointer;
   outline: none;
@@ -985,6 +1014,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;
@@ -1128,6 +1174,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

@@ -5,6 +5,10 @@ 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;
 }
 export interface SelectProps {
     options: SelectOption[];