@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

package/dist/select-DIOGGfVZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-DIOGGfVZ.cjs","sources":["../src/ds/components/Select/select.tsx"],"sourcesContent":["import { Select as SelectPrimitive } from '@base-ui/react/select';\nimport type { SelectPopupProps, SelectPositionerProps } from '@base-ui/react/select';\nimport { Check, ChevronDown } from 'lucide-react';\nimport * as React from 'react';\n\nimport { buttonVariants } from '../Button/Button';\nimport type { TextButtonSize } from '../Button/Button';\nimport { controlTriggerOpenState } from '@/ds/primitives/control-size';\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { menuItemCheckClass, menuItemClass, menuPopupClass, menuPositionerClass } from '@/ds/primitives/menu-item';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\n/**\n * Select migrated from `@radix-ui/react-select` to Base UI (`@base-ui/react/select`).\n *\n * The public API (`Select`, `SelectGroup`, `SelectValue`, `SelectTrigger`,\n * `SelectContent`, `SelectItem`) is intentionally kept stable so existing\n * consumers do not need changes.\n *\n * Notable behavioral differences vs. Radix that consumers should be aware of:\n * - `onValueChange` now receives a second `eventDetails` argument. Existing\n *   handlers typed as `(value: string) => void` keep working (extra arg ignored).\n * - The dropdown no longer overlaps the trigger by default\n *   (`alignItemWithTrigger={false}`), matching the previous Radix `popper`\n *   positioning behavior.\n *\n * Implementation note: unlike Radix, Base UI's `Select.Value` can only resolve\n * a selected value to its label once the popup has mounted (it reads labels\n * from rendered items). To preserve the Radix behavior where the trigger shows\n * the selected label even while closed, `Select` auto-derives an `items` map\n * from the `SelectItem`s declared inside `SelectContent` and passes it to\n * `Select.Root`. Consumers can still pass an explicit `items` prop to override.\n */\ntype SelectItemNode = React.ReactElement<{ value: unknown; children?: React.ReactNode }>;\n\nfunction isSelectItem(node: React.ReactNode): node is SelectItemNode {\n  return React.isValidElement(node) && (node.type as { displayName?: string })?.displayName === 'SelectItem';\n}\n\n/** Recursively collect `{ value, label }` pairs from declared `SelectItem`s. */\nfunction collectItems(children: React.ReactNode, acc: Array<{ value: unknown; label: React.ReactNode }>): void {\n  React.Children.forEach(children, child => {\n    if (!React.isValidElement(child)) return;\n    if (isSelectItem(child)) {\n      acc.push({ value: child.props.value, label: child.props.children });\n      return;\n    }\n    const nested = (child.props as { children?: React.ReactNode })?.children;\n    if (nested != null) collectItems(nested, acc);\n  });\n}\n\ntype SelectRootProps<Value> = SelectPrimitive.Root.Props<Value, false>;\ntype SelectChangeDetails = Parameters<NonNullable<SelectRootProps<unknown>['onValueChange']>>[1];\n\n/**\n * `onValueChange` is intentionally narrowed to a non-null value: these selects\n * always hold a value once changed, which keeps existing `(value) => void`\n * consumer handlers valid (Base UI's own callback type is `Value | null`).\n */\ntype SelectProps<Value = string> = Omit<SelectRootProps<Value>, 'onValueChange'> & {\n  onValueChange?: (value: Value, eventDetails: SelectChangeDetails) => void;\n};\n\nfunction Select<Value = string>({ children, items, onValueChange, ...props }: SelectProps<Value>) {\n  const derivedItems = React.useMemo(() => {\n    if (items != null) return items;\n    const acc: Array<{ value: unknown; label: React.ReactNode }> = [];\n    collectItems(children, acc);\n    return acc.length > 0 ? acc : undefined;\n  }, [items, children]);\n\n  return (\n    <SelectPrimitive.Root\n      items={derivedItems as SelectRootProps<Value>['items']}\n      onValueChange={onValueChange ? (value, eventDetails) => onValueChange(value as Value, eventDetails) : undefined}\n      {...props}\n    >\n      {children}\n    </SelectPrimitive.Root>\n  );\n}\nSelect.displayName = 'Select';\n\nconst SelectGroup = SelectPrimitive.Group;\n\nexport type SelectValueProps = Omit<SelectPrimitive.Value.Props, 'className'> & {\n  className?: string;\n};\n\n/**\n * Displays the selected value. Radix's `Select.Value` took a `placeholder`\n * prop and rendered the selected item's text automatically; Base UI's\n * `Select.Value` behaves the same way (renders the value, falls back to\n * `placeholder` when nothing is selected), so this is a thin passthrough.\n */\nconst SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Value ref={ref} className={cn('truncate', className)} {...props} />\n));\nSelectValue.displayName = 'SelectValue';\n\n/**\n * A select is a form field, so it reuses the same button looks consumers see\n * everywhere: `default` (the Button's filled default surface — the default\n * here too), `outline` (bordered, transparent) and `ghost` (borderless, for\n * dense toolbars/inline pickers). The high-emphasis `primary` look is the only\n * one intentionally NOT offered (a field is not a call-to-action).\n */\nexport type SelectTriggerVariant = 'default' | 'outline' | 'ghost';\ntype SelectTriggerLegacyVariant = 'primary';\n\nexport type SelectTriggerProps = Omit<SelectPrimitive.Trigger.Props, 'className'> & {\n  className?: string;\n  size?: TextButtonSize;\n  variant?: SelectTriggerVariant | SelectTriggerLegacyVariant;\n};\n\nfunction normalizeSelectTriggerVariant(\n  variant: SelectTriggerVariant | SelectTriggerLegacyVariant,\n): SelectTriggerVariant {\n  return variant === 'primary' ? 'default' : variant;\n}\n\nconst SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  ({ className, children, size = 'md', variant = 'default', ...props }, ref) => {\n    const visualVariant = normalizeSelectTriggerVariant(variant);\n\n    return (\n      <SelectPrimitive.Trigger\n        ref={ref}\n        data-slot=\"select-trigger\"\n        // A select = a button + a trailing chevron: reuse the Button recipe\n        // (variant colors, size = height/text/padding/radius, unified border\n        // focus, disabled) and layer only the select-specific extras.\n        className={cn(\n          buttonVariants({ variant: visualVariant, size }),\n          // Fill the field and push the value left / chevron right (Button's\n          // base centers its content with `justify-center`).\n          'w-full justify-between',\n          // Read as \"active\" while the menu is open, per variant (see map above).\n          controlTriggerOpenState[visualVariant],\n          'data-[placeholder]:text-neutral3',\n          '[&>span]:truncate',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {/* `SelectPrimitive.Icon` renders the provided element in place of its\n            default `<span>`, so the chevron would land as a *direct* `<svg>`\n            child of the trigger — where Button's `TEXT_MODE_ADORNMENTS`\n            `[&>svg]` rules (negative `mx`, forced 50% opacity, 1.1em sizing)\n            would distort and mis-position it. Wrapping it in a `<span>` keeps\n            the svg one level deep so those rules can't reach it, leaving the\n            chevron pinned at the right edge at its intended size and opacity. */}\n        <SelectPrimitive.Icon\n          render={\n            <span className=\"flex shrink-0 items-center\">\n              <ChevronDown className={cn('size-4 opacity-60', transitions.colors)} />\n            </span>\n          }\n        />\n      </SelectPrimitive.Trigger>\n    );\n  },\n);\nSelectTrigger.displayName = 'SelectTrigger';\n\ntype SelectContentPositionerProps = Omit<SelectPositionerProps, keyof SelectPopupProps>;\n\nexport type SelectContentProps = Omit<SelectPopupProps, 'className'> &\n  SelectContentPositionerProps & {\n    className?: string;\n    /**\n     * Kept for API compatibility with the previous Radix API. Radix supported\n     * `position=\"popper\" | \"item-aligned\"`; Base UI always uses popper-style\n     * positioning so this prop is accepted but has no effect.\n     */\n    position?: 'popper' | 'item-aligned';\n    /** Optional portal container, forwarded to `Select.Portal`. */\n    container?: HTMLElement | null;\n  };\n\nconst SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      className,\n      children,\n      position: _position,\n      container,\n      side = 'bottom',\n      align = 'start',\n      sideOffset = 4,\n      alignItemWithTrigger = false,\n      anchor,\n      positionMethod = FLOATING_POSITION_METHOD,\n      alignOffset,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n      ...props\n    },\n    ref,\n  ) => {\n    // Default to the nearest SideDialog/Drawer popup so the dropdown stays\n    // interactive inside a modal drawer; an explicit `container` still wins.\n    const resolvedContainer = usePortalContainer(container);\n    const positionerProps: SelectContentPositionerProps = {\n      side,\n      align,\n      sideOffset,\n      alignItemWithTrigger,\n      anchor,\n      positionMethod,\n      alignOffset,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      arrowPadding,\n      disableAnchorTracking,\n      collisionAvoidance,\n    };\n\n    return (\n      <SelectPrimitive.Portal container={resolvedContainer}>\n        <SelectPrimitive.Positioner className={menuPositionerClass} {...positionerProps}>\n          <SelectPrimitive.Popup ref={ref} className={cn(menuPopupClass, className)} {...props}>\n            <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          </SelectPrimitive.Popup>\n        </SelectPrimitive.Positioner>\n      </SelectPrimitive.Portal>\n    );\n  },\n);\nSelectContent.displayName = 'SelectContent';\n\nexport type SelectItemProps = Omit<SelectPrimitive.Item.Props, 'className'> & {\n  className?: string;\n};\n\nconst SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item ref={ref} className={cn(menuItemClass, className)} {...props}>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className={menuItemCheckClass}>\n      <Check />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = 'SelectItem';\n\nexport { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem };\n"],"names":["React","jsx","SelectPrimitive","cn","jsxs","buttonVariants","controlTriggerOpenState","ChevronDown","transitions","FLOATING_POSITION_METHOD","usePortalContainer","menuPositionerClass","menuPopupClass","menuItemClass","menuItemCheckClass","Check"],"mappings":"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"}

