@rockshin/tao-ui 0.0.1

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties, type MouseEvent, type ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './tag.css';
+export type TagSemanticPart = 'root' | 'icon' | 'close';
+export type TagColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | (string & {});
+export type TagVariant = 'filled' | 'solid' | 'outlined';
+export interface TagProps {
+    children?: ReactNode;
+    color?: TagColor;
+    variant?: TagVariant;
+    icon?: ReactNode;
+    closeIcon?: ReactNode | boolean;
+    onClose?: (e: MouseEvent<HTMLElement>) => void;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<TagSemanticPart>;
+    styles?: SemanticStyles<TagSemanticPart>;
+}
+export interface CheckableTagProps {
+    children?: ReactNode;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    icon?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Tag({ children, color, variant, icon, closeIcon, onClose, disabled, className, style, classNames, styles, }: TagProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tag {
+    var CheckableTag: typeof import("./tag").CheckableTag;
+}
+export declare function CheckableTag({ children, checked, onChange, disabled, icon, className, style, }: CheckableTagProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tag/tag.js

@@ -0,0 +1,237 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cx } from "../../utils/semantic.js";
+import "./tag.css";
+function CloseIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "12",
+            height: "12",
+            viewBox: "0 0 12 12",
+            fill: "none",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M3 3l6 6M9 3l-6 6",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function Tag(t0) {
+    const $ = c(35);
+    const { children, color: t1, variant: t2, icon, closeIcon, onClose, disabled: t3, className, style, classNames, styles } = t0;
+    const color = void 0 === t1 ? "default" : t1;
+    const variant = void 0 === t2 ? "filled" : t2;
+    const disabled = void 0 === t3 ? false : t3;
+    let t4;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t4 = [
+            "default",
+            "primary",
+            "success",
+            "warning",
+            "error"
+        ];
+        $[0] = t4;
+    } else t4 = $[0];
+    const isPreset = t4.includes(color);
+    const showClose = false !== closeIcon && null !== closeIcon && (closeIcon || onClose);
+    let t5;
+    if ($[1] !== disabled || $[2] !== onClose) {
+        t5 = (e)=>{
+            if (disabled) return;
+            onClose?.(e);
+        };
+        $[1] = disabled;
+        $[2] = onClose;
+        $[3] = t5;
+    } else t5 = $[3];
+    const handleClose = t5;
+    let t6;
+    if ($[4] !== color || $[5] !== isPreset || $[6] !== variant) {
+        t6 = !isPreset && color ? {
+            ..."solid" === variant ? {
+                background: color,
+                color: "#fff",
+                borderColor: color
+            } : "outlined" === variant ? {
+                color,
+                borderColor: color
+            } : {
+                background: `color-mix(in oklch, ${color} 12%, var(--tao-color-bg-base))`,
+                color,
+                borderColor: `color-mix(in oklch, ${color} 30%, var(--tao-color-bg-base))`
+            }
+        } : void 0;
+        $[4] = color;
+        $[5] = isPreset;
+        $[6] = variant;
+        $[7] = t6;
+    } else t6 = $[7];
+    const customColorStyle = t6;
+    const t7 = isPreset ? color : void 0;
+    const t8 = disabled || void 0;
+    const t9 = classNames?.root;
+    let t10;
+    if ($[8] !== className || $[9] !== t9) {
+        t10 = cx(t9, className);
+        $[8] = className;
+        $[9] = t9;
+        $[10] = t10;
+    } else t10 = $[10];
+    const t11 = styles?.root;
+    let t12;
+    if ($[11] !== customColorStyle || $[12] !== style || $[13] !== t11) {
+        t12 = {
+            ...customColorStyle,
+            ...t11,
+            ...style
+        };
+        $[11] = customColorStyle;
+        $[12] = style;
+        $[13] = t11;
+        $[14] = t12;
+    } else t12 = $[14];
+    let t13;
+    if ($[15] !== classNames?.icon || $[16] !== icon || $[17] !== styles?.icon) {
+        t13 = null != icon && /*#__PURE__*/ jsx("span", {
+            "data-tao-tag-icon": "",
+            className: cx(classNames?.icon),
+            style: styles?.icon,
+            children: icon
+        });
+        $[15] = classNames?.icon;
+        $[16] = icon;
+        $[17] = styles?.icon;
+        $[18] = t13;
+    } else t13 = $[18];
+    let t14;
+    if ($[19] !== classNames?.close || $[20] !== closeIcon || $[21] !== disabled || $[22] !== handleClose || $[23] !== showClose || $[24] !== styles?.close) {
+        t14 = showClose && /*#__PURE__*/ jsx("span", {
+            "data-tao-tag-close": "",
+            role: "button",
+            tabIndex: disabled ? void 0 : 0,
+            "aria-label": "Close",
+            onClick: handleClose,
+            onKeyDown: (e_0)=>{
+                if ("Enter" === e_0.key || " " === e_0.key) {
+                    e_0.preventDefault();
+                    handleClose(e_0);
+                }
+            },
+            className: cx(classNames?.close),
+            style: styles?.close,
+            children: true === closeIcon || void 0 === closeIcon ? /*#__PURE__*/ jsx(CloseIcon, {}) : closeIcon
+        });
+        $[19] = classNames?.close;
+        $[20] = closeIcon;
+        $[21] = disabled;
+        $[22] = handleClose;
+        $[23] = showClose;
+        $[24] = styles?.close;
+        $[25] = t14;
+    } else t14 = $[25];
+    let t15;
+    if ($[26] !== children || $[27] !== t10 || $[28] !== t12 || $[29] !== t13 || $[30] !== t14 || $[31] !== t7 || $[32] !== t8 || $[33] !== variant) {
+        t15 = /*#__PURE__*/ jsxs("span", {
+            "data-tao-tag": "",
+            "data-tao-color": t7,
+            "data-tao-variant": variant,
+            "data-tao-disabled": t8,
+            className: t10,
+            style: t12,
+            children: [
+                t13,
+                children,
+                t14
+            ]
+        });
+        $[26] = children;
+        $[27] = t10;
+        $[28] = t12;
+        $[29] = t13;
+        $[30] = t14;
+        $[31] = t7;
+        $[32] = t8;
+        $[33] = variant;
+        $[34] = t15;
+    } else t15 = $[34];
+    return t15;
+}
+function CheckableTag(t0) {
+    const $ = c(18);
+    const { children, checked: t1, onChange, disabled: t2, icon, className, style } = t0;
+    const checked = void 0 === t1 ? false : t1;
+    const disabled = void 0 === t2 ? false : t2;
+    const t3 = checked || void 0;
+    const t4 = disabled || void 0;
+    const t5 = disabled ? void 0 : 0;
+    let t6;
+    let t7;
+    if ($[0] !== checked || $[1] !== disabled || $[2] !== onChange) {
+        t6 = ()=>!disabled && onChange?.(!checked);
+        t7 = (e)=>{
+            if (!disabled && ("Enter" === e.key || " " === e.key)) {
+                e.preventDefault();
+                onChange?.(!checked);
+            }
+        };
+        $[0] = checked;
+        $[1] = disabled;
+        $[2] = onChange;
+        $[3] = t6;
+        $[4] = t7;
+    } else {
+        t6 = $[3];
+        t7 = $[4];
+    }
+    let t8;
+    if ($[5] !== icon) {
+        t8 = null != icon && /*#__PURE__*/ jsx("span", {
+            "data-tao-tag-icon": "",
+            children: icon
+        });
+        $[5] = icon;
+        $[6] = t8;
+    } else t8 = $[6];
+    let t9;
+    if ($[7] !== checked || $[8] !== children || $[9] !== className || $[10] !== style || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7 || $[16] !== t8) {
+        t9 = /*#__PURE__*/ jsxs("span", {
+            "data-tao-tag": "",
+            "data-tao-checkable": "",
+            "data-tao-checked": t3,
+            "data-tao-disabled": t4,
+            role: "checkbox",
+            "aria-checked": checked,
+            tabIndex: t5,
+            className: className,
+            style: style,
+            onClick: t6,
+            onKeyDown: t7,
+            children: [
+                t8,
+                children
+            ]
+        });
+        $[7] = checked;
+        $[8] = children;
+        $[9] = className;
+        $[10] = style;
+        $[11] = t3;
+        $[12] = t4;
+        $[13] = t5;
+        $[14] = t6;
+        $[15] = t7;
+        $[16] = t8;
+        $[17] = t9;
+    } else t9 = $[17];
+    return t9;
+}
+Tag.CheckableTag = CheckableTag;
+export { CheckableTag, Tag };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+export { TaoProvider, useTaoConfig, type TaoProviderProps, type TaoThemeConfig, type TaoSeedToken, type TaoSize, type TaoVariant, } from './provider/tao-provider';
+export { cx, type SemanticClassNames, type SemanticStyles } from './utils/semantic';
+export { Button, type ButtonProps, type ButtonSemanticPart } from './components/button/button';
+export { Input, type InputProps, type InputSemanticPart } from './components/input/input';
+export { Select, type SelectProps, type SelectOption, } from './components/select/select';
+export { FormField, type FormFieldProps, type FormFieldSemanticPart, } from './components/form-field/form-field';
+export { FormSection, type FormSectionProps, type FormSectionSemanticPart, } from './components/form-section/form-section';
+export { FormActions, type FormActionsProps, type FormActionsSemanticPart, } from './components/form-actions/form-actions';
+export { Drawer, type DrawerProps, type DrawerPlacement, type DrawerSemanticPart, } from './components/drawer/drawer';
+export { Switch, type SwitchProps, type SwitchSemanticPart } from './components/switch/switch';
+export { DatePicker, type DatePickerProps, } from './components/date-picker/date-picker';
+export { RangePicker, type RangePickerProps, } from './components/date-picker/range-picker';
+export { Checkbox, CheckboxGroup, type CheckboxProps, type CheckboxGroupProps, type CheckboxOptionType, type CheckboxSemanticPart, } from './components/checkbox/checkbox';
+export { Radio, RadioGroup, type RadioProps, type RadioGroupProps, type RadioOptionType, type RadioSemanticPart, } from './components/radio/radio';
+export { Tabs, type TabsProps, type TabItem, type TabsSemanticPart, } from './components/tabs/tabs';
+export { Pagination, type PaginationProps, type PaginationSemanticPart, } from './components/pagination/pagination';
+export { Table, type TableProps, type TableColumn, type TableRowSelection, type TableFilterItem, type TablePagination, type SortOrder, type SorterResult, type TableSemanticPart, } from './components/table/table';
+export { Splitter, type SplitterProps, type SplitterPanelProps, type SplitterSemanticPart, } from './components/splitter/splitter';
+export { Tag, CheckableTag, type TagProps, type CheckableTagProps, type TagColor, type TagVariant, type TagSemanticPart, } from './components/tag/tag';
+export { ScrollArea, type ScrollAreaProps, type ScrollAreaType, type ScrollAreaSemanticPart, } from './components/scroll-area/scroll-area';
+export { Stack, type StackProps } from './layouts/stack/stack';
+export { FormLayout, type FormLayoutProps } from './layouts/form-layout/form-layout';
+export { type FormatOptions, NumberInput, type NumberInputProps, type PadDecimalsOnBlur, type UseNumberInputOptions, type UseNumberInputReturn, useNumberInput, } from './number-input';

