@haklex/rich-editor-ui 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,13 @@
1
+ export interface Tab {
2
+ id: string;
3
+ label: string;
4
+ }
5
+ export interface AnimatedTabsProps {
6
+ tabs: Tab[];
7
+ defaultTab?: string;
8
+ value?: string;
9
+ onChange?: (tabId: string) => void;
10
+ className?: string;
11
+ }
12
+ export declare function AnimatedTabs({ tabs, defaultTab, value, onChange, className, }: AnimatedTabsProps): import("react/jsx-runtime").JSX.Element;
13
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,7 @@
1
+ export declare const root: string;
2
+ export declare const tablist: string;
3
+ export declare const tab: string;
4
+ export declare const tabActive: string;
5
+ export declare const border: string;
6
+ export declare const indicator: string;
7
+ //# sourceMappingURL=styles.css.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,11 @@
1
+ export interface AnimatedCheckboxProps {
2
+ label?: string;
3
+ description?: string;
4
+ checked?: boolean;
5
+ defaultChecked?: boolean;
6
+ onChange?: (checked: boolean) => void;
7
+ disabled?: boolean;
8
+ className?: string;
9
+ }
10
+ export declare function AnimatedCheckbox({ label, description, checked: controlledChecked, defaultChecked, onChange, disabled, className, }: AnimatedCheckboxProps): import("react/jsx-runtime").JSX.Element;
11
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,16 @@
1
+ export declare const root: string;
2
+ export declare const rootDisabled: string;
3
+ export declare const box: string;
4
+ export declare const boxUnchecked: string;
5
+ export declare const boxChecked: string;
6
+ export declare const boxBouncing: string;
7
+ export declare const checkmark: string;
8
+ export declare const checkmarkVisible: string;
9
+ export declare const checkmarkHidden: string;
10
+ export declare const ripple: string;
11
+ export declare const rippleActive: string;
12
+ export declare const labelArea: string;
13
+ export declare const label: string;
14
+ export declare const labelDisabled: string;
15
+ export declare const description: string;
16
+ //# sourceMappingURL=styles.css.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -1,5 +1,5 @@
1
1
  import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
2
- import { ComponentProps, ReactNode } from 'react';
2
+ import { ComponentProps, HTMLAttributes, ReactNode } from 'react';
3
3
  type DialogProps = ComponentProps<typeof DialogPrimitive.Root>;
4
4
  export declare function Dialog(props: DialogProps): import("react/jsx-runtime").JSX.Element;
5
5
  type DialogTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
