@anyknown/ui 0.3.0 → 0.4.0

package/dist/components/badge/Badge.d.ts

@@ -1,5 +1,6 @@
 import * as stylex from "@stylexjs/stylex";
 import type { ComponentProps } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 declare const DOT_TONES: {
     readonly accent: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", string>;
@@ -18,8 +19,9 @@ export type BadgeProps = Omit<ComponentProps<"span">, "color"> & {
     variant?: "neutral" | "accent" | "success" | "danger" | "outline" | "mono";
     dot?: keyof typeof DOT_TONES;
     count?: number;
+    sx?: StyleArg;
 };
-export declare function Badge({ variant, dot, count, children, ...props }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ variant, dot, count, children, sx, ...props }: BadgeProps): import("react").JSX.Element;
 export type ChipProps = BadgeProps & {
     onRemove?: () => void;
     removeLabel: string;

package/dist/components/badge/Badge.js

@@ -71,8 +71,8 @@ const DOT_TONES = {
     danger: styles.dotDanger,
     warning: styles.dotWarning,
 };
-export function Badge({ variant = "neutral", dot, count, children, ...props }) {
-    return (_jsxs("span", { ...props, ...styled(props, styles.base, styles[variant]), children: [dot != null && _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot, DOT_TONES[dot]) }), children, count != null && _jsx("span", { ...stylex.props(styles.count), children: count })] }));
+export function Badge({ variant = "neutral", dot, count, children, sx, ...props }) {
+    return (_jsxs("span", { ...props, ...styled(props, styles.base, styles[variant], sx), children: [dot != null && _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot, DOT_TONES[dot]) }), children, count != null && _jsx("span", { ...stylex.props(styles.count), children: count })] }));
 }
 export function Chip({ onRemove, removeLabel, variant = "outline", children, ...props }) {
     return (_jsxs(Badge, { variant: variant, ...props, children: [children, onRemove != null && (_jsx("button", { type: "button", "aria-label": removeLabel, onClick: onRemove, ...stylex.props(reset.control, styles.remove), children: _jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "m1 1 6 6M7 1 1 7" }) }) }))] }));

package/dist/components/button/Button.d.ts

@@ -1,7 +1,11 @@
 import { type ComponentProps } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 type ButtonProps = ComponentProps<"button"> & {
     variant?: "primary" | "secondary" | "ghost" | "danger" | "dangerGhost";
-    size?: "sm" | "md";
+    size?: "xs" | "sm" | "md";
+    /** Square, no side padding — for a button whose whole label is one icon. */
+    icon?: boolean;
+    sx?: StyleArg;
 };
