@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/dist/input-group-I8YVM_Ps.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-I8YVM_Ps.cjs","sources":["../src/ds/components/InputGroup/input-group.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { ControlSizeContext, controlHeight } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { fieldErrorRimWithin, inputSurfaceAndFocusWithinStyle } from '@/ds/primitives/form-element';\nimport { cn } from '@/lib/utils';\n\n// Size flows down as `data-size` on the named group root (`group/input-group`), read by the\n// control through `group-data-[size=…]` variants — no prop drilling. The one context read is\n// upward: a wrapper that owns the rung (ButtonsGroup) hands it to the field.\n\nconst inputGroupBaseClassName = cn(\n  // `flex-1` (not `min-w-0`) lets the root fill a flex row while keeping its content-floor\n  // so it never collapses to 0. `items-center` centres the control: it carries its own\n  // h-form-* (2px taller than the root's content box), so stretch would push its text low\n  // / overflow the bottom border, while centring overlaps the (transparent) borders cleanly.\n  'group/input-group relative flex w-full flex-1 items-center',\n  // The wrapper owns its control's width — a bare control has no width of its own,\n  // so the group is the one that decides the input fills the remaining space.\n  '[&>[data-slot=input-group-control]]:min-w-0 [&>[data-slot=input-group-control]]:flex-1',\n  'text-foreground',\n  'has-[:disabled]:cursor-not-allowed has-[:disabled]:text-muted-foreground',\n  // Height is on the root (border-box) so the group matches a same-size sibling control.\n  // Auto height when vertical (block-* addon) or wrapping a textarea.\n  'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col',\n  'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col',\n  'has-[textarea]:h-auto',\n  'has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0',\n  'has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0',\n  // In flex-col, flex-1 zeroes the control's height; force flex-none + w-full instead.\n  'has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none',\n  'has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none',\n);\n\nconst inputGroupRoundedTextareaClassName = cn(\n  // Pill (rounded-full) only fits single-line inline shapes. Fall back to rounded-xl\n  // whenever the group goes vertical (block-* addon) or wraps a textarea.\n  'has-[>[data-align=block-start]]:rounded-xl',\n  'has-[>[data-align=block-end]]:rounded-xl',\n  'has-[textarea]:rounded-xl',\n);\n\n// A group wears the field material — the same `bg-card` plus rim an Input wears — so a\n// group and a bare field beside it are one surface. Its states move the rim, and they\n// read the nested control's focus (`focus-within`) because the wrapper never takes focus\n// itself. There is no second look: a transparent `outline` group existed alongside this\n// one and only ever produced two boundary languages for the same control, which is why\n// four of its call sites had wrapped it in a hand-made `bg-card rounded-full` div to get\n// the material back.\nconst inputGroupClassName = cn(\n  inputGroupBaseClassName,\n  'rounded-full',\n  inputSurfaceAndFocusWithinStyle,\n  fieldErrorRimWithin,\n  inputGroupRoundedTextareaClassName,\n);\n\nexport type InputGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  size?: ControlSize;\n};\n\nconst InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(({ className, size, ...props }, ref) => {\n  // A wrapper's rung wins over the field's own: inside a ButtonsGroup the group owns the\n  // height of every segment, so a field that kept its own type scale would sit at one rung\n  // and read at another.\n  const groupSize = React.useContext(ControlSizeContext);\n  const resolved = groupSize ?? size ?? 'md';\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      data-slot=\"input-group\"\n      data-size={resolved}\n      className={cn(inputGroupClassName, controlHeight[resolved], className)}\n      {...props}\n    />\n  );\n});\nInputGroup.displayName = 'InputGroup';\n\nconst inputGroupControlTextBySize = cn(\n  'group-data-[size=sm]/input-group:text-caption',\n  'group-data-[size=md]/input-group:text-body-sm',\n  'group-data-[size=lg]/input-group:text-body',\n);\n\nconst inputGroupAddonVariants = cva(\n  cn(\n    'flex items-center justify-center gap-2 text-muted-foreground select-none',\n    inputGroupControlTextBySize,\n    'group-has-[:disabled]/input-group:text-muted-foreground',\n    \"[&>svg:not([class*='size-'])]:size-4\",\n  ),\n  {\n    variants: {\n      align: {\n        'inline-start': 'order-first pr-1 pl-3 has-[>button]:pl-1',\n        'inline-end': 'order-last pr-3 pl-1 has-[>button]:pr-1',\n        'block-start': 'order-first w-full justify-start border-b border-border px-3 pt-2 pb-1',\n        'block-end': 'order-last w-full justify-start border-t border-border px-3 pt-1 pb-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\nexport type InputGroupAddonProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof inputGroupAddonVariants>;\n\nconst InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(\n  ({ className, align = 'inline-start', onClick, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        data-slot=\"input-group-addon\"\n        data-align={align}\n        className={cn(inputGroupAddonVariants({ align }), className)}\n        onClick={event => {\n          // Click on non-interactive addon area focuses the control inside the group.\n          // Skip when a button/input handled the click itself.\n          const target = event.target as HTMLElement;\n          if (!target.closest('button, input, textarea, [role=\"button\"]')) {\n            event.currentTarget.parentElement\n              ?.querySelector<HTMLInputElement | HTMLTextAreaElement>('[data-slot=input-group-control]')\n              ?.focus();\n          }\n          onClick?.(event);\n        }}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupAddon.displayName = 'InputGroupAddon';\n\n// Size flows from the parent group's `data-size` (no React context). All four sizes are\n// written out so Tailwind's scanner emits them. The control is sized to the root's\n// content box (token height minus the 1px border on each side) so it never overflows the\n// root — otherwise, in a flex-column parent, the root's content-based minimum would win\n// over its explicit height and the group would render 2px taller than a sibling control.\n// The explicit height also keeps the control from collapsing to the line-height in block\n// mode (flex-col + flex-none).\nconst inputGroupControlHeightBySize = cn(\n  'group-data-[size=sm]/input-group:h-[calc(var(--spacing-control-sm)-2px)]',\n  'group-data-[size=md]/input-group:h-[calc(var(--spacing-control-md)-2px)]',\n  'group-data-[size=lg]/input-group:h-[calc(var(--spacing-control-lg)-2px)]',\n);\nexport type InputGroupInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n  testId?: string;\n  error?: boolean;\n};\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(\n  ({ className, testId, error, type = 'text', ...props }, ref) => {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-slot=\"input-group-control\"\n        data-testid={testId}\n        aria-invalid={error}\n        className={cn(\n          // Height fits the root's content box (see inputGroupControlHeightBySize).\n          'min-w-0 flex-1 bg-transparent px-3 text-foreground outline-hidden',\n          inputGroupControlHeightBySize,\n          inputGroupControlTextBySize,\n          'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n          'focus:placeholder:opacity-70',\n          'disabled:cursor-not-allowed',\n          // Hide native number-spinner arrows so consumers can compose their own\n          // stepper (see the NumberWithStepper story). WebKit uses the spin-button\n          // pseudo-elements; Firefox needs `appearance: textfield` on the input.\n          '[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none',\n          '[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none',\n          '[&[type=number]]:[appearance:textfield]',\n          // type=\"search\": drop WebKit's native clear button so it doesn't double up with a\n          // custom clear control (e.g. the scorers toolbar's InputGroupButton).\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupInput.displayName = 'InputGroupInput';\n\nexport type InputGroupTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  testId?: string;\n  error?: boolean;\n};\n\nconst InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, InputGroupTextareaProps>(\n  ({ className, testId, error, ...props }, ref) => {\n    return (\n      <textarea\n        ref={ref}\n        data-slot=\"input-group-control\"\n        data-testid={testId}\n        aria-invalid={error}\n        className={cn(\n          'min-h-15 min-w-0 flex-1 resize-y bg-transparent px-3 py-2 text-foreground outline-hidden',\n          inputGroupControlTextBySize,\n          'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n          'focus:placeholder:opacity-70',\n          'disabled:cursor-not-allowed',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupTextarea.displayName = 'InputGroupTextarea';\n\nexport type InputGroupTextProps = React.ComponentPropsWithoutRef<'span'>;\n\nconst InputGroupText = React.forwardRef<HTMLSpanElement, InputGroupTextProps>(({ className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        'flex items-center gap-2 text-caption text-muted-foreground [&_svg]:pointer-events-none',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nInputGroupText.displayName = 'InputGroupText';\n\nexport type InputGroupButtonProps = Omit<ButtonProps, 'size' | 'variant'> & {\n  size?: ButtonProps['size'];\n  variant?: ButtonProps['variant'];\n};\n\nconst InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\n  ({ size = 'icon-sm', variant = 'ghost', type = 'button', ...props }, ref) => {\n    return <Button ref={ref} type={type} size={size} variant={variant} {...props} />;\n  },\n);\nInputGroupButton.displayName = 'InputGroupButton';\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, InputGroupText, InputGroupButton };\n"],"names":["cn","inputSurfaceAndFocusWithinStyle","fieldErrorRimWithin","React","ControlSizeContext","jsx","controlHeight","cva","Button"],"mappings":"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"}

package/dist/layout/tabbed-container.cjs.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 require('../tabbed-container.css');const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const combobox = require('../combobox-CJBXDMDk.cjs');
-const dataList = require('../data-list-DEKEzLzK.cjs');
-const listSearch = require('../list-search-Cuv2Y2J_.cjs');
-const tabsContent = require('../tabs-content-DKELc1lK.cjs');
-const tabsTab = require('../tabs-tab-BzurlE52.cjs');
-const tabsRoot = require('../tabs-root-5s72GhmI.cjs');
+const combobox = require('../combobox-rKV-Lksj.cjs');
+const dataList = require('../data-list-D8bACyyK.cjs');
+const listSearch = require('../list-search-DXb7HFX8.cjs');
+const tabsContent = require('../tabs-content-DQNRMjup.cjs');
+const tabsTab = require('../tabs-tab-lm4xyjtD.cjs');
+const tabsRoot = require('../tabs-root-BqC8X_h6.cjs');
 const tooltip = require('../tooltip-DIZ5oqjV.cjs');
+const Txt = require('../Txt-DPmEpNbp.cjs');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 const TabbedContainerPanel = ({ value, children, className }) => /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value, keepMounted: true, className: utils_cn.cn("min-h-0 flex-1", className), children });
@@ -35,7 +36,7 @@ const DataListControls = ({ dataLists }) => {
           filter ? /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { delay: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "tabbed-container-filter", "data-active": filterCount > 0 || void 0, children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListFilterIcon, { "aria-hidden": "true" }),
-              filterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", "data-slot": "tabbed-container-filter-count", className: "text-meta", children: filterCount }) : null,
+              filterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", "aria-hidden": "true", "data-slot": "tabbed-container-filter-count", children: filterCount }) : null,
               filter.multiple ? /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox, { ...filter, clearLabel: "Clear", size: "md", variant: "default" }) : /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox, { ...filter, size: "md", variant: "default" })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { side: "bottom", children: filterCount > 0 ? `Filter, ${filterCount} selected` : "Filter" })