package/dist/select-field-block-B-6QQC7t.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { F as FieldBlock } from './field-block-DtG78nn_.js';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-BX-NDhBK.js';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+
+function SelectFieldBlock({
+  name,
+  helpText,
+  errorMsg,
+  required = false,
+  disabled = false,
+  size = "md",
+  value,
+  label,
+  labelIsHidden = false,
+  layout = "vertical",
+  labelColumnWidth,
+  options,
+  placeholder = "Select an option",
+  onValueChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(FieldBlock.Layout, { layout, labelColumnWidth, className, children: [
+    layout === "horizontal" ? /* @__PURE__ */ jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsx(FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : label }) }) : null,
+    /* @__PURE__ */ jsxs(FieldBlock.Column, { children: [
+      layout === "vertical" && label && !labelIsHidden ? /* @__PURE__ */ jsx(FieldBlock.Label, { name, required, children: label }) : null,
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          "aria-label": labelIsHidden ? label : void 0,
+          name,
+          value,
+          onValueChange,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { size, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+          ]
+        }
+      ),
+      helpText && /* @__PURE__ */ jsx(FieldBlock.HelpText, { children: helpText }),
+      errorMsg && /* @__PURE__ */ jsx(FieldBlock.ErrorMsg, { children: errorMsg })
+    ] })
+  ] });
+}
+
+export { SelectFieldBlock as S };
+//# sourceMappingURL=select-field-block-B-6QQC7t.js.map

package/dist/select-field-block-B-6QQC7t.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field-block-B-6QQC7t.js","sources":["../src/ds/components/FormFieldBlocks/fields/select-field-block.tsx"],"sourcesContent":["import type { SelectTriggerProps } from '../../Select/select';\nimport { FieldBlock } from '../block/field-block';\nimport type { FieldBlockErrorMsgProps } from '../block/field-block-error-msg';\nimport type { FieldBlockHelpTextProps } from '../block/field-block-help-text';\nimport type { FieldBlockLabelProps } from '../block/field-block-label';\nimport type { FieldBlockLayoutProps } from '../block/field-block-layout';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ds/components/Select';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\n\nexport type SelectFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labelColumnWidth'> &\n  Pick<FieldBlockLabelProps, 'name' | 'required'> & {\n    testId?: string;\n    label?: string | null;\n    labelIsHidden?: boolean;\n    labelSize?: FieldBlockLabelProps['size'];\n    disabled?: boolean;\n    value?: string;\n    options: { value: string; label: string }[];\n    placeholder?: string;\n    onValueChange: (value: string) => void;\n    helpText?: FieldBlockHelpTextProps['children'];\n    errorMsg?: FieldBlockErrorMsgProps['children'];\n    error?: boolean;\n    className?: string;\n    size?: SelectTriggerProps['size'];\n  };\n\nexport function SelectFieldBlock({\n  name,\n  helpText,\n  errorMsg,\n  required = false,\n  disabled = false,\n  size = 'md',\n  value,\n  label,\n  labelIsHidden = false,\n  layout = 'vertical',\n  labelColumnWidth,\n  options,\n  placeholder = 'Select an option',\n  onValueChange,\n  className,\n}: SelectFieldBlockProps) {\n  return (\n    <FieldBlock.Layout layout={layout} labelColumnWidth={labelColumnWidth} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {layout === 'vertical' && label && !labelIsHidden ? (\n          <FieldBlock.Label name={name} required={required}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <Select\n          aria-label={labelIsHidden ? label : undefined}\n          name={name}\n          value={value}\n          onValueChange={onValueChange}\n          disabled={disabled}\n        >\n          <SelectTrigger size={size}>\n            <SelectValue placeholder={placeholder} />\n          </SelectTrigger>\n          <SelectContent>\n            {options.map(option => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        {helpText && <FieldBlock.HelpText>{helpText}</FieldBlock.HelpText>}\n        {errorMsg && <FieldBlock.ErrorMsg>{errorMsg}</FieldBlock.ErrorMsg>}\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":[],"mappings":";;;;;AA2BO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,IAAA,GAAO,IAAA;AAAA,EACP,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,MAAA,GAAS,UAAA;AAAA,EACT,gBAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA,GAAc,kBAAA;AAAA,EACd,aAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,4BACG,UAAA,CAAW,MAAA,EAAX,EAAkB,MAAA,EAAgB,kBAAoC,SAAA,EACpE,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,+BACV,GAAA,CAAC,UAAA,CAAW,QAAX,EACC,QAAA,kBAAA,GAAA,CAAC,WAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAC3B,0CAAgB,GAAA,CAAC,cAAA,EAAA,EAAgB,iBAAM,CAAA,GAAoB,KAAA,EAC9D,GACF,CAAA,GACE,IAAA;AAAA,oBACJ,IAAA,CAAC,UAAA,CAAW,MAAA,EAAX,EACE,QAAA,EAAA;AAAA,MAAA,MAAA,KAAW,UAAA,IAAc,KAAA,IAAS,CAAC,aAAA,mBAClC,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAC3B,QAAA,EAAA,KAAA,EACH,CAAA,GACE,IAAA;AAAA,sBACJ,IAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAY,gBAAgB,KAAA,GAAQ,MAAA;AAAA,UACpC,IAAA;AAAA,UACA,KAAA;AAAA,UACA,aAAA;AAAA,UACA,QAAA;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EACb,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,aAA0B,CAAA,EACzC,CAAA;AAAA,4BACA,GAAA,CAAC,aAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,4BACX,GAAA,CAAC,UAAA,EAAA,EAA8B,KAAA,EAAO,MAAA,CAAO,OAC1C,QAAA,EAAA,MAAA,CAAO,KAAA,EAAA,EADO,MAAA,CAAO,KAExB,CACD,CAAA,EACH;AAAA;AAAA;AAAA,OACF;AAAA,MACC,QAAA,oBAAY,GAAA,CAAC,UAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,MAC3C,QAAA,oBAAY,GAAA,CAAC,UAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS;AAAA,KAAA,EAC9C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/select-field-block-DAf3Soge.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const fieldBlock = require('./field-block-CygzGxNe.cjs');
+const select = require('./select-DIOGGfVZ.cjs');
+const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+
+function SelectFieldBlock({
+  name,
+  helpText,
+  errorMsg,
+  required = false,
+  disabled = false,
+  size = "md",
+  value,
+  label,
+  labelIsHidden = false,
+  layout = "vertical",
+  labelColumnWidth,
+  options,
+  placeholder = "Select an option",
+  onValueChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Layout, { layout, labelColumnWidth, className, children: [
+    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Column, { children: [
+      layout === "vertical" && label && !labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name, required, children: label }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        select.Select,
+        {
+          "aria-label": labelIsHidden ? label : void 0,
+          name,
+          value,
+          onValueChange,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { size, children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: option.value, children: option.label }, option.value)) })
+          ]
+        }
+      ),
+      helpText && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.HelpText, { children: helpText }),
+      errorMsg && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.ErrorMsg, { children: errorMsg })
+    ] })
+  ] });
+}
+
+exports.SelectFieldBlock = SelectFieldBlock;
+//# sourceMappingURL=select-field-block-DAf3Soge.cjs.map

