@haklex/rich-editor-ui 0.0.2 → 0.0.4

package/dist/components/animated-tabs/index.d.ts

@@ -0,0 +1,13 @@
+export interface Tab {
+    id: string;
+    label: string;
+}
+export interface AnimatedTabsProps {
+    tabs: Tab[];
+    defaultTab?: string;
+    value?: string;
+    onChange?: (tabId: string) => void;
+    className?: string;
+}
+export declare function AnimatedTabs({ tabs, defaultTab, value, onChange, className, }: AnimatedTabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/animated-tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/animated-tabs/index.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAWD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,UAAU,EACV,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CAkFnB"}

package/dist/components/animated-tabs/styles.css.d.ts

@@ -0,0 +1,7 @@
+export declare const root: string;
+export declare const tablist: string;
+export declare const tab: string;
+export declare const tabActive: string;
+export declare const border: string;
+export declare const indicator: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/components/animated-tabs/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/animated-tabs/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,QAEf,CAAA;AAEF,eAAO,MAAM,OAAO,QAElB,CAAA;AAEF,eAAO,MAAM,GAAG,QAoBd,CAAA;AAEF,eAAO,MAAM,SAAS,QAEpB,CAAA;AAEF,eAAO,MAAM,MAAM,QAOjB,CAAA;AAEF,eAAO,MAAM,SAAS,QAMpB,CAAA"}

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

@@ -0,0 +1,11 @@
+export interface AnimatedCheckboxProps {
+    label?: string;
+    description?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function AnimatedCheckbox({ label, description, checked: controlledChecked, defaultChecked, onChange, disabled, className, }: AnimatedCheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,OAAO,EAAE,iBAAiB,EAC1B,cAAsB,EACtB,QAAQ,EACR,QAAgB,EAChB,SAAS,GACV,EAAE,qBAAqB,2CAsFvB"}

package/dist/components/checkbox/styles.css.d.ts

@@ -0,0 +1,16 @@
+export declare const root: string;
+export declare const rootDisabled: string;
+export declare const box: string;
+export declare const boxUnchecked: string;
+export declare const boxChecked: string;
+export declare const boxBouncing: string;
+export declare const checkmark: string;
+export declare const checkmarkVisible: string;
+export declare const checkmarkHidden: string;
+export declare const ripple: string;
+export declare const rippleActive: string;
+export declare const labelArea: string;
+export declare const label: string;
+export declare const labelDisabled: string;
+export declare const description: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/components/checkbox/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/styles.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,IAAI,QAiBf,CAAA;AAEF,eAAO,MAAM,YAAY,QAGvB,CAAA;AAEF,eAAO,MAAM,GAAG,QAad,CAAA;AAEF,eAAO,MAAM,YAAY,QAGvB,CAAA;AAEF,eAAO,MAAM,UAAU,QAGrB,CAAA;AAEF,eAAO,MAAM,WAAW,QAEtB,CAAA;AAEF,eAAO,MAAM,SAAS,QAIpB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAG3B,CAAA;AAEF,eAAO,MAAM,eAAe,QAG1B,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,SAAS,QAIpB,CAAA;AAEF,eAAO,MAAM,KAAK,QAMhB,CAAA;AAEF,eAAO,MAAM,aAAa,QAExB,CAAA;AAEF,eAAO,MAAM,WAAW,QAItB,CAAA"}

package/dist/components/color-picker/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/styles.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,OAAO,QAgBlB,CAAA;AAEF,eAAO,MAAM,YAAY,QAIvB,CAAA;AAEF,eAAO,MAAM,aAAa,QAIxB,CAAA;AAEF,eAAO,MAAM,UAAU,QAKrB,CAAA;AAEF,eAAO,MAAM,cAAc,QAIzB,CAAA;AAEF,eAAO,MAAM,KAAK,QAGhB,CAAA;AAMF,eAAO,MAAM,IAAI,QAIf,CAAA;AAEF,eAAO,MAAM,MAAM,QAgBjB,CAAA;AAEF,eAAO,MAAM,SAAS,QAKpB,CAAA;AAEF,eAAO,MAAM,WAAW,QAKtB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/styles.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,OAAO,QAgBlB,CAAA;AAEF,eAAO,MAAM,YAAY,QAIvB,CAAA;AAEF,eAAO,MAAM,aAAa,QAIxB,CAAA;AAEF,eAAO,MAAM,UAAU,QAKrB,CAAA;AAEF,eAAO,MAAM,cAAc,QAIzB,CAAA;AAEF,eAAO,MAAM,KAAK,QAQhB,CAAA;AAEF,eAAO,MAAM,IAAI,QAIf,CAAA;AAEF,eAAO,MAAM,MAAM,QAgBjB,CAAA;AAEF,eAAO,MAAM,SAAS,QAKpB,CAAA;AAEF,eAAO,MAAM,WAAW,QAKtB,CAAA"}

package/dist/components/dialog/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/styles.css.ts"],"names":[],"mappings":"AA0BA,eAAO,MAAM,QAAQ,QAKnB,CAAA;AAUF,eAAO,MAAM,KAAK,QAyBhB,CAAA;AAUF,eAAO,MAAM,WAAW,QA8BtB,CAAA;AASF,eAAO,MAAM,MAAM,QAUjB,CAAA;AAEF,eAAO,MAAM,MAAM,QAWjB,CAAA;AAEF,eAAO,MAAM,KAAK,QAOhB,CAAA;AAEF,eAAO,MAAM,WAAW,QAKtB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/styles.css.ts"],"names":[],"mappings":"AA0BA,eAAO,MAAM,QAAQ,QAanB,CAAA;AAEF,eAAO,MAAM,KAAK,QAiChB,CAAA;AAEF,eAAO,MAAM,WAAW,QA8BtB,CAAA;AASF,eAAO,MAAM,MAAM,QAUjB,CAAA;AAEF,eAAO,MAAM,MAAM,QAWjB,CAAA;AAEF,eAAO,MAAM,KAAK,QAOhB,CAAA;AAEF,eAAO,MAAM,WAAW,QAKtB,CAAA"}

package/dist/components/popover/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/popover/styles.css.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,KAAK,QAUhB,CAAA;AAeF,eAAO,MAAM,KAAK,QAIhB,CAAA;AAWF,eAAO,MAAM,KAAK,QAKhB,CAAA;AAEF,eAAO,MAAM,WAAW,QAKtB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/popover/styles.css.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,KAAK,QAsBhB,CAAA;AAEF,eAAO,MAAM,KAAK,QAIhB,CAAA;AAWF,eAAO,MAAM,KAAK,QAKhB,CAAA;AAEF,eAAO,MAAM,WAAW,QAKtB,CAAA"}

package/dist/components/segmented-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAKrD,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC7D,KAAK,EAAE,CAAC,CAAA;IACR,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC9D,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAA;IAChC,KAAK,EAAE,CAAC,CAAA;IACR,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAW,EACX,SAAiB,EACjB,SAAS,GACV,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAmH1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAKrD,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC7D,KAAK,EAAE,CAAC,CAAA;IACR,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC9D,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAA;IAChC,KAAK,EAAE,CAAC,CAAA;IACR,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAW,EACX,SAAiB,EACjB,SAAS,GACV,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAwH1B"}

package/dist/components/segmented-control/styles.css.d.ts

@@ -1,11 +1,56 @@
-export declare const container: string;
-export declare const containerFullWidth: string;
-export declare const sizeVariants: Record<"sm" | "md", string>;
-export declare const indicator: string;
-export declare const indicatorHidden: string;
-export declare const item: string;
-export declare const itemActive: string;
-export declare const itemDisabled: string;
-export declare const itemFullWidth: string;
-export declare const itemPaddingVariants: Record<"sm" | "md", string>;
+export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            height: "2rem";
+            fontSize: "0.75rem";
+        };
+        md: {
+            height: "2.5rem";
+            fontSize: "0.875rem";
+        };
+    };
+    fullWidth: {
+        true: {
+            width: "100%";
+        };
+        false: {};
+    };
+}>;
+export declare const indicator: import('@vanilla-extract/recipes').RuntimeFn<{
+    ready: {
+        true: {};
+        false: {
+            opacity: number;
+        };
+    };
+}>;
+export declare const item: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            padding: "0 0.75rem";
+        };
+        md: {
+            padding: "0 1rem";
+        };
+    };
+    active: {
+        true: {
+            color: `var(--${string})`;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            pointerEvents: "none";
+            opacity: number;
+        };
+        false: {};
+    };
+    fullWidth: {
+        true: {
+            flex: number;
+        };
+        false: {};
+    };
+}>;
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/components/segmented-control/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAOpB,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAE7B,CAAA;AAEF,eAAO,MAAM,YAAY,6BASvB,CAAA;AAEF,eAAO,MAAM,SAAS,QASpB,CAAA;AAEF,eAAO,MAAM,eAAe,QAE1B,CAAA;AAEF,eAAO,MAAM,IAAI,QAsBf,CAAA;AAEF,eAAO,MAAM,UAAU,QAErB,CAAA;AAEF,eAAO,MAAM,YAAY,QAGvB,CAAA;AAEF,eAAO,MAAM,aAAa,QAExB,CAAA;AAEF,eAAO,MAAM,mBAAmB,6BAO9B,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA+BpB,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;EAsBpB,CAAA;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0Df,CAAA"}