package/dist/layout/tabbed-container.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabbed-container.cjs.js","sources":["../../src/ds/layout/tabbed-container/tabbed-container-root.tsx","../../src/ds/layout/tabbed-container/index.ts"],"sourcesContent":["import { ListFilterIcon } from 'lucide-react';\nimport { Children, isValidElement, useContext } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport './tabbed-container.css';\nimport { Combobox } from '@/ds/components/Combobox/combobox';\nimport type { ComboboxProps } from '@/ds/components/Combobox/combobox';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport type { DataListFit } from '@/ds/components/DataList/data-list-root';\nimport { ListSearch } from '@/ds/components/ListSearch/list-search';\nimport type { ListSearchProps } from '@/ds/components/ListSearch/list-search';\nimport { TabContent } from '@/ds/components/Tabs/tabs-content';\nimport { TabsContext } from '@/ds/components/Tabs/tabs-context';\nimport { TabList } from '@/ds/components/Tabs/tabs-list';\nimport { Tabs } from '@/ds/components/Tabs/tabs-root';\nimport { Tab } from '@/ds/components/Tabs/tabs-tab';\nimport type { TabProps } from '@/ds/components/Tabs/tabs-tab';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ds/components/Tooltip/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport type TabbedContainerSearchProps = Pick<\n  ListSearchProps,\n  'debounceMs' | 'label' | 'onSearch' | 'placeholder' | 'value'\n>;\n\nexport type TabbedContainerFilterProps = ComboboxProps & { 'aria-label': string };\n\ntype TabbedContainerItemProps = Pick<\n  TabProps,\n  'attention' | 'disabled' | 'disabledTooltip' | 'onClick' | 'onClose' | 'value'\n> & {\n  label: ReactNode;\n  children: ReactNode;\n  className?: string;\n  tabClassName?: string;\n};\n\nexport type TabbedContainerPanelProps = TabbedContainerItemProps;\n\nexport type TabbedContainerDataListProps = TabbedContainerItemProps & {\n  columns: string;\n  search?: TabbedContainerSearchProps;\n  filter?: TabbedContainerFilterProps;\n  fit?: DataListFit;\n};\n\nexport const TabbedContainerPanel = ({ value, children, className }: TabbedContainerPanelProps) => (\n  <TabContent value={value} keepMounted className={cn('min-h-0 flex-1', className)}>\n    {children}\n  </TabContent>\n);\n\nexport const TabbedContainerDataList = ({ value, columns, fit, children, className }: TabbedContainerDataListProps) => (\n  <TabContent value={value} keepMounted className={cn('tabbed-container-data-list min-h-0 flex-1', className)}>\n    <DataList columns={columns} fit={fit} variant=\"light\" className=\"min-h-0 px-0 pb-0\">\n      {children}\n    </DataList>\n  </TabContent>\n);\n\nexport const DataListControls = ({ dataLists }: { dataLists: ReactElement<TabbedContainerDataListProps>[] }) => {\n  const tabs = useContext(TabsContext);\n  return dataLists.map(dataList => {\n    const { filter, search, value } = dataList.props;\n    if (!search && !filter) return null;\n    const active = value === tabs?.value;\n    const filterCount = filter ? (Array.isArray(filter.value) ? filter.value.length : filter.value ? 1 : 0) : 0;\n    return (\n      <div\n        key={value}\n        data-slot=\"tabbed-container-controls\"\n        data-active={active || undefined}\n        aria-hidden={!active}\n        inert={!active}\n      >\n        <div data-slot=\"tabbed-container-query\">\n          {search ? (\n            <div data-slot=\"tabbed-container-search\">\n              <ListSearch {...search} size=\"md\" shortcutDisabled={!active} />\n            </div>\n          ) : null}\n          {filter ? (\n            <TooltipProvider delay={200}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <div data-slot=\"tabbed-container-filter\" data-active={filterCount > 0 || undefined}>\n                    <ListFilterIcon aria-hidden=\"true\" />\n                    {filterCount > 0 ? (\n                      <span aria-hidden=\"true\" data-slot=\"tabbed-container-filter-count\" className=\"text-meta\">\n                        {filterCount}\n                      </span>\n                    ) : null}\n                    {filter.multiple ? (\n                      <Combobox {...filter} clearLabel=\"Clear\" size=\"md\" variant=\"default\" />\n                    ) : (\n                      <Combobox {...filter} size=\"md\" variant=\"default\" />\n                    )}\n                  </div>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {filterCount > 0 ? `Filter, ${filterCount} selected` : 'Filter'}\n                </TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ) : null}\n        </div>\n      </div>\n    );\n  });\n};\n\nexport type TabbedContainerProps<T extends string> = {\n  children: ReactNode;\n  defaultTab: T;\n  value?: T;\n  onValueChange?: (value: T) => void;\n  frame?: 'stroke' | 'inset';\n  className?: string;\n};\n\ntype TabbedContainerChildProps = TabbedContainerPanelProps | TabbedContainerDataListProps;\n\nconst isContainerChild = (child: ReactNode): child is ReactElement<TabbedContainerChildProps> =>\n  isValidElement(child) && (child.type === TabbedContainerPanel || child.type === TabbedContainerDataList);\n\nconst isDataList = (\n  child: ReactElement<TabbedContainerChildProps>,\n): child is ReactElement<TabbedContainerDataListProps> => child.type === TabbedContainerDataList;\n\nexport function TabbedContainerRoot<T extends string>({\n  children,\n  defaultTab,\n  value,\n  onValueChange,\n  frame = 'inset',\n  className,\n}: TabbedContainerProps<T>) {\n  const panels = Children.toArray(children).filter(isContainerChild);\n  const dataLists = panels.filter(isDataList);\n  return (\n    <Tabs\n      defaultTab={defaultTab}\n      value={value}\n      onValueChange={onValueChange}\n      appearance=\"contained\"\n      frame={frame}\n      className={cn('tabbed-container min-h-0 flex-1', className)}\n    >\n      <div data-slot=\"tabbed-container-rail\">\n        <div data-slot=\"tabbed-container-tabs\">\n          <TabList>\n            {panels.map(panel => (\n              <Tab\n                key={panel.props.value}\n                value={panel.props.value}\n                disabled={panel.props.disabled}\n                attention={panel.props.attention}\n                disabledTooltip={panel.props.disabledTooltip}\n                onClick={panel.props.onClick}\n                onClose={panel.props.onClose}\n                className={panel.props.tabClassName}\n              >\n                {panel.props.label}\n              </Tab>\n            ))}\n          </TabList>\n        </div>\n        <DataListControls dataLists={dataLists} />\n      </div>\n      {panels}\n    </Tabs>\n  );\n}\n","import { TabbedContainerDataList, TabbedContainerPanel, TabbedContainerRoot } from './tabbed-container-root';\n\nexport type {\n  TabbedContainerDataListProps,\n  TabbedContainerFilterProps,\n  TabbedContainerPanelProps,\n  TabbedContainerProps,\n  TabbedContainerSearchProps,\n} from './tabbed-container-root';\n\nexport const TabbedContainer = Object.assign(TabbedContainerRoot, {\n  Panel: TabbedContainerPanel,\n  DataList: TabbedContainerDataList,\n});\n"],"names":["jsx","TabContent","cn","DataList","useContext","TabsContext","jsxs","ListSearch","TooltipProvider","Tooltip","TooltipTrigger","ListFilterIcon","Combobox","TooltipContent","isValidElement","Children","Tabs","TabList","Tab"],"mappings":"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"}
+{"version":3,"file":"tabbed-container.cjs.js","sources":["../../src/ds/layout/tabbed-container/tabbed-container-root.tsx","../../src/ds/layout/tabbed-container/index.ts"],"sourcesContent":["import { ListFilterIcon } from 'lucide-react';\nimport { Children, isValidElement, useContext } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport './tabbed-container.css';\nimport { Combobox } from '@/ds/components/Combobox/combobox';\nimport type { ComboboxProps } from '@/ds/components/Combobox/combobox';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport type { DataListFit } from '@/ds/components/DataList/data-list-root';\nimport { ListSearch } from '@/ds/components/ListSearch/list-search';\nimport type { ListSearchProps } from '@/ds/components/ListSearch/list-search';\nimport { TabContent } from '@/ds/components/Tabs/tabs-content';\nimport { TabsContext } from '@/ds/components/Tabs/tabs-context';\nimport { TabList } from '@/ds/components/Tabs/tabs-list';\nimport { Tabs } from '@/ds/components/Tabs/tabs-root';\nimport { Tab } from '@/ds/components/Tabs/tabs-tab';\nimport type { TabProps } from '@/ds/components/Tabs/tabs-tab';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ds/components/Tooltip/tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type TabbedContainerSearchProps = Pick<\n  ListSearchProps,\n  'debounceMs' | 'label' | 'onSearch' | 'placeholder' | 'value'\n>;\n\nexport type TabbedContainerFilterProps = ComboboxProps & { 'aria-label': string };\n\ntype TabbedContainerItemProps = Pick<\n  TabProps,\n  'attention' | 'disabled' | 'disabledTooltip' | 'onClick' | 'onClose' | 'value'\n> & {\n  label: ReactNode;\n  children: ReactNode;\n  className?: string;\n  tabClassName?: string;\n};\n\nexport type TabbedContainerPanelProps = TabbedContainerItemProps;\n\nexport type TabbedContainerDataListProps = TabbedContainerItemProps & {\n  columns: string;\n  search?: TabbedContainerSearchProps;\n  filter?: TabbedContainerFilterProps;\n  fit?: DataListFit;\n};\n\nexport const TabbedContainerPanel = ({ value, children, className }: TabbedContainerPanelProps) => (\n  <TabContent value={value} keepMounted className={cn('min-h-0 flex-1', className)}>\n    {children}\n  </TabContent>\n);\n\nexport const TabbedContainerDataList = ({ value, columns, fit, children, className }: TabbedContainerDataListProps) => (\n  <TabContent value={value} keepMounted className={cn('tabbed-container-data-list min-h-0 flex-1', className)}>\n    <DataList columns={columns} fit={fit} variant=\"light\" className=\"min-h-0 px-0 pb-0\">\n      {children}\n    </DataList>\n  </TabContent>\n);\n\nexport const DataListControls = ({ dataLists }: { dataLists: ReactElement<TabbedContainerDataListProps>[] }) => {\n  const tabs = useContext(TabsContext);\n  return dataLists.map(dataList => {\n    const { filter, search, value } = dataList.props;\n    if (!search && !filter) return null;\n    const active = value === tabs?.value;\n    const filterCount = filter ? (Array.isArray(filter.value) ? filter.value.length : filter.value ? 1 : 0) : 0;\n    return (\n      <div\n        key={value}\n        data-slot=\"tabbed-container-controls\"\n        data-active={active || undefined}\n        aria-hidden={!active}\n        inert={!active}\n      >\n        <div data-slot=\"tabbed-container-query\">\n          {search ? (\n            <div data-slot=\"tabbed-container-search\">\n              <ListSearch {...search} size=\"md\" shortcutDisabled={!active} />\n            </div>\n          ) : null}\n          {filter ? (\n            <TooltipProvider delay={200}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <div data-slot=\"tabbed-container-filter\" data-active={filterCount > 0 || undefined}>\n                    <ListFilterIcon aria-hidden=\"true\" />\n                    {filterCount > 0 ? (\n                      <Txt as=\"span\" variant=\"meta\" aria-hidden=\"true\" data-slot=\"tabbed-container-filter-count\">\n                        {filterCount}\n                      </Txt>\n                    ) : null}\n                    {filter.multiple ? (\n                      <Combobox {...filter} clearLabel=\"Clear\" size=\"md\" variant=\"default\" />\n                    ) : (\n                      <Combobox {...filter} size=\"md\" variant=\"default\" />\n                    )}\n                  </div>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {filterCount > 0 ? `Filter, ${filterCount} selected` : 'Filter'}\n                </TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ) : null}\n        </div>\n      </div>\n    );\n  });\n};\n\nexport type TabbedContainerProps<T extends string> = {\n  children: ReactNode;\n  defaultTab: T;\n  value?: T;\n  onValueChange?: (value: T) => void;\n  frame?: 'stroke' | 'inset';\n  className?: string;\n};\n\ntype TabbedContainerChildProps = TabbedContainerPanelProps | TabbedContainerDataListProps;\n\nconst isContainerChild = (child: ReactNode): child is ReactElement<TabbedContainerChildProps> =>\n  isValidElement(child) && (child.type === TabbedContainerPanel || child.type === TabbedContainerDataList);\n\nconst isDataList = (\n  child: ReactElement<TabbedContainerChildProps>,\n): child is ReactElement<TabbedContainerDataListProps> => child.type === TabbedContainerDataList;\n\nexport function TabbedContainerRoot<T extends string>({\n  children,\n  defaultTab,\n  value,\n  onValueChange,\n  frame = 'inset',\n  className,\n}: TabbedContainerProps<T>) {\n  const panels = Children.toArray(children).filter(isContainerChild);\n  const dataLists = panels.filter(isDataList);\n  return (\n    <Tabs\n      defaultTab={defaultTab}\n      value={value}\n      onValueChange={onValueChange}\n      appearance=\"contained\"\n      frame={frame}\n      className={cn('tabbed-container min-h-0 flex-1', className)}\n    >\n      <div data-slot=\"tabbed-container-rail\">\n        <div data-slot=\"tabbed-container-tabs\">\n          <TabList>\n            {panels.map(panel => (\n              <Tab\n                key={panel.props.value}\n                value={panel.props.value}\n                disabled={panel.props.disabled}\n                attention={panel.props.attention}\n                disabledTooltip={panel.props.disabledTooltip}\n                onClick={panel.props.onClick}\n                onClose={panel.props.onClose}\n                className={panel.props.tabClassName}\n              >\n                {panel.props.label}\n              </Tab>\n            ))}\n          </TabList>\n        </div>\n        <DataListControls dataLists={dataLists} />\n      </div>\n      {panels}\n    </Tabs>\n  );\n}\n","import { TabbedContainerDataList, TabbedContainerPanel, TabbedContainerRoot } from './tabbed-container-root';\n\nexport type {\n  TabbedContainerDataListProps,\n  TabbedContainerFilterProps,\n  TabbedContainerPanelProps,\n  TabbedContainerProps,\n  TabbedContainerSearchProps,\n} from './tabbed-container-root';\n\nexport const TabbedContainer = Object.assign(TabbedContainerRoot, {\n  Panel: TabbedContainerPanel,\n  DataList: TabbedContainerDataList,\n});\n"],"names":["jsx","TabContent","cn","DataList","useContext","TabsContext","jsxs","ListSearch","TooltipProvider","Tooltip","TooltipTrigger","ListFilterIcon","Txt","Combobox","TooltipContent","isValidElement","Children","Tabs","TabList","Tab"],"mappings":"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"}

