@rockshin/tao-ui 0.0.1

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './drawer.css';
+export type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type DrawerSemanticPart = 'root' | 'header' | 'title' | 'body' | 'overlay';
+export interface DrawerProps {
+    open: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    placement?: DrawerPlacement;
+    width?: number | string;
+    height?: number | string;
+    children?: ReactNode;
+    classNames?: SemanticClassNames<DrawerSemanticPart>;
+    styles?: SemanticStyles<DrawerSemanticPart>;
+}
+export declare function Drawer({ open, onClose, title, placement, width, height, children, classNames, styles: stylesProp, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer/drawer.js

@@ -0,0 +1,184 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cx } from "../../utils/semantic.js";
+import "./drawer.css";
+import * as __rspack_external__radix_ui_react_dialog_6b867f3d from "@radix-ui/react-dialog";
+function Drawer(t0) {
+    const $ = c(42);
+    const { open, onClose, title, placement: t1, width, height, children, classNames, styles: stylesProp } = t0;
+    const placement = void 0 === t1 ? "right" : t1;
+    const isHorizontal = "left" === placement || "right" === placement;
+    let contentStyle;
+    if ($[0] !== height || $[1] !== isHorizontal || $[2] !== width) {
+        contentStyle = {};
+        if (isHorizontal && null != width) contentStyle.width = "number" == typeof width ? `${width}px` : width;
+        if (!isHorizontal && null != height) contentStyle.height = "number" == typeof height ? `${height}px` : height;
+        $[0] = height;
+        $[1] = isHorizontal;
+        $[2] = width;
+        $[3] = contentStyle;
+    } else contentStyle = $[3];
+    let t2;
+    if ($[4] !== onClose) {
+        t2 = (v)=>{
+            if (!v) onClose?.();
+        };
+        $[4] = onClose;
+        $[5] = t2;
+    } else t2 = $[5];
+    const t3 = classNames?.overlay;
+    let t4;
+    if ($[6] !== t3) {
+        t4 = cx(t3);
+        $[6] = t3;
+        $[7] = t4;
+    } else t4 = $[7];
+    const t5 = stylesProp?.overlay;
+    let t6;
+    if ($[8] !== t4 || $[9] !== t5) {
+        t6 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Overlay, {
+            "data-tao-drawer-overlay": "",
+            className: t4,
+            style: t5
+        });
+        $[8] = t4;
+        $[9] = t5;
+        $[10] = t6;
+    } else t6 = $[10];
+    const t7 = stylesProp?.root;
+    let t8;
+    if ($[11] !== contentStyle || $[12] !== t7) {
+        t8 = {
+            ...contentStyle,
+            ...t7
+        };
+        $[11] = contentStyle;
+        $[12] = t7;
+        $[13] = t8;
+    } else t8 = $[13];
+    const t9 = classNames?.root;
+    let t10;
+    if ($[14] !== t9) {
+        t10 = cx(t9);
+        $[14] = t9;
+        $[15] = t10;
+    } else t10 = $[15];
+    let t11;
+    if ($[16] !== classNames?.header || $[17] !== classNames?.title || $[18] !== onClose || $[19] !== stylesProp?.header || $[20] !== stylesProp?.title || $[21] !== title) {
+        t11 = (null != title || null != onClose) && /*#__PURE__*/ jsxs("div", {
+            "data-tao-drawer-header": "",
+            className: cx(classNames?.header),
+            style: stylesProp?.header,
+            children: [
+                null != title && /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Title, {
+                    "data-tao-drawer-title": "",
+                    className: cx(classNames?.title),
+                    style: stylesProp?.title,
+                    children: title
+                }),
+                null != onClose && /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "data-tao-drawer-close": "",
+                    onClick: onClose,
+                    "aria-label": "Close",
+                    children: /*#__PURE__*/ jsx(CloseIcon, {})
+                })
+            ]
+        });
+        $[16] = classNames?.header;
+        $[17] = classNames?.title;
+        $[18] = onClose;
+        $[19] = stylesProp?.header;
+        $[20] = stylesProp?.title;
+        $[21] = title;
+        $[22] = t11;
+    } else t11 = $[22];
+    const t12 = classNames?.body;
+    let t13;
+    if ($[23] !== t12) {
+        t13 = cx(t12);
+        $[23] = t12;
+        $[24] = t13;
+    } else t13 = $[24];
+    const t14 = stylesProp?.body;
+    let t15;
+    if ($[25] !== children || $[26] !== t13 || $[27] !== t14) {
+        t15 = /*#__PURE__*/ jsx("div", {
+            "data-tao-drawer-body": "",
+            className: t13,
+            style: t14,
+            children: children
+        });
+        $[25] = children;
+        $[26] = t13;
+        $[27] = t14;
+        $[28] = t15;
+    } else t15 = $[28];
+    let t16;
+    if ($[29] !== placement || $[30] !== t10 || $[31] !== t11 || $[32] !== t15 || $[33] !== t8) {
+        t16 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dialog_6b867f3d.Content, {
+            "data-tao-drawer": "",
+            "data-tao-placement": placement,
+            style: t8,
+            className: t10,
+            "aria-describedby": void 0,
+            children: [
+                t11,
+                t15
+            ]
+        });
+        $[29] = placement;
+        $[30] = t10;
+        $[31] = t11;
+        $[32] = t15;
+        $[33] = t8;
+        $[34] = t16;
+    } else t16 = $[34];
+    let t17;
+    if ($[35] !== t16 || $[36] !== t6) {
+        t17 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dialog_6b867f3d.Portal, {
+            children: [
+                t6,
+                t16
+            ]
+        });
+        $[35] = t16;
+        $[36] = t6;
+        $[37] = t17;
+    } else t17 = $[37];
+    let t18;
+    if ($[38] !== open || $[39] !== t17 || $[40] !== t2) {
+        t18 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Root, {
+            open: open,
+            onOpenChange: t2,
+            children: t17
+        });
+        $[38] = open;
+        $[39] = t17;
+        $[40] = t2;
+        $[41] = t18;
+    } else t18 = $[41];
+    return t18;
+}
+function CloseIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M18 6 6 18M6 6l12 12"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+export { Drawer };

