@zentauri-ui/zentauri-components 1.7.0 → 1.7.2

package/dist/ui/radio-group.js

@@ -0,0 +1,171 @@
+"use client";
+'use strict';
+
+var chunk6QQUQLPB_js = require('../chunk-6QQUQLPB.js');
+var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function RadioGroup(props) {
+  const {
+    className,
+    value,
+    defaultValue,
+    name,
+    disabled,
+    required,
+    onValueChange,
+    orientation,
+    appearance,
+    size,
+    children,
+    ref,
+    ...rest
+  } = props;
+  const generatedName = react.useId();
+  const isControlled = value !== void 0;
+  const [uncontrolled, setUncontrolled] = react.useState(defaultValue);
+  const resolvedValue = isControlled ? value : uncontrolled;
+  const setValue = react.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunk6QQUQLPB_js.RadioGroupContext.Provider,
+    {
+      value: {
+        value: resolvedValue,
+        name: name ?? generatedName,
+        disabled,
+        required,
+        appearance: appearance ?? void 0,
+        size: size ?? void 0,
+        onValueChange: setValue
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          role: "radiogroup",
+          "data-slot": "radio-group",
+          "data-orientation": orientation ?? "vertical",
+          className: chunkZS5756ZC_js.cn(chunk6QQUQLPB_js.radioGroupRootVariants({ orientation }), className),
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+RadioGroup.displayName = "RadioGroup";
+function RadioGroupItem(props) {
+  const {
+    className,
+    rootClassName,
+    controlClassName,
+    indicatorClassName,
+    value,
+    appearance: appearanceProp,
+    size: sizeProp,
+    disabled: disabledProp,
+    required: requiredProp,
+    children,
+    label,
+    id,
+    ref,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  const generatedId = react.useId();
+  const context = chunk6QQUQLPB_js.useRadioGroupContext();
+  const controlId = id ?? generatedId;
+  const checked = context?.value === value;
+  const disabled = disabledProp ?? context?.disabled;
+  const required = requiredProp ?? context?.required;
+  const appearance = appearanceProp ?? context?.appearance;
+  const size = sizeProp ?? context?.size;
+  const labelContent = label ?? children;
+  const hasVisibleLabel = labelContent !== void 0 && labelContent !== null && labelContent !== false;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: chunkZS5756ZC_js.cn(chunk6QQUQLPB_js.radioGroupItemVariants({ size }), rootClassName, className),
+      "data-disabled": disabled ? "true" : void 0,
+      "data-state": checked ? "checked" : "unchecked",
+      htmlFor: controlId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            id: controlId,
+            type: "radio",
+            "data-slot": "radio-group-item",
+            className: "peer sr-only",
+            name: context?.name,
+            value,
+            checked,
+            disabled,
+            required,
+            "aria-label": ariaLabel ?? (hasVisibleLabel ? void 0 : value),
+            onChange: (event) => {
+              if (event.currentTarget.checked) {
+                context?.onValueChange(value);
+              }
+            },
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: chunkZS5756ZC_js.cn(
+              chunk6QQUQLPB_js.radioGroupControlVariants({ appearance, size }),
+              controlClassName
+            ),
+            "data-slot": "radio-group-control",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: chunkZS5756ZC_js.cn(
+                  chunk6QQUQLPB_js.radioGroupIndicatorVariants({ size }),
+                  indicatorClassName
+                ),
+                "data-slot": "radio-group-indicator"
+              }
+            )
+          }
+        ),
+        hasVisibleLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 leading-6", "data-slot": "radio-group-label", children: labelContent })
+      ]
+    }
+  );
+}
+RadioGroupItem.displayName = "RadioGroupItem";
+
+Object.defineProperty(exports, "radioGroupControlVariants", {
+  enumerable: true,
+  get: function () { return chunk6QQUQLPB_js.radioGroupControlVariants; }
+});
+Object.defineProperty(exports, "radioGroupIndicatorVariants", {
+  enumerable: true,
+  get: function () { return chunk6QQUQLPB_js.radioGroupIndicatorVariants; }
+});
+Object.defineProperty(exports, "radioGroupItemVariants", {
+  enumerable: true,
+  get: function () { return chunk6QQUQLPB_js.radioGroupItemVariants; }
+});
+Object.defineProperty(exports, "radioGroupRootVariants", {
+  enumerable: true,
+  get: function () { return chunk6QQUQLPB_js.radioGroupRootVariants; }
+});
+exports.RadioGroup = RadioGroup;
+exports.RadioGroupItem = RadioGroupItem;
+//# sourceMappingURL=radio-group.js.map
+//# sourceMappingURL=radio-group.js.map