package/dist/layout/tabbed-container.es.js

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ListFilterIcon } from 'lucide-react';
 import { Children, isValidElement, useContext } from 'react';
-import { C as Combobox } from '../combobox-Bel2EaKX.js';
-import { D as DataList } from '../data-list-u1TC5cbd.js';
-import { L as ListSearch } from '../list-search-BXoac6o3.js';
-import { T as TabContent } from '../tabs-content-C3x4OoZ_.js';
-import { T as Tab, a as TabsContext } from '../tabs-tab-BDdO7sWN.js';
-import { a as Tabs, T as TabList } from '../tabs-root-Dh-McKbO.js';
+import { C as Combobox } from '../combobox-B_C0cNid.js';
+import { D as DataList } from '../data-list-DL_oFE4j.js';
+import { L as ListSearch } from '../list-search-9l8IEdxZ.js';
+import { T as TabContent } from '../tabs-content-h2qqD8t-.js';
+import { T as Tab, a as TabsContext } from '../tabs-tab-7e2as-AV.js';
+import { a as Tabs, T as TabList } from '../tabs-root-4vL8SHCO.js';
 import { b as TooltipProvider, T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-DsQPiynb.js';
+import { T as Txt } from '../Txt-BP1SRHmL.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 
 import '../tabbed-container.css';const TabbedContainerPanel = ({ value, children, className }) => /* @__PURE__ */ jsx(TabContent, { value, keepMounted: true, className: cn("min-h-0 flex-1", className), children });
@@ -31,7 +32,7 @@ const DataListControls = ({ dataLists }) => {
           filter ? /* @__PURE__ */ jsx(TooltipProvider, { delay: 200, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { "data-slot": "tabbed-container-filter", "data-active": filterCount > 0 || void 0, children: [
               /* @__PURE__ */ jsx(ListFilterIcon, { "aria-hidden": "true" }),
-              filterCount > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "tabbed-container-filter-count", className: "text-meta", children: filterCount }) : null,
+              filterCount > 0 ? /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", "aria-hidden": "true", "data-slot": "tabbed-container-filter-count", children: filterCount }) : null,
               filter.multiple ? /* @__PURE__ */ jsx(Combobox, { ...filter, clearLabel: "Clear", size: "md", variant: "default" }) : /* @__PURE__ */ jsx(Combobox, { ...filter, size: "md", variant: "default" })
             ] }) }),
             /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: filterCount > 0 ? `Filter, ${filterCount} selected` : "Filter" })

