@anyknown/ui 0.2.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/dist/themes.stylex.d.ts

@@ -17,6 +17,8 @@ export declare const lightColor: stylex.Theme<stylex.VarGroup<Readonly<{
     successSubtle: string;
     warning: string;
     warningSubtle: string;
+    info: string;
+    infoSubtle: string;
     focusRing: string;
     bone: string;
     sheen: string;
@@ -99,6 +101,8 @@ export declare const darkColor: stylex.Theme<stylex.VarGroup<Readonly<{
     successSubtle: string;
     warning: string;
     warningSubtle: string;
+    info: string;
+    infoSubtle: string;
     focusRing: string;
     bone: string;
     sheen: string;
@@ -182,6 +186,8 @@ export declare const light: readonly [stylex.Theme<stylex.VarGroup<Readonly<{
     successSubtle: string;
     warning: string;
     warningSubtle: string;
+    info: string;
+    infoSubtle: string;
     focusRing: string;
     bone: string;
     sheen: string;
@@ -258,6 +264,8 @@ export declare const dark: readonly [stylex.Theme<stylex.VarGroup<Readonly<{
     successSubtle: string;
     warning: string;
     warningSubtle: string;
+    info: string;
+    infoSubtle: string;
     focusRing: string;
     bone: string;
     sheen: string;

package/dist/themes.stylex.js

@@ -23,6 +23,8 @@ export const lightColor = stylex.createTheme(color, {
     successSubtle: "#E7F0EB",
     warning: "#9A6A1B",
     warningSubtle: "#F5EBD9",
+    info: "#2C5C86",
+    infoSubtle: "#E4EDF5",
     focusRing: "#23705A",
     bone: "#ECE9DF",
     sheen: "#F6F4EC",
@@ -105,6 +107,8 @@ export const darkColor = stylex.createTheme(color, {
     successSubtle: "#22352E",
     warning: "#D9A254",
     warningSubtle: "#3A2F1D",
+    info: "#6FA3CE",
+    infoSubtle: "#1E2C38",
     focusRing: "#4FA184",
     bone: "#2A2620",
     sheen: "#35302A",

package/dist/tokens.css

@@ -25,6 +25,8 @@ html {
 	--ak-success-subtle: #e7f0eb;
 	--ak-warning: #9a6a1b;
 	--ak-warning-subtle: #f5ebd9;
+	--ak-info: #2c5c86;
+	--ak-info-subtle: #e4edf5;
 	--ak-focus-ring: #23705a;
 	--ak-bone: #ece9df;
 	--ak-sheen: #f6f4ec;
@@ -71,6 +73,8 @@ html {
 		--ak-success-subtle: #22352e;
 		--ak-warning: #d9a254;
 		--ak-warning-subtle: #3a2f1d;
+		--ak-info: #6fa3ce;
+		--ak-info-subtle: #1e2c38;
 		--ak-focus-ring: #4fa184;
 		--ak-bone: #2a2620;
 		--ak-sheen: #35302a;
@@ -106,5 +110,7 @@ html {
 	--ak-success-subtle: #22352e;
 	--ak-warning: #d9a254;
 	--ak-warning-subtle: #3a2f1d;
+	--ak-info: #6fa3ce;
+	--ak-info-subtle: #1e2c38;
 	--ak-focus-ring: #4fa184;
 }

package/dist/tokens.stylex.d.ts

@@ -17,6 +17,8 @@ export declare const color: stylex.VarGroup<Readonly<{
     successSubtle: string;
     warning: string;
     warningSubtle: string;
+    info: string;
+    infoSubtle: string;
     focusRing: string;
     bone: string;
     sheen: string;

package/dist/tokens.stylex.js

@@ -21,6 +21,8 @@ export const color = stylex.defineVars({
     successSubtle: { default: "#E7F0EB", [DARK]: "#22352E" },
     warning: { default: "#9A6A1B", [DARK]: "#D9A254" },
     warningSubtle: { default: "#F5EBD9", [DARK]: "#3A2F1D" },
+    info: { default: "#2C5C86", [DARK]: "#6FA3CE" },
+    infoSubtle: { default: "#E4EDF5", [DARK]: "#1E2C38" },
     focusRing: { default: "#23705A", [DARK]: "#4FA184" },
     bone: { default: "#ECE9DF", [DARK]: "#2A2620" },
     sheen: { default: "#F6F4EC", [DARK]: "#35302A" },

package/package.json

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