@nucleux/md3-button-group 0.0.0-stage → 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,39 @@
-# Temporary Holding Version
+# @nucleux/md3-button-group
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Material 3 button group — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+
+## Exports
+
+- **`Md3ButtonGroup`** — root (`variant="standard" | "connected"`, `size="xs" | "sm" | "md" | "lg" | "xl"`, `shape="round" | "square"`, `buttonVariant`, `selectionMode="none" | "single" | "multiple"`, `selectionRequired`, `value` / `defaultValue` / `onValueChange`)
+- **`Md3ButtonGroupItem`** — a button in the group (`value`, `variant`, `icon`); toggles with `aria-pressed` when the group is selectable
+- Types: `Md3ButtonGroupProps`, `Md3ButtonGroupItemProps`, `Md3ButtonGroupVariant`, `Md3ButtonGroupSize`, `Md3ButtonGroupShape`, `Md3ButtonGroupSelectionMode`, `Md3ButtonGroupItemVariant`
+
+## Install
+
+```bash
+pnpm add @nucleux/md3-button-group @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Md3ButtonGroup, Md3ButtonGroupItem } from "@nucleux/md3-button-group";
+
+<Md3ButtonGroup aria-label="Time range" variant="connected" selectionMode="single" defaultValue="week">
+  <Md3ButtonGroupItem value="day">Day</Md3ButtonGroupItem>
+  <Md3ButtonGroupItem value="week">Week</Md3ButtonGroupItem>
+  <Md3ButtonGroupItem value="month">Month</Md3ButtonGroupItem>
+</Md3ButtonGroup>
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,225 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var utils = require('@nucleux/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var ButtonGroupContext = React__namespace.createContext(null);
+var asArray = (v) => v === void 0 ? [] : Array.isArray(v) ? v : [v];
+var gaps = {
+  xs: "gap-[18px]",
+  sm: "gap-3",
+  md: "gap-2",
+  lg: "gap-2",
+  xl: "gap-2"
+};
+var Md3ButtonGroup = React__namespace.forwardRef(
+  ({
+    variant = "standard",
+    size = "sm",
+    shape = "round",
+    buttonVariant = "filled",
+    selectionMode = "none",
+    selectionRequired = false,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const multiple = selectionMode === "multiple";
+    const isControlled = value !== void 0;
+    const [internal, setInternal] = React__namespace.useState(asArray(defaultValue));
+    const current = isControlled ? asArray(value) : internal;
+    const toggle = (v) => {
+      let next;
+      if (multiple) next = current.includes(v) ? current.filter((x) => x !== v) : [...current, v];
+      else next = current[0] === v ? [] : [v];
+      if (selectionRequired && next.length === 0) return;
+      if (!isControlled) setInternal(next);
+      onValueChange?.(multiple ? next : next[0] ?? "");
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: utils.cn(
+          "inline-flex items-center",
+          variant === "connected" ? "gap-0.5" : gaps[size],
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ButtonGroupContext.Provider,
+          {
+            value: {
+              variant,
+              size,
+              shape,
+              buttonVariant,
+              selectable: selectionMode !== "none",
+              value: current,
+              toggle
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Md3ButtonGroup.displayName = "Md3ButtonGroup";
+var sizes = {
+  xs: { base: "h-8 gap-1 text-sm [&_svg]:size-5", label: "px-3", labelPressed: "motion-safe:active:px-4", iconOnly: "w-8", iconOnlyPressed: "motion-safe:active:w-[37px]" },
+  sm: { base: "h-10 gap-2 text-sm [&_svg]:size-5", label: "px-4", labelPressed: "motion-safe:active:px-5", iconOnly: "w-10", iconOnlyPressed: "motion-safe:active:w-[46px]" },
+  md: { base: "h-14 gap-2 text-base [&_svg]:size-6", label: "px-6", labelPressed: "motion-safe:active:px-8", iconOnly: "w-14", iconOnlyPressed: "motion-safe:active:w-16" },
+  lg: { base: "h-24 gap-3 text-2xl [&_svg]:size-8", label: "px-12", labelPressed: "motion-safe:active:px-14", iconOnly: "w-24", iconOnlyPressed: "motion-safe:active:w-[110px]" },
+  xl: { base: "h-[136px] gap-4 text-[32px] [&_svg]:size-10", label: "px-16", labelPressed: "motion-safe:active:px-[72px]", iconOnly: "w-[136px]", iconOnlyPressed: "motion-safe:active:w-[156px]" }
+};
+var squareRadius = {
+  xs: "rounded-md-md",
+  sm: "rounded-md-md",
+  md: "rounded-md-lg",
+  lg: "rounded-md-xl",
+  xl: "rounded-md-xl"
+};
+var pressedRadius = {
+  xs: "active:rounded-md-sm",
+  sm: "active:rounded-md-sm",
+  md: "active:rounded-md-md",
+  lg: "active:rounded-md-lg",
+  xl: "active:rounded-md-lg"
+};
+var innerRadius = {
+  xs: "rounded-md-xs",
+  sm: "rounded-md-sm",
+  md: "rounded-md-sm",
+  lg: "rounded-md-lg",
+  xl: "rounded-[20px]"
+};
+var outerRadius = {
+  round: {
+    xs: "first:rounded-l-full last:rounded-r-full",
+    sm: "first:rounded-l-full last:rounded-r-full",
+    md: "first:rounded-l-full last:rounded-r-full",
+    lg: "first:rounded-l-full last:rounded-r-full",
+    xl: "first:rounded-l-full last:rounded-r-full"
+  },
+  square: {
+    xs: "first:rounded-l-md-md last:rounded-r-md-md",
+    sm: "first:rounded-l-md-md last:rounded-r-md-md",
+    md: "first:rounded-l-md-lg last:rounded-r-md-lg",
+    lg: "first:rounded-l-md-xl last:rounded-r-md-xl",
+    xl: "first:rounded-l-md-xl last:rounded-r-md-xl"
+  }
+};
+var actionColors = {
+  filled: "bg-md-primary text-md-on-primary hover:shadow-md-1",
+  tonal: "bg-md-secondary-container text-md-on-secondary-container hover:shadow-md-1",
+  elevated: "bg-md-surface-container-low text-md-primary shadow-md-1 hover:shadow-md-2",
+  outlined: "border border-md-outline bg-transparent text-md-primary",
+  text: "bg-transparent text-md-primary"
+};
+var toggleColors = {
+  filled: ["bg-md-surface-container text-md-on-surface-variant", "bg-md-primary text-md-on-primary"],
+  tonal: [
+    "bg-md-secondary-container text-md-on-secondary-container",
+    "bg-md-secondary text-md-on-secondary"
+  ],
+  elevated: [
+    "bg-md-surface-container-low text-md-primary shadow-md-1 hover:shadow-md-2",
+    "bg-md-primary text-md-on-primary shadow-md-1 hover:shadow-md-2"
+  ],
+  outlined: [
+    "border border-md-outline-variant bg-transparent text-md-on-surface-variant",
+    "border border-md-inverse-surface bg-md-inverse-surface text-md-inverse-on-surface"
+  ],
+  text: ["bg-transparent text-md-primary", "bg-md-secondary-container text-md-on-secondary-container"]
+};
+var Md3ButtonGroupItem = React__namespace.forwardRef(
+  ({ value, variant, icon, className, children, onClick, type = "button", ...props }, ref) => {
+    const ctx = React__namespace.useContext(ButtonGroupContext);
+    if (!ctx) throw new Error("Md3ButtonGroupItem must be used within a Md3ButtonGroup");
+    const toggleable = ctx.selectable && value !== void 0;
+    const selected = toggleable && ctx.value.includes(value);
+    const iconOnly = icon != null && (children == null || children === false);
+    const s = sizes[ctx.size];
+    const colorVariant = variant ?? ctx.buttonVariant;
+    let shapeClasses;
+    if (ctx.variant === "connected") {
+      shapeClasses = selected ? "rounded-full" : utils.cn(innerRadius[ctx.size], outerRadius[ctx.shape][ctx.size]);
+    } else {
+      const round = ctx.shape === "round" !== selected;
+      shapeClasses = utils.cn(round ? "rounded-full" : squareRadius[ctx.size], pressedRadius[ctx.size]);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type,
+        "aria-pressed": toggleable ? selected : props["aria-pressed"],
+        "data-state": toggleable ? selected ? "on" : "off" : void 0,
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented && toggleable) ctx.toggle(value);
+        },
+        className: utils.cn(
+          // Layout + typography
+          "relative inline-flex shrink-0 items-center justify-center overflow-hidden font-medium",
+          s.base,
+          iconOnly ? s.iconOnly : s.label,
+          // Standard groups widen the pressed button (no movement under reduced motion)
+          ctx.variant === "standard" && (iconOnly ? s.iconOnlyPressed : s.labelPressed),
+          ctx.variant === "connected" && "flex-1",
+          // Shape morph + colour change
+          "transition-[border-radius,padding,width,background-color,color,box-shadow] duration-200 ease-out",
+          "motion-reduce:transition-[background-color,color,box-shadow]",
+          shapeClasses,
+          toggleable ? toggleColors[colorVariant][selected ? 1 : 0] : actionColors[colorVariant],
+          // State layer (Material 3): on-color overlay at 8% hover / 12% focus+press
+          "before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-['']",
+          "hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]",
+          // Focus ring + disabled
+          "outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface",
+          "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex shrink-0", children: icon }),
+          !iconOnly && children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative", children })
+        ]
+      }
+    );
+  }
+);
+Md3ButtonGroupItem.displayName = "Md3ButtonGroupItem";
+
+exports.Md3ButtonGroup = Md3ButtonGroup;
+exports.Md3ButtonGroupItem = Md3ButtonGroupItem;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","cn","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport type Md3ButtonGroupVariant = \"standard\" | \"connected\";\nexport type Md3ButtonGroupSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type Md3ButtonGroupShape = \"round\" | \"square\";\nexport type Md3ButtonGroupSelectionMode = \"none\" | \"single\" | \"multiple\";\nexport type Md3ButtonGroupItemVariant = \"filled\" | \"tonal\" | \"elevated\" | \"outlined\" | \"text\";\n\ninterface ButtonGroupContextValue {\n  variant: Md3ButtonGroupVariant;\n  size: Md3ButtonGroupSize;\n  shape: Md3ButtonGroupShape;\n  buttonVariant: Md3ButtonGroupItemVariant;\n  selectable: boolean;\n  value: string[];\n  toggle: (v: string) => void;\n}\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(null);\n\nexport interface Md3ButtonGroupProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /** `standard` keeps each button's own shape; `connected` joins them with 2px gaps and small inner corners. */\n  variant?: Md3ButtonGroupVariant;\n  /** Button size applied to every item: XS 32px, S 40px, M 56px, L 96px, XL 136px tall. */\n  size?: Md3ButtonGroupSize;\n  /** Default shape of the buttons. Selected toggle buttons morph to the other shape. */\n  shape?: Md3ButtonGroupShape;\n  /** Colour style applied to items that don't set their own `variant`. */\n  buttonVariant?: Md3ButtonGroupItemVariant;\n  /** `none` for plain action buttons, `single`/`multiple` to make items with a `value` toggle. */\n  selectionMode?: Md3ButtonGroupSelectionMode;\n  /** When true, the last selected item can't be deselected. */\n  selectionRequired?: boolean;\n  value?: string | string[];\n  defaultValue?: string | string[];\n  /** Called with a string in `single` mode (\"\" when cleared) and a string array in `multiple` mode. */\n  onValueChange?: (value: string | string[]) => void;\n}\n\nconst asArray = (v: string | string[] | undefined) => (v === undefined ? [] : Array.isArray(v) ? v : [v]);\n\nconst gaps: Record<Md3ButtonGroupSize, string> = {\n  xs: \"gap-[18px]\",\n  sm: \"gap-3\",\n  md: \"gap-2\",\n  lg: \"gap-2\",\n  xl: \"gap-2\",\n};\n\n/**\n * A Material 3 Expressive button group: an invisible container that spaces related\n * buttons and adjusts their shape. The `standard` variant keeps each button's shape\n * and widens a button while it is pressed; the `connected` variant (the successor to\n * segmented buttons) joins buttons with 2px gaps, small inner corners and fully\n * rounded outer corners. Set `selectionMode` to turn items with a `value` into\n * single- or multi-select toggle buttons whose shape morphs when selected.\n * Compose with Md3ButtonGroupItem.\n */\nexport const Md3ButtonGroup = React.forwardRef<HTMLDivElement, Md3ButtonGroupProps>(\n  (\n    {\n      variant = \"standard\",\n      size = \"sm\",\n      shape = \"round\",\n      buttonVariant = \"filled\",\n      selectionMode = \"none\",\n      selectionRequired = false,\n      value,\n      defaultValue,\n      onValueChange,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const multiple = selectionMode === \"multiple\";\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = React.useState<string[]>(asArray(defaultValue));\n    const current = isControlled ? asArray(value) : internal;\n\n    const toggle = (v: string) => {\n      let next: string[];\n      if (multiple) next = current.includes(v) ? current.filter((x) => x !== v) : [...current, v];\n      else next = current[0] === v ? [] : [v];\n      if (selectionRequired && next.length === 0) return;\n      if (!isControlled) setInternal(next);\n      onValueChange?.(multiple ? next : (next[0] ?? \"\"));\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={cn(\n          \"inline-flex items-center\",\n          variant === \"connected\" ? \"gap-0.5\" : gaps[size],\n          className,\n        )}\n        {...props}\n      >\n        <ButtonGroupContext.Provider\n          value={{\n            variant,\n            size,\n            shape,\n            buttonVariant,\n            selectable: selectionMode !== \"none\",\n            value: current,\n            toggle,\n          }}\n        >\n          {children}\n        </ButtonGroupContext.Provider>\n      </div>\n    );\n  },\n);\nMd3ButtonGroup.displayName = \"Md3ButtonGroup\";\n\nexport interface Md3ButtonGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Identifies the item for selection. Items without a value act as plain buttons. */\n  value?: string;\n  /** Colour style; defaults to the group's `buttonVariant`. */\n  variant?: Md3ButtonGroupItemVariant;\n  /** Leading icon. Pass an icon with no children (and an `aria-label`) for an icon button. */\n  icon?: React.ReactNode;\n}\n\nconst sizes: Record<\n  Md3ButtonGroupSize,\n  { base: string; label: string; labelPressed: string; iconOnly: string; iconOnlyPressed: string }\n> = {\n  xs: { base: \"h-8 gap-1 text-sm [&_svg]:size-5\", label: \"px-3\", labelPressed: \"motion-safe:active:px-4\", iconOnly: \"w-8\", iconOnlyPressed: \"motion-safe:active:w-[37px]\" },\n  sm: { base: \"h-10 gap-2 text-sm [&_svg]:size-5\", label: \"px-4\", labelPressed: \"motion-safe:active:px-5\", iconOnly: \"w-10\", iconOnlyPressed: \"motion-safe:active:w-[46px]\" },\n  md: { base: \"h-14 gap-2 text-base [&_svg]:size-6\", label: \"px-6\", labelPressed: \"motion-safe:active:px-8\", iconOnly: \"w-14\", iconOnlyPressed: \"motion-safe:active:w-16\" },\n  lg: { base: \"h-24 gap-3 text-2xl [&_svg]:size-8\", label: \"px-12\", labelPressed: \"motion-safe:active:px-14\", iconOnly: \"w-24\", iconOnlyPressed: \"motion-safe:active:w-[110px]\" },\n  xl: { base: \"h-[136px] gap-4 text-[32px] [&_svg]:size-10\", label: \"px-16\", labelPressed: \"motion-safe:active:px-[72px]\", iconOnly: \"w-[136px]\", iconOnlyPressed: \"motion-safe:active:w-[156px]\" },\n};\n\nconst squareRadius: Record<Md3ButtonGroupSize, string> = {\n  xs: \"rounded-md-md\",\n  sm: \"rounded-md-md\",\n  md: \"rounded-md-lg\",\n  lg: \"rounded-md-xl\",\n  xl: \"rounded-md-xl\",\n};\n\nconst pressedRadius: Record<Md3ButtonGroupSize, string> = {\n  xs: \"active:rounded-md-sm\",\n  sm: \"active:rounded-md-sm\",\n  md: \"active:rounded-md-md\",\n  lg: \"active:rounded-md-lg\",\n  xl: \"active:rounded-md-lg\",\n};\n\nconst innerRadius: Record<Md3ButtonGroupSize, string> = {\n  xs: \"rounded-md-xs\",\n  sm: \"rounded-md-sm\",\n  md: \"rounded-md-sm\",\n  lg: \"rounded-md-lg\",\n  xl: \"rounded-[20px]\",\n};\n\nconst outerRadius: Record<Md3ButtonGroupShape, Record<Md3ButtonGroupSize, string>> = {\n  round: {\n    xs: \"first:rounded-l-full last:rounded-r-full\",\n    sm: \"first:rounded-l-full last:rounded-r-full\",\n    md: \"first:rounded-l-full last:rounded-r-full\",\n    lg: \"first:rounded-l-full last:rounded-r-full\",\n    xl: \"first:rounded-l-full last:rounded-r-full\",\n  },\n  square: {\n    xs: \"first:rounded-l-md-md last:rounded-r-md-md\",\n    sm: \"first:rounded-l-md-md last:rounded-r-md-md\",\n    md: \"first:rounded-l-md-lg last:rounded-r-md-lg\",\n    lg: \"first:rounded-l-md-xl last:rounded-r-md-xl\",\n    xl: \"first:rounded-l-md-xl last:rounded-r-md-xl\",\n  },\n};\n\n/** Colours for plain action buttons (same as Md3Button). */\nconst actionColors: Record<Md3ButtonGroupItemVariant, string> = {\n  filled: \"bg-md-primary text-md-on-primary hover:shadow-md-1\",\n  tonal: \"bg-md-secondary-container text-md-on-secondary-container hover:shadow-md-1\",\n  elevated: \"bg-md-surface-container-low text-md-primary shadow-md-1 hover:shadow-md-2\",\n  outlined: \"border border-md-outline bg-transparent text-md-primary\",\n  text: \"bg-transparent text-md-primary\",\n};\n\n/** Colours for toggle buttons: [unselected, selected]. */\nconst toggleColors: Record<Md3ButtonGroupItemVariant, [string, string]> = {\n  filled: [\"bg-md-surface-container text-md-on-surface-variant\", \"bg-md-primary text-md-on-primary\"],\n  tonal: [\n    \"bg-md-secondary-container text-md-on-secondary-container\",\n    \"bg-md-secondary text-md-on-secondary\",\n  ],\n  elevated: [\n    \"bg-md-surface-container-low text-md-primary shadow-md-1 hover:shadow-md-2\",\n    \"bg-md-primary text-md-on-primary shadow-md-1 hover:shadow-md-2\",\n  ],\n  outlined: [\n    \"border border-md-outline-variant bg-transparent text-md-on-surface-variant\",\n    \"border border-md-inverse-surface bg-md-inverse-surface text-md-inverse-on-surface\",\n  ],\n  text: [\"bg-transparent text-md-primary\", \"bg-md-secondary-container text-md-on-secondary-container\"],\n};\n\n/**\n * A button inside a {@link Md3ButtonGroup}. Takes its size and shape from the group;\n * when the group is selectable and the item has a `value`, it is a toggle button\n * exposing `aria-pressed`. Icon-only items (an `icon` and no children) need an\n * `aria-label`.\n */\nexport const Md3ButtonGroupItem = React.forwardRef<HTMLButtonElement, Md3ButtonGroupItemProps>(\n  ({ value, variant, icon, className, children, onClick, type = \"button\", ...props }, ref) => {\n    const ctx = React.useContext(ButtonGroupContext);\n    if (!ctx) throw new Error(\"Md3ButtonGroupItem must be used within a Md3ButtonGroup\");\n    const toggleable = ctx.selectable && value !== undefined;\n    const selected = toggleable && ctx.value.includes(value);\n    const iconOnly = icon != null && (children == null || children === false);\n    const s = sizes[ctx.size];\n    const colorVariant = variant ?? ctx.buttonVariant;\n\n    let shapeClasses: string;\n    if (ctx.variant === \"connected\") {\n      shapeClasses = selected ? \"rounded-full\" : cn(innerRadius[ctx.size], outerRadius[ctx.shape][ctx.size]);\n    } else {\n      // Selected toggle buttons morph between round and square.\n      const round = (ctx.shape === \"round\") !== selected;\n      shapeClasses = cn(round ? \"rounded-full\" : squareRadius[ctx.size], pressedRadius[ctx.size]);\n    }\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        aria-pressed={toggleable ? selected : props[\"aria-pressed\"]}\n        data-state={toggleable ? (selected ? \"on\" : \"off\") : undefined}\n        onClick={(e) => {\n          onClick?.(e);\n          if (!e.defaultPrevented && toggleable) ctx.toggle(value);\n        }}\n        className={cn(\n          // Layout + typography\n          \"relative inline-flex shrink-0 items-center justify-center overflow-hidden font-medium\",\n          s.base,\n          iconOnly ? s.iconOnly : s.label,\n          // Standard groups widen the pressed button (no movement under reduced motion)\n          ctx.variant === \"standard\" && (iconOnly ? s.iconOnlyPressed : s.labelPressed),\n          ctx.variant === \"connected\" && \"flex-1\",\n          // Shape morph + colour change\n          \"transition-[border-radius,padding,width,background-color,color,box-shadow] duration-200 ease-out\",\n          \"motion-reduce:transition-[background-color,color,box-shadow]\",\n          shapeClasses,\n          toggleable ? toggleColors[colorVariant][selected ? 1 : 0] : actionColors[colorVariant],\n          // State layer (Material 3): on-color overlay at 8% hover / 12% focus+press\n          \"before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-['']\",\n          \"hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]\",\n          // Focus ring + disabled\n          \"outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface\",\n          \"disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none\",\n          className,\n        )}\n        {...props}\n      >\n        {icon && <span className=\"relative inline-flex shrink-0\">{icon}</span>}\n        {!iconOnly && children != null && <span className=\"relative\">{children}</span>}\n      </button>\n    );\n  },\n);\nMd3ButtonGroupItem.displayName = \"Md3ButtonGroupItem\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+type Md3ButtonGroupVariant = "standard" | "connected";
+type Md3ButtonGroupSize = "xs" | "sm" | "md" | "lg" | "xl";
+type Md3ButtonGroupShape = "round" | "square";
+type Md3ButtonGroupSelectionMode = "none" | "single" | "multiple";
+type Md3ButtonGroupItemVariant = "filled" | "tonal" | "elevated" | "outlined" | "text";
+interface Md3ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** `standard` keeps each button's own shape; `connected` joins them with 2px gaps and small inner corners. */
+    variant?: Md3ButtonGroupVariant;
+    /** Button size applied to every item: XS 32px, S 40px, M 56px, L 96px, XL 136px tall. */
+    size?: Md3ButtonGroupSize;
+    /** Default shape of the buttons. Selected toggle buttons morph to the other shape. */
+    shape?: Md3ButtonGroupShape;
+    /** Colour style applied to items that don't set their own `variant`. */
+    buttonVariant?: Md3ButtonGroupItemVariant;
+    /** `none` for plain action buttons, `single`/`multiple` to make items with a `value` toggle. */
+    selectionMode?: Md3ButtonGroupSelectionMode;
+    /** When true, the last selected item can't be deselected. */
+    selectionRequired?: boolean;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    /** Called with a string in `single` mode ("" when cleared) and a string array in `multiple` mode. */
+    onValueChange?: (value: string | string[]) => void;
+}
+/**
+ * A Material 3 Expressive button group: an invisible container that spaces related
+ * buttons and adjusts their shape. The `standard` variant keeps each button's shape
+ * and widens a button while it is pressed; the `connected` variant (the successor to
+ * segmented buttons) joins buttons with 2px gaps, small inner corners and fully
+ * rounded outer corners. Set `selectionMode` to turn items with a `value` into
+ * single- or multi-select toggle buttons whose shape morphs when selected.
+ * Compose with Md3ButtonGroupItem.
+ */
+declare const Md3ButtonGroup: React.ForwardRefExoticComponent<Md3ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface Md3ButtonGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Identifies the item for selection. Items without a value act as plain buttons. */
+    value?: string;
+    /** Colour style; defaults to the group's `buttonVariant`. */
+    variant?: Md3ButtonGroupItemVariant;
+    /** Leading icon. Pass an icon with no children (and an `aria-label`) for an icon button. */
+    icon?: React.ReactNode;
+}
+/**
+ * A button inside a {@link Md3ButtonGroup}. Takes its size and shape from the group;
+ * when the group is selectable and the item has a `value`, it is a toggle button
+ * exposing `aria-pressed`. Icon-only items (an `icon` and no children) need an
+ * `aria-label`.
+ */
+declare const Md3ButtonGroupItem: React.ForwardRefExoticComponent<Md3ButtonGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Md3ButtonGroup, Md3ButtonGroupItem, type Md3ButtonGroupItemProps, type Md3ButtonGroupItemVariant, type Md3ButtonGroupProps, type Md3ButtonGroupSelectionMode, type Md3ButtonGroupShape, type Md3ButtonGroupSize, type Md3ButtonGroupVariant };

package/dist/index.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+type Md3ButtonGroupVariant = "standard" | "connected";
+type Md3ButtonGroupSize = "xs" | "sm" | "md" | "lg" | "xl";
+type Md3ButtonGroupShape = "round" | "square";
+type Md3ButtonGroupSelectionMode = "none" | "single" | "multiple";
+type Md3ButtonGroupItemVariant = "filled" | "tonal" | "elevated" | "outlined" | "text";
+interface Md3ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** `standard` keeps each button's own shape; `connected` joins them with 2px gaps and small inner corners. */
+    variant?: Md3ButtonGroupVariant;
+    /** Button size applied to every item: XS 32px, S 40px, M 56px, L 96px, XL 136px tall. */
+    size?: Md3ButtonGroupSize;
+    /** Default shape of the buttons. Selected toggle buttons morph to the other shape. */
+    shape?: Md3ButtonGroupShape;
+    /** Colour style applied to items that don't set their own `variant`. */
+    buttonVariant?: Md3ButtonGroupItemVariant;
+    /** `none` for plain action buttons, `single`/`multiple` to make items with a `value` toggle. */
+    selectionMode?: Md3ButtonGroupSelectionMode;
+    /** When true, the last selected item can't be deselected. */
+    selectionRequired?: boolean;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    /** Called with a string in `single` mode ("" when cleared) and a string array in `multiple` mode. */
+    onValueChange?: (value: string | string[]) => void;
+}
+/**
+ * A Material 3 Expressive button group: an invisible container that spaces related
+ * buttons and adjusts their shape. The `standard` variant keeps each button's shape
+ * and widens a button while it is pressed; the `connected` variant (the successor to
+ * segmented buttons) joins buttons with 2px gaps, small inner corners and fully
+ * rounded outer corners. Set `selectionMode` to turn items with a `value` into
+ * single- or multi-select toggle buttons whose shape morphs when selected.
+ * Compose with Md3ButtonGroupItem.
+ */
+declare const Md3ButtonGroup: React.ForwardRefExoticComponent<Md3ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface Md3ButtonGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Identifies the item for selection. Items without a value act as plain buttons. */
+    value?: string;
+    /** Colour style; defaults to the group's `buttonVariant`. */
+    variant?: Md3ButtonGroupItemVariant;
+    /** Leading icon. Pass an icon with no children (and an `aria-label`) for an icon button. */
+    icon?: React.ReactNode;
+}
+/**
+ * A button inside a {@link Md3ButtonGroup}. Takes its size and shape from the group;
+ * when the group is selectable and the item has a `value`, it is a toggle button
+ * exposing `aria-pressed`. Icon-only items (an `icon` and no children) need an
+ * `aria-label`.
+ */
+declare const Md3ButtonGroupItem: React.ForwardRefExoticComponent<Md3ButtonGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Md3ButtonGroup, Md3ButtonGroupItem, type Md3ButtonGroupItemProps, type Md3ButtonGroupItemVariant, type Md3ButtonGroupProps, type Md3ButtonGroupSelectionMode, type Md3ButtonGroupShape, type Md3ButtonGroupSize, type Md3ButtonGroupVariant };

package/dist/index.js

@@ -0,0 +1,202 @@
+"use client";
+import * as React from 'react';
+import { cn } from '@nucleux/utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/index.tsx
+var ButtonGroupContext = React.createContext(null);
+var asArray = (v) => v === void 0 ? [] : Array.isArray(v) ? v : [v];
+var gaps = {
+  xs: "gap-[18px]",
+  sm: "gap-3",
+  md: "gap-2",
+  lg: "gap-2",
+  xl: "gap-2"
+};
+var Md3ButtonGroup = React.forwardRef(
+  ({
+    variant = "standard",
+    size = "sm",
+    shape = "round",
+    buttonVariant = "filled",
+    selectionMode = "none",
+    selectionRequired = false,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const multiple = selectionMode === "multiple";
+    const isControlled = value !== void 0;
+    const [internal, setInternal] = React.useState(asArray(defaultValue));
+    const current = isControlled ? asArray(value) : internal;
+    const toggle = (v) => {
+      let next;
+      if (multiple) next = current.includes(v) ? current.filter((x) => x !== v) : [...current, v];
+      else next = current[0] === v ? [] : [v];
+      if (selectionRequired && next.length === 0) return;
+      if (!isControlled) setInternal(next);
+      onValueChange?.(multiple ? next : next[0] ?? "");
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(
+          "inline-flex items-center",
+          variant === "connected" ? "gap-0.5" : gaps[size],
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          ButtonGroupContext.Provider,
+          {
+            value: {
+              variant,
+              size,
+              shape,
+              buttonVariant,
+              selectable: selectionMode !== "none",
+              value: current,
+              toggle
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Md3ButtonGroup.displayName = "Md3ButtonGroup";
+var sizes = {
+  xs: { base: "h-8 gap-1 text-sm [&_svg]:size-5", label: "px-3", labelPressed: "motion-safe:active:px-4", iconOnly: "w-8", iconOnlyPressed: "motion-safe:active:w-[37px]" },
+  sm: { base: "h-10 gap-2 text-sm [&_svg]:size-5", label: "px-4", labelPressed: "motion-safe:active:px-5", iconOnly: "w-10", iconOnlyPressed: "motion-safe:active:w-[46px]" },
+  md: { base: "h-14 gap-2 text-base [&_svg]:size-6", label: "px-6", labelPressed: "motion-safe:active:px-8", iconOnly: "w-14", iconOnlyPressed: "motion-safe:active:w-16" },
+  lg: { base: "h-24 gap-3 text-2xl [&_svg]:size-8", label: "px-12", labelPressed: "motion-safe:active:px-14", iconOnly: "w-24", iconOnlyPressed: "motion-safe:active:w-[110px]" },
+  xl: { base: "h-[136px] gap-4 text-[32px] [&_svg]:size-10", label: "px-16", labelPressed: "motion-safe:active:px-[72px]", iconOnly: "w-[136px]", iconOnlyPressed: "motion-safe:active:w-[156px]" }
+};
+var squareRadius = {
+  xs: "rounded-md-md",
+  sm: "rounded-md-md",
+  md: "rounded-md-lg",
+  lg: "rounded-md-xl",
+  xl: "rounded-md-xl"
+};
+var pressedRadius = {
+  xs: "active:rounded-md-sm",
+  sm: "active:rounded-md-sm",
+  md: "active:rounded-md-md",
+  lg: "active:rounded-md-lg",
+  xl: "active:rounded-md-lg"
+};
+var innerRadius = {
+  xs: "rounded-md-xs",
+  sm: "rounded-md-sm",
+  md: "rounded-md-sm",
+  lg: "rounded-md-lg",
+  xl: "rounded-[20px]"
+};
+var outerRadius = {
+  round: {
+    xs: "first:rounded-l-full last:rounded-r-full",
+    sm: "first:rounded-l-full last:rounded-r-full",
+    md: "first:rounded-l-full last:rounded-r-full",
+    lg: "first:rounded-l-full last:rounded-r-full",
+    xl: "first:rounded-l-full last:rounded-r-full"
+  },
+  square: {
+    xs: "first:rounded-l-md-md last:rounded-r-md-md",
+    sm: "first:rounded-l-md-md last:rounded-r-md-md",
+    md: "first:rounded-l-md-lg last:rounded-r-md-lg",
+    lg: "first:rounded-l-md-xl last:rounded-r-md-xl",
+    xl: "first:rounded-l-md-xl last:rounded-r-md-xl"
+  }
+};
+var actionColors = {
+  filled: "bg-md-primary text-md-on-primary hover:shadow-md-1",
+  tonal: "bg-md-secondary-container text-md-on-secondary-container hover:shadow-md-1",
+  elevated: "bg-md-surface-container-low text-md-primary shadow-md-1 hover:shadow-md-2",
+  outlined: "border border-md-outline bg-transparent text-md-primary",
+  text: "bg-transparent text-md-primary"
+};
+var toggleColors = {
+  filled: ["bg-md-surface-container text-md-on-surface-variant", "bg-md-primary text-md-on-primary"],
+  tonal: [
+    "bg-md-secondary-container text-md-on-secondary-container",
+    "bg-md-secondary text-md-on-secondary"
+  ],
+  elevated: [
+    "bg-md-surface-container-low text-md-primary shadow-md-1 hover:shadow-md-2",
+    "bg-md-primary text-md-on-primary shadow-md-1 hover:shadow-md-2"
+  ],
+  outlined: [
+    "border border-md-outline-variant bg-transparent text-md-on-surface-variant",
+    "border border-md-inverse-surface bg-md-inverse-surface text-md-inverse-on-surface"
+  ],
+  text: ["bg-transparent text-md-primary", "bg-md-secondary-container text-md-on-secondary-container"]
+};
+var Md3ButtonGroupItem = React.forwardRef(
+  ({ value, variant, icon, className, children, onClick, type = "button", ...props }, ref) => {
+    const ctx = React.useContext(ButtonGroupContext);
+    if (!ctx) throw new Error("Md3ButtonGroupItem must be used within a Md3ButtonGroup");
+    const toggleable = ctx.selectable && value !== void 0;
+    const selected = toggleable && ctx.value.includes(value);
+    const iconOnly = icon != null && (children == null || children === false);
+    const s = sizes[ctx.size];
+    const colorVariant = variant ?? ctx.buttonVariant;
+    let shapeClasses;
+    if (ctx.variant === "connected") {
+      shapeClasses = selected ? "rounded-full" : cn(innerRadius[ctx.size], outerRadius[ctx.shape][ctx.size]);
+    } else {
+      const round = ctx.shape === "round" !== selected;
+      shapeClasses = cn(round ? "rounded-full" : squareRadius[ctx.size], pressedRadius[ctx.size]);
+    }
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        "aria-pressed": toggleable ? selected : props["aria-pressed"],
+        "data-state": toggleable ? selected ? "on" : "off" : void 0,
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented && toggleable) ctx.toggle(value);
+        },
+        className: cn(
+          // Layout + typography
+          "relative inline-flex shrink-0 items-center justify-center overflow-hidden font-medium",
+          s.base,
+          iconOnly ? s.iconOnly : s.label,
+          // Standard groups widen the pressed button (no movement under reduced motion)
+          ctx.variant === "standard" && (iconOnly ? s.iconOnlyPressed : s.labelPressed),
+          ctx.variant === "connected" && "flex-1",
+          // Shape morph + colour change
+          "transition-[border-radius,padding,width,background-color,color,box-shadow] duration-200 ease-out",
+          "motion-reduce:transition-[background-color,color,box-shadow]",
+          shapeClasses,
+          toggleable ? toggleColors[colorVariant][selected ? 1 : 0] : actionColors[colorVariant],
+          // State layer (Material 3): on-color overlay at 8% hover / 12% focus+press
+          "before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-['']",
+          "hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]",
+          // Focus ring + disabled
+          "outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface",
+          "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "relative inline-flex shrink-0", children: icon }),
+          !iconOnly && children != null && /* @__PURE__ */ jsx("span", { className: "relative", children })
+        ]
+      }
+    );
+  }
+);
+Md3ButtonGroupItem.displayName = "Md3ButtonGroupItem";
+
+export { Md3ButtonGroup, Md3ButtonGroupItem };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;AAkBA,IAAM,kBAAA,GAA2B,oBAA8C,IAAI,CAAA;AAsBnF,IAAM,OAAA,GAAU,CAAC,CAAA,KAAsC,CAAA,KAAM,MAAA,GAAY,EAAC,GAAI,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA,GAAI,CAAA,GAAI,CAAC,CAAC,CAAA;AAEvG,IAAM,IAAA,GAA2C;AAAA,EAC/C,EAAA,EAAI,YAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAWO,IAAM,cAAA,GAAuB,KAAA,CAAA,UAAA;AAAA,EAClC,CACE;AAAA,IACE,OAAA,GAAU,UAAA;AAAA,IACV,IAAA,GAAO,IAAA;AAAA,IACP,KAAA,GAAQ,OAAA;AAAA,IACR,aAAA,GAAgB,QAAA;AAAA,IAChB,aAAA,GAAgB,MAAA;AAAA,IAChB,iBAAA,GAAoB,KAAA;AAAA,IACpB,KAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,WAAW,aAAA,KAAkB,UAAA;AACnC,IAAA,MAAM,eAAe,KAAA,KAAU,MAAA;AAC/B,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,IAAU,KAAA,CAAA,QAAA,CAAmB,OAAA,CAAQ,YAAY,CAAC,CAAA;AAC9E,IAAA,MAAM,OAAA,GAAU,YAAA,GAAe,OAAA,CAAQ,KAAK,CAAA,GAAI,QAAA;AAEhD,IAAA,MAAM,MAAA,GAAS,CAAC,CAAA,KAAc;AAC5B,MAAA,IAAI,IAAA;AACJ,MAAA,IAAI,UAAU,IAAA,GAAO,OAAA,CAAQ,QAAA,CAAS,CAAC,IAAI,OAAA,CAAQ,MAAA,CAAO,CAAC,CAAA,KAAM,MAAM,CAAC,CAAA,GAAI,CAAC,GAAG,SAAS,CAAC,CAAA;AAAA,WACrF,IAAA,GAAO,QAAQ,CAAC,CAAA,KAAM,IAAI,EAAC,GAAI,CAAC,CAAC,CAAA;AACtC,MAAA,IAAI,iBAAA,IAAqB,IAAA,CAAK,MAAA,KAAW,CAAA,EAAG;AAC5C,MAAA,IAAI,CAAC,YAAA,EAAc,WAAA,CAAY,IAAI,CAAA;AACnC,MAAA,aAAA,GAAgB,QAAA,GAAW,IAAA,GAAQ,IAAA,CAAK,CAAC,KAAK,EAAG,CAAA;AAAA,IACnD,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,EAAA;AAAA,UACT,0BAAA;AAAA,UACA,OAAA,KAAY,WAAA,GAAc,SAAA,GAAY,IAAA,CAAK,IAAI,CAAA;AAAA,UAC/C;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,kBAAA,CAAmB,QAAA;AAAA,UAAnB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,OAAA;AAAA,cACA,IAAA;AAAA,cACA,KAAA;AAAA,cACA,aAAA;AAAA,cACA,YAAY,aAAA,KAAkB,MAAA;AAAA,cAC9B,KAAA,EAAO,OAAA;AAAA,cACP;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;AACA,cAAA,CAAe,WAAA,GAAc,gBAAA;AAW7B,IAAM,KAAA,GAGF;AAAA,EACF,EAAA,EAAI,EAAE,IAAA,EAAM,kCAAA,EAAoC,KAAA,EAAO,MAAA,EAAQ,YAAA,EAAc,yBAAA,EAA2B,QAAA,EAAU,KAAA,EAAO,eAAA,EAAiB,6BAAA,EAA8B;AAAA,EACxK,EAAA,EAAI,EAAE,IAAA,EAAM,mCAAA,EAAqC,KAAA,EAAO,MAAA,EAAQ,YAAA,EAAc,yBAAA,EAA2B,QAAA,EAAU,MAAA,EAAQ,eAAA,EAAiB,6BAAA,EAA8B;AAAA,EAC1K,EAAA,EAAI,EAAE,IAAA,EAAM,qCAAA,EAAuC,KAAA,EAAO,MAAA,EAAQ,YAAA,EAAc,yBAAA,EAA2B,QAAA,EAAU,MAAA,EAAQ,eAAA,EAAiB,yBAAA,EAA0B;AAAA,EACxK,EAAA,EAAI,EAAE,IAAA,EAAM,oCAAA,EAAsC,KAAA,EAAO,OAAA,EAAS,YAAA,EAAc,0BAAA,EAA4B,QAAA,EAAU,MAAA,EAAQ,eAAA,EAAiB,8BAAA,EAA+B;AAAA,EAC9K,EAAA,EAAI,EAAE,IAAA,EAAM,6CAAA,EAA+C,KAAA,EAAO,OAAA,EAAS,YAAA,EAAc,8BAAA,EAAgC,QAAA,EAAU,WAAA,EAAa,eAAA,EAAiB,8BAAA;AACnK,CAAA;AAEA,IAAM,YAAA,GAAmD;AAAA,EACvD,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,aAAA,GAAoD;AAAA,EACxD,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,WAAA,GAAkD;AAAA,EACtD,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,WAAA,GAA+E;AAAA,EACnF,KAAA,EAAO;AAAA,IACL,EAAA,EAAI,0CAAA;AAAA,IACJ,EAAA,EAAI,0CAAA;AAAA,IACJ,EAAA,EAAI,0CAAA;AAAA,IACJ,EAAA,EAAI,0CAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,EAAA,EAAI,4CAAA;AAAA,IACJ,EAAA,EAAI,4CAAA;AAAA,IACJ,EAAA,EAAI,4CAAA;AAAA,IACJ,EAAA,EAAI,4CAAA;AAAA,IACJ,EAAA,EAAI;AAAA;AAER,CAAA;AAGA,IAAM,YAAA,GAA0D;AAAA,EAC9D,MAAA,EAAQ,oDAAA;AAAA,EACR,KAAA,EAAO,4EAAA;AAAA,EACP,QAAA,EAAU,2EAAA;AAAA,EACV,QAAA,EAAU,yDAAA;AAAA,EACV,IAAA,EAAM;AACR,CAAA;AAGA,IAAM,YAAA,GAAoE;AAAA,EACxE,MAAA,EAAQ,CAAC,oDAAA,EAAsD,kCAAkC,CAAA;AAAA,EACjG,KAAA,EAAO;AAAA,IACL,0DAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,2EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,4EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,IAAA,EAAM,CAAC,gCAAA,EAAkC,0DAA0D;AACrG,CAAA;AAQO,IAAM,kBAAA,GAA2B,KAAA,CAAA,UAAA;AAAA,EACtC,CAAC,EAAE,KAAA,EAAO,OAAA,EAAS,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,OAAA,EAAS,IAAA,GAAO,QAAA,EAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC1F,IAAA,MAAM,GAAA,GAAY,iBAAW,kBAAkB,CAAA;AAC/C,IAAA,IAAI,CAAC,GAAA,EAAK,MAAM,IAAI,MAAM,yDAAyD,CAAA;AACnF,IAAA,MAAM,UAAA,GAAa,GAAA,CAAI,UAAA,IAAc,KAAA,KAAU,MAAA;AAC/C,IAAA,MAAM,QAAA,GAAW,UAAA,IAAc,GAAA,CAAI,KAAA,CAAM,SAAS,KAAK,CAAA;AACvD,IAAA,MAAM,QAAA,GAAW,IAAA,IAAQ,IAAA,KAAS,QAAA,IAAY,QAAQ,QAAA,KAAa,KAAA,CAAA;AACnE,IAAA,MAAM,CAAA,GAAI,KAAA,CAAM,GAAA,CAAI,IAAI,CAAA;AACxB,IAAA,MAAM,YAAA,GAAe,WAAW,GAAA,CAAI,aAAA;AAEpC,IAAA,IAAI,YAAA;AACJ,IAAA,IAAI,GAAA,CAAI,YAAY,WAAA,EAAa;AAC/B,MAAA,YAAA,GAAe,QAAA,GAAW,cAAA,GAAiB,EAAA,CAAG,WAAA,CAAY,GAAA,CAAI,IAAI,CAAA,EAAG,WAAA,CAAY,GAAA,CAAI,KAAK,CAAA,CAAE,GAAA,CAAI,IAAI,CAAC,CAAA;AAAA,IACvG,CAAA,MAAO;AAEL,MAAA,MAAM,KAAA,GAAS,GAAA,CAAI,KAAA,KAAU,OAAA,KAAa,QAAA;AAC1C,MAAA,YAAA,GAAe,EAAA,CAAG,KAAA,GAAQ,cAAA,GAAiB,YAAA,CAAa,GAAA,CAAI,IAAI,CAAA,EAAG,aAAA,CAAc,GAAA,CAAI,IAAI,CAAC,CAAA;AAAA,IAC5F;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA;AAAA,QACA,cAAA,EAAc,UAAA,GAAa,QAAA,GAAW,KAAA,CAAM,cAAc,CAAA;AAAA,QAC1D,YAAA,EAAY,UAAA,GAAc,QAAA,GAAW,IAAA,GAAO,KAAA,GAAS,MAAA;AAAA,QACrD,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,UAAA,OAAA,GAAU,CAAC,CAAA;AACX,UAAA,IAAI,CAAC,CAAA,CAAE,gBAAA,IAAoB,UAAA,EAAY,GAAA,CAAI,OAAO,KAAK,CAAA;AAAA,QACzD,CAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA;AAAA,UAET,uFAAA;AAAA,UACA,CAAA,CAAE,IAAA;AAAA,UACF,QAAA,GAAW,CAAA,CAAE,QAAA,GAAW,CAAA,CAAE,KAAA;AAAA;AAAA,UAE1B,IAAI,OAAA,KAAY,UAAA,KAAe,QAAA,GAAW,CAAA,CAAE,kBAAkB,CAAA,CAAE,YAAA,CAAA;AAAA,UAChE,GAAA,CAAI,YAAY,WAAA,IAAe,QAAA;AAAA;AAAA,UAE/B,kGAAA;AAAA,UACA,8DAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA,GAAa,aAAa,YAAY,CAAA,CAAE,WAAW,CAAA,GAAI,CAAC,CAAA,GAAI,YAAA,CAAa,YAAY,CAAA;AAAA;AAAA,UAErF,iHAAA;AAAA,UACA,8FAAA;AAAA;AAAA,UAEA,qJAAA;AAAA,UACA,2EAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+BAAA,EAAiC,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,UAC9D,CAAC,YAAY,QAAA,IAAY,IAAA,wBAAS,MAAA,EAAA,EAAK,SAAA,EAAU,YAAY,QAAA,EAAS;AAAA;AAAA;AAAA,KACzE;AAAA,EAEJ;AACF;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport type Md3ButtonGroupVariant = \"standard\" | \"connected\";\nexport type Md3ButtonGroupSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type Md3ButtonGroupShape = \"round\" | \"square\";\nexport type Md3ButtonGroupSelectionMode = \"none\" | \"single\" | \"multiple\";\nexport type Md3ButtonGroupItemVariant = \"filled\" | \"tonal\" | \"elevated\" | \"outlined\" | \"text\";\n\ninterface ButtonGroupContextValue {\n  variant: Md3ButtonGroupVariant;\n  size: Md3ButtonGroupSize;\n  shape: Md3ButtonGroupShape;\n  buttonVariant: Md3ButtonGroupItemVariant;\n  selectable: boolean;\n  value: string[];\n  toggle: (v: string) => void;\n}\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(null);\n\nexport interface Md3ButtonGroupProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /** `standard` keeps each button's own shape; `connected` joins them with 2px gaps and small inner corners. */\n  variant?: Md3ButtonGroupVariant;\n  /** Button size applied to every item: XS 32px, S 40px, M 56px, L 96px, XL 136px tall. */\n  size?: Md3ButtonGroupSize;\n  /** Default shape of the buttons. Selected toggle buttons morph to the other shape. */\n  shape?: Md3ButtonGroupShape;\n  /** Colour style applied to items that don't set their own `variant`. */\n  buttonVariant?: Md3ButtonGroupItemVariant;\n  /** `none` for plain action buttons, `single`/`multiple` to make items with a `value` toggle. */\n  selectionMode?: Md3ButtonGroupSelectionMode;\n  /** When true, the last selected item can't be deselected. */\n  selectionRequired?: boolean;\n  value?: string | string[];\n  defaultValue?: string | string[];\n  /** Called with a string in `single` mode (\"\" when cleared) and a string array in `multiple` mode. */\n  onValueChange?: (value: string | string[]) => void;\n}\n\nconst asArray = (v: string | string[] | undefined) => (v === undefined ? [] : Array.isArray(v) ? v : [v]);\n\nconst gaps: Record<Md3ButtonGroupSize, string> = {\n  xs: \"gap-[18px]\",\n  sm: \"gap-3\",\n  md: \"gap-2\",\n  lg: \"gap-2\",\n  xl: \"gap-2\",\n};\n\n/**\n * A Material 3 Expressive button group: an invisible container that spaces related\n * buttons and adjusts their shape. The `standard` variant keeps each button's shape\n * and widens a button while it is pressed; the `connected` variant (the successor to\n * segmented buttons) joins buttons with 2px gaps, small inner corners and fully\n * rounded outer corners. Set `selectionMode` to turn items with a `value` into\n * single- or multi-select toggle buttons whose shape morphs when selected.\n * Compose with Md3ButtonGroupItem.\n */\nexport const Md3ButtonGroup = React.forwardRef<HTMLDivElement, Md3ButtonGroupProps>(\n  (\n    {\n      variant = \"standard\",\n      size = \"sm\",\n      shape = \"round\",\n      buttonVariant = \"filled\",\n      selectionMode = \"none\",\n      selectionRequired = false,\n      value,\n      defaultValue,\n      onValueChange,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const multiple = selectionMode === \"multiple\";\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = React.useState<string[]>(asArray(defaultValue));\n    const current = isControlled ? asArray(value) : internal;\n\n    const toggle = (v: string) => {\n      let next: string[];\n      if (multiple) next = current.includes(v) ? current.filter((x) => x !== v) : [...current, v];\n      else next = current[0] === v ? [] : [v];\n      if (selectionRequired && next.length === 0) return;\n      if (!isControlled) setInternal(next);\n      onValueChange?.(multiple ? next : (next[0] ?? \"\"));\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={cn(\n          \"inline-flex items-center\",\n          variant === \"connected\" ? \"gap-0.5\" : gaps[size],\n          className,\n        )}\n        {...props}\n      >\n        <ButtonGroupContext.Provider\n          value={{\n            variant,\n            size,\n            shape,\n            buttonVariant,\n            selectable: selectionMode !== \"none\",\n            value: current,\n            toggle,\n          }}\n        >\n          {children}\n        </ButtonGroupContext.Provider>\n      </div>\n    );\n  },\n);\nMd3ButtonGroup.displayName = \"Md3ButtonGroup\";\n\nexport interface Md3ButtonGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Identifies the item for selection. Items without a value act as plain buttons. */\n  value?: string;\n  /** Colour style; defaults to the group's `buttonVariant`. */\n  variant?: Md3ButtonGroupItemVariant;\n  /** Leading icon. Pass an icon with no children (and an `aria-label`) for an icon button. */\n  icon?: React.ReactNode;\n}\n\nconst sizes: Record<\n  Md3ButtonGroupSize,\n  { base: string; label: string; labelPressed: string; iconOnly: string; iconOnlyPressed: string }\n> = {\n  xs: { base: \"h-8 gap-1 text-sm [&_svg]:size-5\", label: \"px-3\", labelPressed: \"motion-safe:active:px-4\", iconOnly: \"w-8\", iconOnlyPressed: \"motion-safe:active:w-[37px]\" },\n  sm: { base: \"h-10 gap-2 text-sm [&_svg]:size-5\", label: \"px-4\", labelPressed: \"motion-safe:active:px-5\", iconOnly: \"w-10\", iconOnlyPressed: \"motion-safe:active:w-[46px]\" },\n  md: { base: \"h-14 gap-2 text-base [&_svg]:size-6\", label: \"px-6\", labelPressed: \"motion-safe:active:px-8\", iconOnly: \"w-14\", iconOnlyPressed: \"motion-safe:active:w-16\" },\n  lg: { base: \"h-24 gap-3 text-2xl [&_svg]:size-8\", label: \"px-12\", labelPressed: \"motion-safe:active:px-14\", iconOnly: \"w-24\", iconOnlyPressed: \"motion-safe:active:w-[110px]\" },\n  xl: { base: \"h-[136px] gap-4 text-[32px] [&_svg]:size-10\", label: \"px-16\", labelPressed: \"motion-safe:active:px-[72px]\", iconOnly: \"w-[136px]\", iconOnlyPressed: \"motion-safe:active:w-[156px]\" },\n};\n\nconst squareRadius: Record<Md3ButtonGroupSize, string> = {\n  xs: \"rounded-md-md\",\n  sm: \"rounded-md-md\",\n  md: \"rounded-md-lg\",\n  lg: \"rounded-md-xl\",\n  xl: \"rounded-md-xl\",\n};\n\nconst pressedRadius: Record<Md3ButtonGroupSize, string> = {\n  xs: \"active:rounded-md-sm\",\n  sm: \"active:rounded-md-sm\",\n  md: \"active:rounded-md-md\",\n  lg: \"active:rounded-md-lg\",\n  xl: \"active:rounded-md-lg\",\n};\n\nconst innerRadius: Record<Md3ButtonGroupSize, string> = {\n  xs: \"rounded-md-xs\",\n  sm: \"rounded-md-sm\",\n  md: \"rounded-md-sm\",\n  lg: \"rounded-md-lg\",\n  xl: \"rounded-[20px]\",\n};\n\nconst outerRadius: Record<Md3ButtonGroupShape, Record<Md3ButtonGroupSize, string>> = {\n  round: {\n    xs: \"first:rounded-l-full last:rounded-r-full\",\n    sm: \"first:rounded-l-full last:rounded-r-full\",\n    md: \"first:rounded-l-full last:rounded-r-full\",\n    lg: \"first:rounded-l-full last:rounded-r-full\",\n    xl: \"first:rounded-l-full last:rounded-r-full\",\n  },\n  square: {\n    xs: \"first:rounded-l-md-md last:rounded-r-md-md\",\n    sm: \"first:rounded-l-md-md last:rounded-r-md-md\",\n    md: \"first:rounded-l-md-lg last:rounded-r-md-lg\",\n    lg: \"first:rounded-l-md-xl last:rounded-r-md-xl\",\n    xl: \"first:rounded-l-md-xl last:rounded-r-md-xl\",\n  },\n};\n\n/** Colours for plain action buttons (same as Md3Button). */\nconst actionColors: Record<Md3ButtonGroupItemVariant, string> = {\n  filled: \"bg-md-primary text-md-on-primary hover:shadow-md-1\",\n  tonal: \"bg-md-secondary-container text-md-on-secondary-container hover:shadow-md-1\",\n  elevated: \"bg-md-surface-container-low text-md-primary shadow-md-1 hover:shadow-md-2\",\n  outlined: \"border border-md-outline bg-transparent text-md-primary\",\n  text: \"bg-transparent text-md-primary\",\n};\n\n/** Colours for toggle buttons: [unselected, selected]. */\nconst toggleColors: Record<Md3ButtonGroupItemVariant, [string, string]> = {\n  filled: [\"bg-md-surface-container text-md-on-surface-variant\", \"bg-md-primary text-md-on-primary\"],\n  tonal: [\n    \"bg-md-secondary-container text-md-on-secondary-container\",\n    \"bg-md-secondary text-md-on-secondary\",\n  ],\n  elevated: [\n    \"bg-md-surface-container-low text-md-primary shadow-md-1 hover:shadow-md-2\",\n    \"bg-md-primary text-md-on-primary shadow-md-1 hover:shadow-md-2\",\n  ],\n  outlined: [\n    \"border border-md-outline-variant bg-transparent text-md-on-surface-variant\",\n    \"border border-md-inverse-surface bg-md-inverse-surface text-md-inverse-on-surface\",\n  ],\n  text: [\"bg-transparent text-md-primary\", \"bg-md-secondary-container text-md-on-secondary-container\"],\n};\n\n/**\n * A button inside a {@link Md3ButtonGroup}. Takes its size and shape from the group;\n * when the group is selectable and the item has a `value`, it is a toggle button\n * exposing `aria-pressed`. Icon-only items (an `icon` and no children) need an\n * `aria-label`.\n */\nexport const Md3ButtonGroupItem = React.forwardRef<HTMLButtonElement, Md3ButtonGroupItemProps>(\n  ({ value, variant, icon, className, children, onClick, type = \"button\", ...props }, ref) => {\n    const ctx = React.useContext(ButtonGroupContext);\n    if (!ctx) throw new Error(\"Md3ButtonGroupItem must be used within a Md3ButtonGroup\");\n    const toggleable = ctx.selectable && value !== undefined;\n    const selected = toggleable && ctx.value.includes(value);\n    const iconOnly = icon != null && (children == null || children === false);\n    const s = sizes[ctx.size];\n    const colorVariant = variant ?? ctx.buttonVariant;\n\n    let shapeClasses: string;\n    if (ctx.variant === \"connected\") {\n      shapeClasses = selected ? \"rounded-full\" : cn(innerRadius[ctx.size], outerRadius[ctx.shape][ctx.size]);\n    } else {\n      // Selected toggle buttons morph between round and square.\n      const round = (ctx.shape === \"round\") !== selected;\n      shapeClasses = cn(round ? \"rounded-full\" : squareRadius[ctx.size], pressedRadius[ctx.size]);\n    }\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        aria-pressed={toggleable ? selected : props[\"aria-pressed\"]}\n        data-state={toggleable ? (selected ? \"on\" : \"off\") : undefined}\n        onClick={(e) => {\n          onClick?.(e);\n          if (!e.defaultPrevented && toggleable) ctx.toggle(value);\n        }}\n        className={cn(\n          // Layout + typography\n          \"relative inline-flex shrink-0 items-center justify-center overflow-hidden font-medium\",\n          s.base,\n          iconOnly ? s.iconOnly : s.label,\n          // Standard groups widen the pressed button (no movement under reduced motion)\n          ctx.variant === \"standard\" && (iconOnly ? s.iconOnlyPressed : s.labelPressed),\n          ctx.variant === \"connected\" && \"flex-1\",\n          // Shape morph + colour change\n          \"transition-[border-radius,padding,width,background-color,color,box-shadow] duration-200 ease-out\",\n          \"motion-reduce:transition-[background-color,color,box-shadow]\",\n          shapeClasses,\n          toggleable ? toggleColors[colorVariant][selected ? 1 : 0] : actionColors[colorVariant],\n          // State layer (Material 3): on-color overlay at 8% hover / 12% focus+press\n          \"before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:content-['']\",\n          \"hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]\",\n          // Focus ring + disabled\n          \"outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-md-primary focus-visible:ring-offset-2 focus-visible:ring-offset-md-surface\",\n          \"disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none\",\n          className,\n        )}\n        {...props}\n      >\n        {icon && <span className=\"relative inline-flex shrink-0\">{icon}</span>}\n        {!iconOnly && children != null && <span className=\"relative\">{children}</span>}\n      </button>\n    );\n  },\n);\nMd3ButtonGroupItem.displayName = \"Md3ButtonGroupItem\";\n"]}

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@nucleux/md3-button-group",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.7.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Material 3 button group — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "md3",
+    "material",
+    "button-group",
+    "md3-button-group"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@nucleux/utils": "0.7.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1",
+    "lucide-react": "^0.469.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/md3-button-group"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
 }