package/dist/ui/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/radio-group/radio-group.tsx"],"names":["useId","useState","useCallback","jsx","RadioGroupContext","cn","radioGroupRootVariants","useRadioGroupContext","jsxs","radioGroupItemVariants","radioGroupControlVariants","radioGroupIndicatorVariants"],"mappings":"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","file":"radio-group.js","sourcesContent":["\"use client\";\n\nimport { useCallback, useId, useState } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport {\n  RadioGroupContext,\n  useRadioGroupContext,\n} from \"./radio-group-context\";\nimport type { RadioGroupItemProps, RadioGroupProps } from \"./types\";\nimport {\n  radioGroupControlVariants,\n  radioGroupIndicatorVariants,\n  radioGroupItemVariants,\n  radioGroupRootVariants,\n} from \"./variants\";\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const {\n    className,\n    value,\n    defaultValue,\n    name,\n    disabled,\n    required,\n    onValueChange,\n    orientation,\n    appearance,\n    size,\n    children,\n    ref,\n    ...rest\n  } = props;\n  const generatedName = useId();\n  const isControlled = value !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const resolvedValue = isControlled ? value : uncontrolled;\n\n  const setValue = useCallback(\n    (next: string) => {\n      if (!isControlled) {\n        setUncontrolled(next);\n      }\n      onValueChange?.(next);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return (\n    <RadioGroupContext.Provider\n      value={{\n        value: resolvedValue,\n        name: name ?? generatedName,\n        disabled,\n        required,\n        appearance: appearance ?? undefined,\n        size: size ?? undefined,\n        onValueChange: setValue,\n      }}\n    >\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        data-slot=\"radio-group\"\n        data-orientation={orientation ?? \"vertical\"}\n        className={cn(radioGroupRootVariants({ orientation }), className)}\n        {...rest}\n      >\n        {children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n}\n\nRadioGroup.displayName = \"RadioGroup\";\n\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const {\n    className,\n    rootClassName,\n    controlClassName,\n    indicatorClassName,\n    value,\n    appearance: appearanceProp,\n    size: sizeProp,\n    disabled: disabledProp,\n    required: requiredProp,\n    children,\n    label,\n    id,\n    ref,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const generatedId = useId();\n  const context = useRadioGroupContext();\n  const controlId = id ?? generatedId;\n  const checked = context?.value === value;\n  const disabled = disabledProp ?? context?.disabled;\n  const required = requiredProp ?? context?.required;\n  const appearance = appearanceProp ?? context?.appearance;\n  const size = sizeProp ?? context?.size;\n  const labelContent = label ?? children;\n  const hasVisibleLabel =\n    labelContent !== undefined && labelContent !== null && labelContent !== false;\n\n  return (\n    <label\n      className={cn(radioGroupItemVariants({ size }), rootClassName, className)}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-state={checked ? \"checked\" : \"unchecked\"}\n      htmlFor={controlId}\n    >\n      <input\n        ref={ref}\n        id={controlId}\n        type=\"radio\"\n        data-slot=\"radio-group-item\"\n        className=\"peer sr-only\"\n        name={context?.name}\n        value={value}\n        checked={checked}\n        disabled={disabled}\n        required={required}\n        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : value)}\n        onChange={(event) => {\n          if (event.currentTarget.checked) {\n            context?.onValueChange(value);\n          }\n        }}\n        {...rest}\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          radioGroupControlVariants({ appearance, size }),\n          controlClassName,\n        )}\n        data-slot=\"radio-group-control\"\n      >\n        <span\n          className={cn(\n            radioGroupIndicatorVariants({ size }),\n            indicatorClassName,\n          )}\n          data-slot=\"radio-group-indicator\"\n        />\n      </span>\n      {hasVisibleLabel && (\n        <span className=\"min-w-0 leading-6\" data-slot=\"radio-group-label\">\n          {labelContent}\n        </span>\n      )}\n    </label>\n  );\n}\n\nRadioGroupItem.displayName = \"RadioGroupItem\";\n"]}

package/dist/ui/radio-group.mjs

