@oneplatformdev/ui 0.1.99-beta.243 → 0.1.99-beta.246

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.1.99-beta.246 (2026-03-09)
+
+### 🚀 Features
+
+- OP2-2426 ([#61](https://github.com/oneplatformdev/core-web/pull/61))
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.246
+- Updated @oneplatformdev/hooks to 0.1.99-beta.246
+- Updated @oneplatformdev/tokens to 0.1.99-beta.246
+
+### ❤️ Thank You
+
+- alex-skor-dev
+
+## 0.1.99-beta.244 (2026-03-06)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.244
+- Updated @oneplatformdev/hooks to 0.1.99-beta.244
+- Updated @oneplatformdev/tokens to 0.1.99-beta.244
+
 ## 0.1.99-beta.243 (2026-03-05)
 
 ### 🧱 Updated Dependencies

package/FormInput/FormInput.stories.js

@@ -15,7 +15,7 @@ function m({ initialValue: o = "", ...c }) {
         name: "name",
         counter: !0,
         maxLength: 255,
-        tooltip: "Test",
+        tooltip: "UX/UI принципи, композиція, типографіка, колір, дизайн-системи та робота з інтерфейсами",
         label: "Label"
       }
     ),
@@ -29,7 +29,7 @@ function m({ initialValue: o = "", ...c }) {
     ] })
   ] }) });
 }
