@spark-ui/components 10.9.0 → 10.11.0

package/dist/collapsible/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/collapsible/index.ts","../../src/collapsible/Collapsible.tsx","../../src/slot/Slot.tsx","../../src/collapsible/CollapsibleContent.tsx","../../src/collapsible/CollapsibleTrigger.tsx"],"sourcesContent":["import { Collapsible as Root } from './Collapsible'\nimport { Content } from './CollapsibleContent'\nimport { Trigger } from './CollapsibleTrigger'\n\nexport const Collapsible: typeof Root & {\n  Trigger: typeof Trigger\n  Content: typeof Content\n} = Object.assign(Root, {\n  Trigger,\n  Content,\n})\n\nCollapsible.displayName = 'Collapsible'\nTrigger.displayName = 'Collapsible.Trigger'\nContent.displayName = 'Collapsible.Content'\n\nexport { type CollapsibleProps } from './Collapsible'\nexport { type CollapsibleContentProps } from './CollapsibleContent'\nexport { type CollapsibleTriggerProps } from './CollapsibleTrigger'\n","import * as collapsible from '@zag-js/collapsible'\nimport { mergeProps, normalizeProps, type PropTypes, useMachine } from '@zag-js/react'\nimport { type ComponentProps, createContext, Ref, useContext, useId } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface CollapsibleProps extends ComponentProps<'div'> {\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   * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * When `true`, prevents the user from interacting with the collapsible.\n   */\n  disabled?: boolean\n  /**\n   * Event handler called when the open state of the collapsible changes.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * The controlled open state of the collapsible. Must be used in conjunction with `onOpenChange`.\n   */\n  open?: boolean\n  /**\n   * The ids of the elements in the collapsible. Useful for composition\n   */\n  ids?: collapsible.Props['ids']\n  ref?: Ref<HTMLDivElement>\n}\n\nconst CollapsibleContext = createContext<collapsible.Api<PropTypes> | null>(null)\n\nexport const Collapsible = ({\n  asChild = false,\n  children,\n  defaultOpen = false,\n  disabled = false,\n  onOpenChange,\n  open,\n  ids,\n  ref,\n  ...props\n}: CollapsibleProps) => {\n  const service = useMachine(collapsible.machine, {\n    open,\n    defaultOpen,\n    disabled,\n    id: useId(),\n    ids,\n    onOpenChange(details) {\n      onOpenChange?.(details.open)\n    },\n  })\n  const api = collapsible.connect(service, normalizeProps)\n  const Component = asChild ? Slot : 'div'\n\n  const mergedProps = mergeProps(api.getRootProps(), props)\n\n  return (\n    <CollapsibleContext.Provider value={api}>\n      <Component data-spark-component=\"collapsible\" ref={ref} {...mergedProps}>\n        {children}\n      </Component>\n    </CollapsibleContext.Provider>\n  )\n}\n\nCollapsible.displayName = 'Collapsible'\n\nexport const useCollapsibleContext = () => {\n  const context = useContext(CollapsibleContext)\n\n  if (!context) {\n    throw Error('useCollapsibleContext must be used within a Collapsible provider')\n  }\n\n  return context\n}\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { useCollapsibleContext } from './Collapsible'\n\nexport interface CollapsibleContentProps extends ComponentPropsWithoutRef<'div'> {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Content = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: CollapsibleContentProps) => {\n  const { getContentProps } = useCollapsibleContext()\n\n  const Component = asChild ? Slot : 'div'\n  const contentProps = getContentProps()\n  const mergedProps = mergeProps(contentProps, {\n    className: cx(\n      'overflow-hidden',\n      'motion-reduce:animate-none!',\n      '[&[hidden]]:hidden',\n      'data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out',\n      className\n    ),\n    ...props,\n  })\n\n  return (\n    <Component ref={ref} data-spark-component=\"collapsible-content\" {...mergedProps}>\n      {children}\n    </Component>\n  )\n}\n\nContent.displayName = 'Collapsible.Content'\n","import { mergeProps } from '@zag-js/react'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { useCollapsibleContext } from './Collapsible'\n\nexport interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<'button'> {\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({ asChild = false, children, ref, ...props }: CollapsibleTriggerProps) => {\n  const collapsibleContext = useCollapsibleContext()\n  const Component = asChild ? Slot : 'button'\n  const mergedProps = mergeProps(collapsibleContext.getTriggerProps(), props)\n\n  return (\n    <Component ref={ref} data-spark-component=\"collapsible-trigger\" {...mergedProps}>\n      {children}\n    </Component>\n  )\n}\n\nTrigger.displayName = 'Collapsible.Trigger'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,qBAAAA;AAAA;AAAA;;;ACAA,kBAA6B;AAC7B,IAAAC,gBAAuE;AACvE,IAAAA,gBAA2E;;;ACF3E,sBAAkC;AAClC,mBAOO;AASE;AAPF,IAAM,YAAwC,gBAAAC,KAAU;AAMxD,IAAM,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,MAAiB;AACpD,SAAO,4CAAC,gBAAAA,KAAU,MAAV,EAAe,KAAW,GAAG,OAAO;AAC9C;;;AD8CM,IAAAC,sBAAA;AA9BN,IAAM,yBAAqB,6BAAiD,IAAI;AAEzE,IAAM,cAAc,CAAC;AAAA,EAC1B,UAAU;AAAA,EACV;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,cAAU,0BAAuB,qBAAS;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAI,qBAAM;AAAA,IACV;AAAA,IACA,aAAa,SAAS;AACpB,qBAAe,QAAQ,IAAI;AAAA,IAC7B;AAAA,EACF,CAAC;AACD,QAAM,MAAkB,oBAAQ,SAAS,4BAAc;AACvD,QAAM,YAAY,UAAU,OAAO;AAEnC,QAAM,kBAAc,0BAAW,IAAI,aAAa,GAAG,KAAK;AAExD,SACE,6CAAC,mBAAmB,UAAnB,EAA4B,OAAO,KAClC,uDAAC,aAAU,wBAAqB,eAAc,KAAW,GAAG,aACzD,UACH,GACF;AAEJ;AAEA,YAAY,cAAc;AAEnB,IAAM,wBAAwB,MAAM;AACzC,QAAM,cAAU,0BAAW,kBAAkB;AAE7C,MAAI,CAAC,SAAS;AACZ,UAAM,MAAM,kEAAkE;AAAA,EAChF;AAEA,SAAO;AACT;;;AEjFA,IAAAC,gBAA2B;AAC3B,sCAAmB;AAkCf,IAAAC,sBAAA;AAvBG,IAAM,UAAU,CAAC;AAAA,EACtB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,gBAAgB,IAAI,sBAAsB;AAElD,QAAM,YAAY,UAAU,OAAO;AACnC,QAAM,eAAe,gBAAgB;AACrC,QAAM,kBAAc,0BAAW,cAAc;AAAA,IAC3C,eAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AAED,SACE,6CAAC,aAAU,KAAU,wBAAqB,uBAAuB,GAAG,aACjE,UACH;AAEJ;AAEA,QAAQ,cAAc;;;ACzCtB,IAAAC,gBAA2B;AAiBvB,IAAAC,sBAAA;AANG,IAAM,UAAU,CAAC,EAAE,UAAU,OAAO,UAAU,KAAK,GAAG,MAAM,MAA+B;AAChG,QAAM,qBAAqB,sBAAsB;AACjD,QAAM,YAAY,UAAU,OAAO;AACnC,QAAM,kBAAc,0BAAW,mBAAmB,gBAAgB,GAAG,KAAK;AAE1E,SACE,6CAAC,aAAU,KAAU,wBAAqB,uBAAuB,GAAG,aACjE,UACH;AAEJ;AAEA,QAAQ,cAAc;;;AJnBf,IAAMC,eAGT,OAAO,OAAO,aAAM;AAAA,EACtB;AAAA,EACA;AACF,CAAC;AAEDA,aAAY,cAAc;AAC1B,QAAQ,cAAc;AACtB,QAAQ,cAAc;","names":["Collapsible","import_react","RadixSlot","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime","Collapsible"]}
+{"version":3,"sources":["../../src/collapsible/index.ts","../../src/collapsible/Content.tsx","../../src/slot/Slot.tsx","../../src/collapsible/useRenderSlot.tsx","../../src/collapsible/Root.tsx","../../src/collapsible/Trigger.tsx"],"sourcesContent":["import { Content } from './Content'\nimport { Root } from './Root'\nimport { Trigger } from './Trigger'\n\nexport const Collapsible: typeof Root & {\n  Trigger: typeof Trigger\n  Content: typeof Content\n} = Object.assign(Root, {\n  Trigger,\n  Content,\n})\n\nCollapsible.displayName = 'Collapsible'\nTrigger.displayName = 'Collapsible.Trigger'\nContent.displayName = 'Collapsible.Content'\n","import { Collapsible } from '@base-ui-components/react/collapsible'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface ContentProps extends ComponentProps<typeof Collapsible.Panel> {\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\nexport const Content = ({\n  asChild = false,\n  className,\n  children,\n  hiddenUntilFound = true,\n  ...props\n}: ContentProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <Collapsible.Panel\n      data-spark-component=\"collapsible-content\"\n      className={cx(\n        'overflow-hidden',\n        'h-[var(--collapsible-panel-height)]',\n        'transition-all duration-200',\n        'motion-reduce:transition-none',\n        'data-[starting-style]:h-0',\n        'data-[ending-style]:h-0',\n        className\n      )}\n      render={renderSlot}\n      hiddenUntilFound={hiddenUntilFound}\n      {...props}\n    >\n      {children}\n    </Collapsible.Panel>\n  )\n}\n\nContent.displayName = 'Collapsible.Content'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\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 { Collapsible } from '@base-ui-components/react/collapsible'\nimport { type ComponentProps } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface RootProps extends ComponentProps<typeof Collapsible.Root> {\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\nexport const Root = ({ asChild = false, children, ...props }: RootProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <Collapsible.Root data-spark-component=\"collapsible\" render={renderSlot} {...props}>\n      {children}\n    </Collapsible.Root>\n  )\n}\n\nRoot.displayName = 'Collapsible'\n","import { Collapsible } from '@base-ui-components/react/collapsible'\nimport { type ComponentProps } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TriggerProps extends ComponentProps<'button'> {\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\nexport const Trigger = ({ asChild = false, children, ...props }: TriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <Collapsible.Trigger data-spark-component=\"collapsible-trigger\" render={renderSlot} {...props}>\n      {children}\n    </Collapsible.Trigger>\n  )\n}\n\nTrigger.displayName = 'Collapsible.Trigger'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,qBAAAA;AAAA;AAAA;;;ACAA,yBAA4B;AAC5B,sCAAmB;;;ACDnB,sBAAkC;AAClC,mBAOO;AASE;AAPF,IAAM,YAAwC,gBAAAC,KAAU;AAMxD,IAAM,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,MAAiB;AACpD,SAAO,4CAAC,gBAAAA,KAAU,MAAV,EAAe,KAAW,GAAG,OAAO;AAC9C;;;ACbqC,IAAAC,sBAAA;AAH9B,SAAS,cAAc,SAAkB,YAAoB;AAClE,QAAM,YAAY,UAAU,OAAO;AAEnC,SAAO,UAAU,CAAC,EAAE,GAAG,MAAM,MAAM,6CAAC,aAAW,GAAG,OAAO,IAAK;AAChE;;;AFiBI,IAAAC,sBAAA;AAVG,IAAM,UAAU,CAAC;AAAA,EACtB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,GAAG;AACL,MAAoB;AAClB,QAAM,aAAa,cAAc,SAAS,KAAK;AAE/C,SACE;AAAA,IAAC,+BAAY;AAAA,IAAZ;AAAA,MACC,wBAAqB;AAAA,MACrB,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,QAAQ,cAAc;;;AG3CtB,IAAAC,sBAA4B;AAgBxB,IAAAC,sBAAA;AAJG,IAAM,OAAO,CAAC,EAAE,UAAU,OAAO,UAAU,GAAG,MAAM,MAAiB;AAC1E,QAAM,aAAa,cAAc,SAAS,KAAK;AAE/C,SACE,6CAAC,gCAAY,MAAZ,EAAiB,wBAAqB,eAAc,QAAQ,YAAa,GAAG,OAC1E,UACH;AAEJ;AAEA,KAAK,cAAc;;;ACtBnB,IAAAC,sBAA4B;AAgBxB,IAAAC,sBAAA;AAJG,IAAM,UAAU,CAAC,EAAE,UAAU,OAAO,UAAU,GAAG,MAAM,MAAoB;AAChF,QAAM,aAAa,cAAc,SAAS,QAAQ;AAElD,SACE,6CAAC,gCAAY,SAAZ,EAAoB,wBAAqB,uBAAsB,QAAQ,YAAa,GAAG,OACrF,UACH;AAEJ;AAEA,QAAQ,cAAc;;;ALlBf,IAAMC,eAGT,OAAO,OAAO,MAAM;AAAA,EACtB;AAAA,EACA;AACF,CAAC;AAEDA,aAAY,cAAc;AAC1B,QAAQ,cAAc;AACtB,QAAQ,cAAc;","names":["Collapsible","RadixSlot","import_jsx_runtime","import_jsx_runtime","import_collapsible","import_jsx_runtime","import_collapsible","import_jsx_runtime","Collapsible"]}

package/dist/collapsible/index.mjs

@@ -1,8 +1,77 @@
 import {
-  Collapsible
-} from "../chunk-3LEFXZNI.mjs";
-import "../chunk-6QCEPQ3U.mjs";
+  Slot
+} from "../chunk-6QCEPQ3U.mjs";
+
+// src/collapsible/Content.tsx
+import { Collapsible } from "@base-ui-components/react/collapsible";
+import { cx } from "class-variance-authority";
+
+// src/collapsible/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/collapsible/Content.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Content = ({
+  asChild = false,
+  className,
+  children,
+  hiddenUntilFound = true,
+  ...props
+}) => {
+  const renderSlot = useRenderSlot(asChild, "div");
+  return /* @__PURE__ */ jsx2(
+    Collapsible.Panel,
+    {
+      "data-spark-component": "collapsible-content",
+      className: cx(
+        "overflow-hidden",
+        "h-[var(--collapsible-panel-height)]",
+        "transition-all duration-200",
+        "motion-reduce:transition-none",
+        "data-[starting-style]:h-0",
+        "data-[ending-style]:h-0",
+        className
+      ),
+      render: renderSlot,
+      hiddenUntilFound,
+      ...props,
+      children
+    }
+  );
+};
+Content.displayName = "Collapsible.Content";
+
+// src/collapsible/Root.tsx
+import { Collapsible as Collapsible2 } from "@base-ui-components/react/collapsible";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Root = ({ asChild = false, children, ...props }) => {
+  const renderSlot = useRenderSlot(asChild, "div");
+  return /* @__PURE__ */ jsx3(Collapsible2.Root, { "data-spark-component": "collapsible", render: renderSlot, ...props, children });
+};
+Root.displayName = "Collapsible";
+
+// src/collapsible/Trigger.tsx
+import { Collapsible as Collapsible3 } from "@base-ui-components/react/collapsible";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Trigger = ({ asChild = false, children, ...props }) => {
+  const renderSlot = useRenderSlot(asChild, "button");
+  return /* @__PURE__ */ jsx4(Collapsible3.Trigger, { "data-spark-component": "collapsible-trigger", render: renderSlot, ...props, children });
+};
+Trigger.displayName = "Collapsible.Trigger";
+
+// src/collapsible/index.ts
+var Collapsible4 = Object.assign(Root, {
+  Trigger,
+  Content
+});
+Collapsible4.displayName = "Collapsible";
+Trigger.displayName = "Collapsible.Trigger";
+Content.displayName = "Collapsible.Content";
 export {
-  Collapsible
+  Collapsible4 as Collapsible
 };
 //# sourceMappingURL=index.mjs.map