-export declare function Button({ variant, size, children, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, size, icon, children, ref, sx, ...props }: ButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/button/Button.js

@@ -40,6 +40,17 @@ const styles = stylex.create({
         minHeight: "1.75rem",
         fontSize: text.xs,
     },
+    xs: {
+        paddingBlock: 0,
+        paddingInline: space.xs,
+        minHeight: "1.5rem",
+        fontSize: text.xs,
+        gap: space.xxs,
+    },
+    // 圖示鈕:正方,邊長跟著該階的高,沒有左右內距
+    iconMd: { paddingInline: 0, width: "2.25rem" },
+    iconSm: { paddingInline: 0, width: "1.75rem" },
+    iconXs: { paddingInline: 0, width: "1.5rem" },
     // filter = 整塊布的落影(§3.3);ghost 是疏織,不落影
     primary: { color: color.accentText, filter: yarn.shadow },
     secondary: { color: color.text, filter: yarnSecondary.shadow },
@@ -69,7 +80,8 @@ const SILK = {
     danger: { palette: palette(yarnDanger), bandMax: 0.75 },
     dangerGhost: { palette: palette(yarnGhost), ghost: true, bandMax: 0.5 },
 };
-export function Button({ variant = "primary", size = "md", children, ref, ...props }) {
+const ICON_SIZE = { xs: "iconXs", sm: "iconSm", md: "iconMd" };
+export function Button({ variant = "primary", size = "md", icon = false, children, ref, sx, ...props }) {
     // ref callback + cleanup(React 19)管生命週期,不用 effect;
     // useCallback 鎖 identity,只有 variant 變了才重建織體
     const silk = useCallback((node) => {
@@ -82,5 +94,5 @@ export function Button({ variant = "primary", size = "md", children, ref, ...pro
         });
         return () => body.destroy();
     }, [variant]);
-    return (_jsxs("button", { type: "button", ...props, ref: (element) => assignRef(ref, element), ...styled(props, styles.base, styles[size], styles[variant]), children: [_jsx("svg", { ref: silk, "aria-hidden": "true", ...stylex.props(styles.silk) }), _jsx("span", { ...stylex.props(styles.label), children: children })] }));
+    return (_jsxs("button", { type: "button", ...props, ref: (element) => assignRef(ref, element), ...styled(props, styles.base, styles[size], icon && styles[ICON_SIZE[size]], styles[variant], sx), children: [_jsx("svg", { ref: silk, "aria-hidden": "true", ...stylex.props(styles.silk) }), _jsx("span", { ...stylex.props(styles.label), children: children })] }));
 }

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,8 +1,10 @@
 import { type ComponentProps, type ReactNode } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 export type CheckboxProps = Omit<ComponentProps<"input">, "type" | "children"> & {
     indeterminate?: boolean;
     label?: ReactNode;
     description?: ReactNode;
     onCheckedChange?: (checked: boolean) => void;
+    sx?: StyleArg;
 };
-export declare function Checkbox({ indeterminate, label, description, onCheckedChange, checked, defaultChecked, onChange, ref, ...props }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ indeterminate, label, description, onCheckedChange, checked, defaultChecked, onChange, ref, sx, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/checkbox/Checkbox.js

@@ -77,7 +77,7 @@ const styles = stylex.create({
     description: { display: "block", fontSize: text.xs, color: color.textMuted },
 });
 const BUCKETS = [styles.y0, styles.y1, styles.y2, styles.y3, styles.y4];
-export function Checkbox({ indeterminate = false, label, description, onCheckedChange, checked, defaultChecked, onChange, ref, ...props }) {
+export function Checkbox({ indeterminate = false, label, description, onCheckedChange, checked, defaultChecked, onChange, ref, sx, ...props }) {
     const clipId = useSvgId("ak-weave");
     const base = useId();
     const labelId = `${base}label`;
@@ -95,7 +95,7 @@ export function Checkbox({ indeterminate = false, label, description, onCheckedC
     const describedBy = [description != null ? descriptionId : null, field["aria-describedby"]]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("label", { ...stylex.props(styles.root), children: [_jsxs("span", { ...stylex.props(styles.box, filled && styles.boxOn), children: [_jsx("input", { type: "checkbox", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, ref: setNode, checked: isChecked, onChange: (event) => {
+    return (_jsxs("label", { ...stylex.props(styles.root, sx), children: [_jsxs("span", { ...stylex.props(styles.box, filled && styles.boxOn), children: [_jsx("input", { type: "checkbox", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, ref: setNode, checked: isChecked, onChange: (event) => {
                             setChecked(event.currentTarget.checked);
                             onChange?.(event);
                         }, ...styled(props, styles.input) }), _jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...stylex.props(styles.svg), children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { rx: "3", ...stylex.props(styles.weave, filled && styles.weaveOn) }) }) }), _jsxs("g", { clipPath: `url(#${clipId})`, children: [_jsxs("g", { ...stylex.props(styles.cloth), children: [_jsx("g", { ...stylex.props(styles.un), children: CLOTH.under.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) }), _jsx("g", { ...stylex.props(styles.sh), children: CLOTH.seams.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) }), CLOTH.face.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw, ...stylex.props(BUCKETS[t.bucket]) }, i))), _jsx("g", { ...stylex.props(styles.hi), children: CLOTH.hi.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) })] }), _jsxs("g", { ...stylex.props(styles.mark), children: [_jsx("path", { d: indeterminate ? DASH_D : CHECK_D, strokeWidth: "2.1", transform: "translate(0.35 0.5)", ...stylex.props(styles.threadShadow) }), _jsx("path", { d: indeterminate ? DASH_D : CHECK_D, strokeWidth: "1.95", ...stylex.props(styles.threadCore) })] })] })] })] }), (label != null || description != null) && (_jsxs("span", { children: [label != null && (_jsx("span", { id: labelId, ...stylex.props(styles.labelText), children: label })), description != null && (_jsx("span", { id: descriptionId, ...stylex.props(styles.description), children: description }))] }))] }));

package/dist/components/input/Input.d.ts

@@ -1,5 +1,6 @@
 import * as stylex from "@stylexjs/stylex";
 import type { ComponentProps, ReactNode } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 export declare const controlStyles: Readonly<{
     readonly base: Readonly<{
         readonly width: stylex.StyleXClassNameFor<"width", "100%">;
@@ -44,5 +45,6 @@ export type InputProps = Omit<ComponentProps<"input">, "size"> & {
     size?: "sm" | "md";
     invalid?: boolean;
     leadingIcon?: ReactNode;
+    sx?: StyleArg;
 };
-export declare function Input({ size, invalid, leadingIcon, ...props }: InputProps): import("react").JSX.Element;
+export declare function Input({ size, invalid, leadingIcon, sx, ...props }: InputProps): import("react").JSX.Element;

package/dist/components/input/Input.js

@@ -54,10 +54,10 @@ const styles = stylex.create({
     withIconMd: { paddingInlineStart: space.xl },
     withIconSm: { paddingInlineStart: space.lg },
 });
-export function Input({ size = "md", invalid, leadingIcon, ...props }) {
+export function Input({ size = "md", invalid, leadingIcon, sx, ...props }) {
     const { invalid: fieldInvalid, ...field } = useFieldControl(props);
     const isInvalid = invalid ?? fieldInvalid;
-    const input = (_jsx("input", { ...props, ...field, "aria-invalid": isInvalid || undefined, ...styled(props, controlStyles.base, controlStyles[size], isInvalid && controlStyles.invalid, Boolean(leadingIcon) && (size === "sm" ? styles.withIconSm : styles.withIconMd)) }));
+    const input = (_jsx("input", { ...props, ...field, "aria-invalid": isInvalid || undefined, ...styled(props, controlStyles.base, controlStyles[size], isInvalid && controlStyles.invalid, Boolean(leadingIcon) && (size === "sm" ? styles.withIconSm : styles.withIconMd), sx) }));
     if (!leadingIcon)
         return input;
     return (_jsxs("span", { ...stylex.props(styles.affix), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.icon), children: leadingIcon }), input] }));

package/dist/components/label/Label.d.ts

@@ -1,7 +1,9 @@
 import type { ComponentProps } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 export type LabelProps = ComponentProps<"label"> & {
     required?: boolean;
     optional?: boolean;
     optionalLabel?: string;
+    sx?: StyleArg;
 };
-export declare function Label({ required, optional, optionalLabel, children, ...props }: LabelProps): import("react").JSX.Element;
+export declare function Label({ required, optional, optionalLabel, children, sx, ...props }: LabelProps): import("react").JSX.Element;

package/dist/components/label/Label.js

@@ -16,6 +16,6 @@ const styles = stylex.create({
     required: { color: color.danger },
     optional: { fontWeight: 400, fontSize: text.xs, color: color.textFaint },
 });
-export function Label({ required, optional, optionalLabel = "選填", children, ...props }) {
-    return (_jsxs("label", { ...props, ...styled(props, styles.base), children: [children, required && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.required), children: "*" })), optional && _jsxs("span", { ...stylex.props(styles.optional), children: [" ", optionalLabel] })] }));
+export function Label({ required, optional, optionalLabel = "選填", children, sx, ...props }) {
+    return (_jsxs("label", { ...props, ...styled(props, styles.base, sx), children: [children, required && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.required), children: "*" })), optional && _jsxs("span", { ...stylex.props(styles.optional), children: [" ", optionalLabel] })] }));
 }

