@plexui/ui 0.13.1 → 0.14.0

package/dist/es/components/ButtonGroup/ButtonGroup.js

@@ -1,11 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
+import { Slot } from "radix-ui";
 import {} from "react";
 import { Separator } from "../Separator";
 import s from "./ButtonGroup.module.css";
 const ButtonGroupRoot = ({ orientation = "horizontal", className, ref, ...restProps }) => (_jsx("div", { ref: ref, role: "group", "data-slot": "button-group", "data-orientation": orientation, className: clsx(s.Root, className), ...restProps }));
 const ButtonGroupSeparator = ({ className, orientation, ...restProps }) => (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation ?? "vertical", className: clsx(s.Separator, className), ...restProps }));
+const ButtonGroupText = ({ asChild = false, className, ref, ...restProps }) => {
+    const Comp = asChild ? Slot.Root : "div";
+    return (_jsx(Comp, { ref: ref, "data-slot": "button-group-text", className: clsx(s.Text, className), ...restProps }));
+};
 export const ButtonGroup = ButtonGroupRoot;
 ButtonGroup.Separator = ButtonGroupSeparator;
+ButtonGroup.Text = ButtonGroupText;
 //# sourceMappingURL=ButtonGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAsD,MAAM,OAAO,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,CAAC,MAAM,0BAA0B,CAAA;AAkBxC,MAAM,eAAe,GAAG,CAAC,EACvB,WAAW,GAAG,YAAY,EAC1B,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACK,EAAE,EAAE,CAAC,CACtB,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,eACF,cAAc,sBACN,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,GACb,CACH,CAAA;AAiBD,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACc,EAAE,EAAE,CAAC,CAC/B,KAAC,SAAS,iBACE,wBAAwB,EAClC,WAAW,EAAE,WAAW,IAAI,UAAU,EACtC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,KACnC,SAAS,GACb,CACH,CAAA;AAUD,MAAM,CAAC,MAAM,WAAW,GAAG,eAAuC,CAAA;AAClE,WAAW,CAAC,SAAS,GAAG,oBAAoB,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps, type HTMLAttributes, type Ref } from \"react\"\nimport { Separator } from \"../Separator\"\nimport s from \"./ButtonGroup.module.css\"\n\n/* ------------------------------------------------------------------ */\n/*  Root                                                               */\n/* ------------------------------------------------------------------ */\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\"\n\nexport type ButtonGroupProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Direction of the joined buttons.\n   * @default \"horizontal\"\n   */\n  orientation?: ButtonGroupOrientation\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nconst ButtonGroupRoot = ({\n  orientation = \"horizontal\",\n  className,\n  ref,\n  ...restProps\n}: ButtonGroupProps) => (\n  <div\n    ref={ref}\n    role=\"group\"\n    data-slot=\"button-group\"\n    data-orientation={orientation}\n    className={clsx(s.Root, className)}\n    {...restProps}\n  />\n)\n\n/* ------------------------------------------------------------------ */\n/*  Separator — thin divider between items                             */\n/* ------------------------------------------------------------------ */\n\nexport type ButtonGroupSeparatorProps = Omit<\n  ComponentProps<typeof Separator>,\n  \"orientation\"\n> & {\n  /**\n   * When omitted, flips to match the surrounding ButtonGroup axis.\n   * Pass explicitly to override (rare).\n   */\n  orientation?: ButtonGroupOrientation\n}\n\nconst ButtonGroupSeparator = ({\n  className,\n  orientation,\n  ...restProps\n}: ButtonGroupSeparatorProps) => (\n  <Separator\n    data-slot=\"button-group-separator\"\n    orientation={orientation ?? \"vertical\"}\n    className={clsx(s.Separator, className)}\n    {...restProps}\n  />\n)\n\n/* ------------------------------------------------------------------ */\n/*  Export — compound API                                              */\n/* ------------------------------------------------------------------ */\n\ntype ButtonGroupComponent = typeof ButtonGroupRoot & {\n  Separator: typeof ButtonGroupSeparator\n}\n\nexport const ButtonGroup = ButtonGroupRoot as ButtonGroupComponent\nButtonGroup.Separator = ButtonGroupSeparator\n"]}