@@ -0,0 +1,153 @@
+"use client";
+import { RadioGroupContext, radioGroupRootVariants, useRadioGroupContext, radioGroupIndicatorVariants, radioGroupControlVariants, radioGroupItemVariants } from '../chunk-MTTXLC2V.mjs';
+export { radioGroupControlVariants, radioGroupIndicatorVariants, radioGroupItemVariants, radioGroupRootVariants } from '../chunk-MTTXLC2V.mjs';
+import { cn } from '../chunk-4D54YOL6.mjs';
+import { useId, useState, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function RadioGroup(props) {
+  const {
+    className,
+    value,
+    defaultValue,
+    name,
+    disabled,
+    required,
+    onValueChange,
+    orientation,
+    appearance,
+    size,
+    children,
+    ref,
+    ...rest
+  } = props;
+  const generatedName = useId();
+  const isControlled = value !== void 0;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const resolvedValue = isControlled ? value : uncontrolled;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  return /* @__PURE__ */ jsx(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        value: resolvedValue,
+        name: name ?? generatedName,
+        disabled,
+        required,
+        appearance: appearance ?? void 0,
+        size: size ?? void 0,
+        onValueChange: setValue
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: "radiogroup",
+          "data-slot": "radio-group",
+          "data-orientation": orientation ?? "vertical",
+          className: cn(radioGroupRootVariants({ orientation }), className),
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+RadioGroup.displayName = "RadioGroup";
+function RadioGroupItem(props) {
+  const {
+    className,
+    rootClassName,
+    controlClassName,
+    indicatorClassName,
+    value,
+    appearance: appearanceProp,
+    size: sizeProp,
+    disabled: disabledProp,
+    required: requiredProp,
+    children,
+    label,
+    id,
+    ref,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const context = useRadioGroupContext();
+  const controlId = id ?? generatedId;
+  const checked = context?.value === value;
+  const disabled = disabledProp ?? context?.disabled;
+  const required = requiredProp ?? context?.required;
+  const appearance = appearanceProp ?? context?.appearance;
+  const size = sizeProp ?? context?.size;
+  const labelContent = label ?? children;
+  const hasVisibleLabel = labelContent !== void 0 && labelContent !== null && labelContent !== false;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(radioGroupItemVariants({ size }), rootClassName, className),
+      "data-disabled": disabled ? "true" : void 0,
+      "data-state": checked ? "checked" : "unchecked",
+      htmlFor: controlId,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: controlId,
+            type: "radio",
+            "data-slot": "radio-group-item",
+            className: "peer sr-only",
+            name: context?.name,
+            value,
+            checked,
+            disabled,
+            required,
+            "aria-label": ariaLabel ?? (hasVisibleLabel ? void 0 : value),
+            onChange: (event) => {
+              if (event.currentTarget.checked) {
+                context?.onValueChange(value);
+              }
+            },
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              radioGroupControlVariants({ appearance, size }),
+              controlClassName
+            ),
+            "data-slot": "radio-group-control",
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  radioGroupIndicatorVariants({ size }),
+                  indicatorClassName
+                ),
+                "data-slot": "radio-group-indicator"
+              }
+            )
+          }
+        ),
+        hasVisibleLabel && /* @__PURE__ */ jsx("span", { className: "min-w-0 leading-6", "data-slot": "radio-group-label", children: labelContent })
+      ]
+    }
+  );
+}
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export { RadioGroup, RadioGroupItem };
+//# sourceMappingURL=radio-group.mjs.map
+//# sourceMappingURL=radio-group.mjs.map