package/dist/select-field-block-DAf3Soge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field-block-DAf3Soge.cjs","sources":["../src/ds/components/FormFieldBlocks/fields/select-field-block.tsx"],"sourcesContent":["import type { SelectTriggerProps } from '../../Select/select';\nimport { FieldBlock } from '../block/field-block';\nimport type { FieldBlockErrorMsgProps } from '../block/field-block-error-msg';\nimport type { FieldBlockHelpTextProps } from '../block/field-block-help-text';\nimport type { FieldBlockLabelProps } from '../block/field-block-label';\nimport type { FieldBlockLayoutProps } from '../block/field-block-layout';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ds/components/Select';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\n\nexport type SelectFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labelColumnWidth'> &\n  Pick<FieldBlockLabelProps, 'name' | 'required'> & {\n    testId?: string;\n    label?: string | null;\n    labelIsHidden?: boolean;\n    labelSize?: FieldBlockLabelProps['size'];\n    disabled?: boolean;\n    value?: string;\n    options: { value: string; label: string }[];\n    placeholder?: string;\n    onValueChange: (value: string) => void;\n    helpText?: FieldBlockHelpTextProps['children'];\n    errorMsg?: FieldBlockErrorMsgProps['children'];\n    error?: boolean;\n    className?: string;\n    size?: SelectTriggerProps['size'];\n  };\n\nexport function SelectFieldBlock({\n  name,\n  helpText,\n  errorMsg,\n  required = false,\n  disabled = false,\n  size = 'md',\n  value,\n  label,\n  labelIsHidden = false,\n  layout = 'vertical',\n  labelColumnWidth,\n  options,\n  placeholder = 'Select an option',\n  onValueChange,\n  className,\n}: SelectFieldBlockProps) {\n  return (\n    <FieldBlock.Layout layout={layout} labelColumnWidth={labelColumnWidth} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {layout === 'vertical' && label && !labelIsHidden ? (\n          <FieldBlock.Label name={name} required={required}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <Select\n          aria-label={labelIsHidden ? label : undefined}\n          name={name}\n          value={value}\n          onValueChange={onValueChange}\n          disabled={disabled}\n        >\n          <SelectTrigger size={size}>\n            <SelectValue placeholder={placeholder} />\n          </SelectTrigger>\n          <SelectContent>\n            {options.map(option => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        {helpText && <FieldBlock.HelpText>{helpText}</FieldBlock.HelpText>}\n        {errorMsg && <FieldBlock.ErrorMsg>{errorMsg}</FieldBlock.ErrorMsg>}\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":["FieldBlock","jsx","VisuallyHidden","jsxs","Select","SelectTrigger","SelectValue","SelectContent","SelectItem"],"mappings":";;;;;;;AA2BO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,IAAA,GAAO,IAAA;AAAA,EACP,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,MAAA,GAAS,UAAA;AAAA,EACT,gBAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA,GAAc,kBAAA;AAAA,EACd,aAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,uCACGA,qBAAA,CAAW,MAAA,EAAX,EAAkB,MAAA,EAAgB,kBAAoC,SAAA,EACpE,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,+BACVC,cAAA,CAACD,qBAAA,CAAW,QAAX,EACC,QAAA,kBAAAC,cAAA,CAACD,sBAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAC3B,0CAAgBC,cAAA,CAACC,kCAAA,EAAA,EAAgB,iBAAM,CAAA,GAAoB,KAAA,EAC9D,GACF,CAAA,GACE,IAAA;AAAA,oBACJC,eAAA,CAACH,qBAAA,CAAW,MAAA,EAAX,EACE,QAAA,EAAA;AAAA,MAAA,MAAA,KAAW,UAAA,IAAc,KAAA,IAAS,CAAC,aAAA,mBAClCC,cAAA,CAACD,qBAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAC3B,QAAA,EAAA,KAAA,EACH,CAAA,GACE,IAAA;AAAA,sBACJG,eAAA;AAAA,QAACC,aAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAY,gBAAgB,KAAA,GAAQ,MAAA;AAAA,UACpC,IAAA;AAAA,UACA,KAAA;AAAA,UACA,aAAA;AAAA,UACA,QAAA;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAAH,cAAA,CAACI,oBAAA,EAAA,EAAc,IAAA,EACb,QAAA,kBAAAJ,cAAA,CAACK,kBAAA,EAAA,EAAY,aAA0B,CAAA,EACzC,CAAA;AAAA,4BACAL,cAAA,CAACM,oBAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,4BACXN,cAAA,CAACO,iBAAA,EAAA,EAA8B,KAAA,EAAO,MAAA,CAAO,OAC1C,QAAA,EAAA,MAAA,CAAO,KAAA,EAAA,EADO,MAAA,CAAO,KAExB,CACD,CAAA,EACH;AAAA;AAAA;AAAA,OACF;AAAA,MACC,QAAA,oBAAYP,cAAA,CAACD,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,MAC3C,QAAA,oBAAYC,cAAA,CAACD,qBAAA,CAAW,QAAA,EAAX,EAAqB,QAAA,EAAA,QAAA,EAAS;AAAA,KAAA,EAC9C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/settings-container-B61AM2uQ.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-DPfV6E6L.cjs');
+
+function SettingsContainerLayout({
+  layout,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": layout === "section" ? "section-content" : "settings-container",
+      className: utils_cn.cn(
+        layout === "factory" ? "divide-y divide-border1 rounded-xl border border-border1 bg-surface3" : "group-data-[variant=factory]/section:overflow-hidden group-data-[variant=factory]/section:rounded-xl group-data-[variant=factory]/section:border group-data-[variant=factory]/section:border-border1 group-data-[variant=factory]/section:bg-surface3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SettingsContainer(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SettingsContainerLayout, { ...props, layout: "factory" });
+}
+
+exports.SettingsContainer = SettingsContainer;
+exports.SettingsContainerLayout = SettingsContainerLayout;
+//# sourceMappingURL=settings-container-B61AM2uQ.cjs.map

package/dist/settings-container-B61AM2uQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-container-B61AM2uQ.cjs","sources":["../src/ds/new/settings/settings-container.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function SettingsContainerLayout({\n  layout,\n  className,\n  ...props\n}: ComponentProps<'div'> & { layout: 'factory' | 'section' }) {\n  return (\n    <div\n      data-slot={layout === 'section' ? 'section-content' : 'settings-container'}\n      className={cn(\n        layout === 'factory'\n          ? 'divide-y divide-border1 rounded-xl border border-border1 bg-surface3'\n          : 'group-data-[variant=factory]/section:overflow-hidden group-data-[variant=factory]/section:rounded-xl group-data-[variant=factory]/section:border group-data-[variant=factory]/section:border-border1 group-data-[variant=factory]/section:bg-surface3',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SettingsContainer(props: ComponentProps<'div'>) {\n  return <SettingsContainerLayout {...props} layout=\"factory\" />;\n}\n"],"names":["jsx","cn"],"mappings":";;;;;AAGO,SAAS,uBAAA,CAAwB;AAAA,EACtC,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8D;AAC5D,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAW,MAAA,KAAW,SAAA,GAAY,iBAAA,GAAoB,oBAAA;AAAA,MACtD,SAAA,EAAWC,WAAA;AAAA,QACT,MAAA,KAAW,YACP,sEAAA,GACA,uPAAA;AAAA,QACJ;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEO,SAAS,kBAAkB,KAAA,EAA8B;AAC9D,EAAA,uBAAOD,cAAA,CAAC,uBAAA,EAAA,EAAyB,GAAG,KAAA,EAAO,QAAO,SAAA,EAAU,CAAA;AAC9D;;;;;"}

package/dist/settings-container-XeohBaUd.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from './cn-Dxjsbr9n.js';
+
+function SettingsContainerLayout({
+  layout,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": layout === "section" ? "section-content" : "settings-container",
+      className: cn(
+        layout === "factory" ? "divide-y divide-border1 rounded-xl border border-border1 bg-surface3" : "group-data-[variant=factory]/section:overflow-hidden group-data-[variant=factory]/section:rounded-xl group-data-[variant=factory]/section:border group-data-[variant=factory]/section:border-border1 group-data-[variant=factory]/section:bg-surface3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SettingsContainer(props) {
+  return /* @__PURE__ */ jsx(SettingsContainerLayout, { ...props, layout: "factory" });
+}
+
+export { SettingsContainer as S, SettingsContainerLayout as a };
+//# sourceMappingURL=settings-container-XeohBaUd.js.map

package/dist/settings-container-XeohBaUd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-container-XeohBaUd.js","sources":["../src/ds/new/settings/settings-container.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function SettingsContainerLayout({\n  layout,\n  className,\n  ...props\n}: ComponentProps<'div'> & { layout: 'factory' | 'section' }) {\n  return (\n    <div\n      data-slot={layout === 'section' ? 'section-content' : 'settings-container'}\n      className={cn(\n        layout === 'factory'\n          ? 'divide-y divide-border1 rounded-xl border border-border1 bg-surface3'\n          : 'group-data-[variant=factory]/section:overflow-hidden group-data-[variant=factory]/section:rounded-xl group-data-[variant=factory]/section:border group-data-[variant=factory]/section:border-border1 group-data-[variant=factory]/section:bg-surface3',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SettingsContainer(props: ComponentProps<'div'>) {\n  return <SettingsContainerLayout {...props} layout=\"factory\" />;\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,uBAAA,CAAwB;AAAA,EACtC,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8D;AAC5D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAW,MAAA,KAAW,SAAA,GAAY,iBAAA,GAAoB,oBAAA;AAAA,MACtD,SAAA,EAAW,EAAA;AAAA,QACT,MAAA,KAAW,YACP,sEAAA,GACA,uPAAA;AAAA,QACJ;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEO,SAAS,kBAAkB,KAAA,EAA8B;AAC9D,EAAA,uBAAO,GAAA,CAAC,uBAAA,EAAA,EAAyB,GAAG,KAAA,EAAO,QAAO,SAAA,EAAU,CAAA;AAC9D;;;;"}

package/dist/settings-layout-0LmqNUIq.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { T as Txt } from './Txt-23XtxAlc.js';
+import { c as cn } from './cn-Dxjsbr9n.js';
+
+function SettingsLayout({
+  title,
+  titleAccessory,
+  description,
+  action,
+  inset = false,
+  variant,
+  children
+}) {
+  if (title === void 0 || title === null) {
+    return variant === "header" ? children : /* @__PURE__ */ jsx("div", { "data-slot": "settings-layout-content", className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5", children: /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-8", children }) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "settings-page-header",
+        className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-5 pb-0 sm:pt-6",
+        children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-wrap items-start justify-between gap-4", inset && "pl-4"), children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Txt,
+                {
+                  as: "h1",
+                  variant: "header-md",
+                  className: cn("min-w-0 truncate", "font-sans font-medium tracking-normal text-neutral4"),
+                  children: title
+                }
+              ),
+              titleAccessory !== void 0 && titleAccessory !== null ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: titleAccessory }) : null
+            ] }),
+            description !== void 0 && description !== null ? /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-neutral4 m-0 wrap-break-word", children: description }) : null
+          ] }),
+          action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
+        ] })
+      }
+    ),
+    variant === "header" ? children : /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "settings-layout-content",
+        className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5",
+        children: /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-6", children })
+      }
+    )
+  ] });
+}
+
+export { SettingsLayout as S };
+//# sourceMappingURL=settings-layout-0LmqNUIq.js.map

