@mastra/playground-ui 61.0.0 → 62.0.0-alpha.1

package/dist/section-Dq6aFxlH.js

@@ -0,0 +1,113 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as SettingsContainerLayout, d as SettingsRowLayout } from './settings-row-gpwIVAMN.js';
+import { T as Txt } from './Txt-BuzYj7Vy.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+function SectionContent(props) {
+  return /* @__PURE__ */ jsx(SettingsContainerLayout, { ...props, layout: "section" });
+}
+
+function SectionDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Txt,
+    {
+      variant: "caption",
+      tone: "muted",
+      "data-slot": "section-description",
+      className: cn("max-w-[62ch] text-pretty", className),
+      ...props
+    }
+  );
+}
+
+function SectionDivider({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { role: "separator", "aria-orientation": "horizontal", className: cn("h-px bg-border", className), ...props });
+}
+
+function SectionHeader({ children, className, inset = false, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      "data-slot": "section-header",
+      className: cn(
+        "group-data-[variant=default]/section:grid group-data-[variant=default]/section:grid-cols-[1fr_auto] group-data-[variant=default]/section:items-center",
+        "group-data-[variant=flat]/section:flex group-data-[variant=flat]/section:min-w-0 group-data-[variant=flat]/section:flex-col group-data-[variant=flat]/section:gap-3 group-data-[variant=flat]/section:pb-3 sm:group-data-[variant=flat]/section:flex-row sm:group-data-[variant=flat]/section:items-start sm:group-data-[variant=flat]/section:justify-between sm:group-data-[variant=flat]/section:gap-4",
+        "group-data-[variant=factory]/section:flex group-data-[variant=factory]/section:min-w-0 group-data-[variant=factory]/section:flex-col group-data-[variant=factory]/section:gap-2 sm:group-data-[variant=factory]/section:flex-row sm:group-data-[variant=factory]/section:items-start sm:group-data-[variant=factory]/section:justify-between sm:group-data-[variant=factory]/section:gap-4",
+        inset && "px-4",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+function SectionHeaderText({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "section-header-text", className: cn("flex min-w-0 flex-col gap-1.5", className), ...props });
+}
+
+function SectionHeading({ headingLevel = "h2", children, className, ...props }) {
+  const HeadingTag = headingLevel;
+  return /* @__PURE__ */ jsx(
+    HeadingTag,
+    {
+      "data-slot": "section-heading",
+      className: cn(
+        "group-data-[variant=default]/section:flex group-data-[variant=default]/section:items-center group-data-[variant=default]/section:gap-2 group-data-[variant=default]/section:text-subheading group-data-[variant=default]/section:text-muted-foreground group-data-[variant=default]/section:[&>svg]:size-[1.2em] group-data-[variant=default]/section:[&>svg]:opacity-50",
+        "group-data-[variant=flat]/section:text-subheading group-data-[variant=flat]/section:text-balance group-data-[variant=flat]/section:text-foreground",
+        "group-data-[variant=factory]/section:text-subheading group-data-[variant=factory]/section:text-balance group-data-[variant=factory]/section:text-foreground",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+function SectionRoot({ variant = "default", children, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "data-slot": "section",
+      "data-variant": variant,
+      className: cn(
+        "group/section",
+        variant === "default" && "grid gap-3",
+        variant === "flat" && "w-full min-w-0",
+        variant === "factory" && "flex w-full min-w-0 flex-col gap-2",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function SubSectionRoot({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("section", { className: cn("grid gap-2", className), ...props, children });
+}
+
+function SectionRow(props) {
+  return /* @__PURE__ */ jsx(SettingsRowLayout, { ...props, layout: "section" });
+}
+function SectionViewOnlyRow(props) {
+  return /* @__PURE__ */ jsx(SettingsRowLayout, { ...props, layout: "section", viewOnly: true });
+}
+function SectionDestructiveRow(props) {
+  return /* @__PURE__ */ jsx(SettingsRowLayout, { ...props, layout: "section", tone: "destructive" });
+}
+
+function Section(props) {
+  return /* @__PURE__ */ jsx(SectionRoot, { ...props });
+}
+Section.Header = SectionHeader;
+Section.HeaderText = SectionHeaderText;
+Section.Heading = SectionHeading;
+Section.Description = SectionDescription;
+Section.Content = SectionContent;
+Section.Row = SectionRow;
+Section.ViewOnlyRow = SectionViewOnlyRow;
+Section.DestructiveRow = SectionDestructiveRow;
+Section.Divider = SectionDivider;
+
+export { Section as S, SectionRoot as a, SubSectionRoot as b };
+//# sourceMappingURL=section-Dq6aFxlH.js.map

package/dist/section-Dq6aFxlH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-Dq6aFxlH.js","sources":["../src/ds/components/Section/section-content.tsx","../src/ds/components/Section/section-description.tsx","../src/ds/components/Section/section-divider.tsx","../src/ds/components/Section/section-header.tsx","../src/ds/components/Section/section-header-text.tsx","../src/ds/components/Section/section-heading.tsx","../src/ds/components/Section/section-root.tsx","../src/ds/components/Section/section-row.tsx","../src/ds/components/Section/section.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { SettingsContainerLayout } from '@/ds/new/settings/settings-container';\n\nexport type SectionContentProps = ComponentProps<'div'>;\n\nexport function SectionContent(props: SectionContentProps) {\n  return <SettingsContainerLayout {...props} layout=\"section\" />;\n}\n","import type { ComponentProps } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type SectionDescriptionProps = ComponentProps<'p'>;\n\nexport function SectionDescription({ className, ...props }: SectionDescriptionProps) {\n  return (\n    <Txt\n      variant=\"caption\"\n      tone=\"muted\"\n      data-slot=\"section-description\"\n      className={cn('max-w-[62ch] text-pretty', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type SectionDividerProps = ComponentProps<'div'>;\n\nexport function SectionDivider({ className, ...props }: SectionDividerProps) {\n  return <div role=\"separator\" aria-orientation=\"horizontal\" className={cn('h-px bg-border', className)} {...props} />;\n}\n","import type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type SectionHeaderProps = ComponentProps<'header'> & {\n  inset?: boolean;\n};\n\nexport function SectionHeader({ children, className, inset = false, ...props }: SectionHeaderProps) {\n  return (\n    <header\n      data-slot=\"section-header\"\n      className={cn(\n        'group-data-[variant=default]/section:grid group-data-[variant=default]/section:grid-cols-[1fr_auto] group-data-[variant=default]/section:items-center',\n        'group-data-[variant=flat]/section:flex group-data-[variant=flat]/section:min-w-0 group-data-[variant=flat]/section:flex-col group-data-[variant=flat]/section:gap-3 group-data-[variant=flat]/section:pb-3 sm:group-data-[variant=flat]/section:flex-row sm:group-data-[variant=flat]/section:items-start sm:group-data-[variant=flat]/section:justify-between sm:group-data-[variant=flat]/section:gap-4',\n        'group-data-[variant=factory]/section:flex group-data-[variant=factory]/section:min-w-0 group-data-[variant=factory]/section:flex-col group-data-[variant=factory]/section:gap-2 sm:group-data-[variant=factory]/section:flex-row sm:group-data-[variant=factory]/section:items-start sm:group-data-[variant=factory]/section:justify-between sm:group-data-[variant=factory]/section:gap-4',\n        inset && 'px-4',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n}\n","import type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type SectionHeaderTextProps = ComponentProps<'div'>;\n\nexport function SectionHeaderText({ className, ...props }: SectionHeaderTextProps) {\n  return <div data-slot=\"section-header-text\" className={cn('flex min-w-0 flex-col gap-1.5', className)} {...props} />;\n}\n","import type { ComponentProps, ElementType } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type SectionHeadingProps = ComponentProps<'h2'> & {\n  headingLevel?: 'h2' | 'h3' | 'h4';\n};\n\nexport function SectionHeading({ headingLevel = 'h2', children, className, ...props }: SectionHeadingProps) {\n  const HeadingTag: ElementType = headingLevel;\n\n  return (\n    <HeadingTag\n      data-slot=\"section-heading\"\n      className={cn(\n        'group-data-[variant=default]/section:flex group-data-[variant=default]/section:items-center group-data-[variant=default]/section:gap-2 group-data-[variant=default]/section:text-subheading group-data-[variant=default]/section:text-muted-foreground group-data-[variant=default]/section:[&>svg]:size-[1.2em] group-data-[variant=default]/section:[&>svg]:opacity-50',\n        'group-data-[variant=flat]/section:text-subheading group-data-[variant=flat]/section:text-balance group-data-[variant=flat]/section:text-foreground',\n        'group-data-[variant=factory]/section:text-subheading group-data-[variant=factory]/section:text-balance group-data-[variant=factory]/section:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </HeadingTag>\n  );\n}\n","import type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type SectionVariant = 'default' | 'flat' | 'factory';\n\nexport type SectionRootProps = ComponentProps<'section'> & {\n  variant?: SectionVariant;\n};\n\nexport function SectionRoot({ variant = 'default', children, className, ...props }: SectionRootProps) {\n  return (\n    <section\n      data-slot=\"section\"\n      data-variant={variant}\n      className={cn(\n        'group/section',\n        variant === 'default' && 'grid gap-3',\n        variant === 'flat' && 'w-full min-w-0',\n        variant === 'factory' && 'flex w-full min-w-0 flex-col gap-2',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </section>\n  );\n}\n\nexport function SubSectionRoot({ children, className, ...props }: ComponentProps<'section'>) {\n  return (\n    <section className={cn('grid gap-2', className)} {...props}>\n      {children}\n    </section>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { SettingsRowLayout } from '@/ds/new/settings/settings-row';\nimport type { SettingsRowProps } from '@/ds/new/settings/settings-row';\n\nexport type SectionRowProps = Omit<SettingsRowProps, 'tone' | 'viewOnly'>;\nexport type SectionViewOnlyRowProps = SectionRowProps & { children: ReactNode };\nexport type SectionDestructiveRowProps = SectionRowProps & { children: ReactNode };\n\n/** @deprecated Use SettingsRow from @mastra/playground-ui/new/settings for settings pages. */\nexport function SectionRow(props: SectionRowProps) {\n  return <SettingsRowLayout {...props} layout=\"section\" />;\n}\n\n/** @deprecated Use SettingsRow with viewOnly from @mastra/playground-ui/new/settings. */\nexport function SectionViewOnlyRow(props: SectionViewOnlyRowProps) {\n  return <SettingsRowLayout {...props} layout=\"section\" viewOnly />;\n}\n\n/** @deprecated Use SettingsRow with tone=\"destructive\" from @mastra/playground-ui/new/settings. */\nexport function SectionDestructiveRow(props: SectionDestructiveRowProps) {\n  return <SettingsRowLayout {...props} layout=\"section\" tone=\"destructive\" />;\n}\n","import { SectionContent } from './section-content';\nimport { SectionDescription } from './section-description';\nimport { SectionDivider } from './section-divider';\nimport { SectionHeader } from './section-header';\nimport { SectionHeaderText } from './section-header-text';\nimport { SectionHeading } from './section-heading';\nimport { SectionRoot, type SectionRootProps } from './section-root';\nimport { SectionDestructiveRow, SectionRow, SectionViewOnlyRow } from './section-row';\n\nexport { type SectionContentProps } from './section-content';\nexport { type SectionDescriptionProps } from './section-description';\nexport { type SectionDividerProps } from './section-divider';\nexport { type SectionHeaderProps } from './section-header';\nexport { type SectionHeaderTextProps } from './section-header-text';\nexport { type SectionHeadingProps } from './section-heading';\nexport { type SectionRootProps as SectionProps, type SectionVariant } from './section-root';\nexport { type SectionDestructiveRowProps, type SectionRowProps, type SectionViewOnlyRowProps } from './section-row';\n\nexport function Section(props: SectionRootProps) {\n  return <SectionRoot {...props} />;\n}\n\nSection.Header = SectionHeader;\nSection.HeaderText = SectionHeaderText;\nSection.Heading = SectionHeading;\nSection.Description = SectionDescription;\nSection.Content = SectionContent;\nSection.Row = SectionRow;\nSection.ViewOnlyRow = SectionViewOnlyRow;\nSection.DestructiveRow = SectionDestructiveRow;\nSection.Divider = SectionDivider;\n"],"names":[],"mappings":"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"}

package/dist/segmented-control-BCKoBuAT.cjs

@@ -0,0 +1,160 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const radio = require('@base-ui/react/radio');
+const radioGroup = require('@base-ui/react/radio-group');
+const React = require('react');
+const fieldControlAria = require('./field-control-aria-WzMGs0A4.cjs');
+const primitives_controlSize = require('./primitives/control-size.cjs.js');
+const primitives_raisedSurface = require('./primitives/raised-surface.cjs.js');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const mergeRefs = require('./merge-refs-BLbKe138.cjs');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const SegmentedControlContext = React__namespace.createContext(void 0);
+function SegmentedControl({
+  value,
+  onValueChange,
+  "aria-label": ariaLabel,
+  size = "md",
+  iconOnly = false,
+  className,
+  children,
+  ...props
+}) {
+  const itemRefs = React__namespace.useRef(/* @__PURE__ */ new Map());
+  const thumbRef = React__namespace.useRef(null);
+  const context = {
+    iconOnly,
+    registerItem: (itemValue, element) => itemRefs.current.set(itemValue, element),
+    unregisterItem: (itemValue) => itemRefs.current.delete(itemValue)
+  };
+  const isItemValue = (next) => typeof next === "string" && itemRefs.current.has(next);
+  React__namespace.useLayoutEffect(() => {
+    const thumb = thumbRef.current;
+    const item = itemRefs.current.get(value);
+    if (!thumb) return;
+    if (!item) {
+      thumb.hidden = true;
+      return;
+    }
+    const measure = () => {
+      thumb.style.width = `${item.offsetWidth}px`;
+      thumb.style.transform = `translateX(${item.offsetLeft}px)`;
+    };
+    measure();
+    let frame;
+    if (thumb.hidden) {
+      thumb.hidden = false;
+      frame = requestAnimationFrame(() => thumb.setAttribute("data-ready", ""));
+    }
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+    itemRefs.current.forEach((element) => observer?.observe(element));
+    return () => {
+      if (frame !== void 0) cancelAnimationFrame(frame);
+      observer?.disconnect();
+    };
+  }, [value, children]);
+  return /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlContext.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    radioGroup.RadioGroup,
+    {
+      ...props,
+      value,
+      onValueChange: (next) => {
+        if (isItemValue(next)) onValueChange(next);
+      },
+      "aria-label": ariaLabel,
+      ...fieldControlAria.keepOwnAccessibleName({ "aria-label": ariaLabel, "aria-labelledby": props["aria-labelledby"] }),
+      "data-slot": "segmented-control",
+      "data-size": size,
+      className: utils_cn.cn(
+        primitives_raisedSurface.raisedSurfaceStyle,
+        "relative inline-flex w-fit shrink-0 items-stretch rounded-full p-0.5",
+        // Circular icon items have no padding of their own to keep them apart.
+        iconOnly && "gap-0.5",
+        primitives_controlSize.controlHeight[size],
+        "data-[disabled]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            ref: thumbRef,
+            hidden: true,
+            "aria-hidden": "true",
+            "data-slot": "segmented-control-thumb",
+            className: utils_cn.cn(
+              "pointer-events-none absolute inset-y-0.5 left-0 rounded-full bg-fill-hover ring-1 ring-border ring-inset",
+              "motion-safe:data-[ready]:transition-[transform,width] motion-safe:data-[ready]:duration-normal motion-safe:data-[ready]:ease-out-custom"
+            )
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+}
+function SegmentedControlItem({
+  value,
+  disabled,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const context = React__namespace.useContext(SegmentedControlContext);
+  if (!context) throw new Error("SegmentedControlItem must be used inside a SegmentedControl");
+  const { iconOnly, registerItem, unregisterItem } = context;
+  const itemRef = mergeRefs.mergeRefs(ref, (element) => {
+    if (element) registerItem(value, element);
+    return () => unregisterItem(value);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radio.Radio.Root,
+    {
+      ...props,
+      render: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-labelledby": props["aria-labelledby"] }),
+      ref: itemRef,
+      value,
+      disabled,
+      "data-slot": "segmented-control-item",
+      className: utils_cn.cn(
+        "relative inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-full text-label whitespace-nowrap select-none",
+        iconOnly ? "aspect-square" : "px-3",
+        // A whole disabled group is dimmed on the track; a single disabled item dims itself.
+        disabled && "opacity-50",
+        "[&_svg]:size-3.5 [&_svg]:shrink-0",
+        "text-muted-foreground hover:text-foreground data-[checked]:text-foreground",
+        "focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:hover:text-muted-foreground",
+        primitives_transitions.controlStateColorTransition,
+        className
+      ),
+      children
+    }
+  );
+}
+
+exports.SegmentedControl = SegmentedControl;
+exports.SegmentedControlItem = SegmentedControlItem;
+//# sourceMappingURL=segmented-control-BCKoBuAT.cjs.map

package/dist/segmented-control-BCKoBuAT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control-BCKoBuAT.cjs","sources":["../src/ds/components/SegmentedControl/segmented-control.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport * as React from 'react';\n\nimport { keepOwnAccessibleName } from '@/ds/components/Field/field-control-aria';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { controlHeight } from '@/ds/primitives/control-size';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { mergeRefs } from '@/lib/merge-refs';\nimport { cn } from '@/lib/utils';\n\ntype SegmentedControlContextValue = {\n  iconOnly: boolean;\n  registerItem: (value: string, element: HTMLElement) => void;\n  unregisterItem: (value: string) => void;\n};\n\nconst SegmentedControlContext = React.createContext<SegmentedControlContextValue | undefined>(undefined);\n\ntype RadioGroupPassthroughProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'className' | 'children' | 'aria-label'\n>;\n\nexport type SegmentedControlProps<T extends string = string> = RadioGroupPassthroughProps & {\n  value: T;\n  onValueChange: (value: T) => void;\n  /** Accessible name of the group. */\n  'aria-label': string;\n  /** The track's outer height matches the control rung, so it lines up with a Button or Select in the same row. */\n  size?: ControlSize;\n  /** Every item is a circle holding only an icon; each item then needs its own `aria-label`. */\n  iconOnly?: boolean;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * A single choice between a few short options, all visible at once. A radio group underneath:\n * one tab stop, arrow keys move the selection. The selected item is marked by a thumb that\n * slides between items, so items keep their natural width.\n *\n * Use it to set a value (a policy, a theme, on/off), where the layout around it stays the same.\n * When the choice swaps what is shown below it (Form vs JSON, Overview vs Playground), use `Tabs`.\n *\n * ```tsx\n * <SegmentedControl aria-label=\"Permission\" value={policy} onValueChange={setPolicy}>\n *   <SegmentedControlItem value=\"allow\">Allow</SegmentedControlItem>\n *   <SegmentedControlItem value=\"ask\">Ask</SegmentedControlItem>\n * </SegmentedControl>\n * ```\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  onValueChange,\n  'aria-label': ariaLabel,\n  size = 'md',\n  iconOnly = false,\n  className,\n  children,\n  ...props\n}: SegmentedControlProps<T>) {\n  const itemRefs = React.useRef(new Map<string, HTMLElement>());\n  const thumbRef = React.useRef<HTMLSpanElement>(null);\n\n  const context: SegmentedControlContextValue = {\n    iconOnly,\n    registerItem: (itemValue, element) => itemRefs.current.set(itemValue, element),\n    unregisterItem: itemValue => itemRefs.current.delete(itemValue),\n  };\n\n  // Base UI reports the chosen value as `unknown`; accept only a value one of our items carries.\n  const isItemValue = (next: unknown): next is T => typeof next === 'string' && itemRefs.current.has(next);\n\n  // Measuring is layout work, so the thumb is positioned straight on the DOM instead of through\n  // state: no extra render, and it is in place before paint.\n  React.useLayoutEffect(() => {\n    const thumb = thumbRef.current;\n    const item = itemRefs.current.get(value);\n    if (!thumb) return;\n    if (!item) {\n      thumb.hidden = true;\n      return;\n    }\n    const measure = () => {\n      thumb.style.width = `${item.offsetWidth}px`;\n      thumb.style.transform = `translateX(${item.offsetLeft}px)`;\n    };\n    measure();\n    let frame: number | undefined;\n    if (thumb.hidden) {\n      // The first placement snaps; transitions switch on after it has painted.\n      thumb.hidden = false;\n      frame = requestAnimationFrame(() => thumb.setAttribute('data-ready', ''));\n    }\n    // Labels reflow when fonts load or the text changes; a sibling's resize moves this item too.\n    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);\n    itemRefs.current.forEach(element => observer?.observe(element));\n    return () => {\n      if (frame !== undefined) cancelAnimationFrame(frame);\n      observer?.disconnect();\n    };\n  }, [value, children]);\n\n  return (\n    <SegmentedControlContext.Provider value={context}>\n      <RadioGroupPrimitive\n        {...props}\n        value={value}\n        onValueChange={next => {\n          if (isItemValue(next)) onValueChange(next);\n        }}\n        aria-label={ariaLabel}\n        {...keepOwnAccessibleName({ 'aria-label': ariaLabel, 'aria-labelledby': props['aria-labelledby'] })}\n        data-slot=\"segmented-control\"\n        data-size={size}\n        className={cn(\n          raisedSurfaceStyle,\n          'relative inline-flex w-fit shrink-0 items-stretch rounded-full p-0.5',\n          // Circular icon items have no padding of their own to keep them apart.\n          iconOnly && 'gap-0.5',\n          controlHeight[size],\n          'data-[disabled]:opacity-50',\n          className,\n        )}\n      >\n        <span\n          ref={thumbRef}\n          hidden\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-thumb\"\n          className={cn(\n            'pointer-events-none absolute inset-y-0.5 left-0 rounded-full bg-fill-hover ring-1 ring-border ring-inset',\n            'motion-safe:data-[ready]:transition-[transform,width] motion-safe:data-[ready]:duration-normal motion-safe:data-[ready]:ease-out-custom',\n          )}\n        />\n        {children}\n      </RadioGroupPrimitive>\n    </SegmentedControlContext.Provider>\n  );\n}\n\nexport type SegmentedControlItemProps = Omit<RadioPrimitive.Root.Props, 'className' | 'value' | 'children'> & {\n  value: string;\n  /** Text, an icon and text, or only an icon when the control is `iconOnly`. */\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function SegmentedControlItem({\n  value,\n  disabled,\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedControlItemProps) {\n  const context = React.useContext(SegmentedControlContext);\n  if (!context) throw new Error('SegmentedControlItem must be used inside a SegmentedControl');\n  const { iconOnly, registerItem, unregisterItem } = context;\n  const itemRef = mergeRefs<HTMLElement>(ref, element => {\n    if (element) registerItem(value, element);\n    return () => unregisterItem(value);\n  });\n\n  return (\n    <RadioPrimitive.Root\n      {...props}\n      render={<span aria-labelledby={props['aria-labelledby']} />}\n      ref={itemRef}\n      value={value}\n      disabled={disabled}\n      data-slot=\"segmented-control-item\"\n      className={cn(\n        'relative inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-full text-label whitespace-nowrap select-none',\n        iconOnly ? 'aspect-square' : 'px-3',\n        // A whole disabled group is dimmed on the track; a single disabled item dims itself.\n        disabled && 'opacity-50',\n        '[&_svg]:size-3.5 [&_svg]:shrink-0',\n        'text-muted-foreground hover:text-foreground data-[checked]:text-foreground',\n        'focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:hover:text-muted-foreground',\n        controlStateColorTransition,\n        className,\n      )}\n    >\n      {children}\n    </RadioPrimitive.Root>\n  );\n}\n"],"names":["React","jsx","jsxs","RadioGroupPrimitive","keepOwnAccessibleName","cn","raisedSurfaceStyle","controlHeight","mergeRefs","RadioPrimitive","controlStateColorTransition"],"mappings":"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"}

package/dist/segmented-control-CUnvFStD.js

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup } from '@base-ui/react/radio-group';
+import * as React from 'react';
+import { k as keepOwnAccessibleName } from './field-control-aria-DB6y41tQ.js';
+import { controlHeight } from './primitives/control-size.es.js';
+import { raisedSurfaceStyle } from './primitives/raised-surface.es.js';
+import { controlStateColorTransition } from './primitives/transitions.es.js';
+import { m as mergeRefs } from './merge-refs-DA1xt2OQ.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+const SegmentedControlContext = React.createContext(void 0);
+function SegmentedControl({
+  value,
+  onValueChange,
+  "aria-label": ariaLabel,
+  size = "md",
+  iconOnly = false,
+  className,
+  children,
+  ...props
+}) {
+  const itemRefs = React.useRef(/* @__PURE__ */ new Map());
+  const thumbRef = React.useRef(null);
+  const context = {
+    iconOnly,
+    registerItem: (itemValue, element) => itemRefs.current.set(itemValue, element),
+    unregisterItem: (itemValue) => itemRefs.current.delete(itemValue)
+  };
+  const isItemValue = (next) => typeof next === "string" && itemRefs.current.has(next);
+  React.useLayoutEffect(() => {
+    const thumb = thumbRef.current;
+    const item = itemRefs.current.get(value);
+    if (!thumb) return;
+    if (!item) {
+      thumb.hidden = true;
+      return;
+    }
+    const measure = () => {
+      thumb.style.width = `${item.offsetWidth}px`;
+      thumb.style.transform = `translateX(${item.offsetLeft}px)`;
+    };
+    measure();
+    let frame;
+    if (thumb.hidden) {
+      thumb.hidden = false;
+      frame = requestAnimationFrame(() => thumb.setAttribute("data-ready", ""));
+    }
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+    itemRefs.current.forEach((element) => observer?.observe(element));
+    return () => {
+      if (frame !== void 0) cancelAnimationFrame(frame);
+      observer?.disconnect();
+    };
+  }, [value, children]);
+  return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    RadioGroup,
+    {
+      ...props,
+      value,
+      onValueChange: (next) => {
+        if (isItemValue(next)) onValueChange(next);
+      },
+      "aria-label": ariaLabel,
+      ...keepOwnAccessibleName({ "aria-label": ariaLabel, "aria-labelledby": props["aria-labelledby"] }),
+      "data-slot": "segmented-control",
+      "data-size": size,
+      className: cn(
+        raisedSurfaceStyle,
+        "relative inline-flex w-fit shrink-0 items-stretch rounded-full p-0.5",
+        // Circular icon items have no padding of their own to keep them apart.
+        iconOnly && "gap-0.5",
+        controlHeight[size],
+        "data-[disabled]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: thumbRef,
+            hidden: true,
+            "aria-hidden": "true",
+            "data-slot": "segmented-control-thumb",
+            className: cn(
+              "pointer-events-none absolute inset-y-0.5 left-0 rounded-full bg-fill-hover ring-1 ring-border ring-inset",
+              "motion-safe:data-[ready]:transition-[transform,width] motion-safe:data-[ready]:duration-normal motion-safe:data-[ready]:ease-out-custom"
+            )
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+}
+function SegmentedControlItem({
+  value,
+  disabled,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const context = React.useContext(SegmentedControlContext);
+  if (!context) throw new Error("SegmentedControlItem must be used inside a SegmentedControl");
+  const { iconOnly, registerItem, unregisterItem } = context;
+  const itemRef = mergeRefs(ref, (element) => {
+    if (element) registerItem(value, element);
+    return () => unregisterItem(value);
+  });
+  return /* @__PURE__ */ jsx(
+    Radio.Root,
+    {
+      ...props,
+      render: /* @__PURE__ */ jsx("span", { "aria-labelledby": props["aria-labelledby"] }),
+      ref: itemRef,
+      value,
+      disabled,
+      "data-slot": "segmented-control-item",
+      className: cn(
+        "relative inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-full text-label whitespace-nowrap select-none",
+        iconOnly ? "aspect-square" : "px-3",
+        // A whole disabled group is dimmed on the track; a single disabled item dims itself.
+        disabled && "opacity-50",
+        "[&_svg]:size-3.5 [&_svg]:shrink-0",
+        "text-muted-foreground hover:text-foreground data-[checked]:text-foreground",
+        "focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:hover:text-muted-foreground",
+        controlStateColorTransition,
+        className
+      ),
+      children
+    }
+  );
+}
+
+export { SegmentedControl as S, SegmentedControlItem as a };
+//# sourceMappingURL=segmented-control-CUnvFStD.js.map

package/dist/segmented-control-CUnvFStD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control-CUnvFStD.js","sources":["../src/ds/components/SegmentedControl/segmented-control.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport * as React from 'react';\n\nimport { keepOwnAccessibleName } from '@/ds/components/Field/field-control-aria';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { controlHeight } from '@/ds/primitives/control-size';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { mergeRefs } from '@/lib/merge-refs';\nimport { cn } from '@/lib/utils';\n\ntype SegmentedControlContextValue = {\n  iconOnly: boolean;\n  registerItem: (value: string, element: HTMLElement) => void;\n  unregisterItem: (value: string) => void;\n};\n\nconst SegmentedControlContext = React.createContext<SegmentedControlContextValue | undefined>(undefined);\n\ntype RadioGroupPassthroughProps = Omit<\n  RadioGroupPrimitive.Props,\n  'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'className' | 'children' | 'aria-label'\n>;\n\nexport type SegmentedControlProps<T extends string = string> = RadioGroupPassthroughProps & {\n  value: T;\n  onValueChange: (value: T) => void;\n  /** Accessible name of the group. */\n  'aria-label': string;\n  /** The track's outer height matches the control rung, so it lines up with a Button or Select in the same row. */\n  size?: ControlSize;\n  /** Every item is a circle holding only an icon; each item then needs its own `aria-label`. */\n  iconOnly?: boolean;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * A single choice between a few short options, all visible at once. A radio group underneath:\n * one tab stop, arrow keys move the selection. The selected item is marked by a thumb that\n * slides between items, so items keep their natural width.\n *\n * Use it to set a value (a policy, a theme, on/off), where the layout around it stays the same.\n * When the choice swaps what is shown below it (Form vs JSON, Overview vs Playground), use `Tabs`.\n *\n * ```tsx\n * <SegmentedControl aria-label=\"Permission\" value={policy} onValueChange={setPolicy}>\n *   <SegmentedControlItem value=\"allow\">Allow</SegmentedControlItem>\n *   <SegmentedControlItem value=\"ask\">Ask</SegmentedControlItem>\n * </SegmentedControl>\n * ```\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  onValueChange,\n  'aria-label': ariaLabel,\n  size = 'md',\n  iconOnly = false,\n  className,\n  children,\n  ...props\n}: SegmentedControlProps<T>) {\n  const itemRefs = React.useRef(new Map<string, HTMLElement>());\n  const thumbRef = React.useRef<HTMLSpanElement>(null);\n\n  const context: SegmentedControlContextValue = {\n    iconOnly,\n    registerItem: (itemValue, element) => itemRefs.current.set(itemValue, element),\n    unregisterItem: itemValue => itemRefs.current.delete(itemValue),\n  };\n\n  // Base UI reports the chosen value as `unknown`; accept only a value one of our items carries.\n  const isItemValue = (next: unknown): next is T => typeof next === 'string' && itemRefs.current.has(next);\n\n  // Measuring is layout work, so the thumb is positioned straight on the DOM instead of through\n  // state: no extra render, and it is in place before paint.\n  React.useLayoutEffect(() => {\n    const thumb = thumbRef.current;\n    const item = itemRefs.current.get(value);\n    if (!thumb) return;\n    if (!item) {\n      thumb.hidden = true;\n      return;\n    }\n    const measure = () => {\n      thumb.style.width = `${item.offsetWidth}px`;\n      thumb.style.transform = `translateX(${item.offsetLeft}px)`;\n    };\n    measure();\n    let frame: number | undefined;\n    if (thumb.hidden) {\n      // The first placement snaps; transitions switch on after it has painted.\n      thumb.hidden = false;\n      frame = requestAnimationFrame(() => thumb.setAttribute('data-ready', ''));\n    }\n    // Labels reflow when fonts load or the text changes; a sibling's resize moves this item too.\n    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);\n    itemRefs.current.forEach(element => observer?.observe(element));\n    return () => {\n      if (frame !== undefined) cancelAnimationFrame(frame);\n      observer?.disconnect();\n    };\n  }, [value, children]);\n\n  return (\n    <SegmentedControlContext.Provider value={context}>\n      <RadioGroupPrimitive\n        {...props}\n        value={value}\n        onValueChange={next => {\n          if (isItemValue(next)) onValueChange(next);\n        }}\n        aria-label={ariaLabel}\n        {...keepOwnAccessibleName({ 'aria-label': ariaLabel, 'aria-labelledby': props['aria-labelledby'] })}\n        data-slot=\"segmented-control\"\n        data-size={size}\n        className={cn(\n          raisedSurfaceStyle,\n          'relative inline-flex w-fit shrink-0 items-stretch rounded-full p-0.5',\n          // Circular icon items have no padding of their own to keep them apart.\n          iconOnly && 'gap-0.5',\n          controlHeight[size],\n          'data-[disabled]:opacity-50',\n          className,\n        )}\n      >\n        <span\n          ref={thumbRef}\n          hidden\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-thumb\"\n          className={cn(\n            'pointer-events-none absolute inset-y-0.5 left-0 rounded-full bg-fill-hover ring-1 ring-border ring-inset',\n            'motion-safe:data-[ready]:transition-[transform,width] motion-safe:data-[ready]:duration-normal motion-safe:data-[ready]:ease-out-custom',\n          )}\n        />\n        {children}\n      </RadioGroupPrimitive>\n    </SegmentedControlContext.Provider>\n  );\n}\n\nexport type SegmentedControlItemProps = Omit<RadioPrimitive.Root.Props, 'className' | 'value' | 'children'> & {\n  value: string;\n  /** Text, an icon and text, or only an icon when the control is `iconOnly`. */\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function SegmentedControlItem({\n  value,\n  disabled,\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedControlItemProps) {\n  const context = React.useContext(SegmentedControlContext);\n  if (!context) throw new Error('SegmentedControlItem must be used inside a SegmentedControl');\n  const { iconOnly, registerItem, unregisterItem } = context;\n  const itemRef = mergeRefs<HTMLElement>(ref, element => {\n    if (element) registerItem(value, element);\n    return () => unregisterItem(value);\n  });\n\n  return (\n    <RadioPrimitive.Root\n      {...props}\n      render={<span aria-labelledby={props['aria-labelledby']} />}\n      ref={itemRef}\n      value={value}\n      disabled={disabled}\n      data-slot=\"segmented-control-item\"\n      className={cn(\n        'relative inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-full text-label whitespace-nowrap select-none',\n        iconOnly ? 'aspect-square' : 'px-3',\n        // A whole disabled group is dimmed on the track; a single disabled item dims itself.\n        disabled && 'opacity-50',\n        '[&_svg]:size-3.5 [&_svg]:shrink-0',\n        'text-muted-foreground hover:text-foreground data-[checked]:text-foreground',\n        'focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:hover:text-muted-foreground',\n        controlStateColorTransition,\n        className,\n      )}\n    >\n      {children}\n    </RadioPrimitive.Root>\n  );\n}\n"],"names":["RadioGroupPrimitive","RadioPrimitive"],"mappings":"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"}

package/dist/select-BFHGp0Gs.cjs

@@ -0,0 +1,167 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const select = require('@base-ui/react/select');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const Button = require('./Button-BTuu6_hv.cjs');
+const fieldControlAria = require('./field-control-aria-WzMGs0A4.cjs');
+const primitives_controlSize = require('./primitives/control-size.cjs.js');
+const primitives_floating = require('./primitives/floating.cjs.js');
+const primitives_fluidMenu = require('./primitives/fluid-menu.cjs.js');
+const primitives_formElement = require('./primitives/form-element.cjs.js');
+const primitives_menuItem = require('./primitives/menu-item.cjs.js');
+const primitives_portalContainer = require('./primitives/portal-container.cjs.js');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function isSelectItem(node) {
+  return React__namespace.isValidElement(node) && node.type?.displayName === "SelectItem";
+}
+function collectItems(children, acc) {
+  React__namespace.Children.forEach(children, (child) => {
+    if (!React__namespace.isValidElement(child)) return;
+    if (isSelectItem(child)) {
+      acc.push({ value: child.props.value, label: child.props.children });
+      return;
+    }
+    const nested = child.props?.children;
+    if (nested != null) collectItems(nested, acc);
+  });
+}
+function Select({ children, items, onValueChange, ...props }) {
+  const derivedItems = React__namespace.useMemo(() => {
+    if (items != null) return items;
+    const acc = [];
+    collectItems(children, acc);
+    return acc.length > 0 ? acc : void 0;
+  }, [items, children]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select.Root,
+    {
+      items: derivedItems,
+      onValueChange: onValueChange ? (value, eventDetails) => onValueChange(value, eventDetails) : void 0,
+      ...props,
+      children
+    }
+  );
+}
+Select.displayName = "Select";
+const SelectGroup = select.Select.Group;
+const SelectValue = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(select.Select.Value, { ref, className: utils_cn.cn("truncate", className), ...props }));
+SelectValue.displayName = "SelectValue";
+function normalizeSelectTriggerVariant(variant) {
+  return variant === "primary" ? "default" : variant;
+}
+const SelectTrigger = React__namespace.forwardRef(
+  ({ className, children, size = "md", variant = "default", ...props }, ref) => {
+    const visualVariant = normalizeSelectTriggerVariant(variant);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select.Trigger,
+      {
+        ref,
+        "data-slot": "select-trigger",
+        className: utils_cn.cn(
+          Button.buttonVariants({ variant: visualVariant, size }),
+          visualVariant === "default" && primitives_formElement.fieldTriggerStyle,
+          // Fill the field and push the value left / chevron right (Button's
+          // base centers its content with `justify-center`).
+          primitives_formElement.fieldTriggerWidthStyle,
+          "justify-between",
+          // Read as "active" while the menu is open, per variant (see map above).
+          primitives_controlSize.controlTriggerOpenState[visualVariant],
+          "data-[placeholder]:text-muted-foreground",
+          primitives_formElement.fieldTriggerErrorBorder,
+          "[&>span]:truncate",
+          className
+        ),
+        ...props,
+        ...fieldControlAria.keepOwnAccessibleName(props),
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            select.Select.Icon,
+            {
+              render: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: utils_cn.cn("size-4 text-muted-foreground", primitives_transitions.transitions.colors) }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+const SelectContent = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    position: _position,
+    container,
+    side = "bottom",
+    align = "start",
+    sideOffset = 4,
+    alignItemWithTrigger = false,
+    anchor,
+    positionMethod = primitives_floating.FLOATING_POSITION_METHOD,
+    alignOffset,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    arrowPadding,
+    disableAnchorTracking,
+    collisionAvoidance,
+    ...props
+  }, ref) => {
+    const resolvedContainer = primitives_portalContainer.usePortalContainer(container);
+    const menu = primitives_fluidMenu.useFluidMenu();
+    const positionerProps = {
+      side,
+      align,
+      sideOffset,
+      alignItemWithTrigger,
+      anchor,
+      positionMethod,
+      alignOffset,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      arrowPadding,
+      disableAnchorTracking,
+      collisionAvoidance
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Positioner, { className: primitives_menuItem.menuPositionerClass, ...positionerProps, children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Popup, { ref, className: utils_cn.cn(primitives_menuItem.menuPopupClass, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.List, { className: menu.containerClassName, ...menu.getContainerProps({}), children: /* @__PURE__ */ jsxRuntime.jsx(primitives_fluidMenu.FluidMenuItems, { menu, children }) }) }) }) });
+  }
+);
+SelectContent.displayName = "SelectContent";
+const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(select.Select.Item, { ref: primitives_fluidMenu.useFluidMenuItemRef(ref), className: utils_cn.cn(primitives_menuItem.menuItemClass, className), ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { children }),
+  /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemIndicator, { className: primitives_menuItem.menuItemCheckClass, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) })
+] }));
+SelectItem.displayName = "SelectItem";
+
+exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectGroup = SelectGroup;
+exports.SelectItem = SelectItem;
+exports.SelectTrigger = SelectTrigger;
+exports.SelectValue = SelectValue;
+//# sourceMappingURL=select-BFHGp0Gs.cjs.map