package/dist/ui/radio-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"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","file":"radio-group.mjs","sourcesContent":["\"use client\";\n\nimport { useCallback, useId, useState } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport {\n  RadioGroupContext,\n  useRadioGroupContext,\n} from \"./radio-group-context\";\nimport type { RadioGroupItemProps, RadioGroupProps } from \"./types\";\nimport {\n  radioGroupControlVariants,\n  radioGroupIndicatorVariants,\n  radioGroupItemVariants,\n  radioGroupRootVariants,\n} from \"./variants\";\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const {\n    className,\n    value,\n    defaultValue,\n    name,\n    disabled,\n    required,\n    onValueChange,\n    orientation,\n    appearance,\n    size,\n    children,\n    ref,\n    ...rest\n  } = props;\n  const generatedName = useId();\n  const isControlled = value !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const resolvedValue = isControlled ? value : uncontrolled;\n\n  const setValue = useCallback(\n    (next: string) => {\n      if (!isControlled) {\n        setUncontrolled(next);\n      }\n      onValueChange?.(next);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return (\n    <RadioGroupContext.Provider\n      value={{\n        value: resolvedValue,\n        name: name ?? generatedName,\n        disabled,\n        required,\n        appearance: appearance ?? undefined,\n        size: size ?? undefined,\n        onValueChange: setValue,\n      }}\n    >\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        data-slot=\"radio-group\"\n        data-orientation={orientation ?? \"vertical\"}\n        className={cn(radioGroupRootVariants({ orientation }), className)}\n        {...rest}\n      >\n        {children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n}\n\nRadioGroup.displayName = \"RadioGroup\";\n\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const {\n    className,\n    rootClassName,\n    controlClassName,\n    indicatorClassName,\n    value,\n    appearance: appearanceProp,\n    size: sizeProp,\n    disabled: disabledProp,\n    required: requiredProp,\n    children,\n    label,\n    id,\n    ref,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const generatedId = useId();\n  const context = useRadioGroupContext();\n  const controlId = id ?? generatedId;\n  const checked = context?.value === value;\n  const disabled = disabledProp ?? context?.disabled;\n  const required = requiredProp ?? context?.required;\n  const appearance = appearanceProp ?? context?.appearance;\n  const size = sizeProp ?? context?.size;\n  const labelContent = label ?? children;\n  const hasVisibleLabel =\n    labelContent !== undefined && labelContent !== null && labelContent !== false;\n\n  return (\n    <label\n      className={cn(radioGroupItemVariants({ size }), rootClassName, className)}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-state={checked ? \"checked\" : \"unchecked\"}\n      htmlFor={controlId}\n    >\n      <input\n        ref={ref}\n        id={controlId}\n        type=\"radio\"\n        data-slot=\"radio-group-item\"\n        className=\"peer sr-only\"\n        name={context?.name}\n        value={value}\n        checked={checked}\n        disabled={disabled}\n        required={required}\n        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : value)}\n        onChange={(event) => {\n          if (event.currentTarget.checked) {\n            context?.onValueChange(value);\n          }\n        }}\n        {...rest}\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          radioGroupControlVariants({ appearance, size }),\n          controlClassName,\n        )}\n        data-slot=\"radio-group-control\"\n      >\n        <span\n          className={cn(\n            radioGroupIndicatorVariants({ size }),\n            indicatorClassName,\n          )}\n          data-slot=\"radio-group-indicator\"\n        />\n      </span>\n      {hasVisibleLabel && (\n        <span className=\"min-w-0 leading-6\" data-slot=\"radio-group-label\">\n          {labelContent}\n        </span>\n      )}\n    </label>\n  );\n}\n\nRadioGroupItem.displayName = \"RadioGroupItem\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "license": "MIT",
   "files": [

package/src/design-system/checkbox.ts

@@ -0,0 +1,47 @@
+export const zuiCheckboxRootBase =
+  "group inline-flex w-fit items-start gap-2.5 text-sm font-medium text-[color:var(--zui-checkbox-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-checkbox-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
+
+export const zuiCheckboxControlBase =
+  "grid shrink-0 place-items-center rounded-md border-2 border-[color:var(--zui-checkbox-border,#0000004d)] bg-[var(--zui-checkbox-bg,transparent)] text-[color:var(--zui-checkbox-fg,oklch(44.6%_0.043_257.281))] transition-[background-color,border-color,color,box-shadow] peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--zui-checkbox-ring-focus,oklch(44.6%_0.043_257.281_/_0.7))] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[var(--zui-checkbox-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:border-[color:var(--zui-checkbox-border-dark,#ffffff4d)] dark:text-[color:var(--zui-checkbox-fg-dark,oklch(92.9%_0.013_255.508))] dark:peer-focus-visible:ring-[var(--zui-checkbox-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.7))] dark:peer-focus-visible:ring-offset-[var(--zui-checkbox-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] group-data-[disabled=true]:cursor-not-allowed";
+
+export const zuiCheckboxIndicatorBase =
+  "pointer-events-none opacity-0 transition-opacity duration-150 stroke-white group-data-[state=checked]:opacity-100 group-data-[state=indeterminate]:opacity-100";
+
+export const zuiCheckboxSizes = {
+  sm: {
+    root: "text-xs",
+    control: "mt-0.5 size-4 rounded-[0.35rem]",
+    indicator: "size-3",
+  },
+  md: {
+    root: "text-sm",
+    control: "mt-0.5 size-5",
+    indicator: "size-3.5",
+  },
+  lg: {
+    root: "text-base",
+    control: "mt-0.5 size-6",
+    indicator: "size-4",
+  },
+} as const;
+
+export const zuiCheckboxAppearances = {
+  default:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-default-border-checked,oklch(44.6%_0.043_257.281))] group-data-[state=checked]:bg-[var(--zui-checkbox-default-bg-checked,oklch(44.6%_0.043_257.281))] group-data-[state=checked]:text-[color:var(--zui-checkbox-default-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-default-border-checked,oklch(44.6%_0.043_257.281))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-default-bg-checked,oklch(44.6%_0.043_257.281))] group-data-[state=indeterminate]:text-[color:var(--zui-checkbox-default-fg-checked,#ffffff)]",
+  success:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-success-border-checked,oklch(59.6%_0.145_163.225))] group-data-[state=checked]:bg-[var(--zui-checkbox-success-bg-checked,oklch(59.6%_0.145_163.225))] group-data-[state=checked]:text-[color:var(--zui-checkbox-success-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-success-border-checked,oklch(59.6%_0.145_163.225))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-success-bg-checked,oklch(59.6%_0.145_163.225))]",
+  warning:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-warning-border-checked,oklch(68.1%_0.162_75.834))] group-data-[state=checked]:bg-[var(--zui-checkbox-warning-bg-checked,oklch(68.1%_0.162_75.834))] group-data-[state=checked]:text-[color:var(--zui-checkbox-warning-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-warning-border-checked,oklch(68.1%_0.162_75.834))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-warning-bg-checked,oklch(68.1%_0.162_75.834))]",
+  error:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-error-border-checked,oklch(58.6%_0.253_17.585))] group-data-[state=checked]:bg-[var(--zui-checkbox-error-bg-checked,oklch(58.6%_0.253_17.585))] group-data-[state=checked]:text-[color:var(--zui-checkbox-error-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-error-border-checked,oklch(58.6%_0.253_17.585))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-error-bg-checked,oklch(58.6%_0.253_17.585))]",
+  info:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-info-border-checked,oklch(54.6%_0.245_262.881))] group-data-[state=checked]:bg-[var(--zui-checkbox-info-bg-checked,oklch(54.6%_0.245_262.881))] group-data-[state=checked]:text-[color:var(--zui-checkbox-info-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-info-border-checked,oklch(54.6%_0.245_262.881))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-info-bg-checked,oklch(54.6%_0.245_262.881))]",
+  violet:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-violet-border-checked,oklch(54.1%_0.281_293.009))] group-data-[state=checked]:bg-[var(--zui-checkbox-violet-bg-checked,oklch(54.1%_0.281_293.009))] group-data-[state=checked]:text-[color:var(--zui-checkbox-violet-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-violet-border-checked,oklch(54.1%_0.281_293.009))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-violet-bg-checked,oklch(54.1%_0.281_293.009))]",
+  amber:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-amber-border-checked,oklch(66.6%_0.179_58.318))] group-data-[state=checked]:bg-[var(--zui-checkbox-amber-bg-checked,oklch(66.6%_0.179_58.318))] group-data-[state=checked]:text-[color:var(--zui-checkbox-amber-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-amber-border-checked,oklch(66.6%_0.179_58.318))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-amber-bg-checked,oklch(66.6%_0.179_58.318))]",
+  pink:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-pink-border-checked,oklch(59.2%_0.249_0.584))] group-data-[state=checked]:bg-[var(--zui-checkbox-pink-bg-checked,oklch(59.2%_0.249_0.584))] group-data-[state=checked]:text-[color:var(--zui-checkbox-pink-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-pink-border-checked,oklch(59.2%_0.249_0.584))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-pink-bg-checked,oklch(59.2%_0.249_0.584))]",
+  indigo:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-indigo-border-checked,oklch(51.1%_0.262_276.966))] group-data-[state=checked]:bg-[var(--zui-checkbox-indigo-bg-checked,oklch(51.1%_0.262_276.966))] group-data-[state=checked]:text-[color:var(--zui-checkbox-indigo-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-indigo-border-checked,oklch(51.1%_0.262_276.966))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-indigo-bg-checked,oklch(51.1%_0.262_276.966))]",
+} as const;

