@haklex/rich-editor-ui 0.0.2 → 0.0.3

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/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,33 +1,214 @@
-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,
+  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
+        }
+      }
+    )
+  ] });
+}
+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 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",
     {
-      value: useMemo(() => ({ className }), [className]),
-      children
+      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 usePortalTheme() {
-  return use(PortalThemeContext);
-}
-function PortalThemeWrapper({ children }) {
-  const { className } = usePortalTheme();
-  if (!className) return children;
-  return /* @__PURE__ */ jsx("div", { style: { display: "contents" }, className, children });
-}
 function getStrictContext(name) {
   const Context = createContext(void 0);
   const Provider = ({
@@ -545,7 +726,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;
@@ -619,8 +800,8 @@ function SegmentedControl({
           {
             className: `${indicator} ${!isReady ? indicatorHidden : ""}`.trim(),
             style: {
-              left: indicator$1.left,
-              width: indicator$1.width
+              left: indicator$12.left,
+              width: indicator$12.width
             },
             "aria-hidden": "true"
           }
@@ -692,6 +873,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 +907,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-editor-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "UI components for haklex rich editor",
   "license": "MIT",
   "type": "module",
@@ -17,7 +17,8 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.1.0",
-    "lucide-react": "^0.574.0"
+    "lucide-react": "^0.574.0",
+    "@haklex/rich-style-token": "0.0.3"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
@@ -28,13 +29,11 @@
     "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"