package/dist/collapsible/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../../src/collapsible/Content.tsx","../../src/collapsible/useRenderSlot.tsx","../../src/collapsible/Root.tsx","../../src/collapsible/Trigger.tsx","../../src/collapsible/index.ts"],"sourcesContent":["import { Collapsible } from '@base-ui-components/react/collapsible'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface ContentProps extends ComponentProps<typeof Collapsible.Panel> {\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\nexport const Content = ({\n  asChild = false,\n  className,\n  children,\n  hiddenUntilFound = true,\n  ...props\n}: ContentProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <Collapsible.Panel\n      data-spark-component=\"collapsible-content\"\n      className={cx(\n        'overflow-hidden',\n        'h-[var(--collapsible-panel-height)]',\n        'transition-all duration-200',\n        'motion-reduce:transition-none',\n        'data-[starting-style]:h-0',\n        'data-[ending-style]:h-0',\n        className\n      )}\n      render={renderSlot}\n      hiddenUntilFound={hiddenUntilFound}\n      {...props}\n    >\n      {children}\n    </Collapsible.Panel>\n  )\n}\n\nContent.displayName = 'Collapsible.Content'\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 { Collapsible } from '@base-ui-components/react/collapsible'\nimport { type ComponentProps } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface RootProps extends ComponentProps<typeof Collapsible.Root> {\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\nexport const Root = ({ asChild = false, children, ...props }: RootProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <Collapsible.Root data-spark-component=\"collapsible\" render={renderSlot} {...props}>\n      {children}\n    </Collapsible.Root>\n  )\n}\n\nRoot.displayName = 'Collapsible'\n","import { Collapsible } from '@base-ui-components/react/collapsible'\nimport { type ComponentProps } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TriggerProps extends ComponentProps<'button'> {\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\nexport const Trigger = ({ asChild = false, children, ...props }: TriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <Collapsible.Trigger data-spark-component=\"collapsible-trigger\" render={renderSlot} {...props}>\n      {children}\n    </Collapsible.Trigger>\n  )\n}\n\nTrigger.displayName = 'Collapsible.Trigger'\n","import { Content } from './Content'\nimport { Root } from './Root'\nimport { Trigger } from './Trigger'\n\nexport const Collapsible: typeof Root & {\n  Trigger: typeof Trigger\n  Content: typeof Content\n} = Object.assign(Root, {\n  Trigger,\n  Content,\n})\n\nCollapsible.displayName = 'Collapsible'\nTrigger.displayName = 'Collapsible.Trigger'\nContent.displayName = 'Collapsible.Content'\n"],"mappings":";;;;;AAAA,SAAS,mBAAmB;AAC5B,SAAS,UAAU;;;ACIkB;AAH9B,SAAS,cAAc,SAAkB,YAAoB;AAClE,QAAM,YAAY,UAAU,OAAO;AAEnC,SAAO,UAAU,CAAC,EAAE,GAAG,MAAM,MAAM,oBAAC,aAAW,GAAG,OAAO,IAAK;AAChE;;;ADiBI,gBAAAA,YAAA;AAVG,IAAM,UAAU,CAAC;AAAA,EACtB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,GAAG;AACL,MAAoB;AAClB,QAAM,aAAa,cAAc,SAAS,KAAK;AAE/C,SACE,gBAAAA;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,wBAAqB;AAAA,MACrB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,QAAQ,cAAc;;;AE3CtB,SAAS,eAAAC,oBAAmB;AAgBxB,gBAAAC,YAAA;AAJG,IAAM,OAAO,CAAC,EAAE,UAAU,OAAO,UAAU,GAAG,MAAM,MAAiB;AAC1E,QAAM,aAAa,cAAc,SAAS,KAAK;AAE/C,SACE,gBAAAA,KAACC,aAAY,MAAZ,EAAiB,wBAAqB,eAAc,QAAQ,YAAa,GAAG,OAC1E,UACH;AAEJ;AAEA,KAAK,cAAc;;;ACtBnB,SAAS,eAAAC,oBAAmB;AAgBxB,gBAAAC,YAAA;AAJG,IAAM,UAAU,CAAC,EAAE,UAAU,OAAO,UAAU,GAAG,MAAM,MAAoB;AAChF,QAAM,aAAa,cAAc,SAAS,QAAQ;AAElD,SACE,gBAAAA,KAACC,aAAY,SAAZ,EAAoB,wBAAqB,uBAAsB,QAAQ,YAAa,GAAG,OACrF,UACH;AAEJ;AAEA,QAAQ,cAAc;;;AClBf,IAAMC,eAGT,OAAO,OAAO,MAAM;AAAA,EACtB;AAAA,EACA;AACF,CAAC;AAEDA,aAAY,cAAc;AAC1B,QAAQ,cAAc;AACtB,QAAQ,cAAc;","names":["jsx","Collapsible","jsx","Collapsible","Collapsible","jsx","Collapsible","Collapsible"]}