@@ -16,9 +16,9 @@ type DialogPopupProps = ComponentProps<typeof DialogPrimitive.Popup> & {
16
16
  export declare function DialogPopup({ showCloseButton, className, children, ...props }: DialogPopupProps): import("react/jsx-runtime").JSX.Element;
17
17
  type DialogCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
18
18
  export declare function DialogClose(props: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
19
- type DialogHeaderProps = ComponentProps<'div'>;
19
+ type DialogHeaderProps = HTMLAttributes<HTMLDivElement>;
20
20
  export declare function DialogHeader({ className, ...props }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
21
- type DialogFooterProps = ComponentProps<'div'>;
21
+ type DialogFooterProps = HTMLAttributes<HTMLDivElement>;
22
22
  export declare function DialogFooter({ className, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
23
23
  type DialogTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
24
24
  export declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAGjE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtD,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAA;AAE9D,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CAExC;AAID,KAAK,kBAAkB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAA;AAExE,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAEtD;AAID,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,CAAA;AAEtE,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAMrE;AAID,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,CAAA;AAE1E,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAO1E;AAID,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,GAAG;IACrE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,eAAsB,EACtB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAiBlB;AAID,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAA;AAEpE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;AAID,KAAK,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;AAE9C,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAOtE;AAED,KAAK,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;AAE9C,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAOtE;AAED,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAA;AAEpE,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAOpE;AAED,KAAK,sBAAsB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAOxB;AAED,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,GACnB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAGjE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtE,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAA;AAE9D,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CAExC;AAID,KAAK,kBAAkB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAA;AAExE,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAEtD;AAID,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,CAAA;AAEtE,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAMrE;AAID,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,CAAA;AAE1E,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAO1E;AAID,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,GAAG;IACrE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,eAAsB,EACtB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAiBlB;AAID,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAA;AAEpE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;AAID,KAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAEvD,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAOtE;AAED,KAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAEvD,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAOtE;AAED,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAA;AAEpE,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAOpE;AAED,KAAK,sBAAsB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAOxB;AAED,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,GACnB,CAAA"}
package/dist/index.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ export type { AnimatedTabsProps, Tab as AnimatedTabsTab, } from './components/animated-tabs';
2
+ export { AnimatedTabs } from './components/animated-tabs';
3
+ export type { AnimatedCheckboxProps } from './components/checkbox';
4
+ export { AnimatedCheckbox } from './components/checkbox';
1
5
  export type { ColorPickerProps } from './components/color-picker';
2
6
  export { ColorPicker } from './components/color-picker';
3
7
  export type { DialogBackdropProps, DialogCloseProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogPopupProps, DialogPortalProps, DialogProps, DialogTitleProps, DialogTriggerProps, } from './components/dialog';
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,33 +1,214 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
1
+ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
+ import { useState, useRef, useCallback, useEffect, createContext, use, useSyncExternalStore, createElement } from "react";
2
3
  import { ChevronDown, Check, X } from "lucide-react";
3
4
  import { Popover as Popover$1 } from "@base-ui/react/popover";
4
- import { createContext, useMemo, use, useState, useEffect, useSyncExternalStore, useCallback, createElement, useRef } from "react";
5
+ import { PortalThemeWrapper, PortalThemeProvider } from "@haklex/rich-style-token";
6
+ import { PortalThemeProvider as PortalThemeProvider2, PortalThemeWrapper as PortalThemeWrapper2, usePortalTheme } from "@haklex/rich-style-token";
5
7
  import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
6
8
  import { Menu } from "@base-ui/react/menu";
7
9
  import { Tooltip } from "@base-ui/react/tooltip";
8
- const PortalThemeContext = createContext({
9
- className: ""
10
- });
11
- function PortalThemeProvider({
12
- className,
13
- children
10
+ var root$1 = "iryuae0";
11
+ var tablist = "iryuae1";
12
+ var tab = "iryuae2";
13
+ var tabActive = "iryuae3";
14
+ var border = "iryuae4";
15
+ var indicator$1 = "iryuae5";
16
+ function cn(...parts) {
17
+ return parts.filter(Boolean).join(" ");
18
+ }
19
+ function AnimatedTabs({
20
+ tabs,
21
+ defaultTab,
22
+ value,
23
+ onChange,
24
+ className
14
25
  }) {
15
- return /* @__PURE__ */ jsx(
16
- PortalThemeContext.Provider,
26
+ const isControlled = value !== void 0;
27
+ const [internalTab, setInternalTab] = useState(
28
+ defaultTab ?? tabs[0]?.id ?? ""
29
+ );
30
+ const activeTab = isControlled ? value : internalTab;
31
+ const [indicator2, setIndicator] = useState({
32
+ left: 0,
33
+ width: 0
34
+ });
35
+ const tabRefs = useRef(/* @__PURE__ */ new Map());
36
+ const containerRef = useRef(null);
37
+ const updateIndicator = useCallback(() => {
38
+ const activeEl = tabRefs.current.get(activeTab);
39
+ const container2 = containerRef.current;
40
+ if (activeEl && container2) {
41
+ const containerRect = container2.getBoundingClientRect();
42
+ const tabRect = activeEl.getBoundingClientRect();
43
+ setIndicator({
44
+ left: tabRect.left - containerRect.left,
45
+ width: tabRect.width
46
+ });
47
+ }
48
+ }, [activeTab]);
49
+ useEffect(() => {
50
+ updateIndicator();
51
+ }, [updateIndicator]);
52
+ useEffect(() => {
53
+ window.addEventListener("resize", updateIndicator);
54
+ return () => window.removeEventListener("resize", updateIndicator);
55
+ }, [updateIndicator]);
56
+ const handleTabClick = (tabId) => {
57
+ if (!isControlled) {
58
+ setInternalTab(tabId);
59
+ }
60
+ onChange?.(tabId);
61
+ };
62
+ return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn(root$1, className), children: [
63
+ /* @__PURE__ */ jsx("div", { className: tablist, role: "tablist", "aria-orientation": "horizontal", children: tabs.map((tab$1) => /* @__PURE__ */ jsx(
64
+ "button",
65
+ {
66
+ ref: (el) => {
67
+ if (el) {
68
+ tabRefs.current.set(tab$1.id, el);
69
+ } else {
70
+ tabRefs.current.delete(tab$1.id);
71
+ }
72
+ },
73
+ role: "tab",
74
+ "aria-selected": activeTab === tab$1.id,
75
+ type: "button",
76
+ onClick: () => handleTabClick(tab$1.id),
77
+ className: cn(
78
+ tab,
79
+ activeTab === tab$1.id ? tabActive : void 0
80
+ ),
81
+ children: tab$1.label
82
+ },
83
+ tab$1.id
84
+ )) }),
85
+ /* @__PURE__ */ jsx("div", { className: border, "aria-hidden": "true" }),
86
+ /* @__PURE__ */ jsx(
87
+ "div",
88
+ {
89
+ className: indicator$1,
90
+ "aria-hidden": "true",
91
+ style: {
92
+ left: indicator2.left,
93
+ width: indicator2.width
94
+ }
95
+ }
96
+ )
97
+ ] });
98
+ }
99
+ var root = "_10muorc2";
100
+ var rootDisabled = "_10muorc3";
101
+ var box = "_10muorc4";
102
+ var boxUnchecked = "_10muorc5";
103
+ var boxChecked = "_10muorc6";
104
+ var boxBouncing = "_10muorc7";
105
+ var checkmark = "_10muorc8";
106
+ var checkmarkVisible = "_10muorc9";
107
+ var checkmarkHidden = "_10muorca";
108
+ var ripple = "_10muorcb";
109
+ var rippleActive = "_10muorcc";
110
+ var labelArea = "_10muorcd";
111
+ var label$1 = "_10muorce";
112
+ var labelDisabled = "_10muorcf";
113
+ var description$2 = "_10muorcg";
114
+ function cx(...args) {
115
+ return args.filter(Boolean).join(" ");
116
+ }
117
+ function AnimatedCheckbox({
118
+ label: label2,
119
+ description: description2,
120
+ checked: controlledChecked,
121
+ defaultChecked = false,
122
+ onChange,
123
+ disabled = false,
124
+ className
125
+ }) {
126
+ const [internalChecked, setInternalChecked] = useState(defaultChecked);
127
+ const [bouncing, setBouncing] = useState(false);
128
+ const isControlled = controlledChecked !== void 0;
129
+ const isChecked = isControlled ? controlledChecked : internalChecked;
130
+ const isFirstRender = useRef(true);
131
+ const rippleKey = useRef(0);
132
+ useEffect(() => {
133
+ if (isFirstRender.current) {
134
+ isFirstRender.current = false;
135
+ return;
136
+ }
137
+ setBouncing(true);
138
+ rippleKey.current += 1;
139
+ const timer = setTimeout(() => setBouncing(false), 400);
140
+ return () => clearTimeout(timer);
141
+ }, [isChecked]);
142
+ const handleToggle = () => {
143
+ if (disabled) return;
144
+ const next = !isChecked;
145
+ if (!isControlled) setInternalChecked(next);
146
+ onChange?.(next);
147
+ };
148
+ return /* @__PURE__ */ jsxs(
149
+ "button",
17
150
  {
18
- value: useMemo(() => ({ className }), [className]),
19
- children
151
+ type: "button",
152
+ role: "checkbox",
153
+ "aria-checked": isChecked,
154
+ "aria-disabled": disabled,
155
+ onClick: handleToggle,
156
+ className: cx(root, disabled && rootDisabled, className),
157
+ children: [
158
+ /* @__PURE__ */ jsxs(
159
+ "span",
160
+ {
161
+ className: cx(
162
+ box,
163
+ isChecked ? boxChecked : boxUnchecked,
164
+ bouncing && boxBouncing
165
+ ),
166
+ children: [
167
+ /* @__PURE__ */ jsx(
168
+ "svg",
169
+ {
170
+ viewBox: "0 0 12 10",
171
+ fill: "none",
172
+ className: cx(
173
+ checkmark,
174
+ isChecked ? checkmarkVisible : checkmarkHidden
175
+ ),
176
+ children: /* @__PURE__ */ jsx(
177
+ "path",
178
+ {
179
+ d: "M1 5.5L4 8.5L11 1.5",
180
+ stroke: "currentColor",
181
+ strokeWidth: "2",
182
+ strokeLinecap: "round",
183
+ strokeLinejoin: "round",
184
+ style: {
185
+ color: "#fff",
186
+ strokeDasharray: 20,
187
+ strokeDashoffset: isChecked ? 0 : 20,
188
+ transition: isChecked ? "stroke-dashoffset 0.4s ease-out 0.1s" : "stroke-dashoffset 0.2s ease-in"
189
+ }
190
+ }
191
+ )
192
+ }
193
+ ),
194
+ /* @__PURE__ */ jsx(
195
+ "span",
196
+ {
197
+ className: cx(ripple, bouncing && rippleActive)
198
+ },
199
+ rippleKey.current
200
+ )
201
+ ]
202
+ }
203
+ ),
204
+ (label2 || description2) && /* @__PURE__ */ jsxs("span", { className: labelArea, children: [
205
+ label2 && /* @__PURE__ */ jsx("span", { className: cx(label$1, disabled && labelDisabled), children: label2 }),
206
+ description2 && /* @__PURE__ */ jsx("span", { className: description$2, children: description2 })
207
+ ] })
208
+ ]
20
209
  }
21
210
  );
22
211
  }
23
- function usePortalTheme() {
24
- return use(PortalThemeContext);
25
- }
26
- function PortalThemeWrapper({ children }) {
27
- const { className } = usePortalTheme();
28
- if (!className) return children;
29
- return /* @__PURE__ */ jsx("div", { style: { display: "contents" }, className, children });
30
- }
31
212
  function getStrictContext(name) {
32
213
  const Context = createContext(void 0);
33
214
  const Provider = ({
@@ -545,7 +726,7 @@ function SegmentedControl({
545
726
  }) {
546
727
  const containerRef = useRef(null);
547
728
  const itemElementsRef = useRef(/* @__PURE__ */ new Map());
548
- const [indicator$1, setIndicator] = useState({ left: 0, width: 0 });
729
+ const [indicator$12, setIndicator] = useState({ left: 0, width: 0 });
549
730
  const [isReady, setIsReady] = useState(false);
550
731
  const updateIndicator = useCallback(() => {
551
732
  const container2 = containerRef.current;
@@ -619,8 +800,8 @@ function SegmentedControl({
619
800
  {
620
801
  className: `${indicator} ${!isReady ? indicatorHidden : ""}`.trim(),
621
802
  style: {
622
- left: indicator$1.left,
623
- width: indicator$1.width
803
+ left: indicator$12.left,
804
+ width: indicator$12.width
624
805
  },
625
806
  "aria-hidden": "true"
626
807
  }
@@ -692,6 +873,8 @@ function TooltipContent({
692
873
  return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { side, sideOffset, align, children: /* @__PURE__ */ jsx(TooltipPopup, { className, ...popupProps, children }) }) });
693
874
  }
694
875
  export {
876
+ AnimatedCheckbox,
877
+ AnimatedTabs,
695
878
  ColorPicker,
696
879
  Dialog,
697
880
  DialogBackdrop,
@@ -724,8 +907,8 @@ export {
724
907
  PopoverPositioner,
725
908
  PopoverTitle,
726
909
  PopoverTrigger,
727
- PortalThemeProvider,
728
- PortalThemeWrapper,
910
+ PortalThemeProvider2 as PortalThemeProvider,
911
+ PortalThemeWrapper2 as PortalThemeWrapper,
729
912
  SegmentedControl,
730
913
  TooltipContent,
731
914
  TooltipPopup,
@@ -1,4 +1,153 @@
1
- @keyframes f2q44l0 {
1
+ .iryuae0 {
2
+ position: relative;
3
+ }
4
+ .iryuae1 {
5
+ display: flex;
6
+ }
7
+ .iryuae2 {
8
+ position: relative;
9
+ padding: 0.625rem 1rem;
10
+ font-size: 0.875rem;
11
+ font-weight: 500;
12
+ transition: color 200ms;
13
+ cursor: pointer;
14
+ border: none;
15
+ background: none;
16
+ color: var(--rc-text-secondary);
17
+ outline: none;
18
+ }
19
+ .iryuae2:hover {
20
+ color: color-mix(in srgb, currentColor 80%, transparent);
21
+ }
22
+ .iryuae2:focus-visible {
23
+ outline: 2px solid var(--rc-accent);
24
+ outline-offset: 2px;
25
+ }
26
+ .iryuae3 {
27
+ color: var(--rc-text);
28
+ }
29
+ .iryuae4 {
30
+ position: absolute;
31
+ bottom: 0;
32
+ left: 0;
33
+ right: 0;
34
+ height: 1px;
35
+ background-color: var(--rc-border);
36
+ }
37
+ .iryuae5 {
38
+ position: absolute;
39
+ bottom: 0;
40
+ height: 2px;
41
+ background-color: var(--rc-text);
42
+ transition: left 300ms ease-in-out, width 300ms ease-in-out;
43
+ }@keyframes _10muorc0 {
44
+ 0% {
45
+ transform: scale(1);
46
+ }
47
+ 40% {
48
+ transform: scale(0.85);
49
+ }
50
+ 100% {
51
+ transform: scale(1);
52
+ }
53
+ }
54
+ @keyframes _10muorc1 {
55
+ 0% {
56
+ box-shadow: 0 0 0 0 color-mix(in srgb, var(--rc-accent) 40%, transparent);
57
+ }
58
+ 100% {
59
+ box-shadow: 0 0 0 6px transparent;
60
+ }
61
+ }
62
+ ._10muorc2 {
63
+ display: inline-flex;
64
+ align-items: flex-start;
65
+ gap: 0.75rem;
66
+ border-radius: 0.5rem;
67
+ padding: 0.25rem;
68
+ text-align: left;
69
+ border: none;
70
+ background: none;
71
+ cursor: pointer;
72
+ font-family: inherit;
73
+ font-size: inherit;
74
+ color: inherit;
75
+ }
76
+ ._10muorc2:focus-visible {
77
+ outline: 2px solid var(--rc-accent);
78
+ outline-offset: 2px;
79
+ }
80
+ ._10muorc3 {
81
+ cursor: not-allowed;
82
+ opacity: 0.5;
83
+ }
84
+ ._10muorc4 {
85
+ position: relative;
86
+ display: flex;
87
+ width: 1.125rem;
88
+ height: 1.125rem;
89
+ flex-shrink: 0;
90
+ align-items: center;
91
+ justify-content: center;
92
+ border-radius: 0.3rem;
93
+ border-width: 2px;
94
+ border-style: solid;
95
+ transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
96
+ box-sizing: border-box;
97
+ }
98
+ ._10muorc5 {
99
+ border-color: color-mix(in srgb, var(--rc-text-secondary) 50%, transparent);
100
+ background-color: transparent;
101
+ }
102
+ ._10muorc6 {
103
+ border-color: var(--rc-accent);
104
+ background-color: var(--rc-accent);
105
+ }
106
+ ._10muorc7 {
107
+ animation: _10muorc0 0.4s ease-out;
108
+ }
109
+ ._10muorc8 {
110
+ width: 0.75rem;
111
+ height: 0.75rem;
112
+ transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
113
+ }
114
+ ._10muorc9 {
115
+ opacity: 1;
116
+ transform: scale(1);
117
+ }
118
+ ._10muorca {
119
+ opacity: 0;
120
+ transform: scale(0.5);
121
+ }
122
+ ._10muorcb {
123
+ position: absolute;
124
+ inset: 0;
125
+ border-radius: 0.3rem;
126
+ pointer-events: none;
127
+ }
128
+ ._10muorcc {
129
+ animation: _10muorc1 0.4s ease-out;
130
+ }
131
+ ._10muorcd {
132
+ display: flex;
133
+ flex-direction: column;
134
+ gap: 0.125rem;
135
+ }
136
+ ._10muorce {
137
+ font-size: 0.875rem;
138
+ font-weight: 500;
139
+ line-height: 1.25;
140
+ color: var(--rc-text);
141
+ transition: color 0.2s;
142
+ }
143
+ ._10muorcf {
144
+ color: var(--rc-text-secondary);
145
+ }
146
+ ._10muorcg {
147
+ font-size: 0.75rem;
148
+ line-height: 1.25;
149
+ color: var(--rc-text-secondary);
150
+ }@keyframes f2q44l0 {
2
151
  from {
3
152
  opacity: 0;
4
153
  transform: translateY(2px) scale(0.96);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haklex/rich-editor-ui",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "UI components for haklex rich editor",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -17,7 +17,8 @@
17
17
  ],
18
18
  "dependencies": {
19
19
  "@base-ui/react": "^1.1.0",
20
- "lucide-react": "^0.574.0"
20
+ "lucide-react": "^0.574.0",
21
+ "@haklex/rich-style-token": "0.0.3"
21
22
  },
22
23
  "devDependencies": {
23
24
  "@types/react": "^19.0.0",
@@ -28,13 +29,11 @@
28
29
  "react-dom": "19.2.4",
29
30
  "typescript": "^5.9.0",
30
31
  "vite": "^7.3.1",
31
- "vite-plugin-dts": "^4.5.0",
32
- "@haklex/rich-style-token": "0.0.1"
32
+ "vite-plugin-dts": "^4.5.0"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "react": ">=19",
36
- "react-dom": ">=19",
37
- "@haklex/rich-style-token": "0.0.1"
36
+ "react-dom": ">=19"
38
37
  },
39
38
  "publishConfig": {
40
39
  "access": "public"