package/src/design-system/index.ts

@@ -5,6 +5,7 @@ export * from "./badge";
 export * from "./breadcrumb";
 export * from "./button";
 export * from "./card";
+export * from "./checkbox";
 export * from "./divider";
 export * from "./drawer";
 export * from "./dropdown";
@@ -14,7 +15,9 @@ export * from "./file-upload";
 export * from "./inputs";
 export * from "./modal";
 export * from "./pagination";
+export * from "./popover";
 export * from "./progress";
+export * from "./radio-group";
 export * from "./select";
 export * from "./skeleton";
 export * from "./slider";

package/src/design-system/popover.ts

@@ -0,0 +1,66 @@
+export const zuiPopoverContentBase =
+  "absolute z-50 rounded-lg border shadow-lg transition-all duration-200 outline-none";
+
+export const zuiPopoverContentVariants = {
+  default:
+    "border-[color:var(--zui-popover-default-border,oklch(20.8%_0.042_265.755_/_0.1))] dark:border-[color:var(--zui-popover-default-border-dark,#ffffff1a)] bg-[var(--zui-popover-default-bg,#ffffff)] dark:bg-[var(--zui-popover-default-bg-dark,oklch(20.8%_0.042_265.755))] text-[color:var(--zui-popover-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-popover-default-fg-dark,oklch(96.8%_0.007_247.896))]",
+  outline:
+    "border-[color:var(--zui-popover-outline-border,oklch(37.3%_0.034_259.733))] dark:border-[color:var(--zui-popover-outline-border-dark,oklch(87.2%_0.01_258.338))] bg-[var(--zui-popover-outline-bg,#ffffff)] dark:bg-[var(--zui-popover-outline-bg-dark,#000000)] text-[color:var(--zui-popover-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-popover-outline-fg-dark,#ffffff)]",
+  ghost:
+    "border-transparent bg-[var(--zui-popover-ghost-bg,oklch(96.7%_0.003_264.542))] dark:bg-[var(--zui-popover-ghost-bg-dark,oklch(27.8%_0.033_256.848))] text-[color:var(--zui-popover-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-popover-ghost-fg-dark,#ffffffe6)]",
+  glass:
+    "border-[color:var(--zui-popover-glass-border,#00000026)] dark:border-[color:var(--zui-popover-glass-border-dark,#ffffff26)] bg-[var(--zui-popover-glass-bg,#ffffffb3)] dark:bg-[var(--zui-popover-glass-bg-dark,#020617b3)] text-[color:var(--zui-popover-glass-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-popover-glass-fg-dark,#ffffff)] backdrop-blur-md",
+  emerald:
+    "border-[color:var(--zui-popover-emerald-border,oklch(43.2%_0.095_166.913_/_0.35))] bg-[var(--zui-popover-emerald-bg,oklch(90.5%_0.093_164.15))] text-[color:var(--zui-popover-emerald-fg,oklch(37.8%_0.077_168.94))] dark:bg-[var(--zui-popover-emerald-bg-dark,oklch(26.2%_0.051_172.552))] dark:text-[color:var(--zui-popover-emerald-fg-dark,oklch(90.5%_0.093_164.15))]",
+  indigo:
+    "border-[color:var(--zui-popover-indigo-border,oklch(39.8%_0.195_277.366_/_0.35))] bg-[var(--zui-popover-indigo-bg,oklch(87%_0.065_274.039))] text-[color:var(--zui-popover-indigo-fg,oklch(35.9%_0.144_278.697))] dark:bg-[var(--zui-popover-indigo-bg-dark,oklch(25.7%_0.09_281.288))] dark:text-[color:var(--zui-popover-indigo-fg-dark,oklch(87%_0.065_274.039))]",
+  purple:
+    "border-[color:var(--zui-popover-purple-border,oklch(43.8%_0.218_303.724_/_0.35))] bg-[var(--zui-popover-purple-bg,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-popover-purple-fg,oklch(38.1%_0.176_304.987))] dark:bg-[var(--zui-popover-purple-bg-dark,oklch(29.1%_0.149_302.717))] dark:text-[color:var(--zui-popover-purple-fg-dark,oklch(90.2%_0.063_306.703))]",
+  pink:
+    "border-[color:var(--zui-popover-pink-border,oklch(45.9%_0.187_3.815_/_0.35))] bg-[var(--zui-popover-pink-bg,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-popover-pink-fg,oklch(40.8%_0.153_2.432))] dark:bg-[var(--zui-popover-pink-bg-dark,oklch(28.4%_0.109_3.907))] dark:text-[color:var(--zui-popover-pink-fg-dark,oklch(89.9%_0.061_343.231))]",
+  rose:
+    "border-[color:var(--zui-popover-rose-border,oklch(45.5%_0.188_13.697_/_0.35))] bg-[var(--zui-popover-rose-bg,oklch(89.2%_0.058_10.001))] text-[color:var(--zui-popover-rose-fg,oklch(41%_0.159_10.272))] dark:bg-[var(--zui-popover-rose-bg-dark,oklch(27.1%_0.105_12.094))] dark:text-[color:var(--zui-popover-rose-fg-dark,oklch(89.2%_0.058_10.001))]",
+  sky:
+    "border-[color:var(--zui-popover-sky-border,oklch(44.3%_0.11_240.79_/_0.35))] bg-[var(--zui-popover-sky-bg,oklch(90.1%_0.058_230.902))] text-[color:var(--zui-popover-sky-fg,oklch(39.1%_0.09_240.876))] dark:bg-[var(--zui-popover-sky-bg-dark,oklch(29.3%_0.066_243.157))] dark:text-[color:var(--zui-popover-sky-fg-dark,oklch(90.1%_0.058_230.902))]",
+  teal:
+    "border-[color:var(--zui-popover-teal-border,oklch(43.7%_0.078_188.216_/_0.35))] bg-[var(--zui-popover-teal-bg,oklch(91%_0.096_180.426))] text-[color:var(--zui-popover-teal-fg,oklch(38.6%_0.063_188.416))] dark:bg-[var(--zui-popover-teal-bg-dark,oklch(27.7%_0.046_192.524))] dark:text-[color:var(--zui-popover-teal-fg-dark,oklch(91%_0.096_180.426))]",
+  yellow:
+    "border-[color:var(--zui-popover-yellow-border,oklch(47.6%_0.114_61.907_/_0.35))] bg-[var(--zui-popover-yellow-bg,oklch(94.5%_0.129_101.54))] text-[color:var(--zui-popover-yellow-fg,oklch(42.1%_0.095_57.708))] dark:bg-[var(--zui-popover-yellow-bg-dark,oklch(28.6%_0.066_53.813))] dark:text-[color:var(--zui-popover-yellow-fg-dark,oklch(94.5%_0.129_101.54))]",
+  orange:
+    "border-[color:var(--zui-popover-orange-border,oklch(47%_0.157_37.304_/_0.35))] bg-[var(--zui-popover-orange-bg,oklch(90.1%_0.076_70.697))] text-[color:var(--zui-popover-orange-fg,oklch(40.8%_0.123_38.172))] dark:bg-[var(--zui-popover-orange-bg-dark,oklch(26.6%_0.079_36.259))] dark:text-[color:var(--zui-popover-orange-fg-dark,oklch(90.1%_0.076_70.697))]",
+  green:
+    "border-[color:var(--zui-popover-green-border,oklch(44.8%_0.119_151.328_/_0.35))] bg-[var(--zui-popover-green-bg,oklch(92.5%_0.084_155.995))] text-[color:var(--zui-popover-green-fg,oklch(39.3%_0.095_152.535))] dark:bg-[var(--zui-popover-green-bg-dark,oklch(26.6%_0.065_152.934))] dark:text-[color:var(--zui-popover-green-fg-dark,oklch(92.5%_0.084_155.995))]",
+  "gradient-blue":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-blue-from,oklch(42.4%_0.199_265.638))] to-[var(--zui-popover-gradient-blue-to,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-popover-gradient-blue-fg,#ffffff)]",
+  "gradient-green":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-green-from,oklch(44.8%_0.119_151.328))] to-[var(--zui-popover-gradient-green-to,oklch(45.3%_0.124_130.933))] text-[color:var(--zui-popover-gradient-green-fg,#ffffff)]",
+  "gradient-red":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-red-from,oklch(44.4%_0.177_26.899))] to-[var(--zui-popover-gradient-red-to,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-popover-gradient-red-fg,#ffffff)]",
+  "gradient-yellow":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-yellow-from,oklch(47.6%_0.114_61.907))] to-[var(--zui-popover-gradient-yellow-to,oklch(47%_0.157_37.304))] text-[color:var(--zui-popover-gradient-yellow-fg,#ffffff)]",
+  "gradient-purple":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-purple-from,oklch(43.8%_0.218_303.724))] to-[var(--zui-popover-gradient-purple-to,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-popover-gradient-purple-fg,#ffffff)]",
+  "gradient-teal":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-teal-from,oklch(43.7%_0.078_188.216))] to-[var(--zui-popover-gradient-teal-to,oklch(45%_0.085_224.283))] text-[color:var(--zui-popover-gradient-teal-fg,#ffffff)]",
+  "gradient-indigo":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-indigo-from,oklch(39.8%_0.195_277.366))] to-[var(--zui-popover-gradient-indigo-to,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-popover-gradient-indigo-fg,#ffffff)]",
+  "gradient-pink":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-pink-from,oklch(45.9%_0.187_3.815))] to-[var(--zui-popover-gradient-pink-to,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-popover-gradient-pink-fg,#ffffff)]",
+  "gradient-orange":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-orange-from,oklch(47%_0.157_37.304))] to-[var(--zui-popover-gradient-orange-to,oklch(44.4%_0.177_26.899))] text-[color:var(--zui-popover-gradient-orange-fg,#ffffff)]",
+} as const;
+
+export const zuiPopoverContentSizes = {
+  sm: "p-3 text-sm",
+  md: "p-4 text-sm",
+  lg: "p-5 text-base",
+} as const;
+
+export const zuiPopoverContentWidths = {
+  xs: "min-w-50 md:min-w-xs",
+  sm: "min-w-50 md:min-w-sm",
+  md: "min-w-50 md:min-w-md",
+  lg: "min-w-50 md:min-w-lg",
+  xl: "min-w-50 md:min-w-xl",
+  "2xl": "min-w-50 md:min-w-2xl",
+} as const;

package/src/design-system/radio-group.ts

@@ -0,0 +1,54 @@
+export const zuiRadioGroupRootBase = "grid gap-2";
+
+export const zuiRadioGroupItemBase =
+  "group inline-flex w-fit items-start gap-2.5 text-sm font-medium text-[color:var(--zui-radio-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-radio-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
+
+export const zuiRadioGroupControlBase =
+  "grid shrink-0 place-items-center rounded-full border-2 border-[color:var(--zui-radio-border,#0000004d)] bg-[var(--zui-radio-bg,transparent)] transition-[background-color,border-color,box-shadow] peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--zui-radio-ring-focus,oklch(44.6%_0.043_257.281_/_0.7))] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[var(--zui-radio-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:border-[color:var(--zui-radio-border-dark,#ffffff4d)] dark:peer-focus-visible:ring-[var(--zui-radio-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.7))] dark:peer-focus-visible:ring-offset-[var(--zui-radio-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] group-data-[disabled=true]:cursor-not-allowed";
+
+export const zuiRadioGroupIndicatorBase =
+  "pointer-events-none block rounded-full opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100";
+
+export const zuiRadioGroupSizes = {
+  sm: {
+    item: "text-xs",
+    control: "mt-0.5 size-4",
+    indicator: "size-1.5",
+  },
+  md: {
+    item: "text-sm",
+    control: "mt-0.5 size-5",
+    indicator: "size-2",
+  },
+  lg: {
+    item: "text-base",
+    control: "mt-0.5 size-6",
+    indicator: "size-2.5",
+  },
+} as const;
+
+export const zuiRadioGroupAppearances = {
+  default:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-default-border-checked,oklch(44.6%_0.043_257.281))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-default-indicator-bg,oklch(44.6%_0.043_257.281))]",
+  success:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-success-border-checked,oklch(59.6%_0.145_163.225))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-success-indicator-bg,oklch(59.6%_0.145_163.225))]",
+  warning:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-warning-border-checked,oklch(68.1%_0.162_75.834))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-warning-indicator-bg,oklch(68.1%_0.162_75.834))]",
+  error:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-error-border-checked,oklch(58.6%_0.253_17.585))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-error-indicator-bg,oklch(58.6%_0.253_17.585))]",
+  info:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-info-border-checked,oklch(54.6%_0.245_262.881))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-info-indicator-bg,oklch(54.6%_0.245_262.881))]",
+  violet:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-violet-border-checked,oklch(54.1%_0.281_293.009))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-violet-indicator-bg,oklch(54.1%_0.281_293.009))]",
+  amber:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-amber-border-checked,oklch(66.6%_0.179_58.318))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-amber-indicator-bg,oklch(66.6%_0.179_58.318))]",
+  pink:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-pink-border-checked,oklch(59.2%_0.249_0.584))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-pink-indicator-bg,oklch(59.2%_0.249_0.584))]",
+  indigo:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-indigo-border-checked,oklch(51.1%_0.262_276.966))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-indigo-indicator-bg,oklch(51.1%_0.262_276.966))]",
+} as const;
+
+export const zuiRadioGroupOrientations = {
+  vertical: "grid gap-2",
+  horizontal: "flex flex-wrap gap-x-5 gap-y-2",
+} as const;

package/src/ui/checkbox/animated/animations.ts

@@ -0,0 +1,12 @@
+export const checkboxAnimationPresets = {
+  draw: {
+    initial: { pathLength: 0, opacity: 0 },
+    animate: { pathLength: 1, opacity: 1 },
+    transition: { duration: 0.2, ease: "easeOut" },
+  },
+  spring: {
+    initial: { scale: 0.7, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { type: "spring", stiffness: 520, damping: 30 },
+  },
+} as const;