package/dist/settings-layout-0LmqNUIq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-layout-0LmqNUIq.js","sources":["../src/ds/components/SettingsLayout/settings-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface SettingsLayoutProps {\n  title?: ReactNode;\n  titleAccessory?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  inset?: boolean;\n  variant?: 'default' | 'header';\n  children: ReactNode;\n}\n\nexport function SettingsLayout({\n  title,\n  titleAccessory,\n  description,\n  action,\n  inset = false,\n  variant,\n  children,\n}: SettingsLayoutProps) {\n  if (title === undefined || title === null) {\n    return variant === 'header' ? (\n      children\n    ) : (\n      <div data-slot=\"settings-layout-content\" className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\">\n        <div className=\"min-w-0 space-y-8\">{children}</div>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div\n        data-slot=\"settings-page-header\"\n        className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-5 pb-0 sm:pt-6\"\n      >\n        <div className={cn('flex min-w-0 flex-wrap items-start justify-between gap-4', inset && 'pl-4')}>\n          <div className=\"grid min-w-0 gap-2\">\n            <div className=\"flex min-w-0 items-center gap-2\">\n              <Txt\n                as=\"h1\"\n                variant=\"header-md\"\n                className={cn('min-w-0 truncate', 'font-sans font-medium tracking-normal text-neutral4')}\n              >\n                {title}\n              </Txt>\n              {titleAccessory !== undefined && titleAccessory !== null ? (\n                <div className=\"shrink-0\">{titleAccessory}</div>\n              ) : null}\n            </div>\n            {description !== undefined && description !== null ? (\n              <Txt as=\"p\" variant=\"ui-md\" className=\"text-neutral4 m-0 wrap-break-word\">\n                {description}\n              </Txt>\n            ) : null}\n          </div>\n          {action ? <div className=\"shrink-0\">{action}</div> : null}\n        </div>\n      </div>\n      {variant === 'header' ? (\n        children\n      ) : (\n        <div\n          data-slot=\"settings-layout-content\"\n          className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\"\n        >\n          <div className=\"min-w-0 space-y-6\">{children}</div>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAcO,SAAS,cAAA,CAAe;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,OAAA;AAAA,EACA;AACF,CAAA,EAAwB;AACtB,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,OAAA,KAAY,QAAA,GACjB,QAAA,mBAEA,GAAA,CAAC,SAAI,WAAA,EAAU,yBAAA,EAA0B,SAAA,EAAU,8DAAA,EACjD,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,UAAS,CAAA,EAC/C,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,SAAA,EAAU,yEAAA;AAAA,QAEV,+BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,0DAAA,EAA4D,KAAA,IAAS,MAAM,CAAA,EAC5F,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,IAAA;AAAA,kBACH,OAAA,EAAQ,WAAA;AAAA,kBACR,SAAA,EAAW,EAAA,CAAG,kBAAA,EAAoB,qDAAqD,CAAA;AAAA,kBAEtF,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,cACC,cAAA,KAAmB,UAAa,cAAA,KAAmB,IAAA,uBACjD,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,cAAA,EAAe,CAAA,GACxC;AAAA,aAAA,EACN,CAAA;AAAA,YACC,WAAA,KAAgB,MAAA,IAAa,WAAA,KAAgB,IAAA,mBAC5C,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAU,mCAAA,EACnC,uBACH,CAAA,GACE;AAAA,WAAA,EACN,CAAA;AAAA,UACC,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA,SAAA,EACvD;AAAA;AAAA,KACF;AAAA,IACC,OAAA,KAAY,WACX,QAAA,mBAEA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAU,8DAAA;AAAA,QAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,QAAA,EAAS;AAAA;AAAA;AAC/C,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/settings-layout-e0UQtxvw.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const Txt = require('./Txt-BZXvaPLR.cjs');
+const utils_cn = require('./cn-DPfV6E6L.cjs');
+
+function SettingsLayout({
+  title,
+  titleAccessory,
+  description,
+  action,
+  inset = false,
+  variant,
+  children
+}) {
+  if (title === void 0 || title === null) {
+    return variant === "header" ? children : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "settings-layout-content", className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 space-y-8", children }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "settings-page-header",
+        className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-5 pb-0 sm:pt-6",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex min-w-0 flex-wrap items-start justify-between gap-4", inset && "pl-4"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-w-0 gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Txt.Txt,
+                {
+                  as: "h1",
+                  variant: "header-md",
+                  className: utils_cn.cn("min-w-0 truncate", "font-sans font-medium tracking-normal text-neutral4"),
+                  children: title
+                }
+              ),
+              titleAccessory !== void 0 && titleAccessory !== null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: titleAccessory }) : null
+            ] }),
+            description !== void 0 && description !== null ? /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "ui-md", className: "text-neutral4 m-0 wrap-break-word", children: description }) : null
+          ] }),
+          action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action }) : null
+        ] })
+      }
+    ),
+    variant === "header" ? children : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "settings-layout-content",
+        className: "mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 space-y-6", children })
+      }
+    )
+  ] });
+}
+
+exports.SettingsLayout = SettingsLayout;
+//# sourceMappingURL=settings-layout-e0UQtxvw.cjs.map

