@spark-ui/components 17.11.3 → 17.12.0

package/dist/toggle-group/ToggleGroup.d.ts

@@ -0,0 +1,35 @@
+import { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react';
+export interface ToggleGroupProps extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Whether multiple toggles can be pressed at the same time.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * The default value(s) of the toggle group when it is initially rendered.
+     * Use when you do not need to control its value(s).
+     * Must be an array even for single selection mode.
+     */
+    defaultValue?: readonly any[];
+    /**
+     * The controlled value(s) of the toggle group.
+     * Must be used in conjunction with `onValueChange`.
+     * Must be an array even for single selection mode.
+     */
+    value?: readonly any[];
+    /**
+     * Event handler called when the value changes.
+     * Always receives an array, even for single selection mode.
+     */
+    onValueChange?: (value: readonly any[]) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const ToggleGroup: {
+    ({ asChild, multiple, children, className, ref, ...rest }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/toggle-group/ToggleGroup.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const rootStyles: ({ className }: {
+    className?: string;
+}) => string;

package/dist/toggle-group/ToggleGroupToggle.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, Ref } from 'react';
+export interface ToggleGroupToggleProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * A unique value that identifies the toggle within the group.
+     */
+    value: any;
+    /**
+     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * When true, prevents the user from interacting with the toggle.
+     * @default false
+     */
+    disabled?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+}
+/** A toggle button within a toggle group. Renders a <button> element. */
+export declare const ToggleGroupToggle: {
+    ({ asChild, value, disabled, children, className, ref, ...rest }: ToggleGroupToggleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/toggle-group/index.d.mts

@@ -0,0 +1,10 @@
+import { ToggleGroup as Root } from './ToggleGroup';
+import { ToggleGroupToggle as Toggle } from './ToggleGroupToggle';
+/**
+ * A set of two-state buttons that can be toggled on or off within a group context.
+ */
+export declare const ToggleGroup: typeof Root & {
+    Toggle: typeof Toggle;
+};
+export { type ToggleGroupProps } from './ToggleGroup';
+export { type ToggleGroupToggleProps } from './ToggleGroupToggle';

package/dist/toggle-group/index.d.ts

@@ -0,0 +1,10 @@
+import { ToggleGroup as Root } from './ToggleGroup';
+import { ToggleGroupToggle as Toggle } from './ToggleGroupToggle';
+/**
+ * A set of two-state buttons that can be toggled on or off within a group context.
+ */
+export declare const ToggleGroup: typeof Root & {
+    Toggle: typeof Toggle;
+};
+export { type ToggleGroupProps } from './ToggleGroup';
+export { type ToggleGroupToggleProps } from './ToggleGroupToggle';

package/dist/toggle-group/index.js

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`),r=require(`@base-ui/react/toggle-group`),i=require(`@base-ui/react/toggle`);function a(t){return t?({...t})=>(0,n.jsx)(e.Slot,{...t}):void 0}var o=({asChild:e=!1,multiple:i=!1,children:o,className:s,ref:c,...l})=>{let u=a(e);return(0,n.jsx)(r.ToggleGroup,{...l,ref:c,multiple:i,className:(0,t.cx)(`gap-none inline-flex`,s),"data-spark-component":`toggle-group`,...e&&{render:u},children:o})};o.displayName=`ToggleGroup`;var s=({asChild:e=!1,value:r,disabled:o=!1,children:s,className:c,ref:l,...u})=>{let d=a(e);return(0,n.jsx)(i.Toggle,{"data-spark-component":`toggle-group-toggle`,ref:l,className:(0,t.cx)(`focus-visible:u-outline-inset`,`disabled:cursor-not-allowed disabled:opacity-dim-3`,c),...e&&{render:d},disabled:o,value:r,...u,children:s})};s.displayName=`ToggleGroup.Toggle`;var c=Object.assign(o,{Toggle:s});c.displayName=`ToggleGroup`,s.displayName=`ToggleGroup.Toggle`,exports.ToggleGroup=c;
+//# sourceMappingURL=index.js.map

package/dist/toggle-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/toggle-group/useRenderSlot.tsx","../../src/toggle-group/ToggleGroup.tsx","../../src/toggle-group/ToggleGroupToggle.tsx","../../src/toggle-group/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean) {\n  return asChild ? ({ ...props }: object) => <Slot {...props} /> : undefined\n}\n","import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface ToggleGroupProps extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether multiple toggles can be pressed at the same time.\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * The default value(s) of the toggle group when it is initially rendered.\n   * Use when you do not need to control its value(s).\n   * Must be an array even for single selection mode.\n   */\n  defaultValue?: readonly any[]\n  /**\n   * The controlled value(s) of the toggle group.\n   * Must be used in conjunction with `onValueChange`.\n   * Must be an array even for single selection mode.\n   */\n  value?: readonly any[]\n  /**\n   * Event handler called when the value changes.\n   * Always receives an array, even for single selection mode.\n   */\n  onValueChange?: (value: readonly any[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const ToggleGroup = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle-group\n   */\n  asChild = false,\n  multiple = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <BaseToggleGroup\n      {...rest}\n      ref={ref}\n      multiple={multiple}\n      className={cx('gap-none inline-flex', className)}\n      data-spark-component=\"toggle-group\"\n      {...(asChild && { render: renderSlot })}\n    >\n      {children}\n    </BaseToggleGroup>\n  )\n}\n\nToggleGroup.displayName = 'ToggleGroup'\n","import { Toggle } from '@base-ui/react/toggle'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface ToggleGroupToggleProps extends ComponentPropsWithoutRef<'button'> {\n  /**\n   * A unique value that identifies the toggle within the group.\n   */\n  value: any\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the toggle.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A toggle button within a toggle group. Renders a <button> element. */\nexport const ToggleGroupToggle = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupToggleProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <Toggle\n      data-spark-component=\"toggle-group-toggle\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline-inset',\n        'disabled:cursor-not-allowed disabled:opacity-dim-3',\n        className\n      )}\n      {...(asChild && { render: renderSlot })}\n      disabled={disabled}\n      value={value}\n      {...rest}\n    >\n      {children}\n    </Toggle>\n  )\n}\n\nToggleGroupToggle.displayName = 'ToggleGroup.Toggle'\n","import { ToggleGroup as Root } from './ToggleGroup'\nimport { ToggleGroupToggle as Toggle } from './ToggleGroupToggle'\n\n/**\n * A set of two-state buttons that can be toggled on or off within a group context.\n */\nexport const ToggleGroup: typeof Root & {\n  Toggle: typeof Toggle\n} = Object.assign(Root, {\n  Toggle,\n})\n\nToggleGroup.displayName = 'ToggleGroup'\nToggle.displayName = 'ToggleGroup.Toggle'\n\nexport { type ToggleGroupProps } from './ToggleGroup'\nexport { type ToggleGroupToggleProps } from './ToggleGroupToggle'\n"],"mappings":"4RAEA,SAAgB,EAAc,EAAkB,CAC9C,OAAO,GAAW,CAAE,GAAG,MAAoB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,GAAI,EAAS,CAAA,CAAG,IAAA,GCkCnE,IAAa,GAAe,CAK1B,UAAU,GACV,WAAW,GACX,WACA,YACA,MACA,GAAG,KACmB,CACtB,IAAM,EAAa,EAAc,EAAQ,CAEzC,OACE,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,GAAI,EACC,MACK,WACV,WAAA,EAAA,EAAA,IAAc,uBAAwB,EAAU,CAChD,uBAAqB,eACrB,GAAK,GAAW,CAAE,OAAQ,EAAY,CAErC,WACe,CAAA,EAItB,EAAY,YAAc,cCxC1B,IAAa,GAAqB,CAKhC,UAAU,GACV,QACA,WAAW,GACX,WACA,YACA,MACA,GAAG,KACyB,CAC5B,IAAM,EAAa,EAAc,EAAQ,CAEzC,OACE,EAAA,EAAA,KAAC,EAAA,OAAD,CACE,uBAAqB,sBAChB,MACL,WAAA,EAAA,EAAA,IACE,gCACA,qDACA,EACD,CACD,GAAK,GAAW,CAAE,OAAQ,EAAY,CAC5B,WACH,QACP,GAAI,EAEH,WACM,CAAA,EAIb,EAAkB,YAAc,qBCrDhC,IAAa,EAET,OAAO,OAAO,EAAM,CACtB,OAAA,EACD,CAAC,CAEF,EAAY,YAAc,cAC1B,EAAO,YAAc"}

package/dist/toggle-group/index.mjs

@@ -0,0 +1,48 @@
+import { Slot as e } from "../slot/index.mjs";
+import { cx as t } from "class-variance-authority";
+import { jsx as n } from "react/jsx-runtime";
+import { ToggleGroup as r } from "@base-ui/react/toggle-group";
+import { Toggle as i } from "@base-ui/react/toggle";
+//#region src/toggle-group/useRenderSlot.tsx
+function a(t) {
+	return t ? ({ ...t }) => /* @__PURE__ */ n(e, { ...t }) : void 0;
+}
+//#endregion
+//#region src/toggle-group/ToggleGroup.tsx
+var o = ({ asChild: e = !1, multiple: i = !1, children: o, className: s, ref: c, ...l }) => {
+	let u = a(e);
+	return /* @__PURE__ */ n(r, {
+		...l,
+		ref: c,
+		multiple: i,
+		className: t("gap-none inline-flex", s),
+		"data-spark-component": "toggle-group",
+		...e && { render: u },
+		children: o
+	});
+};
+o.displayName = "ToggleGroup";
+//#endregion
+//#region src/toggle-group/ToggleGroupToggle.tsx
+var s = ({ asChild: e = !1, value: r, disabled: o = !1, children: s, className: c, ref: l, ...u }) => {
+	let d = a(e);
+	return /* @__PURE__ */ n(i, {
+		"data-spark-component": "toggle-group-toggle",
+		ref: l,
+		className: t("focus-visible:u-outline-inset", "disabled:cursor-not-allowed disabled:opacity-dim-3", c),
+		...e && { render: d },
+		disabled: o,
+		value: r,
+		...u,
+		children: s
+	});
+};
+s.displayName = "ToggleGroup.Toggle";
+//#endregion
+//#region src/toggle-group/index.ts
+var c = Object.assign(o, { Toggle: s });
+c.displayName = "ToggleGroup", s.displayName = "ToggleGroup.Toggle";
+//#endregion
+export { c as ToggleGroup };
+
+//# sourceMappingURL=index.mjs.map

package/dist/toggle-group/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toggle-group/useRenderSlot.tsx","../../src/toggle-group/ToggleGroup.tsx","../../src/toggle-group/ToggleGroupToggle.tsx","../../src/toggle-group/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean) {\n  return asChild ? ({ ...props }: object) => <Slot {...props} /> : undefined\n}\n","import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface ToggleGroupProps extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether multiple toggles can be pressed at the same time.\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * The default value(s) of the toggle group when it is initially rendered.\n   * Use when you do not need to control its value(s).\n   * Must be an array even for single selection mode.\n   */\n  defaultValue?: readonly any[]\n  /**\n   * The controlled value(s) of the toggle group.\n   * Must be used in conjunction with `onValueChange`.\n   * Must be an array even for single selection mode.\n   */\n  value?: readonly any[]\n  /**\n   * Event handler called when the value changes.\n   * Always receives an array, even for single selection mode.\n   */\n  onValueChange?: (value: readonly any[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const ToggleGroup = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle-group\n   */\n  asChild = false,\n  multiple = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <BaseToggleGroup\n      {...rest}\n      ref={ref}\n      multiple={multiple}\n      className={cx('gap-none inline-flex', className)}\n      data-spark-component=\"toggle-group\"\n      {...(asChild && { render: renderSlot })}\n    >\n      {children}\n    </BaseToggleGroup>\n  )\n}\n\nToggleGroup.displayName = 'ToggleGroup'\n","import { Toggle } from '@base-ui/react/toggle'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface ToggleGroupToggleProps extends ComponentPropsWithoutRef<'button'> {\n  /**\n   * A unique value that identifies the toggle within the group.\n   */\n  value: any\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the toggle.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A toggle button within a toggle group. Renders a <button> element. */\nexport const ToggleGroupToggle = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupToggleProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <Toggle\n      data-spark-component=\"toggle-group-toggle\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline-inset',\n        'disabled:cursor-not-allowed disabled:opacity-dim-3',\n        className\n      )}\n      {...(asChild && { render: renderSlot })}\n      disabled={disabled}\n      value={value}\n      {...rest}\n    >\n      {children}\n    </Toggle>\n  )\n}\n\nToggleGroupToggle.displayName = 'ToggleGroup.Toggle'\n","import { ToggleGroup as Root } from './ToggleGroup'\nimport { ToggleGroupToggle as Toggle } from './ToggleGroupToggle'\n\n/**\n * A set of two-state buttons that can be toggled on or off within a group context.\n */\nexport const ToggleGroup: typeof Root & {\n  Toggle: typeof Toggle\n} = Object.assign(Root, {\n  Toggle,\n})\n\nToggleGroup.displayName = 'ToggleGroup'\nToggle.displayName = 'ToggleGroup.Toggle'\n\nexport { type ToggleGroupProps } from './ToggleGroup'\nexport { type ToggleGroupToggleProps } from './ToggleGroupToggle'\n"],"mappings":";;;;;;AAEA,SAAgB,EAAc,GAAkB;AAC9C,QAAO,KAAW,EAAE,GAAG,QAAoB,kBAAC,GAAD,EAAM,GAAI,GAAS,CAAA,GAAG,KAAA;;;;ACkCnE,IAAa,KAAe,EAK1B,aAAU,IACV,cAAW,IACX,aACA,cACA,QACA,GAAG,QACmB;CACtB,IAAM,IAAa,EAAc,EAAQ;AAEzC,QACE,kBAAC,GAAD;EACE,GAAI;EACC;EACK;EACV,WAAW,EAAG,wBAAwB,EAAU;EAChD,wBAAqB;EACrB,GAAK,KAAW,EAAE,QAAQ,GAAY;EAErC;EACe,CAAA;;AAItB,EAAY,cAAc;;;ACxC1B,IAAa,KAAqB,EAKhC,aAAU,IACV,UACA,cAAW,IACX,aACA,cACA,QACA,GAAG,QACyB;CAC5B,IAAM,IAAa,EAAc,EAAQ;AAEzC,QACE,kBAAC,GAAD;EACE,wBAAqB;EAChB;EACL,WAAW,EACT,iCACA,sDACA,EACD;EACD,GAAK,KAAW,EAAE,QAAQ,GAAY;EAC5B;EACH;EACP,GAAI;EAEH;EACM,CAAA;;AAIb,EAAkB,cAAc;;;ACrDhC,IAAa,IAET,OAAO,OAAO,GAAM,EACtB,QAAA,GACD,CAAC;AAEF,EAAY,cAAc,eAC1B,EAAO,cAAc"}

package/dist/toggle-group/useRenderSlot.d.ts

@@ -0,0 +1 @@
+export declare function useRenderSlot(asChild: boolean): (({ ...props }: object) => import("react/jsx-runtime").JSX.Element) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.11.3",
+  "version": "17.12.0",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -47,10 +47,10 @@
     "build": "NODE_OPTIONS='--max-old-space-size=8192' vite build"
   },
   "dependencies": {
-    "@base-ui/react": "1.0.0",
-    "@spark-ui/hooks": "17.11.3",
-    "@spark-ui/icons": "17.11.3",
-    "@spark-ui/internal-utils": "17.11.3",
+    "@base-ui/react": "^1.5.0",
+    "@spark-ui/hooks": "17.12.0",
+    "@spark-ui/icons": "17.12.0",
+    "@spark-ui/internal-utils": "17.12.0",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",
@@ -62,7 +62,7 @@
     "react-snap-carousel": "0.5.1"
   },
   "peerDependencies": {
-    "@spark-ui/theme-utils": "17.11.3",
+    "@spark-ui/theme-utils": "17.12.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"