@plexui/ui 0.5.0 → 0.7.0

package/README.md

@@ -1,17 +1,20 @@
 # @plexui/ui
 
-A modern React component library built on the same design foundations as OpenAI's ChatGPT UI. 35 production-ready components, 14 hooks, a three-layer design token system, and a unified 9-step size scale — all powered by Radix primitives and Tailwind CSS 4.
+A modern React component library with 35 production-ready components, 14 hooks, a three-layer design token system, and a unified 9-step size scale — all powered by Radix primitives and Tailwind CSS 4.
 
-[Documentation](https://plexui.com) • [GitHub](https://github.com/plex-ui/docs)
+[Documentation](https://plexui.com) • [GitHub](https://github.com/plex-ui/docs) • [Figma Kit](https://plexui.com/#pricing)
+
+> **Figma Design System PRO** — 22,000+ variants, all on Figma Variables. [Get the kit →](https://plexui.com/#pricing)
 
 ---
 
 ## Highlights
 
-- **Battle-tested at ChatGPT scale** — components validated in a product used by hundreds of millions.
+- **Production-grade** — components designed and tested for real products at scale.
 - **9-step size scale** — all key controls (Button, Input, Select, SegmentedControl, etc.) share a unified `ControlSize` scale from `3xs` (22 px) to `3xl` (48 px). Most competitors offer only 3–4.
 - **Three-layer design tokens** — primitive → semantic → component CSS custom properties with `light-dark()` theming, alpha transparency scale, and 4-level elevation system.
 - **Radix + Tailwind 4** — accessible primitives under the hood, utility-first styling on top.
+- **Built for AI code editors** — consistent naming, clear token system, and comprehensive props give Claude, Cursor, Codex & other AI tools the building blocks to generate professional UI.
 
 ---
 

package/dist/es/components/Checkbox/Checkbox.js

@@ -4,10 +4,10 @@ import clsx from "clsx";
 import { Checkbox as RadixCheckbox } from "radix-ui";
 import { useId } from "react";
 import s from "./Checkbox.module.css";
-export const Checkbox = ({ className, label, id: propsId, disabled, orientation = "left", ...restProps }) => {
+export const Checkbox = ({ className, label, id: propsId, disabled, orientation = "left", pill = false, variant = "solid", ...restProps }) => {
     const reactId = useId();
     const id = propsId ?? reactId;
-    return (_jsxs("div", { "data-disabled": disabled ? "" : undefined, "data-has-label": label ? "" : undefined, "data-orientation": orientation, className: clsx(className, s.Container), children: [_jsx(RadixCheckbox.Root, { className: s.Checkbox, id: id, disabled: disabled, ...restProps, children: _jsx(RadixCheckbox.Indicator, { className: s.CheckMark }) }), label && (_jsx("label", { htmlFor: id, className: s.Label, onMouseDown: (event) => {
+    return (_jsxs("div", { "data-disabled": disabled ? "" : undefined, "data-has-label": label ? "" : undefined, "data-orientation": orientation, className: clsx(className, s.Container), children: [_jsx(RadixCheckbox.Root, { className: s.Checkbox, id: id, disabled: disabled, "data-pill": pill ? "" : undefined, "data-variant": variant, ...restProps, children: _jsx(RadixCheckbox.Indicator, { className: s.CheckMark }) }), label && (_jsx("label", { htmlFor: id, className: s.Label, onMouseDown: (event) => {
                     if (!event.defaultPrevented && event.detail > 1)
                         event.preventDefault();
                 }, children: label }))] }));

package/dist/es/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,EAA0C,KAAK,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,CAAC,MAAM,uBAAuB,CAAA;AAmCrC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,SAAS,EACT,KAAK,EACL,EAAE,EAAE,OAAO,EACX,QAAQ,EACR,WAAW,GAAG,MAAM,EACpB,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,OAAO,IAAI,OAAO,CAAA;IAE7B,OAAO,CACL,gCACiB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,oBACxB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,sBACpB,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aAEvC,KAAC,aAAa,CAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,KAAM,SAAS,YAClF,KAAC,aAAa,CAAC,SAAS,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,GAAI,GAChC,EACpB,KAAK,IAAI,CACR,gBACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,CAAC,CAAC,KAAK,EAClB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;oBACrB,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;wBAAE,KAAK,CAAC,cAAc,EAAE,CAAA;gBACzE,CAAC,YAEA,KAAK,GACA,CACT,IACG,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Checkbox as RadixCheckbox } from \"radix-ui\"\nimport { type FocusEventHandler, type ReactNode, useId } from \"react\"\nimport s from \"./Checkbox.module.css\"\n\nexport type CheckboxProps = {\n  /** The `id` of the checkbox. */\n  id?: string\n  /** The state of the checkbox when it is initially rendered. Use when you do not need to control its state. */\n  defaultChecked?: boolean | \"indeterminate\"\n  /** The controlled state of the checkbox. Must be used in conjunction with `onCheckedChange`. */\n  checked?: boolean | \"indeterminate\"\n  /** Optional accessible label rendered to the right of the checkbox. */\n  label?: ReactNode\n  /** Event handler called when the state of the checkbox changes. */\n  onCheckedChange?: (nextState: boolean) => void\n  /** Event handler called when the checkbox looses focus. */\n  onBlur?: FocusEventHandler<HTMLButtonElement>\n  /** Event handler called when the checkbox gains focus. */\n  onFocus?: FocusEventHandler<HTMLButtonElement>\n  /** When `true`, prevents the user from interacting with the checkbox. */\n  disabled?: boolean\n  /** When `true`, indicates that the user must check the checkbox before the owning form can be submitted. */\n  required?: boolean\n  /** The name of the checkbox. Submitted with its owning form as part of a name/value pair. */\n  name?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: string\n  /** CSS classes applied to wrapper node */\n  className?: string\n  /**\n   * The orientation of the checkbox relative to the label.\n   *\n   * @default \"left\"\n   */\n  orientation?: \"left\" | \"right\"\n}\n\nexport const Checkbox = ({\n  className,\n  label,\n  id: propsId,\n  disabled,\n  orientation = \"left\",\n  ...restProps\n}: CheckboxProps) => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  return (\n    <div\n      data-disabled={disabled ? \"\" : undefined}\n      data-has-label={label ? \"\" : undefined}\n      data-orientation={orientation}\n      className={clsx(className, s.Container)}\n    >\n      <RadixCheckbox.Root className={s.Checkbox} id={id} disabled={disabled} {...restProps}>\n        <RadixCheckbox.Indicator className={s.CheckMark} />\n      </RadixCheckbox.Root>\n      {label && (\n        <label\n          htmlFor={id}\n          className={s.Label}\n          onMouseDown={(event) => {\n            if (!event.defaultPrevented && event.detail > 1) event.preventDefault()\n          }}\n        >\n          {label}\n        </label>\n      )}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,EAA0C,KAAK,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,CAAC,MAAM,uBAAuB,CAAA;AA+CrC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,SAAS,EACT,KAAK,EACL,EAAE,EAAE,OAAO,EACX,QAAQ,EACR,WAAW,GAAG,MAAM,EACpB,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,OAAO,EACjB,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,OAAO,IAAI,OAAO,CAAA;IAE7B,OAAO,CACL,gCACiB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,oBACxB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,sBACpB,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aAEvC,KAAC,aAAa,CAAC,IAAI,IACjB,SAAS,EAAE,CAAC,CAAC,QAAQ,EACrB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,eACP,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBAClB,OAAO,KACjB,SAAS,YAEb,KAAC,aAAa,CAAC,SAAS,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,GAAI,GAChC,EACpB,KAAK,IAAI,CACR,gBACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,CAAC,CAAC,KAAK,EAClB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;oBACrB,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;wBAAE,KAAK,CAAC,cAAc,EAAE,CAAA;gBACzE,CAAC,YAEA,KAAK,GACA,CACT,IACG,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Checkbox as RadixCheckbox } from \"radix-ui\"\nimport { type FocusEventHandler, type ReactNode, useId } from \"react\"\nimport s from \"./Checkbox.module.css\"\n\nexport type CheckboxProps = {\n  /** The `id` of the checkbox. */\n  id?: string\n  /** The state of the checkbox when it is initially rendered. Use when you do not need to control its state. */\n  defaultChecked?: boolean | \"indeterminate\"\n  /** The controlled state of the checkbox. Must be used in conjunction with `onCheckedChange`. */\n  checked?: boolean | \"indeterminate\"\n  /** Optional accessible label rendered to the right of the checkbox. */\n  label?: ReactNode\n  /** Event handler called when the state of the checkbox changes. */\n  onCheckedChange?: (nextState: boolean) => void\n  /** Event handler called when the checkbox looses focus. */\n  onBlur?: FocusEventHandler<HTMLButtonElement>\n  /** Event handler called when the checkbox gains focus. */\n  onFocus?: FocusEventHandler<HTMLButtonElement>\n  /** When `true`, prevents the user from interacting with the checkbox. */\n  disabled?: boolean\n  /** When `true`, indicates that the user must check the checkbox before the owning form can be submitted. */\n  required?: boolean\n  /** The name of the checkbox. Submitted with its owning form as part of a name/value pair. */\n  name?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: string\n  /** CSS classes applied to wrapper node */\n  className?: string\n  /**\n   * The orientation of the checkbox relative to the label.\n   *\n   * @default \"left\"\n   */\n  orientation?: \"left\" | \"right\"\n  /**\n   * Determines if the checkbox should be a fully rounded pill shape.\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Visual style variant for the checkbox indicator.\n   * - `\"solid\"` — filled background when checked (default)\n   * - `\"ghost\"` — no border or background, checkmark only\n   * @default \"solid\"\n   */\n  variant?: \"solid\" | \"ghost\"\n}\n\nexport const Checkbox = ({\n  className,\n  label,\n  id: propsId,\n  disabled,\n  orientation = \"left\",\n  pill = false,\n  variant = \"solid\",\n  ...restProps\n}: CheckboxProps) => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  return (\n    <div\n      data-disabled={disabled ? \"\" : undefined}\n      data-has-label={label ? \"\" : undefined}\n      data-orientation={orientation}\n      className={clsx(className, s.Container)}\n    >\n      <RadixCheckbox.Root\n        className={s.Checkbox}\n        id={id}\n        disabled={disabled}\n        data-pill={pill ? \"\" : undefined}\n        data-variant={variant}\n        {...restProps}\n      >\n        <RadixCheckbox.Indicator className={s.CheckMark} />\n      </RadixCheckbox.Root>\n      {label && (\n        <label\n          htmlFor={id}\n          className={s.Label}\n          onMouseDown={(event) => {\n            if (!event.defaultPrevented && event.detail > 1) event.preventDefault()\n          }}\n        >\n          {label}\n        </label>\n      )}\n    </div>\n  )\n}\n"]}

package/dist/es/components/Checkbox/Checkbox.module.css

@@ -11,6 +11,11 @@
     flex-direction: row-reverse;
   }
 
+  .Container[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   /* Radix pushes the inputs off screen in a weird way that
     messes with error overlays */
   .Container > input {
@@ -25,30 +30,20 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 18px;
-  max-width: 18px;
-  height: 18px;
+  width: var(--menu-checkbox-indicator-size);
+  max-width: var(--menu-checkbox-indicator-size);
+  height: var(--menu-checkbox-indicator-size);
   padding: 0;
+  border: 1px solid var(--alpha-16);
   border-radius: var(--radius-xs);
   background-color: transparent;
   cursor: pointer;
   transition:
     border-color 150ms ease,
     background-color 150ms ease;
-}.Checkbox, :where([data-theme="light"]) .Checkbox {
-border: 1px solid var(--gray-200);
-}:where([data-theme="dark"]) .Checkbox {
-border: 1px solid var(--gray-500);
 }
-
-  [data-has-label] .Checkbox {
-    /* Adjust downward for label line-height - not using center to account for long labels than can wrap. */
-    top: 1px;
-  }
-    @media (hover: hover) and (pointer: fine) {.Checkbox:where(:not([data-disabled], [data-state="checked"])):hover, :where([data-theme="light"]) .Checkbox:where(:not([data-disabled], [data-state="checked"])):hover {
-border-color: var(--gray-300);
-}:where([data-theme="dark"]) .Checkbox:where(:not([data-disabled], [data-state="checked"])):hover {
-border-color: var(--gray-600);
+    @media (hover: hover) and (pointer: fine) {.Checkbox:where(:not([data-disabled], [data-state="checked"])):hover {
+      border-color: var(--alpha-20);
 }
 }
 
@@ -67,29 +62,52 @@ border-color: var(--gray-600);
     outline-offset: 2px;
   }
 
+  /* =============================================
+    Invalid
+  ============================================= */
+  .Checkbox[aria-invalid="true"] {
+    border-color: var(--input-border-color-invalid);
+  }
+
+    .Checkbox[aria-invalid="true"][data-state="indeterminate"],
+    .Checkbox[aria-invalid="true"][data-state="checked"] {
+      border-color: var(--input-border-color-invalid);
+      background-color: var(--input-border-color-invalid);
+    }
+
   .Checkbox[data-disabled] {
     cursor: not-allowed;
   }
 
-  .Checkbox[data-disabled], :where([data-theme="light"]) .Checkbox[data-disabled] {
-border-color: var(--gray-150);
-background: var(--gray-25);
-}
+  /* =============================================
+    Pill
+  ============================================= */
+  .Checkbox[data-pill] {
+    border-radius: var(--radius-full);
+  }
 
-  :where([data-theme="dark"]) .Checkbox[data-disabled] {
-border-color: var(--gray-300);
-background: var(--gray-200);
-}
+  /* =============================================
+    Ghost variant
+  ============================================= */
+  .Checkbox[data-variant="ghost"] {
+    border-color: transparent;
+    background-color: transparent;
 
-    .Checkbox[data-disabled][data-state="checked"], :where([data-theme="light"]) .Checkbox[data-disabled][data-state="checked"] {
-border-color: var(--gray-300);
-background-color: var(--gray-300);
+  }
+      @media (hover: hover) and (pointer: fine) {.Checkbox[data-variant="ghost"]:where(:not([data-disabled], [data-state="checked"])):hover {
+        border-color: transparent;
+}.Checkbox[data-variant="ghost"]:where(:not([data-disabled], [data-state="checked"])):hover, :where([data-theme="light"]) .Checkbox[data-variant="ghost"]:where(:not([data-disabled], [data-state="checked"])):hover {
+background-color: var(--gray-50);
+}:where([data-theme="dark"]) .Checkbox[data-variant="ghost"]:where(:not([data-disabled], [data-state="checked"])):hover {
+background-color: var(--gray-800);
+}
 }
 
-    :where([data-theme="dark"]) .Checkbox[data-disabled][data-state="checked"] {
-border-color: var(--gray-200);
-background-color: var(--gray-200);
-}.CheckMark {
+    .Checkbox[data-variant="ghost"][data-state="indeterminate"],
+    .Checkbox[data-variant="ghost"][data-state="checked"] {
+      border-color: transparent;
+      background-color: transparent;
+    }.CheckMark {
   position: absolute;
   top: 0;
   left: 0;
@@ -131,11 +149,12 @@ background-color: var(--gray-200);
       transform: scale(0)
   }
     }
-    /* pure black checkbox is not low enough contrast to look disabled */
-      :where([data-theme="dark"]) .CheckMark[data-disabled]::before,
-      :where([data-theme="dark"]) .CheckMark[data-disabled]::after {
-        background: var(--gray-100);
-      }
+
+  /* Ghost variant — checkmark uses text color instead of white */
+    [data-variant="ghost"] .CheckMark::before,
+    [data-variant="ghost"] .CheckMark::after {
+      background: var(--gray-900);
+    }
 
   .CheckMark::before {
     top: 0;
@@ -160,23 +179,18 @@ background-color: var(--gray-200);
     transform-origin: 0 100%;
     transition: transform 100ms ease 160ms;
   }.Label {
-  display: flex;
-  align-items: center;
+  display: block;
   min-height: 20px;
   cursor: pointer;
   font-size: 14px;
   line-height: 20px;
 }
 
-  [data-disabled] .Label {
-    cursor: not-allowed;
-  }
-
   [data-orientation="left"] .Label {
-    padding-left: 8px;
+    padding-left: calc(var(--spacing) * 2);
   }
 
   [data-orientation="right"] .Label {
-    padding-right: 8px;
+    padding-right: calc(var(--spacing) * 3);
   }
 }

package/dist/es/components/CodeBlock/CodeBlock.module.css

@@ -5,18 +5,31 @@
   background-color: var(--codeblock-background-color);
 }.CopyButtonContainer {
   position: absolute;
-  top: 0;
-  right: 0;
-  padding: 12px 8px 0 0;
-  border-radius: inherit;
-  color: #24292e;
+  top: 8px;
+  right: 8px;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background-color: var(--color-surface-elevated-secondary);
+  color: var(--color-text-secondary);
 }/* Force the CopyButton to inherit the container's color on all states.
    Ghost hover background (::before) is preserved — it's the correct behavior. */.CopyButtonContainer button {
   color: inherit !important;
-}@media (prefers-color-scheme: dark) {
-  .CopyButtonContainer {
-    color: #d0d0d0;
-  }
+  padding: 0 !important;
+  -webkit-tap-highlight-color: transparent;
+}.CopyButtonContainer button::before {
+  opacity: 0 !important;
+  transform: none !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}.CopyButtonContainer button:focus,
+.CopyButtonContainer button:focus-visible {
+  outline: none !important;
+}.CopyButtonContainer button:focus-visible::after {
+  outline: none !important;
 }.SyntaxHighlighter {
   --syntax1: var(--codeblock-syntax-1);
   --syntax2: var(--codeblock-syntax-2);
@@ -35,7 +48,7 @@
   /* 14px to a 16px baseline */
   font-weight: var(--font-weight-normal);
   line-height: 1.714em;
-  /* 24px at 14px — matches OpenAI reference */
+  /* 24px at 14px */
 
   /* stylelint-disable selector-class-pattern */
 
@@ -115,4 +128,4 @@
   align-items: center;
   justify-content: center;
 }
-}
+}

package/dist/es/components/Field/Field.js

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { cloneElement, isValidElement, useId } from "react";
 import { FieldError } from "../FieldError";
 import s from "./Field.module.css";
-export function Field({ label, description, errorMessage, size = "md", required = false, orientation = "vertical", id: idProp, className, children, }) {
+export function Field({ label, description, errorMessage, size = "md", required = false, orientation = "vertical", opticallyAlign, id: idProp, className, children, }) {
     const generatedId = useId();
     const fieldId = idProp || `field-${generatedId}`;
     const descriptionId = description ? `${fieldId}-description` : undefined;
@@ -17,6 +17,7 @@ export function Field({ label, description, errorMessage, size = "md", required
         id: fieldId,
         "aria-describedby": ariaDescribedBy,
         "aria-invalid": invalid || undefined,
+        ...(opticallyAlign && { opticallyAlign }),
     };
     // Resolve the children
     let resolvedChildren;
@@ -29,6 +30,6 @@ export function Field({ label, description, errorMessage, size = "md", required
     else {
         resolvedChildren = children;
     }
-    return (_jsxs("div", { className: clsx(s.Field, className), "data-size": size, "data-orientation": orientation, children: [_jsxs("label", { className: s.Label, htmlFor: fieldId, children: [label, required && (_jsx("span", { className: s.RequiredIndicator, "aria-hidden": "true", children: "*" }))] }), description && (_jsx("div", { className: s.Description, id: descriptionId, children: description })), _jsx("div", { className: s.Control, children: resolvedChildren }), errorMessage && (_jsx(FieldError, { id: errorId, children: errorMessage }))] }));
+    return (_jsxs("div", { className: clsx(s.Field, className), "data-size": size, "data-orientation": orientation, "data-optically-align": opticallyAlign, children: [_jsxs("div", { className: s.LabelGroup, children: [_jsxs("label", { className: s.Label, htmlFor: fieldId, children: [label, required && (_jsx("span", { className: s.RequiredIndicator, "aria-hidden": "true", children: "*" }))] }), description && (_jsx("div", { className: s.Description, id: descriptionId, children: description }))] }), _jsxs("div", { className: s.Content, children: [_jsx("div", { className: s.Control, children: resolvedChildren }), errorMessage && (_jsx(FieldError, { id: errorId, children: errorMessage }))] })] }));
 }
 //# sourceMappingURL=Field.js.map

package/dist/es/components/Field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/components/Field/Field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAG3D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,OAAO,CAAC,MAAM,oBAAoB,CAAA;AA4DlC,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,UAAU,EACxB,EAAE,EAAE,MAAM,EACV,SAAS,EACT,QAAQ,GACG;IACX,MAAM,WAAW,GAAG,KAAK,EAAE,CAAA;IAC3B,MAAM,OAAO,GAAG,MAAM,IAAI,SAAS,WAAW,EAAE,CAAA;IAChD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,OAAO,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IACxE,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA;IAE7D,sDAAsD;IACtD,MAAM,eAAe,GACnB,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAA;IAEjE,MAAM,OAAO,GAAG,CAAC,CAAC,YAAY,CAAA;IAE9B,yCAAyC;IACzC,MAAM,eAAe,GAAoB;QACvC,EAAE,EAAE,OAAO;QACX,kBAAkB,EAAE,eAAe;QACnC,cAAc,EAAE,OAAO,IAAI,SAAS;KACrC,CAAA;IAED,uBAAuB;IACvB,IAAI,gBAAiC,CAAA;IACrC,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACnC,gBAAgB,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAC9C,CAAC;SAAM,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACpC,gBAAgB,GAAG,YAAY,CAC7B,QAAuD,EACvD,eAAe,CAChB,CAAA;IACH,CAAC;SAAM,CAAC;QACN,gBAAgB,GAAG,QAAQ,CAAA;IAC7B,CAAC;IAED,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,eACxB,IAAI,sBACG,WAAW,aAE7B,iBAAO,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,aACxC,KAAK,EACL,QAAQ,IAAI,CACX,eAAM,SAAS,EAAE,CAAC,CAAC,iBAAiB,iBAAc,MAAM,kBAEjD,CACR,IACK,EACP,WAAW,IAAI,CACd,cAAK,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,EAAE,EAAE,aAAa,YAC7C,WAAW,GACR,CACP,EACD,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,YAAG,gBAAgB,GAAO,EAClD,YAAY,IAAI,CACf,KAAC,UAAU,IAAC,EAAE,EAAE,OAAO,YAAG,YAAY,GAAc,CACrD,IACG,CACP,CAAA;AACH,CAAC","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { cloneElement, isValidElement, useId } from \"react\"\n\nimport type { ControlSize } from \"../../types\"\nimport { FieldError } from \"../FieldError\"\n\nimport s from \"./Field.module.css\"\n\nexport type FieldChildProps = {\n  id: string\n  \"aria-describedby\"?: string\n  \"aria-invalid\"?: boolean\n}\n\nexport type FieldProps = {\n  /**\n   * Label text for the field\n   */\n  label: React.ReactNode\n  /**\n   * Helper/description text displayed below the label.\n   * Automatically linked via aria-describedby.\n   */\n  description?: React.ReactNode\n  /**\n   * Error message displayed below the control.\n   * When provided, the child control receives aria-invalid=\"true\".\n   * Uses the existing FieldError component internally.\n   */\n  errorMessage?: React.ReactNode\n  /**\n   * Controls the font size of the label to visually match the child control's size.\n   * Matches the ControlSize scale used by Input, Select, etc.\n   * @default \"md\"\n   */\n  size?: ControlSize\n  /**\n   * Display a required indicator (asterisk) after the label.\n   * This is purely visual — it does not add the `required` HTML attribute.\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Layout direction of label and control.\n   * - \"vertical\": label stacked above control (default)\n   * - \"horizontal\": label beside control\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\"\n  /**\n   * Allows overriding the auto-generated `id`. When provided, this becomes\n   * the id set on the child control and the `htmlFor` on the label.\n   */\n  id?: string\n  /**\n   * CSS class applied to the root wrapper\n   */\n  className?: string\n  /**\n   * The form control(s) to render.\n   * - If a single ReactElement, Field clones it with { id, aria-describedby, aria-invalid }.\n   * - If a function (render prop), it is called with { id, \"aria-describedby\", \"aria-invalid\" }.\n   */\n  children: React.ReactElement | ((fieldProps: FieldChildProps) => React.ReactNode)\n}\n\nexport function Field({\n  label,\n  description,\n  errorMessage,\n  size = \"md\",\n  required = false,\n  orientation = \"vertical\",\n  id: idProp,\n  className,\n  children,\n}: FieldProps) {\n  const generatedId = useId()\n  const fieldId = idProp || `field-${generatedId}`\n  const descriptionId = description ? `${fieldId}-description` : undefined\n  const errorId = errorMessage ? `${fieldId}-error` : undefined\n\n  // Build aria-describedby from description + error IDs\n  const ariaDescribedBy =\n    [descriptionId, errorId].filter(Boolean).join(\" \") || undefined\n\n  const invalid = !!errorMessage\n\n  // Props to inject into the child control\n  const fieldChildProps: FieldChildProps = {\n    id: fieldId,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": invalid || undefined,\n  }\n\n  // Resolve the children\n  let resolvedChildren: React.ReactNode\n  if (typeof children === \"function\") {\n    resolvedChildren = children(fieldChildProps)\n  } else if (isValidElement(children)) {\n    resolvedChildren = cloneElement(\n      children as React.ReactElement<Record<string, unknown>>,\n      fieldChildProps,\n    )\n  } else {\n    resolvedChildren = children\n  }\n\n  return (\n    <div\n      className={clsx(s.Field, className)}\n      data-size={size}\n      data-orientation={orientation}\n    >\n      <label className={s.Label} htmlFor={fieldId}>\n        {label}\n        {required && (\n          <span className={s.RequiredIndicator} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </label>\n      {description && (\n        <div className={s.Description} id={descriptionId}>\n          {description}\n        </div>\n      )}\n      <div className={s.Control}>{resolvedChildren}</div>\n      {errorMessage && (\n        <FieldError id={errorId}>{errorMessage}</FieldError>\n      )}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/components/Field/Field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAG3D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,OAAO,CAAC,MAAM,oBAAoB,CAAA;AAmElC,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,UAAU,EACxB,cAAc,EACd,EAAE,EAAE,MAAM,EACV,SAAS,EACT,QAAQ,GACG;IACX,MAAM,WAAW,GAAG,KAAK,EAAE,CAAA;IAC3B,MAAM,OAAO,GAAG,MAAM,IAAI,SAAS,WAAW,EAAE,CAAA;IAChD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,OAAO,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IACxE,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA;IAE7D,sDAAsD;IACtD,MAAM,eAAe,GACnB,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAA;IAEjE,MAAM,OAAO,GAAG,CAAC,CAAC,YAAY,CAAA;IAE9B,yCAAyC;IACzC,MAAM,eAAe,GAAoB;QACvC,EAAE,EAAE,OAAO;QACX,kBAAkB,EAAE,eAAe;QACnC,cAAc,EAAE,OAAO,IAAI,SAAS;QACpC,GAAG,CAAC,cAAc,IAAI,EAAE,cAAc,EAAE,CAAC;KAC1C,CAAA;IAED,uBAAuB;IACvB,IAAI,gBAAiC,CAAA;IACrC,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACnC,gBAAgB,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAC9C,CAAC;SAAM,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACpC,gBAAgB,GAAG,YAAY,CAC7B,QAAuD,EACvD,eAAe,CAChB,CAAA;IACH,CAAC;SAAM,CAAC;QACN,gBAAgB,GAAG,QAAQ,CAAA;IAC7B,CAAC;IAED,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,eACxB,IAAI,sBACG,WAAW,0BACP,cAAc,aAEpC,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,iBAAO,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,aACxC,KAAK,EACL,QAAQ,IAAI,CACX,eAAM,SAAS,EAAE,CAAC,CAAC,iBAAiB,iBAAc,MAAM,kBAEjD,CACR,IACK,EACP,WAAW,IAAI,CACd,cAAK,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,EAAE,EAAE,aAAa,YAC7C,WAAW,GACR,CACP,IACG,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,aACvB,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,YAAG,gBAAgB,GAAO,EAClD,YAAY,IAAI,CACf,KAAC,UAAU,IAAC,EAAE,EAAE,OAAO,YAAG,YAAY,GAAc,CACrD,IACG,IACF,CACP,CAAA;AACH,CAAC","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { cloneElement, isValidElement, useId } from \"react\"\n\nimport type { ControlSize } from \"../../types\"\nimport { FieldError } from \"../FieldError\"\n\nimport s from \"./Field.module.css\"\n\nexport type FieldChildProps = {\n  id: string\n  \"aria-describedby\"?: string\n  \"aria-invalid\"?: boolean\n  opticallyAlign?: \"start\" | \"end\"\n}\n\nexport type FieldProps = {\n  /**\n   * Label text for the field\n   */\n  label: React.ReactNode\n  /**\n   * Helper/description text displayed below the label.\n   * Automatically linked via aria-describedby.\n   */\n  description?: React.ReactNode\n  /**\n   * Error message displayed below the control.\n   * When provided, the child control receives aria-invalid=\"true\".\n   * Uses the existing FieldError component internally.\n   */\n  errorMessage?: React.ReactNode\n  /**\n   * Controls the font size of the label to visually match the child control's size.\n   * Matches the ControlSize scale used by Input, Select, etc.\n   * @default \"md\"\n   */\n  size?: ControlSize\n  /**\n   * Display a required indicator (asterisk) after the label.\n   * This is purely visual — it does not add the `required` HTML attribute.\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Layout direction of label and control.\n   * - \"vertical\": label stacked above control (default)\n   * - \"horizontal\": label beside control\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\"\n  /**\n   * Allows overriding the auto-generated `id`. When provided, this becomes\n   * the id set on the child control and the `htmlFor` on the label.\n   */\n  id?: string\n  /**\n   * Applies a negative margin on the child control using its gutter to\n   * optically align the control's text with surrounding content.\n   * Passed through to the child control via cloneElement / render prop.\n   */\n  opticallyAlign?: \"start\" | \"end\"\n  /**\n   * CSS class applied to the root wrapper\n   */\n  className?: string\n  /**\n   * The form control(s) to render.\n   * - If a single ReactElement, Field clones it with { id, aria-describedby, aria-invalid }.\n   * - If a function (render prop), it is called with { id, \"aria-describedby\", \"aria-invalid\" }.\n   */\n  children: React.ReactElement | ((fieldProps: FieldChildProps) => React.ReactNode)\n}\n\nexport function Field({\n  label,\n  description,\n  errorMessage,\n  size = \"md\",\n  required = false,\n  orientation = \"vertical\",\n  opticallyAlign,\n  id: idProp,\n  className,\n  children,\n}: FieldProps) {\n  const generatedId = useId()\n  const fieldId = idProp || `field-${generatedId}`\n  const descriptionId = description ? `${fieldId}-description` : undefined\n  const errorId = errorMessage ? `${fieldId}-error` : undefined\n\n  // Build aria-describedby from description + error IDs\n  const ariaDescribedBy =\n    [descriptionId, errorId].filter(Boolean).join(\" \") || undefined\n\n  const invalid = !!errorMessage\n\n  // Props to inject into the child control\n  const fieldChildProps: FieldChildProps = {\n    id: fieldId,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": invalid || undefined,\n    ...(opticallyAlign && { opticallyAlign }),\n  }\n\n  // Resolve the children\n  let resolvedChildren: React.ReactNode\n  if (typeof children === \"function\") {\n    resolvedChildren = children(fieldChildProps)\n  } else if (isValidElement(children)) {\n    resolvedChildren = cloneElement(\n      children as React.ReactElement<Record<string, unknown>>,\n      fieldChildProps,\n    )\n  } else {\n    resolvedChildren = children\n  }\n\n  return (\n    <div\n      className={clsx(s.Field, className)}\n      data-size={size}\n      data-orientation={orientation}\n      data-optically-align={opticallyAlign}\n    >\n      <div className={s.LabelGroup}>\n        <label className={s.Label} htmlFor={fieldId}>\n          {label}\n          {required && (\n            <span className={s.RequiredIndicator} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n        {description && (\n          <div className={s.Description} id={descriptionId}>\n            {description}\n          </div>\n        )}\n      </div>\n      <div className={s.Content}>\n        <div className={s.Control}>{resolvedChildren}</div>\n        {errorMessage && (\n          <FieldError id={errorId}>{errorMessage}</FieldError>\n        )}\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/es/components/Field/Field.module.css

@@ -8,61 +8,105 @@
   --field-error-margin-bottom: 0;
   --field-error-padding-inline: 0;
 }/* =============================================
-   Orientation
+   LabelGroup  (label + description)
+============================================= */.LabelGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--field-label-description-gap, 0px);
+}/* =============================================
+   Content  (control + error)
+============================================= */.Content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--field-gap);
+}/* =============================================
+   Horizontal orientation
 ============================================= */.Field:where([data-orientation="horizontal"]) {
   flex-direction: row;
   align-items: flex-start;
-}.Field:where([data-orientation="horizontal"]) .Label {
+}.Field:where([data-orientation="horizontal"]) .LabelGroup {
   flex-shrink: 0;
+  width: var(--field-horizontal-label-width);
   padding-top: var(--field-label-horizontal-offset);
-  min-width: var(--field-label-horizontal-min-width, 120px);
-}.Field:where([data-orientation="horizontal"]) .Control {
-  flex: 1;
-  min-width: 0;
+}.Field:where([data-orientation="horizontal"]) .Content {
+  flex-shrink: 0;
+  width: var(--field-horizontal-control-width);
 }/* =============================================
-   Sizes
+   Sizes — shared properties (grouped)
 ============================================= */.Field:where([data-size="3xs"]),
 .Field:where([data-size="2xs"]) {
-  --field-gap: calc(var(--spacing) * 1.5);
+  --field-gap: calc(var(--spacing) * 1);
+  --field-label-description-gap: 0px;
   --field-label-font-size: var(--font-text-xs-size);
   --field-label-line-height: var(--font-text-xs-line-height);
   --field-description-font-size: var(--font-text-xs-size);
   --field-description-line-height: var(--font-text-xs-line-height);
-  --field-label-horizontal-offset: 0.25rem;
+
+  /* Scale error elements down for compact sizes */
+  --field-error-icon-size: 0.875rem; /* 14px */
+  --field-error-gap: calc(var(--spacing) * 1.5); /* 6px */
 }.Field:where([data-size="xs"]),
 .Field:where([data-size="sm"]) {
   --field-gap: calc(var(--spacing) * 1.5);
+  --field-label-description-gap: 0px;
   --field-label-font-size: var(--font-text-xs-size);
   --field-label-line-height: var(--font-text-xs-line-height);
   --field-description-font-size: var(--font-text-xs-size);
   --field-description-line-height: var(--font-text-xs-line-height);
-  --field-label-horizontal-offset: 0.375rem;
+
+  /* Scale error elements down for compact sizes */
+  --field-error-icon-size: 0.875rem; /* 14px */
+  --field-error-gap: calc(var(--spacing) * 1.5); /* 6px */
 }.Field:where([data-size="md"]) {
   --field-gap: calc(var(--spacing) * 2);
+  --field-label-description-gap: 2px;
   --field-label-font-size: var(--font-text-sm-size);
   --field-label-line-height: var(--font-text-sm-line-height);
   --field-description-font-size: var(--font-text-xs-size);
   --field-description-line-height: var(--font-text-xs-line-height);
-  --field-description-margin-top: calc(-1 * calc(var(--spacing) * 1));
-  --field-label-horizontal-offset: 0.5rem;
 }.Field:where([data-size="lg"]),
 .Field:where([data-size="xl"]) {
   --field-gap: calc(var(--spacing) * 2);
+  --field-label-description-gap: 2px;
   --field-label-font-size: var(--font-text-sm-size);
   --field-label-line-height: var(--font-text-sm-line-height);
   --field-description-font-size: var(--font-text-xs-size);
   --field-description-line-height: var(--font-text-xs-line-height);
-  --field-description-margin-top: calc(-1 * calc(var(--spacing) * 1));
-  --field-label-horizontal-offset: 0.625rem;
 }.Field:where([data-size="2xl"]),
 .Field:where([data-size="3xl"]) {
   --field-gap: calc(var(--spacing) * 2.5);
+  --field-label-description-gap: 2px;
   --field-label-font-size: var(--font-text-md-size);
   --field-label-line-height: var(--font-text-md-line-height);
   --field-description-font-size: var(--font-text-sm-size);
   --field-description-line-height: var(--font-text-sm-line-height);
-  --field-description-margin-top: calc(-1 * calc(var(--spacing) * 1));
-  --field-label-horizontal-offset: 0.875rem;
+
+  /* Scale error elements up for spacious sizes */
+  --field-error-font-size: var(--font-text-sm-size); /* 14px */
+  --field-error-line-height: var(--font-text-sm-line-height); /* 20px */
+  --field-error-icon-size: 1.125rem; /* 18px */
+}/* =============================================
+   Sizes — horizontal label offset (per-size)
+   Centers label text vertically with the input:
+   offset = (control-height − label-line-height) / 2
+============================================= */.Field:where([data-size="3xs"]) {
+  --field-label-horizontal-offset: calc((var(--control-size-3xs) - var(--font-text-xs-line-height)) / 2); /* 2px */
+}.Field:where([data-size="2xs"]) {
+  --field-label-horizontal-offset: calc((var(--control-size-2xs) - var(--font-text-xs-line-height)) / 2); /* 3px */
+}.Field:where([data-size="xs"]) {
+  --field-label-horizontal-offset: calc((var(--control-size-xs) - var(--font-text-xs-line-height)) / 2); /* 4px */
+}.Field:where([data-size="sm"]) {
+  --field-label-horizontal-offset: calc((var(--control-size-sm) - var(--font-text-xs-line-height)) / 2); /* 5px */
+}.Field:where([data-size="md"]) {
+  --field-label-horizontal-offset: calc((var(--control-size-md) - var(--font-text-sm-line-height)) / 2); /* 6px */
+}.Field:where([data-size="lg"]) {
+  --field-label-horizontal-offset: calc((var(--control-size-lg) - var(--font-text-sm-line-height)) / 2); /* 8px */
+}.Field:where([data-size="xl"]) {
+  --field-label-horizontal-offset: calc((var(--control-size-xl) - var(--font-text-sm-line-height)) / 2); /* 10px */
+}.Field:where([data-size="2xl"]) {
+  --field-label-horizontal-offset: calc((var(--control-size-2xl) - var(--font-text-md-line-height)) / 2); /* 10px */
+}.Field:where([data-size="3xl"]) {
+  --field-label-horizontal-offset: calc((var(--control-size-3xl) - var(--font-text-md-line-height)) / 2); /* 12px */
 }/* =============================================
    Label
 ============================================= */.Label {
@@ -74,9 +118,6 @@
   line-height: var(--field-label-line-height);
   font-weight: var(--font-weight-semibold);
   cursor: default;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
 }/* =============================================
    Required Indicator
 ============================================= */.RequiredIndicator {
@@ -88,7 +129,6 @@
   color: var(--color-text-secondary);
   font-size: var(--field-description-font-size);
   line-height: var(--field-description-line-height);
-  margin-top: var(--field-description-margin-top, calc(-1 * calc(var(--spacing) * 0.5)));
 }/* =============================================
    Control
 ============================================= */.Control {

package/dist/es/components/FieldError/FieldError.module.css

@@ -18,6 +18,5 @@
   height: var(--field-error-icon-size);
   display: block;
   align-self: center;
-  margin-top: -0.1em;
 }
 }

package/dist/es/components/RadioGroup/RadioGroup.js

@@ -19,7 +19,7 @@ export const RadioGroup = ({ onChange, children, className, direction = "row", d
     }), [disabled, direction]);
     return (_jsx(RadioGroupContext, { value: store, children: _jsx(RadixRadioGroup.Root, { className: clsx(s.RadioGroup, className), "data-direction": direction, onValueChange: onChange, disabled: disabled, ...restProps, children: children }) }));
 };
-const Item = ({ value, disabled: itemDisabled = false, required, children, className, block = false, ...restProps }) => {
+const Item = ({ value, disabled: itemDisabled = false, required, children, className, block = false, orientation = "left", ...restProps }) => {
     const { disabled: groupDisabled } = useRadioGroupContext();
     const disabled = groupDisabled || itemDisabled;
     const id = useId();
@@ -28,7 +28,7 @@ const Item = ({ value, disabled: itemDisabled = false, required, children, class
     // Providing an extra wrapper enables `label` to be inline-flex, avoiding clickable whitespace
     // when radio options are of varied lengths.
     // NOTE: Important that this is `flex` to prevent the `inline-flex` label from extra, unintentional whitespace.
-    _jsx("div", { className: "flex", ...restProps, children: _jsxs("label", { htmlFor: itemId, className: clsx(s.RadioLabel, className), "data-disabled": disabled ? "" : undefined, "data-block": block ? "" : undefined, onMouseDown: (event) => {
+    _jsx("div", { className: clsx("flex", block && "w-full"), ...restProps, children: _jsxs("label", { htmlFor: itemId, className: clsx(s.RadioLabel, className), "data-disabled": disabled ? "" : undefined, "data-block": block ? "" : undefined, "data-orientation": orientation, onMouseDown: (event) => {
                 if (!event.defaultPrevented && event.detail > 1)
                     event.preventDefault();
             }, children: [_jsx("div", { className: s.RadioIndicatorWrapper, children: _jsx(RadixRadioGroup.Item, { id: itemId, value: value, disabled: disabled, required: required, className: s.RadioItem, children: _jsx(RadixRadioGroup.Indicator, { className: s.RadioIndicator }) }) }), children] }) }));

package/dist/es/components/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\"\nimport React, { createContext, use, useId, useMemo } from \"react\"\nimport s from \"./RadioGroup.module.css\"\n\ntype Direction = \"col\" | \"row\"\n\ntype RadioGroupContextValue = {\n  disabled: boolean\n  direction: Direction\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n\nconst useRadioGroupContext = () => {\n  const context = use(RadioGroupContext)\n\n  if (!context) {\n    throw new Error(\"RadioGroup components must be wrapped in <RadioGroup />\")\n  }\n\n  return context\n}\n\nexport type RadioGroupProps<T extends string> = {\n  \"defaultValue\"?: T\n  \"value\"?: T\n  \"name\"?: string\n  \"onChange\"?: (value: T) => void\n  /** Accessible label for the radio options */\n  \"aria-label\": string\n  /** Determines the layout direction of the radio items\n   * @default row\n   */\n  \"direction\"?: Direction\n  /** Controls whether the entire radio group is disabled */\n  \"disabled\"?: boolean\n  /** Class applied to the radio group container */\n  \"className\"?: string\n  \"children\": React.ReactNode\n  \"required\"?: boolean\n}\n\nexport const RadioGroup = <T extends string>({\n  onChange,\n  children,\n  className,\n  direction = \"row\",\n  disabled = false,\n  ...restProps\n}: RadioGroupProps<T>) => {\n  const store = useMemo<RadioGroupContextValue>(\n    () => ({\n      disabled,\n      direction,\n    }),\n    [disabled, direction],\n  )\n\n  return (\n    <RadioGroupContext value={store}>\n      <RadixRadioGroup.Root\n        className={clsx(s.RadioGroup, className)}\n        data-direction={direction}\n        onValueChange={onChange}\n        disabled={disabled}\n        {...restProps}\n      >\n        {children}\n      </RadixRadioGroup.Root>\n    </RadioGroupContext>\n  )\n}\n\nexport type RadioGroupItemProps<T extends string> = {\n  value: T\n  /** Determines if a given radio item is disabled */\n  disabled?: boolean\n  required?: boolean\n  block?: boolean\n  className?: string\n  children: React.ReactNode\n}\n\nconst Item = <T extends string>({\n  value,\n  disabled: itemDisabled = false,\n  required,\n  children,\n  className,\n  block = false,\n  ...restProps\n}: RadioGroupItemProps<T>) => {\n  const { disabled: groupDisabled } = useRadioGroupContext()\n  const disabled = groupDisabled || itemDisabled\n\n  const id = useId()\n  const itemId = `${value}-${id}`\n\n  return (\n    // Providing an extra wrapper enables `label` to be inline-flex, avoiding clickable whitespace\n    // when radio options are of varied lengths.\n    // NOTE: Important that this is `flex` to prevent the `inline-flex` label from extra, unintentional whitespace.\n    <div className=\"flex\" {...restProps}>\n      <label\n        htmlFor={itemId}\n        className={clsx(s.RadioLabel, className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-block={block ? \"\" : undefined}\n        onMouseDown={(event) => {\n          if (!event.defaultPrevented && event.detail > 1) event.preventDefault()\n        }}\n      >\n        <div className={s.RadioIndicatorWrapper}>\n          <RadixRadioGroup.Item\n            id={itemId}\n            value={value}\n            disabled={disabled}\n            required={required}\n            className={s.RadioItem}\n          >\n            <RadixRadioGroup.Indicator className={s.RadioIndicator} />\n          </RadixRadioGroup.Item>\n        </div>\n        {children}\n      </label>\n    </div>\n  )\n}\n\nRadioGroup.Item = Item\n"]}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\"\nimport React, { createContext, use, useId, useMemo } from \"react\"\nimport s from \"./RadioGroup.module.css\"\n\ntype Direction = \"col\" | \"row\"\n\ntype RadioGroupContextValue = {\n  disabled: boolean\n  direction: Direction\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n\nconst useRadioGroupContext = () => {\n  const context = use(RadioGroupContext)\n\n  if (!context) {\n    throw new Error(\"RadioGroup components must be wrapped in <RadioGroup />\")\n  }\n\n  return context\n}\n\nexport type RadioGroupProps<T extends string> = {\n  \"defaultValue\"?: T\n  \"value\"?: T\n  \"name\"?: string\n  \"onChange\"?: (value: T) => void\n  /** Accessible label for the radio options */\n  \"aria-label\"?: string\n  /** Determines the layout direction of the radio items\n   * @default row\n   */\n  \"direction\"?: Direction\n  /** Controls whether the entire radio group is disabled */\n  \"disabled\"?: boolean\n  /** Class applied to the radio group container */\n  \"className\"?: string\n  \"children\": React.ReactNode\n  \"required\"?: boolean\n}\n\nexport const RadioGroup = <T extends string>({\n  onChange,\n  children,\n  className,\n  direction = \"row\",\n  disabled = false,\n  ...restProps\n}: RadioGroupProps<T>) => {\n  const store = useMemo<RadioGroupContextValue>(\n    () => ({\n      disabled,\n      direction,\n    }),\n    [disabled, direction],\n  )\n\n  return (\n    <RadioGroupContext value={store}>\n      <RadixRadioGroup.Root\n        className={clsx(s.RadioGroup, className)}\n        data-direction={direction}\n        onValueChange={onChange}\n        disabled={disabled}\n        {...restProps}\n      >\n        {children}\n      </RadixRadioGroup.Root>\n    </RadioGroupContext>\n  )\n}\n\nexport type RadioGroupItemProps<T extends string> = {\n  value: T\n  /** Determines if a given radio item is disabled */\n  disabled?: boolean\n  required?: boolean\n  block?: boolean\n  className?: string\n  /**\n   * The orientation of the radio indicator relative to the label.\n   *\n   * @default \"left\"\n   */\n  orientation?: \"left\" | \"right\"\n  children: React.ReactNode\n}\n\nconst Item = <T extends string>({\n  value,\n  disabled: itemDisabled = false,\n  required,\n  children,\n  className,\n  block = false,\n  orientation = \"left\",\n  ...restProps\n}: RadioGroupItemProps<T>) => {\n  const { disabled: groupDisabled } = useRadioGroupContext()\n  const disabled = groupDisabled || itemDisabled\n\n  const id = useId()\n  const itemId = `${value}-${id}`\n\n  return (\n    // Providing an extra wrapper enables `label` to be inline-flex, avoiding clickable whitespace\n    // when radio options are of varied lengths.\n    // NOTE: Important that this is `flex` to prevent the `inline-flex` label from extra, unintentional whitespace.\n    <div className={clsx(\"flex\", block && \"w-full\")} {...restProps}>\n      <label\n        htmlFor={itemId}\n        className={clsx(s.RadioLabel, className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-block={block ? \"\" : undefined}\n        data-orientation={orientation}\n        onMouseDown={(event) => {\n          if (!event.defaultPrevented && event.detail > 1) event.preventDefault()\n        }}\n      >\n        <div className={s.RadioIndicatorWrapper}>\n          <RadixRadioGroup.Item\n            id={itemId}\n            value={value}\n            disabled={disabled}\n            required={required}\n            className={s.RadioItem}\n          >\n            <RadixRadioGroup.Indicator className={s.RadioIndicator} />\n          </RadixRadioGroup.Item>\n        </div>\n        {children}\n      </label>\n    </div>\n  )\n}\n\nRadioGroup.Item = Item\n"]}

package/dist/es/components/RadioGroup/RadioGroup.module.css

@@ -15,6 +15,9 @@
   font-size: var(--radio-group-item-font-size);
   line-height: var(--radio-group-item-line-height);
 }
+    .RadioLabel[data-orientation="right"]:where([data-block]) {
+      justify-content: space-between;
+    }
 
   .RadioLabel[data-disabled] {
     cursor: not-allowed;
@@ -22,6 +25,7 @@
   }
 
   .RadioLabel[data-block] {
+    display: flex;
     width: 100%;
   }/* Creates centered alignment with `line-height` of the label */.RadioIndicatorWrapper {
   position: relative;
@@ -40,6 +44,10 @@
     left: 0;
     height: 1px !important;
     transform: none !important;
+  }
+
+  .RadioLabel[data-orientation="right"] .RadioIndicatorWrapper {
+    order: 1;
   }.RadioItem {
   position: relative;
   display: flex;

package/dist/es/components/Sidebar/Sidebar.module.css

@@ -1,6 +1,5 @@
 @layer components {/* =============================================
    Sidebar Component Styles
-   Based on OpenAI Platform styling
 ============================================= *//* Layout container (wraps sidebar + content) */.SidebarLayout {
   display: flex;
   width: 100%;

package/dist/es/components/Switch/Switch.js

@@ -4,9 +4,10 @@ import clsx from "clsx";
 import { Switch as RadixSwitch } from "radix-ui";
 import { useId } from "react";
 import s from "./Switch.module.css";
-export const Switch = ({ className, label, id: propsId, disabled, labelPosition = "end", ...restProps }) => {
+export const Switch = ({ className, label, description, id: propsId, disabled, labelPosition = "end", ...restProps }) => {
     const reactId = useId();
     const id = propsId ?? reactId;
-    return (_jsxs("div", { className: clsx(s.Container, className), "data-disabled": disabled ? "" : undefined, "data-has-label": label ? "" : undefined, "data-label-position": labelPosition, children: [_jsx(RadixSwitch.Root, { id: id, className: s.Track, disabled: disabled, ...restProps, children: _jsx(RadixSwitch.Thumb, { className: s.Thumb }) }), label && (_jsx("label", { htmlFor: id, className: s.Label, children: label }))] }));
+    const descriptionId = description ? `${id}-description` : undefined;
+    return (_jsxs("div", { className: clsx(s.Container, className), "data-disabled": disabled ? "" : undefined, "data-has-label": label ? "" : undefined, "data-label-position": labelPosition, children: [_jsx(RadixSwitch.Root, { id: id, className: s.Track, disabled: disabled, "aria-describedby": descriptionId, ...restProps, children: _jsx(RadixSwitch.Thumb, { className: s.Thumb }) }), label && (description ? (_jsxs("div", { className: s.LabelGroup, children: [_jsx("label", { htmlFor: id, className: s.Label, children: label }), _jsx("span", { id: descriptionId, className: s.Description, children: description })] })) : (_jsx("label", { htmlFor: id, className: s.Label, children: label })))] }));
 };
 //# sourceMappingURL=Switch.js.map

package/dist/es/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAA0C,KAAK,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,CAAC,MAAM,qBAAqB,CAAA;AAkCnC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,KAAK,EACL,EAAE,EAAE,OAAO,EACX,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,GAAG,SAAS,EACA,EAAE,EAAE;IAChB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,OAAO,IAAI,OAAO,CAAA;IAE7B,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,mBACxB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,oBACxB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,yBACjB,aAAa,aAElC,KAAC,WAAW,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,KAAM,SAAS,YAC7E,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAE,CAAC,CAAC,KAAK,GAAI,GACxB,EAElB,KAAK,IAAI,CACR,gBAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,YACnC,KAAK,GACA,CACT,IACG,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Switch as RadixSwitch } from \"radix-ui\"\nimport { type FocusEventHandler, type ReactNode, useId } from \"react\"\nimport s from \"./Switch.module.css\"\n\nexport type SwitchProps = {\n  /** The `id` of the switch. */\n  id?: string\n  /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */\n  defaultChecked?: boolean\n  /** The controlled state of the switch. Must be used in conjunction with `onCheckedChange`. */\n  checked?: boolean\n  /** Optional accessible label rendered to the right of the checkbox. */\n  label?: ReactNode\n  /** Event handler called when the state of the switch changes. */\n  onCheckedChange?: (nextState: boolean) => void\n  /** Event handler called when the checkbox looses focus. */\n  onBlur?: FocusEventHandler<HTMLButtonElement>\n  /** Event handler called when the checkbox gains focus. */\n  onFocus?: FocusEventHandler<HTMLButtonElement>\n  /** When `true`, prevents the user from interacting with the switch. */\n  disabled?: boolean\n  /** When `true`, indicates that the user must check the switch before the owning form can be submitted. */\n  required?: boolean\n  /** The name of the switch. Submitted with its owning form as part of a name/value pair. */\n  name?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: string\n  /** CSS classes applied to wrapper node */\n  className?: string\n  /**\n   * The position of the label relative to the switch.\n   * @default end\n   */\n  labelPosition?: \"start\" | \"end\"\n}\n\nexport const Switch = ({\n  className,\n  label,\n  id: propsId,\n  disabled,\n  labelPosition = \"end\",\n  ...restProps\n}: SwitchProps) => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  return (\n    <div\n      className={clsx(s.Container, className)}\n      data-disabled={disabled ? \"\" : undefined}\n      data-has-label={label ? \"\" : undefined}\n      data-label-position={labelPosition}\n    >\n      <RadixSwitch.Root id={id} className={s.Track} disabled={disabled} {...restProps}>\n        <RadixSwitch.Thumb className={s.Thumb} />\n      </RadixSwitch.Root>\n\n      {label && (\n        <label htmlFor={id} className={s.Label}>\n          {label}\n        </label>\n      )}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAA0C,KAAK,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,CAAC,MAAM,qBAAqB,CAAA;AAoCnC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,KAAK,EACL,WAAW,EACX,EAAE,EAAE,OAAO,EACX,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,GAAG,SAAS,EACA,EAAE,EAAE;IAChB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,OAAO,IAAI,OAAO,CAAA;IAC7B,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IAEnE,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,mBACxB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,oBACxB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,yBACjB,aAAa,aAElC,KAAC,WAAW,CAAC,IAAI,IACf,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,CAAC,CAAC,KAAK,EAClB,QAAQ,EAAE,QAAQ,sBACA,aAAa,KAC3B,SAAS,YAEb,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAE,CAAC,CAAC,KAAK,GAAI,GACxB,EAElB,KAAK,IAAI,CACR,WAAW,CAAC,CAAC,CAAC,CACZ,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,gBAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,YACnC,KAAK,GACA,EACR,eAAM,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,YAC9C,WAAW,GACP,IACH,CACP,CAAC,CAAC,CAAC,CACF,gBAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,YACnC,KAAK,GACA,CACT,CACF,IACG,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Switch as RadixSwitch } from \"radix-ui\"\nimport { type FocusEventHandler, type ReactNode, useId } from \"react\"\nimport s from \"./Switch.module.css\"\n\nexport type SwitchProps = {\n  /** The `id` of the switch. */\n  id?: string\n  /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */\n  defaultChecked?: boolean\n  /** The controlled state of the switch. Must be used in conjunction with `onCheckedChange`. */\n  checked?: boolean\n  /** Optional accessible label rendered next to the switch. */\n  label?: ReactNode\n  /** Optional description rendered below the label. Linked via `aria-describedby`. */\n  description?: ReactNode\n  /** Event handler called when the state of the switch changes. */\n  onCheckedChange?: (nextState: boolean) => void\n  /** Event handler called when the checkbox looses focus. */\n  onBlur?: FocusEventHandler<HTMLButtonElement>\n  /** Event handler called when the checkbox gains focus. */\n  onFocus?: FocusEventHandler<HTMLButtonElement>\n  /** When `true`, prevents the user from interacting with the switch. */\n  disabled?: boolean\n  /** When `true`, indicates that the user must check the switch before the owning form can be submitted. */\n  required?: boolean\n  /** The name of the switch. Submitted with its owning form as part of a name/value pair. */\n  name?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: string\n  /** CSS classes applied to wrapper node */\n  className?: string\n  /**\n   * The position of the label relative to the switch.\n   * @default end\n   */\n  labelPosition?: \"start\" | \"end\"\n}\n\nexport const Switch = ({\n  className,\n  label,\n  description,\n  id: propsId,\n  disabled,\n  labelPosition = \"end\",\n  ...restProps\n}: SwitchProps) => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n  const descriptionId = description ? `${id}-description` : undefined\n\n  return (\n    <div\n      className={clsx(s.Container, className)}\n      data-disabled={disabled ? \"\" : undefined}\n      data-has-label={label ? \"\" : undefined}\n      data-label-position={labelPosition}\n    >\n      <RadixSwitch.Root\n        id={id}\n        className={s.Track}\n        disabled={disabled}\n        aria-describedby={descriptionId}\n        {...restProps}\n      >\n        <RadixSwitch.Thumb className={s.Thumb} />\n      </RadixSwitch.Root>\n\n      {label && (\n        description ? (\n          <div className={s.LabelGroup}>\n            <label htmlFor={id} className={s.Label}>\n              {label}\n            </label>\n            <span id={descriptionId} className={s.Description}>\n              {description}\n            </span>\n          </div>\n        ) : (\n          <label htmlFor={id} className={s.Label}>\n            {label}\n          </label>\n        )\n      )}\n    </div>\n  )\n}\n"]}

package/dist/es/components/Switch/Switch.module.css

@@ -75,20 +75,46 @@
   .Thumb[data-disabled] {
     background: var(--switch-thumb-color-disabled);
     box-shadow: none;
+  }.LabelGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+  /* Use padding so that the spacing is intrinsic to the group, remaining clickable. */
+  [data-label-position="end"] .LabelGroup {
+    padding-left: var(--switch-label-gap);
+  }
+
+  [data-label-position="start"] .LabelGroup {
+    padding-right: var(--switch-label-gap);
+  }
+
+  [data-disabled] .LabelGroup {
+    cursor: not-allowed;
   }.Label {
   cursor: pointer;
 }
 
   /* Use padding so that the spacing is intrinsic to the label, remaining clickable. */
-  [data-label-position="end"] .Label {
+  [data-label-position="end"] > .Label {
     padding-left: var(--switch-label-gap);
   }
 
-  [data-label-position="start"] .Label {
+  [data-label-position="start"] > .Label {
     padding-right: var(--switch-label-gap);
   }
 
   [data-disabled] .Label {
     cursor: not-allowed;
+  }.Description {
+  color: var(--color-text-secondary);
+  font-size: var(--font-text-xs-size);
+  line-height: var(--font-text-xs-line-height);
+  cursor: pointer;
+}
+
+  [data-disabled] .Description {
+    cursor: not-allowed;
   }
 }

package/dist/es/styles/variables-components.css

@@ -99,12 +99,14 @@
     --input-outline-border-color-focus: var(--alpha-50);
     --input-soft-background-color: var(--color-background-primary-soft-alpha);
     --input-soft-border-color-focus: var(--alpha-20);
+    --input-border-color-invalid: var(--color-border-danger-outline);
 
     /* =============================================
       FieldError
     ============================================= */
+    --field-error-color: var(--color-text-danger-outline);
     --field-error-font-size: 0.75rem;
-    --field-error-line-height: 1.4;
+    --field-error-line-height: var(--font-text-xs-line-height);
     --field-error-icon-size: 1rem;
     --field-error-gap: calc(var(--spacing) * 2);
     --field-error-margin-top: 0.5rem;
@@ -114,7 +116,8 @@
     /* =============================================
       Field
     ============================================= */
-    --field-label-horizontal-min-width: 120px;
+    --field-horizontal-label-width: 120px;
+    --field-horizontal-control-width: 240px;
 
     /* =============================================
       FloatingLabelInput
@@ -123,9 +126,9 @@
     --floating-input-gutter: 1.25rem;
     --floating-input-border-radius: var(--radius-full);
     --floating-input-background: var(--color-surface);
-    --floating-input-border-color-invalid: var(--field-error-color);
+    --floating-input-border-color-invalid: var(--color-border-danger-outline);
     --floating-input-label-color: var(--color-text-tertiary);
-    --floating-input-label-color-invalid: var(--field-error-color);
+    --floating-input-label-color-invalid: var(--color-text-danger-outline);
     --floating-input-transition-duration: 80ms;
     --floating-input-label-scale: 0.88;
 
@@ -385,8 +388,6 @@
   :where(:root), :where([data-theme="light"]) {
     --avatar-image-border-color: var(--alpha-04);
     --input-outline-border-color-hover: var(--alpha-25);
-    --input-border-color-invalid: var(--red-500);
-    --field-error-color: #d00e17;
     --floating-input-border-color: rgb(0 0 0 / 15%);
     --floating-input-border-color-hover: rgb(0 0 0 / 20%);
     --floating-input-border-color-focus: #3e68ff;
@@ -424,8 +425,6 @@
   :where([data-theme="dark"]) {
     --avatar-image-border-color: var(--alpha-15);
     --input-outline-border-color-hover: var(--alpha-30);
-    --input-border-color-invalid: var(--red-600);
-    --field-error-color: #ff6b6b;
     --floating-input-border-color: rgb(255 255 255 / 16%);
     --floating-input-border-color-hover: rgb(255 255 255 / 24%);
     --floating-input-border-color-focus: #6f8dff;

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -30,5 +30,17 @@ export type CheckboxProps = {
      * @default "left"
      */
     orientation?: "left" | "right";
+    /**
+     * Determines if the checkbox should be a fully rounded pill shape.
+     * @default false
+     */
+    pill?: boolean;
+    /**
+     * Visual style variant for the checkbox indicator.
+     * - `"solid"` — filled background when checked (default)
+     * - `"ghost"` — no border or background, checkmark only
+     * @default "solid"
+     */
+    variant?: "solid" | "ghost";
 };
-export declare const Checkbox: ({ className, label, id: propsId, disabled, orientation, ...restProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ className, label, id: propsId, disabled, orientation, pill, variant, ...restProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Field/Field.d.ts

@@ -3,6 +3,7 @@ export type FieldChildProps = {
     id: string;
     "aria-describedby"?: string;
     "aria-invalid"?: boolean;
+    opticallyAlign?: "start" | "end";
 };
 export type FieldProps = {
     /**
@@ -44,6 +45,12 @@ export type FieldProps = {
      * the id set on the child control and the `htmlFor` on the label.
      */
     id?: string;
+    /**
+     * Applies a negative margin on the child control using its gutter to
+     * optically align the control's text with surrounding content.
+     * Passed through to the child control via cloneElement / render prop.
+     */
+    opticallyAlign?: "start" | "end";
     /**
      * CSS class applied to the root wrapper
      */
@@ -55,4 +62,4 @@ export type FieldProps = {
      */
     children: React.ReactElement | ((fieldProps: FieldChildProps) => React.ReactNode);
 };
-export declare function Field({ label, description, errorMessage, size, required, orientation, id: idProp, className, children, }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function Field({ label, description, errorMessage, size, required, orientation, opticallyAlign, id: idProp, className, children, }: FieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/RadioGroup/RadioGroup.d.ts

@@ -6,7 +6,7 @@ export type RadioGroupProps<T extends string> = {
     "name"?: string;
     "onChange"?: (value: T) => void;
     /** Accessible label for the radio options */
-    "aria-label": string;
+    "aria-label"?: string;
     /** Determines the layout direction of the radio items
      * @default row
      */
@@ -20,7 +20,7 @@ export type RadioGroupProps<T extends string> = {
 };
 export declare const RadioGroup: {
     <T extends string>({ onChange, children, className, direction, disabled, ...restProps }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
-    Item: <T extends string>({ value, disabled: itemDisabled, required, children, className, block, ...restProps }: RadioGroupItemProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Item: <T extends string>({ value, disabled: itemDisabled, required, children, className, block, orientation, ...restProps }: RadioGroupItemProps<T>) => import("react/jsx-runtime").JSX.Element;
 };
 export type RadioGroupItemProps<T extends string> = {
     value: T;
@@ -29,6 +29,12 @@ export type RadioGroupItemProps<T extends string> = {
     required?: boolean;
     block?: boolean;
     className?: string;
+    /**
+     * The orientation of the radio indicator relative to the label.
+     *
+     * @default "left"
+     */
+    orientation?: "left" | "right";
     children: React.ReactNode;
 };
 export {};

package/dist/types/components/Switch/Switch.d.ts

@@ -6,8 +6,10 @@ export type SwitchProps = {
     defaultChecked?: boolean;
     /** The controlled state of the switch. Must be used in conjunction with `onCheckedChange`. */
     checked?: boolean;
-    /** Optional accessible label rendered to the right of the checkbox. */
+    /** Optional accessible label rendered next to the switch. */
     label?: ReactNode;
+    /** Optional description rendered below the label. Linked via `aria-describedby`. */
+    description?: ReactNode;
     /** Event handler called when the state of the switch changes. */
     onCheckedChange?: (nextState: boolean) => void;
     /** Event handler called when the checkbox looses focus. */
@@ -30,4 +32,4 @@ export type SwitchProps = {
      */
     labelPosition?: "start" | "end";
 };
-export declare const Switch: ({ className, label, id: propsId, disabled, labelPosition, ...restProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ className, label, description, id: propsId, disabled, labelPosition, ...restProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "tailwind",
     "plexui",
     "radix",
-    "chatgpt"
+    "ui-kit"
   ],
   "engines": {
     "node": ">=18"
@@ -33,6 +33,9 @@
   ],
   "exports": {
     "./css": "./dist/es/styles/index.css",
+    "./styles/variables-primitive.css": "./dist/es/styles/variables-primitive.css",
+    "./styles/variables-semantic.css": "./dist/es/styles/variables-semantic.css",
+    "./styles/variables-components.css": "./dist/es/styles/variables-components.css",
     "./components/*": {
       "types": "./dist/types/components/*/index.d.ts",
       "default": "./dist/es/components/*/index.js"