package/dist/layout/tabbed-container.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabbed-container.es.js","sources":["../../src/ds/layout/tabbed-container/tabbed-container-root.tsx","../../src/ds/layout/tabbed-container/index.ts"],"sourcesContent":["import { ListFilterIcon } from 'lucide-react';\nimport { Children, isValidElement, useContext } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport './tabbed-container.css';\nimport { Combobox } from '@/ds/components/Combobox/combobox';\nimport type { ComboboxProps } from '@/ds/components/Combobox/combobox';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport type { DataListFit } from '@/ds/components/DataList/data-list-root';\nimport { ListSearch } from '@/ds/components/ListSearch/list-search';\nimport type { ListSearchProps } from '@/ds/components/ListSearch/list-search';\nimport { TabContent } from '@/ds/components/Tabs/tabs-content';\nimport { TabsContext } from '@/ds/components/Tabs/tabs-context';\nimport { TabList } from '@/ds/components/Tabs/tabs-list';\nimport { Tabs } from '@/ds/components/Tabs/tabs-root';\nimport { Tab } from '@/ds/components/Tabs/tabs-tab';\nimport type { TabProps } from '@/ds/components/Tabs/tabs-tab';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ds/components/Tooltip/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport type TabbedContainerSearchProps = Pick<\n  ListSearchProps,\n  'debounceMs' | 'label' | 'onSearch' | 'placeholder' | 'value'\n>;\n\nexport type TabbedContainerFilterProps = ComboboxProps & { 'aria-label': string };\n\ntype TabbedContainerItemProps = Pick<\n  TabProps,\n  'attention' | 'disabled' | 'disabledTooltip' | 'onClick' | 'onClose' | 'value'\n> & {\n  label: ReactNode;\n  children: ReactNode;\n  className?: string;\n  tabClassName?: string;\n};\n\nexport type TabbedContainerPanelProps = TabbedContainerItemProps;\n\nexport type TabbedContainerDataListProps = TabbedContainerItemProps & {\n  columns: string;\n  search?: TabbedContainerSearchProps;\n  filter?: TabbedContainerFilterProps;\n  fit?: DataListFit;\n};\n\nexport const TabbedContainerPanel = ({ value, children, className }: TabbedContainerPanelProps) => (\n  <TabContent value={value} keepMounted className={cn('min-h-0 flex-1', className)}>\n    {children}\n  </TabContent>\n);\n\nexport const TabbedContainerDataList = ({ value, columns, fit, children, className }: TabbedContainerDataListProps) => (\n  <TabContent value={value} keepMounted className={cn('tabbed-container-data-list min-h-0 flex-1', className)}>\n    <DataList columns={columns} fit={fit} variant=\"light\" className=\"min-h-0 px-0 pb-0\">\n      {children}\n    </DataList>\n  </TabContent>\n);\n\nexport const DataListControls = ({ dataLists }: { dataLists: ReactElement<TabbedContainerDataListProps>[] }) => {\n  const tabs = useContext(TabsContext);\n  return dataLists.map(dataList => {\n    const { filter, search, value } = dataList.props;\n    if (!search && !filter) return null;\n    const active = value === tabs?.value;\n    const filterCount = filter ? (Array.isArray(filter.value) ? filter.value.length : filter.value ? 1 : 0) : 0;\n    return (\n      <div\n        key={value}\n        data-slot=\"tabbed-container-controls\"\n        data-active={active || undefined}\n        aria-hidden={!active}\n        inert={!active}\n      >\n        <div data-slot=\"tabbed-container-query\">\n          {search ? (\n            <div data-slot=\"tabbed-container-search\">\n              <ListSearch {...search} size=\"md\" shortcutDisabled={!active} />\n            </div>\n          ) : null}\n          {filter ? (\n            <TooltipProvider delay={200}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <div data-slot=\"tabbed-container-filter\" data-active={filterCount > 0 || undefined}>\n                    <ListFilterIcon aria-hidden=\"true\" />\n                    {filterCount > 0 ? (\n                      <span aria-hidden=\"true\" data-slot=\"tabbed-container-filter-count\" className=\"text-meta\">\n                        {filterCount}\n                      </span>\n                    ) : null}\n                    {filter.multiple ? (\n                      <Combobox {...filter} clearLabel=\"Clear\" size=\"md\" variant=\"default\" />\n                    ) : (\n                      <Combobox {...filter} size=\"md\" variant=\"default\" />\n                    )}\n                  </div>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {filterCount > 0 ? `Filter, ${filterCount} selected` : 'Filter'}\n                </TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ) : null}\n        </div>\n      </div>\n    );\n  });\n};\n\nexport type TabbedContainerProps<T extends string> = {\n  children: ReactNode;\n  defaultTab: T;\n  value?: T;\n  onValueChange?: (value: T) => void;\n  frame?: 'stroke' | 'inset';\n  className?: string;\n};\n\ntype TabbedContainerChildProps = TabbedContainerPanelProps | TabbedContainerDataListProps;\n\nconst isContainerChild = (child: ReactNode): child is ReactElement<TabbedContainerChildProps> =>\n  isValidElement(child) && (child.type === TabbedContainerPanel || child.type === TabbedContainerDataList);\n\nconst isDataList = (\n  child: ReactElement<TabbedContainerChildProps>,\n): child is ReactElement<TabbedContainerDataListProps> => child.type === TabbedContainerDataList;\n\nexport function TabbedContainerRoot<T extends string>({\n  children,\n  defaultTab,\n  value,\n  onValueChange,\n  frame = 'inset',\n  className,\n}: TabbedContainerProps<T>) {\n  const panels = Children.toArray(children).filter(isContainerChild);\n  const dataLists = panels.filter(isDataList);\n  return (\n    <Tabs\n      defaultTab={defaultTab}\n      value={value}\n      onValueChange={onValueChange}\n      appearance=\"contained\"\n      frame={frame}\n      className={cn('tabbed-container min-h-0 flex-1', className)}\n    >\n      <div data-slot=\"tabbed-container-rail\">\n        <div data-slot=\"tabbed-container-tabs\">\n          <TabList>\n            {panels.map(panel => (\n              <Tab\n                key={panel.props.value}\n                value={panel.props.value}\n                disabled={panel.props.disabled}\n                attention={panel.props.attention}\n                disabledTooltip={panel.props.disabledTooltip}\n                onClick={panel.props.onClick}\n                onClose={panel.props.onClose}\n                className={panel.props.tabClassName}\n              >\n                {panel.props.label}\n              </Tab>\n            ))}\n          </TabList>\n        </div>\n        <DataListControls dataLists={dataLists} />\n      </div>\n      {panels}\n    </Tabs>\n  );\n}\n","import { TabbedContainerDataList, TabbedContainerPanel, TabbedContainerRoot } from './tabbed-container-root';\n\nexport type {\n  TabbedContainerDataListProps,\n  TabbedContainerFilterProps,\n  TabbedContainerPanelProps,\n  TabbedContainerProps,\n  TabbedContainerSearchProps,\n} from './tabbed-container-root';\n\nexport const TabbedContainer = Object.assign(TabbedContainerRoot, {\n  Panel: TabbedContainerPanel,\n  DataList: TabbedContainerDataList,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AA6CO,MAAM,uBAAuB,CAAC,EAAE,KAAA,EAAO,QAAA,EAAU,WAAU,qBAChE,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAc,aAAW,IAAA,EAAC,SAAA,EAAW,GAAG,gBAAA,EAAkB,SAAS,GAC5E,QAAA,EACH,CAAA;AAGK,MAAM,uBAAA,GAA0B,CAAC,EAAE,KAAA,EAAO,OAAA,EAAS,GAAA,EAAK,QAAA,EAAU,SAAA,EAAU,qBACjF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAc,WAAA,EAAW,IAAA,EAAC,SAAA,EAAW,EAAA,CAAG,2CAAA,EAA6C,SAAS,CAAA,EACxG,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,GAAA,EAAU,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAU,mBAAA,EAC7D,QAAA,EACH,CAAA,EACF,CAAA;AAGK,MAAM,gBAAA,GAAmB,CAAC,EAAE,SAAA,EAAU,KAAmE;AAC9G,EAAA,MAAM,IAAA,GAAO,WAAW,WAAW,CAAA;AACnC,EAAA,OAAO,SAAA,CAAU,IAAI,CAAA,QAAA,KAAY;AAC/B,IAAA,MAAM,EAAE,MAAA,EAAQ,MAAA,EAAQ,KAAA,KAAU,QAAA,CAAS,KAAA;AAC3C,IAAA,IAAI,CAAC,MAAA,IAAU,CAAC,MAAA,EAAQ,OAAO,IAAA;AAC/B,IAAA,MAAM,MAAA,GAAS,UAAU,IAAA,EAAM,KAAA;AAC/B,IAAA,MAAM,WAAA,GAAc,MAAA,GAAU,KAAA,CAAM,OAAA,CAAQ,MAAA,CAAO,KAAK,CAAA,GAAI,MAAA,CAAO,KAAA,CAAM,MAAA,GAAS,MAAA,CAAO,KAAA,GAAQ,IAAI,CAAA,GAAK,CAAA;AAC1G,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEC,WAAA,EAAU,2BAAA;AAAA,QACV,eAAa,MAAA,IAAU,MAAA;AAAA,QACvB,eAAa,CAAC,MAAA;AAAA,QACd,OAAO,CAAC,MAAA;AAAA,QAER,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,wBAAA,EACZ,QAAA,EAAA;AAAA,UAAA,MAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,yBAAA,EACb,8BAAC,UAAA,EAAA,EAAY,GAAG,MAAA,EAAQ,IAAA,EAAK,IAAA,EAAK,gBAAA,EAAkB,CAAC,MAAA,EAAQ,GAC/D,CAAA,GACE,IAAA;AAAA,UACH,yBACC,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAO,GAAA,EACtB,+BAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACrB,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,aAAU,yBAAA,EAA0B,aAAA,EAAa,WAAA,GAAc,CAAA,IAAK,MAAA,EACvE,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,cAAA,EAAA,EAAe,eAAY,MAAA,EAAO,CAAA;AAAA,cAClC,WAAA,GAAc,CAAA,mBACb,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAA,EAAU,+BAAA,EAAgC,SAAA,EAAU,WAAA,EAC1E,QAAA,EAAA,WAAA,EACH,CAAA,GACE,IAAA;AAAA,cACH,MAAA,CAAO,2BACN,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,MAAA,EAAQ,UAAA,EAAW,SAAQ,IAAA,EAAK,IAAA,EAAK,SAAQ,SAAA,EAAU,CAAA,uBAEpE,QAAA,EAAA,EAAU,GAAG,QAAQ,IAAA,EAAK,IAAA,EAAK,SAAQ,SAAA,EAAU;AAAA,aAAA,EAEtD,CAAA,EACF,CAAA;AAAA,4BACA,GAAA,CAAC,kBAAe,IAAA,EAAK,QAAA,EAClB,wBAAc,CAAA,GAAI,CAAA,QAAA,EAAW,WAAW,CAAA,SAAA,CAAA,GAAc,QAAA,EACzD;AAAA,WAAA,EACF,GACF,CAAA,GACE;AAAA,SAAA,EACN;AAAA,OAAA;AAAA,MApCK;AAAA,KAqCP;AAAA,EAEJ,CAAC,CAAA;AACH,CAAA;AAaA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KACxB,cAAA,CAAe,KAAK,MAAM,KAAA,CAAM,IAAA,KAAS,oBAAA,IAAwB,KAAA,CAAM,IAAA,KAAS,uBAAA,CAAA;AAElF,MAAM,UAAA,GAAa,CACjB,KAAA,KACwD,KAAA,CAAM,IAAA,KAAS,uBAAA;AAElE,SAAS,mBAAA,CAAsC;AAAA,EACpD,QAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,SAAS,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,OAAO,gBAAgB,CAAA;AACjE,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,MAAA,CAAO,UAAU,CAAA;AAC1C,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA,EAAW,WAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,iCAAA,EAAmC,SAAS,CAAA;AAAA,MAE1D,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,aAAU,uBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAI,WAAA,EAAU,uBAAA,EACb,8BAAC,OAAA,EAAA,EACE,QAAA,EAAA,MAAA,CAAO,IAAI,CAAA,KAAA,qBACV,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cAEC,KAAA,EAAO,MAAM,KAAA,CAAM,KAAA;AAAA,cACnB,QAAA,EAAU,MAAM,KAAA,CAAM,QAAA;AAAA,cACtB,SAAA,EAAW,MAAM,KAAA,CAAM,SAAA;AAAA,cACvB,eAAA,EAAiB,MAAM,KAAA,CAAM,eAAA;AAAA,cAC7B,OAAA,EAAS,MAAM,KAAA,CAAM,OAAA;AAAA,cACrB,OAAA,EAAS,MAAM,KAAA,CAAM,OAAA;AAAA,cACrB,SAAA,EAAW,MAAM,KAAA,CAAM,YAAA;AAAA,cAEtB,gBAAM,KAAA,CAAM;AAAA,aAAA;AAAA,YATR,MAAM,KAAA,CAAM;AAAA,WAWpB,GACH,CAAA,EACF,CAAA;AAAA,0BACA,GAAA,CAAC,oBAAiB,SAAA,EAAsB;AAAA,SAAA,EAC1C,CAAA;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ;;ACjKO,MAAM,eAAA,GAAkB,MAAA,CAAO,MAAA,CAAO,mBAAA,EAAqB;AAAA,EAChE,KAAA,EAAO,oBAAA;AAAA,EACP,QAAA,EAAU;AACZ,CAAC;;;;"}
+{"version":3,"file":"tabbed-container.es.js","sources":["../../src/ds/layout/tabbed-container/tabbed-container-root.tsx","../../src/ds/layout/tabbed-container/index.ts"],"sourcesContent":["import { ListFilterIcon } from 'lucide-react';\nimport { Children, isValidElement, useContext } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport './tabbed-container.css';\nimport { Combobox } from '@/ds/components/Combobox/combobox';\nimport type { ComboboxProps } from '@/ds/components/Combobox/combobox';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport type { DataListFit } from '@/ds/components/DataList/data-list-root';\nimport { ListSearch } from '@/ds/components/ListSearch/list-search';\nimport type { ListSearchProps } from '@/ds/components/ListSearch/list-search';\nimport { TabContent } from '@/ds/components/Tabs/tabs-content';\nimport { TabsContext } from '@/ds/components/Tabs/tabs-context';\nimport { TabList } from '@/ds/components/Tabs/tabs-list';\nimport { Tabs } from '@/ds/components/Tabs/tabs-root';\nimport { Tab } from '@/ds/components/Tabs/tabs-tab';\nimport type { TabProps } from '@/ds/components/Tabs/tabs-tab';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/ds/components/Tooltip/tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type TabbedContainerSearchProps = Pick<\n  ListSearchProps,\n  'debounceMs' | 'label' | 'onSearch' | 'placeholder' | 'value'\n>;\n\nexport type TabbedContainerFilterProps = ComboboxProps & { 'aria-label': string };\n\ntype TabbedContainerItemProps = Pick<\n  TabProps,\n  'attention' | 'disabled' | 'disabledTooltip' | 'onClick' | 'onClose' | 'value'\n> & {\n  label: ReactNode;\n  children: ReactNode;\n  className?: string;\n  tabClassName?: string;\n};\n\nexport type TabbedContainerPanelProps = TabbedContainerItemProps;\n\nexport type TabbedContainerDataListProps = TabbedContainerItemProps & {\n  columns: string;\n  search?: TabbedContainerSearchProps;\n  filter?: TabbedContainerFilterProps;\n  fit?: DataListFit;\n};\n\nexport const TabbedContainerPanel = ({ value, children, className }: TabbedContainerPanelProps) => (\n  <TabContent value={value} keepMounted className={cn('min-h-0 flex-1', className)}>\n    {children}\n  </TabContent>\n);\n\nexport const TabbedContainerDataList = ({ value, columns, fit, children, className }: TabbedContainerDataListProps) => (\n  <TabContent value={value} keepMounted className={cn('tabbed-container-data-list min-h-0 flex-1', className)}>\n    <DataList columns={columns} fit={fit} variant=\"light\" className=\"min-h-0 px-0 pb-0\">\n      {children}\n    </DataList>\n  </TabContent>\n);\n\nexport const DataListControls = ({ dataLists }: { dataLists: ReactElement<TabbedContainerDataListProps>[] }) => {\n  const tabs = useContext(TabsContext);\n  return dataLists.map(dataList => {\n    const { filter, search, value } = dataList.props;\n    if (!search && !filter) return null;\n    const active = value === tabs?.value;\n    const filterCount = filter ? (Array.isArray(filter.value) ? filter.value.length : filter.value ? 1 : 0) : 0;\n    return (\n      <div\n        key={value}\n        data-slot=\"tabbed-container-controls\"\n        data-active={active || undefined}\n        aria-hidden={!active}\n        inert={!active}\n      >\n        <div data-slot=\"tabbed-container-query\">\n          {search ? (\n            <div data-slot=\"tabbed-container-search\">\n              <ListSearch {...search} size=\"md\" shortcutDisabled={!active} />\n            </div>\n          ) : null}\n          {filter ? (\n            <TooltipProvider delay={200}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <div data-slot=\"tabbed-container-filter\" data-active={filterCount > 0 || undefined}>\n                    <ListFilterIcon aria-hidden=\"true\" />\n                    {filterCount > 0 ? (\n                      <Txt as=\"span\" variant=\"meta\" aria-hidden=\"true\" data-slot=\"tabbed-container-filter-count\">\n                        {filterCount}\n                      </Txt>\n                    ) : null}\n                    {filter.multiple ? (\n                      <Combobox {...filter} clearLabel=\"Clear\" size=\"md\" variant=\"default\" />\n                    ) : (\n                      <Combobox {...filter} size=\"md\" variant=\"default\" />\n                    )}\n                  </div>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\">\n                  {filterCount > 0 ? `Filter, ${filterCount} selected` : 'Filter'}\n                </TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ) : null}\n        </div>\n      </div>\n    );\n  });\n};\n\nexport type TabbedContainerProps<T extends string> = {\n  children: ReactNode;\n  defaultTab: T;\n  value?: T;\n  onValueChange?: (value: T) => void;\n  frame?: 'stroke' | 'inset';\n  className?: string;\n};\n\ntype TabbedContainerChildProps = TabbedContainerPanelProps | TabbedContainerDataListProps;\n\nconst isContainerChild = (child: ReactNode): child is ReactElement<TabbedContainerChildProps> =>\n  isValidElement(child) && (child.type === TabbedContainerPanel || child.type === TabbedContainerDataList);\n\nconst isDataList = (\n  child: ReactElement<TabbedContainerChildProps>,\n): child is ReactElement<TabbedContainerDataListProps> => child.type === TabbedContainerDataList;\n\nexport function TabbedContainerRoot<T extends string>({\n  children,\n  defaultTab,\n  value,\n  onValueChange,\n  frame = 'inset',\n  className,\n}: TabbedContainerProps<T>) {\n  const panels = Children.toArray(children).filter(isContainerChild);\n  const dataLists = panels.filter(isDataList);\n  return (\n    <Tabs\n      defaultTab={defaultTab}\n      value={value}\n      onValueChange={onValueChange}\n      appearance=\"contained\"\n      frame={frame}\n      className={cn('tabbed-container min-h-0 flex-1', className)}\n    >\n      <div data-slot=\"tabbed-container-rail\">\n        <div data-slot=\"tabbed-container-tabs\">\n          <TabList>\n            {panels.map(panel => (\n              <Tab\n                key={panel.props.value}\n                value={panel.props.value}\n                disabled={panel.props.disabled}\n                attention={panel.props.attention}\n                disabledTooltip={panel.props.disabledTooltip}\n                onClick={panel.props.onClick}\n                onClose={panel.props.onClose}\n                className={panel.props.tabClassName}\n              >\n                {panel.props.label}\n              </Tab>\n            ))}\n          </TabList>\n        </div>\n        <DataListControls dataLists={dataLists} />\n      </div>\n      {panels}\n    </Tabs>\n  );\n}\n","import { TabbedContainerDataList, TabbedContainerPanel, TabbedContainerRoot } from './tabbed-container-root';\n\nexport type {\n  TabbedContainerDataListProps,\n  TabbedContainerFilterProps,\n  TabbedContainerPanelProps,\n  TabbedContainerProps,\n  TabbedContainerSearchProps,\n} from './tabbed-container-root';\n\nexport const TabbedContainer = Object.assign(TabbedContainerRoot, {\n  Panel: TabbedContainerPanel,\n  DataList: TabbedContainerDataList,\n});\n"],"names":[],"mappings":"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"}