package/dist/components/tooltip/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/styles.css.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,KAAK,QAgBhB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/styles.css.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,KAAK,QA4BhB,CAAA"}

package/dist/index.d.ts

@@ -1,3 +1,7 @@
+export type { AnimatedTabsProps, Tab as AnimatedTabsTab, } from './components/animated-tabs';
+export { AnimatedTabs } from './components/animated-tabs';
+export type { AnimatedCheckboxProps } from './components/checkbox';
+export { AnimatedCheckbox } from './components/checkbox';
 export type { ColorPickerProps } from './components/color-picker';
 export { ColorPicker } from './components/color-picker';
 export type { DialogBackdropProps, DialogCloseProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogPopupProps, DialogPortalProps, DialogProps, DialogTitleProps, DialogTriggerProps, } from './components/dialog';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAC/D,YAAY,EACV,eAAe,EACf,oBAAoB,GACrB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,aAAa,GACd,MAAM,2BAA2B,CAAA;AAClC,YAAY,EACV,6BAA6B,EAC7B,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,sBAAsB,EACtB,iBAAiB,EACjB,2BAA2B,EAC3B,0BAA0B,EAC1B,0BAA0B,EAC1B,wBAAwB,GACzB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EACL,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,4BAA4B,CAAA;AACnC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,YAAY,EACV,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AACjE,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,cAAc,EACd,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,cAAc,GACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,iBAAiB,EACjB,GAAG,IAAI,eAAe,GACvB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,YAAY,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAC/D,YAAY,EACV,eAAe,EACf,oBAAoB,GACrB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,aAAa,GACd,MAAM,2BAA2B,CAAA;AAClC,YAAY,EACV,6BAA6B,EAC7B,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,sBAAsB,EACtB,iBAAiB,EACjB,2BAA2B,EAC3B,0BAA0B,EAC1B,0BAA0B,EAC1B,wBAAwB,GACzB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EACL,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,4BAA4B,CAAA;AACnC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,YAAY,EACV,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AACjE,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,cAAc,EACd,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,cAAc,GACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,0BAA0B,CAAA"}

