@spear-ai/spectral 1.4.24 → 1.4.25

package/dist/RadioButtonGroup/RadioButtonGroupBase.d.ts

@@ -17,5 +17,11 @@ export type RadioButtonGroupItemProps = AsChildProp & {
     onSelect?: (value: string) => void;
 };
 export declare const RadioButtonGroupBase: ({ value, onValueChange, children, className, isKeptActive, expanded }: RadioButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RadioButtonGroupItem: ({ value, children, className, disabled, asChild, onSelect }: RadioButtonGroupItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioButtonGroupItem: import('react').ForwardRefExoticComponent<AsChildProp & {
+    value: string;
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=RadioButtonGroupBase.d.ts.map

package/dist/RadioButtonGroup/RadioButtonGroupBase.js

@@ -1,37 +1,38 @@
 "use client";
 import "../styles/main.css";
 import { jsx as a } from "react/jsx-runtime";
-import { Slot as x } from "../primitives/slot.js";
-import { cn as c } from "../utils/twUtils.js";
-import { createContext as h, useContext as w } from "react";
-const u = h(null), R = ({ value: t, onValueChange: n, children: i, className: o, isKeptActive: r = !1, expanded: e = !1 }) => /* @__PURE__ */ a(u.Provider, { value: { value: t, onValueChange: n, isKeptActive: r, expanded: e }, children: /* @__PURE__ */ a("div", { role: "radiogroup", "data-testid": "spectral-radio-button-group", "data-expanded": e, className: c("flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", "data-[expanded=true]:w-full", o), children: i }) }), _ = ({ value: t, children: n, className: i, disabled: o = !1, asChild: r = !1, onSelect: e }) => {
-  const s = w(u);
+import { Slot as h } from "../primitives/slot.js";
+import { cn as u } from "../utils/twUtils.js";
+import { createContext as w, forwardRef as B, useContext as R } from "react";
+const c = w(null), z = ({ value: t, onValueChange: n, children: i, className: o, isKeptActive: r = !1, expanded: e = !1 }) => /* @__PURE__ */ a(c.Provider, { value: { value: t, onValueChange: n, isKeptActive: r, expanded: e }, children: /* @__PURE__ */ a("div", { role: "radiogroup", "data-testid": "spectral-radio-button-group", "data-expanded": e, className: u("flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", "data-[expanded=true]:w-full", o), children: i }) }), y = B(({ value: t, children: n, className: i, disabled: o = !1, asChild: r = !1, onSelect: e }, g) => {
+  const s = R(c);
   if (!s)
     throw new Error("RadioButtonGroupItem must be used within a RadioButtonGroup");
-  const { value: g, onValueChange: d, isKeptActive: b, expanded: f } = s, l = g === t, p = () => {
+  const { value: f, onValueChange: d, isKeptActive: b, expanded: p } = s, l = f === t, v = () => {
     o || (d && d(t), e && e(t));
-  }, v = r ? x : "button", m = {
+  }, m = r ? h : "button", x = {
     role: "radio",
     "aria-checked": l,
     "data-state": l ? "on" : "off",
     "data-testid": "spectral-radio-button-group-item",
     disabled: o,
-    onClick: p,
-    className: c(
+    onClick: v,
+    className: u(
       `bg-toggle-bg inline-flex items-center justify-center gap-2 border text-sm font-medium disabled:pointer-events-none disabled:opacity-50
       disabled:cursor-not-allowed hover:cursor-pointer text-toggle-text hover:bg-toggle-bg--hover hover:text-toggle-text--hover transition-[colors]
       [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus:outline-none
       outline-none border-toggle-border hover:border-toggle-border--hover h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4
       rounded-none shadow-none focus:z-10 focus-visible:z-10 [&:not(:first-child)]:border-l-0 active:bg-toggle-bg--active active:text-toggle-text--active
       active:border-toggle-border--active`,
-      f && "w-full",
+      p && "w-full",
       b && "data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active",
       i
     )
   };
-  return /* @__PURE__ */ a(v, { ...!r && { type: "button" }, ...m, children: n });
-};
+  return /* @__PURE__ */ a(m, { ref: g, ...!r && { type: "button" }, ...x, children: n });
+});
+y.displayName = "RadioButtonGroupItem";
 export {
-  R as RadioButtonGroupBase,
-  _ as RadioButtonGroupItem
+  z as RadioButtonGroupBase,
+  y as RadioButtonGroupItem
 };

package/dist/RadioButtonGroup.d.ts

@@ -3,5 +3,11 @@ import { ComponentProps } from 'react';
 export type RadioButtonGroupProps = ComponentProps<typeof RadioButtonGroupBase>;
 export type RadioButtonGroupItemProps = RadioButtonGroupItemPropsBase;
 export declare const RadioButtonGroup: ({ className, children, ...props }: RadioButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RadioButtonGroupItem: ({ value, children, className, disabled, asChild, onSelect }: RadioButtonGroupItemPropsBase) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioButtonGroupItem: import('react').ForwardRefExoticComponent<import('../../primitives/slot').AsChildProp & {
+    value: string;
+    children: import('react').ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=RadioButtonGroup.d.ts.map

package/dist/ToggleGroup.js

@@ -18,18 +18,18 @@ const m = w({
     "data-size": e,
     "data-layout": a,
     className: c(
-      "group/toggle-group [&[data-variant='outline']]:bg-toggle-group-bg flex h-fit w-fit [&[data-layout='expanded']]:w-full items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md [&[data-variant='outline']]:gap-0.25",
+      "group/toggle-group [&[data-variant='outline']]:bg-toggle-group-bg flex h-fit w-fit [&[data-layout='expanded']]:w-full items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md [&[data-variant='outline']]:gap-0.25 px-2",
       r
     ),
     ...i,
     children: /* @__PURE__ */ s(m.Provider, { value: { variant: o, size: e, layout: a, activeColor: l, activeTextColor: d }, children: n })
   }
-), I = h(({ className: r, children: o, variant: e, size: a, value: l, layout: d, activeColor: n, activeTextColor: i, style: v, ...f }, y) => {
-  const t = A(m), g = t.variant ?? e, u = t.size ?? a, p = t.layout ?? d, x = n ?? t.activeColor, b = i ?? t.activeTextColor;
+), I = h(({ className: r, children: o, variant: e, size: a, value: l, layout: d, activeColor: n, activeTextColor: i, style: v, ...f }, x) => {
+  const t = A(m), g = t.variant ?? e, u = t.size ?? a, p = t.layout ?? d, y = n ?? t.activeColor, b = i ?? t.activeTextColor;
   return /* @__PURE__ */ s(
     C,
     {
-      ref: y,
+      ref: x,
       "data-slot": "toggle-group-item",
       "data-testid": "spectral-toggle-group-item",
       "data-variant": g,
@@ -45,7 +45,7 @@ const m = w({
         "group data-[variant=outline]:border-togglegroup-border rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0",
         r
       ),
-      style: { ...z(x, b), ...v },
+      style: { ...z(y, b), ...v },
       ...f,
       children: o
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spear-ai/spectral",
-  "version": "1.4.24",
+  "version": "1.4.25",
   "type": "module",
   "private": false,
   "repository": {
@@ -107,7 +107,7 @@
     "prettier": "^3.7.4",
     "prettier-plugin-sort-imports": "^1.8.9",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "storybook": "^10.1.4",
+    "storybook": "^10.1.10",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^39.0.1",
     "tailwindcss": "^4.1.17",