@spark-ui/components 10.8.2 → 10.10.0

package/dist/accordion/index.mjs

@@ -1,6 +1,3 @@
-import {
-  Collapsible
-} from "../chunk-3LEFXZNI.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
@@ -10,48 +7,44 @@ import {
 } from "../chunk-6QCEPQ3U.mjs";
 
 // src/accordion/Accordion.tsx
-import * as accordion from "@zag-js/accordion";
-import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { Accordion as BaseAccordion } from "@base-ui-components/react/accordion";
 import { cx } from "class-variance-authority";
-import { createContext, useContext, useId } from "react";
+import { createContext, useContext } from "react";
+
+// src/accordion/useRenderSlot.tsx
 import { jsx } from "react/jsx-runtime";
+function useRenderSlot(asChild, defaultTag) {
+  const Component = asChild ? Slot : defaultTag;
+  return asChild ? ({ ...props }) => /* @__PURE__ */ jsx(Component, { ...props }) : void 0;
+}
+
+// src/accordion/Accordion.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var AccordionContext = createContext(null);
 var Accordion = ({
   asChild = false,
   children,
-  collapsible = true,
-  className,
-  defaultValue,
   design = "outlined",
-  disabled = false,
+  hiddenUntilFound = true,
   multiple = false,
-  value,
-  onValueChange,
+  className,
   ref,
   ...props
 }) => {
-  const [machineProps, localProps] = accordion.splitProps({
-    children,
-    multiple,
-    collapsible,
-    value,
-    disabled,
-    className: cx("bg-surface rounded-lg h-fit", className),
-    ...props
-  });
-  const service = useMachine(accordion.machine, {
-    ...machineProps,
-    defaultValue,
-    value,
-    id: useId(),
-    onValueChange(details) {
-      onValueChange?.(details.value);
+  const renderSlot = useRenderSlot(asChild, "div");
+  return /* @__PURE__ */ jsx2(AccordionContext.Provider, { value: { design }, children: /* @__PURE__ */ jsx2(
+    BaseAccordion.Root,
+    {
+      "data-spark-component": "accordion",
+      ref,
+      openMultiple: multiple,
+      hiddenUntilFound,
+      className: cx("bg-surface h-fit rounded-lg", className),
+      render: renderSlot,
+      ...props,
+      children
     }
-  });
-  const Component = asChild ? Slot : "div";
-  const api = accordion.connect(service, normalizeProps);
-  const mergedProps = mergeProps(api.getRootProps(), localProps);
-  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { ...api, design }, children: /* @__PURE__ */ jsx(Component, { "data-spark-component": "accordion", ref, ...mergedProps, children }) });
+  ) });
 };
 Accordion.displayName = "Accordion";
 var useAccordionContext = () => {
@@ -63,80 +56,41 @@ var useAccordionContext = () => {
 };
 
 // src/accordion/AccordionItem.tsx
-import { mergeProps as mergeProps2 } from "@zag-js/react";
+import { Accordion as BaseAccordion2 } from "@base-ui-components/react/accordion";
 import { cx as cx2 } from "class-variance-authority";
-
-// src/accordion/AccordionItemContext.tsx
-import {
-  createContext as createContext2,
-  useContext as useContext2,
-  useState
-} from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var AccordionItemContext = createContext2(null);
-var AccordionItemProvider = ({
-  value: valueProp,
-  disabled: disabledProp = false,
-  children
-}) => {
-  const [value, setValue] = useState(valueProp);
-  const [disabled, setDisabled] = useState(disabledProp);
-  return /* @__PURE__ */ jsx2(AccordionItemContext.Provider, { value: { value, setValue, disabled, setDisabled }, children });
-};
-var useAccordionItemContext = () => {
-  const context = useContext2(AccordionItemContext);
-  if (!context) {
-    throw Error("useAccordionItemContext must be used within a AccordionItem provider");
-  }
-  return context;
-};
-
-// src/accordion/AccordionItem.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var Item = ({
   asChild = false,
   className,
   children,
-  disabled = false,
-  value,
   ref,
   ...props
 }) => {
-  const accordion2 = useAccordionContext();
-  const localProps = {
-    className: cx2(
-      "relative first:rounded-t-lg last:rounded-b-lg",
-      "not-last:border-b-0",
-      { "border-sm border-outline": accordion2.design === "outlined" },
-      className
-    ),
-    asChild,
-    ...props
-  };
-  const itemProps = accordion2.getItemProps({ value, ...disabled && { disabled } });
-  const mergedProps = mergeProps2(itemProps, localProps);
-  const item = accordion2.getItemState({ value });
-  const itemContentProps = accordion2.getItemContentProps({ value });
-  return /* @__PURE__ */ jsx3(AccordionItemProvider, { value, disabled, children: /* @__PURE__ */ jsx3(
-    Collapsible,
+  const accordion = useAccordionContext();
+  const renderSlot = useRenderSlot(asChild, "div");
+  return /* @__PURE__ */ jsx3(
+    BaseAccordion2.Item,
     {
       ref,
-      open: item.expanded,
       "data-spark-component": "accordion-item",
-      ids: { content: itemContentProps.id },
-      ...mergedProps,
+      render: renderSlot,
+      className: cx2(
+        "relative first:rounded-t-lg last:rounded-b-lg",
+        "not-last:border-b-0",
+        { "border-sm border-outline": accordion.design === "outlined" },
+        className
+      ),
+      ...props,
       children
     }
-  ) });
+  );
 };
 Item.displayName = "Accordion.Item";
 
 // src/accordion/AccordionItemContent.tsx