package/dist/lib/form/components/array-element-wrapper.cjs.js

@@ -9,8 +9,9 @@ const reactHookForm = require('react-hook-form');
 const lib_form_fieldContext = require('../field-context.cjs.js');
 const lib_form_useSectionDisclosure = require('../use-section-disclosure.cjs.js');
 const lib_form_utils = require('../utils.cjs.js');
-const Button = require('../../../Button-CIwF6NHM.cjs');
-const collapsible = require('../../../collapsible-BFSJouuI.cjs');
+const Button = require('../../../Button-BnmR2HRc.cjs');
+const collapsible = require('../../../collapsible-jfzzU7Gp.cjs');
+const Txt = require('../../../Txt-DPmEpNbp.cjs');
 
 const HUMAN_SUMMARY_KEYS = ["title", "name", "label"];
 function firstFilledText(values) {
@@ -45,7 +46,7 @@ function ArrayElementWrapper({ children, onRemove, index }) {
             {
               ref: triggerRef,
               "aria-label": invalid ? `${itemLabel}, Needs input` : itemLabel,
-              className: "flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:shadow-none focus-visible:ring-inset",
+              className: "flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:-outline-offset-1",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-muted-foreground", children: [
@@ -53,7 +54,7 @@ function ArrayElementWrapper({ children, onRemove, index }) {
                   index + 1
                 ] }),
                 summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-foreground", title: summary, children: summary }),
-                invalid && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 text-meta text-accent2", children: "Needs input" })
+                invalid && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", className: "ml-auto shrink-0 text-destructive-indicator", children: "Needs input" })
               ]
             }
           ),

