@d4gger/design-system 2.7.0 → 3.0.0

package/dist/components/searchBar/SearchBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/searchBar/SearchBar.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { cn } from '../../_internal/cn'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport type { CommandProps } from '../command/Command'\nimport { Dialog, DialogContent, DialogTitle, type DialogSize } from '../dialog/Dialog'\nimport { Kbd } from '../kbd/Kbd'\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\nimport { searchBarMenuPropDefs, searchBarRootPropDefs, searchBarTriggerPropDefs } from './searchBar.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst Command = React.lazy(() => import('../command/Command').then((mod) => ({ default: mod.Command })))\n\ntype SearchBarRootElement = React.ComponentRef<'div'>\ntype SearchBarTriggerElement = React.ComponentRef<typeof Button>\ntype SearchBarMenuElement = React.ComponentRef<'div'>\ntype SearchBarRootOwnProps = GetPropDefTypes<typeof searchBarRootPropDefs> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}\ntype SearchBarTriggerOwnProps = GetPropDefTypes<typeof searchBarTriggerPropDefs> & {\n  shortcutLabel?: React.ReactNode\n}\ntype SearchBarMenuOwnProps = GetPropDefTypes<typeof searchBarMenuPropDefs> & {\n  contentClassName?: string\n  size?: DialogSize\n}\n\ntype SearchBarContextValue = {\n  open: boolean\n  setOpen: (open: boolean) => void\n  toggleOpen: () => void\n}\n\nconst SearchBarContext = React.createContext<SearchBarContextValue | null>(null)\n\nfunction useSearchBarContext() {\n  const context = React.useContext(SearchBarContext)\n\n  if (!context) {\n    throw new Error('SearchBar components must be used within SearchBar.Root')\n  }\n\n  return context\n}\n\nconst SEARCH_BAR_VARIANT_TO_BUTTON_VARIANT = {\n  default: 'outline',\n  ghost: 'ghost',\n} as const\n\ntype SearchBarStyleContextValue = {\n  size: 'sm' | 'md' | 'lg'\n  variant: 'default' | 'ghost'\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full'\n}\n\nconst SearchBarStyleContext = React.createContext<SearchBarStyleContextValue>({\n  size: 'md',\n  variant: 'default',\n  radius: undefined,\n})\n\nfunction useControllableSearchBarOpenState({\n  defaultOpen = false,\n  open: openProp,\n  onOpenChange,\n}: Pick<SearchBarRootOwnProps, 'defaultOpen' | 'open' | 'onOpenChange'>) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const open = openProp ?? uncontrolledOpen\n\n  const setOpen = React.useCallback(\n    (nextOpen: boolean) => {\n      if (openProp === undefined) {\n        setUncontrolledOpen(nextOpen)\n      }\n\n      onOpenChange?.(nextOpen)\n    },\n    [onOpenChange, openProp],\n  )\n\n  return [open, setOpen] as const\n}\n\ninterface SearchBarRootProps extends React.ComponentPropsWithoutRef<'div'>, SearchBarRootOwnProps {}\n\ninterface SearchBarTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Button>, 'children'>,\n    SearchBarTriggerOwnProps {\n  children?: React.ReactNode\n}\n\ninterface SearchBarMenuProps extends CommandProps, SearchBarMenuOwnProps {}\n\nconst SearchBarRoot = React.forwardRef<SearchBarRootElement, SearchBarRootProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    compact = false,\n    defaultOpen = false,\n    onOpenChange,\n    open: openProp,\n    openOnShortcut = true,\n    radius,\n    size = 'md',\n    variant = 'default',\n    ...rootProps\n  } = extractProps(props, searchBarRootPropDefs)\n  const [open, setOpen] = useControllableSearchBarOpenState({\n    defaultOpen,\n    open: openProp,\n    onOpenChange,\n  })\n  const toggleOpen = React.useCallback(() => setOpen(!open), [open, setOpen])\n  const contextValue = React.useMemo(\n    () => ({ open, setOpen, toggleOpen }),\n    [open, setOpen, toggleOpen],\n  )\n  const Comp = asChild ? Slot : 'div'\n\n  React.useEffect(() => {\n    if (!openOnShortcut || typeof window === 'undefined') {\n      return undefined\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {\n        event.preventDefault()\n        toggleOpen()\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [openOnShortcut, toggleOpen])\n\n  const styleContextValue = React.useMemo(\n    () => ({ size, variant, radius }),\n    [size, variant, radius],\n  )\n\n  return (\n    <SearchBarContext.Provider value={contextValue}>\n      <SearchBarStyleContext.Provider value={styleContextValue}>\n        <Comp\n          {...rootProps}\n          ref={forwardedRef}\n          className={cn('dsx-search-bar', compact && 'dsx-search-bar--compact', className)}\n          data-radius={radius}\n          data-size={size}\n          data-variant={variant}\n        />\n      </SearchBarStyleContext.Provider>\n    </SearchBarContext.Provider>\n  )\n})\nSearchBarRoot.displayName = 'SearchBar'\n\nconst SearchBarTrigger = React.forwardRef<SearchBarTriggerElement, SearchBarTriggerProps>(\n  (props, forwardedRef) => {\n    const { onClick, ...propsWithoutOnClick } = props\n    const styleContext = React.useContext(SearchBarStyleContext)\n    const {\n      asChild,\n      children,\n      className,\n      shortcutLabel = '\u2318K',\n      showShortcut = true,\n      variant = SEARCH_BAR_VARIANT_TO_BUTTON_VARIANT[styleContext.variant],\n      size = styleContext.size,\n      radius = styleContext.radius,\n      ...triggerProps\n    } = extractProps(propsWithoutOnClick, searchBarTriggerPropDefs)\n    const { setOpen } = useSearchBarContext()\n\n    return (\n      <Button\n        {...triggerProps}\n        ref={forwardedRef}\n        asChild={asChild}\n        className={cn('dsx-search-bar__trigger', className)}\n        leadingIcon={<Icon name=\"search\" size=\"sm\" />}\n        onClick={(event) => {\n          onClick?.(event)\n\n          if (!event.defaultPrevented) {\n            setOpen(true)\n          }\n        }}\n        type=\"button\"\n        variant={variant}\n        size={size}\n        radius={radius}\n      >\n        <span className=\"dsx-search-bar__trigger-content\">\n          <span className=\"dsx-search-bar__trigger-label\">{children ?? 'Search...'}</span>\n          {showShortcut ? (\n            <Kbd size=\"sm\" className=\"dsx-search-bar__shortcut\">\n              {shortcutLabel}\n            </Kbd>\n          ) : null}\n        </span>\n      </Button>\n    )\n  },\n)\nSearchBarTrigger.displayName = 'SearchBarTrigger'\n\nconst SearchBarMenu = React.forwardRef<SearchBarMenuElement, SearchBarMenuProps>((props, forwardedRef) => {\n  const {\n    children,\n    className,\n    contentClassName,\n    showClose = false,\n    size = 'md',\n    title = 'Search',\n    ...commandProps\n  } = extractProps(props, searchBarMenuPropDefs)\n  const { open, setOpen } = useSearchBarContext()\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogContent className={cn('dsx-search-bar__menu', contentClassName)} showClose={showClose} size={size}>\n        <VisuallyHidden asChild>\n          <DialogTitle>{title}</DialogTitle>\n        </VisuallyHidden>\n        <React.Suspense fallback={null}>\n          <Command {...commandProps} ref={forwardedRef} className={cn('dsx-search-bar__command', className)}>\n            {children}\n          </Command>\n        </React.Suspense>\n      </DialogContent>\n    </Dialog>\n  )\n})\nSearchBarMenu.displayName = 'SearchBarMenu'\n\nconst SearchBar: typeof SearchBarRoot & {\n  Trigger: typeof SearchBarTrigger\n  Menu: typeof SearchBarMenu\n} = Object.assign(SearchBarRoot, {\n  Trigger: SearchBarTrigger,\n  Menu: SearchBarMenu,\n})\n\nexport { SearchBar, SearchBarMenu, SearchBarRoot, SearchBarTrigger }\nexport type { SearchBarMenuProps, SearchBarRootProps, SearchBarTriggerProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { cn } from '../../_internal/cn'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport type { CommandProps } from '../command/Command'\nimport { Dialog, DialogContent, DialogDescription, DialogTitle, type DialogSize } from '../dialog/Dialog'\nimport { Kbd } from '../kbd/Kbd'\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\nimport { searchBarMenuPropDefs, searchBarRootPropDefs, searchBarTriggerPropDefs } from './searchBar.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst Command = React.lazy(() => import('../command/Command').then((mod) => ({ default: mod.Command })))\n\ntype SearchBarRootElement = React.ComponentRef<'div'>\ntype SearchBarTriggerElement = React.ComponentRef<typeof Button>\ntype SearchBarMenuElement = React.ComponentRef<'div'>\ntype SearchBarRootOwnProps = GetPropDefTypes<typeof searchBarRootPropDefs> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}\ntype SearchBarTriggerOwnProps = GetPropDefTypes<typeof searchBarTriggerPropDefs> & {\n  shortcutLabel?: React.ReactNode\n}\ntype SearchBarMenuOwnProps = GetPropDefTypes<typeof searchBarMenuPropDefs> & {\n  contentClassName?: string\n  size?: DialogSize\n}\n\ntype SearchBarContextValue = {\n  open: boolean\n  setOpen: (open: boolean) => void\n  toggleOpen: () => void\n}\n\nconst SearchBarContext = React.createContext<SearchBarContextValue | null>(null)\n\nfunction useSearchBarContext() {\n  const context = React.useContext(SearchBarContext)\n\n  if (!context) {\n    throw new Error('SearchBar components must be used within SearchBar.Root')\n  }\n\n  return context\n}\n\nconst SEARCH_BAR_VARIANT_TO_BUTTON_VARIANT = {\n  default: 'outline',\n  ghost: 'ghost',\n} as const\n\ntype SearchBarStyleContextValue = {\n  size: 'sm' | 'md' | 'lg'\n  variant: 'default' | 'ghost'\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full'\n}\n\nconst SearchBarStyleContext = React.createContext<SearchBarStyleContextValue>({\n  size: 'md',\n  variant: 'default',\n  radius: undefined,\n})\n\nfunction useControllableSearchBarOpenState({\n  defaultOpen = false,\n  open: openProp,\n  onOpenChange,\n}: Pick<SearchBarRootOwnProps, 'defaultOpen' | 'open' | 'onOpenChange'>) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const open = openProp ?? uncontrolledOpen\n\n  const setOpen = React.useCallback(\n    (nextOpen: boolean) => {\n      if (openProp === undefined) {\n        setUncontrolledOpen(nextOpen)\n      }\n\n      onOpenChange?.(nextOpen)\n    },\n    [onOpenChange, openProp],\n  )\n\n  return [open, setOpen] as const\n}\n\ninterface SearchBarRootProps extends React.ComponentPropsWithoutRef<'div'>, SearchBarRootOwnProps {}\n\ninterface SearchBarTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Button>, 'children'>,\n    SearchBarTriggerOwnProps {\n  children?: React.ReactNode\n}\n\ninterface SearchBarMenuProps extends CommandProps, SearchBarMenuOwnProps {}\n\nconst SearchBarRoot = React.forwardRef<SearchBarRootElement, SearchBarRootProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    compact = false,\n    defaultOpen = false,\n    onOpenChange,\n    open: openProp,\n    openOnShortcut = true,\n    radius,\n    size = 'md',\n    variant = 'default',\n    ...rootProps\n  } = extractProps(props, searchBarRootPropDefs)\n  const [open, setOpen] = useControllableSearchBarOpenState({\n    defaultOpen,\n    open: openProp,\n    onOpenChange,\n  })\n  const toggleOpen = React.useCallback(() => setOpen(!open), [open, setOpen])\n  const contextValue = React.useMemo(\n    () => ({ open, setOpen, toggleOpen }),\n    [open, setOpen, toggleOpen],\n  )\n  const Comp = asChild ? Slot : 'div'\n\n  React.useEffect(() => {\n    if (!openOnShortcut || typeof window === 'undefined') {\n      return undefined\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {\n        event.preventDefault()\n        toggleOpen()\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [openOnShortcut, toggleOpen])\n\n  const styleContextValue = React.useMemo(\n    () => ({ size, variant, radius }),\n    [size, variant, radius],\n  )\n\n  return (\n    <SearchBarContext.Provider value={contextValue}>\n      <SearchBarStyleContext.Provider value={styleContextValue}>\n        <Comp\n          {...rootProps}\n          ref={forwardedRef}\n          className={cn('dsx-search-bar', compact && 'dsx-search-bar--compact', className)}\n          data-radius={radius}\n          data-size={size}\n          data-variant={variant}\n        />\n      </SearchBarStyleContext.Provider>\n    </SearchBarContext.Provider>\n  )\n})\nSearchBarRoot.displayName = 'SearchBar'\n\nconst SearchBarTrigger = React.forwardRef<SearchBarTriggerElement, SearchBarTriggerProps>(\n  (props, forwardedRef) => {\n    const { onClick, ...propsWithoutOnClick } = props\n    const styleContext = React.useContext(SearchBarStyleContext)\n    const {\n      asChild,\n      children,\n      className,\n      shortcutLabel = '\u2318K',\n      showShortcut = true,\n      variant = SEARCH_BAR_VARIANT_TO_BUTTON_VARIANT[styleContext.variant],\n      size = styleContext.size,\n      radius = styleContext.radius,\n      ...triggerProps\n    } = extractProps(propsWithoutOnClick, searchBarTriggerPropDefs)\n    const { setOpen } = useSearchBarContext()\n\n    return (\n      <Button\n        {...triggerProps}\n        ref={forwardedRef}\n        asChild={asChild}\n        className={cn('dsx-search-bar__trigger', className)}\n        leadingIcon={<Icon name=\"search\" size=\"sm\" />}\n        onClick={(event) => {\n          onClick?.(event)\n\n          if (!event.defaultPrevented) {\n            setOpen(true)\n          }\n        }}\n        type=\"button\"\n        variant={variant}\n        size={size}\n        radius={radius}\n      >\n        <span className=\"dsx-search-bar__trigger-content\">\n          <span className=\"dsx-search-bar__trigger-label\">{children ?? 'Search...'}</span>\n          {showShortcut ? (\n            <Kbd size=\"sm\" className=\"dsx-search-bar__shortcut\">\n              {shortcutLabel}\n            </Kbd>\n          ) : null}\n        </span>\n      </Button>\n    )\n  },\n)\nSearchBarTrigger.displayName = 'SearchBarTrigger'\n\nconst SearchBarMenu = React.forwardRef<SearchBarMenuElement, SearchBarMenuProps>((props, forwardedRef) => {\n  const {\n    children,\n    className,\n    contentClassName,\n    showClose = false,\n    size = 'md',\n    title = 'Search',\n    description,\n    ...commandProps\n  } = extractProps(props, searchBarMenuPropDefs)\n  const { open, setOpen } = useSearchBarContext()\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogContent className={cn('dsx-search-bar__menu', contentClassName)} showClose={showClose} size={size}>\n        <VisuallyHidden asChild>\n          <DialogTitle>{title}</DialogTitle>\n        </VisuallyHidden>\n        {description ? (\n          <VisuallyHidden asChild>\n            <DialogDescription>{description}</DialogDescription>\n          </VisuallyHidden>\n        ) : null}\n        <React.Suspense fallback={null}>\n          <Command {...commandProps} ref={forwardedRef} className={cn('dsx-search-bar__command', className)}>\n            {children}\n          </Command>\n        </React.Suspense>\n      </DialogContent>\n    </Dialog>\n  )\n})\nSearchBarMenu.displayName = 'SearchBarMenu'\n\nconst SearchBar: typeof SearchBarRoot & {\n  Trigger: typeof SearchBarTrigger\n  Menu: typeof SearchBarMenu\n} = Object.assign(SearchBarRoot, {\n  Trigger: SearchBarTrigger,\n  Menu: SearchBarMenu,\n})\n\nexport { SearchBar, SearchBarMenu, SearchBarRoot, SearchBarTrigger }\nexport type { SearchBarMenuProps, SearchBarRootProps, SearchBarTriggerProps }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/searchBar/searchBar.props.cjs

@@ -68,6 +68,10 @@ const searchBarMenuPropDefs = {
   title: {
     type: "string",
     default: "Search"
+  },
+  description: {
+    type: "string",
+    default: void 0
   }
 };
 //# sourceMappingURL=searchBar.props.cjs.map

package/dist/components/searchBar/searchBar.props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/searchBar/searchBar.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst searchBarVariants = ['default', 'ghost'] as const\nconst searchBarSizes = ['sm', 'md', 'lg'] as const\nconst searchBarRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst searchBarRootPropDefs = {\n  ...asChildPropDef,\n  compact: {\n    type: 'boolean',\n    default: false,\n  },\n  openOnShortcut: {\n    type: 'boolean',\n    default: true,\n  },\n  variant: {\n    type: 'enum',\n    values: searchBarVariants,\n    default: 'default',\n  },\n  size: {\n    type: 'enum',\n    values: searchBarSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: searchBarRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  compact: PropDef\n  openOnShortcut: PropDef\n  variant: PropDef<(typeof searchBarVariants)[number]>\n  size: PropDef<(typeof searchBarSizes)[number]>\n  radius: PropDef<(typeof searchBarRadiusValues)[number]>\n}\n\nconst searchBarTriggerPropDefs = {\n  ...asChildPropDef,\n  showShortcut: {\n    type: 'boolean',\n    default: true,\n  },\n} satisfies {\n  asChild: PropDef\n  showShortcut: PropDef\n}\n\nconst searchBarMenuPropDefs = {\n  showClose: {\n    type: 'boolean',\n    default: false,\n  },\n  title: {\n    type: 'string',\n    default: 'Search',\n  },\n} satisfies {\n  showClose: PropDef\n  title: PropDef\n}\n\nexport { searchBarMenuPropDefs, searchBarRootPropDefs, searchBarTriggerPropDefs }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,oBAAoB,CAAC,WAAW,OAAO;AAC7C,MAAM,iBAAiB,CAAC,MAAM,MAAM,IAAI;AACxC,MAAM,wBAAwB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE/D,MAAM,wBAAwB;AAAA,EAC5B,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AASA,MAAM,2BAA2B;AAAA,EAC/B,GAAG;AAAA,EACH,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;AAKA,MAAM,wBAAwB;AAAA,EAC5B,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst searchBarVariants = ['default', 'ghost'] as const\nconst searchBarSizes = ['sm', 'md', 'lg'] as const\nconst searchBarRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst searchBarRootPropDefs = {\n  ...asChildPropDef,\n  compact: {\n    type: 'boolean',\n    default: false,\n  },\n  openOnShortcut: {\n    type: 'boolean',\n    default: true,\n  },\n  variant: {\n    type: 'enum',\n    values: searchBarVariants,\n    default: 'default',\n  },\n  size: {\n    type: 'enum',\n    values: searchBarSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: searchBarRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  compact: PropDef\n  openOnShortcut: PropDef\n  variant: PropDef<(typeof searchBarVariants)[number]>\n  size: PropDef<(typeof searchBarSizes)[number]>\n  radius: PropDef<(typeof searchBarRadiusValues)[number]>\n}\n\nconst searchBarTriggerPropDefs = {\n  ...asChildPropDef,\n  showShortcut: {\n    type: 'boolean',\n    default: true,\n  },\n} satisfies {\n  asChild: PropDef\n  showShortcut: PropDef\n}\n\nconst searchBarMenuPropDefs = {\n  showClose: {\n    type: 'boolean',\n    default: false,\n  },\n  title: {\n    type: 'string',\n    default: 'Search',\n  },\n  description: {\n    type: 'string',\n    default: undefined,\n  },\n} satisfies {\n  showClose: PropDef\n  title: PropDef\n  description: PropDef\n}\n\nexport { searchBarMenuPropDefs, searchBarRootPropDefs, searchBarTriggerPropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,oBAAoB,CAAC,WAAW,OAAO;AAC7C,MAAM,iBAAiB,CAAC,MAAM,MAAM,IAAI;AACxC,MAAM,wBAAwB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE/D,MAAM,wBAAwB;AAAA,EAC5B,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AASA,MAAM,2BAA2B;AAAA,EAC/B,GAAG;AAAA,EACH,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;AAKA,MAAM,wBAAwB;AAAA,EAC5B,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

package/dist/components/searchBar/searchBar.props.d.cts

@@ -46,6 +46,10 @@ declare const searchBarMenuPropDefs: {
         type: "string";
         default: string;
     };
+    description: {
+        type: "string";
+        default: undefined;
+    };
 };
 export { searchBarMenuPropDefs, searchBarRootPropDefs, searchBarTriggerPropDefs };
 //# sourceMappingURL=searchBar.props.d.cts.map

package/dist/components/searchBar/searchBar.props.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"searchBar.props.d.cts","sourceRoot":"","sources":["../../../src/components/searchBar/searchBar.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC1B,CAAA;AAED,QAAA,MAAM,wBAAwB;;;;;;;;;CAS7B,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;CAY1B,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"searchBar.props.d.cts","sourceRoot":"","sources":["../../../src/components/searchBar/searchBar.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC1B,CAAA;AAED,QAAA,MAAM,wBAAwB;;;;;;;;;CAS7B,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;CAiB1B,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/searchBar/searchBar.props.d.mts

@@ -46,6 +46,10 @@ declare const searchBarMenuPropDefs: {
         type: "string";
         default: string;
     };
+    description: {
+        type: "string";
+        default: undefined;
+    };
 };
 export { searchBarMenuPropDefs, searchBarRootPropDefs, searchBarTriggerPropDefs };
 //# sourceMappingURL=searchBar.props.d.mts.map

package/dist/components/searchBar/searchBar.props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"searchBar.props.d.mts","sourceRoot":"","sources":["../../../src/components/searchBar/searchBar.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC1B,CAAA;AAED,QAAA,MAAM,wBAAwB;;;;;;;;;CAS7B,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;CAY1B,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"searchBar.props.d.mts","sourceRoot":"","sources":["../../../src/components/searchBar/searchBar.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC1B,CAAA;AAED,QAAA,MAAM,wBAAwB;;;;;;;;;CAS7B,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;CAiB1B,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/searchBar/searchBar.props.d.ts

@@ -46,6 +46,10 @@ declare const searchBarMenuPropDefs: {
         type: "string";
         default: string;
     };
+    description: {
+        type: "string";
+        default: undefined;
+    };
 };
 export { searchBarMenuPropDefs, searchBarRootPropDefs, searchBarTriggerPropDefs };
 //# sourceMappingURL=searchBar.props.d.ts.map

package/dist/components/searchBar/searchBar.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchBar.props.d.ts","sourceRoot":"","sources":["../../../src/components/searchBar/searchBar.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC1B,CAAA;AAED,QAAA,MAAM,wBAAwB;;;;;;;;;CAS7B,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;CAY1B,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"searchBar.props.d.ts","sourceRoot":"","sources":["../../../src/components/searchBar/searchBar.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC1B,CAAA;AAED,QAAA,MAAM,wBAAwB;;;;;;;;;CAS7B,CAAA;AAED,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;CAiB1B,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/searchBar/searchBar.props.js

@@ -43,6 +43,10 @@ const searchBarMenuPropDefs = {
   title: {
     type: "string",
     default: "Search"
+  },
+  description: {
+    type: "string",
+    default: void 0
   }
 };
 export {

package/dist/components/searchBar/searchBar.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/searchBar/searchBar.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst searchBarVariants = ['default', 'ghost'] as const\nconst searchBarSizes = ['sm', 'md', 'lg'] as const\nconst searchBarRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst searchBarRootPropDefs = {\n  ...asChildPropDef,\n  compact: {\n    type: 'boolean',\n    default: false,\n  },\n  openOnShortcut: {\n    type: 'boolean',\n    default: true,\n  },\n  variant: {\n    type: 'enum',\n    values: searchBarVariants,\n    default: 'default',\n  },\n  size: {\n    type: 'enum',\n    values: searchBarSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: searchBarRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  compact: PropDef\n  openOnShortcut: PropDef\n  variant: PropDef<(typeof searchBarVariants)[number]>\n  size: PropDef<(typeof searchBarSizes)[number]>\n  radius: PropDef<(typeof searchBarRadiusValues)[number]>\n}\n\nconst searchBarTriggerPropDefs = {\n  ...asChildPropDef,\n  showShortcut: {\n    type: 'boolean',\n    default: true,\n  },\n} satisfies {\n  asChild: PropDef\n  showShortcut: PropDef\n}\n\nconst searchBarMenuPropDefs = {\n  showClose: {\n    type: 'boolean',\n    default: false,\n  },\n  title: {\n    type: 'string',\n    default: 'Search',\n  },\n} satisfies {\n  showClose: PropDef\n  title: PropDef\n}\n\nexport { searchBarMenuPropDefs, searchBarRootPropDefs, searchBarTriggerPropDefs }\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,oBAAoB,CAAC,WAAW,OAAO;AAC7C,MAAM,iBAAiB,CAAC,MAAM,MAAM,IAAI;AACxC,MAAM,wBAAwB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE/D,MAAM,wBAAwB;AAAA,EAC5B,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AASA,MAAM,2BAA2B;AAAA,EAC/B,GAAG;AAAA,EACH,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;AAKA,MAAM,wBAAwB;AAAA,EAC5B,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst searchBarVariants = ['default', 'ghost'] as const\nconst searchBarSizes = ['sm', 'md', 'lg'] as const\nconst searchBarRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst searchBarRootPropDefs = {\n  ...asChildPropDef,\n  compact: {\n    type: 'boolean',\n    default: false,\n  },\n  openOnShortcut: {\n    type: 'boolean',\n    default: true,\n  },\n  variant: {\n    type: 'enum',\n    values: searchBarVariants,\n    default: 'default',\n  },\n  size: {\n    type: 'enum',\n    values: searchBarSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: searchBarRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  compact: PropDef\n  openOnShortcut: PropDef\n  variant: PropDef<(typeof searchBarVariants)[number]>\n  size: PropDef<(typeof searchBarSizes)[number]>\n  radius: PropDef<(typeof searchBarRadiusValues)[number]>\n}\n\nconst searchBarTriggerPropDefs = {\n  ...asChildPropDef,\n  showShortcut: {\n    type: 'boolean',\n    default: true,\n  },\n} satisfies {\n  asChild: PropDef\n  showShortcut: PropDef\n}\n\nconst searchBarMenuPropDefs = {\n  showClose: {\n    type: 'boolean',\n    default: false,\n  },\n  title: {\n    type: 'string',\n    default: 'Search',\n  },\n  description: {\n    type: 'string',\n    default: undefined,\n  },\n} satisfies {\n  showClose: PropDef\n  title: PropDef\n  description: PropDef\n}\n\nexport { searchBarMenuPropDefs, searchBarRootPropDefs, searchBarTriggerPropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,oBAAoB,CAAC,WAAW,OAAO;AAC7C,MAAM,iBAAiB,CAAC,MAAM,MAAM,IAAI;AACxC,MAAM,wBAAwB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE/D,MAAM,wBAAwB;AAAA,EAC5B,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AASA,MAAM,2BAA2B;AAAA,EAC/B,GAAG;AAAA,EACH,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;AAKA,MAAM,wBAAwB;AAAA,EAC5B,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

package/dist/components/section/section.props.cjs

@@ -22,12 +22,20 @@ __export(section_props_exports, {
   sectionSizeValues: () => sectionSizeValues
 });
 module.exports = __toCommonJS(section_props_exports);
+var import_propDef = require("../../_internal/props/propDef");
 const sectionSizeValues = ["1", "2", "3"];
+const sectionSpaceValues = ["none", ...import_propDef.spaceScaleValues];
 const sectionPropDefs = {
   size: {
     type: "enum",
     values: sectionSizeValues,
     default: void 0
+  },
+  space: {
+    type: "enum | string",
+    values: sectionSpaceValues,
+    default: "2xl",
+    responsive: true
   }
 };
 //# sourceMappingURL=section.props.cjs.map

package/dist/components/section/section.props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/section/section.props.ts"],
-  "sourcesContent": ["import type { PropDef } from '../../_internal/props/propDef'\n\nconst sectionSizeValues = ['1', '2', '3'] as const\n\nconst sectionPropDefs = {\n  size: {\n    type: 'enum',\n    values: sectionSizeValues,\n    default: undefined,\n  },\n} satisfies {\n  size: PropDef<(typeof sectionSizeValues)[number]>\n}\n\nexport { sectionPropDefs, sectionSizeValues }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,MAAM,oBAAoB,CAAC,KAAK,KAAK,GAAG;AAExC,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { spaceScaleValues, type PropDef } from '../../_internal/props/propDef'\n\nconst sectionSizeValues = ['1', '2', '3'] as const\nconst sectionSpaceValues = ['none', ...spaceScaleValues] as const\n\nconst sectionPropDefs = {\n  size: {\n    type: 'enum',\n    values: sectionSizeValues,\n    default: undefined,\n  },\n  space: {\n    type: 'enum | string',\n    values: sectionSpaceValues,\n    default: '2xl',\n    responsive: true,\n  },\n} satisfies {\n  size: PropDef<(typeof sectionSizeValues)[number]>\n  space: PropDef<(typeof sectionSpaceValues)[number] | string>\n}\n\nexport { sectionPropDefs, sectionSizeValues }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+C;AAE/C,MAAM,oBAAoB,CAAC,KAAK,KAAK,GAAG;AACxC,MAAM,qBAAqB,CAAC,QAAQ,GAAG,+BAAgB;AAEvD,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACF;",
   "names": []
 }

package/dist/components/section/section.props.d.cts

@@ -5,6 +5,12 @@ declare const sectionPropDefs: {
         values: readonly ["1", "2", "3"];
         default: undefined;
     };
+    space: {
+        type: "enum | string";
+        values: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        default: string;
+        responsive: true;
+    };
 };
 export { sectionPropDefs, sectionSizeValues };
 //# sourceMappingURL=section.props.d.cts.map

package/dist/components/section/section.props.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"section.props.d.cts","sourceRoot":"","sources":["../../../src/components/section/section.props.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB,0BAA2B,CAAA;AAElD,QAAA,MAAM,eAAe;;;;;;CAQpB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"section.props.d.cts","sourceRoot":"","sources":["../../../src/components/section/section.props.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB,0BAA2B,CAAA;AAGlD,QAAA,MAAM,eAAe;;;;;;;;;;;;CAepB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/section/section.props.d.mts

@@ -5,6 +5,12 @@ declare const sectionPropDefs: {
         values: readonly ["1", "2", "3"];
         default: undefined;
     };
+    space: {
+        type: "enum | string";
+        values: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        default: string;
+        responsive: true;
+    };
 };
 export { sectionPropDefs, sectionSizeValues };
 //# sourceMappingURL=section.props.d.mts.map

package/dist/components/section/section.props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"section.props.d.mts","sourceRoot":"","sources":["../../../src/components/section/section.props.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB,0BAA2B,CAAA;AAElD,QAAA,MAAM,eAAe;;;;;;CAQpB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"section.props.d.mts","sourceRoot":"","sources":["../../../src/components/section/section.props.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB,0BAA2B,CAAA;AAGlD,QAAA,MAAM,eAAe;;;;;;;;;;;;CAepB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/section/section.props.d.ts

@@ -5,6 +5,12 @@ declare const sectionPropDefs: {
         values: readonly ["1", "2", "3"];
         default: undefined;
     };
+    space: {
+        type: "enum | string";
+        values: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        default: string;
+        responsive: true;
+    };
 };
 export { sectionPropDefs, sectionSizeValues };
 //# sourceMappingURL=section.props.d.ts.map

package/dist/components/section/section.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"section.props.d.ts","sourceRoot":"","sources":["../../../src/components/section/section.props.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB,0BAA2B,CAAA;AAElD,QAAA,MAAM,eAAe;;;;;;CAQpB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"section.props.d.ts","sourceRoot":"","sources":["../../../src/components/section/section.props.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,iBAAiB,0BAA2B,CAAA;AAGlD,QAAA,MAAM,eAAe;;;;;;;;;;;;CAepB,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/section/section.props.js

@@ -1,9 +1,17 @@
+import { spaceScaleValues } from "../../_internal/props/propDef.js";
 const sectionSizeValues = ["1", "2", "3"];
+const sectionSpaceValues = ["none", ...spaceScaleValues];
 const sectionPropDefs = {
   size: {
     type: "enum",
     values: sectionSizeValues,
     default: void 0
+  },
+  space: {
+    type: "enum | string",
+    values: sectionSpaceValues,
+    default: "2xl",
+    responsive: true
   }
 };
 export {

package/dist/components/section/section.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/section/section.props.ts"],
-  "sourcesContent": ["import type { PropDef } from '../../_internal/props/propDef'\n\nconst sectionSizeValues = ['1', '2', '3'] as const\n\nconst sectionPropDefs = {\n  size: {\n    type: 'enum',\n    values: sectionSizeValues,\n    default: undefined,\n  },\n} satisfies {\n  size: PropDef<(typeof sectionSizeValues)[number]>\n}\n\nexport { sectionPropDefs, sectionSizeValues }\n"],
-  "mappings": "AAEA,MAAM,oBAAoB,CAAC,KAAK,KAAK,GAAG;AAExC,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { spaceScaleValues, type PropDef } from '../../_internal/props/propDef'\n\nconst sectionSizeValues = ['1', '2', '3'] as const\nconst sectionSpaceValues = ['none', ...spaceScaleValues] as const\n\nconst sectionPropDefs = {\n  size: {\n    type: 'enum',\n    values: sectionSizeValues,\n    default: undefined,\n  },\n  space: {\n    type: 'enum | string',\n    values: sectionSpaceValues,\n    default: '2xl',\n    responsive: true,\n  },\n} satisfies {\n  size: PropDef<(typeof sectionSizeValues)[number]>\n  space: PropDef<(typeof sectionSpaceValues)[number] | string>\n}\n\nexport { sectionPropDefs, sectionSizeValues }\n"],
+  "mappings": "AAAA,SAAS,wBAAsC;AAE/C,MAAM,oBAAoB,CAAC,KAAK,KAAK,GAAG;AACxC,MAAM,qBAAqB,CAAC,QAAQ,GAAG,gBAAgB;AAEvD,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACF;",
   "names": []
 }

package/dist/components/segmented-control.css

@@ -4,15 +4,15 @@
 /* ---- Root container ---- */
 
 .dsx-segmented-control {
+  position: relative;
   display: inline-flex;
   align-items: stretch;
   align-self: flex-start;
   gap: 0;
   isolation: isolate;
-  background-color: var(--dsx-color-surface-raised);
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  background-color: var(--dsx-color-surface-sunken);
+  border: var(--dsx-boundary-control-width) solid transparent;
   border-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
-  box-shadow: var(--dsx-effect-shadow-1);
   min-width: max-content;
 }
 
@@ -26,12 +26,15 @@
 /* ---- Item ---- */
 
 .dsx-segmented-control__item {
+  position: relative;
+  z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--dsx-space-xs);
   padding-inline: var(--dsx-space-md);
   border: 0;
-  border-radius: 0;
+  border-radius: max(0px, calc(var(--dsx-grouped-radius, var(--dsx-rounded-md)) - var(--dsx-space-2xs)));
   background: transparent;
   color: var(--dsx-color-on-surface-variant);
   cursor: var(--dsx-cursor-pointer, pointer);
@@ -41,33 +44,51 @@
   letter-spacing: var(--dsx-typography-label-large-letter-spacing);
   transition:
     background-color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease),
-    color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease),
-    box-shadow var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
+    color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
   user-select: none;
 }
 
-/* Negative margin for border overlap — same pattern as Toggle Group */
-.dsx-segmented-control__item + .dsx-segmented-control__item {
-  margin-inline-start: calc(-1 * var(--dsx-border-width-sm));
-}
-
-/* Corner radii — first and last items inherit the container's rounded corners */
-.dsx-segmented-control__item:first-child {
-  border-start-start-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
-  border-end-start-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
+.dsx-segmented-control__item > svg {
+  flex-shrink: 0;
 }
 
-.dsx-segmented-control__item:last-child {
-  border-start-end-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
-  border-end-end-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
+/* Negative margin for border overlap — same pattern as Toggle Group */
+.dsx-segmented-control__item + .dsx-segmented-control__item {
+  margin-inline-start: calc(-1 * var(--dsx-boundary-control-width));
 }
 
-/* ---- Focus — shared ring from baseButton.css ---- */
+/* ---- Sliding indicator — Mantine-style measured pill ---- */
 
-.dsx-segmented-control__item:focus-visible {
-  outline: none;
-  box-shadow: var(--dsx-shadow-focus-ring);
-  z-index: var(--dsx-z-index-elevated-strong);
+.dsx-segmented-control__indicator {
+  position: absolute;
+  top: var(--dsx-space-2xs);
+  bottom: var(--dsx-space-2xs);
+  left: 0;
+  width: 0;
+  border-radius: max(0px, calc(var(--dsx-grouped-radius, var(--dsx-rounded-md)) - var(--dsx-space-2xs)));
+  pointer-events: none;
+  z-index: 0;
+  transition-property: transform, width;
+  transition-duration: var(--dsx-motion-duration-fast, 150ms);
+  transition-timing-function: var(--dsx-motion-easing-standard, ease);
+}
+
+.dsx-segmented-control__indicator::before {
+  position: absolute;
+  inset-block: 0;
+  inset-inline: var(--dsx-space-2xs);
+  border-radius: inherit;
+  background:
+    linear-gradient(var(--dsx-effect-pressed-layer), var(--dsx-effect-pressed-layer)),
+    var(--dsx-control-active-background);
+  box-shadow: var(--dsx-effect-shadow-2);
+  content: '';
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-segmented-control__indicator {
+    transition: none;
+  }
 }
 
 /* ---- Hover ---- */
@@ -75,16 +96,23 @@
 @media (hover: hover) {
   .dsx-segmented-control__item:hover:not([data-state='on']):not([data-disabled]) {
     background: var(--dsx-effect-hover-ghost);
-    color: var(--dsx-color-on-surface);
+    /* Same readable-accent rule as selected: raw primary fails contrast
+       on bright accents (spark on light). */
+    color: var(--dsx-color-accent-indicator);
   }
 }
 
-/* ---- Selected state — same pattern as Toggle Group ---- */
+/* ---- Selected state — surface lives on the sliding indicator pill behind
+   the item; the item itself keeps only the selected label color so the
+   resting (unselected) paint is untouched. ---- */
 
 .dsx-segmented-control__item[data-state='on'] {
-  background: linear-gradient(var(--dsx-effect-pressed-layer), var(--dsx-effect-pressed-layer)), var(--dsx-control-active-background);
-  color: var(--dsx-control-active-foreground);
-  box-shadow: var(--dsx-shadow-active-inset-outline);
+  background: transparent;
+  /* accent-indicator, not primary: the selected label sits on a pale pill,
+     where a raw accent-9 fails contrast on bright accents (spark review
+     2026-09-19 — indicator is the ramp step designed for text on tints). */
+  color: var(--dsx-color-accent-indicator);
+  box-shadow: none;
   z-index: var(--dsx-z-index-elevated);
 }
 
@@ -128,50 +156,62 @@
   letter-spacing: var(--dsx-typography-label-large-letter-spacing);
 }
 
-/* ---- Variant: default (raised surface with selected highlight) ---- */
+/* ---- Variant: default (frameless, harness pill) ---- */
 
 .dsx-segmented-control--default {
-  background-color: var(--dsx-color-surface-raised);
-  border-color: var(--dsx-color-outline);
-}
-
-.dsx-segmented-control--default .dsx-segmented-control__item[data-state='on'] {
-  background: linear-gradient(var(--dsx-effect-pressed-layer), var(--dsx-effect-pressed-layer)), var(--dsx-control-active-background);
-  color: var(--dsx-control-active-foreground);
-  box-shadow: var(--dsx-shadow-active-inset-outline);
+  border-color: transparent;
 }
 
 /* ---- Variant: outline (transparent container, outlined items) ---- */
 
 .dsx-segmented-control--outline {
   background-color: transparent;
-  border-color: var(--dsx-color-outline);
+  border-color: var(--dsx-boundary-control-color);
   box-shadow: none;
 }
 
 .dsx-segmented-control--outline .dsx-segmented-control__item {
-  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
-  border-radius: 0;
+  border: 0;
+  margin-inline-start: 0;
+}
+
+/* ---- Variant: subtle (borderless, Primer recipe) ---- */
+
+.dsx-segmented-control--subtle {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
 }
 
-.dsx-segmented-control--outline .dsx-segmented-control__item + .dsx-segmented-control__item {
-  border-inline-start: none;
+.dsx-segmented-control--subtle .dsx-segmented-control__item + .dsx-segmented-control__item {
   margin-inline-start: 0;
 }
 
-.dsx-segmented-control--outline .dsx-segmented-control__item:first-child {
-  border-start-start-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
-  border-end-start-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
+.dsx-segmented-control--subtle .dsx-segmented-control__item {
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-segmented-control--sm .dsx-segmented-control__item:where([data-icon-only]) {
+  inline-size: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
+  min-inline-size: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
+  padding-inline: 0;
+}
+
+.dsx-segmented-control--md .dsx-segmented-control__item:where([data-icon-only]) {
+  inline-size: var(--dsx-density-control-height, var(--dsx-size-xl));
+  min-inline-size: var(--dsx-density-control-height, var(--dsx-size-xl));
+  padding-inline: 0;
 }
 
-.dsx-segmented-control--outline .dsx-segmented-control__item:last-child {
-  border-start-end-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
-  border-end-end-radius: var(--dsx-grouped-radius, var(--dsx-rounded-md));
+.dsx-segmented-control--lg .dsx-segmented-control__item:where([data-icon-only]) {
+  inline-size: var(--dsx-density-control-height-lg, var(--dsx-size-2xl));
+  min-inline-size: var(--dsx-density-control-height-lg, var(--dsx-size-2xl));
+  padding-inline: 0;
 }
 
-.dsx-segmented-control--outline .dsx-segmented-control__item[data-state='on'] {
-  background: linear-gradient(var(--dsx-effect-pressed-layer), var(--dsx-effect-pressed-layer)), var(--dsx-control-active-background);
-  color: var(--dsx-control-active-foreground);
-  border-color: var(--dsx-control-active-border, var(--dsx-color-outline));
-  box-shadow: var(--dsx-shadow-active-inset-outline);
+.dsx-segmented-control__item:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+  color: var(--dsx-color-primary);
+  z-index: var(--dsx-z-index-elevated-strong);
 }

package/dist/components/segmented-meter.css

@@ -5,15 +5,18 @@
   width: 100%;
 }
 
-.dsx-segmented-meter[data-size='sm'] {
+.dsx-segmented-meter[data-size='sm'],
+.dsx-segmented-meter-size-sm {
   --_segment-height: var(--dsx-progress-height-sm, 4px);
 }
 
-.dsx-segmented-meter[data-size='md'] {
+.dsx-segmented-meter[data-size='md'],
+.dsx-segmented-meter-size-md {
   --_segment-height: var(--dsx-progress-height, 8px);
 }
 
-.dsx-segmented-meter[data-size='lg'] {
+.dsx-segmented-meter[data-size='lg'],
+.dsx-segmented-meter-size-lg {
   --_segment-height: var(--dsx-progress-height-lg, 12px);
 }