package/dist/settings-layout-e0UQtxvw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-layout-e0UQtxvw.cjs","sources":["../src/ds/components/SettingsLayout/settings-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface SettingsLayoutProps {\n  title?: ReactNode;\n  titleAccessory?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  inset?: boolean;\n  variant?: 'default' | 'header';\n  children: ReactNode;\n}\n\nexport function SettingsLayout({\n  title,\n  titleAccessory,\n  description,\n  action,\n  inset = false,\n  variant,\n  children,\n}: SettingsLayoutProps) {\n  if (title === undefined || title === null) {\n    return variant === 'header' ? (\n      children\n    ) : (\n      <div data-slot=\"settings-layout-content\" className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\">\n        <div className=\"min-w-0 space-y-8\">{children}</div>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div\n        data-slot=\"settings-page-header\"\n        className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-5 pb-0 sm:pt-6\"\n      >\n        <div className={cn('flex min-w-0 flex-wrap items-start justify-between gap-4', inset && 'pl-4')}>\n          <div className=\"grid min-w-0 gap-2\">\n            <div className=\"flex min-w-0 items-center gap-2\">\n              <Txt\n                as=\"h1\"\n                variant=\"header-md\"\n                className={cn('min-w-0 truncate', 'font-sans font-medium tracking-normal text-neutral4')}\n              >\n                {title}\n              </Txt>\n              {titleAccessory !== undefined && titleAccessory !== null ? (\n                <div className=\"shrink-0\">{titleAccessory}</div>\n              ) : null}\n            </div>\n            {description !== undefined && description !== null ? (\n              <Txt as=\"p\" variant=\"ui-md\" className=\"text-neutral4 m-0 wrap-break-word\">\n                {description}\n              </Txt>\n            ) : null}\n          </div>\n          {action ? <div className=\"shrink-0\">{action}</div> : null}\n        </div>\n      </div>\n      {variant === 'header' ? (\n        children\n      ) : (\n        <div\n          data-slot=\"settings-layout-content\"\n          className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\"\n        >\n          <div className=\"min-w-0 space-y-6\">{children}</div>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":["jsx","jsxs","Fragment","cn","Txt"],"mappings":";;;;;;AAcO,SAAS,cAAA,CAAe;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,OAAA;AAAA,EACA;AACF,CAAA,EAAwB;AACtB,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,OAAA,KAAY,QAAA,GACjB,QAAA,mBAEAA,cAAA,CAAC,SAAI,WAAA,EAAU,yBAAA,EAA0B,SAAA,EAAU,8DAAA,EACjD,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,UAAS,CAAA,EAC/C,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAF,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,SAAA,EAAU,yEAAA;AAAA,QAEV,0CAAC,KAAA,EAAA,EAAI,SAAA,EAAWG,YAAG,0DAAA,EAA4D,KAAA,IAAS,MAAM,CAAA,EAC5F,QAAA,EAAA;AAAA,0BAAAF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oBAAA,EACb,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACb,QAAA,EAAA;AAAA,8BAAAD,cAAA;AAAA,gBAACI,OAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,IAAA;AAAA,kBACH,OAAA,EAAQ,WAAA;AAAA,kBACR,SAAA,EAAWD,WAAA,CAAG,kBAAA,EAAoB,qDAAqD,CAAA;AAAA,kBAEtF,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,cACC,cAAA,KAAmB,UAAa,cAAA,KAAmB,IAAA,kCACjD,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,cAAA,EAAe,CAAA,GACxC;AAAA,aAAA,EACN,CAAA;AAAA,YACC,WAAA,KAAgB,MAAA,IAAa,WAAA,KAAgB,IAAA,mBAC5CH,cAAA,CAACI,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAU,mCAAA,EACnC,uBACH,CAAA,GACE;AAAA,WAAA,EACN,CAAA;AAAA,UACC,yBAASJ,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA,SAAA,EACvD;AAAA;AAAA,KACF;AAAA,IACC,OAAA,KAAY,WACX,QAAA,mBAEAA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAU,8DAAA;AAAA,QAEV,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,QAAA,EAAS;AAAA;AAAA;AAC/C,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/settings-row-BjlCkP3o.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const label = require('./label-DzQOqIjw.cjs');
+const utils_cn = require('./cn-DPfV6E6L.cjs');
+
+function SettingsRowLayout({
+  label: label$1,
+  description,
+  htmlFor,
+  children,
+  className,
+  layout,
+  tone = "default",
+  viewOnly = false,
+  ...props
+}) {
+  const isSectionLayout = layout === "section";
+  const TextElement = isSectionLayout ? "p" : "span";
+  const LabelElement = htmlFor ? label.Label : TextElement;
+  const DescriptionElement = isSectionLayout ? "p" : "div";
+  const control = viewOnly ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LockKeyholeIcon, { className: "size-4 shrink-0", "aria-hidden": true }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "View only: " }),
+    children
+  ] }) : children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": isSectionLayout ? "section-row" : "settings-row",
+      className: utils_cn.cn(
+        isSectionLayout ? "grid min-w-0 gap-3 group-data-[variant=factory]/section:px-3 group-data-[variant=factory]/section:py-2 group-data-[variant=flat]/section:p-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center sm:group-data-[variant=default]/section:gap-4 sm:group-data-[variant=factory]/section:gap-4 sm:group-data-[variant=flat]/section:gap-6" : "flex min-w-0 flex-col",
+        layout === "standalone" && "gap-3 sm:flex-row sm:items-center sm:justify-between",
+        layout === "factory" && "gap-2 px-4 py-3 lg:flex-row lg:items-center lg:justify-between lg:gap-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("min-w-0", !isSectionLayout && "flex flex-col", layout === "factory" && "gap-0.5"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LabelElement,
+            {
+              htmlFor,
+              className: utils_cn.cn(
+                isSectionLayout ? "text-ui-smd leading-ui-sm" : "text-ui-md",
+                layout === "standalone" && "font-medium",
+                layout !== "standalone" && "text-neutral5",
+                layout === "factory" && "leading-ui-md",
+                isSectionLayout && "group-data-[variant=factory]/section:font-medium group-data-[variant=flat]/section:font-medium",
+                viewOnly && "text-neutral3",
+                tone === "destructive" && "text-accent2"
+              ),
+              children: label$1
+            }
+          ),
+          description != null && /* @__PURE__ */ jsxRuntime.jsx(
+            DescriptionElement,
+            {
+              className: utils_cn.cn(
+                "text-neutral3",
+                isSectionLayout ? "mt-1 max-w-[62ch] text-ui-sm leading-ui-sm text-pretty" : "flex flex-col gap-0.5",
+                layout === "standalone" && "text-ui-md",
+                layout === "factory" && "text-ui-sm"
+              ),
+              children: description
+            }
+          )
+        ] }),
+        children != null && (isSectionLayout || viewOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": isSectionLayout ? "section-control" : void 0,
+            className: utils_cn.cn(
+              "min-w-0",
+              isSectionLayout && "sm:justify-self-end",
+              viewOnly && "flex items-center gap-2 text-ui-md text-neutral3"
+            ),
+            children: control
+          }
+        ) : control)
+      ]
+    }
+  );
+}
+function SettingsRow(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SettingsRowLayout, { ...props, layout: "factory" });
+}
+
+exports.SettingsRow = SettingsRow;
+exports.SettingsRowLayout = SettingsRowLayout;
+//# sourceMappingURL=settings-row-BjlCkP3o.cjs.map

