@rockshin/tao-ui 0.0.1 → 0.0.3

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,43 @@
+import { type CSSProperties, type MouseEvent, type ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './breadcrumb.css';
+export type BreadcrumbSemanticPart = 'root' | 'list' | 'item' | 'link' | 'page' | 'separator' | 'ellipsis';
+export interface BreadcrumbItemType {
+    /** Stable key; falls back to the item index. */
+    key?: string | number;
+    /** Content to display. */
+    title?: ReactNode;
+    /** When set, the item renders as an `<a>`. */
+    href?: string;
+    /** Click handler; turns a title-only item into an interactive link. */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /** Disable interaction for this item. */
+    disabled?: boolean;
+}
+export interface BreadcrumbProps {
+    /** Breadcrumb path, root first. The last item renders as the current page. */
+    items: BreadcrumbItemType[];
+    /** Separator between items. Defaults to a chevron, like shadcn. */
+    separator?: ReactNode;
+    /**
+     * Collapse the middle of long paths into an ellipsis once the number of
+     * items exceeds this value. Shows the first item and the last
+     * `maxItems - 1` items.
+     */
+    maxItems?: number;
+    /**
+     * Custom renderer for an item's content. Return a React element (e.g. a
+     * router `<Link>`) and its props are merged onto the breadcrumb link via
+     * Radix Slot — no extra `<a>` wrapper is added.
+     */
+    itemRender?: (item: BreadcrumbItemType, info: {
+        index: number;
+        isLast: boolean;
+        items: BreadcrumbItemType[];
+    }) => ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<BreadcrumbSemanticPart>;
+    styles?: SemanticStyles<BreadcrumbSemanticPart>;
+}
+export declare function Breadcrumb({ items, separator, maxItems, itemRender, className, style, classNames, styles, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,268 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { Fragment, isValidElement } from "react";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import { Dropdown } from "../dropdown/dropdown.js";
+import "./breadcrumb.css";
+function ChevronIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            viewBox: "0 0 16 16",
+            fill: "none",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M6 4l4 4-4 4",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function EllipsisIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsxs("svg", {
+            viewBox: "0 0 16 16",
+            fill: "currentColor",
+            "aria-hidden": true,
+            children: [
+                /*#__PURE__*/ jsx("circle", {
+                    cx: "3",
+                    cy: "8",
+                    r: "1.3"
+                }),
+                /*#__PURE__*/ jsx("circle", {
+                    cx: "8",
+                    cy: "8",
+                    r: "1.3"
+                }),
+                /*#__PURE__*/ jsx("circle", {
+                    cx: "13",
+                    cy: "8",
+                    r: "1.3"
+                })
+            ]
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+const ELLIPSIS = Symbol('ellipsis');
+function Breadcrumb(t0) {
+    const $ = c(55);
+    const { items, separator, maxItems, itemRender, className, style, classNames, styles } = t0;
+    const { size, disabled: ctxDisabled } = useTaoConfig();
+    const collapsed = null != maxItems && maxItems >= 1 && items.length > maxItems;
+    let t1;
+    if ($[0] !== collapsed || $[1] !== items || $[2] !== maxItems) {
+        t1 = collapsed ? [
+            items[0],
+            ELLIPSIS,
+            ...items.slice(items.length - Math.max(1, maxItems - 1))
+        ] : items;
+        $[0] = collapsed;
+        $[1] = items;
+        $[2] = maxItems;
+        $[3] = t1;
+    } else t1 = $[3];
+    const display = t1;
+    let t2;
+    if ($[4] !== separator) {
+        t2 = separator ?? /*#__PURE__*/ jsx(ChevronIcon, {});
+        $[4] = separator;
+        $[5] = t2;
+    } else t2 = $[5];
+    const sep = t2;
+    let t3;
+    if ($[6] !== classNames?.link || $[7] !== classNames?.page || $[8] !== ctxDisabled || $[9] !== itemRender || $[10] !== items || $[11] !== styles?.link || $[12] !== styles?.page) {
+        t3 = (item, index, isLast)=>{
+            const content = itemRender ? itemRender(item, {
+                index,
+                isLast,
+                items
+            }) : item.title;
+            const disabled = item.disabled || ctxDisabled;
+            if (isLast) return /*#__PURE__*/ jsx("span", {
+                "data-tao-breadcrumb-page": "",
+                "aria-current": "page",
+                className: cx(classNames?.page),
+                style: styles?.page,
+                children: content
+            });
+            const linkProps = {
+                "data-tao-breadcrumb-link": "",
+                "data-tao-disabled": disabled || void 0,
+                className: cx(classNames?.link),
+                style: styles?.link,
+                onClick: disabled ? void 0 : item.onClick
+            };
+            if (itemRender && /*#__PURE__*/ isValidElement(content)) return /*#__PURE__*/ jsx(Slot, {
+                ...linkProps,
+                children: content
+            });
+            if (null != item.href) return /*#__PURE__*/ jsx("a", {
+                href: item.href,
+                ...linkProps,
+                children: content
+            });
+            if (item.onClick) return /*#__PURE__*/ jsx("span", {
+                role: "link",
+                tabIndex: disabled ? void 0 : 0,
+                ...linkProps,
+                children: content
+            });
+            return /*#__PURE__*/ jsx("span", {
+                "data-tao-breadcrumb-text": "",
+                className: cx(classNames?.link),
+                style: styles?.link,
+                children: content
+            });
+        };
+        $[6] = classNames?.link;
+        $[7] = classNames?.page;
+        $[8] = ctxDisabled;
+        $[9] = itemRender;
+        $[10] = items;
+        $[11] = styles?.link;
+        $[12] = styles?.page;
+        $[13] = t3;
+    } else t3 = $[13];
+    const renderContent = t3;
+    const t4 = classNames?.root;
+    let t5;
+    if ($[14] !== className || $[15] !== t4) {
+        t5 = cx(t4, className);
+        $[14] = className;
+        $[15] = t4;
+        $[16] = t5;
+    } else t5 = $[16];
+    const t6 = styles?.root;
+    let t7;
+    if ($[17] !== style || $[18] !== t6) {
+        t7 = {
+            ...t6,
+            ...style
+        };
+        $[17] = style;
+        $[18] = t6;
+        $[19] = t7;
+    } else t7 = $[19];
+    const t8 = classNames?.list;
+    let t9;
+    if ($[20] !== t8) {
+        t9 = cx(t8);
+        $[20] = t8;
+        $[21] = t9;
+    } else t9 = $[21];
+    const t10 = styles?.list;
+    let t11;
+    if ($[22] !== classNames?.ellipsis || $[23] !== classNames?.item || $[24] !== classNames?.separator || $[25] !== display || $[26] !== items || $[27] !== maxItems || $[28] !== renderContent || $[29] !== sep || $[30] !== styles?.ellipsis || $[31] !== styles?.item || $[32] !== styles?.separator) {
+        let t12;
+        if ($[34] !== classNames?.ellipsis || $[35] !== classNames?.item || $[36] !== classNames?.separator || $[37] !== display.length || $[38] !== items || $[39] !== maxItems || $[40] !== renderContent || $[41] !== sep || $[42] !== styles?.ellipsis || $[43] !== styles?.item || $[44] !== styles?.separator) {
+            t12 = (entry, i)=>{
+                const isLast_0 = i === display.length - 1;
+                const isEllipsis = entry === ELLIPSIS;
+                const key = isEllipsis ? `ellipsis-${i}` : entry.key ?? i;
+                return /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx("li", {
+                            "data-tao-breadcrumb-item": "",
+                            className: cx(classNames?.item),
+                            style: styles?.item,
+                            children: isEllipsis ? /*#__PURE__*/ jsx(Dropdown, {
+                                menu: {
+                                    items: items.slice(1, items.length - Math.max(1, (maxItems ?? 1) - 1)).map((hidden, hi)=>({
+                                            key: null != hidden.key ? String(hidden.key) : `breadcrumb-hidden-${hi + 1}`,
+                                            label: renderContent(hidden, hi + 1, false),
+                                            disabled: hidden.disabled
+                                        }))
+                                },
+                                children: /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    "data-tao-breadcrumb-ellipsis": "",
+                                    "aria-label": "Show more",
+                                    className: cx(classNames?.ellipsis),
+                                    style: styles?.ellipsis,
+                                    children: /*#__PURE__*/ jsx(EllipsisIcon, {})
+                                })
+                            }) : renderContent(entry, i, isLast_0)
+                        }),
+                        !isLast_0 && /*#__PURE__*/ jsx("li", {
+                            "data-tao-breadcrumb-separator": "",
+                            role: "presentation",
+                            "aria-hidden": true,
+                            className: cx(classNames?.separator),
+                            style: styles?.separator,
+                            children: sep
+                        })
+                    ]
+                }, key);
+            };
+            $[34] = classNames?.ellipsis;
+            $[35] = classNames?.item;
+            $[36] = classNames?.separator;
+            $[37] = display.length;
+            $[38] = items;
+            $[39] = maxItems;
+            $[40] = renderContent;
+            $[41] = sep;
+            $[42] = styles?.ellipsis;
+            $[43] = styles?.item;
+            $[44] = styles?.separator;
+            $[45] = t12;
+        } else t12 = $[45];
+        t11 = display.map(t12);
+        $[22] = classNames?.ellipsis;
+        $[23] = classNames?.item;
+        $[24] = classNames?.separator;
+        $[25] = display;
+        $[26] = items;
+        $[27] = maxItems;
+        $[28] = renderContent;
+        $[29] = sep;
+        $[30] = styles?.ellipsis;
+        $[31] = styles?.item;
+        $[32] = styles?.separator;
+        $[33] = t11;
+    } else t11 = $[33];
+    let t12;
+    if ($[46] !== t10 || $[47] !== t11 || $[48] !== t9) {
+        t12 = /*#__PURE__*/ jsx("ol", {
+            "data-tao-breadcrumb-list": "",
+            className: t9,
+            style: t10,
+            children: t11
+        });
+        $[46] = t10;
+        $[47] = t11;
+        $[48] = t9;
+        $[49] = t12;
+    } else t12 = $[49];
+    let t13;
+    if ($[50] !== size || $[51] !== t12 || $[52] !== t5 || $[53] !== t7) {
+        t13 = /*#__PURE__*/ jsx("nav", {
+            "data-tao-breadcrumb": "",
+            "data-tao-size": size,
+            "aria-label": "breadcrumb",
+            className: t5,
+            style: t7,
+            children: t12
+        });
+        $[50] = size;
+        $[51] = t12;
+        $[52] = t5;
+        $[53] = t7;
+        $[54] = t13;
+    } else t13 = $[54];
+    return t13;
+}
+export { Breadcrumb };