+{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAC/B,OAAO,EAAsD,MAAM,OAAO,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,CAAC,MAAM,0BAA0B,CAAA;AAkBxC,MAAM,eAAe,GAAG,CAAC,EACvB,WAAW,GAAG,YAAY,EAC1B,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACK,EAAE,EAAE,CAAC,CACtB,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,eACF,cAAc,sBACN,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,GACb,CACH,CAAA;AAiBD,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACc,EAAE,EAAE,CAAC,CAC/B,KAAC,SAAS,iBACE,wBAAwB,EAClC,WAAW,EAAE,WAAW,IAAI,UAAU,EACtC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,KACnC,SAAS,GACb,CACH,CAAA;AAiBD,MAAM,eAAe,GAAG,CAAC,EACvB,OAAO,GAAG,KAAK,EACf,SAAS,EACT,GAAG,EACH,GAAG,SAAS,EACS,EAAE,EAAE;IACzB,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IACxC,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE,GAAG,eACE,mBAAmB,EAC7B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,GACb,CACH,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,CAAC,MAAM,WAAW,GAAG,eAAuC,CAAA;AAClE,WAAW,CAAC,SAAS,GAAG,oBAAoB,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG,eAAe,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Slot } from \"radix-ui\"\nimport { type ComponentProps, type HTMLAttributes, type Ref } from \"react\"\nimport { Separator } from \"../Separator\"\nimport s from \"./ButtonGroup.module.css\"\n\n/* ------------------------------------------------------------------ */\n/*  Root                                                               */\n/* ------------------------------------------------------------------ */\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\"\n\nexport type ButtonGroupProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Direction of the joined buttons.\n   * @default \"horizontal\"\n   */\n  orientation?: ButtonGroupOrientation\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nconst ButtonGroupRoot = ({\n  orientation = \"horizontal\",\n  className,\n  ref,\n  ...restProps\n}: ButtonGroupProps) => (\n  <div\n    ref={ref}\n    role=\"group\"\n    data-slot=\"button-group\"\n    data-orientation={orientation}\n    className={clsx(s.Root, className)}\n    {...restProps}\n  />\n)\n\n/* ------------------------------------------------------------------ */\n/*  Separator — thin divider between items                             */\n/* ------------------------------------------------------------------ */\n\nexport type ButtonGroupSeparatorProps = Omit<\n  ComponentProps<typeof Separator>,\n  \"orientation\"\n> & {\n  /**\n   * When omitted, flips to match the surrounding ButtonGroup axis.\n   * Pass explicitly to override (rare).\n   */\n  orientation?: ButtonGroupOrientation\n}\n\nconst ButtonGroupSeparator = ({\n  className,\n  orientation,\n  ...restProps\n}: ButtonGroupSeparatorProps) => (\n  <Separator\n    data-slot=\"button-group-separator\"\n    orientation={orientation ?? \"vertical\"}\n    className={clsx(s.Separator, className)}\n    {...restProps}\n  />\n)\n\n/* ------------------------------------------------------------------ */\n/*  Text — muted label/pill sharing the group's joined geometry        */\n/* ------------------------------------------------------------------ */\n\nexport type ButtonGroupTextProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Swap the rendered element for a child (label, span, etc.) while\n   * keeping the group's visual treatment.\n   * @default false\n   */\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nconst ButtonGroupText = ({\n  asChild = false,\n  className,\n  ref,\n  ...restProps\n}: ButtonGroupTextProps) => {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button-group-text\"\n      className={clsx(s.Text, className)}\n      {...restProps}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  Export — compound API                                              */\n/* ------------------------------------------------------------------ */\n\ntype ButtonGroupComponent = typeof ButtonGroupRoot & {\n  Separator: typeof ButtonGroupSeparator\n  Text: typeof ButtonGroupText\n}\n\nexport const ButtonGroup = ButtonGroupRoot as ButtonGroupComponent\nButtonGroup.Separator = ButtonGroupSeparator\nButtonGroup.Text = ButtonGroupText\n"]}

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

@@ -4,7 +4,10 @@
   width: -moz-fit-content;
   width: fit-content;
 
-  /* Inputs inside a ButtonGroup share the row and flex to fill space */
+  /* Inputs inside a ButtonGroup share the row and flex to fill space —
+     the rule targets raw <input>, the Plex Input Container (data-slot),
+     and a nested sub-ButtonGroup that wraps an Input (e.g. Input Group
+     pattern: [leading action] [Input + inline addon]). */
 }
 
   /* Let focused item sit on top of neighbors so the ring isn't clipped */
@@ -28,16 +31,40 @@
      every non-first child, so the inset shadow of item N+1 doesn't sit
      next to the inset shadow of item N (which would read as a doubled
      2px line). Focus ring lives on ::after, so clip-path on ::before