package/dist/settings-row-BjlCkP3o.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-row-BjlCkP3o.cjs","sources":["../src/ds/new/settings/settings-row.tsx"],"sourcesContent":["import { LockKeyholeIcon } from 'lucide-react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Label } from '@/ds/components/Label/label';\nimport { cn } from '@/lib/utils';\n\nexport type SettingsRowProps = Omit<ComponentProps<'div'>, 'children'> & {\n  label: ReactNode;\n  description?: ReactNode;\n  htmlFor?: string;\n  children?: ReactNode;\n  tone?: 'default' | 'destructive';\n  viewOnly?: boolean;\n};\n\ntype SettingsRowLayoutProps = SettingsRowProps & {\n  layout: 'factory' | 'standalone' | 'section';\n};\n\nexport function SettingsRowLayout({\n  label,\n  description,\n  htmlFor,\n  children,\n  className,\n  layout,\n  tone = 'default',\n  viewOnly = false,\n  ...props\n}: SettingsRowLayoutProps) {\n  const isSectionLayout = layout === 'section';\n  const TextElement = isSectionLayout ? 'p' : 'span';\n  const LabelElement = htmlFor ? Label : TextElement;\n  const DescriptionElement = isSectionLayout ? 'p' : 'div';\n  const control = viewOnly ? (\n    <>\n      <LockKeyholeIcon className=\"size-4 shrink-0\" aria-hidden />\n      <span className=\"sr-only\">View only: </span>\n      {children}\n    </>\n  ) : (\n    children\n  );\n\n  return (\n    <div\n      data-slot={isSectionLayout ? 'section-row' : 'settings-row'}\n      className={cn(\n        isSectionLayout\n          ? 'grid min-w-0 gap-3 group-data-[variant=factory]/section:px-3 group-data-[variant=factory]/section:py-2 group-data-[variant=flat]/section:p-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center sm:group-data-[variant=default]/section:gap-4 sm:group-data-[variant=factory]/section:gap-4 sm:group-data-[variant=flat]/section:gap-6'\n          : 'flex min-w-0 flex-col',\n        layout === 'standalone' && 'gap-3 sm:flex-row sm:items-center sm:justify-between',\n        layout === 'factory' && 'gap-2 px-4 py-3 lg:flex-row lg:items-center lg:justify-between lg:gap-4',\n        className,\n      )}\n      {...props}\n    >\n      <div className={cn('min-w-0', !isSectionLayout && 'flex flex-col', layout === 'factory' && 'gap-0.5')}>\n        <LabelElement\n          htmlFor={htmlFor}\n          className={cn(\n            isSectionLayout ? 'text-ui-smd leading-ui-sm' : 'text-ui-md',\n            layout === 'standalone' && 'font-medium',\n            layout !== 'standalone' && 'text-neutral5',\n            layout === 'factory' && 'leading-ui-md',\n            isSectionLayout &&\n              'group-data-[variant=factory]/section:font-medium group-data-[variant=flat]/section:font-medium',\n            viewOnly && 'text-neutral3',\n            tone === 'destructive' && 'text-accent2',\n          )}\n        >\n          {label}\n        </LabelElement>\n        {description != null && (\n          <DescriptionElement\n            className={cn(\n              'text-neutral3',\n              isSectionLayout ? 'mt-1 max-w-[62ch] text-ui-sm leading-ui-sm text-pretty' : 'flex flex-col gap-0.5',\n              layout === 'standalone' && 'text-ui-md',\n              layout === 'factory' && 'text-ui-sm',\n            )}\n          >\n            {description}\n          </DescriptionElement>\n        )}\n      </div>\n      {children != null &&\n        (isSectionLayout || viewOnly ? (\n          <div\n            data-slot={isSectionLayout ? 'section-control' : undefined}\n            className={cn(\n              'min-w-0',\n              isSectionLayout && 'sm:justify-self-end',\n              viewOnly && 'flex items-center gap-2 text-ui-md text-neutral3',\n            )}\n          >\n            {control}\n          </div>\n        ) : (\n          control\n        ))}\n    </div>\n  );\n}\n\nexport function SettingsRow(props: SettingsRowProps) {\n  return <SettingsRowLayout {...props} layout=\"factory\" />;\n}\n"],"names":["label","Label","jsxs","Fragment","jsx","LockKeyholeIcon","cn"],"mappings":";;;;;;;AAkBO,SAAS,iBAAA,CAAkB;AAAA,SAChCA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,kBAAkB,MAAA,KAAW,SAAA;AACnC,EAAA,MAAM,WAAA,GAAc,kBAAkB,GAAA,GAAM,MAAA;AAC5C,EAAA,MAAM,YAAA,GAAe,UAAUC,WAAA,GAAQ,WAAA;AACvC,EAAA,MAAM,kBAAA,GAAqB,kBAAkB,GAAA,GAAM,KAAA;AACnD,EAAA,MAAM,OAAA,GAAU,2BACdC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,2BAAA,EAAA,EAAgB,SAAA,EAAU,iBAAA,EAAkB,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,oBACzDD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,IACpC;AAAA,GAAA,EACH,CAAA,GAEA,QAAA;AAGF,EAAA,uBACEF,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAW,kBAAkB,aAAA,GAAgB,cAAA;AAAA,MAC7C,SAAA,EAAWI,WAAA;AAAA,QACT,kBACI,uUAAA,GACA,uBAAA;AAAA,QACJ,WAAW,YAAA,IAAgB,sDAAA;AAAA,QAC3B,WAAW,SAAA,IAAa,yEAAA;AAAA,QACxB;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAJ,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWI,WAAA,CAAG,SAAA,EAAW,CAAC,mBAAmB,eAAA,EAAiB,MAAA,KAAW,SAAA,IAAa,SAAS,CAAA,EAClG,QAAA,EAAA;AAAA,0BAAAF,cAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,SAAA,EAAWE,WAAA;AAAA,gBACT,kBAAkB,2BAAA,GAA8B,YAAA;AAAA,gBAChD,WAAW,YAAA,IAAgB,aAAA;AAAA,gBAC3B,WAAW,YAAA,IAAgB,eAAA;AAAA,gBAC3B,WAAW,SAAA,IAAa,eAAA;AAAA,gBACxB,eAAA,IACE,gGAAA;AAAA,gBACF,QAAA,IAAY,eAAA;AAAA,gBACZ,SAAS,aAAA,IAAiB;AAAA,eAC5B;AAAA,cAEC,QAAA,EAAAN;AAAA;AAAA,WACH;AAAA,UACC,eAAe,IAAA,oBACdI,cAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWE,WAAA;AAAA,gBACT,eAAA;AAAA,gBACA,kBAAkB,wDAAA,GAA2D,uBAAA;AAAA,gBAC7E,WAAW,YAAA,IAAgB,YAAA;AAAA,gBAC3B,WAAW,SAAA,IAAa;AAAA,eAC1B;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA;AACH,SAAA,EAEJ,CAAA;AAAA,QACC,QAAA,IAAY,IAAA,KACV,eAAA,IAAmB,QAAA,mBAClBF,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAW,kBAAkB,iBAAA,GAAoB,MAAA;AAAA,YACjD,SAAA,EAAWE,WAAA;AAAA,cACT,SAAA;AAAA,cACA,eAAA,IAAmB,qBAAA;AAAA,cACnB,QAAA,IAAY;AAAA,aACd;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH,GAEA,OAAA;AAAA;AAAA;AAAA,GAEN;AAEJ;AAEO,SAAS,YAAY,KAAA,EAAyB;AACnD,EAAA,uBAAOF,cAAA,CAAC,iBAAA,EAAA,EAAmB,GAAG,KAAA,EAAO,QAAO,SAAA,EAAU,CAAA;AACxD;;;;;"}