-const i = {
+const f = {
   title: "FormInput",
   component: r,
   parameters: {
@@ -51,11 +51,11 @@ const i = {
   decorators: [
     (o) => /* @__PURE__ */ e("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ e(o, {}) })
   ]
-}, p = {
+}, h = {
   render: (o) => /* @__PURE__ */ e(m, { ...o })
 };
 export {
-  p as Default,
-  i as default
+  h as Default,
+  f as default
 };
 //# sourceMappingURL=FormInput.stories.js.map

package/FormInput/FormInput.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormInput.stories.js","sources":["../../src/FormInput/FormInput.stories.tsx"],"sourcesContent":["import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { FormProvider, useForm } from 'react-hook-form';\n\nimport { FormInput } from './FormInput';\n\ntype FormValues = {\n  name: string;\n};\n\ntype ControlledProps = Omit<\n  React.ComponentProps<typeof FormInput<FormValues>>,\n  'form' | 'name'\n> & {\n  initialValue?: string;\n};\n\nfunction ControlledFormInput({ initialValue = '', ...args }: ControlledProps) {\n  const form = useForm<FormValues>({\n    defaultValues: {\n      name: initialValue,\n    },\n  });\n\n  const value = form.watch('name');\n\n  return (\n    <FormProvider {...form}>\n      <div className=\"max-w-sm space-y-3\">\n        <FormInput<FormValues>\n          form={form}\n          name=\"name\"\n          counter\n          maxLength={255}\n          tooltip={\"Test\"}\n          label={\"Label\"}\n        />\n\n        <div className=\"text-xs text-muted-foreground\">\n          value: <span className=\"font-mono\">{value}</span>\n        </div>\n\n        <div className=\"text-xs text-muted-foreground\">\n          length: <span className=\"font-mono\">\n            {value?.length ?? 0}\n          </span>\n        </div>\n      </div>\n    </FormProvider>\n  );\n}\n\nconst meta = {\n  title: 'FormInput',\n  component: FormInput,\n  parameters: {\n    layout: 'centered',\n  },\n  args: {\n    label: 'Input label',\n    placeholder: 'Type something...',\n    disabled: false,\n  },\n  argTypes: {\n    form: { control: false },\n    name: { control: false },\n    onChange: { control: false },\n    onBlur: { control: false },\n    onPaste: { control: false },\n    onPastePrepare: { control: false },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"p-6 w-[420px]\">\n        <Story />\n      </div>\n    ),\n  ],\n} satisfies Meta<typeof FormInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  render: (args) => <ControlledFormInput {...args} />,\n};\n"],"names":["ControlledFormInput","initialValue","args","form","useForm","value","FormProvider","jsxs","jsx","FormInput","meta","Story","Default"],"mappings":";;;AAiBA,SAASA,EAAoB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAAyB;AAC5E,QAAMC,IAAOC,EAAoB;AAAA,IAC/B,eAAe;AAAA,MACb,MAAMH;AAAA,IAAA;AAAA,EACR,CACD,GAEKI,IAAQF,EAAK,MAAM,MAAM;AAE/B,2BACGG,GAAA,EAAc,GAAGH,GAChB,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAAN;AAAA,QACA,MAAK;AAAA,QACL,SAAO;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGT,gBAAAI,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MACtC,gBAAAC,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAM;AAAA,IAAA,GAC5C;AAAA,IAEA,gBAAAE,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,wBACpC,QAAA,EAAK,WAAU,aACrB,UAAAF,GAAO,UAAU,EAAA,CACpB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAMK,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWD;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,UAAU,EAAE,SAAS,GAAA;AAAA,IACrB,QAAQ,EAAE,SAAS,GAAA;AAAA,IACnB,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,gBAAgB,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAEnC,YAAY;AAAA,IACV,CAACE,MACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACG,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GAMaC,IAAiB;AAAA,EAC5B,QAAQ,CAACV,MAAS,gBAAAM,EAACR,GAAA,EAAqB,GAAGE,EAAA,CAAM;AACnD;"}
+{"version":3,"file":"FormInput.stories.js","sources":["../../src/FormInput/FormInput.stories.tsx"],"sourcesContent":["import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { FormProvider, useForm } from 'react-hook-form';\n\nimport { FormInput } from './FormInput';\n\ntype FormValues = {\n  name: string;\n};\n\ntype ControlledProps = Omit<\n  React.ComponentProps<typeof FormInput<FormValues>>,\n  'form' | 'name'\n> & {\n  initialValue?: string;\n};\n\nfunction ControlledFormInput({ initialValue = '', ...args }: ControlledProps) {\n  const form = useForm<FormValues>({\n    defaultValues: {\n      name: initialValue,\n    },\n  });\n\n  const value = form.watch('name');\n  const tooltip = \"UX/UI принципи, композиція, типографіка, колір, дизайн-системи та робота з інтерфейсами\"\n  return (\n    <FormProvider {...form}>\n      <div className=\"max-w-sm space-y-3\">\n        <FormInput<FormValues>\n          form={form}\n          name=\"name\"\n          counter\n          maxLength={255}\n          tooltip={tooltip}\n          label={\"Label\"}\n        />\n\n        <div className=\"text-xs text-muted-foreground\">\n          value: <span className=\"font-mono\">{value}</span>\n        </div>\n\n        <div className=\"text-xs text-muted-foreground\">\n          length: <span className=\"font-mono\">\n            {value?.length ?? 0}\n          </span>\n        </div>\n      </div>\n    </FormProvider>\n  );\n}\n\nconst meta = {\n  title: 'FormInput',\n  component: FormInput,\n  parameters: {\n    layout: 'centered',\n  },\n  args: {\n    label: 'Input label',\n    placeholder: 'Type something...',\n    disabled: false,\n  },\n  argTypes: {\n    form: { control: false },\n    name: { control: false },\n    onChange: { control: false },\n    onBlur: { control: false },\n    onPaste: { control: false },\n    onPastePrepare: { control: false },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"p-6 w-[420px]\">\n        <Story />\n      </div>\n    ),\n  ],\n} satisfies Meta<typeof FormInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  render: (args) => <ControlledFormInput {...args} />,\n};\n"],"names":["ControlledFormInput","initialValue","args","form","useForm","value","FormProvider","jsxs","jsx","FormInput","meta","Story","Default"],"mappings":";;;AAiBA,SAASA,EAAoB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAAyB;AAC5E,QAAMC,IAAOC,EAAoB;AAAA,IAC/B,eAAe;AAAA,MACb,MAAMH;AAAA,IAAA;AAAA,EACR,CACD,GAEKI,IAAQF,EAAK,MAAM,MAAM;AAE/B,2BACGG,GAAA,EAAc,GAAGH,GAChB,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAAN;AAAA,QACA,MAAK;AAAA,QACL,SAAO;AAAA,QACP,WAAW;AAAA,QACX,SATQ;AAAA,QAUR,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGT,gBAAAI,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MACtC,gBAAAC,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAM;AAAA,IAAA,GAC5C;AAAA,IAEA,gBAAAE,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,wBACpC,QAAA,EAAK,WAAU,aACrB,UAAAF,GAAO,UAAU,EAAA,CACpB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAMK,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWD;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,UAAU,EAAE,SAAS,GAAA;AAAA,IACrB,QAAQ,EAAE,SAAS,GAAA;AAAA,IACnB,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,gBAAgB,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAEnC,YAAY;AAAA,IACV,CAACE,MACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACG,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GAMaC,IAAiB;AAAA,EAC5B,QAAQ,CAACV,MAAS,gBAAAM,EAACR,GAAA,EAAqB,GAAGE,EAAA,CAAM;AACnD;"}

package/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAIzD,iBAAS,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAmBvE;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAIzD,iBAAS,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CA+BvE;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/Switch/Switch.js

@@ -1,23 +1,35 @@
 import { jsx as e } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-switch";
 import { cn as a } from "@oneplatformdev/utils";
-function d(r) {
-  const { className: n, ...s } = r;
+function o(r) {
+  const { className: s, ...c } = r;
   return /* @__PURE__ */ e(
     t.Root,
     {
       "data-slot": "switch",
       className: a(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        n
+        "peer inline-flex h-5 w-9.5 shrink-0 items-center box-border rounded-full",
+        "data-[state=checked]:bg-[#9368FF] data-[state=unchecked]:bg-transparent",
+        "border data-[state=checked]:border-[#9368FF] data-[state=unchecked]:border-[#8C8F9A]",
+        "dark:data-[state=unchecked]:bg-input/80",
+        "cursor-pointer",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "shadow-none outline-none focus-visible:ring-[3px]",
+        "focus-visible:border-ring focus-visible:ring-ring/50",
+        "transition-all",
+        s
       ),
-      ...s,
+      ...c,
       children: /* @__PURE__ */ e(
         t.Thumb,
         {
           "data-slot": "switch-thumb",
           className: a(
-            "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+            "block rounded-full h-[calc(100%-1px)] aspect-square",
+            "data-[state=checked]:bg-[#FCFCFC] data-[state=unchecked]:bg-[#8C8F9A]",
+            "dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
+            "data-[state=unchecked]:translate-x-px data-[state=checked]:translate-x-[calc(100%+1px)]",
+            "pointer-events-none ring-0 transition-transform"
           )
         }
       )
@@ -25,6 +37,6 @@ function d(r) {
   );
 }
 export {
-  d as Switch
+  o as Switch
 };
 //# sourceMappingURL=Switch.js.map

package/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Switch(props: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  const { className, ...rest } = props;\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...rest}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n"],"names":["Switch","props","className","rest","jsx","SwitchPrimitive","cn"],"mappings":";;;AAOA,SAASA,EAAOC,GAA0D;AACxE,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAASF;AAC/B,SACE,gBAAAG;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAC;AAAA,QAACC,EAAgB;AAAA,QAAhB;AAAA,UACC,aAAU;AAAA,UACV,WAAWC;AAAA,YACT;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Switch(props: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  const { className, ...rest } = props;\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'peer inline-flex h-5 w-9.5 shrink-0 items-center box-border rounded-full',\n        'data-[state=checked]:bg-[#9368FF] data-[state=unchecked]:bg-transparent',\n        'border data-[state=checked]:border-[#9368FF] data-[state=unchecked]:border-[#8C8F9A]',\n        'dark:data-[state=unchecked]:bg-input/80',\n        'cursor-pointer',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'shadow-none outline-none focus-visible:ring-[3px]',\n        'focus-visible:border-ring focus-visible:ring-ring/50',\n        \"transition-all\",\n        className\n      )}\n      {...rest}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'block rounded-full h-[calc(100%-1px)] aspect-square',\n          'data-[state=checked]:bg-[#FCFCFC] data-[state=unchecked]:bg-[#8C8F9A]',\n          'dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground',\n          'data-[state=unchecked]:translate-x-px data-[state=checked]:translate-x-[calc(100%+1px)]',\n          \"pointer-events-none ring-0 transition-transform\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n"],"names":["Switch","props","className","rest","jsx","SwitchPrimitive","cn"],"mappings":";;;AAOA,SAASA,EAAOC,GAA0D;AACxE,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAASF;AAC/B,SACE,gBAAAG;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAC;AAAA,QAACC,EAAgB;AAAA,QAAhB;AAAA,UACC,aAAU;AAAA,UACV,WAAWC;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/Switch/Switch.stories.js

@@ -0,0 +1,62 @@
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import * as a from "react";
+import { Switch as o } from "./Switch.js";
+const r = {
+  title: "Input/Switch",
+  component: o,
+  tags: ["autodocs"],
+  args: {
+    checked: !1,
+    disabled: !1
+  },
+  argTypes: {
+    checked: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    onCheckedChange: {
+      action: "checked changed"
+    }
+  },
+  render: (e) => {
+    const [c, t] = a.useState(e.checked);
+    return a.useEffect(() => {
+      t(e.checked);
+    }, [e.checked]), /* @__PURE__ */ n("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ s(
+        o,
+        {
+          ...e,
+          checked: c,
+          onCheckedChange: (d) => {
+            t(d), e.onCheckedChange?.(d);
+          }
+        }
+      ),
+      /* @__PURE__ */ s("span", { className: "text-sm", children: c ? "Enabled" : "Disabled" })
+    ] });
+  }
+}, i = {}, k = {
+  args: {
+    checked: !0
+  }
+}, m = {
+  args: {
+    disabled: !0
+  }
+}, b = {
+  args: {
+    checked: !0,
+    disabled: !0
+  }
+};
+export {
+  k as Checked,
+  i as Default,
+  m as Disabled,
+  b as DisabledChecked,
+  r as default
+};
+//# sourceMappingURL=Switch.stories.js.map

package/Switch/Switch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.stories.js","sources":["../../src/Switch/Switch.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport * as React from 'react';\n\nimport { Switch } from './switch';\n\nconst meta = {\n  title: 'Input/Switch',\n  component: Switch,\n  tags: ['autodocs'],\n  args: {\n    checked: false,\n    disabled: false,\n  },\n  argTypes: {\n    checked: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    onCheckedChange: {\n      action: 'checked changed',\n    },\n  },\n  render: (args) => {\n    const [checked, setChecked] = React.useState(args.checked);\n\n    React.useEffect(() => {\n      setChecked(args.checked);\n    }, [args.checked]);\n\n    return (\n      <div className=\"flex items-center gap-3\">\n        <Switch\n          {...args}\n          checked={checked}\n          onCheckedChange={(value) => {\n            setChecked(value);\n            args.onCheckedChange?.(value);\n          }}\n        />\n        <span className=\"text-sm\">{checked ? 'Enabled' : 'Disabled'}</span>\n      </div>\n    );\n  },\n} satisfies Meta<typeof Switch>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Checked: Story = {\n  args: {\n    checked: true,\n  },\n};\n\nexport const Disabled: Story = {\n  args: {\n    disabled: true,\n  },\n};\n\nexport const DisabledChecked: Story = {\n  args: {\n    checked: true,\n    disabled: true,\n  },\n};\n"],"names":["meta","Switch","args","checked","setChecked","React","jsxs","jsx","value","Default","Checked","Disabled","DisabledChecked"],"mappings":";;;AAKA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,iBAAiB;AAAA,MACf,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,QAAQ,CAACC,MAAS;AAChB,UAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAASH,EAAK,OAAO;AAEzD,WAAAG,EAAM,UAAU,MAAM;AACpB,MAAAD,EAAWF,EAAK,OAAO;AAAA,IACzB,GAAG,CAACA,EAAK,OAAO,CAAC,GAGf,gBAAAI,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACN;AAAA,QAAA;AAAA,UACE,GAAGC;AAAA,UACJ,SAAAC;AAAA,UACA,iBAAiB,CAACK,MAAU;AAC1B,YAAAJ,EAAWI,CAAK,GAChBN,EAAK,kBAAkBM,CAAK;AAAA,UAC9B;AAAA,QAAA;AAAA,MAAA;AAAA,wBAED,QAAA,EAAK,WAAU,WAAW,UAAAL,IAAU,YAAY,WAAA,CAAW;AAAA,IAAA,GAC9D;AAAA,EAEJ;AACF,GAMaM,IAAiB,CAAA,GAEjBC,IAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,SAAS;AAAA,EAAA;AAEb,GAEaC,IAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,UAAU;AAAA,EAAA;AAEd,GAEaC,IAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAEd;"}

package/Tooltip/Tooltip.js

@@ -51,14 +51,14 @@ const l = (t) => {
             ...e?.content || {},
             className: n(
               "flex items-center justify-center",
-              "w-auto max-w-80",
+              "w-auto max-w-70",
               "rounded-xl",
-              "px-4 py-3",
+              "px-2 py-2",
               "bg-white",
               "text-primary",
-              "text-md font-normal leading-normal",
+              "text-md font-normal leading-tight",
               "shadow-[1px_1px_10px_0px_rgba(6,8,13,0.1)]",
-              "whitespace-pre-wrap break-words",
+              "whitespace-pre-wrap break-words text-nowrap",
               s?.className,
               e?.content?.className
             ),

package/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { CircleQuestionMarkIcon } from 'lucide-react';\nimport { PropsWithChildren } from \"react\";\n\nimport { cn } from \"@oneplatformdev/utils\";\nimport type { TooltipProps } from \"./Tooltip.types\";\nimport { TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider } from \"./TooltipRoot\";\nimport { tooltipQuestionIconVariants } from './tooltipVariants';\n\nexport const TooltipInner = (props: PropsWithChildren<TooltipProps>) => {\n  const { triggerProps, contentProps, message, children, showQuestionMark = false, size = 'md', questionIconSize = size, slotProps, ...rest } = props;\n  return (\n    <TooltipRoot\n      defaultOpen={false}\n      delayDuration={300}\n      {...rest}\n    >\n      <TooltipTrigger\n        {...(triggerProps || {})}\n        {...(slotProps?.trigger || {})}\n        className={cn(\n          'flex flex-row gap-1 w-fit',\n          'items-center',\n          'cursor-pointer',\n          'outline-none',\n          triggerProps?.className,\n          slotProps?.trigger?.className\n        )}\n        type='button'\n      >\n        {children}\n        {showQuestionMark && (\n          <CircleQuestionMarkIcon\n            {...(slotProps?.questionIcon || {})}\n            className={cn(\n              tooltipQuestionIconVariants({ size: size || questionIconSize }),\n              'cursor-help',\n              slotProps?.questionIcon?.className\n            )}\n          />\n        )}\n      </TooltipTrigger>\n\n      <TooltipContent\n        align=\"center\"\n        sideOffset={8}\n        {...(contentProps || {})}\n        {...(slotProps?.content || {})}\n        className={cn(\n          'flex items-center justify-center',\n          'w-auto max-w-80',\n          'rounded-xl',\n          'px-4 py-3',\n          'bg-white',\n          'text-primary',\n          'text-md font-normal leading-normal',\n          'shadow-[1px_1px_10px_0px_rgba(6,8,13,0.1)]',\n          'whitespace-pre-wrap break-words',\n          contentProps?.className,\n          slotProps?.content?.className\n        )}\n      >\n        {message || ''}\n      </TooltipContent>\n    </TooltipRoot>\n  );\n};\n\nexport const Tooltip = (props: PropsWithChildren<TooltipProps>) => {\n  const { skipProvider = true } = props;\n  if (skipProvider) return <TooltipInner {...props}/>;\n  return (\n    <TooltipProvider>\n      <TooltipInner {...props}/>\n    </TooltipProvider>\n  );\n};\n"],"names":["TooltipInner","props","triggerProps","contentProps","message","children","showQuestionMark","size","questionIconSize","slotProps","rest","jsxs","TooltipRoot","TooltipTrigger","cn","jsx","CircleQuestionMarkIcon","tooltipQuestionIconVariants","TooltipContent","Tooltip","skipProvider","TooltipProvider"],"mappings":";;;;;AAQO,MAAMA,IAAe,CAACC,MAA2C;AACtE,QAAM,EAAE,cAAAC,GAAc,cAAAC,GAAc,SAAAC,GAAS,UAAAC,GAAU,kBAAAC,IAAmB,IAAO,MAAAC,IAAO,MAAM,kBAAAC,IAAmBD,GAAM,WAAAE,GAAW,GAAGC,MAAST;AAC9I,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,eAAe;AAAA,MACd,GAAGF;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACE;AAAA,UAAA;AAAA,YACE,GAAIX,KAAgB,CAAA;AAAA,YACpB,GAAIO,GAAW,WAAW,CAAA;AAAA,YAC3B,WAAWK;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAZ,GAAc;AAAA,cACdO,GAAW,SAAS;AAAA,YAAA;AAAA,YAEtB,MAAK;AAAA,YAEJ,UAAA;AAAA,cAAAJ;AAAA,cACAC,KACC,gBAAAS;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACE,GAAIP,GAAW,gBAAgB,CAAA;AAAA,kBAChC,WAAWK;AAAA,oBACTG,EAA4B,EAAE,MAAMV,KAAQC,GAAkB;AAAA,oBAC9D;AAAA,oBACAC,GAAW,cAAc;AAAA,kBAAA;AAAA,gBAC3B;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ,gBAAAM;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,YAAY;AAAA,YACX,GAAIf,KAAgB,CAAA;AAAA,YACpB,GAAIM,GAAW,WAAW,CAAA;AAAA,YAC3B,WAAWK;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAX,GAAc;AAAA,cACdM,GAAW,SAAS;AAAA,YAAA;AAAA,YAGrB,UAAAL,KAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAGN,GAEae,IAAU,CAAClB,MAA2C;AACjE,QAAM,EAAE,cAAAmB,IAAe,GAAA,IAASnB;AAChC,SAAImB,IAAqB,gBAAAL,EAACf,GAAA,EAAc,GAAGC,EAAA,CAAM,sBAE9CoB,GAAA,EACC,UAAA,gBAAAN,EAACf,GAAA,EAAc,GAAGC,GAAM,GAC1B;AAEJ;"}
+{"version":3,"file":"Tooltip.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { CircleQuestionMarkIcon } from 'lucide-react';\nimport { PropsWithChildren } from \"react\";\n\nimport { cn } from \"@oneplatformdev/utils\";\nimport type { TooltipProps } from \"./Tooltip.types\";\nimport { TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider } from \"./TooltipRoot\";\nimport { tooltipQuestionIconVariants } from './tooltipVariants';\n\nexport const TooltipInner = (props: PropsWithChildren<TooltipProps>) => {\n  const { triggerProps, contentProps, message, children, showQuestionMark = false, size = 'md', questionIconSize = size, slotProps, ...rest } = props;\n  return (\n    <TooltipRoot\n      defaultOpen={false}\n      delayDuration={300}\n      {...rest}\n    >\n      <TooltipTrigger\n        {...(triggerProps || {})}\n        {...(slotProps?.trigger || {})}\n        className={cn(\n          'flex flex-row gap-1 w-fit',\n          'items-center',\n          'cursor-pointer',\n          'outline-none',\n          triggerProps?.className,\n          slotProps?.trigger?.className\n        )}\n        type='button'\n      >\n        {children}\n        {showQuestionMark && (\n          <CircleQuestionMarkIcon\n            {...(slotProps?.questionIcon || {})}\n            className={cn(\n              tooltipQuestionIconVariants({ size: size || questionIconSize }),\n              'cursor-help',\n              slotProps?.questionIcon?.className\n            )}\n          />\n        )}\n      </TooltipTrigger>\n\n      <TooltipContent\n        align=\"center\"\n        sideOffset={8}\n        {...(contentProps || {})}\n        {...(slotProps?.content || {})}\n        className={cn(\n          'flex items-center justify-center',\n          'w-auto max-w-70',\n          'rounded-xl',\n          'px-2 py-2',\n          'bg-white',\n          'text-primary',\n          'text-md font-normal leading-tight',\n          'shadow-[1px_1px_10px_0px_rgba(6,8,13,0.1)]',\n          'whitespace-pre-wrap break-words text-nowrap',\n          contentProps?.className,\n          slotProps?.content?.className\n        )}\n      >\n        {message || ''}\n      </TooltipContent>\n    </TooltipRoot>\n  );\n};\n\nexport const Tooltip = (props: PropsWithChildren<TooltipProps>) => {\n  const { skipProvider = true } = props;\n  if (skipProvider) return <TooltipInner {...props}/>;\n  return (\n    <TooltipProvider>\n      <TooltipInner {...props}/>\n    </TooltipProvider>\n  );\n};\n"],"names":["TooltipInner","props","triggerProps","contentProps","message","children","showQuestionMark","size","questionIconSize","slotProps","rest","jsxs","TooltipRoot","TooltipTrigger","cn","jsx","CircleQuestionMarkIcon","tooltipQuestionIconVariants","TooltipContent","Tooltip","skipProvider","TooltipProvider"],"mappings":";;;;;AAQO,MAAMA,IAAe,CAACC,MAA2C;AACtE,QAAM,EAAE,cAAAC,GAAc,cAAAC,GAAc,SAAAC,GAAS,UAAAC,GAAU,kBAAAC,IAAmB,IAAO,MAAAC,IAAO,MAAM,kBAAAC,IAAmBD,GAAM,WAAAE,GAAW,GAAGC,MAAST;AAC9I,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,eAAe;AAAA,MACd,GAAGF;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACE;AAAA,UAAA;AAAA,YACE,GAAIX,KAAgB,CAAA;AAAA,YACpB,GAAIO,GAAW,WAAW,CAAA;AAAA,YAC3B,WAAWK;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAZ,GAAc;AAAA,cACdO,GAAW,SAAS;AAAA,YAAA;AAAA,YAEtB,MAAK;AAAA,YAEJ,UAAA;AAAA,cAAAJ;AAAA,cACAC,KACC,gBAAAS;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACE,GAAIP,GAAW,gBAAgB,CAAA;AAAA,kBAChC,WAAWK;AAAA,oBACTG,EAA4B,EAAE,MAAMV,KAAQC,GAAkB;AAAA,oBAC9D;AAAA,oBACAC,GAAW,cAAc;AAAA,kBAAA;AAAA,gBAC3B;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ,gBAAAM;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,YAAY;AAAA,YACX,GAAIf,KAAgB,CAAA;AAAA,YACpB,GAAIM,GAAW,WAAW,CAAA;AAAA,YAC3B,WAAWK;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAX,GAAc;AAAA,cACdM,GAAW,SAAS;AAAA,YAAA;AAAA,YAGrB,UAAAL,KAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAGN,GAEae,IAAU,CAAClB,MAA2C;AACjE,QAAM,EAAE,cAAAmB,IAAe,GAAA,IAASnB;AAChC,SAAImB,IAAqB,gBAAAL,EAACf,GAAA,EAAc,GAAGC,EAAA,CAAM,sBAE9CoB,GAAA,EACC,UAAA,gBAAAN,EAACf,GAAA,EAAc,GAAGC,GAAM,GAC1B;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.1.99-beta.243",
+  "version": "0.1.99-beta.246",
   "description": "UI component library for OnePlatform",
   "author": "One Platform Development Team",
   "keywords": [
@@ -106,9 +106,9 @@
     "recharts": "^3.2.0",
     "sonner": "^2.0.7",
     "vaul": "^1.1.2",
-    "@oneplatformdev/hooks": "^0.1.99-beta.243",
-    "@oneplatformdev/utils": "^0.1.99-beta.243",
-    "@oneplatformdev/tokens": "^0.1.99-beta.243"
+    "@oneplatformdev/tokens": "^0.1.99-beta.246",
+    "@oneplatformdev/utils": "^0.1.99-beta.246",
+    "@oneplatformdev/hooks": "^0.1.99-beta.246"
   },
   "scripts": {
     "chromatic": "chromatic"