@plexui/ui 0.4.1 → 0.6.0

package/README.md

@@ -2,7 +2,9 @@
 
 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.
 
-[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)
 
 ---
 
@@ -12,6 +14,7 @@ A modern React component library built on the same design foundations as OpenAI'
 - **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/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/Tabs/Tabs.js

@@ -8,7 +8,7 @@ import { handlePressableMouseEnter, waitForAnimationFrame } from "../../lib/help
 import {} from "../../types";
 import { LoadingIndicator } from "../Indicator";
 import s from "./Tabs.module.css";
-export const Tabs = ({ value, onChange, children, variant = "segmented", orientation = "horizontal", block, pill = true, size = "md", gutterSize, className, onClick, ...restProps }) => {
+export const Tabs = ({ value, onChange, children, variant = "segmented", orientation = "horizontal", block, pill = true, flush, size = "md", gutterSize, className, onClick, ...restProps }) => {
     const rootRef = useRef(null);
     const thumbRef = useRef(null);
     const prevSizeRef = useRef(size);
@@ -126,7 +126,7 @@ export const Tabs = ({ value, onChange, children, variant = "segmented", orienta
                 }
             });
         }
-    }, [applyThumbSizing, value, size, gutterSize, pill, transitionProperty]);
+    }, [applyThumbSizing, value, size, gutterSize, pill, flush, transitionProperty]);
     const handleValueChange = (nextValue) => {
         // Only trigger onChange when a value exists
         // Disallow toggling off enabled items
@@ -135,7 +135,9 @@ export const Tabs = ({ value, onChange, children, variant = "segmented", orienta
     };
     // Only apply pill for segmented variant
     const isPill = variant === "segmented" && pill;
-    return (_jsxs(ToggleGroup.Root, { ref: rootRef, className: clsx(s.Tabs, className), type: "single", value: value, loop: false, onValueChange: handleValueChange, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-block": block ? "" : undefined, "data-pill": isPill ? "" : undefined, "data-size": size, "data-gutter-size": gutterSize, ...restProps, children: [_jsx("div", { className: s.TabsThumb, ref: thumbRef }), children] }));
+    // Only apply flush for underline variant
+    const isFlush = variant === "underline" && flush;
+    return (_jsxs(ToggleGroup.Root, { ref: rootRef, className: clsx(s.Tabs, className), type: "single", value: value, loop: false, onValueChange: handleValueChange, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-block": block ? "" : undefined, "data-pill": isPill ? "" : undefined, "data-flush": isFlush ? "" : undefined, "data-size": size, "data-gutter-size": gutterSize, ...restProps, children: [_jsx("div", { className: s.TabsThumb, ref: thumbRef }), children] }));
 };
 // Type guard for badge object form
 const isBadgeObject = (badge) => {

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { ToggleGroup } from \"radix-ui\"\nimport { useCallback, useLayoutEffect, useRef } from \"react\"\nimport { useResizeObserver } from \"usehooks-ts\"\nimport { handlePressableMouseEnter, waitForAnimationFrame } from \"../../lib/helpers\"\nimport { type ControlSize, type SemanticColors, type Sizes, type Variants } from \"../../types\"\nimport { LoadingIndicator } from \"../Indicator\"\nimport s from \"./Tabs.module.css\"\n\nexport type SizeVariant = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport type TabsVariant = \"segmented\" | \"underline\"\nexport type TabsOrientation = \"horizontal\" | \"vertical\"\n\nexport type TabsProps<T extends string> = {\n  /**\n   * Controlled value for the group\n   */\n  \"value\": T\n  /** Callback for when a new value is selected */\n  \"onChange\"?: (nextValue: T) => void\n  /** Callback any time the control is clicked (even if a new value was not selected) */\n  \"onClick\"?: () => void\n  /**\n   * Text read aloud to screen readers when the control is focused\n   */\n  \"aria-label\": string\n  /**\n   * Visual variant of the tab group\n   * - `\"segmented\"` — background container with sliding highlight (default)\n   * - `\"underline\"` — no background, animated line indicator under active tab\n   * @default \"segmented\"\n   */\n  \"variant\"?: TabsVariant\n  /**\n   * Orientation of the tab layout\n   * @default \"horizontal\"\n   */\n  \"orientation\"?: TabsOrientation\n  /**\n   * Controls the size of the tabs\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   *\n   * @default md\n   */\n  \"size\"?: ControlSize\n  /**\n   * Controls gutter on the edges of the button, defaults to value from `size`.\n   *\n   * | 2xs    | xs     | sm     | md     | lg     | xl     |\n   * | ------ | ------ | ------ | ------ | ------ | ------ |\n   * | `6px`  | `8px`  | `10px` | `12px` | `14px` | `16px` |\n   */\n  \"gutterSize\"?: Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">\n  /** Disable the entire group */\n  \"disabled\"?: boolean\n  /**\n   * Display the control as a block element with equal width segments\n   * @default false\n   */\n  \"block\"?: boolean\n  /**\n   * Determines if the tabs should be a fully rounded pill shape.\n   * Only applies to the `\"segmented\"` variant.\n   * @default true\n   */\n  \"pill\"?: boolean\n  \"className\"?: string\n  \"children\": React.ReactNode\n}\n\nexport const Tabs = <T extends string>({\n  value,\n  onChange,\n  children,\n  variant = \"segmented\",\n  orientation = \"horizontal\",\n  block,\n  pill = true,\n  size = \"md\",\n  gutterSize,\n  className,\n  onClick,\n  ...restProps\n}: TabsProps<T>) => {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const thumbRef = useRef<HTMLDivElement>(null)\n  const prevSizeRef = useRef(size)\n  const isVertical = orientation === \"vertical\"\n\n  const applyThumbSizing = useCallback(\n    (attemptScroll: boolean) => {\n      const root = rootRef.current\n      const thumb = thumbRef.current\n\n      if (!root || !thumb) {\n        return\n      }\n\n      // Get selected node\n      const activeNode = root?.querySelector<HTMLDivElement>('[data-state=\"on\"]')\n\n      // Impossible\n      if (!activeNode) {\n        return\n      }\n\n      if (isVertical) {\n        const rootHeight = root.clientHeight\n        let targetHeight = Math.floor(activeNode.clientHeight)\n        const targetOffset = activeNode.offsetTop\n\n        // Detect subpixel edge case\n        if (rootHeight - (targetHeight + targetOffset) < 2) {\n          targetHeight = targetHeight - 1\n        }\n\n        thumb.style.height = `${Math.floor(targetHeight)}px`\n        thumb.style.width = \"\"\n        thumb.style.transform = `translateY(${targetOffset}px)`\n\n        // Scroll into view if needed\n        if (root.scrollHeight > rootHeight) {\n          const buffer = rootHeight * 0.15\n          const scrollTop = root.scrollTop\n          const top = activeNode.offsetTop\n          const bottom = top + targetHeight\n          if (top < scrollTop + buffer || bottom > scrollTop + rootHeight - buffer) {\n            if (attemptScroll) {\n              activeNode.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" })\n            }\n          }\n        }\n      } else {\n        const rootWidth = root.clientWidth\n        let targetWidth = Math.floor(activeNode.clientWidth)\n        const targetOffset = activeNode.offsetLeft\n\n        // Detect if the thumb is moving too far to the edge of the container.\n        // This would most commonly be due to subpixel widths adding up to excessive distance.\n        if (rootWidth - (targetWidth + targetOffset) < 2) {\n          targetWidth = targetWidth - 1\n        }\n\n        thumb.style.width = `${Math.floor(targetWidth)}px`\n        thumb.style.height = \"\"\n        thumb.style.transform = `translateX(${targetOffset}px)`\n\n        // If the control is scrollable, ensure the active option is visible\n        if (root.scrollWidth > rootWidth) {\n          // Only scroll items near the edge, but not the inner 2/3.\n          const buffer = rootWidth * 0.15\n          const scrollLeft = root.scrollLeft\n          const left = activeNode.offsetLeft\n          const right = left + targetWidth\n          if (left < scrollLeft + buffer || right > scrollLeft + rootWidth - buffer) {\n            // Cheap trick to avoid unintentional scroll on mount - transition is set after mounting\n            if (attemptScroll) {\n              activeNode.scrollIntoView({ block: \"nearest\", inline: \"center\", behavior: \"smooth\" })\n            }\n          }\n        }\n      }\n    },\n    [isVertical],\n  )\n\n  useResizeObserver({\n    // @ts-expect-error(2322) -- bug in types: https://github.com/juliencrn/usehooks-ts/issues/663\n    ref: rootRef,\n    onResize: () => {\n      const thumb = thumbRef.current\n\n      if (!thumb) {\n        return\n      }\n\n      // Perform the size update instantly\n      const currentTransition = thumb.style.transition\n      thumb.style.transition = \"\"\n      applyThumbSizing(false)\n      thumb.style.transition = currentTransition\n    },\n  })\n\n  const transitionProperty = isVertical\n    ? \"height 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)\"\n    : \"width 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)\"\n\n  useLayoutEffect(() => {\n    const root = rootRef.current\n    const thumb = thumbRef.current\n\n    if (!root || !thumb) {\n      return\n    }\n\n    const sizeChanged = prevSizeRef.current !== size\n    prevSizeRef.current = size\n\n    if (sizeChanged) {\n      // Size changed - disable transition, wait for CSS, then apply sizing\n      const currentTransition = thumb.style.transition\n      thumb.style.transition = \"\"\n\n      waitForAnimationFrame(() => {\n        applyThumbSizing(false)\n        waitForAnimationFrame(() => {\n          thumb.style.transition = currentTransition\n        })\n      })\n    } else {\n      // Normal update (value change, etc.)\n      waitForAnimationFrame(() => {\n        applyThumbSizing(!!thumb.style.transition)\n\n        // Apply transition after initial calculation is set\n        if (!thumb.style.transition) {\n          waitForAnimationFrame(() => {\n            thumb.style.transition = transitionProperty\n          })\n        }\n      })\n    }\n  }, [applyThumbSizing, value, size, gutterSize, pill, transitionProperty])\n\n  const handleValueChange = (nextValue: T) => {\n    // Only trigger onChange when a value exists\n    // Disallow toggling off enabled items\n    if (nextValue && onChange) onChange(nextValue)\n  }\n\n  // Only apply pill for segmented variant\n  const isPill = variant === \"segmented\" && pill\n\n  return (\n    <ToggleGroup.Root\n      ref={rootRef}\n      className={clsx(s.Tabs, className)}\n      type=\"single\"\n      value={value}\n      loop={false}\n      onValueChange={handleValueChange}\n      onClick={onClick}\n      data-variant={variant}\n      data-orientation={orientation}\n      data-block={block ? \"\" : undefined}\n      data-pill={isPill ? \"\" : undefined}\n      data-size={size}\n      data-gutter-size={gutterSize}\n      {...restProps}\n    >\n      <div className={s.TabsThumb} ref={thumbRef} />\n      {children}\n    </ToggleGroup.Root>\n  )\n}\n\n/**\n * Badge configuration for Tabs.Tab\n */\nexport type TabsBadgeProp =\n  | React.ReactNode\n  | {\n      content: React.ReactNode\n      color?: SemanticColors<\n        \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"discovery\" | \"caution\"\n      >\n      variant?: Variants<\"soft\" | \"solid\">\n      pill?: boolean\n      loading?: boolean\n    }\n\nexport type TabProps = {\n  /**\n   * Tab value\n   */\n  \"value\": string\n  /**\n   * Text read aloud to screen readers when the tab is focused\n   */\n  \"aria-label\"?: string\n  /**\n   * Text content to render in the tab\n   */\n  \"children\"?: React.ReactNode\n  /**\n   * Icon to render before the text content\n   */\n  \"icon\"?: React.ReactNode\n  /**\n   * Badge to render after the text content.\n   * Can be a simple value or an object with content, color, variant, and loading options.\n   * @example badge={5}\n   * @example badge={{ content: 5, color: \"danger\" }}\n   */\n  \"badge\"?: TabsBadgeProp\n  /**\n   * Disable the individual tab\n   */\n  \"disabled\"?: boolean\n}\n\n// Type guard for badge object form\nconst isBadgeObject = (\n  badge: TabsBadgeProp,\n): badge is Exclude<TabsBadgeProp, React.ReactNode> & { content: React.ReactNode } => {\n  return badge != null && typeof badge === \"object\" && \"content\" in badge\n}\n\nconst Tab = ({ children, icon, badge, ...restProps }: TabProps) => {\n  // Normalize badge prop\n  const badgeProps = badge != null ? (isBadgeObject(badge) ? badge : { content: badge }) : null\n\n  return (\n    <ToggleGroup.Item\n      className={s.Tab}\n      {...restProps}\n      onPointerEnter={handlePressableMouseEnter}\n    >\n      <span className={s.TabContent}>\n        {icon}\n        {children && <span>{children}</span>}\n        {badgeProps && (\n          <span\n            className={s.TabBadge}\n            data-color={badgeProps.color ?? \"secondary\"}\n            data-variant={badgeProps.variant ?? \"soft\"}\n            data-pill={badgeProps.pill ? \"\" : undefined}\n          >\n            {badgeProps.loading ? <LoadingIndicator /> : badgeProps.content}\n          </span>\n        )}\n      </span>\n    </ToggleGroup.Item>\n  )\n}\n\n// Attach sub-components\nTabs.Tab = Tab\n// Backward-compat alias\nTabs.Option = Tab\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { ToggleGroup } from \"radix-ui\"\nimport { useCallback, useLayoutEffect, useRef } from \"react\"\nimport { useResizeObserver } from \"usehooks-ts\"\nimport { handlePressableMouseEnter, waitForAnimationFrame } from \"../../lib/helpers\"\nimport { type ControlSize, type SemanticColors, type Sizes, type Variants } from \"../../types\"\nimport { LoadingIndicator } from \"../Indicator\"\nimport s from \"./Tabs.module.css\"\n\nexport type SizeVariant = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport type TabsVariant = \"segmented\" | \"underline\"\nexport type TabsOrientation = \"horizontal\" | \"vertical\"\n\nexport type TabsProps<T extends string> = {\n  /**\n   * Controlled value for the group\n   */\n  \"value\": T\n  /** Callback for when a new value is selected */\n  \"onChange\"?: (nextValue: T) => void\n  /** Callback any time the control is clicked (even if a new value was not selected) */\n  \"onClick\"?: () => void\n  /**\n   * Text read aloud to screen readers when the control is focused\n   */\n  \"aria-label\": string\n  /**\n   * Visual variant of the tab group\n   * - `\"segmented\"` — background container with sliding highlight (default)\n   * - `\"underline\"` — no background, animated line indicator under active tab\n   * @default \"segmented\"\n   */\n  \"variant\"?: TabsVariant\n  /**\n   * Orientation of the tab layout\n   * @default \"horizontal\"\n   */\n  \"orientation\"?: TabsOrientation\n  /**\n   * Controls the size of the tabs\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   *\n   * @default md\n   */\n  \"size\"?: ControlSize\n  /**\n   * Controls gutter on the edges of the button, defaults to value from `size`.\n   *\n   * | 2xs    | xs     | sm     | md     | lg     | xl     |\n   * | ------ | ------ | ------ | ------ | ------ | ------ |\n   * | `6px`  | `8px`  | `10px` | `12px` | `14px` | `16px` |\n   */\n  \"gutterSize\"?: Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">\n  /** Disable the entire group */\n  \"disabled\"?: boolean\n  /**\n   * Display the control as a block element with equal width segments\n   * @default false\n   */\n  \"block\"?: boolean\n  /**\n   * Determines if the tabs should be a fully rounded pill shape.\n   * Only applies to the `\"segmented\"` variant.\n   * @default true\n   */\n  \"pill\"?: boolean\n  /**\n   * Flush underline style — removes tab padding so the indicator\n   * matches the text width exactly, uses gap for spacing, and\n   * removes the bottom border.\n   * Only applies to the `\"underline\"` variant.\n   * @default false\n   */\n  \"flush\"?: boolean\n  \"className\"?: string\n  \"children\": React.ReactNode\n}\n\nexport const Tabs = <T extends string>({\n  value,\n  onChange,\n  children,\n  variant = \"segmented\",\n  orientation = \"horizontal\",\n  block,\n  pill = true,\n  flush,\n  size = \"md\",\n  gutterSize,\n  className,\n  onClick,\n  ...restProps\n}: TabsProps<T>) => {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const thumbRef = useRef<HTMLDivElement>(null)\n  const prevSizeRef = useRef(size)\n  const isVertical = orientation === \"vertical\"\n\n  const applyThumbSizing = useCallback(\n    (attemptScroll: boolean) => {\n      const root = rootRef.current\n      const thumb = thumbRef.current\n\n      if (!root || !thumb) {\n        return\n      }\n\n      // Get selected node\n      const activeNode = root?.querySelector<HTMLDivElement>('[data-state=\"on\"]')\n\n      // Impossible\n      if (!activeNode) {\n        return\n      }\n\n      if (isVertical) {\n        const rootHeight = root.clientHeight\n        let targetHeight = Math.floor(activeNode.clientHeight)\n        const targetOffset = activeNode.offsetTop\n\n        // Detect subpixel edge case\n        if (rootHeight - (targetHeight + targetOffset) < 2) {\n          targetHeight = targetHeight - 1\n        }\n\n        thumb.style.height = `${Math.floor(targetHeight)}px`\n        thumb.style.width = \"\"\n        thumb.style.transform = `translateY(${targetOffset}px)`\n\n        // Scroll into view if needed\n        if (root.scrollHeight > rootHeight) {\n          const buffer = rootHeight * 0.15\n          const scrollTop = root.scrollTop\n          const top = activeNode.offsetTop\n          const bottom = top + targetHeight\n          if (top < scrollTop + buffer || bottom > scrollTop + rootHeight - buffer) {\n            if (attemptScroll) {\n              activeNode.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" })\n            }\n          }\n        }\n      } else {\n        const rootWidth = root.clientWidth\n        let targetWidth = Math.floor(activeNode.clientWidth)\n        const targetOffset = activeNode.offsetLeft\n\n        // Detect if the thumb is moving too far to the edge of the container.\n        // This would most commonly be due to subpixel widths adding up to excessive distance.\n        if (rootWidth - (targetWidth + targetOffset) < 2) {\n          targetWidth = targetWidth - 1\n        }\n\n        thumb.style.width = `${Math.floor(targetWidth)}px`\n        thumb.style.height = \"\"\n        thumb.style.transform = `translateX(${targetOffset}px)`\n\n        // If the control is scrollable, ensure the active option is visible\n        if (root.scrollWidth > rootWidth) {\n          // Only scroll items near the edge, but not the inner 2/3.\n          const buffer = rootWidth * 0.15\n          const scrollLeft = root.scrollLeft\n          const left = activeNode.offsetLeft\n          const right = left + targetWidth\n          if (left < scrollLeft + buffer || right > scrollLeft + rootWidth - buffer) {\n            // Cheap trick to avoid unintentional scroll on mount - transition is set after mounting\n            if (attemptScroll) {\n              activeNode.scrollIntoView({ block: \"nearest\", inline: \"center\", behavior: \"smooth\" })\n            }\n          }\n        }\n      }\n    },\n    [isVertical],\n  )\n\n  useResizeObserver({\n    // @ts-expect-error(2322) -- bug in types: https://github.com/juliencrn/usehooks-ts/issues/663\n    ref: rootRef,\n    onResize: () => {\n      const thumb = thumbRef.current\n\n      if (!thumb) {\n        return\n      }\n\n      // Perform the size update instantly\n      const currentTransition = thumb.style.transition\n      thumb.style.transition = \"\"\n      applyThumbSizing(false)\n      thumb.style.transition = currentTransition\n    },\n  })\n\n  const transitionProperty = isVertical\n    ? \"height 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)\"\n    : \"width 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)\"\n\n  useLayoutEffect(() => {\n    const root = rootRef.current\n    const thumb = thumbRef.current\n\n    if (!root || !thumb) {\n      return\n    }\n\n    const sizeChanged = prevSizeRef.current !== size\n    prevSizeRef.current = size\n\n    if (sizeChanged) {\n      // Size changed - disable transition, wait for CSS, then apply sizing\n      const currentTransition = thumb.style.transition\n      thumb.style.transition = \"\"\n\n      waitForAnimationFrame(() => {\n        applyThumbSizing(false)\n        waitForAnimationFrame(() => {\n          thumb.style.transition = currentTransition\n        })\n      })\n    } else {\n      // Normal update (value change, etc.)\n      waitForAnimationFrame(() => {\n        applyThumbSizing(!!thumb.style.transition)\n\n        // Apply transition after initial calculation is set\n        if (!thumb.style.transition) {\n          waitForAnimationFrame(() => {\n            thumb.style.transition = transitionProperty\n          })\n        }\n      })\n    }\n  }, [applyThumbSizing, value, size, gutterSize, pill, flush, transitionProperty])\n\n  const handleValueChange = (nextValue: T) => {\n    // Only trigger onChange when a value exists\n    // Disallow toggling off enabled items\n    if (nextValue && onChange) onChange(nextValue)\n  }\n\n  // Only apply pill for segmented variant\n  const isPill = variant === \"segmented\" && pill\n  // Only apply flush for underline variant\n  const isFlush = variant === \"underline\" && flush\n\n  return (\n    <ToggleGroup.Root\n      ref={rootRef}\n      className={clsx(s.Tabs, className)}\n      type=\"single\"\n      value={value}\n      loop={false}\n      onValueChange={handleValueChange}\n      onClick={onClick}\n      data-variant={variant}\n      data-orientation={orientation}\n      data-block={block ? \"\" : undefined}\n      data-pill={isPill ? \"\" : undefined}\n      data-flush={isFlush ? \"\" : undefined}\n      data-size={size}\n      data-gutter-size={gutterSize}\n      {...restProps}\n    >\n      <div className={s.TabsThumb} ref={thumbRef} />\n      {children}\n    </ToggleGroup.Root>\n  )\n}\n\n/**\n * Badge configuration for Tabs.Tab\n */\nexport type TabsBadgeProp =\n  | React.ReactNode\n  | {\n      content: React.ReactNode\n      color?: SemanticColors<\n        \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"discovery\" | \"caution\"\n      >\n      variant?: Variants<\"soft\" | \"solid\">\n      pill?: boolean\n      loading?: boolean\n    }\n\nexport type TabProps = {\n  /**\n   * Tab value\n   */\n  \"value\": string\n  /**\n   * Text read aloud to screen readers when the tab is focused\n   */\n  \"aria-label\"?: string\n  /**\n   * Text content to render in the tab\n   */\n  \"children\"?: React.ReactNode\n  /**\n   * Icon to render before the text content\n   */\n  \"icon\"?: React.ReactNode\n  /**\n   * Badge to render after the text content.\n   * Can be a simple value or an object with content, color, variant, and loading options.\n   * @example badge={5}\n   * @example badge={{ content: 5, color: \"danger\" }}\n   */\n  \"badge\"?: TabsBadgeProp\n  /**\n   * Disable the individual tab\n   */\n  \"disabled\"?: boolean\n}\n\n// Type guard for badge object form\nconst isBadgeObject = (\n  badge: TabsBadgeProp,\n): badge is Exclude<TabsBadgeProp, React.ReactNode> & { content: React.ReactNode } => {\n  return badge != null && typeof badge === \"object\" && \"content\" in badge\n}\n\nconst Tab = ({ children, icon, badge, ...restProps }: TabProps) => {\n  // Normalize badge prop\n  const badgeProps = badge != null ? (isBadgeObject(badge) ? badge : { content: badge }) : null\n\n  return (\n    <ToggleGroup.Item\n      className={s.Tab}\n      {...restProps}\n      onPointerEnter={handlePressableMouseEnter}\n    >\n      <span className={s.TabContent}>\n        {icon}\n        {children && <span>{children}</span>}\n        {badgeProps && (\n          <span\n            className={s.TabBadge}\n            data-color={badgeProps.color ?? \"secondary\"}\n            data-variant={badgeProps.variant ?? \"soft\"}\n            data-pill={badgeProps.pill ? \"\" : undefined}\n          >\n            {badgeProps.loading ? <LoadingIndicator /> : badgeProps.content}\n          </span>\n        )}\n      </span>\n    </ToggleGroup.Item>\n  )\n}\n\n// Attach sub-components\nTabs.Tab = Tab\n// Backward-compat alias\nTabs.Option = Tab\n"]}

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

@@ -72,6 +72,18 @@
     white-space: normal;
   }
 
+  /* =============================================
+    Variant: Underline flush
+  ============================================= */
+  .Tabs:where([data-variant="underline"][data-flush]) {
+    gap: var(--segmented-control-option-gutter);
+    border-bottom: none;
+  }
+
+  .Tabs:where([data-variant="underline"][data-flush][data-block]) {
+    gap: 0;
+  }
+
   /* =============================================
     Vertical orientation
   ============================================= */
@@ -398,6 +410,11 @@
       outline-offset: -2px;
     }
 
+  /* Flush underline variant — Tab styles */
+  :where(.Tabs[data-variant="underline"][data-flush]) .Tab {
+    padding: 0;
+  }
+
   /* =============================================
     Vertical orientation — Tab styles
   ============================================= */
@@ -479,6 +496,18 @@
     border-radius: 0 calc(var(--tabs-underline-indicator-height) / 2) calc(var(--tabs-underline-indicator-height) / 2) 0;
     background: var(--tabs-underline-indicator-color);
     box-shadow: none;
+  }
+
+  /* Flush underline horizontal: 1px line, no radius */
+  :where(.Tabs[data-variant="underline"][data-flush][data-orientation="horizontal"]) .TabsThumb {
+    height: 1px;
+    border-radius: 0;
+  }
+
+  /* Flush underline vertical: 1px line, no radius */
+  :where(.Tabs[data-variant="underline"][data-flush][data-orientation="vertical"]) .TabsThumb {
+    width: 1px;
+    border-radius: 0;
   }/* =============================================
   Tab Content (icon + text + badge layout)
 ============================================= */.TabContent {

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/Tabs/Tabs.d.ts

@@ -58,11 +58,19 @@ export type TabsProps<T extends string> = {
      * @default true
      */
     "pill"?: boolean;
+    /**
+     * Flush underline style — removes tab padding so the indicator
+     * matches the text width exactly, uses gap for spacing, and
+     * removes the bottom border.
+     * Only applies to the `"underline"` variant.
+     * @default false
+     */
+    "flush"?: boolean;
     "className"?: string;
     "children": React.ReactNode;
 };
 export declare const Tabs: {
-    <T extends string>({ value, onChange, children, variant, orientation, block, pill, size, gutterSize, className, onClick, ...restProps }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string>({ value, onChange, children, variant, orientation, block, pill, flush, size, gutterSize, className, onClick, ...restProps }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
     Tab: ({ children, icon, badge, ...restProps }: TabProps) => import("react/jsx-runtime").JSX.Element;
     Option: ({ children, icon, badge, ...restProps }: TabProps) => import("react/jsx-runtime").JSX.Element;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.4.1",
+  "version": "0.6.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"