package/dist/settings-row-CxdGvdwb.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { LockKeyholeIcon } from 'lucide-react';
+import { L as Label } from './label-BBPnGszd.js';
+import { c as cn } from './cn-Dxjsbr9n.js';
+
+function SettingsRowLayout({
+  label,
+  description,
+  htmlFor,
+  children,
+  className,
+  layout,
+  tone = "default",
+  viewOnly = false,
+  ...props
+}) {
+  const isSectionLayout = layout === "section";
+  const TextElement = isSectionLayout ? "p" : "span";
+  const LabelElement = htmlFor ? Label : TextElement;
+  const DescriptionElement = isSectionLayout ? "p" : "div";
+  const control = viewOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(LockKeyholeIcon, { className: "size-4 shrink-0", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "View only: " }),
+    children
+  ] }) : children;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": isSectionLayout ? "section-row" : "settings-row",
+      className: cn(
+        isSectionLayout ? "grid min-w-0 gap-3 group-data-[variant=factory]/section:px-3 group-data-[variant=factory]/section:py-2 group-data-[variant=flat]/section:p-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center sm:group-data-[variant=default]/section:gap-4 sm:group-data-[variant=factory]/section:gap-4 sm:group-data-[variant=flat]/section:gap-6" : "flex min-w-0 flex-col",
+        layout === "standalone" && "gap-3 sm:flex-row sm:items-center sm:justify-between",
+        layout === "factory" && "gap-2 px-4 py-3 lg:flex-row lg:items-center lg:justify-between lg:gap-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", !isSectionLayout && "flex flex-col", layout === "factory" && "gap-0.5"), children: [
+          /* @__PURE__ */ jsx(
+            LabelElement,
+            {
+              htmlFor,
+              className: cn(
+                isSectionLayout ? "text-ui-smd leading-ui-sm" : "text-ui-md",
+                layout === "standalone" && "font-medium",
+                layout !== "standalone" && "text-neutral5",
+                layout === "factory" && "leading-ui-md",
+                isSectionLayout && "group-data-[variant=factory]/section:font-medium group-data-[variant=flat]/section:font-medium",
+                viewOnly && "text-neutral3",
+                tone === "destructive" && "text-accent2"
+              ),
+              children: label
+            }
+          ),
+          description != null && /* @__PURE__ */ jsx(
+            DescriptionElement,
+            {
+              className: cn(
+                "text-neutral3",
+                isSectionLayout ? "mt-1 max-w-[62ch] text-ui-sm leading-ui-sm text-pretty" : "flex flex-col gap-0.5",
+                layout === "standalone" && "text-ui-md",
+                layout === "factory" && "text-ui-sm"
+              ),
+              children: description
+            }
+          )
+        ] }),
+        children != null && (isSectionLayout || viewOnly ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": isSectionLayout ? "section-control" : void 0,
+            className: cn(
+              "min-w-0",
+              isSectionLayout && "sm:justify-self-end",
+              viewOnly && "flex items-center gap-2 text-ui-md text-neutral3"
+            ),
+            children: control
+          }
+        ) : control)
+      ]
+    }
+  );
+}
+function SettingsRow(props) {
+  return /* @__PURE__ */ jsx(SettingsRowLayout, { ...props, layout: "factory" });
+}
+
+export { SettingsRowLayout as S, SettingsRow as a };
+//# sourceMappingURL=settings-row-CxdGvdwb.js.map