-     leaves the focus ring intact. */
-  .Root[data-orientation="horizontal"] > *:not(:first-child) {
+     leaves the focus ring intact.
+
+     Separators are excluded — they need to render visibly BETWEEN items,
+     not be overlapped into oblivion. Adjacent items to a separator keep
+     their edge radii stripped, but skip the -1px/-clip trickery. */
+  .Root[data-orientation="horizontal"] > *:not(:first-child):not([data-slot="button-group-separator"]) {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
+  }
+  .Root[data-orientation="horizontal"]
+    > *:not(:first-child):not([data-slot="button-group-separator"]):not(
+      [data-slot="button-group-separator"] + *
+    ) {
     margin-inline-start: -1px;
   }
-  .Root[data-orientation="horizontal"] > *:not(:first-child)::before {
+  .Root[data-orientation="horizontal"]
+    > *:not(:first-child):not([data-slot="button-group-separator"]):not(
+      [data-slot="button-group-separator"] + *
+    )::before {
     clip-path: inset(0 0 0 1px);
   }
-  .Root[data-orientation="horizontal"] > *:not(:last-child) {
+  .Root[data-orientation="horizontal"]
+    > *:not(:last-child):not([data-slot="button-group-separator"]):not(
+      :has(+ [data-slot="button-group-separator"])
+    ) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  /* Strip the edge radius on items sitting directly next to a separator */
+  .Root[data-orientation="horizontal"] > [data-slot="button-group-separator"] + * {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .Root[data-orientation="horizontal"] > *:has(+ [data-slot="button-group-separator"]) {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
@@ -46,28 +73,87 @@
   .Root[data-orientation="vertical"] {
     flex-direction: column;
   }
-  .Root[data-orientation="vertical"] > *:not(:first-child) {
+  .Root[data-orientation="vertical"] > *:not(:first-child):not([data-slot="button-group-separator"]) {
     border-start-start-radius: 0;
     border-start-end-radius: 0;
+  }
+  .Root[data-orientation="vertical"]
+    > *:not(:first-child):not([data-slot="button-group-separator"]):not(
+      [data-slot="button-group-separator"] + *
+    ) {
     margin-block-start: -1px;
   }
-  .Root[data-orientation="vertical"] > *:not(:first-child)::before {
+  .Root[data-orientation="vertical"]
+    > *:not(:first-child):not([data-slot="button-group-separator"]):not(
+      [data-slot="button-group-separator"] + *
+    )::before {
     clip-path: inset(1px 0 0 0);
   }
-  .Root[data-orientation="vertical"] > *:not(:last-child) {
+  .Root[data-orientation="vertical"]
+    > *:not(:last-child):not([data-slot="button-group-separator"]):not(
+      :has(+ [data-slot="button-group-separator"])
+    ) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .Root[data-orientation="vertical"] > [data-slot="button-group-separator"] + * {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  .Root[data-orientation="vertical"] > *:has(+ [data-slot="button-group-separator"]) {
     border-end-start-radius: 0;
     border-end-end-radius: 0;
   }
   .Root > input,
-  .Root > [data-slot="input-wrapper"] {
+  .Root > [data-slot="input"],
+  .Root > [data-slot="button-group"]:has(> [data-slot="input"]) {
     flex: 1 1 auto;
-  }/* Separator used between items inside a ButtonGroup */.Separator {
+  }/* Text — a muted label pill that slots into a ButtonGroup alongside
+   Buttons. Uses an inset box-shadow border (same trick Button uses for
+   variant="outline") so the group's edge-clipping rules (::before
+   clip-path) also work here and collapse the doubled 1px edge. */.Text {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding-inline: var(--spacing-4);
+  align-self: stretch;
+  background: var(--button-group-text-background);
+  color: var(--button-group-text-color);
+  font-size: var(--button-group-text-font-size);
+  font-weight: var(--button-group-text-font-weight);
+  font-family: var(--font-family-text);
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: var(--radius-md);
+}
+
+  .Text::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: 0 0 0 1px var(--button-group-text-border-color) inset;
+    pointer-events: none;
+  }
+
+  .Text svg {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }/* Separator used between items inside a ButtonGroup.
+   Sits above the neighbor buttons (z-index) so the 1px line isn't
+   visually swallowed by the adjacent box-shadow borders. Parent-scoped
+   selector beats the base Separator class so the stronger color wins. */.Root > .Separator {
+  position: relative;
+  z-index: 1;
   align-self: stretch;
   margin: 0;
   flex-shrink: 0;
+  background: var(--button-group-separator-color);
 }
 
-  .Separator[data-orientation="vertical"] {
+  .Root > .Separator[data-orientation="vertical"] {
     height: auto;
   }
 }

package/dist/es/components/Input/Input.js

@@ -6,7 +6,7 @@ import { mergeRefs } from "react-merge-refs";
 import {} from "../../types";
 import { X } from "../Icon";
 import s from "./Input.module.css";
-export const Input = (props) => {
+const InputRoot = (props) => {
     const inputRef = useRef(null);
     const inputIdSuffix = useId();
     // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching
@@ -81,7 +81,7 @@ export const Input = (props) => {
             onAutofill?.();
         }
     };
-    return (_jsxs("div", { className: clsx(s.Container, className), "data-variant": variant, "data-size": size, "data-gutter-size": gutterSize, "data-focused": focused, "data-disabled": disabled ? "" : undefined, "data-readonly": readOnly ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-pill": pill ? "" : undefined, "data-optically-align": opticallyAlign, "data-has-start-adornment": StartAdornment ? "" : undefined, "data-has-end-adornment": EndAdornment || showClearButton ? "" : undefined, onMouseDown: handleMouseDown, children: [StartAdornment, _jsx("input", { ...restProps, ref: mergeRefs([ref, inputRef]), id: id || (allowAutofillExtensions ? undefined : onePasswordPreventionId), className: s.Input, type: type, name: name, value: value, defaultValue: defaultValue, readOnly: readOnly, disabled: disabled, onFocus: (evt) => {
+    return (_jsxs("div", { className: clsx(s.Container, className), "data-slot": "input", "data-variant": variant, "data-size": size, "data-gutter-size": gutterSize, "data-focused": focused, "data-disabled": disabled ? "" : undefined, "data-readonly": readOnly ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-pill": pill ? "" : undefined, "data-optically-align": opticallyAlign, "data-has-start-adornment": StartAdornment ? "" : undefined, "data-has-end-adornment": EndAdornment || showClearButton ? "" : undefined, onMouseDown: handleMouseDown, children: [StartAdornment, _jsx("input", { ...restProps, ref: mergeRefs([ref, inputRef]), id: id || (allowAutofillExtensions ? undefined : onePasswordPreventionId), className: s.Input, type: type, name: name, value: value, defaultValue: defaultValue, readOnly: readOnly, disabled: disabled, onFocus: (evt) => {
                     setFocused(true);
                     onFocus?.(evt);
                 }, onBlur: (evt) => {
@@ -89,4 +89,7 @@ export const Input = (props) => {
                     onBlur?.(evt);
                 }, onAnimationStart: handleAnimationStart, "data-lpignore": allowAutofillExtensions ? undefined : true, "data-1p-ignore": allowAutofillExtensions ? undefined : true }), showClearButton && (_jsx("button", { type: "button", "aria-label": "Clear input", className: s.Clear, onClick: onClear, children: _jsx(X, {}) })), EndAdornment] }));
 };
+const InputAdornmentButton = ({ className, type = "button", color, ref, ...restProps }) => (_jsx("button", { ref: ref, type: type, className: clsx(s.AdornmentButton, className), "data-color": color, ...restProps }));
+export const Input = InputRoot;
+Input.AdornmentButton = InputAdornmentButton;
 //# sourceMappingURL=Input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { type ControlSize, type Sizes, type Variants } from \"../../types\"\nimport { X } from \"../Icon\"\nimport s from \"./Input.module.css\"\n\nexport type InputProps = {\n  /**\n   * Visual style of the input\n   * @default outline\n   */\n  variant?: Variants<\"outline\" | \"soft\">\n  /**\n   * Controls the size of the input\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 input, 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  /**\n   * Disables the select visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Mark the input as invalid\n   * @default false\n   */\n  invalid?: boolean\n  /**\n   * Allow autofill extensions to appear in the input\n   * @default false\n   */\n  allowAutofillExtensions?: boolean\n  /**\n   * Select all contents of the input when mounted.\n   * @default false\n   */\n  autoSelect?: boolean\n  /** Callback invoked when the input is autofilled by the browser */\n  onAutofill?: () => void\n  /** Content rendered at the start of the input */\n  startAdornment?: React.ReactNode\n  /** Content rendered at the end of the input */\n  endAdornment?: React.ReactNode\n  /**\n   * Callback invoked when the clear button is clicked.\n   * When provided, displays a clear button that appears when the input has a value.\n   */\n  onClear?: () => void\n  /**\n   * Determines if the button should be a fully rounded pill shape\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Applies a negative margin using the current gutter to optically align the input\n   * with surrounding content.\n   */\n  opticallyAlign?: \"start\" | \"end\"\n  /** Ref for the input */\n  ref?: React.Ref<HTMLInputElement | null>\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"disabled\" | \"size\">\n\nexport const Input = (props: InputProps) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const inputIdSuffix = useId()\n  // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n  // Allow user to override this for connecting to labels.\n  const onePasswordPreventionId = `search-ui-input-${inputIdSuffix}`\n  const {\n    id,\n    name,\n    type = \"text\",\n    variant = \"outline\",\n    size = \"md\",\n    gutterSize,\n    className,\n    autoComplete,\n    disabled = false,\n    readOnly = false,\n    invalid = false,\n    // Default to `true` when type=\"password\" or presence of `name`\n    allowAutofillExtensions = type === \"password\" || !!name,\n    onFocus,\n    onBlur,\n    onAnimationStart,\n    onAutofill,\n    autoSelect,\n    startAdornment: StartAdornment,\n    endAdornment: EndAdornment,\n    onClear,\n    pill,\n    opticallyAlign,\n    ref,\n    value,\n    defaultValue,\n    ...restProps\n  } = props\n\n  // Determine if clear button should be shown\n  const hasValue = value !== undefined ? !!value : !!defaultValue\n  const showClearButton = !!onClear && hasValue && !disabled && !readOnly\n  // Redirect clicks on the container and adornments\n  const handleMouseDown = (evt: React.MouseEvent<HTMLDivElement>) => {\n    const input = inputRef.current\n    // Bail out if the target is not an element or the textarea is not found\n    if (!evt.target || !(evt.target instanceof Element) || !input) {\n      return\n    }\n    // Bail out if the target is inside the textarea\n    if (input.contains(evt.target)) {\n      return\n    }\n    // Bail out if the target is a button\n    if (evt.target.closest(\"button, [type='button'], [role='button'], [role='menuitem']\")) {\n      return\n    }\n\n    evt.preventDefault()\n    // If the textarea is not focused, focus it\n    if (document.activeElement !== input) {\n      input.focus()\n    }\n\n    const { left, top } = input.getBoundingClientRect()\n    const { clientX, clientY } = evt\n    // \"Before\" the input: top/left\n    const isBefore = clientY < top || clientX < left\n\n    // If this is the first click, clear the selection.\n    if (evt.detail === 1) {\n      if (isBefore) {\n        input.setSelectionRange(0, 0)\n      } else {\n        const length = input.value.length\n        input.setSelectionRange(length, length)\n      }\n    }\n    // If this is the second click, select the first or last word\n    else if (evt.detail === 2) {\n      // Split the textarea value into words and non-word characters\n      const words = input.value.match(/\\w+|[^\\w\\s]/g) || []\n      const selectedWord = isBefore ? words.at(0) : words.at(-1)\n      if (selectedWord) {\n        const wordIndex = isBefore\n          ? input.value.indexOf(selectedWord)\n          : input.value.lastIndexOf(selectedWord)\n        input.setSelectionRange(wordIndex, wordIndex + selectedWord.length)\n      }\n    }\n    // If this is the third click or greater, select the entire input\n    else {\n      input.select()\n    }\n  }\n\n  const [focused, setFocused] = useState<boolean>(false)\n\n  useEffect(() => {\n    if (autoSelect) {\n      inputRef.current?.select()\n    }\n  }, [autoSelect])\n\n  const handleAnimationStart = (evt: React.AnimationEvent<HTMLInputElement>) => {\n    onAnimationStart?.(evt)\n    if (evt.animationName === \"native-autofill-in\") {\n      onAutofill?.()\n    }\n  }\n\n  return (\n    <div\n      className={clsx(s.Container, className)}\n      data-variant={variant}\n      data-size={size}\n      data-gutter-size={gutterSize}\n      data-focused={focused}\n      data-disabled={disabled ? \"\" : undefined}\n      data-readonly={readOnly ? \"\" : undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-pill={pill ? \"\" : undefined}\n      data-optically-align={opticallyAlign}\n      data-has-start-adornment={StartAdornment ? \"\" : undefined}\n      data-has-end-adornment={EndAdornment || showClearButton ? \"\" : undefined}\n      onMouseDown={handleMouseDown}\n    >\n      {StartAdornment}\n      <input\n        {...restProps}\n        ref={mergeRefs([ref, inputRef])}\n        id={id || (allowAutofillExtensions ? undefined : onePasswordPreventionId)}\n        className={s.Input}\n        type={type}\n        name={name}\n        value={value}\n        defaultValue={defaultValue}\n        readOnly={readOnly}\n        disabled={disabled}\n        onFocus={(evt) => {\n          setFocused(true)\n          onFocus?.(evt)\n        }}\n        onBlur={(evt) => {\n          setFocused(false)\n          onBlur?.(evt)\n        }}\n        onAnimationStart={handleAnimationStart}\n        // Prevent LastPass and 1Password from appearing\n        data-lpignore={allowAutofillExtensions ? undefined : true}\n        data-1p-ignore={allowAutofillExtensions ? undefined : true}\n      />\n      {showClearButton && (\n        <button type=\"button\" aria-label=\"Clear input\" className={s.Clear} onClick={onClear}>\n          <X />\n        </button>\n      )}\n      {EndAdornment}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { type ControlSize, type SemanticColor, type Sizes, type Variants } from \"../../types\"\nimport { X } from \"../Icon\"\nimport s from \"./Input.module.css\"\n\nexport type InputProps = {\n  /**\n   * Visual style of the input\n   * @default outline\n   */\n  variant?: Variants<\"outline\" | \"soft\">\n  /**\n   * Controls the size of the input\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 input, 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  /**\n   * Disables the select visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Mark the input as invalid\n   * @default false\n   */\n  invalid?: boolean\n  /**\n   * Allow autofill extensions to appear in the input\n   * @default false\n   */\n  allowAutofillExtensions?: boolean\n  /**\n   * Select all contents of the input when mounted.\n   * @default false\n   */\n  autoSelect?: boolean\n  /** Callback invoked when the input is autofilled by the browser */\n  onAutofill?: () => void\n  /** Content rendered at the start of the input */\n  startAdornment?: React.ReactNode\n  /** Content rendered at the end of the input */\n  endAdornment?: React.ReactNode\n  /**\n   * Callback invoked when the clear button is clicked.\n   * When provided, displays a clear button that appears when the input has a value.\n   */\n  onClear?: () => void\n  /**\n   * Determines if the button should be a fully rounded pill shape\n   * @default false\n   */\n  pill?: boolean\n  /**\n   * Applies a negative margin using the current gutter to optically align the input\n   * with surrounding content.\n   */\n  opticallyAlign?: \"start\" | \"end\"\n  /** Ref for the input */\n  ref?: React.Ref<HTMLInputElement | null>\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"disabled\" | \"size\">\n\nconst InputRoot = (props: InputProps) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const inputIdSuffix = useId()\n  // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n  // Allow user to override this for connecting to labels.\n  const onePasswordPreventionId = `search-ui-input-${inputIdSuffix}`\n  const {\n    id,\n    name,\n    type = \"text\",\n    variant = \"outline\",\n    size = \"md\",\n    gutterSize,\n    className,\n    autoComplete,\n    disabled = false,\n    readOnly = false,\n    invalid = false,\n    // Default to `true` when type=\"password\" or presence of `name`\n    allowAutofillExtensions = type === \"password\" || !!name,\n    onFocus,\n    onBlur,\n    onAnimationStart,\n    onAutofill,\n    autoSelect,\n    startAdornment: StartAdornment,\n    endAdornment: EndAdornment,\n    onClear,\n    pill,\n    opticallyAlign,\n    ref,\n    value,\n    defaultValue,\n    ...restProps\n  } = props\n\n  // Determine if clear button should be shown\n  const hasValue = value !== undefined ? !!value : !!defaultValue\n  const showClearButton = !!onClear && hasValue && !disabled && !readOnly\n  // Redirect clicks on the container and adornments\n  const handleMouseDown = (evt: React.MouseEvent<HTMLDivElement>) => {\n    const input = inputRef.current\n    // Bail out if the target is not an element or the textarea is not found\n    if (!evt.target || !(evt.target instanceof Element) || !input) {\n      return\n    }\n    // Bail out if the target is inside the textarea\n    if (input.contains(evt.target)) {\n      return\n    }\n    // Bail out if the target is a button\n    if (evt.target.closest(\"button, [type='button'], [role='button'], [role='menuitem']\")) {\n      return\n    }\n\n    evt.preventDefault()\n    // If the textarea is not focused, focus it\n    if (document.activeElement !== input) {\n      input.focus()\n    }\n\n    const { left, top } = input.getBoundingClientRect()\n    const { clientX, clientY } = evt\n    // \"Before\" the input: top/left\n    const isBefore = clientY < top || clientX < left\n\n    // If this is the first click, clear the selection.\n    if (evt.detail === 1) {\n      if (isBefore) {\n        input.setSelectionRange(0, 0)\n      } else {\n        const length = input.value.length\n        input.setSelectionRange(length, length)\n      }\n    }\n    // If this is the second click, select the first or last word\n    else if (evt.detail === 2) {\n      // Split the textarea value into words and non-word characters\n      const words = input.value.match(/\\w+|[^\\w\\s]/g) || []\n      const selectedWord = isBefore ? words.at(0) : words.at(-1)\n      if (selectedWord) {\n        const wordIndex = isBefore\n          ? input.value.indexOf(selectedWord)\n          : input.value.lastIndexOf(selectedWord)\n        input.setSelectionRange(wordIndex, wordIndex + selectedWord.length)\n      }\n    }\n    // If this is the third click or greater, select the entire input\n    else {\n      input.select()\n    }\n  }\n\n  const [focused, setFocused] = useState<boolean>(false)\n\n  useEffect(() => {\n    if (autoSelect) {\n      inputRef.current?.select()\n    }\n  }, [autoSelect])\n\n  const handleAnimationStart = (evt: React.AnimationEvent<HTMLInputElement>) => {\n    onAnimationStart?.(evt)\n    if (evt.animationName === \"native-autofill-in\") {\n      onAutofill?.()\n    }\n  }\n\n  return (\n    <div\n      className={clsx(s.Container, className)}\n      data-slot=\"input\"\n      data-variant={variant}\n      data-size={size}\n      data-gutter-size={gutterSize}\n      data-focused={focused}\n      data-disabled={disabled ? \"\" : undefined}\n      data-readonly={readOnly ? \"\" : undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-pill={pill ? \"\" : undefined}\n      data-optically-align={opticallyAlign}\n      data-has-start-adornment={StartAdornment ? \"\" : undefined}\n      data-has-end-adornment={EndAdornment || showClearButton ? \"\" : undefined}\n      onMouseDown={handleMouseDown}\n    >\n      {StartAdornment}\n      <input\n        {...restProps}\n        ref={mergeRefs([ref, inputRef])}\n        id={id || (allowAutofillExtensions ? undefined : onePasswordPreventionId)}\n        className={s.Input}\n        type={type}\n        name={name}\n        value={value}\n        defaultValue={defaultValue}\n        readOnly={readOnly}\n        disabled={disabled}\n        onFocus={(evt) => {\n          setFocused(true)\n          onFocus?.(evt)\n        }}\n        onBlur={(evt) => {\n          setFocused(false)\n          onBlur?.(evt)\n        }}\n        onAnimationStart={handleAnimationStart}\n        // Prevent LastPass and 1Password from appearing\n        data-lpignore={allowAutofillExtensions ? undefined : true}\n        data-1p-ignore={allowAutofillExtensions ? undefined : true}\n      />\n      {showClearButton && (\n        <button type=\"button\" aria-label=\"Clear input\" className={s.Clear} onClick={onClear}>\n          <X />\n        </button>\n      )}\n      {EndAdornment}\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  AdornmentButton — canonical inline action button for Input slots   */\n/*  (mic toggle, visibility toggle, copy, etc.). Sizes itself off the  */\n/*  parent Input via --input-clear-size / --input-clear-pill-offset    */\n/*  so it stays visually consistent with the built-in clear button.    */\n/* ------------------------------------------------------------------ */\n\nexport type InputAdornmentButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"ref\" | \"color\"\n> & {\n  ref?: React.Ref<HTMLButtonElement>\n  /**\n   * Applies a semantic color tint to the pressed (`aria-pressed=\"true\"`) state\n   * — the same palette Button accepts. Default `aria-pressed` keeps the\n   * neutral primary-soft tint.\n   */\n  color?: SemanticColor\n}\n\nconst InputAdornmentButton = ({\n  className,\n  type = \"button\",\n  color,\n  ref,\n  ...restProps\n}: InputAdornmentButtonProps) => (\n  <button\n    ref={ref}\n    type={type}\n    className={clsx(s.AdornmentButton, className)}\n    data-color={color}\n    {...restProps}\n  />\n)\n\ntype InputComponent = typeof InputRoot & {\n  AdornmentButton: typeof InputAdornmentButton\n}\n\nexport const Input = InputRoot as InputComponent\nInput.AdornmentButton = InputAdornmentButton\n"]}

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

@@ -234,11 +234,21 @@
 
   /* =============================================
     Disabled
+    ---------------------------------------------
+    Fade the input text and the built-in Clear button, but keep the
+    Container's chrome (border, focus ring) and any AdornmentButton
+    at full opacity — AdornmentButtons often double as toggles that
+    remain interactive while the input is disabled (voice-mode switch,
+    edit-in-place, etc.).
   ============================================= */
   .Container[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.5;
   }
+
+    .Container[data-disabled] > .Input,
+    .Container[data-disabled] > .Clear {
+      opacity: 0.5;
+    }
   /*
    * When adornments are present, gutter is applied to the container instead of the input.
    */
@@ -269,7 +279,7 @@
     margin-left: var(--input-adornment-offset, -2px);
   }
 
-  .Container > :last-child:not(input, .Clear) {
+  .Container > :last-child:not(input, .Clear, .AdornmentButton) {
     margin-right: var(--input-adornment-offset, -2px);
   }.Input {
   display: block;
@@ -410,6 +420,81 @@
   .Clear > svg {
     width: var(--input-clear-icon-size);
     height: var(--input-clear-icon-size);
+  }/* AdornmentButton — public sibling of .Clear for in-input action buttons
+   (mic toggle, copy, send, etc.). Sized from the Input's own size token:
+   input height minus one spacing step each side leaves ~4px of breathing
+   room top + bottom, so a md (32px) input gets a 24px pill, an lg (36px)
+   gets 28px, etc. Radius is --radius-full so a pill input stays
+   concentric with the button. Icon fills half the button. */.AdornmentButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: calc(var(--input-size) - calc(var(--spacing) * 2));
+  height: calc(var(--input-size) - calc(var(--spacing) * 2));
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  /* Concentric with the input edge — leave a spacing(1) = 4px breathing
+     gap between the button's outer edge and the input's inner edge.
+     For a non-pill input that's `4 - gutter`; a pill input scales the
+     gutter by --control-gutter-pill-scaling. */
+  margin-right: calc(calc(var(--spacing) * 1) - var(--input-gutter));
+  background-color: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: background-color, color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  .AdornmentButton:hover {
+    background-color: var(--color-background-secondary-soft-alpha);
+    color: var(--color-text);
+  }
+
+  .AdornmentButton[aria-pressed="true"] {
+    background-color: var(--color-background-primary-soft);
+    color: var(--color-text);
+  }
+
+  .AdornmentButton[data-color="caution"][aria-pressed="true"] {
+    background-color: var(--color-background-caution-soft);
+    color: var(--color-text-caution-soft);
+  }
+
+  .AdornmentButton[data-color="danger"][aria-pressed="true"] {
+    background-color: var(--color-background-danger-soft);
+    color: var(--color-text-danger-soft);
+  }
+
+  .AdornmentButton[data-color="success"][aria-pressed="true"] {
+    background-color: var(--color-background-success-soft);
+    color: var(--color-text-success-soft);
+  }
+
+  .AdornmentButton[data-color="info"][aria-pressed="true"] {
+    background-color: var(--color-background-info-soft);
+    color: var(--color-text-info-soft);
+  }
+
+  .AdornmentButton[data-color="discovery"][aria-pressed="true"] {
+    background-color: var(--color-background-discovery-soft);
+    color: var(--color-text-discovery-soft);
+  }
+
+  .AdornmentButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :where(.Container[data-pill]) .AdornmentButton {
+    margin-right: calc(calc(var(--spacing) * 1) - var(--input-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  .AdornmentButton > svg {
+    width: calc(var(--input-size) / 2);
+    height: calc(var(--input-size) / 2);
   }@keyframes native-autofill-in {
   0% {
     opacity: 1;

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

@@ -131,6 +131,12 @@
       ButtonGroup
     ============================================= */
     --button-group-nested-gap: calc(var(--spacing) * 2);
+    --button-group-separator-color: var(--color-border-strong, var(--color-border));
+    --button-group-text-background: var(--color-background-secondary-soft);
+    --button-group-text-color: var(--color-text-primary);
+    --button-group-text-border-color: var(--color-border-secondary-outline, var(--color-border));
+    --button-group-text-font-size: var(--font-text-sm-size);
+    --button-group-text-font-weight: var(--font-weight-medium);
 
     /* =============================================
       Accordion

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

@@ -19,8 +19,20 @@ export type ButtonGroupSeparatorProps = Omit<ComponentProps<typeof Separator>, "
     orientation?: ButtonGroupOrientation;
 };
 declare const ButtonGroupSeparator: ({ className, orientation, ...restProps }: ButtonGroupSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export type ButtonGroupTextProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Swap the rendered element for a child (label, span, etc.) while
+     * keeping the group's visual treatment.
+     * @default false
+     */
+    asChild?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+};
+declare const ButtonGroupText: ({ asChild, className, ref, ...restProps }: ButtonGroupTextProps) => import("react/jsx-runtime").JSX.Element;
 type ButtonGroupComponent = typeof ButtonGroupRoot & {
     Separator: typeof ButtonGroupSeparator;
+    Text: typeof ButtonGroupText;
 };
 export declare const ButtonGroup: ButtonGroupComponent;
 export {};

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

@@ -1,4 +1,4 @@
-import { type ControlSize, type Sizes, type Variants } from "../../types";
+import { type ControlSize, type SemanticColor, type Sizes, type Variants } from "../../types";
 export type InputProps = {
     /**
      * Visual style of the input
@@ -67,4 +67,19 @@ export type InputProps = {
     /** Ref for the input */
     ref?: React.Ref<HTMLInputElement | null>;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "size">;
-export declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const InputRoot: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
+export type InputAdornmentButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "ref" | "color"> & {
+    ref?: React.Ref<HTMLButtonElement>;
+    /**
+     * Applies a semantic color tint to the pressed (`aria-pressed="true"`) state
+     * — the same palette Button accepts. Default `aria-pressed` keeps the
+     * neutral primary-soft tint.
+     */
+    color?: SemanticColor;
+};
+declare const InputAdornmentButton: ({ className, type, color, ref, ...restProps }: InputAdornmentButtonProps) => import("react/jsx-runtime").JSX.Element;
+type InputComponent = typeof InputRoot & {
+    AdornmentButton: typeof InputAdornmentButton;
+};
+export declare const Input: InputComponent;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",
@@ -70,6 +70,9 @@
     "build:clean": "rm -rf dist",
     "build:js": "tsc -p tsconfig.build.json",
     "build:css": "node ./scripts/build-css.mjs",
+    "dev:js": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
+    "dev:css": "node ./scripts/build-css.mjs --watch",
+    "dev": "npm run build:clean && npm run build:js && npm run build:css && npm run build:assets && (npm run dev:js & npm run dev:css & wait)",
     "build:assets": "node -e \"const fs=require('fs'),p=require('path');function c(s,d){fs.readdirSync(s,{withFileTypes:true}).forEach(e=>{const sp=p.join(s,e.name),dp=p.join(d,e.name);if(e.isDirectory()){c(sp,dp)}else if(e.name.endsWith('.d.ts')){fs.mkdirSync(d,{recursive:true});fs.copyFileSync(sp,dp)}})}c('src','dist/types')\"",
     "build": "npm run build:clean && npm run build:js && npm run build:css && npm run build:assets",
     "prepublishOnly": "npm run build",