package/dist/lib/form/components/array-element-wrapper.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"array-element-wrapper.cjs.js","sources":["../../../../src/lib/form/components/array-element-wrapper.tsx"],"sourcesContent":["import type { ArrayElementWrapperProps } from '@autoform/react';\nimport { Check, ChevronRight, Trash2 } from 'lucide-react';\nimport { useContext, useRef } from 'react';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { ArrayAddButtonContext, FieldPathContext, FormReadOnlyContext } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { isPlainObject } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\n\nconst HUMAN_SUMMARY_KEYS = ['title', 'name', 'label'];\n\nfunction firstFilledText(values: unknown[]) {\n  return values.find((value): value is string => typeof value === 'string' && value.trim().length > 0);\n}\n\nfunction itemSummary(value: unknown) {\n  if (typeof value === 'string') return value.trim();\n  if (typeof value === 'number' || typeof value === 'boolean') return String(value);\n  if (!isPlainObject(value)) return undefined;\n  return firstFilledText(HUMAN_SUMMARY_KEYS.map(key => value[key])) ?? firstFilledText(Object.values(value));\n}\n\nexport function ArrayElementWrapper({ children, onRemove, index }: ArrayElementWrapperProps) {\n  const path = useContext(FieldPathContext);\n  const readOnly = useContext(FormReadOnlyContext);\n  const addButtonRef = useContext(ArrayAddButtonContext);\n  const { control } = useFormContext();\n  const value: unknown = useWatch({ control, name: path });\n  const summary = itemSummary(value);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, !summary);\n  const itemLabel = `Item ${index + 1}${summary ? `: ${summary}` : ''}`;\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"overflow-hidden rounded-lg border border-border bg-background motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1 pr-1\">\n        <CollapsibleTrigger\n          ref={triggerRef}\n          aria-label={invalid ? `${itemLabel}, Needs input` : itemLabel}\n          className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:shadow-none focus-visible:ring-inset\"\n        >\n          <ChevronRight aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n          <span className=\"shrink-0 text-muted-foreground\">Item {index + 1}</span>\n          {summary && (\n            <span className=\"truncate text-foreground\" title={summary}>\n              {summary}\n            </span>\n          )}\n          {invalid && <span className=\"ml-auto shrink-0 text-meta text-accent2\">Needs input</span>}\n        </CollapsibleTrigger>\n        {!readOnly && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-md\"\n            className=\"size-11\"\n            aria-label={`Remove item ${index + 1}`}\n            onClick={() => {\n              onRemove();\n              addButtonRef?.current?.focus();\n            }}\n          >\n            <Trash2 />\n          </Button>\n        )}\n      </div>\n      <CollapsibleContent keepMounted className=\"border-t border-border p-3\">\n        {children}\n        {!readOnly && (\n          <div className=\"flex justify-end pt-2\">\n            <Button\n              type=\"button\"\n              className=\"min-h-11\"\n              aria-label={`Done editing item ${index + 1}`}\n              onClick={() => {\n                setExpanded(false);\n                triggerRef.current?.focus();\n              }}\n              icon={<Check />}\n            >\n              Done\n            </Button>\n          </div>\n        )}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":["isPlainObject","useContext","FieldPathContext","FormReadOnlyContext","ArrayAddButtonContext","useFormContext","useWatch","useRef","useSectionDisclosure","jsxs","Collapsible","CollapsibleTrigger","jsx","ChevronRight","Button","Trash2","CollapsibleContent","Check"],"mappings":"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"}
+{"version":3,"file":"array-element-wrapper.cjs.js","sources":["../../../../src/lib/form/components/array-element-wrapper.tsx"],"sourcesContent":["import type { ArrayElementWrapperProps } from '@autoform/react';\nimport { Check, ChevronRight, Trash2 } from 'lucide-react';\nimport { useContext, useRef } from 'react';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { ArrayAddButtonContext, FieldPathContext, FormReadOnlyContext } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { isPlainObject } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\n\nconst HUMAN_SUMMARY_KEYS = ['title', 'name', 'label'];\n\nfunction firstFilledText(values: unknown[]) {\n  return values.find((value): value is string => typeof value === 'string' && value.trim().length > 0);\n}\n\nfunction itemSummary(value: unknown) {\n  if (typeof value === 'string') return value.trim();\n  if (typeof value === 'number' || typeof value === 'boolean') return String(value);\n  if (!isPlainObject(value)) return undefined;\n  return firstFilledText(HUMAN_SUMMARY_KEYS.map(key => value[key])) ?? firstFilledText(Object.values(value));\n}\n\nexport function ArrayElementWrapper({ children, onRemove, index }: ArrayElementWrapperProps) {\n  const path = useContext(FieldPathContext);\n  const readOnly = useContext(FormReadOnlyContext);\n  const addButtonRef = useContext(ArrayAddButtonContext);\n  const { control } = useFormContext();\n  const value: unknown = useWatch({ control, name: path });\n  const summary = itemSummary(value);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, !summary);\n  const itemLabel = `Item ${index + 1}${summary ? `: ${summary}` : ''}`;\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"overflow-hidden rounded-lg border border-border bg-background motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1 pr-1\">\n        <CollapsibleTrigger\n          ref={triggerRef}\n          aria-label={invalid ? `${itemLabel}, Needs input` : itemLabel}\n          className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:-outline-offset-1\"\n        >\n          <ChevronRight aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n          <span className=\"shrink-0 text-muted-foreground\">Item {index + 1}</span>\n          {summary && (\n            <span className=\"truncate text-foreground\" title={summary}>\n              {summary}\n            </span>\n          )}\n          {invalid && (\n            <Txt as=\"span\" variant=\"meta\" className=\"ml-auto shrink-0 text-destructive-indicator\">\n              Needs input\n            </Txt>\n          )}\n        </CollapsibleTrigger>\n        {!readOnly && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-md\"\n            className=\"size-11\"\n            aria-label={`Remove item ${index + 1}`}\n            onClick={() => {\n              onRemove();\n              addButtonRef?.current?.focus();\n            }}\n          >\n            <Trash2 />\n          </Button>\n        )}\n      </div>\n      <CollapsibleContent keepMounted className=\"border-t border-border p-3\">\n        {children}\n        {!readOnly && (\n          <div className=\"flex justify-end pt-2\">\n            <Button\n              type=\"button\"\n              className=\"min-h-11\"\n              aria-label={`Done editing item ${index + 1}`}\n              onClick={() => {\n                setExpanded(false);\n                triggerRef.current?.focus();\n              }}\n              icon={<Check />}\n            >\n              Done\n            </Button>\n          </div>\n        )}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":["isPlainObject","useContext","FieldPathContext","FormReadOnlyContext","ArrayAddButtonContext","useFormContext","useWatch","useRef","useSectionDisclosure","jsxs","Collapsible","CollapsibleTrigger","jsx","ChevronRight","Txt","Button","Trash2","CollapsibleContent","Check"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,kBAAA,GAAqB,CAAC,OAAA,EAAS,MAAA,EAAQ,OAAO,CAAA;AAEpD,SAAS,gBAAgB,MAAA,EAAmB;AAC1C,EAAA,OAAO,MAAA,CAAO,IAAA,CAAK,CAAC,KAAA,KAA2B,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,CAAM,IAAA,EAAK,CAAE,MAAA,GAAS,CAAC,CAAA;AACrG;AAEA,SAAS,YAAY,KAAA,EAAgB;AACnC,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA,EAAU,OAAO,MAAM,IAAA,EAAK;AACjD,EAAA,IAAI,OAAO,UAAU,QAAA,IAAY,OAAO,UAAU,SAAA,EAAW,OAAO,OAAO,KAAK,CAAA;AAChF,EAAA,IAAI,CAACA,4BAAA,CAAc,KAAK,CAAA,EAAG,OAAO,MAAA;AAClC,EAAA,OAAO,eAAA,CAAgB,kBAAA,CAAmB,GAAA,CAAI,CAAA,GAAA,KAAO,KAAA,CAAM,GAAG,CAAC,CAAC,CAAA,IAAK,eAAA,CAAgB,MAAA,CAAO,MAAA,CAAO,KAAK,CAAC,CAAA;AAC3G;AAEO,SAAS,mBAAA,CAAoB,EAAE,QAAA,EAAU,QAAA,EAAU,OAAM,EAA6B;AAC3F,EAAA,MAAM,IAAA,GAAOC,iBAAWC,sCAAgB,CAAA;AACxC,EAAA,MAAM,QAAA,GAAWD,iBAAWE,yCAAmB,CAAA;AAC/C,EAAA,MAAM,YAAA,GAAeF,iBAAWG,2CAAqB,CAAA;AACrD,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAIC,4BAAA,EAAe;AACnC,EAAA,MAAM,QAAiBC,sBAAA,CAAS,EAAE,OAAA,EAAS,IAAA,EAAM,MAAM,CAAA;AACvD,EAAA,MAAM,OAAA,GAAU,YAAY,KAAK,CAAA;AACjC,EAAA,MAAM,UAAA,GAAaC,aAA0B,IAAI,CAAA;AACjD,EAAA,MAAM,EAAE,UAAU,OAAA,EAAS,WAAA,KAAgBC,kDAAA,CAAqB,IAAA,EAAM,CAAC,OAAO,CAAA;AAC9E,EAAA,MAAM,SAAA,GAAY,QAAQ,KAAA,GAAQ,CAAC,GAAG,OAAA,GAAU,CAAA,EAAA,EAAK,OAAO,CAAA,CAAA,GAAK,EAAE,CAAA,CAAA;AAEnE,EAAA,uBACEC,eAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,QAAA;AAAA,MACN,YAAA,EAAc,WAAA;AAAA,MACd,SAAA,EAAU,uKAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,sCAAA,EACb,QAAA,EAAA;AAAA,0BAAAA,eAAA;AAAA,YAACE,8BAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,UAAA;AAAA,cACL,YAAA,EAAY,OAAA,GAAU,CAAA,EAAG,SAAS,CAAA,aAAA,CAAA,GAAkB,SAAA;AAAA,cACpD,SAAA,EAAU,wHAAA;AAAA,cAEV,QAAA,EAAA;AAAA,gCAAAC,cAAA,CAACC,wBAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,yCAAA,EAA0C,CAAA;AAAA,gCAC9EJ,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gCAAA,EAAiC,QAAA,EAAA;AAAA,kBAAA,OAAA;AAAA,kBAAM,KAAA,GAAQ;AAAA,iBAAA,EAAE,CAAA;AAAA,gBAChE,2BACCG,cAAA,CAAC,MAAA,EAAA,EAAK,WAAU,0BAAA,EAA2B,KAAA,EAAO,SAC/C,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,gBAED,OAAA,mCACEE,OAAA,EAAA,EAAI,EAAA,EAAG,QAAO,OAAA,EAAQ,MAAA,EAAO,SAAA,EAAU,6CAAA,EAA8C,QAAA,EAAA,aAAA,EAEtF;AAAA;AAAA;AAAA,WAEJ;AAAA,UACC,CAAC,QAAA,oBACAF,cAAA;AAAA,YAACG,aAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAQ,OAAA;AAAA,cACR,IAAA,EAAK,SAAA;AAAA,cACL,SAAA,EAAU,SAAA;AAAA,cACV,YAAA,EAAY,CAAA,YAAA,EAAe,KAAA,GAAQ,CAAC,CAAA,CAAA;AAAA,cACpC,SAAS,MAAM;AACb,gBAAA,QAAA,EAAS;AACT,gBAAA,YAAA,EAAc,SAAS,KAAA,EAAM;AAAA,cAC/B,CAAA;AAAA,cAEA,yCAACC,kBAAA,EAAA,EAAO;AAAA;AAAA;AACV,SAAA,EAEJ,CAAA;AAAA,wBACAP,eAAA,CAACQ,8BAAA,EAAA,EAAmB,WAAA,EAAW,IAAA,EAAC,WAAU,4BAAA,EACvC,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,CAAC,QAAA,oBACAL,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,uBAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,YAACG,aAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,SAAA,EAAU,UAAA;AAAA,cACV,YAAA,EAAY,CAAA,kBAAA,EAAqB,KAAA,GAAQ,CAAC,CAAA,CAAA;AAAA,cAC1C,SAAS,MAAM;AACb,gBAAA,WAAA,CAAY,KAAK,CAAA;AACjB,gBAAA,UAAA,CAAW,SAAS,KAAA,EAAM;AAAA,cAC5B,CAAA;AAAA,cACA,IAAA,iCAAOG,iBAAA,EAAA,EAAM,CAAA;AAAA,cACd,QAAA,EAAA;AAAA;AAAA,WAED,EACF;AAAA,SAAA,EAEJ;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/lib/form/components/array-element-wrapper.es.js

@@ -5,8 +5,9 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { FieldPathContext, FormReadOnlyContext, ArrayAddButtonContext } from '../field-context.es.js';
 import { useSectionDisclosure } from '../use-section-disclosure.es.js';
 import { isPlainObject } from '../utils.es.js';
-import { B as Button } from '../../../Button-BY9qlu8K.js';
-import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../../../collapsible-DhhP5p1j.js';
+import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../../../collapsible-BNUn4644.js';
+import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 
 const HUMAN_SUMMARY_KEYS = ["title", "name", "label"];
 function firstFilledText(values) {
@@ -41,7 +42,7 @@ function ArrayElementWrapper({ children, onRemove, index }) {
             {
               ref: triggerRef,
               "aria-label": invalid ? `${itemLabel}, Needs input` : itemLabel,
-              className: "flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:shadow-none focus-visible:ring-inset",
+              className: "flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:-outline-offset-1",
               children: [
                 /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" }),
                 /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-muted-foreground", children: [
@@ -49,7 +50,7 @@ function ArrayElementWrapper({ children, onRemove, index }) {
                   index + 1
                 ] }),
                 summary && /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", title: summary, children: summary }),
-                invalid && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-meta text-accent2", children: "Needs input" })
+                invalid && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", className: "ml-auto shrink-0 text-destructive-indicator", children: "Needs input" })
               ]
             }
           ),

package/dist/lib/form/components/array-element-wrapper.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"array-element-wrapper.es.js","sources":["../../../../src/lib/form/components/array-element-wrapper.tsx"],"sourcesContent":["import type { ArrayElementWrapperProps } from '@autoform/react';\nimport { Check, ChevronRight, Trash2 } from 'lucide-react';\nimport { useContext, useRef } from 'react';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { ArrayAddButtonContext, FieldPathContext, FormReadOnlyContext } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { isPlainObject } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\n\nconst HUMAN_SUMMARY_KEYS = ['title', 'name', 'label'];\n\nfunction firstFilledText(values: unknown[]) {\n  return values.find((value): value is string => typeof value === 'string' && value.trim().length > 0);\n}\n\nfunction itemSummary(value: unknown) {\n  if (typeof value === 'string') return value.trim();\n  if (typeof value === 'number' || typeof value === 'boolean') return String(value);\n  if (!isPlainObject(value)) return undefined;\n  return firstFilledText(HUMAN_SUMMARY_KEYS.map(key => value[key])) ?? firstFilledText(Object.values(value));\n}\n\nexport function ArrayElementWrapper({ children, onRemove, index }: ArrayElementWrapperProps) {\n  const path = useContext(FieldPathContext);\n  const readOnly = useContext(FormReadOnlyContext);\n  const addButtonRef = useContext(ArrayAddButtonContext);\n  const { control } = useFormContext();\n  const value: unknown = useWatch({ control, name: path });\n  const summary = itemSummary(value);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, !summary);\n  const itemLabel = `Item ${index + 1}${summary ? `: ${summary}` : ''}`;\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"overflow-hidden rounded-lg border border-border bg-background motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1 pr-1\">\n        <CollapsibleTrigger\n          ref={triggerRef}\n          aria-label={invalid ? `${itemLabel}, Needs input` : itemLabel}\n          className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:shadow-none focus-visible:ring-inset\"\n        >\n          <ChevronRight aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n          <span className=\"shrink-0 text-muted-foreground\">Item {index + 1}</span>\n          {summary && (\n            <span className=\"truncate text-foreground\" title={summary}>\n              {summary}\n            </span>\n          )}\n          {invalid && <span className=\"ml-auto shrink-0 text-meta text-accent2\">Needs input</span>}\n        </CollapsibleTrigger>\n        {!readOnly && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-md\"\n            className=\"size-11\"\n            aria-label={`Remove item ${index + 1}`}\n            onClick={() => {\n              onRemove();\n              addButtonRef?.current?.focus();\n            }}\n          >\n            <Trash2 />\n          </Button>\n        )}\n      </div>\n      <CollapsibleContent keepMounted className=\"border-t border-border p-3\">\n        {children}\n        {!readOnly && (\n          <div className=\"flex justify-end pt-2\">\n            <Button\n              type=\"button\"\n              className=\"min-h-11\"\n              aria-label={`Done editing item ${index + 1}`}\n              onClick={() => {\n                setExpanded(false);\n                triggerRef.current?.focus();\n              }}\n              icon={<Check />}\n            >\n              Done\n            </Button>\n          </div>\n        )}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"array-element-wrapper.es.js","sources":["../../../../src/lib/form/components/array-element-wrapper.tsx"],"sourcesContent":["import type { ArrayElementWrapperProps } from '@autoform/react';\nimport { Check, ChevronRight, Trash2 } from 'lucide-react';\nimport { useContext, useRef } from 'react';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { ArrayAddButtonContext, FieldPathContext, FormReadOnlyContext } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { isPlainObject } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\n\nconst HUMAN_SUMMARY_KEYS = ['title', 'name', 'label'];\n\nfunction firstFilledText(values: unknown[]) {\n  return values.find((value): value is string => typeof value === 'string' && value.trim().length > 0);\n}\n\nfunction itemSummary(value: unknown) {\n  if (typeof value === 'string') return value.trim();\n  if (typeof value === 'number' || typeof value === 'boolean') return String(value);\n  if (!isPlainObject(value)) return undefined;\n  return firstFilledText(HUMAN_SUMMARY_KEYS.map(key => value[key])) ?? firstFilledText(Object.values(value));\n}\n\nexport function ArrayElementWrapper({ children, onRemove, index }: ArrayElementWrapperProps) {\n  const path = useContext(FieldPathContext);\n  const readOnly = useContext(FormReadOnlyContext);\n  const addButtonRef = useContext(ArrayAddButtonContext);\n  const { control } = useFormContext();\n  const value: unknown = useWatch({ control, name: path });\n  const summary = itemSummary(value);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, !summary);\n  const itemLabel = `Item ${index + 1}${summary ? `: ${summary}` : ''}`;\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"overflow-hidden rounded-lg border border-border bg-background motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1 pr-1\">\n        <CollapsibleTrigger\n          ref={triggerRef}\n          aria-label={invalid ? `${itemLabel}, Needs input` : itemLabel}\n          className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:-outline-offset-1\"\n        >\n          <ChevronRight aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n          <span className=\"shrink-0 text-muted-foreground\">Item {index + 1}</span>\n          {summary && (\n            <span className=\"truncate text-foreground\" title={summary}>\n              {summary}\n            </span>\n          )}\n          {invalid && (\n            <Txt as=\"span\" variant=\"meta\" className=\"ml-auto shrink-0 text-destructive-indicator\">\n              Needs input\n            </Txt>\n          )}\n        </CollapsibleTrigger>\n        {!readOnly && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-md\"\n            className=\"size-11\"\n            aria-label={`Remove item ${index + 1}`}\n            onClick={() => {\n              onRemove();\n              addButtonRef?.current?.focus();\n            }}\n          >\n            <Trash2 />\n          </Button>\n        )}\n      </div>\n      <CollapsibleContent keepMounted className=\"border-t border-border p-3\">\n        {children}\n        {!readOnly && (\n          <div className=\"flex justify-end pt-2\">\n            <Button\n              type=\"button\"\n              className=\"min-h-11\"\n              aria-label={`Done editing item ${index + 1}`}\n              onClick={() => {\n                setExpanded(false);\n                triggerRef.current?.focus();\n              }}\n              icon={<Check />}\n            >\n              Done\n            </Button>\n          </div>\n        )}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/lib/form/components/array-wrapper.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const lib_form_fieldContext = require('../field-context.cjs.js');
-const Button = require('../../../Button-CIwF6NHM.cjs');
+const Button = require('../../../Button-BnmR2HRc.cjs');
 const Txt = require('../../../Txt-DPmEpNbp.cjs');
 
 function ArrayWrapper({ label, children, onAddItem }) {

package/dist/lib/form/components/array-wrapper.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Brackets, Plus } from 'lucide-react';
 import { useContext, Children, useRef } from 'react';
 import { FormReadOnlyContext, ArrayAddButtonContext } from '../field-context.es.js';
-import { B as Button } from '../../../Button-BY9qlu8K.js';
+import { B as Button } from '../../../Button-C6eUqcPI.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 
 function ArrayWrapper({ label, children, onAddItem }) {

package/dist/lib/form/components/boolean-field.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const checkbox = require('../../../checkbox-CI8JtZKS.cjs');
-const fieldBlock = require('../../../field-block-BG5E7u9v.cjs');
+const fieldBlock = require('../../../field-block-BIDi9Bvc.cjs');
 
 const BooleanField = ({ field, label, id, inputProps }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
   /* @__PURE__ */ jsxRuntime.jsx(

package/dist/lib/form/components/boolean-field.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { C as Checkbox } from '../../../checkbox-CQedzgsi.js';
-import { F as FieldBlock } from '../../../field-block-BRLwud-v.js';
+import { F as FieldBlock } from '../../../field-block-DpejZ6U6.js';
 
 const BooleanField = ({ field, label, id, inputProps }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
   /* @__PURE__ */ jsx(

package/dist/lib/form/components/date-field.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const dateFns = require('date-fns');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const Button = require('../../../Button-CIwF6NHM.cjs');
+const Button = require('../../../Button-BnmR2HRc.cjs');
 const datePicker = require('../../../date-picker-dRZF8frf.cjs');
 const popover = require('../../../popover-lBqKiPtp.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
@@ -46,9 +46,9 @@ const DateField = ({ inputProps, field, error, id }) => {
         id,
         variant: "default",
         size: "lg",
-        className: utils_cn.cn("w-full", error ? "border-accent2" : ""),
+        className: utils_cn.cn("w-full", error ? "border-destructive-indicator" : ""),
         icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
-        children: value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white", children: dateFns.format(value, "PPP") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray", children: "Pick a date" })
+        children: value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: dateFns.format(value, "PPP") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Pick a date" })
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs(popover.PopoverContent, { className: "w-auto bg-muted p-0", align: "start", children: [

package/dist/lib/form/components/date-field.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-field.cjs.js","sources":["../../../../src/lib/form/components/date-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport { format, isValid } from 'date-fns';\nimport { CalendarIcon, X } from 'lucide-react';\nimport React, { useState, useEffect } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { DatePicker } from '@/ds/components/DateTimePicker';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { cn } from '@/utils/cn';\n\nexport const DateField: React.FC<AutoFormFieldProps> = ({ inputProps, field, error, id }) => {\n  const { key, ...props } = inputProps;\n  const [value, setValue] = useState<Date | undefined>(undefined);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (field.default) {\n      const date = new Date(field.default);\n      if (isValid(date)) {\n        setValue(date);\n      }\n    }\n  }, [field]);\n\n  const handleSelect = (date: Date | undefined) => {\n    setValue(date);\n    if (date) {\n      props.onChange({\n        target: { value: date.toISOString(), name: inputProps.name },\n      });\n    }\n    setOpen(false);\n  };\n\n  const handleClear = () => {\n    setValue(undefined);\n    props.onChange({\n      target: { value: '', name: inputProps.name },\n    });\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          id={id}\n          variant=\"default\"\n          size=\"lg\"\n          className={cn('w-full', error ? 'border-accent2' : '')}\n          icon={<CalendarIcon />}\n        >\n          {value ? (\n            <span className=\"text-white\">{format(value, 'PPP')}</span>\n          ) : (\n            <span className=\"text-gray\">Pick a date</span>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto bg-muted p-0\" align=\"start\">\n        <DatePicker mode=\"single\" selected={value} onSelect={handleSelect} month={value} onMonthChange={setValue} />\n        {value && (\n          <div className=\"p-3 pt-0\">\n            <Button icon={<X />} variant=\"default\" size=\"lg\" className=\"w-full\" onClick={handleClear}>\n              Clear\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"names":["useState","useEffect","isValid","jsxs","Popover","jsx","PopoverTrigger","Button","cn","CalendarIcon","format","PopoverContent","DatePicker","X"],"mappings":"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"}
+{"version":3,"file":"date-field.cjs.js","sources":["../../../../src/lib/form/components/date-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport { format, isValid } from 'date-fns';\nimport { CalendarIcon, X } from 'lucide-react';\nimport React, { useState, useEffect } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { DatePicker } from '@/ds/components/DateTimePicker';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { cn } from '@/utils/cn';\n\nexport const DateField: React.FC<AutoFormFieldProps> = ({ inputProps, field, error, id }) => {\n  const { key, ...props } = inputProps;\n  const [value, setValue] = useState<Date | undefined>(undefined);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (field.default) {\n      const date = new Date(field.default);\n      if (isValid(date)) {\n        setValue(date);\n      }\n    }\n  }, [field]);\n\n  const handleSelect = (date: Date | undefined) => {\n    setValue(date);\n    if (date) {\n      props.onChange({\n        target: { value: date.toISOString(), name: inputProps.name },\n      });\n    }\n    setOpen(false);\n  };\n\n  const handleClear = () => {\n    setValue(undefined);\n    props.onChange({\n      target: { value: '', name: inputProps.name },\n    });\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          id={id}\n          variant=\"default\"\n          size=\"lg\"\n          className={cn('w-full', error ? 'border-destructive-indicator' : '')}\n          icon={<CalendarIcon />}\n        >\n          {value ? (\n            <span className=\"text-foreground\">{format(value, 'PPP')}</span>\n          ) : (\n            <span className=\"text-muted-foreground\">Pick a date</span>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto bg-muted p-0\" align=\"start\">\n        <DatePicker mode=\"single\" selected={value} onSelect={handleSelect} month={value} onMonthChange={setValue} />\n        {value && (\n          <div className=\"p-3 pt-0\">\n            <Button icon={<X />} variant=\"default\" size=\"lg\" className=\"w-full\" onClick={handleClear}>\n              Clear\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"names":["useState","useEffect","isValid","jsxs","Popover","jsx","PopoverTrigger","Button","cn","CalendarIcon","format","PopoverContent","DatePicker","X"],"mappings":"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"}

package/dist/lib/form/components/date-field.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { isValid, format } from 'date-fns';
 import { CalendarIcon, X } from 'lucide-react';
 import { useState, useEffect } from 'react';
-import { B as Button } from '../../../Button-BY9qlu8K.js';
+import { B as Button } from '../../../Button-C6eUqcPI.js';
 import { D as DatePicker } from '../../../date-picker-DgWTsiJ7.js';
 import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../../../popover-Dg70UGyn.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
@@ -42,9 +42,9 @@ const DateField = ({ inputProps, field, error, id }) => {
         id,
         variant: "default",
         size: "lg",
-        className: cn("w-full", error ? "border-accent2" : ""),
+        className: cn("w-full", error ? "border-destructive-indicator" : ""),
         icon: /* @__PURE__ */ jsx(CalendarIcon, {}),
-        children: value ? /* @__PURE__ */ jsx("span", { className: "text-white", children: format(value, "PPP") }) : /* @__PURE__ */ jsx("span", { className: "text-gray", children: "Pick a date" })
+        children: value ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: format(value, "PPP") }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Pick a date" })
       }
     ) }),
     /* @__PURE__ */ jsxs(PopoverContent, { className: "w-auto bg-muted p-0", align: "start", children: [

package/dist/lib/form/components/date-field.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-field.es.js","sources":["../../../../src/lib/form/components/date-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport { format, isValid } from 'date-fns';\nimport { CalendarIcon, X } from 'lucide-react';\nimport React, { useState, useEffect } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { DatePicker } from '@/ds/components/DateTimePicker';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { cn } from '@/utils/cn';\n\nexport const DateField: React.FC<AutoFormFieldProps> = ({ inputProps, field, error, id }) => {\n  const { key, ...props } = inputProps;\n  const [value, setValue] = useState<Date | undefined>(undefined);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (field.default) {\n      const date = new Date(field.default);\n      if (isValid(date)) {\n        setValue(date);\n      }\n    }\n  }, [field]);\n\n  const handleSelect = (date: Date | undefined) => {\n    setValue(date);\n    if (date) {\n      props.onChange({\n        target: { value: date.toISOString(), name: inputProps.name },\n      });\n    }\n    setOpen(false);\n  };\n\n  const handleClear = () => {\n    setValue(undefined);\n    props.onChange({\n      target: { value: '', name: inputProps.name },\n    });\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          id={id}\n          variant=\"default\"\n          size=\"lg\"\n          className={cn('w-full', error ? 'border-accent2' : '')}\n          icon={<CalendarIcon />}\n        >\n          {value ? (\n            <span className=\"text-white\">{format(value, 'PPP')}</span>\n          ) : (\n            <span className=\"text-gray\">Pick a date</span>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto bg-muted p-0\" align=\"start\">\n        <DatePicker mode=\"single\" selected={value} onSelect={handleSelect} month={value} onMonthChange={setValue} />\n        {value && (\n          <div className=\"p-3 pt-0\">\n            <Button icon={<X />} variant=\"default\" size=\"lg\" className=\"w-full\" onClick={handleClear}>\n              Clear\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"date-field.es.js","sources":["../../../../src/lib/form/components/date-field.tsx"],"sourcesContent":["import type { AutoFormFieldProps } from '@autoform/react';\nimport { format, isValid } from 'date-fns';\nimport { CalendarIcon, X } from 'lucide-react';\nimport React, { useState, useEffect } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { DatePicker } from '@/ds/components/DateTimePicker';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { cn } from '@/utils/cn';\n\nexport const DateField: React.FC<AutoFormFieldProps> = ({ inputProps, field, error, id }) => {\n  const { key, ...props } = inputProps;\n  const [value, setValue] = useState<Date | undefined>(undefined);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (field.default) {\n      const date = new Date(field.default);\n      if (isValid(date)) {\n        setValue(date);\n      }\n    }\n  }, [field]);\n\n  const handleSelect = (date: Date | undefined) => {\n    setValue(date);\n    if (date) {\n      props.onChange({\n        target: { value: date.toISOString(), name: inputProps.name },\n      });\n    }\n    setOpen(false);\n  };\n\n  const handleClear = () => {\n    setValue(undefined);\n    props.onChange({\n      target: { value: '', name: inputProps.name },\n    });\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          id={id}\n          variant=\"default\"\n          size=\"lg\"\n          className={cn('w-full', error ? 'border-destructive-indicator' : '')}\n          icon={<CalendarIcon />}\n        >\n          {value ? (\n            <span className=\"text-foreground\">{format(value, 'PPP')}</span>\n          ) : (\n            <span className=\"text-muted-foreground\">Pick a date</span>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto bg-muted p-0\" align=\"start\">\n        <DatePicker mode=\"single\" selected={value} onSelect={handleSelect} month={value} onMonthChange={setValue} />\n        {value && (\n          <div className=\"p-3 pt-0\">\n            <Button icon={<X />} variant=\"default\" size=\"lg\" className=\"w-full\" onClick={handleClear}>\n              Clear\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/lib/form/components/error-message.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Notice = require('../../../Notice-BiV6N8--.cjs');
+const Notice = require('../../../Notice-CEBwitdf.cjs');
 
 const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxRuntime.jsx(Notice.Notice, { variant: "destructive", title: error });
 

package/dist/lib/form/components/error-message.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { N as Notice } from '../../../Notice-BmoN4qOw.js';
+import { N as Notice } from '../../../Notice-Ce3r5x-7.js';
 
 const ErrorMessage = ({ error }) => /* @__PURE__ */ jsx(Notice, { variant: "destructive", title: error });
 

package/dist/lib/form/components/field-wrapper.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const fieldBlock = require('../../../field-block-BG5E7u9v.cjs');
+const fieldBlock = require('../../../field-block-BIDi9Bvc.cjs');
 const Txt = require('../../../Txt-DPmEpNbp.cjs');
 
 const DISABLED_LABELS = ["boolean", "object", "array"];

package/dist/lib/form/components/field-wrapper.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { F as FieldBlock } from '../../../field-block-BRLwud-v.js';
+import { F as FieldBlock } from '../../../field-block-DpejZ6U6.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 
 const DISABLED_LABELS = ["boolean", "object", "array"];

package/dist/lib/form/components/form-submit-row.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
-const Button = require('../../../Button-CIwF6NHM.cjs');
+const Button = require('../../../Button-BnmR2HRc.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 

package/dist/lib/form/components/form-submit-row.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Loader2 } from 'lucide-react';
-import { B as Button } from '../../../Button-BY9qlu8K.js';
+import { B as Button } from '../../../Button-C6eUqcPI.js';
 import { Icon } from '../../../icons/Icon.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 

package/dist/lib/form/components/number-field.cjs.js

@@ -12,7 +12,7 @@ const NumberField = ({ inputProps, error, field, id }) => {
     {
       id,
       type: "number",
-      className: error ? "border-accent2" : "",
+      className: error ? "border-destructive-indicator" : "",
       ...props,
       defaultValue: field.default !== void 0 ? Number(field.default) : void 0,
       onChange: (e) => {