package/dist/index.js

@@ -0,0 +1,23 @@
+export { TaoProvider, useTaoConfig } from "./provider/tao-provider.js";
+export { cx } from "./utils/semantic.js";
+export { Button } from "./components/button/button.js";
+export { Input } from "./components/input/input.js";
+export { Select } from "./components/select/select.js";
+export { FormField } from "./components/form-field/form-field.js";
+export { FormSection } from "./components/form-section/form-section.js";
+export { FormActions } from "./components/form-actions/form-actions.js";
+export { Drawer } from "./components/drawer/drawer.js";
+export { Switch } from "./components/switch/switch.js";
+export { DatePicker } from "./components/date-picker/date-picker.js";
+export { RangePicker } from "./components/date-picker/range-picker.js";
+export { Checkbox, CheckboxGroup } from "./components/checkbox/checkbox.js";
+export { Radio, RadioGroup } from "./components/radio/radio.js";
+export { Tabs } from "./components/tabs/tabs.js";
+export { Pagination } from "./components/pagination/pagination.js";
+export { Table } from "./components/table/table.js";
+export { Splitter } from "./components/splitter/splitter.js";
+export { CheckableTag, Tag } from "./components/tag/tag.js";
+export { ScrollArea } from "./components/scroll-area/scroll-area.js";
+export { Stack } from "./layouts/stack/stack.js";
+export { FormLayout } from "./layouts/form-layout/form-layout.js";
+export { NumberInput, useNumberInput } from "./number-input/index.js";

package/dist/layouts/form-layout/form-layout.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import '../stack/layout.css';
+export interface FormLayoutProps {
+    children: ReactNode;
+}
+export declare function FormLayout({ children }: FormLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/layouts/form-layout/form-layout.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import "../stack/layout.css";
+function FormLayout(t0) {
+    const $ = c(2);
+    const { children } = t0;
+    let t1;
+    if ($[0] !== children) {
+        t1 = /*#__PURE__*/ jsx("div", {
+            "data-tao-form-layout": "",
+            children: children
+        });
+        $[0] = children;
+        $[1] = t1;
+    } else t1 = $[1];
+    return t1;
+}
+export { FormLayout };