package/dist/components/form-actions/form-actions.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import '../form-field/form.css';
+export type FormActionsSemanticPart = 'root';
+export interface FormActionsProps {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<FormActionsSemanticPart>;
+    styles?: SemanticStyles<FormActionsSemanticPart>;
+}
+export declare function FormActions({ children, className, style, classNames, styles, }: FormActionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-actions/form-actions.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cx } from "../../utils/semantic.js";
+import "../form-field/form.css";
+function FormActions(t0) {
+    const $ = c(10);
+    const { children, className, style, classNames, styles } = t0;
+    const t1 = classNames?.root;
+    let t2;
+    if ($[0] !== className || $[1] !== t1) {
+        t2 = cx(t1, className);
+        $[0] = className;
+        $[1] = t1;
+        $[2] = t2;
+    } else t2 = $[2];
+    const t3 = styles?.root;
+    let t4;
+    if ($[3] !== style || $[4] !== t3) {
+        t4 = {
+            ...t3,
+            ...style
+        };
+        $[3] = style;
+        $[4] = t3;
+        $[5] = t4;
+    } else t4 = $[5];
+    let t5;
+    if ($[6] !== children || $[7] !== t2 || $[8] !== t4) {
+        t5 = /*#__PURE__*/ jsx("div", {
+            className: t2,
+            style: t4,
+            "data-tao-form-actions": "",
+            children: children
+        });
+        $[6] = children;
+        $[7] = t2;
+        $[8] = t4;
+        $[9] = t5;
+    } else t5 = $[9];
+    return t5;
+}
+export { FormActions };

package/dist/components/form-field/form-field.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './form.css';
+export type FormFieldSemanticPart = 'root' | 'label' | 'error' | 'description';
+export interface FormFieldProps {
+    label: string;
+    htmlFor?: string;
+    required?: boolean;
+    error?: string;
+    description?: string;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<FormFieldSemanticPart>;
+    styles?: SemanticStyles<FormFieldSemanticPart>;
+}
+export declare function FormField({ label, htmlFor, required, error, description, children, className, style, classNames, styles, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-field/form-field.js

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cx } from "../../utils/semantic.js";
+import "./form.css";
+function FormField(t0) {
+    const $ = c(27);
+    const { label, htmlFor, required, error, description, children, className, style, classNames, styles } = t0;
+    const t1 = classNames?.root;
+    let t2;
+    if ($[0] !== className || $[1] !== t1) {
+        t2 = cx(t1, className);
+        $[0] = className;
+        $[1] = t1;
+        $[2] = t2;
+    } else t2 = $[2];
+    const t3 = styles?.root;
+    let t4;
+    if ($[3] !== style || $[4] !== t3) {
+        t4 = {
+            ...t3,
+            ...style
+        };
+        $[3] = style;
+        $[4] = t3;
+        $[5] = t4;
+    } else t4 = $[5];
+    const t5 = classNames?.label;
+    const t6 = styles?.label;
+    let t7;
+    if ($[6] !== required) {
+        t7 = required && /*#__PURE__*/ jsx("span", {
+            "data-tao-required": "",
+            "aria-hidden": "true",
+            children: "*"
+        });
+        $[6] = required;
+        $[7] = t7;
+    } else t7 = $[7];
+    let t8;
+    if ($[8] !== htmlFor || $[9] !== label || $[10] !== t5 || $[11] !== t6 || $[12] !== t7) {
+        t8 = /*#__PURE__*/ jsxs("label", {
+            htmlFor: htmlFor,
+            className: t5,
+            style: t6,
+            "data-tao-form-label": "",
+            children: [
+                label,
+                t7
+            ]
+        });
+        $[8] = htmlFor;
+        $[9] = label;
+        $[10] = t5;
+        $[11] = t6;
+        $[12] = t7;
+        $[13] = t8;
+    } else t8 = $[13];
+    let t9;
+    if ($[14] !== classNames?.description || $[15] !== classNames?.error || $[16] !== description || $[17] !== error || $[18] !== styles?.description || $[19] !== styles?.error) {
+        t9 = error ? /*#__PURE__*/ jsx("p", {
+            className: classNames?.error,
+            style: styles?.error,
+            "data-tao-form-error": "",
+            role: "alert",
+            children: error
+        }) : description ? /*#__PURE__*/ jsx("p", {
+            className: classNames?.description,
+            style: styles?.description,
+            "data-tao-form-description": "",
+            children: description
+        }) : null;
+        $[14] = classNames?.description;
+        $[15] = classNames?.error;
+        $[16] = description;
+        $[17] = error;
+        $[18] = styles?.description;
+        $[19] = styles?.error;
+        $[20] = t9;
+    } else t9 = $[20];
+    let t10;
+    if ($[21] !== children || $[22] !== t2 || $[23] !== t4 || $[24] !== t8 || $[25] !== t9) {
+        t10 = /*#__PURE__*/ jsxs("div", {
+            className: t2,
+            style: t4,
+            "data-tao-form-field": "",
+            children: [
+                t8,
+                children,
+                t9
+            ]
+        });
+        $[21] = children;
+        $[22] = t2;
+        $[23] = t4;
+        $[24] = t8;
+        $[25] = t9;
+        $[26] = t10;
+    } else t10 = $[26];
+    return t10;
+}
+export { FormField };