package/dist/combobox/index.js

@@ -433,6 +433,17 @@ var filledVariants = [
       "enabled:active:bg-surface-hovered",
       "focus-visible:bg-surface-hovered"
     ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-surface-inverse",
+      "text-on-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
   }
 ];
 
@@ -538,6 +549,16 @@ var ghostVariants = [
       "enabled:active:bg-surface/dim-5",
       "focus-visible:bg-surface/dim-5"
     ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-surface-inverse",
+      "hover:bg-surface-inverse/dim-5",
+      "enabled:active:bg-surface-inverse/dim-5",
+      "focus-visible:bg-surface-inverse/dim-5"
+    ])
   }
 ];
 
@@ -643,6 +664,16 @@ var outlinedVariants = [
       "focus-visible:bg-surface/dim-5",
       "text-surface"
     ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-surface-inverse/dim-5",
+      "enabled:active:bg-surface-inverse/dim-5",
+      "focus-visible:bg-surface-inverse/dim-5",
+      "text-surface-inverse"
+    ])
   }
 ];
 
@@ -758,6 +789,17 @@ var tintedVariants = [
       "enabled:active:bg-surface-hovered",
       "focus-visible:bg-surface-hovered"
     ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-surface-inverse",
+      "text-on-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
   }
 ];
 
@@ -768,7 +810,7 @@ var contrastVariants = [
     intent: "main",
     design: "contrast",
     class: (0, import_internal_utils7.tw)([
-      "text-main",
+      "text-main bg-surface",
       "hover:bg-main-container-hovered",
       "enabled:active:bg-main-container-hovered",
       "focus-visible:bg-main-container-hovered"
@@ -778,7 +820,7 @@ var contrastVariants = [
     intent: "support",
     design: "contrast",
     class: (0, import_internal_utils7.tw)([
-      "text-support",
+      "text-support bg-surface",
       "hover:bg-support-container-hovered",
       "enabled:active:bg-support-container-hovered",
       "focus-visible:bg-support-container-hovered"
@@ -788,7 +830,7 @@ var contrastVariants = [
     intent: "accent",
     design: "contrast",
     class: (0, import_internal_utils7.tw)([
-      "text-accent",
+      "text-accent bg-surface",
       "hover:bg-accent-container-hovered",
       "enabled:active:bg-accent-container-hovered",
       "focus-visible:bg-accent-container-hovered"
@@ -798,7 +840,7 @@ var contrastVariants = [
     intent: "basic",
     design: "contrast",
     class: (0, import_internal_utils7.tw)([
-      "text-basic",
+      "text-basic bg-surface",
       "hover:bg-basic-container-hovered",
       "enabled:active:bg-basic-container-hovered",
       "focus-visible:bg-basic-container-hovered"
@@ -808,7 +850,7 @@ var contrastVariants = [
     intent: "success",
     design: "contrast",
     class: (0, import_internal_utils7.tw)([
-      "text-success",
+      "text-success bg-surface",
       "hover:bg-success-container-hovered",
       "enabled:active:bg-success-container-hovered",
       "focus-visible:bg-success-container-hovered"
@@ -818,7 +860,7 @@ var contrastVariants = [
     intent: "alert",
     design: "contrast",
     class: (0, import_internal_utils7.tw)([
-      "text-alert",
+      "text-alert bg-surface",
       "hover:bg-alert-container-hovered",
       "enabled:active:bg-alert-container-hovered",
       "focus-visible:bg-alert-container-hovered"
@@ -828,7 +870,7 @@ var contrastVariants = [
     intent: "danger",
     design: "contrast",
     class: (0, import_internal_utils7.tw)([
-      "text-error",
+      "text-error bg-surface",
       "hover:bg-error-container-hovered",
       "enabled:active:bg-error-container-hovered",
       "focus-visible:bg-error-container-hovered"
@@ -838,7 +880,7 @@ var contrastVariants = [
     intent: "info",
     design: "contrast",
     class: (0, import_internal_utils7.tw)([
-      "text-info",
+      "text-info bg-surface",
       "hover:bg-info-container-hovered",
       "enabled:active:bg-info-container-hovered",
       "focus-visible:bg-info-container-hovered"
@@ -848,7 +890,7 @@ var contrastVariants = [
     intent: "neutral",
     design: "contrast",
     class: (0, import_internal_utils7.tw)([
-      "text-neutral",
+      "text-neutral bg-surface",
       "hover:bg-neutral-container-hovered",
       "enabled:active:bg-neutral-container-hovered",
       "focus-visible:bg-neutral-container-hovered"
@@ -858,11 +900,21 @@ var contrastVariants = [
     intent: "surface",
     design: "contrast",
     class: (0, import_internal_utils7.tw)([
-      "text-on-surface",
+      "text-on-surface bg-surface",
       "hover:bg-surface-hovered",
       "enabled:active:bg-surface-hovered",
       "focus-visible:bg-surface-hovered"
     ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-surface-inverse bg-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
   }
 ];
 
@@ -896,7 +948,7 @@ var buttonStyles = (0, import_class_variance_authority4.cva)(
         outlined: ["bg-transparent", "border-sm", "border-current"],
         tinted: [],
         ghost: ["default:-mx-md px-md hover:bg-main/dim-5"],
-        contrast: ["bg-surface"]
+        contrast: []
       }),
       underline: {
         true: ["underline"]
@@ -914,7 +966,8 @@ var buttonStyles = (0, import_class_variance_authority4.cva)(
         danger: [],
         info: [],
         neutral: [],
-        surface: []
+        surface: [],
+        surfaceInverse: []
       }),
       /**
        * Size of the button.