-import { createSplitProps } from "@spark-ui/internal-utils";
-import { mergeProps as mergeProps3 } from "@zag-js/react";
+import { Accordion as BaseAccordion3 } from "@base-ui-components/react/accordion";
 import { cx as cx3 } from "class-variance-authority";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var splitVisibilityProps = createSplitProps();
 var ItemContent = ({
   asChild = false,
   className,
@@ -144,20 +98,23 @@ var ItemContent = ({
   ref,
   ...props
 }) => {
-  const accordion2 = useAccordionContext();
-  const accordionItem = useAccordionItemContext();
-  const localProps = {
-    className: cx3("[&>:first-child]:p-lg", "text-body-1 text-on-surface", className),
-    asChild,
-    ...props
-  };
-  const contentProps = accordion2.getItemContentProps({
-    value: accordionItem.value,
-    ...accordionItem.disabled && { disabled: accordionItem.disabled }
-  });
-  const [, itemContentProps] = splitVisibilityProps(contentProps, ["hidden", "data-state"]);
-  const mergedProps = mergeProps3(itemContentProps, localProps);
-  return /* @__PURE__ */ jsx4(Collapsible.Content, { ref, "data-spark-component": "accordion-item-content", ...mergedProps, children });
+  const renderSlot = useRenderSlot(asChild, "div");
+  return /* @__PURE__ */ jsx4(
+    BaseAccordion3.Panel,
+    {
+      ref,
+      "data-spark-component": "accordion-item-content",
+      className: cx3(
+        "[&>:first-child]:p-lg overflow-hidden",
+        "h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0",
+        "text-body-1 text-on-surface",
+        className
+      ),
+      render: renderSlot,
+      ...props,
+      children
+    }
+  );
 };
 ItemContent.displayName = "Accordion.ItemContent";
 
@@ -184,8 +141,8 @@ var ItemHeader = ({
 ItemHeader.displayName = "Accordion.ItemHeader";
 
 // src/accordion/AccordionItemTrigger.tsx
+import { Accordion as BaseAccordion4 } from "@base-ui-components/react/accordion";
 import { ArrowHorizontalDown } from "@spark-ui/icons/ArrowHorizontalDown";
-import { mergeProps as mergeProps4 } from "@zag-js/react";
 import { cx as cx5 } from "class-variance-authority";
 import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 var ItemTrigger = ({
@@ -195,39 +152,40 @@ var ItemTrigger = ({
   ref,
   ...props
 }) => {
-  const { getItemTriggerProps } = useAccordionContext();
-  const { value, disabled } = useAccordionItemContext();
-  const Component = asChild ? Slot : "button";
-  const localProps = {
-    ...props,
-    className: cx5(
-      "relative flex gap-lg justify-between items-center min-h-sz-48",
-      "w-full px-lg py-md text-left text-headline-2 text-on-surface rounded-[inherit] data-[state=open]:rounded-b-0",
-      "hover:enabled:bg-surface-hovered focus:bg-surface-hovered",
-      "focus-visible:u-outline focus-visible:outline-hidden focus-visible:z-raised",
-      "disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed",
-      className
-    )
-  };
-  const mergedProps = mergeProps4(
-    getItemTriggerProps({ value, ...disabled && { disabled } }),
-    localProps
+  const renderSlot = useRenderSlot(asChild, "button");
+  return /* @__PURE__ */ jsxs(
+    BaseAccordion4.Trigger,
+    {
+      ref,
+      "data-spark-component": "accordion-item-trigger",
+      render: renderSlot,
+      className: cx5(
+        "group",
+        "gap-lg min-h-sz-48 relative flex items-center justify-between",
+        "px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left",
+        "hover:enabled:bg-surface-hovered focus:bg-surface-hovered",
+        "focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden",
+        "disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6("div", { className: "gap-lg flex grow items-center", children }),
+        /* @__PURE__ */ jsx6(
+          Icon,
+          {
+            intent: "neutral",
+            className: cx5(
+              "shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none",
+              "group-data-[panel-open]:rotate-180"
+            ),
+            size: "sm",
+            children: /* @__PURE__ */ jsx6(ArrowHorizontalDown, {})
+          }
+        )
+      ]
+    }
   );
-  const isOpen = !!mergedProps["aria-expanded"];
-  return /* @__PURE__ */ jsxs(Component, { ref, "data-spark-component": "accordion-item-trigger", ...mergedProps, children: [
-    /* @__PURE__ */ jsx6("div", { className: "gap-lg flex grow items-center", children }),
-    /* @__PURE__ */ jsx6(
-      Icon,
-      {
-        intent: "neutral",
-        className: cx5("shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none", {
-          "rotate-180": isOpen
-        }),
-        size: "sm",
-        children: /* @__PURE__ */ jsx6(ArrowHorizontalDown, {})
-      }
-    )
-  ] });
 };
 ItemTrigger.displayName = "Accordion.ItemTrigger";
 

package/dist/accordion/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/accordion/Accordion.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContext.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/accordion/index.ts"],"sourcesContent":["import * as accordion from '@zag-js/accordion'\nimport { mergeProps, normalizeProps, type PropTypes, useMachine } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, createContext, Ref, useContext, useId } from 'react'\n\nimport { Slot } from '../slot'\n\ntype ExtentedZagInterface = Omit<\n  accordion.Props,\n  'id' | 'ids' | 'orientation' | 'getRootNode' | 'onValueChange'\n> &\n  Omit<ComponentPropsWithoutRef<'div'>, 'defaultChecked'>\n\nexport interface AccordionProps extends ExtentedZagInterface {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  /**\n   * Whether an accordion item can be closed after it has been expanded.\n   */\n  collapsible?: boolean\n  defaultValue?: accordion.Props['value']\n  /**\n   * Whether the accordion items are disabled\n   */\n  disabled?: boolean\n  /**\n   * Whether multiple accordion items can be expanded at the same time.\n   */\n  multiple?: boolean\n  /**\n   * The `value` of the accordion items that are currently being expanded.\n   */\n  value?: string[]\n  /**\n   * The callback fired when the state of expanded/collapsed accordion items changes.\n   */\n  onValueChange?: (value: string[]) => void\n  design?: 'filled' | 'outlined'\n  ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<\n  | (accordion.Api<PropTypes> & {\n      design: 'filled' | 'outlined'\n    })\n  | null\n>(null)\n\nexport const Accordion = ({\n  asChild = false,\n  children,\n  collapsible = true,\n  className,\n  defaultValue,\n  design = 'outlined',\n  disabled = false,\n  multiple = false,\n  value,\n  onValueChange,\n  ref,\n  ...props\n}: AccordionProps) => {\n  const [machineProps, localProps] = accordion.splitProps({\n    children,\n    multiple,\n    collapsible,\n    value,\n    disabled,\n    className: cx('bg-surface rounded-lg h-fit', className),\n    ...props,\n  })\n\n  const service = useMachine(accordion.machine, {\n    ...machineProps,\n    defaultValue,\n    value,\n    id: useId(),\n    onValueChange(details) {\n      onValueChange?.(details.value)\n    },\n  })\n\n  const Component = asChild ? Slot : 'div'\n  const api = accordion.connect(service, normalizeProps)\n\n  const mergedProps = mergeProps(api.getRootProps(), localProps)\n\n  return (\n    <AccordionContext.Provider value={{ ...api, design }}>\n      <Component data-spark-component=\"accordion\" ref={ref} {...mergedProps}>\n        {children}\n      </Component>\n    </AccordionContext.Provider>\n  )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n  const context = useContext(AccordionContext)\n\n  if (!context) {\n    throw Error('useAccordionContext must be used within a Accordion provider')\n  }\n\n  return context\n}\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Collapsible } from '../collapsible'\nimport { useAccordionContext } from './Accordion'\nimport { AccordionItemProvider } from './AccordionItemContext'\n\nexport interface AccordionItemProps extends ComponentPropsWithoutRef<'div'> {\n  value: string\n  asChild?: boolean\n  disabled?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Item = ({\n  asChild = false,\n  className,\n  children,\n  disabled = false,\n  value,\n  ref,\n  ...props\n}: AccordionItemProps) => {\n  const accordion = useAccordionContext()\n\n  const localProps = {\n    className: cx(\n      'relative first:rounded-t-lg last:rounded-b-lg',\n      'not-last:border-b-0',\n      { 'border-sm border-outline': accordion.design === 'outlined' },\n      className\n    ),\n    asChild,\n    ...props,\n  }\n\n  const itemProps = accordion.getItemProps({ value, ...(disabled && { disabled }) })\n  const mergedProps = mergeProps(itemProps, localProps)\n\n  const item = accordion.getItemState({ value })\n  const itemContentProps = accordion.getItemContentProps({ value })\n\n  return (\n    <AccordionItemProvider value={value} disabled={disabled}>\n      <Collapsible\n        ref={ref}\n        open={item.expanded}\n        data-spark-component=\"accordion-item\"\n        ids={{ content: itemContentProps.id }}\n        {...mergedProps}\n      >\n        {children}\n      </Collapsible>\n    </AccordionItemProvider>\n  )\n}\n\nItem.displayName = 'Accordion.Item'\n","import {\n  createContext,\n  Dispatch,\n  type PropsWithChildren,\n  SetStateAction,\n  useContext,\n  useState,\n} from 'react'\n\ninterface AccordionItemContextState {\n  value: string\n  setValue: Dispatch<SetStateAction<string>>\n  disabled: boolean\n  setDisabled: Dispatch<SetStateAction<boolean>>\n}\n\nconst AccordionItemContext = createContext<AccordionItemContextState | null>(null)\n\nexport const AccordionItemProvider = ({\n  value: valueProp,\n  disabled: disabledProp = false,\n  children,\n}: PropsWithChildren<{ value: string; disabled?: boolean }>) => {\n  const [value, setValue] = useState<string>(valueProp)\n  const [disabled, setDisabled] = useState<boolean>(disabledProp)\n\n  return (\n    <AccordionItemContext.Provider value={{ value, setValue, disabled, setDisabled }}>\n      {children}\n    </AccordionItemContext.Provider>\n  )\n}\n\nexport const useAccordionItemContext = () => {\n  const context = useContext(AccordionItemContext)\n\n  if (!context) {\n    throw Error('useAccordionItemContext must be used within a AccordionItem provider')\n  }\n\n  return context\n}\n","import { createSplitProps } from '@spark-ui/internal-utils'\nimport { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Collapsible } from '../collapsible'\nimport { useAccordionContext } from './Accordion'\nimport { useAccordionItemContext } from './AccordionItemContext'\n\nexport interface AccordionItemContentProps extends ComponentPropsWithoutRef<'div'> {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nconst splitVisibilityProps = createSplitProps<{\n  hidden?: boolean\n  'data-state'?: string\n}>()\n\nexport const ItemContent = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: AccordionItemContentProps) => {\n  const accordion = useAccordionContext()\n  const accordionItem = useAccordionItemContext()\n\n  const localProps = {\n    className: cx('[&>:first-child]:p-lg', 'text-body-1 text-on-surface', className),\n    asChild,\n    ...props,\n  }\n  const contentProps = accordion.getItemContentProps({\n    value: accordionItem.value,\n    ...(accordionItem.disabled && { disabled: accordionItem.disabled }),\n  })\n\n  const [, itemContentProps] = splitVisibilityProps(contentProps, ['hidden', 'data-state'])\n\n  const mergedProps = mergeProps(itemContentProps, localProps)\n\n  return (\n    <Collapsible.Content ref={ref} data-spark-component=\"accordion-item-content\" {...mergedProps}>\n      {children}\n    </Collapsible.Content>\n  )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n  asChild?: boolean\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n}: AccordionItemHeaderProps) => {\n  const Component = asChild ? Slot : 'h3'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"accordion-item-header\"\n      className={cx('rounded-[inherit]', className)}\n    >\n      {children}\n    </Component>\n  )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\nimport { useAccordionContext } from './Accordion'\nimport { useAccordionItemContext } from './AccordionItemContext'\n\nexport interface AccordionItemTriggerProps extends ComponentPropsWithoutRef<'button'> {\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n  ...props\n}: AccordionItemTriggerProps) => {\n  const { getItemTriggerProps } = useAccordionContext()\n  const { value, disabled } = useAccordionItemContext()\n\n  const Component = asChild ? Slot : 'button'\n\n  const localProps = {\n    ...props,\n    className: cx(\n      'relative flex gap-lg justify-between items-center min-h-sz-48',\n      'w-full px-lg py-md text-left text-headline-2 text-on-surface rounded-[inherit] data-[state=open]:rounded-b-0',\n      'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n      'focus-visible:u-outline focus-visible:outline-hidden focus-visible:z-raised',\n      'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n      className\n    ),\n  }\n\n  const mergedProps = mergeProps(\n    getItemTriggerProps({ value, ...(disabled && { disabled }) }),\n    localProps\n  )\n\n  const isOpen = !!mergedProps['aria-expanded']\n\n  return (\n    <Component ref={ref} data-spark-component=\"accordion-item-trigger\" {...mergedProps}>\n      <div className=\"gap-lg flex grow items-center\">{children}</div>\n      <Icon\n        intent=\"neutral\"\n        className={cx('shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none', {\n          'rotate-180': isOpen,\n        })}\n        size=\"sm\"\n      >\n        <ArrowHorizontalDown />\n      </Icon>\n    </Component>\n  )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\nexport const Accordion: typeof Root & {\n  Item: typeof Item\n  ItemHeader: typeof ItemHeader\n  ItemTrigger: typeof ItemTrigger\n  ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n  Item,\n  ItemHeader,\n  ItemTrigger,\n  ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n"],"mappings":"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","names":["mergeProps","cx","createContext","useContext","jsx","jsx","accordion","cx","mergeProps","mergeProps","cx","jsx","accordion","cx","mergeProps","cx","jsx","cx","mergeProps","cx","jsx","cx","mergeProps","Accordion"]}
+{"version":3,"sources":["../../src/accordion/Accordion.tsx","../../src/accordion/useRenderSlot.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/accordion/index.ts"],"sourcesContent":["import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, createContext, Ref, useContext } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<\n  ComponentProps<typeof BaseAccordion.Root>,\n  'openMultiple' | 'render'\n>\n\nexport interface AccordionProps extends ExtentedZagInterface {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  /**\n   * Whether the accordion items are disabled\n   */\n  disabled?: boolean\n  /**\n   * Whether multiple items can be open at the same time.\n   */\n  multiple?: boolean\n  design?: 'filled' | 'outlined'\n  ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<{\n  design: 'filled' | 'outlined'\n} | null>(null)\n\nexport const Accordion = ({\n  asChild = false,\n  children,\n  design = 'outlined',\n  hiddenUntilFound = true,\n  multiple = false,\n  className,\n  ref,\n  ...props\n}: AccordionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <AccordionContext.Provider value={{ design }}>\n      <BaseAccordion.Root\n        data-spark-component=\"accordion\"\n        ref={ref}\n        openMultiple={multiple}\n        hiddenUntilFound={hiddenUntilFound}\n        className={cx('bg-surface h-fit rounded-lg', className)}\n        render={renderSlot}\n        {...props}\n      >\n        {children}\n      </BaseAccordion.Root>\n    </AccordionContext.Provider>\n  )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n  const context = useContext(AccordionContext)\n\n  if (!context) {\n    throw Error('useAccordionContext must be used within a Accordion provider')\n  }\n\n  return context\n}\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useAccordionContext } from './Accordion'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>\n\nexport interface AccordionItemProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Item = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: AccordionItemProps) => {\n  const accordion = useAccordionContext()\n\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <BaseAccordion.Item\n      ref={ref}\n      data-spark-component=\"accordion-item\"\n      render={renderSlot}\n      className={cx(\n        'relative first:rounded-t-lg last:rounded-b-lg',\n        'not-last:border-b-0',\n        { 'border-sm border-outline': accordion.design === 'outlined' },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </BaseAccordion.Item>\n  )\n}\n\nItem.displayName = 'Accordion.Item'\n","import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>\n\nexport interface AccordionItemContentProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const ItemContent = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: AccordionItemContentProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <BaseAccordion.Panel\n      ref={ref}\n      data-spark-component=\"accordion-item-content\"\n      className={cx(\n        '[&>:first-child]:p-lg overflow-hidden',\n        'h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0',\n        'text-body-1 text-on-surface',\n        className\n      )}\n      render={renderSlot}\n      {...props}\n    >\n      {children}\n    </BaseAccordion.Panel>\n  )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n  asChild?: boolean\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n}: AccordionItemHeaderProps) => {\n  const Component = asChild ? Slot : 'h3'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"accordion-item-header\"\n      className={cx('rounded-[inherit]', className)}\n    >\n      {children}\n    </Component>\n  )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>\n\nexport interface AccordionItemTriggerProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n  ...props\n}: AccordionItemTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAccordion.Trigger\n      ref={ref}\n      data-spark-component=\"accordion-item-trigger\"\n      render={renderSlot}\n      className={cx(\n        'group',\n        'gap-lg min-h-sz-48 relative flex items-center justify-between',\n        'px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left',\n        'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n        'focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden',\n        'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"gap-lg flex grow items-center\">{children}</div>\n      <Icon\n        intent=\"neutral\"\n        className={cx(\n          'shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none',\n          'group-data-[panel-open]:rotate-180'\n        )}\n        size=\"sm\"\n      >\n        <ArrowHorizontalDown />\n      </Icon>\n    </BaseAccordion.Trigger>\n  )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\nexport const Accordion: typeof Root & {\n  Item: typeof Item\n  ItemHeader: typeof ItemHeader\n  ItemTrigger: typeof ItemTrigger\n  ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n  Item,\n  ItemHeader,\n  ItemTrigger,\n  ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n"],"mappings":"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","names":["jsx","BaseAccordion","cx","jsx","BaseAccordion","cx","BaseAccordion","cx","jsx","BaseAccordion","cx","cx","jsx","cx","BaseAccordion","cx","jsx","BaseAccordion","cx","Accordion"]}

package/dist/alert-dialog/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { e as DialogProps, C as CloseProps, h as BodyProps, f as ContentProps, n as DescriptionProps, i as FooterProps, g as HeaderProps, k as OverlayProps, l as PortalProps, m as TitleProps, j as TriggerProps } from '../DialogTrigger-5SI4dvpK.mjs';
+import { e as DialogProps, C as CloseProps, h as BodyProps, f as ContentProps, n as DescriptionProps, i as FooterProps, g as HeaderProps, k as OverlayProps, l as PortalProps, m as TitleProps, j as TriggerProps } from '../DialogTrigger-woU7vsJi.mjs';
 import { Ref, MutableRefObject } from 'react';
 import 'radix-ui';
 import 'class-variance-authority/types';

package/dist/alert-dialog/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { e as DialogProps, C as CloseProps, h as BodyProps, f as ContentProps, n as DescriptionProps, i as FooterProps, g as HeaderProps, k as OverlayProps, l as PortalProps, m as TitleProps, j as TriggerProps } from '../DialogTrigger-5SI4dvpK.js';
+import { e as DialogProps, C as CloseProps, h as BodyProps, f as ContentProps, n as DescriptionProps, i as FooterProps, g as HeaderProps, k as OverlayProps, l as PortalProps, m as TitleProps, j as TriggerProps } from '../DialogTrigger-woU7vsJi.js';
 import { Ref, MutableRefObject } from 'react';
 import 'radix-ui';
 import 'class-variance-authority/types';

package/dist/alert-dialog/index.js

@@ -33,14 +33,18 @@ var import_react2 = require("react");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var DialogContext = (0, import_react.createContext)(null);
-var DialogProvider = ({ children: childrenProp }) => {
+var DialogProvider = ({
+  children: childrenProp,
+  withFade = false
+}) => {
   const [isFullScreen, setIsFullScreen] = (0, import_react.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     DialogContext.Provider,
     {
       value: {
         isFullScreen,
-        setIsFullScreen
+        setIsFullScreen,
+        withFade
       },
       children: childrenProp
     }
@@ -56,7 +60,7 @@ var useDialog = () => {
 
 // src/dialog/Dialog.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Dialog = ({ children, ...rest }) => {
+var Dialog = ({ children, withFade = false, ...rest }) => {
   const open = rest.open;
   const activeElementRef = (0, import_react2.useRef)(null);
   function handleActiveElementFocus() {
@@ -71,42 +75,52 @@ var Dialog = ({ children, ...rest }) => {
     }
   }
   (0, import_react2.useEffect)(handleActiveElementFocus, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DialogProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Dialog.Root, { ...rest, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DialogProvider, { withFade, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Dialog.Root, { ...rest, children }) });
 };
 Dialog.displayName = "Dialog.Root";
 
-// src/dialog/DialogBody.styles.ts
-var import_class_variance_authority = require("class-variance-authority");
-var dialogBodyStyles = (0, import_class_variance_authority.cva)(
-  ["grow", "overflow-y-auto", "outline-hidden", "focus-visible:u-outline"],
-  {
-    variants: {
-      inset: {
-        true: "",
-        false: "px-xl py-lg"
-      }
-    }
-  }
-);
-
 // src/dialog/DialogBody.tsx
+var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
+var import_use_scroll_overflow = require("@spark-ui/hooks/use-scroll-overflow");
+var import_class_variance_authority = require("class-variance-authority");
+var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Body = ({
   children,
   className,
   inset = false,
-  ref,
+  ref: forwardedRef,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-  "div",
-  {
-    "data-spark-component": "dialog-body",
-    ref,
-    className: dialogBodyStyles({ inset, className }),
-    ...rest,
-    children
-  }
-);
+}) => {
+  const scrollAreaRef = (0, import_react3.useRef)(null);
+  const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, scrollAreaRef);
+  const { withFade } = useDialog();
+  const overflow = (0, import_use_scroll_overflow.useScrollOverflow)(scrollAreaRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-spark-component": "dialog-body",
+      ref,
+      className: (0, import_class_variance_authority.cx)(
+        "focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
+        "transition-all duration-300",
+        {
+          ["px-xl py-lg"]: !inset
+        },
+        className
+      ),
+      style: {
+        ...withFade && {
+          maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
+          maskSize: `100% calc(100% + ${overflow.top ? "0px" : "44px"} + ${overflow.bottom ? "0px" : "44px"})`,
+          maskPosition: `0 ${overflow.top ? "0px" : "-44px"}`
+        }
+      },
+      ...rest,
+      children
+    }
+  );
+};
 Body.displayName = "Dialog.Body";
 
 // src/dialog/DialogClose.tsx
@@ -120,11 +134,11 @@ var import_Close = require("@spark-ui/icons/Close");
 var import_class_variance_authority7 = require("class-variance-authority");
 
 // src/icon/Icon.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/slot/Slot.tsx
 var import_radix_ui3 = require("radix-ui");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Slottable = import_radix_ui3.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
@@ -132,7 +146,7 @@ var Slot = ({ ref, ...props }) => {
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
-  return (0, import_react3.isValidElement)(children) ? (0, import_react3.cloneElement)(
+  return (0, import_react4.isValidElement)(children) ? (0, import_react4.cloneElement)(
     children,
     void 0,
     callback(children.props.children)
@@ -210,9 +224,9 @@ var Icon = ({
   children,
   ...others
 }) => {
-  const child = import_react4.Children.only(children);
+  const child = import_react5.Children.only(children);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    (0, import_react4.cloneElement)(child, {
+    (0, import_react5.cloneElement)(child, {
       className: iconStyles({ className, size, intent }),
       "data-spark-component": "icon",
       "aria-hidden": "true",
@@ -226,7 +240,7 @@ Icon.displayName = "Icon";
 
 // src/button/Button.tsx
 var import_class_variance_authority5 = require("class-variance-authority");
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/spinner/Spinner.styles.tsx
 var import_internal_utils2 = require("@spark-ui/internal-utils");
@@ -978,7 +992,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react5.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react6.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -1108,7 +1122,7 @@ Root.displayName = "Dialog.CloseButton";
 
 // src/dialog/DialogContent.tsx
 var import_radix_ui4 = require("radix-ui");
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/dialog/DialogContent.styles.tsx
 var import_class_variance_authority8 = require("class-variance-authority");
@@ -1168,7 +1182,7 @@ var Content = ({
   ...rest
 }) => {
   const { setIsFullScreen } = useDialog();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (size === "fullscreen") setIsFullScreen(true);
     return () => setIsFullScreen(false);
   }, [setIsFullScreen, size]);
@@ -1339,13 +1353,13 @@ var AlertDialogBody = (props) => {
 AlertDialogBody.displayName = "AlertDialog.Body";
 
 // src/alert-dialog/AlertDialogCancel.tsx
-var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
+var import_use_merge_refs2 = require("@spark-ui/hooks/use-merge-refs");
 
 // src/alert-dialog/AlertDialogContext.ts
-var import_react7 = require("react");
-var AlertDialogContext = (0, import_react7.createContext)(null);
+var import_react8 = require("react");
+var AlertDialogContext = (0, import_react8.createContext)(null);
 var useAlertDialog = () => {
-  const context = (0, import_react7.useContext)(AlertDialogContext);
+  const context = (0, import_react8.useContext)(AlertDialogContext);
   if (!context) {
     throw Error("useAlertDialog must be used within a RadioGroup provider");
   }
@@ -1356,7 +1370,7 @@ var useAlertDialog = () => {
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var AlertDialogCancel = ({ ref: forwardedRef, ...props }) => {
   const { cancelRef } = useAlertDialog();
-  const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, cancelRef);
+  const ref = (0, import_use_merge_refs2.useMergeRefs)(forwardedRef, cancelRef);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Dialog2.Close, { ref, "data-spark-component": "alert-dialog-cancel", ...props });
 };
 AlertDialogCancel.displayName = "AlertDialog.Cancel";
@@ -1364,7 +1378,7 @@ AlertDialogCancel.displayName = "AlertDialog.Cancel";
 // src/alert-dialog/AlertDialogContent.tsx
 var import_class_variance_authority13 = require("class-variance-authority");
 var import_internal = require("radix-ui/internal");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var AlertDialogContent = ({
   className,
@@ -1372,8 +1386,8 @@ var AlertDialogContent = ({
   ref,
   ...others
 }) => {
-  const cancelRef = (0, import_react8.useRef)(null);
-  const value = (0, import_react8.useMemo)(() => {
+  const cancelRef = (0, import_react9.useRef)(null);
+  const value = (0, import_react9.useMemo)(() => {
     return { cancelRef };
   }, []);
   const handleOpenAutoFocus = (event) => {