@oneplatformdev/ui 0.1.99-beta.83 → 0.1.99-beta.85

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.1.99-beta.85 (2026-01-26)
+
+### 🚀 Features
+
+- **Checkbox:** add controlled checkbox stories and improve styles ([572490c](https://github.com/oneplatformdev/core-web/commit/572490c))
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.85
+- Updated @oneplatformdev/hooks to 0.1.99-beta.85
+- Updated @oneplatformdev/tokens to 0.1.99-beta.85
+
+### ❤️ Thank You
+
+- Bohdan Radchenko
+
+## 0.1.99-beta.84 (2026-01-26)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.84
+- Updated @oneplatformdev/hooks to 0.1.99-beta.84
+- Updated @oneplatformdev/tokens to 0.1.99-beta.84
+
 ## 0.1.99-beta.83 (2026-01-26)
 
 ### 🧱 Updated Dependencies

package/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAK1E,QAAA,MAAM,QAAQ,yFAsBZ,CAAC;AAGH,QAAA,MAAM,aAAa,6FAqBjB,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAI1E,QAAA,MAAM,QAAQ,yFA0BZ,CAAC;AAGH,QAAA,MAAM,aAAa,6FAyBjB,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC"}

package/Checkbox/Checkbox.js

@@ -1,55 +1,57 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import * as c from "@radix-ui/react-checkbox";
-import { MinusIcon as f, CheckIcon as p } from "lucide-react";
-import * as m from "react";
-import { cn as i } from "@oneplatformdev/utils";
+import { MinusIcon as m, CheckIcon as p } from "lucide-react";
+import * as n from "react";
+import { cn as o } from "@oneplatformdev/utils";
 import { Label as h } from "../Label/Label.js";
 import "../Label/labelVariants.js";
-const n = m.forwardRef(({ className: o, checked: s, indeterminate: e, ...a }, t) => {
-  const d = e ? f : p;
-  return /* @__PURE__ */ r(
+const d = n.forwardRef(({ className: s, checked: a, indeterminate: e, ...r }, i) => {
+  const f = e ? m : p;
+  return /* @__PURE__ */ t(
     c.Root,
     {
-      ref: t,
-      className: i(
-        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-        o
+      ref: i,
+      className: o(
+        "peer size-5 shrink-0 rounded-sm",
+        "shadow-none border",
+        "border-[#666A78] data-[state=checked]:border-[#9368FF]",
+        "bg-transparent data-[state=checked]:bg-[#9368FF]",
+        "bg-transparent data-[state=checked]:bg-[#9368FF] data-[state=checked]:text-[#fff]!",
+        "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        s
       ),
-      ...a,
-      checked: s ?? e,
-      children: /* @__PURE__ */ r(
-        c.Indicator,
-        {
-          className: i("flex items-center justify-center text-current"),
-          children: /* @__PURE__ */ r(d, { className: "h-4 w-4" })
-        }
-      )
+      ...r,
+      checked: a ?? e,
+      children: /* @__PURE__ */ t(c.Indicator, { className: o("flex items-center justify-center"), children: /* @__PURE__ */ t(f, { className: "size-4 fill-[#9368FF] text-[#fff]!" }) })
     }
   );
 });
-n.displayName = c.Root.displayName;
-const u = m.forwardRef(({ label: o = "", children: s, labelProps: e, ...a }, t) => /* @__PURE__ */ l(
+d.displayName = c.Root.displayName;
+const x = n.forwardRef(({ label: s = "", children: a, labelProps: e, ...r }, i) => /* @__PURE__ */ l(
   h,
   {
-    ref: t,
+    ref: i,
     ...e,
-    className: i(
-      "flex w-full items-start gap-3 font-normal py-3 cursor-pointer",
+    className: o(
+      "flex w-fit items-start gap-2 py-2 pl-1",
+      "text-[#06080D] text-md font-medium",
+      "cursor-pointer",
       e?.className
     ),
     style: e?.style,
     children: [
-      /* @__PURE__ */ r(n, { ...a }),
-      /* @__PURE__ */ l("div", { className: "flex flex-col w-full gap-3", children: [
-        /* @__PURE__ */ r("span", { className: "flex flex-col justify-start leading-[16px]", children: o }),
-        s
+      /* @__PURE__ */ t("div", { className: "size-6 aspect-square flex items-center justify-center", children: /* @__PURE__ */ t(d, { ...r }) }),
+      /* @__PURE__ */ l("div", { className: "flex flex-col w-fit gap-3", children: [
+        /* @__PURE__ */ t("span", { className: "inline-flex w-fit flex-col justify-start leading-[24px]", children: s }),
+        a
       ] })
     ]
   }
 ));
-u.displayName = "CheckboxLabel";
+x.displayName = "CheckboxLabel";
 export {
-  n as Checkbox,
-  u as CheckboxLabel
+  d as Checkbox,
+  x as CheckboxLabel
 };
 //# sourceMappingURL=Checkbox.js.map

package/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon, MinusIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@oneplatformdev/utils';\nimport type { CheckboxLabelProps, CheckboxProps } from './Checkbox.types';\n\nimport { Label } from '../Label';\n\n// TODO: move to @oneplatformdev/ui/Checkbox\nconst Checkbox = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxProps\n>(({ className, checked, indeterminate, ...props }, ref) => {\n\tconst Icon = indeterminate ? MinusIcon : CheckIcon;\n\treturn (\n\t\t<CheckboxPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tchecked={checked ?? indeterminate}\n\t\t>\n\t\t\t<CheckboxPrimitive.Indicator\n\t\t\t\tclassName={cn(\"flex items-center justify-center text-current\")}\n\t\t\t>\n\t\t\t\t<Icon className=\"h-4 w-4\"/>\n\t\t\t</CheckboxPrimitive.Indicator>\n\t\t</CheckboxPrimitive.Root>\n\t);\n});\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nconst CheckboxLabel = React.forwardRef<\n\tHTMLLabelElement,\n\tCheckboxLabelProps\n>(({ label = '', children, labelProps, ...rest }, ref) => {\n\treturn (\n\t\t<Label\n\t\t\tref={ref}\n\t\t\t{...labelProps}\n\t\t\tclassName={cn(\n\t\t\t\t'flex w-full items-start gap-3 font-normal py-3 cursor-pointer',\n\t\t\t\tlabelProps?.className,\n\t\t\t)}\n\t\t\tstyle={labelProps?.style}\n\t\t>\n\t\t\t<Checkbox {...rest}/>\n\t\t\t<div className='flex flex-col w-full gap-3'>\n\t\t\t\t<span className='flex flex-col justify-start leading-[16px]'>{label}</span>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</Label>\n\t);\n});\nCheckboxLabel.displayName = 'CheckboxLabel';\n\nexport { Checkbox, CheckboxLabel };\n"],"names":["Checkbox","React","className","checked","indeterminate","props","ref","Icon","MinusIcon","CheckIcon","jsx","CheckboxPrimitive","cn","CheckboxLabel","label","children","labelProps","rest","jsxs","Label"],"mappings":";;;;;;;AAYA,MAAMA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,eAAAC,GAAe,GAAGC,EAAA,GAASC,MAAQ;AAC3D,QAAMC,IAAOH,IAAgBI,IAAYC;AACzC,SACC,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACA,KAAAL;AAAA,MACA,WAAWM;AAAA,QACV;AAAA,QACAV;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,MACJ,SAASF,KAAWC;AAAA,MAEpB,UAAA,gBAAAM;AAAA,QAACC,EAAkB;AAAA,QAAlB;AAAA,UACA,WAAWC,EAAG,+CAA+C;AAAA,UAE7D,UAAA,gBAAAF,EAACH,GAAA,EAAK,WAAU,UAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B;AAAA,EAAA;AAGH,CAAC;AACDP,EAAS,cAAcW,EAAkB,KAAK;AAE9C,MAAME,IAAgBZ,EAAM,WAG1B,CAAC,EAAE,OAAAa,IAAQ,IAAI,UAAAC,GAAU,YAAAC,GAAY,GAAGC,EAAA,GAAQX,MAEhD,gBAAAY;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,KAAAb;AAAA,IACC,GAAGU;AAAA,IACJ,WAAWJ;AAAA,MACV;AAAA,MACAI,GAAY;AAAA,IAAA;AAAA,IAEb,OAAOA,GAAY;AAAA,IAEnB,UAAA;AAAA,MAAA,gBAAAN,EAACV,GAAA,EAAU,GAAGiB,GAAK;AAAA,MACnB,gBAAAC,EAAC,OAAA,EAAI,WAAU,8BACd,UAAA;AAAA,QAAA,gBAAAR,EAAC,QAAA,EAAK,WAAU,8CAA8C,UAAAI,GAAM;AAAA,QACnEC;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAAA,CAGF;AACDF,EAAc,cAAc;"}
+{"version":3,"file":"Checkbox.js","sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon, MinusIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@oneplatformdev/utils';\nimport type { CheckboxLabelProps, CheckboxProps } from './Checkbox.types';\n\nimport { Label } from '../Label';\n\nconst Checkbox = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxProps\n>(({ className, checked, indeterminate, ...props }, ref) => {\n\tconst Icon = indeterminate ? MinusIcon : CheckIcon;\n\treturn (\n\t\t<CheckboxPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"peer size-5 shrink-0 rounded-sm\",\n        'shadow-none border',\n        'border-[#666A78] data-[state=checked]:border-[#9368FF]',\n        'bg-transparent data-[state=checked]:bg-[#9368FF]',\n        'bg-transparent data-[state=checked]:bg-[#9368FF] data-[state=checked]:text-[#fff]!',\n        'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tchecked={checked ?? indeterminate}\n\t\t>\n\t\t\t<CheckboxPrimitive.Indicator className={cn(\"flex items-center justify-center\")}>\n        <Icon className=\"size-4 fill-[#9368FF] text-[#fff]!\" />\n\t\t\t</CheckboxPrimitive.Indicator>\n\t\t</CheckboxPrimitive.Root>\n\t);\n});\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nconst CheckboxLabel = React.forwardRef<\n\tHTMLLabelElement,\n\tCheckboxLabelProps\n>(({ label = '', children, labelProps, ...rest }, ref) => {\n\treturn (\n\t\t<Label\n\t\t\tref={ref}\n\t\t\t{...labelProps}\n      className={cn(\n        'flex w-fit items-start gap-2 py-2 pl-1',\n        'text-[#06080D] text-md font-medium',\n        'cursor-pointer',\n        labelProps?.className,\n      )}\n\t\t\tstyle={labelProps?.style}\n\t\t>\n      <div className='size-6 aspect-square flex items-center justify-center'>\n        <Checkbox {...rest} />\n      </div>\n      <div className='flex flex-col w-fit gap-3'>\n        <span className='inline-flex w-fit flex-col justify-start leading-[24px]'>{label}</span>\n        {children}\n      </div>\n\t\t</Label>\n\t);\n});\nCheckboxLabel.displayName = 'CheckboxLabel';\n\nexport { Checkbox, CheckboxLabel };\n"],"names":["Checkbox","React","className","checked","indeterminate","props","ref","Icon","MinusIcon","CheckIcon","jsx","CheckboxPrimitive","cn","CheckboxLabel","label","children","labelProps","rest","jsxs","Label"],"mappings":";;;;;;;AAWA,MAAMA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,eAAAC,GAAe,GAAGC,EAAA,GAASC,MAAQ;AAC3D,QAAMC,IAAOH,IAAgBI,IAAYC;AACzC,SACC,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACA,KAAAL;AAAA,MACA,WAAWM;AAAA,QACV;AAAA,QACI;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACJV;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,MACJ,SAASF,KAAWC;AAAA,MAEpB,UAAA,gBAAAM,EAACC,EAAkB,WAAlB,EAA4B,WAAWC,EAAG,kCAAkC,GACxE,UAAA,gBAAAF,EAACH,GAAA,EAAK,WAAU,qCAAA,CAAqC,EAAA,CAC1D;AAAA,IAAA;AAAA,EAAA;AAGH,CAAC;AACDP,EAAS,cAAcW,EAAkB,KAAK;AAE9C,MAAME,IAAgBZ,EAAM,WAG1B,CAAC,EAAE,OAAAa,IAAQ,IAAI,UAAAC,GAAU,YAAAC,GAAY,GAAGC,EAAA,GAAQX,MAEhD,gBAAAY;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,KAAAb;AAAA,IACC,GAAGU;AAAA,IACD,WAAWJ;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACAI,GAAY;AAAA,IAAA;AAAA,IAEjB,OAAOA,GAAY;AAAA,IAEhB,UAAA;AAAA,MAAA,gBAAAN,EAAC,SAAI,WAAU,yDACb,4BAACV,GAAA,EAAU,GAAGiB,GAAM,EAAA,CACtB;AAAA,MACA,gBAAAC,EAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,QAAA,gBAAAR,EAAC,QAAA,EAAK,WAAU,2DAA2D,UAAAI,GAAM;AAAA,QAChFC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAAA,CAGL;AACDF,EAAc,cAAc;"}

package/Checkbox/Checkbox.stories.js

@@ -0,0 +1,108 @@
+import { jsx as t } from "react/jsx-runtime";
+import n from "react";
+import { CheckboxLabel as m, Checkbox as b } from "./Checkbox.js";
+function f(e) {
+  const {
+    checked: a,
+    indeterminate: o,
+    onCheckedChange: l,
+    ...s
+  } = e, [i, d] = n.useState(a ?? !1), [h, r] = n.useState(!!o);
+  return n.useEffect(() => {
+    d(a ?? !1);
+  }, [a]), n.useEffect(() => {
+    r(!!o);
+  }, [o]), /* @__PURE__ */ t(
+    b,
+    {
+      ...s,
+      checked: i,
+      indeterminate: h,
+      onCheckedChange: (c) => {
+        d(c), c === "indeterminate" && r(!0), l?.(c);
+      }
+    }
+  );
+}
+function k(e) {
+  const {
+    checked: a,
+    indeterminate: o,
+    onCheckedChange: l,
+    ...s
+  } = e, [i, d] = n.useState(a ?? !1), [h, r] = n.useState(!!o);
+  return n.useEffect(() => {
+    d(a ?? !1);
+  }, [a]), n.useEffect(() => {
+    r(!!o);
+  }, [o]), /* @__PURE__ */ t(
+    m,
+    {
+      ...s,
+      checked: i,
+      indeterminate: h,
+      onCheckedChange: (c) => {
+        d(c), c === "indeterminate" && r(!0), l?.(c);
+      }
+    }
+  );
+}
+const x = {
+  title: "Input/Checkbox",
+  component: b,
+  subcomponents: { CheckboxLabel: m },
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  args: {
+    checked: !1,
+    indeterminate: !1,
+    disabled: !1
+  },
+  argTypes: {
+    checked: { control: "boolean" },
+    indeterminate: { control: "boolean" },
+    disabled: { control: "boolean" },
+    className: { control: "text" }
+  }
+}, y = {
+  render: (e) => /* @__PURE__ */ t(f, { ...e })
+}, L = {
+  args: { checked: !1, indeterminate: !0 },
+  render: (e) => /* @__PURE__ */ t(f, { ...e })
+}, S = {
+  args: { disabled: !0 },
+  render: (e) => /* @__PURE__ */ t(f, { ...e })
+}, B = {
+  name: "CheckboxLabel / Default",
+  args: {
+    label: "Погоджуюсь з умовами",
+    checked: !1,
+    indeterminate: !1,
+    disabled: !1
+  },
+  argTypes: {
+    label: { control: "text" },
+    checked: { control: "boolean" },
+    indeterminate: { control: "boolean" },
+    disabled: { control: "boolean" }
+  },
+  render: (e) => /* @__PURE__ */ t("div", { style: { width: 520 }, children: /* @__PURE__ */ t(k, { ...e }) })
+}, D = {
+  name: "CheckboxLabel / With description",
+  args: {
+    label: "Отримувати новини на email",
+    checked: !0,
+    indeterminate: !1,
+    disabled: !1
+  },
+  render: (e) => /* @__PURE__ */ t("div", { style: { width: 520 }, children: /* @__PURE__ */ t(k, { ...e, children: /* @__PURE__ */ t("span", { style: { fontSize: 14, opacity: 0.75 }, children: "Можна відписатися будь-коли в налаштуваннях профілю." }) }) })
+};
+export {
+  y as Default,
+  S as Disabled,
+  L as Indeterminate,
+  B as Label,
+  D as LabelWithDescription,
+  x as default
+};
+//# sourceMappingURL=Checkbox.stories.js.map

package/Checkbox/Checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.js","sources":["../../src/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport React from 'react';\nimport type { CheckedState } from '@radix-ui/react-checkbox';\n\nimport { Checkbox, CheckboxLabel } from './Checkbox';\n\nfunction ControlledCheckbox(props: React.ComponentProps<typeof Checkbox>) {\n  const {\n    checked: checkedProp,\n    indeterminate: indeterminateProp,\n    onCheckedChange,\n    ...rest\n  } = props;\n\n  const [checked, setChecked] = React.useState<CheckedState>(checkedProp ?? false);\n  const [indeterminate, setIndeterminate] = React.useState<boolean>(Boolean(indeterminateProp));\n\n  // sync from Storybook controls\n  React.useEffect(() => {\n    setChecked(checkedProp ?? false);\n  }, [checkedProp]);\n\n  React.useEffect(() => {\n    setIndeterminate(Boolean(indeterminateProp));\n  }, [indeterminateProp]);\n\n  const handleCheckedChange = (v: CheckedState) => {\n    setChecked(v);\n\n    // якщо прийшло indeterminate зі сторони Radix — підсвічуємо іконку мінуса\n    if (v === 'indeterminate') setIndeterminate(true);\n\n    onCheckedChange?.(v);\n  };\n\n  return (\n    <Checkbox\n      {...rest}\n      checked={checked}\n      indeterminate={indeterminate}\n      onCheckedChange={handleCheckedChange}\n    />\n  );\n}\n\nfunction ControlledCheckboxLabel(props: React.ComponentProps<typeof CheckboxLabel>) {\n  const {\n    checked: checkedProp,\n    indeterminate: indeterminateProp,\n    onCheckedChange,\n    ...rest\n  } = props;\n\n  const [checked, setChecked] = React.useState<CheckedState>(checkedProp ?? false);\n  const [indeterminate, setIndeterminate] = React.useState<boolean>(Boolean(indeterminateProp));\n\n  React.useEffect(() => {\n    setChecked(checkedProp ?? false);\n  }, [checkedProp]);\n\n  React.useEffect(() => {\n    setIndeterminate(Boolean(indeterminateProp));\n  }, [indeterminateProp]);\n\n  const handleCheckedChange = (v: CheckedState) => {\n    setChecked(v);\n    if (v === 'indeterminate') setIndeterminate(true);\n    onCheckedChange?.(v);\n  };\n\n  return (\n    <CheckboxLabel\n      {...rest}\n      checked={checked}\n      indeterminate={indeterminate}\n      onCheckedChange={handleCheckedChange}\n    />\n  );\n}\n\nconst meta: Meta<typeof Checkbox> = {\n  title: 'Input/Checkbox',\n  component: Checkbox,\n  subcomponents: { CheckboxLabel },\n  parameters: { layout: 'centered' },\n  tags: ['autodocs'],\n  args: {\n    checked: false,\n    indeterminate: false,\n    disabled: false,\n  },\n  argTypes: {\n    checked: { control: 'boolean' },\n    indeterminate: { control: 'boolean' },\n    disabled: { control: 'boolean' },\n    className: { control: 'text' },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Checkbox>;\n\nexport const Default: Story = {\n  render: (args) => <ControlledCheckbox {...args} />,\n};\n\nexport const Indeterminate: Story = {\n  args: { checked: false, indeterminate: true },\n  render: (args) => <ControlledCheckbox {...args} />,\n};\n\nexport const Disabled: Story = {\n  args: { disabled: true },\n  render: (args) => <ControlledCheckbox {...args} />,\n};\n\nexport const Label: StoryObj<typeof CheckboxLabel> = {\n  name: 'CheckboxLabel / Default',\n  args: {\n    label: 'Погоджуюсь з умовами',\n    checked: false,\n    indeterminate: false,\n    disabled: false,\n  },\n  argTypes: {\n    label: { control: 'text' },\n    checked: { control: 'boolean' },\n    indeterminate: { control: 'boolean' },\n    disabled: { control: 'boolean' },\n  },\n  render: (args) => (\n    <div style={{ width: 520 }}>\n      <ControlledCheckboxLabel {...args} />\n    </div>\n  ),\n};\n\nexport const LabelWithDescription: StoryObj<typeof CheckboxLabel> = {\n  name: 'CheckboxLabel / With description',\n  args: {\n    label: 'Отримувати новини на email',\n    checked: true,\n    indeterminate: false,\n    disabled: false,\n  },\n  render: (args) => (\n    <div style={{ width: 520 }}>\n      <ControlledCheckboxLabel {...args}>\n        <span style={{ fontSize: 14, opacity: 0.75 }}>\n          Можна відписатися будь-коли в налаштуваннях профілю.\n        </span>\n      </ControlledCheckboxLabel>\n    </div>\n  ),\n};\n"],"names":["ControlledCheckbox","props","checkedProp","indeterminateProp","onCheckedChange","rest","checked","setChecked","React","indeterminate","setIndeterminate","jsx","Checkbox","v","ControlledCheckboxLabel","CheckboxLabel","meta","Default","args","Indeterminate","Disabled","Label","LabelWithDescription"],"mappings":"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"}

package/package.json

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