package/dist/settings-row-CxdGvdwb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-row-CxdGvdwb.js","sources":["../src/ds/new/settings/settings-row.tsx"],"sourcesContent":["import { LockKeyholeIcon } from 'lucide-react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Label } from '@/ds/components/Label/label';\nimport { cn } from '@/lib/utils';\n\nexport type SettingsRowProps = Omit<ComponentProps<'div'>, 'children'> & {\n  label: ReactNode;\n  description?: ReactNode;\n  htmlFor?: string;\n  children?: ReactNode;\n  tone?: 'default' | 'destructive';\n  viewOnly?: boolean;\n};\n\ntype SettingsRowLayoutProps = SettingsRowProps & {\n  layout: 'factory' | 'standalone' | 'section';\n};\n\nexport function SettingsRowLayout({\n  label,\n  description,\n  htmlFor,\n  children,\n  className,\n  layout,\n  tone = 'default',\n  viewOnly = false,\n  ...props\n}: SettingsRowLayoutProps) {\n  const isSectionLayout = layout === 'section';\n  const TextElement = isSectionLayout ? 'p' : 'span';\n  const LabelElement = htmlFor ? Label : TextElement;\n  const DescriptionElement = isSectionLayout ? 'p' : 'div';\n  const control = viewOnly ? (\n    <>\n      <LockKeyholeIcon className=\"size-4 shrink-0\" aria-hidden />\n      <span className=\"sr-only\">View only: </span>\n      {children}\n    </>\n  ) : (\n    children\n  );\n\n  return (\n    <div\n      data-slot={isSectionLayout ? 'section-row' : 'settings-row'}\n      className={cn(\n        isSectionLayout\n          ? 'grid min-w-0 gap-3 group-data-[variant=factory]/section:px-3 group-data-[variant=factory]/section:py-2 group-data-[variant=flat]/section:p-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center sm:group-data-[variant=default]/section:gap-4 sm:group-data-[variant=factory]/section:gap-4 sm:group-data-[variant=flat]/section:gap-6'\n          : 'flex min-w-0 flex-col',\n        layout === 'standalone' && 'gap-3 sm:flex-row sm:items-center sm:justify-between',\n        layout === 'factory' && 'gap-2 px-4 py-3 lg:flex-row lg:items-center lg:justify-between lg:gap-4',\n        className,\n      )}\n      {...props}\n    >\n      <div className={cn('min-w-0', !isSectionLayout && 'flex flex-col', layout === 'factory' && 'gap-0.5')}>\n        <LabelElement\n          htmlFor={htmlFor}\n          className={cn(\n            isSectionLayout ? 'text-ui-smd leading-ui-sm' : 'text-ui-md',\n            layout === 'standalone' && 'font-medium',\n            layout !== 'standalone' && 'text-neutral5',\n            layout === 'factory' && 'leading-ui-md',\n            isSectionLayout &&\n              'group-data-[variant=factory]/section:font-medium group-data-[variant=flat]/section:font-medium',\n            viewOnly && 'text-neutral3',\n            tone === 'destructive' && 'text-accent2',\n          )}\n        >\n          {label}\n        </LabelElement>\n        {description != null && (\n          <DescriptionElement\n            className={cn(\n              'text-neutral3',\n              isSectionLayout ? 'mt-1 max-w-[62ch] text-ui-sm leading-ui-sm text-pretty' : 'flex flex-col gap-0.5',\n              layout === 'standalone' && 'text-ui-md',\n              layout === 'factory' && 'text-ui-sm',\n            )}\n          >\n            {description}\n          </DescriptionElement>\n        )}\n      </div>\n      {children != null &&\n        (isSectionLayout || viewOnly ? (\n          <div\n            data-slot={isSectionLayout ? 'section-control' : undefined}\n            className={cn(\n              'min-w-0',\n              isSectionLayout && 'sm:justify-self-end',\n              viewOnly && 'flex items-center gap-2 text-ui-md text-neutral3',\n            )}\n          >\n            {control}\n          </div>\n        ) : (\n          control\n        ))}\n    </div>\n  );\n}\n\nexport function SettingsRow(props: SettingsRowProps) {\n  return <SettingsRowLayout {...props} layout=\"factory\" />;\n}\n"],"names":[],"mappings":"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"}

package/dist/shimmer-R2LMMF5x.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { c as cn } from './cn-Dxjsbr9n.js';
+
+import './shimmer.css';const Shimmer = ({ active = true, className, ...props }) => {
+  const swept = useRef(active);
+  if (active) swept.current = true;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-block",
+        swept.current && "shimmer-text",
+        swept.current && !active && "shimmer-settled",
+        className
+      ),
+      ...props
+    }
+  );
+};
+
+export { Shimmer as S };
+//# sourceMappingURL=shimmer-R2LMMF5x.js.map

package/dist/shimmer-R2LMMF5x.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer-R2LMMF5x.js","sources":["../src/ds/components/Shimmer/shimmer.tsx"],"sourcesContent":["import { useRef, type ComponentProps } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './shimmer.css';\n\nexport interface ShimmerProps extends ComponentProps<'span'> {\n  /** Sweeping while true; when it turns false the sweep settles where it stands. */\n  active?: boolean;\n}\n\n/**\n * Text that says it is still being produced. One element whatever the state: swapping\n * it for a plain span once the work lands would remount everything it wraps, replaying\n * the entrance of every row and detail inside it.\n */\nexport const Shimmer = ({ active = true, className, ...props }: ShimmerProps) => {\n  const swept = useRef(active);\n  if (active) swept.current = true;\n\n  return (\n    <span\n      className={cn(\n        'inline-block',\n        swept.current && 'shimmer-text',\n        swept.current && !active && 'shimmer-settled',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAgBO,MAAM,OAAA,GAAU,CAAC,EAAE,MAAA,GAAS,MAAM,SAAA,EAAW,GAAG,OAAM,KAAoB;AAC/E,EAAA,MAAM,KAAA,GAAQ,OAAO,MAAM,CAAA;AAC3B,EAAA,IAAI,MAAA,QAAc,OAAA,GAAU,IAAA;AAE5B,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,cAAA;AAAA,QACA,MAAM,OAAA,IAAW,cAAA;AAAA,QACjB,KAAA,CAAM,OAAA,IAAW,CAAC,MAAA,IAAU,iBAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}