package/dist/index.mjs

@@ -1,32 +1,213 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, createContext, use, useSyncExternalStore, createElement } from "react";
 import { ChevronDown, Check, X } from "lucide-react";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
-import { createContext, useMemo, use, useState, useEffect, useSyncExternalStore, useCallback, createElement, useRef } from "react";
+import { PortalThemeWrapper, PortalThemeProvider } from "@haklex/rich-style-token";
+import { PortalThemeProvider as PortalThemeProvider2, PortalThemeWrapper as PortalThemeWrapper2, usePortalTheme } from "@haklex/rich-style-token";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { Menu } from "@base-ui/react/menu";
 import { Tooltip } from "@base-ui/react/tooltip";
-const PortalThemeContext = createContext({
-  className: ""
-});
-function PortalThemeProvider({
-  className,
-  children
+var root$1 = "iryuae0";
+var tablist = "iryuae1";
+var tab = "iryuae2";
+var tabActive = "iryuae3";
+var border = "iryuae4";
+var indicator$1 = "iryuae5";
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function AnimatedTabs({
+  tabs,
+  defaultTab,
+  value,
+  onChange,
+  className
 }) {
-  return /* @__PURE__ */ jsx(
-    PortalThemeContext.Provider,
-    {
-      value: useMemo(() => ({ className }), [className]),
-      children
-    }
+  const isControlled = value !== void 0;
+  const [internalTab, setInternalTab] = useState(
+    defaultTab ?? tabs[0]?.id ?? ""
   );
+  const activeTab = isControlled ? value : internalTab;
+  const [indicator2, setIndicator] = useState({
+    left: 0,
+    width: 0
+  });
+  const tabRefs = useRef(/* @__PURE__ */ new Map());
+  const containerRef = useRef(null);
+  const updateIndicator = useCallback(() => {
+    const activeEl = tabRefs.current.get(activeTab);
+    const container2 = containerRef.current;
+    if (activeEl && container2) {
+      const containerRect = container2.getBoundingClientRect();
+      const tabRect = activeEl.getBoundingClientRect();
+      setIndicator({
+        left: tabRect.left - containerRect.left,
+        width: tabRect.width
+      });
+    }
+  }, [activeTab]);
+  useEffect(() => {
+    updateIndicator();
+  }, [updateIndicator]);
+  useEffect(() => {
+    window.addEventListener("resize", updateIndicator);
+    return () => window.removeEventListener("resize", updateIndicator);
+  }, [updateIndicator]);
+  const handleTabClick = (tabId) => {
+    if (!isControlled) {
+      setInternalTab(tabId);
+    }
+    onChange?.(tabId);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn(root$1, className), children: [
+    /* @__PURE__ */ jsx("div", { className: tablist, role: "tablist", "aria-orientation": "horizontal", children: tabs.map((tab$1) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (el) => {
+          if (el) {
+            tabRefs.current.set(tab$1.id, el);
+          } else {
+            tabRefs.current.delete(tab$1.id);
+          }
+        },
+        role: "tab",
+        "aria-selected": activeTab === tab$1.id,
+        type: "button",
+        onClick: () => handleTabClick(tab$1.id),
+        className: cn(
+          tab,
+          activeTab === tab$1.id ? tabActive : void 0
+        ),
+        children: tab$1.label
+      },
+      tab$1.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: border, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: indicator$1,
+        "aria-hidden": "true",
+        style: {
+          left: indicator2.left,
+          width: indicator2.width
+        }
+      }
+    )
+  ] });
 }
-function usePortalTheme() {
-  return use(PortalThemeContext);
+var root = "_10muorc2";
+var rootDisabled = "_10muorc3";
+var box = "_10muorc4";
+var boxUnchecked = "_10muorc5";
+var boxChecked = "_10muorc6";
+var boxBouncing = "_10muorc7";
+var checkmark = "_10muorc8";
+var checkmarkVisible = "_10muorc9";
+var checkmarkHidden = "_10muorca";
+var ripple = "_10muorcb";
+var rippleActive = "_10muorcc";
+var labelArea = "_10muorcd";
+var label$1 = "_10muorce";
+var labelDisabled = "_10muorcf";
+var description$2 = "_10muorcg";
+function cx(...args) {
+  return args.filter(Boolean).join(" ");
 }
-function PortalThemeWrapper({ children }) {
-  const { className } = usePortalTheme();
-  if (!className) return children;
-  return /* @__PURE__ */ jsx("div", { style: { display: "contents" }, className, children });
+function AnimatedCheckbox({
+  label: label2,
+  description: description2,
+  checked: controlledChecked,
+  defaultChecked = false,
+  onChange,
+  disabled = false,
+  className
+}) {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const [bouncing, setBouncing] = useState(false);
+  const isControlled = controlledChecked !== void 0;
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  const isFirstRender = useRef(true);
+  const rippleKey = useRef(0);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    setBouncing(true);
+    rippleKey.current += 1;
+    const timer = setTimeout(() => setBouncing(false), 400);
+    return () => clearTimeout(timer);
+  }, [isChecked]);
+  const handleToggle = () => {
+    if (disabled) return;
+    const next = !isChecked;
+    if (!isControlled) setInternalChecked(next);
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "checkbox",
+      "aria-checked": isChecked,
+      "aria-disabled": disabled,
+      onClick: handleToggle,
+      className: cx(root, disabled && rootDisabled, className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cx(
+              box,
+              isChecked ? boxChecked : boxUnchecked,
+              bouncing && boxBouncing
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 12 10",
+                  fill: "none",
+                  className: cx(
+                    checkmark,
+                    isChecked ? checkmarkVisible : checkmarkHidden
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M1 5.5L4 8.5L11 1.5",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      style: {
+                        color: "#fff",
+                        strokeDasharray: 20,
+                        strokeDashoffset: isChecked ? 0 : 20,
+                        transition: isChecked ? "stroke-dashoffset 0.4s ease-out 0.1s" : "stroke-dashoffset 0.2s ease-in"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cx(ripple, bouncing && rippleActive)
+                },
+                rippleKey.current
+              )
+            ]
+          }
+        ),
+        (label2 || description2) && /* @__PURE__ */ jsxs("span", { className: labelArea, children: [
+          label2 && /* @__PURE__ */ jsx("span", { className: cx(label$1, disabled && labelDisabled), children: label2 }),
+          description2 && /* @__PURE__ */ jsx("span", { className: description$2, children: description2 })
+        ] })
+      ]
+    }
+  );
 }
 function getStrictContext(name) {
   const Context = createContext(void 0);
@@ -525,16 +706,113 @@ function DropdownMenuCheckboxItem({
 function CheckIcon() {
   return /* @__PURE__ */ jsx(Check, { size: 16 });
 }
-var container = "_6d8tz20";
-var containerFullWidth = "_6d8tz21";
-var sizeVariants = { sm: "_6d8tz22", md: "_6d8tz23" };
-var indicator = "_6d8tz24";
-var indicatorHidden = "_6d8tz25";
-var item = "_6d8tz26";
-var itemActive = "_6d8tz27";
-var itemDisabled = "_6d8tz28";
-var itemFullWidth = "_6d8tz29";
-var itemPaddingVariants = { sm: "_6d8tz2a", md: "_6d8tz2b" };
+function toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
+}
+function _defineProperty(obj, key, value) {
+  key = toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
+}
+function mapValues(input, fn) {
+  var result = {};
+  for (var _key in input) {
+    result[_key] = fn(input[_key], _key);
+  }
+  return result;
+}
+var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
+  for (var key of Object.keys(compoundCheck)) {
+    var _selections$key;
+    if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
+      return false;
+    }
+  }
+  return true;
+};
+var createRuntimeFn = (config) => {
+  var runtimeFn = (options) => {
+    var className = config.defaultClassName;
+    var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+    for (var variantName in selections) {
+      var _selections$variantNa;
+      var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+      if (variantSelection != null) {
+        var selection = variantSelection;
+        if (typeof selection === "boolean") {
+          selection = selection === true ? "true" : "false";
+        }
+        var selectionClassName = (
+          // @ts-expect-error
+          config.variantClassNames[variantName][selection]
+        );
+        if (selectionClassName) {
+          className += " " + selectionClassName;
+        }
+      }
+    }
+    for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+      if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
+        className += " " + compoundClassName;
+      }
+    }
+    return className;
+  };
+  runtimeFn.variants = () => Object.keys(config.variantClassNames);
+  runtimeFn.classNames = {
+    get base() {
+      return config.defaultClassName.split(" ")[0];
+    },
+    get variants() {
+      return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
+    }
+  };
+  return runtimeFn;
+};
+var container = createRuntimeFn({ defaultClassName: "_6d8tz20", variantClassNames: { size: { sm: "_6d8tz21", md: "_6d8tz22" }, fullWidth: { true: "_6d8tz23", false: "_6d8tz24" } }, defaultVariants: { size: "sm", fullWidth: false }, compoundVariants: [] });
+var indicator = createRuntimeFn({ defaultClassName: "_6d8tz25", variantClassNames: { ready: { true: "_6d8tz26", false: "_6d8tz27" } }, defaultVariants: { ready: true }, compoundVariants: [] });
+var item = createRuntimeFn({ defaultClassName: "_6d8tz28", variantClassNames: { size: { sm: "_6d8tz29", md: "_6d8tz2a" }, active: { true: "_6d8tz2b", false: "_6d8tz2c" }, disabled: { true: "_6d8tz2d", false: "_6d8tz2e" }, fullWidth: { true: "_6d8tz2f", false: "_6d8tz2g" } }, defaultVariants: { size: "sm", active: false, disabled: false, fullWidth: false }, compoundVariants: [] });
 function SegmentedControl({
   items,
   value,
@@ -545,7 +823,7 @@ function SegmentedControl({
 }) {
   const containerRef = useRef(null);
   const itemElementsRef = useRef(/* @__PURE__ */ new Map());
-  const [indicator$1, setIndicator] = useState({ left: 0, width: 0 });
+  const [indicator$12, setIndicator] = useState({ left: 0, width: 0 });
   const [isReady, setIsReady] = useState(false);
   const updateIndicator = useCallback(() => {
     const container2 = containerRef.current;
@@ -612,15 +890,15 @@ function SegmentedControl({
       role: "tablist",
       "aria-orientation": "horizontal",
       onKeyDown: handleKeyDown,
-      className: `${container} ${sizeVariants[size]} ${fullWidth ? containerFullWidth : ""} ${className || ""}`.trim(),
+      className: `${container({ size, fullWidth })} ${className || ""}`.trim(),
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: `${indicator} ${!isReady ? indicatorHidden : ""}`.trim(),
+            className: indicator({ ready: isReady }),
             style: {
-              left: indicator$1.left,
-              width: indicator$1.width
+              left: indicator$12.left,
+              width: indicator$12.width
             },
             "aria-hidden": "true"
           }
@@ -641,7 +919,12 @@ function SegmentedControl({
               tabIndex: isActive ? 0 : -1,
               disabled: item$12.disabled,
               onClick: () => onChange(item$12.value),
-              className: `${item} ${itemPaddingVariants[size]} ${isActive ? itemActive : ""} ${item$12.disabled ? itemDisabled : ""} ${fullWidth ? itemFullWidth : ""}`.trim(),
+              className: item({
+                size,
+                active: isActive,
+                disabled: Boolean(item$12.disabled),
+                fullWidth
+              }),
               children: item$12.label
             },
             item$12.value
@@ -692,6 +975,8 @@ function TooltipContent({
   return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { side, sideOffset, align, children: /* @__PURE__ */ jsx(TooltipPopup, { className, ...popupProps, children }) }) });
 }
 export {
+  AnimatedCheckbox,
+  AnimatedTabs,
   ColorPicker,
   Dialog,
   DialogBackdrop,
@@ -724,8 +1009,8 @@ export {
   PopoverPositioner,
   PopoverTitle,
   PopoverTrigger,
-  PortalThemeProvider,
-  PortalThemeWrapper,
+  PortalThemeProvider2 as PortalThemeProvider,
+  PortalThemeWrapper2 as PortalThemeWrapper,
   SegmentedControl,
   TooltipContent,
   TooltipPopup,

package/dist/rich-editor-ui.css

@@ -1,4 +1,153 @@
-@keyframes f2q44l0 {
+.iryuae0 {
+  position: relative;
+}
+.iryuae1 {
+  display: flex;
+}
+.iryuae2 {
+  position: relative;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: color 200ms;
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: var(--rc-text-secondary);
+  outline: none;
+}
+.iryuae2:hover {
+  color: color-mix(in srgb, currentColor 80%, transparent);
+}
+.iryuae2:focus-visible {
+  outline: 2px solid var(--rc-accent);
+  outline-offset: 2px;
+}
+.iryuae3 {
+  color: var(--rc-text);
+}
+.iryuae4 {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--rc-border);
+}
+.iryuae5 {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background-color: var(--rc-text);
+  transition: left 300ms ease-in-out, width 300ms ease-in-out;
+}@keyframes _10muorc0 {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(0.85);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes _10muorc1 {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--rc-accent) 40%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 6px transparent;
+  }
+}
+._10muorc2 {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  text-align: left;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+._10muorc2:focus-visible {
+  outline: 2px solid var(--rc-accent);
+  outline-offset: 2px;
+}
+._10muorc3 {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+._10muorc4 {
+  position: relative;
+  display: flex;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  border-style: solid;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  box-sizing: border-box;
+}
+._10muorc5 {
+  border-color: color-mix(in srgb, var(--rc-text-secondary) 50%, transparent);
+  background-color: transparent;
+}
+._10muorc6 {
+  border-color: var(--rc-accent);
+  background-color: var(--rc-accent);
+}
+._10muorc7 {
+  animation: _10muorc0 0.4s ease-out;
+}
+._10muorc8 {
+  width: 0.75rem;
+  height: 0.75rem;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+._10muorc9 {
+  opacity: 1;
+  transform: scale(1);
+}
+._10muorca {
+  opacity: 0;
+  transform: scale(0.5);
+}
+._10muorcb {
+  position: absolute;
+  inset: 0;
+  border-radius: 0.3rem;
+  pointer-events: none;
+}
+._10muorcc {
+  animation: _10muorc1 0.4s ease-out;
+}
+._10muorcd {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+._10muorce {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--rc-text);
+  transition: color 0.2s;
+}
+._10muorcf {
+  color: var(--rc-text-secondary);
+}
+._10muorcg {
+  font-size: 0.75rem;
+  line-height: 1.25;
+  color: var(--rc-text-secondary);
+}@keyframes f2q44l0 {
   from {
     opacity: 0;
     transform: translateY(2px) scale(0.96);
@@ -380,17 +529,17 @@
   padding: 0.25rem;
 }
 ._6d8tz21 {
-  width: 100%;
-}
-._6d8tz22 {
   height: 2rem;
   font-size: 0.75rem;
 }
-._6d8tz23 {
+._6d8tz22 {
   height: 2.5rem;
   font-size: 0.875rem;
 }
-._6d8tz24 {
+._6d8tz23 {
+  width: 100%;
+}
+._6d8tz25 {
   position: absolute;
   top: 0.25rem;
   bottom: 0.25rem;
@@ -400,10 +549,10 @@
   transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
   pointer-events: none;
 }
-._6d8tz25 {
+._6d8tz27 {
   opacity: 0;
 }
-._6d8tz26 {
+._6d8tz28 {
   position: relative;
   z-index: 10;
   display: flex;
@@ -419,25 +568,25 @@
   transition: color 200ms;
   color: var(--rc-text-secondary);
 }
-._6d8tz26:focus-visible {
+._6d8tz28:focus-visible {
   outline: 2px solid var(--rc-accent);
   outline-offset: 1px;
 }
-._6d8tz27 {
+._6d8tz29 {
+  padding: 0 0.75rem;
+}
+._6d8tz2a {
+  padding: 0 1rem;
+}
+._6d8tz2b {
   color: var(--rc-text);
 }
-._6d8tz28 {
+._6d8tz2d {
   pointer-events: none;
   opacity: 0.4;
 }
-._6d8tz29 {
+._6d8tz2f {
   flex: 1;
-}
-._6d8tz2a {
-  padding: 0 0.75rem;
-}
-._6d8tz2b {
-  padding: 0 1rem;
 }@keyframes _1cspf2m0 {
   from {
     opacity: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-editor-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "UI components for haklex rich editor",
   "license": "MIT",
   "type": "module",
@@ -17,24 +17,24 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.1.0",
-    "lucide-react": "^0.574.0"
+    "lucide-react": "^0.574.0",
+    "@haklex/rich-style-token": "0.0.4"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/vite-plugin": "^4.0.20",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "typescript": "^5.9.0",
     "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.0",
-    "@haklex/rich-style-token": "0.0.2"
+    "vite-plugin-dts": "^4.5.0"
   },
   "peerDependencies": {
     "react": ">=19",
-    "react-dom": ">=19",
-    "@haklex/rich-style-token": "0.0.2"
+    "react-dom": ">=19"
   },
   "publishConfig": {
     "access": "public"