package/dist/components/switch/Switch.d.ts

@@ -1,7 +1,9 @@
 import { type ComponentProps, type ReactNode } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 export type SwitchProps = Omit<ComponentProps<"input">, "type" | "role" | "children"> & {
     label?: ReactNode;
     description?: ReactNode;
     onCheckedChange?: (checked: boolean) => void;
+    sx?: StyleArg;
 };
-export declare function Switch({ label, description, onCheckedChange, checked, defaultChecked, onChange, ...props }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ label, description, onCheckedChange, checked, defaultChecked, onChange, sx, ...props }: SwitchProps): import("react").JSX.Element;

package/dist/components/switch/Switch.js

@@ -91,7 +91,7 @@ const styles = stylex.create({
     description: { display: "block", fontSize: text.xs, color: color.textMuted },
 });
 const BUCKETS = [styles.y0, styles.y1, styles.y2, styles.y3, styles.y4];
-export function Switch({ label, description, onCheckedChange, checked, defaultChecked, onChange, ...props }) {
+export function Switch({ label, description, onCheckedChange, checked, defaultChecked, onChange, sx, ...props }) {
     const clipId = useSvgId("ak-weave");
     const base = useId();
     const labelId = `${base}label`;
@@ -101,7 +101,7 @@ export function Switch({ label, description, onCheckedChange, checked, defaultCh
         .filter(Boolean)
         .join(" ");
     const [isOn, setOn] = useControllableState(checked, defaultChecked ?? false, onCheckedChange);
-    return (_jsxs("label", { ...stylex.props(styles.root), children: [(label != null || description != null) && (_jsxs("span", { children: [label != null && (_jsx("span", { id: labelId, ...stylex.props(styles.labelText), children: label })), description != null && (_jsx("span", { id: descriptionId, ...stylex.props(styles.description), children: description }))] })), _jsxs("span", { ...stylex.props(styles.track), children: [_jsx("input", { type: "checkbox", role: "switch", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, checked: isOn, "aria-checked": isOn, onChange: (event) => {
+    return (_jsxs("label", { ...stylex.props(styles.root, sx), children: [(label != null || description != null) && (_jsxs("span", { children: [label != null && (_jsx("span", { id: labelId, ...stylex.props(styles.labelText), children: label })), description != null && (_jsx("span", { id: descriptionId, ...stylex.props(styles.description), children: description }))] })), _jsxs("span", { ...stylex.props(styles.track), children: [_jsx("input", { type: "checkbox", role: "switch", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, checked: isOn, "aria-checked": isOn, onChange: (event) => {
                             setOn(event.currentTarget.checked);
                             onChange?.(event);
                         }, ...styled(props, styles.input) }), _jsxs("svg", { viewBox: "0 0 44 22", "aria-hidden": "true", ...stylex.props(styles.svg), children: [_jsx("path", { d: "M11,11 H33", ...stylex.props(styles.guide) }), _jsxs("g", { ...stylex.props(styles.cloth, isOn && styles.clothOn), children: [_jsxs("defs", { children: [_jsx("clipPath", { id: `${clipId}p`, children: _jsx("rect", { x: "1", y: "1", width: "42", height: "20", rx: "10" }) }), _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: "1", y: "-3", height: "28", ...stylex.props(styles.pillclip, isOn && styles.pillclipOn) }) })] }), _jsx("g", { clipPath: `url(#${clipId}p)`, children: _jsxs("g", { clipPath: `url(#${clipId})`, ...stylex.props(styles.yarns), children: [_jsx("g", { ...stylex.props(styles.un), children: CLOTH.under.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) }), _jsx("g", { ...stylex.props(styles.sh), children: CLOTH.seams.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) }), CLOTH.face.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw, ...stylex.props(BUCKETS[t.bucket]) }, i))), _jsx("g", { ...stylex.props(styles.hi), children: CLOTH.hi.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) })] }) })] }), _jsx("circle", { cx: "11", cy: "11", r: "8.4", ...stylex.props(styles.thumb, isOn && styles.thumbOn) })] })] })] }));

package/dist/components/textarea/Textarea.d.ts

@@ -1,7 +1,9 @@
 import type { ComponentProps } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 export type TextareaProps = ComponentProps<"textarea"> & {
     autoGrow?: boolean;
     maxRows?: number;
     invalid?: boolean;
+    sx?: StyleArg;
 };
-export declare function Textarea({ autoGrow, maxRows, invalid, ...props }: TextareaProps): import("react").JSX.Element;
+export declare function Textarea({ autoGrow, maxRows, invalid, sx, ...props }: TextareaProps): import("react").JSX.Element;

package/dist/components/textarea/Textarea.js

@@ -18,8 +18,8 @@ const styles = stylex.create({
     },
     maxRows: (rows) => ({ maxHeight: `calc(${rows} * 1.6em + ${space.md})` }),
 });
-export function Textarea({ autoGrow, maxRows, invalid, ...props }) {
+export function Textarea({ autoGrow, maxRows, invalid, sx, ...props }) {
     const { invalid: fieldInvalid, ...field } = useFieldControl(props);
     const isInvalid = invalid ?? fieldInvalid;
-    return (_jsx("textarea", { ...props, ...field, "aria-invalid": isInvalid || undefined, ...styled(props, controlStyles.base, styles.base, autoGrow && styles.autoGrow, maxRows != null && styles.maxRows(maxRows), isInvalid && controlStyles.invalid) }));
+    return (_jsx("textarea", { ...props, ...field, "aria-invalid": isInvalid || undefined, ...styled(props, controlStyles.base, styles.base, autoGrow && styles.autoGrow, maxRows != null && styles.maxRows(maxRows), isInvalid && controlStyles.invalid, sx) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@anyknown/ui",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "AnyKnown design system — StyleX tokens, themes, and 34 components",
 	"homepage": "https://ui.anyknown.com",
 	"bugs": {