package/dist/components/button/button.css

@@ -307,11 +307,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);
   }
@@ -529,8 +534,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 +546,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 +629,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -715,6 +715,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -727,6 +731,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 +750,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,21 +787,26 @@
     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;
+  }
 }
 
 button[data-tao-variant] {
+  justify-content: center;
+  align-items: center;
+  gap: var(--tao-padding-xs);
   font-family: var(--tao-font-family);
-  font-weight: var(--tao-font-weight-strong);
+  font-weight: var(--tao-font-weight-normal);
   border: var(--tao-line-width) solid transparent;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
   white-space: nowrap;
-  transition: background-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out), border-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out), transform var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
+  transition: background-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out), border-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
   outline: none;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
   display: inline-flex;
 }
 
@@ -798,7 +819,7 @@ button[data-tao-size="small"] {
 
 button[data-tao-size="medium"] {
   height: var(--tao-control-height);
-  padding-inline: var(--tao-padding-sm);
+  padding-inline: var(--tao-padding);
   font-size: var(--tao-font-size-base);
   border-radius: var(--tao-radius-md);
 }
@@ -820,7 +841,7 @@ button[data-tao-variant="primary"]:hover:not(:disabled) {
 }
 
 button[data-tao-variant="primary"]:active:not(:disabled) {
-  transform: scale(.98);
+  background: var(--tao-primary-active);
 }
 
 button[data-tao-variant="secondary"] {
@@ -835,7 +856,7 @@ button[data-tao-variant="secondary"]:hover:not(:disabled) {
 }
 
 button[data-tao-variant="secondary"]:active:not(:disabled) {
-  transform: scale(.98);
+  background: var(--tao-color-fill-secondary);
 }
 
 button[data-tao-variant="ghost"] {
@@ -848,6 +869,10 @@ button[data-tao-variant="ghost"]:hover:not(:disabled) {
   color: var(--tao-color-text);
 }
 
+button[data-tao-variant="ghost"]:active:not(:disabled) {
+  background: var(--tao-color-fill-secondary);
+}
+
 button[data-tao-variant="destructive"] {
   background: var(--tao-error);
   color: var(--tao-error-fg);
@@ -858,7 +883,7 @@ button[data-tao-variant="destructive"]:hover:not(:disabled) {
 }
 
 button[data-tao-variant="destructive"]:active:not(:disabled) {
-  transform: scale(.98);
+  background: var(--tao-error-active);
 }
 
 button[data-tao-variant]:disabled {

package/dist/components/checkbox/checkbox.css

@@ -307,11 +307,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);
   }
@@ -529,8 +534,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 +546,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 +629,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -715,6 +715,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -727,6 +731,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 +750,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 +787,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-checkbox-wrapper] {