@exsto/ds 0.0.1-rc.16 → 0.0.1-rc.18

package/dist/ui/src/components/ui/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../../../../../../ui/src/components/ui/select/select.tsx"],"sourcesContent":["import { Select as SelectPrimitive } from '@base-ui/react/select';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { POPUP_ITEM_INDICATOR_CLASS, popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport const Select = <TValue,>({ ...props }: SelectPrimitive.Root.Props<TValue>) => {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n};\n\nexport type TSelectTriggerSize = 'sm' | 'default';\n\nexport interface ISelectTriggerProps extends SelectPrimitive.Trigger.Props {\n  size?: TSelectTriggerSize;\n}\n\nexport const SelectTrigger = ({ className, size = 'default', children, ...props }: ISelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(\n        'flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border border-input bg-transparent text-sm text-foreground transition-colors outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20',\n        'data-popup-open:border-ring data-popup-open:ring-3 data-popup-open:ring-ring/50',\n        'dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        size === 'sm' ? 'h-7 px-2.5 text-[0.8rem]' : 'h-8 px-2.5',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\" className=\"shrink-0 text-muted-foreground\">\n        <IconChevronDown className=\"size-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nexport const SelectValue = ({ className, ...props }: SelectPrimitive.Value.Props) => {\n  return <SelectPrimitive.Value data-slot=\"select-value\" className={cn('truncate data-placeholder:text-muted-foreground', className)} {...props} />;\n};\n\nexport interface ISelectContentProps extends SelectPrimitive.Popup.Props {\n  portalContainer?: SelectPrimitive.Portal.Props['container'];\n}\n\nexport const SelectContent = ({ className, children, portalContainer, ...props }: ISelectContentProps) => {\n  useExposedFocusGuards();\n  return (\n    <SelectPrimitive.Portal container={portalContainer}>\n      {/* alignItemWithTrigger=false: drop below the trigger (shadcn style), not Base UI's macOS-style overlay */}\n      <SelectPrimitive.Positioner data-slot=\"select-positioner\" sideOffset={4} align=\"start\" alignItemWithTrigger={false}>\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            'z-50 min-w-[var(--anchor-width)] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n            'origin-[var(--transform-origin)]',\n            'transition-[transform,scale,opacity] motion-reduce:animate-none motion-reduce:transition-none data-open:scale-100 data-open:opacity-100 data-closed:scale-95 data-closed:opacity-0 data-open:animate-in data-closed:animate-out data-open:fade-in-0 data-closed:fade-out-0',\n            className,\n          )}\n          {...props}\n        >\n          {/* A long option list has to scroll inside the popup: the popup clips\n              (overflow-hidden) and carries no height of its own, so the options\n              past the fold were simply unreachable. --available-height is the\n              room the positioner measured for it. */}\n          {/* Select.List is what makes the wrappers legal: with a list present Base\n              UI moves `role=\"listbox\"` off the popup and onto it, so the options\n              stay direct children of the role and the ScrollArea sits outside it. */}\n          <ScrollArea type=\"always\" fade fadeFrom=\"popover\" className=\"max-h-(--available-height)\">\n            <SelectPrimitive.List data-slot=\"select-list\">{children}</SelectPrimitive.List>\n          </ScrollArea>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n};\n\nexport const SelectGroup = ({ className, ...props }: SelectPrimitive.Group.Props) => {\n  return <SelectPrimitive.Group data-slot=\"select-group\" className={cn('flex flex-col gap-0.5', className)} {...props} />;\n};\n\nexport const SelectLabel = ({ className, ...props }: SelectPrimitive.GroupLabel.Props) => {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('px-2 py-1 text-xs font-semibold text-muted-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const SelectItem = ({ className, children, ...props }: SelectPrimitive.Item.Props) => {\n  return (\n    <SelectPrimitive.Item data-slot=\"select-item\" className={cn(popupItemClass('base-ui', true), className)} {...props}>\n      <SelectPrimitive.ItemText data-slot=\"select-item-text\">{children}</SelectPrimitive.ItemText>\n      {/* After the text, not before it: the check marks the end of the item in\n          every list in the system, so the labels all start on one line. */}\n      <SelectPrimitive.ItemIndicator data-slot=\"select-item-indicator\" className={POPUP_ITEM_INDICATOR_CLASS}>\n        <IconCheck className=\"size-3.5\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  );\n};\n\nexport const SelectSeparator = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"select-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} aria-hidden=\"true\" {...props} />;\n};\n"],"mappings":";;;;;;;;AAQA,IAAa,YAAmB,EAAE,GAAG,YAAgD;CACnF,OAAO,oBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAQA,IAAa,iBAAiB,EAAE,WAAW,OAAO,WAAW,UAAU,GAAG,YAAiC;CACzG,OACE,qBAAC,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,sKACA,6EACA,gFACA,wFACA,mFACA,4HACA,SAAS,OAAO,6BAA6B,cAC7C,SACF;EACA,GAAI;EAZN,UAAA,CAcG,UACD,oBAAC,OAAgB,MAAjB;GAAsB,aAAU;GAAc,WAAU;GACtD,UAAA,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;EACjB,CAAA,CACC;;AAE7B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,mDAAmD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClJ;AAMA,IAAa,iBAAiB,EAAE,WAAW,UAAU,iBAAiB,GAAG,YAAiC;CACxG,sBAAsB;CACtB,OACE,oBAAC,OAAgB,QAAjB;EAAwB,WAAW;EAEjC,UAAA,oBAAC,OAAgB,YAAjB;GAA4B,aAAU;GAAoB,YAAY;GAAG,OAAM;GAAQ,sBAAsB;GAC3G,UAAA,oBAAC,OAAgB,OAAjB;IACE,aAAU;IACV,WAAW,GACT,kJACA,oCACA,8QACA,SACF;IACA,GAAI;IASJ,UAAA,oBAAC,YAAD;KAAY,MAAK;KAAS,MAAA;KAAK,UAAS;KAAU,WAAU;KAC1D,UAAA,oBAAC,OAAgB,MAAjB;MAAsB,aAAU;MAAe;KAA+B,CAAA;IACpE,CAAA;GACS,CAAA;EACG,CAAA;CACN,CAAA;AAE5B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxH;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA8C;CACxF,OACE,oBAAC,OAAgB,YAAjB;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,cAAc,EAAE,WAAW,UAAU,GAAG,YAAwC;CAC3F,OACE,qBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAc,WAAW,GAAG,eAAe,WAAW,IAAI,GAAG,SAAS;EAAG,GAAI;EAA7G,UAAA,CACE,oBAAC,OAAgB,UAAjB;GAA0B,aAAU;GAAoB;EAAmC,CAAA,GAG3F,oBAAC,OAAgB,eAAjB;GAA+B,aAAU;GAAwB,WAAW;GAC1E,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACJ,CAAA,CACX;;AAE1B;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAyC;CACvF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,GAAG,6BAA6B,SAAS;EAAG,eAAY;EAAO,GAAI;CAAQ,CAAA;AACjI"}
+{"version":3,"file":"select.js","names":[],"sources":["../../../../../../../ui/src/components/ui/select/select.tsx"],"sourcesContent":["import { Select as SelectPrimitive } from '@base-ui/react/select';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport {\n  POPUP_FRAME_CLASS,\n  POPUP_GROUP_LABEL_CLASS,\n  POPUP_ITEM_INDICATOR_CLASS,\n  POPUP_LIST_HEIGHT_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  popupItemClass,\n} from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport const Select = <TValue,>({ ...props }: SelectPrimitive.Root.Props<TValue>) => {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n};\n\nexport type TSelectTriggerSize = 'sm' | 'default';\n\nexport interface ISelectTriggerProps extends SelectPrimitive.Trigger.Props {\n  size?: TSelectTriggerSize;\n}\n\nexport const SelectTrigger = ({ className, size = 'default', children, ...props }: ISelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(\n        'flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border border-input bg-transparent text-sm text-foreground transition-colors outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20',\n        'data-popup-open:border-ring data-popup-open:ring-3 data-popup-open:ring-ring/50',\n        'dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        size === 'sm' ? 'h-7 px-2.5 text-[0.8rem]' : 'h-8 px-2.5',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\" className=\"shrink-0 text-muted-foreground\">\n        <IconChevronDown className=\"size-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nexport const SelectValue = ({ className, ...props }: SelectPrimitive.Value.Props) => {\n  return <SelectPrimitive.Value data-slot=\"select-value\" className={cn('truncate data-placeholder:text-muted-foreground', className)} {...props} />;\n};\n\nexport interface ISelectContentProps extends SelectPrimitive.Popup.Props {\n  portalContainer?: SelectPrimitive.Portal.Props['container'];\n}\n\nexport const SelectContent = ({ className, children, portalContainer, ...props }: ISelectContentProps) => {\n  useExposedFocusGuards();\n  return (\n    <SelectPrimitive.Portal container={portalContainer}>\n      {/* alignItemWithTrigger=false: drop below the trigger (shadcn style), not Base UI's macOS-style overlay */}\n      <SelectPrimitive.Positioner data-slot=\"select-positioner\" sideOffset={4} align=\"start\" alignItemWithTrigger={false}>\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            'z-50 flex max-h-(--available-height) flex-col overflow-hidden',\n            POPUP_FRAME_CLASS,\n            POPUP_LIST_WIDTH_CLASS,\n            'origin-[var(--transform-origin)]',\n            'transition-[transform,scale,opacity] motion-reduce:animate-none motion-reduce:transition-none data-open:scale-100 data-open:opacity-100 data-closed:scale-95 data-closed:opacity-0 data-open:animate-in data-closed:animate-out data-open:fade-in-0 data-closed:fade-out-0',\n            className,\n          )}\n          {...props}\n        >\n          {/* A long option list has to scroll inside the popup: the popup clips\n              (overflow-hidden) and carries no height of its own, so the options\n              past the fold were simply unreachable. POPUP_LIST_HEIGHT_CLASS caps\n              it at eight rows, or at the whole rows the room the positioner\n              measured allows, so the foot of the list is never a half row. */}\n          {/* Select.List is what makes the wrappers legal: with a list present Base\n              UI moves `role=\"listbox\"` off the popup and onto it, so the options\n              stay direct children of the role and the ScrollArea sits outside it.\n              The list holds the padding, so it scrolls with the rows. */}\n          <ScrollArea type=\"always\" fade className={POPUP_LIST_HEIGHT_CLASS} viewportClassName=\"scroll-py-1\">\n            <SelectPrimitive.List data-slot=\"select-list\" className=\"p-1\">\n              {children}\n            </SelectPrimitive.List>\n          </ScrollArea>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n};\n\nexport const SelectGroup = ({ className, ...props }: SelectPrimitive.Group.Props) => {\n  // No gap between the rows of a group: a gap would put them 34px apart in a group and 32px apart outside one, and the list's\n  // whole-row height is counted in 32s.\n  return <SelectPrimitive.Group data-slot=\"select-group\" className={className} {...props} />;\n};\n\nexport const SelectLabel = ({ className, ...props }: SelectPrimitive.GroupLabel.Props) => {\n  return <SelectPrimitive.GroupLabel data-slot=\"select-label\" className={cn(POPUP_GROUP_LABEL_CLASS, className)} {...props} />;\n};\n\nexport const SelectItem = ({ className, children, ...props }: SelectPrimitive.Item.Props) => {\n  return (\n    <SelectPrimitive.Item data-slot=\"select-item\" className={cn(popupItemClass('base-ui', true), className)} {...props}>\n      <SelectPrimitive.ItemText data-slot=\"select-item-text\">{children}</SelectPrimitive.ItemText>\n      {/* After the text, not before it: the check marks the end of the item in\n          every list in the system, so the labels all start on one line. */}\n      <SelectPrimitive.ItemIndicator data-slot=\"select-item-indicator\" className={POPUP_ITEM_INDICATOR_CLASS}>\n        <IconCheck className=\"size-3.5\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  );\n};\n\nexport const SelectSeparator = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"select-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} aria-hidden=\"true\" {...props} />;\n};\n"],"mappings":";;;;;;;;AAeA,IAAa,YAAmB,EAAE,GAAG,YAAgD;CACnF,OAAO,oBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAQA,IAAa,iBAAiB,EAAE,WAAW,OAAO,WAAW,UAAU,GAAG,YAAiC;CACzG,OACE,qBAAC,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,sKACA,6EACA,gFACA,wFACA,mFACA,4HACA,SAAS,OAAO,6BAA6B,cAC7C,SACF;EACA,GAAI;EAZN,UAAA,CAcG,UACD,oBAAC,OAAgB,MAAjB;GAAsB,aAAU;GAAc,WAAU;GACtD,UAAA,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;EACjB,CAAA,CACC;;AAE7B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,mDAAmD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClJ;AAMA,IAAa,iBAAiB,EAAE,WAAW,UAAU,iBAAiB,GAAG,YAAiC;CACxG,sBAAsB;CACtB,OACE,oBAAC,OAAgB,QAAjB;EAAwB,WAAW;EAEjC,UAAA,oBAAC,OAAgB,YAAjB;GAA4B,aAAU;GAAoB,YAAY;GAAG,OAAM;GAAQ,sBAAsB;GAC3G,UAAA,oBAAC,OAAgB,OAAjB;IACE,aAAU;IACV,WAAW,GACT,iEACA,mBACA,wBACA,oCACA,8QACA,SACF;IACA,GAAI;IAWJ,UAAA,oBAAC,YAAD;KAAY,MAAK;KAAS,MAAA;KAAK,WAAW;KAAyB,mBAAkB;KACnF,UAAA,oBAAC,OAAgB,MAAjB;MAAsB,aAAU;MAAc,WAAU;MACrD;KACmB,CAAA;IACZ,CAAA;GACS,CAAA;EACG,CAAA;CACN,CAAA;AAE5B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CAGnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAA0B;EAAW,GAAI;CAAQ,CAAA;AAC3F;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA8C;CACxF,OAAO,oBAAC,OAAgB,YAAjB;EAA4B,aAAU;EAAe,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7H;AAEA,IAAa,cAAc,EAAE,WAAW,UAAU,GAAG,YAAwC;CAC3F,OACE,qBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAc,WAAW,GAAG,eAAe,WAAW,IAAI,GAAG,SAAS;EAAG,GAAI;EAA7G,UAAA,CACE,oBAAC,OAAgB,UAAjB;GAA0B,aAAU;GAAoB;EAAmC,CAAA,GAG3F,oBAAC,OAAgB,eAAjB;GAA+B,aAAU;GAAwB,WAAW;GAC1E,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACJ,CAAA,CACX;;AAE1B;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAyC;CACvF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,GAAG,6BAA6B,SAAS;EAAG,eAAY;EAAO,GAAI;CAAQ,CAAA;AACjI"}

package/dist/ui/src/components/ui/sheet/sheet.d.ts

@@ -7,6 +7,14 @@ export declare const SheetContent: ({ className, children, side, showCloseButton
     side?: "top" | "right" | "bottom" | "left";
     showCloseButton?: boolean;
 }) => React.JSX.Element;
+/**
+ * A Sheet's header and footer keep the rhythm of a Dialog's, so the two read as one family: a 16px title with the description 8px
+ * under it, and the actions in a row at the end (Cancel first, the primary last) where there is room, the primary on top where
+ * there is not. They used to differ: the title took the body's 24px line, the description sat 2px under it, so the header was a
+ * different height for every description, and the footer stacked a full-width Cancel over the primary at every width.
+ *
+ * The padding lives on the sections here rather than on the content as in a Dialog, so a body may run edge to edge between them.
+ */
 export declare const SheetHeader: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
 export declare const SheetFooter: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
 export declare const SheetTitle: ({ className, ...props }: SheetPrimitive.Title.Props) => React.JSX.Element;

package/dist/ui/src/components/ui/sheet/sheet.js

@@ -57,24 +57,32 @@ var SheetContent = ({ className, children, side = "right", showCloseButton = tru
 		})]
 	})] });
 };
+/**
+* A Sheet's header and footer keep the rhythm of a Dialog's, so the two read as one family: a 16px title with the description 8px
+* under it, and the actions in a row at the end (Cancel first, the primary last) where there is room, the primary on top where
+* there is not. They used to differ: the title took the body's 24px line, the description sat 2px under it, so the header was a
+* different height for every description, and the footer stacked a full-width Cancel over the primary at every width.
+*
+* The padding lives on the sections here rather than on the content as in a Dialog, so a body may run edge to edge between them.
+*/
 var SheetHeader = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sheet-header",
-		className: cn("flex flex-col gap-0.5 p-4", className),
+		className: cn("flex flex-col gap-2 p-4", className),
 		...props
 	});
 };
 var SheetFooter = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sheet-footer",
-		className: cn("mt-auto flex flex-col gap-2 p-4", className),
+		className: cn("mt-auto flex flex-col-reverse gap-2 p-4 sm:flex-row sm:justify-end", className),
 		...props
 	});
 };
 var SheetTitle = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(Dialog.Title, {
 		"data-slot": "sheet-title",
-		className: cn("font-heading text-base font-medium text-foreground", className),
+		className: cn("text-base leading-none font-medium", className),
 		...props
 	});
 };

package/dist/ui/src/components/ui/sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":[],"sources":["../../../../../../../ui/src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { Button } from '../button';\n\nexport const Sheet = ({ ...props }: SheetPrimitive.Root.Props) => {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n};\n\nexport const SheetTrigger = ({ ...props }: SheetPrimitive.Trigger.Props) => {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n};\n\nexport const SheetClose = ({ ...props }: SheetPrimitive.Close.Props) => {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n};\n\nconst SheetPortal = ({ ...props }: SheetPrimitive.Portal.Props) => {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n};\n\nconst SheetOverlay = ({ className, ...props }: SheetPrimitive.Backdrop.Props) => {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'fixed inset-0 z-50 bg-overlay transition-opacity duration-150 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const SheetContent = ({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  showCloseButton?: boolean;\n}) => {\n  useExposedFocusGuards();\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 motion-reduce:transition-none ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" render={<Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\" />}>\n            <IconX />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  );\n};\n\nexport const SheetHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sheet-header\" className={cn('flex flex-col gap-0.5 p-4', className)} {...props} />;\n};\n\nexport const SheetFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sheet-footer\" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;\n};\n\nexport const SheetTitle = ({ className, ...props }: SheetPrimitive.Title.Props) => {\n  return <SheetPrimitive.Title data-slot=\"sheet-title\" className={cn('font-heading text-base font-medium text-foreground', className)} {...props} />;\n};\n\nexport const SheetDescription = ({ className, ...props }: SheetPrimitive.Description.Props) => {\n  return <SheetPrimitive.Description data-slot=\"sheet-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;;;;;AAOA,IAAa,SAAS,EAAE,GAAG,YAAuC;CAChE,OAAO,oBAAC,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,IAAa,gBAAgB,EAAE,GAAG,YAA0C;CAC1E,OAAO,oBAAC,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,cAAc,EAAE,GAAG,YAAwC;CACtE,OAAO,oBAAC,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAM,eAAe,EAAE,GAAG,YAAyC;CACjE,OAAO,oBAAC,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,IAAM,gBAAgB,EAAE,WAAW,GAAG,YAA2C;CAC/E,OACE,oBAAC,OAAe,UAAhB;EACE,aAAU;EACV,WAAW,GACT,mMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAC3B,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,GAAG,YAIC;CACJ,sBAAsB;CACtB,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,qBAAC,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,2rCACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACA,mBACC,qBAAC,OAAe,OAAhB;GAAsB,aAAU;GAAc,QAAQ,oBAAC,QAAD;IAAQ,SAAQ;IAAQ,WAAU;IAAyB,MAAK;GAAW,CAAA;GAAjI,UAAA,CACE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CACjB;EAEJ,CAAA,CAAA;CACX,CAAA,CAAA,EAAA,CAAA;AAEjB;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1G;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,mCAAmC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OAAO,oBAAC,OAAe,OAAhB;EAAsB,aAAU;EAAc,WAAW,GAAG,sDAAsD,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnJ;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA8C;CAC7F,OAAO,oBAAC,OAAe,aAAhB;EAA4B,aAAU;EAAoB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1I"}
+{"version":3,"file":"sheet.js","names":[],"sources":["../../../../../../../ui/src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { Button } from '../button';\n\nexport const Sheet = ({ ...props }: SheetPrimitive.Root.Props) => {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n};\n\nexport const SheetTrigger = ({ ...props }: SheetPrimitive.Trigger.Props) => {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n};\n\nexport const SheetClose = ({ ...props }: SheetPrimitive.Close.Props) => {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n};\n\nconst SheetPortal = ({ ...props }: SheetPrimitive.Portal.Props) => {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n};\n\nconst SheetOverlay = ({ className, ...props }: SheetPrimitive.Backdrop.Props) => {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'fixed inset-0 z-50 bg-overlay transition-opacity duration-150 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const SheetContent = ({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  showCloseButton?: boolean;\n}) => {\n  useExposedFocusGuards();\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 motion-reduce:transition-none ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" render={<Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\" />}>\n            <IconX />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  );\n};\n\n/**\n * A Sheet's header and footer keep the rhythm of a Dialog's, so the two read as one family: a 16px title with the description 8px\n * under it, and the actions in a row at the end (Cancel first, the primary last) where there is room, the primary on top where\n * there is not. They used to differ: the title took the body's 24px line, the description sat 2px under it, so the header was a\n * different height for every description, and the footer stacked a full-width Cancel over the primary at every width.\n *\n * The padding lives on the sections here rather than on the content as in a Dialog, so a body may run edge to edge between them.\n */\nexport const SheetHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sheet-header\" className={cn('flex flex-col gap-2 p-4', className)} {...props} />;\n};\n\nexport const SheetFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sheet-footer\" className={cn('mt-auto flex flex-col-reverse gap-2 p-4 sm:flex-row sm:justify-end', className)} {...props} />;\n};\n\nexport const SheetTitle = ({ className, ...props }: SheetPrimitive.Title.Props) => {\n  return <SheetPrimitive.Title data-slot=\"sheet-title\" className={cn('text-base leading-none font-medium', className)} {...props} />;\n};\n\nexport const SheetDescription = ({ className, ...props }: SheetPrimitive.Description.Props) => {\n  return <SheetPrimitive.Description data-slot=\"sheet-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;;;;;AAOA,IAAa,SAAS,EAAE,GAAG,YAAuC;CAChE,OAAO,oBAAC,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,IAAa,gBAAgB,EAAE,GAAG,YAA0C;CAC1E,OAAO,oBAAC,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,cAAc,EAAE,GAAG,YAAwC;CACtE,OAAO,oBAAC,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAM,eAAe,EAAE,GAAG,YAAyC;CACjE,OAAO,oBAAC,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,IAAM,gBAAgB,EAAE,WAAW,GAAG,YAA2C;CAC/E,OACE,oBAAC,OAAe,UAAhB;EACE,aAAU;EACV,WAAW,GACT,mMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAC3B,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,GAAG,YAIC;CACJ,sBAAsB;CACtB,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,qBAAC,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,2rCACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACA,mBACC,qBAAC,OAAe,OAAhB;GAAsB,aAAU;GAAc,QAAQ,oBAAC,QAAD;IAAQ,SAAQ;IAAQ,WAAU;IAAyB,MAAK;GAAW,CAAA;GAAjI,UAAA,CACE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CACjB;EAEJ,CAAA,CAAA;CACX,CAAA,CAAA,EAAA,CAAA;AAEjB;;;;;;;;;AAUA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxG;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,sEAAsE,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnJ;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OAAO,oBAAC,OAAe,OAAhB;EAAsB,aAAU;EAAc,WAAW,GAAG,sCAAsC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnI;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA8C;CAC7F,OAAO,oBAAC,OAAe,aAAhB;EAA4B,aAAU;EAAoB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1I"}

package/dist/ui/src/components/ui/table/table.d.ts

@@ -1,12 +1,19 @@
 import type * as React from 'react';
 export interface ITableProps extends React.ComponentProps<'table'> {
     /**
-     * The box around the table, which scrolls it sideways. `overflow-visible` turns that scroll off, for a table whose page or
-     * parent scrolls it, or whose sticky header would otherwise stick to this box instead of that one.
+     * The box around the table. A table wider than it scrolls sideways inside it, in a design system ScrollArea: the bar is the
+     * kit's, not the browser's, and the room it takes at the foot is kept clear of the last row. `overflow-visible` turns that
+     * scroll off, for a table whose page or parent scrolls it, or whose sticky header would otherwise stick to this box instead
+     * of that one.
      */
     containerClassName?: string;
 }
 export declare const Table: ({ className, containerClassName, ...props }: ITableProps) => React.JSX.Element;
+/**
+ * The header row names the columns, it is not a row to point at: TableRow's hover fill would make it light up like the data
+ * under it, and read as clickable. The rule sits here, one level above the row, so it holds for any row put in a header and
+ * outranks the row's own hover fill.
+ */
 export declare const TableHeader: ({ className, ...props }: React.ComponentProps<"thead">) => React.JSX.Element;
 export declare const TableBody: ({ className, ...props }: React.ComponentProps<"tbody">) => React.JSX.Element;
 export declare const TableFooter: ({ className, ...props }: React.ComponentProps<"tfoot">) => React.JSX.Element;

package/dist/ui/src/components/ui/table/table.js

@@ -1,22 +1,35 @@
 import { cn } from "../../../lib/utils.js";
+import { ScrollArea } from "../scroll-area/scroll-area.js";
 import { jsx } from "react/jsx-runtime";
 //#region ../ui/src/components/ui/table/table.tsx
+/** `overflow-visible` (or its sideways form) among the classes: how a table has always switched its own scrolling off. */
+var SCROLL_OFF = /(?:^|\s)overflow-(?:x-)?visible(?:\s|$)/;
 var Table = ({ className, containerClassName, ...props }) => {
+	const table = /* @__PURE__ */ jsx("table", {
+		"data-slot": "table",
+		className: cn("w-full caption-bottom text-sm", className),
+		...props
+	});
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "table-container",
 		"data-focus": "inset",
-		className: cn("relative w-full overflow-x-auto", containerClassName),
-		children: /* @__PURE__ */ jsx("table", {
-			"data-slot": "table",
-			className: cn("w-full caption-bottom text-sm", className),
-			...props
+		className: cn("relative w-full", containerClassName),
+		children: SCROLL_OFF.test(containerClassName ?? "") ? table : /* @__PURE__ */ jsx(ScrollArea, {
+			orientation: "horizontal",
+			type: "always",
+			children: table
 		})
 	});
 };
+/**
+* The header row names the columns, it is not a row to point at: TableRow's hover fill would make it light up like the data
+* under it, and read as clickable. The rule sits here, one level above the row, so it holds for any row put in a header and
+* outranks the row's own hover fill.
+*/
 var TableHeader = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("thead", {
 		"data-slot": "table-header",
-		className: cn("[&_tr]:border-b", className),
+		className: cn("[&_tr]:border-b [&_tr]:hover:bg-transparent", className),
 		...props
 	});
 };

package/dist/ui/src/components/ui/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../../../../../../ui/src/components/ui/table/table.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport interface ITableProps extends React.ComponentProps<'table'> {\n  /**\n   * The box around the table, which scrolls it sideways. `overflow-visible` turns that scroll off, for a table whose page or\n   * parent scrolls it, or whose sticky header would otherwise stick to this box instead of that one.\n   */\n  containerClassName?: string;\n}\n\nexport const Table = ({ className, containerClassName, ...props }: ITableProps) => {\n  return (\n    <div data-slot=\"table-container\" data-focus=\"inset\" className={cn('relative w-full overflow-x-auto', containerClassName)}>\n      <table data-slot=\"table\" className={cn('w-full caption-bottom text-sm', className)} {...props} />\n    </div>\n  );\n};\n\nexport const TableHeader = ({ className, ...props }: React.ComponentProps<'thead'>) => {\n  return <thead data-slot=\"table-header\" className={cn('[&_tr]:border-b', className)} {...props} />;\n};\n\nexport const TableBody = ({ className, ...props }: React.ComponentProps<'tbody'>) => {\n  return <tbody data-slot=\"table-body\" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;\n};\n\nexport const TableFooter = ({ className, ...props }: React.ComponentProps<'tfoot'>) => {\n  return <tfoot data-slot=\"table-footer\" className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)} {...props} />;\n};\n\nexport const TableRow = ({ className, ...props }: React.ComponentProps<'tr'>) => {\n  return (\n    <tr data-slot=\"table-row\" className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)} {...props} />\n  );\n};\n\nexport const TableHead = ({ className, ...props }: React.ComponentProps<'th'>) => {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn('h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0', className)}\n      {...props}\n    />\n  );\n};\n\nexport const TableCell = ({ className, ...props }: React.ComponentProps<'td'>) => {\n  return <td data-slot=\"table-cell\" className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)} {...props} />;\n};\n\nexport const TableCaption = ({ className, ...props }: React.ComponentProps<'caption'>) => {\n  return <caption data-slot=\"table-caption\" className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;AAWA,IAAa,SAAS,EAAE,WAAW,oBAAoB,GAAG,YAAyB;CACjF,OACE,oBAAC,OAAD;EAAK,aAAU;EAAkB,cAAW;EAAQ,WAAW,GAAG,mCAAmC,kBAAkB;EACrH,UAAA,oBAAC,SAAD;GAAO,aAAU;GAAQ,WAAW,GAAG,iCAAiC,SAAS;GAAG,GAAI;EAAQ,CAAA;CAC7F,CAAA;AAET;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA2C;CACrF,OAAO,oBAAC,SAAD;EAAO,aAAU;EAAe,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClG;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAA2C;CACnF,OAAO,oBAAC,SAAD;EAAO,aAAU;EAAa,WAAW,GAAG,8BAA8B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC3G;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA2C;CACrF,OAAO,oBAAC,SAAD;EAAO,aAAU;EAAe,WAAW,GAAG,2DAA2D,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1I;AAEA,IAAa,YAAY,EAAE,WAAW,GAAG,YAAwC;CAC/E,OACE,oBAAC,MAAD;EAAI,aAAU;EAAY,WAAW,GAAG,+EAA+E,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnJ;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAwC;CAChF,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,gHAAgH,SAAS;EACvI,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAwC;CAChF,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAa,WAAW,GAAG,oEAAoE,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC9I;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA6C;CACxF,OAAO,oBAAC,WAAD;EAAS,aAAU;EAAgB,WAAW,GAAG,sCAAsC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxH"}
+{"version":3,"file":"table.js","names":[],"sources":["../../../../../../../ui/src/components/ui/table/table.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport interface ITableProps extends React.ComponentProps<'table'> {\n  /**\n   * The box around the table. A table wider than it scrolls sideways inside it, in a design system ScrollArea: the bar is the\n   * kit's, not the browser's, and the room it takes at the foot is kept clear of the last row. `overflow-visible` turns that\n   * scroll off, for a table whose page or parent scrolls it, or whose sticky header would otherwise stick to this box instead\n   * of that one.\n   */\n  containerClassName?: string;\n}\n\n/** `overflow-visible` (or its sideways form) among the classes: how a table has always switched its own scrolling off. */\nconst SCROLL_OFF = /(?:^|\\s)overflow-(?:x-)?visible(?:\\s|$)/;\n\nexport const Table = ({ className, containerClassName, ...props }: ITableProps) => {\n  const table = <table data-slot=\"table\" className={cn('w-full caption-bottom text-sm', className)} {...props} />;\n  return (\n    <div data-slot=\"table-container\" data-focus=\"inset\" className={cn('relative w-full', containerClassName)}>\n      {SCROLL_OFF.test(containerClassName ?? '') ? (\n        table\n      ) : (\n        // The bar stays on while the table overflows, as in the popup lists: scrolling a table sideways is otherwise\n        // something a person finds out by accident.\n        <ScrollArea orientation=\"horizontal\" type=\"always\">\n          {table}\n        </ScrollArea>\n      )}\n    </div>\n  );\n};\n\n/**\n * The header row names the columns, it is not a row to point at: TableRow's hover fill would make it light up like the data\n * under it, and read as clickable. The rule sits here, one level above the row, so it holds for any row put in a header and\n * outranks the row's own hover fill.\n */\nexport const TableHeader = ({ className, ...props }: React.ComponentProps<'thead'>) => {\n  return <thead data-slot=\"table-header\" className={cn('[&_tr]:border-b [&_tr]:hover:bg-transparent', className)} {...props} />;\n};\n\nexport const TableBody = ({ className, ...props }: React.ComponentProps<'tbody'>) => {\n  return <tbody data-slot=\"table-body\" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;\n};\n\nexport const TableFooter = ({ className, ...props }: React.ComponentProps<'tfoot'>) => {\n  return <tfoot data-slot=\"table-footer\" className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)} {...props} />;\n};\n\nexport const TableRow = ({ className, ...props }: React.ComponentProps<'tr'>) => {\n  return (\n    <tr data-slot=\"table-row\" className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)} {...props} />\n  );\n};\n\nexport const TableHead = ({ className, ...props }: React.ComponentProps<'th'>) => {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn('h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0', className)}\n      {...props}\n    />\n  );\n};\n\nexport const TableCell = ({ className, ...props }: React.ComponentProps<'td'>) => {\n  return <td data-slot=\"table-cell\" className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)} {...props} />;\n};\n\nexport const TableCaption = ({ className, ...props }: React.ComponentProps<'caption'>) => {\n  return <caption data-slot=\"table-caption\" className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;;;AAeA,IAAM,aAAa;AAEnB,IAAa,SAAS,EAAE,WAAW,oBAAoB,GAAG,YAAyB;CACjF,MAAM,QAAQ,oBAAC,SAAD;EAAO,aAAU;EAAQ,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;CAC9G,OACE,oBAAC,OAAD;EAAK,aAAU;EAAkB,cAAW;EAAQ,WAAW,GAAG,mBAAmB,kBAAkB;EACpG,UAAA,WAAW,KAAK,sBAAsB,EAAE,IACvC,QAIA,oBAAC,YAAD;GAAY,aAAY;GAAa,MAAK;GACvC,UAAA;EACS,CAAA;CAEX,CAAA;AAET;;;;;;AAOA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA2C;CACrF,OAAO,oBAAC,SAAD;EAAO,aAAU;EAAe,WAAW,GAAG,+CAA+C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC9H;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAA2C;CACnF,OAAO,oBAAC,SAAD;EAAO,aAAU;EAAa,WAAW,GAAG,8BAA8B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC3G;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA2C;CACrF,OAAO,oBAAC,SAAD;EAAO,aAAU;EAAe,WAAW,GAAG,2DAA2D,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1I;AAEA,IAAa,YAAY,EAAE,WAAW,GAAG,YAAwC;CAC/E,OACE,oBAAC,MAAD;EAAI,aAAU;EAAY,WAAW,GAAG,+EAA+E,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnJ;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAwC;CAChF,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,gHAAgH,SAAS;EACvI,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAwC;CAChF,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAa,WAAW,GAAG,oEAAoE,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC9I;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAA6C;CACxF,OAAO,oBAAC,WAAD;EAAS,aAAU;EAAgB,WAAW,GAAG,sCAAsC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxH"}

package/dist/ui/src/index.d.ts

@@ -72,4 +72,5 @@ export * from './components/ui/tooltip';
 export * from './hooks/use-media-player';
 export * from './hooks/use-merged-refs';
 export * from './hooks/use-mobile';
+export { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass, type TPopupItemFlavor, } from './lib/popup-list';
 export { cn } from './lib/utils';

package/dist/ui/src/lib/popup-list.d.ts

@@ -46,8 +46,33 @@ export declare const POPUP_ITEM_INDICATOR_CLASS = "pointer-events-none absolute
 /** A group's heading in any of these lists. */
 export declare const POPUP_GROUP_LABEL_CLASS = "px-2 py-1.5 text-xs font-medium text-muted-foreground";
 /**
- * How wide a combobox's list is: never narrower than the control it opens from, and as wide as its longest option up to
- * 28rem or what the window leaves from the control's start (the list is aligned to that start), whichever is less. A
- * control wider than that cap keeps its own width. Longer options are cut by their item, they do not widen the list.
+ * The frame of every popup that holds a list: Select, Combobox, MultiSelect and the menus. One radius, and one outline, the
+ * 1px ring of the text colour at 10% that the menus, Popover and the dialogs already wear. It is a ring and not a border so
+ * the frame takes no room: the popup is exactly as tall as its rows, which is what lets a list end on a whole row (see
+ * POPUP_LIST_HEIGHT_CLASS). Select used to draw a 14px border, Combobox a 10px one, and the menus a ring.
+ *
+ * `outline-none` is the popup's own focus outline, switched off: a popup is a container, and the highlighted row is where
+ * focus is shown.
+ */
+export declare const POPUP_FRAME_CLASS = "rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none";
+/**
+ * How wide a popup is, for every popup alike: never narrower than the control it opens from (and never under 8rem, for a
+ * control that is only an icon), as wide as its longest row up to 28rem or what the window leaves from the control's start
+ * (the popup is aligned to that start), whichever is less. A control wider than that cap keeps its own width. Longer rows
+ * are cut by their item, they do not widen the popup.
+ *
+ * The popups used to disagree: the menus were the control's width, MultiSelect at least 16rem and at most 24rem, Combobox
+ * followed the control, and an app's command palette in a popover was 18rem whatever it held.
+ */
+export declare const POPUP_LIST_WIDTH_CLASS = "w-max min-w-[max(8rem,var(--anchor-width))] max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]";
+/**
+ * How tall the scrolling part of a popup grows, so that it ends on a whole row. The list scrolls inside its popup and shows
+ * at most eight rows (the 2rem each of popupItemClass, and the 0.5rem of padding the list holds above and below them), or
+ * as many whole rows as the room the positioner measured allows, whichever is less. `round(down, ...)` is what makes the
+ * second case end on a row too: a bare `max-h-(--available-height)` ends wherever the window ends, which cut a row in half
+ * at the foot of a short window, and a fixed `max-h-60` cut the eighth row of a long list.
+ *
+ * It goes on the ScrollArea, which must hold the list's own 0.25rem of padding inside it (the viewport scrolls it with the
+ * rows) and sit in a popup that is a flex column.
  */
-export declare const POPUP_LIST_WIDTH_CLASS = "min-w-(--anchor-width) max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]";
+export declare const POPUP_LIST_HEIGHT_CLASS = "min-h-0 max-h-[min(16.5rem,round(down,var(--available-height,100dvh)_-_0.5rem,2rem)_+_0.5rem)]";

package/dist/ui/src/lib/popup-list.js

@@ -15,12 +15,37 @@ var POPUP_ITEM_INDICATOR_CLASS = "pointer-events-none absolute right-2 flex size
 /** A group's heading in any of these lists. */
 var POPUP_GROUP_LABEL_CLASS = "px-2 py-1.5 text-xs font-medium text-muted-foreground";
 /**
-* How wide a combobox's list is: never narrower than the control it opens from, and as wide as its longest option up to
-* 28rem or what the window leaves from the control's start (the list is aligned to that start), whichever is less. A
-* control wider than that cap keeps its own width. Longer options are cut by their item, they do not widen the list.
+* The frame of every popup that holds a list: Select, Combobox, MultiSelect and the menus. One radius, and one outline, the
+* 1px ring of the text colour at 10% that the menus, Popover and the dialogs already wear. It is a ring and not a border so
+* the frame takes no room: the popup is exactly as tall as its rows, which is what lets a list end on a whole row (see
+* POPUP_LIST_HEIGHT_CLASS). Select used to draw a 14px border, Combobox a 10px one, and the menus a ring.
+*
+* `outline-none` is the popup's own focus outline, switched off: a popup is a container, and the highlighted row is where
+* focus is shown.
 */
-var POPUP_LIST_WIDTH_CLASS = "min-w-(--anchor-width) max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]";
+var POPUP_FRAME_CLASS = "rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none";
+/**
+* How wide a popup is, for every popup alike: never narrower than the control it opens from (and never under 8rem, for a
+* control that is only an icon), as wide as its longest row up to 28rem or what the window leaves from the control's start
+* (the popup is aligned to that start), whichever is less. A control wider than that cap keeps its own width. Longer rows
+* are cut by their item, they do not widen the popup.
+*
+* The popups used to disagree: the menus were the control's width, MultiSelect at least 16rem and at most 24rem, Combobox
+* followed the control, and an app's command palette in a popover was 18rem whatever it held.
+*/
+var POPUP_LIST_WIDTH_CLASS = "w-max min-w-[max(8rem,var(--anchor-width))] max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]";
+/**
+* How tall the scrolling part of a popup grows, so that it ends on a whole row. The list scrolls inside its popup and shows
+* at most eight rows (the 2rem each of popupItemClass, and the 0.5rem of padding the list holds above and below them), or
+* as many whole rows as the room the positioner measured allows, whichever is less. `round(down, ...)` is what makes the
+* second case end on a row too: a bare `max-h-(--available-height)` ends wherever the window ends, which cut a row in half
+* at the foot of a short window, and a fixed `max-h-60` cut the eighth row of a long list.
+*
+* It goes on the ScrollArea, which must hold the list's own 0.25rem of padding inside it (the viewport scrolls it with the
+* rows) and sit in a popup that is a flex column.
+*/
+var POPUP_LIST_HEIGHT_CLASS = "min-h-0 max-h-[min(16.5rem,round(down,var(--available-height,100dvh)_-_0.5rem,2rem)_+_0.5rem)]";
 //#endregion
-export { POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass };
+export { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass };
 
 //# sourceMappingURL=popup-list.js.map

package/dist/ui/src/lib/popup-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"popup-list.js","names":[],"sources":["../../../../../ui/src/lib/popup-list.ts"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\n\n/**\n * The one look for a list in a popup or a menu: the command palette, Select,\n * Combobox, MultiSelect and the dropdown menus.\n *\n * These lists used to disagree with each other in every detail that shows:\n * three different radii, two different paddings, a grey fill for the highlight\n * in one and the accent in another, and the chosen item marked by a check on\n * the left in Select and on the right in the menus. Picking something from one\n * list then felt like a different product from picking something in the next.\n *\n * It lives here as classes rather than as a stylesheet so a caller's own\n * className still wins: an unlayered rule would beat every utility, including\n * the one someone passes for a single list.\n *\n * ONE ITEM: transparent at rest, 32px tall, 6px radius (--radius-sm), 6px by\n * 8px of padding, text-sm, its own icons 16px and muted. Under the pointer or\n * the keyboard it takes one translucent fill of the text colour, and its icons\n * the text colour. Chosen is medium weight with a check at the END, never a\n * fill, so \"where I am\" and \"what I picked\" can be told apart at a glance.\n */\n\n/**\n * Which primitive renders the item, because the two disagree about the same\n * attribute names in a way that silently breaks the styling:\n *\n * - cmdk writes `data-selected=\"false\"` and `data-disabled=\"false\"` on items\n *   that are neither, so a bare `data-selected:` variant matches EVERY item and\n *   highlights the whole list. Its states have to be matched by value.\n * - Base UI omits the attribute instead, so presence is the test there. That\n *   needs the BRACKET form for `selected`: shadcn redefines the bare\n *   `data-selected:` variant to match only data-selected=\"true\" (for the\n *   calendar), and Base UI writes it as an empty string, so the bare form\n *   compiles and silently never applies. `highlighted` and `disabled` have no\n *   such override, so those stay bare.\n * - And the same name means different things: cmdk's `data-selected` is the\n *   keyboard cursor, Base UI's is the chosen value. In cmdk the chosen state is\n *   `data-checked`, which the DS's own CommandItem sets.\n */\nexport type TPopupItemFlavor = 'base-ui' | 'cmdk';\n\nconst ITEM_BASE =\n  \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none select-none [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg:not([class*='size-'])]:size-4\";\n\nconst ITEM_STATES: Record<TPopupItemFlavor, string> = {\n  'base-ui':\n    'data-highlighted:bg-foreground/6 data-highlighted:[&>svg]:text-foreground data-[selected]:font-medium data-disabled:pointer-events-none data-disabled:opacity-50',\n  cmdk: 'data-[selected=true]:bg-foreground/6 data-[selected=true]:[&>svg]:text-foreground data-[checked=true]:font-medium data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n};\n\n/** The shared item look. `checkable` leaves room at the end for the check. */\nexport const popupItemClass = (flavor: TPopupItemFlavor = 'base-ui', checkable = false): string =>\n  cn(ITEM_BASE, ITEM_STATES[flavor], checkable && 'pr-8');\n\n/**\n * The check's slot, at the end of the item and the same size whether or not the\n * check is in it, so a list does not shift as the choice moves.\n */\nexport const POPUP_ITEM_INDICATOR_CLASS = 'pointer-events-none absolute right-2 flex size-4 items-center justify-center text-foreground';\n\n/** A group's heading in any of these lists. */\nexport const POPUP_GROUP_LABEL_CLASS = 'px-2 py-1.5 text-xs font-medium text-muted-foreground';\n\n/**\n * How wide a combobox's list is: never narrower than the control it opens from, and as wide as its longest option up to\n * 28rem or what the window leaves from the control's start (the list is aligned to that start), whichever is less. A\n * control wider than that cap keeps its own width. Longer options are cut by their item, they do not widen the list.\n */\nexport const POPUP_LIST_WIDTH_CLASS = 'min-w-(--anchor-width) max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]';\n"],"mappings":";;AA0CA,IAAM,YACJ;AAEF,IAAM,cAAgD;CACpD,WACE;CACF,MAAM;AACR;;AAGA,IAAa,kBAAkB,SAA2B,WAAW,YAAY,UAC/E,GAAG,WAAW,YAAY,SAAS,aAAa,MAAM;;;;;AAMxD,IAAa,6BAA6B;;AAG1C,IAAa,0BAA0B;;;;;;AAOvC,IAAa,yBAAyB"}
+{"version":3,"file":"popup-list.js","names":[],"sources":["../../../../../ui/src/lib/popup-list.ts"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\n\n/**\n * The one look for a list in a popup or a menu: the command palette, Select,\n * Combobox, MultiSelect and the dropdown menus.\n *\n * These lists used to disagree with each other in every detail that shows:\n * three different radii, two different paddings, a grey fill for the highlight\n * in one and the accent in another, and the chosen item marked by a check on\n * the left in Select and on the right in the menus. Picking something from one\n * list then felt like a different product from picking something in the next.\n *\n * It lives here as classes rather than as a stylesheet so a caller's own\n * className still wins: an unlayered rule would beat every utility, including\n * the one someone passes for a single list.\n *\n * ONE ITEM: transparent at rest, 32px tall, 6px radius (--radius-sm), 6px by\n * 8px of padding, text-sm, its own icons 16px and muted. Under the pointer or\n * the keyboard it takes one translucent fill of the text colour, and its icons\n * the text colour. Chosen is medium weight with a check at the END, never a\n * fill, so \"where I am\" and \"what I picked\" can be told apart at a glance.\n */\n\n/**\n * Which primitive renders the item, because the two disagree about the same\n * attribute names in a way that silently breaks the styling:\n *\n * - cmdk writes `data-selected=\"false\"` and `data-disabled=\"false\"` on items\n *   that are neither, so a bare `data-selected:` variant matches EVERY item and\n *   highlights the whole list. Its states have to be matched by value.\n * - Base UI omits the attribute instead, so presence is the test there. That\n *   needs the BRACKET form for `selected`: shadcn redefines the bare\n *   `data-selected:` variant to match only data-selected=\"true\" (for the\n *   calendar), and Base UI writes it as an empty string, so the bare form\n *   compiles and silently never applies. `highlighted` and `disabled` have no\n *   such override, so those stay bare.\n * - And the same name means different things: cmdk's `data-selected` is the\n *   keyboard cursor, Base UI's is the chosen value. In cmdk the chosen state is\n *   `data-checked`, which the DS's own CommandItem sets.\n */\nexport type TPopupItemFlavor = 'base-ui' | 'cmdk';\n\nconst ITEM_BASE =\n  \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none select-none [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg:not([class*='size-'])]:size-4\";\n\nconst ITEM_STATES: Record<TPopupItemFlavor, string> = {\n  'base-ui':\n    'data-highlighted:bg-foreground/6 data-highlighted:[&>svg]:text-foreground data-[selected]:font-medium data-disabled:pointer-events-none data-disabled:opacity-50',\n  cmdk: 'data-[selected=true]:bg-foreground/6 data-[selected=true]:[&>svg]:text-foreground data-[checked=true]:font-medium data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n};\n\n/** The shared item look. `checkable` leaves room at the end for the check. */\nexport const popupItemClass = (flavor: TPopupItemFlavor = 'base-ui', checkable = false): string =>\n  cn(ITEM_BASE, ITEM_STATES[flavor], checkable && 'pr-8');\n\n/**\n * The check's slot, at the end of the item and the same size whether or not the\n * check is in it, so a list does not shift as the choice moves.\n */\nexport const POPUP_ITEM_INDICATOR_CLASS = 'pointer-events-none absolute right-2 flex size-4 items-center justify-center text-foreground';\n\n/** A group's heading in any of these lists. */\nexport const POPUP_GROUP_LABEL_CLASS = 'px-2 py-1.5 text-xs font-medium text-muted-foreground';\n\n/**\n * The frame of every popup that holds a list: Select, Combobox, MultiSelect and the menus. One radius, and one outline, the\n * 1px ring of the text colour at 10% that the menus, Popover and the dialogs already wear. It is a ring and not a border so\n * the frame takes no room: the popup is exactly as tall as its rows, which is what lets a list end on a whole row (see\n * POPUP_LIST_HEIGHT_CLASS). Select used to draw a 14px border, Combobox a 10px one, and the menus a ring.\n *\n * `outline-none` is the popup's own focus outline, switched off: a popup is a container, and the highlighted row is where\n * focus is shown.\n */\nexport const POPUP_FRAME_CLASS = 'rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none';\n\n/**\n * How wide a popup is, for every popup alike: never narrower than the control it opens from (and never under 8rem, for a\n * control that is only an icon), as wide as its longest row up to 28rem or what the window leaves from the control's start\n * (the popup is aligned to that start), whichever is less. A control wider than that cap keeps its own width. Longer rows\n * are cut by their item, they do not widen the popup.\n *\n * The popups used to disagree: the menus were the control's width, MultiSelect at least 16rem and at most 24rem, Combobox\n * followed the control, and an app's command palette in a popover was 18rem whatever it held.\n */\nexport const POPUP_LIST_WIDTH_CLASS =\n  'w-max min-w-[max(8rem,var(--anchor-width))] max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]';\n\n/**\n * How tall the scrolling part of a popup grows, so that it ends on a whole row. The list scrolls inside its popup and shows\n * at most eight rows (the 2rem each of popupItemClass, and the 0.5rem of padding the list holds above and below them), or\n * as many whole rows as the room the positioner measured allows, whichever is less. `round(down, ...)` is what makes the\n * second case end on a row too: a bare `max-h-(--available-height)` ends wherever the window ends, which cut a row in half\n * at the foot of a short window, and a fixed `max-h-60` cut the eighth row of a long list.\n *\n * It goes on the ScrollArea, which must hold the list's own 0.25rem of padding inside it (the viewport scrolls it with the\n * rows) and sit in a popup that is a flex column.\n */\nexport const POPUP_LIST_HEIGHT_CLASS = 'min-h-0 max-h-[min(16.5rem,round(down,var(--available-height,100dvh)_-_0.5rem,2rem)_+_0.5rem)]';\n"],"mappings":";;AA0CA,IAAM,YACJ;AAEF,IAAM,cAAgD;CACpD,WACE;CACF,MAAM;AACR;;AAGA,IAAa,kBAAkB,SAA2B,WAAW,YAAY,UAC/E,GAAG,WAAW,YAAY,SAAS,aAAa,MAAM;;;;;AAMxD,IAAa,6BAA6B;;AAG1C,IAAa,0BAA0B;;;;;;;;;;AAWvC,IAAa,oBAAoB;;;;;;;;;;AAWjC,IAAa,yBACX;;;;;;;;;;;AAYF,IAAa,0BAA0B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.1-rc.16",
+  "version": "0.0.1-rc.18",
   "description": "The eDynamix design system: React components and design tokens.",
   "license": "Apache-2.0",
   "keywords": [
@@ -31,6 +31,14 @@
       "types": "./dist/ds/src/date-picker.d.ts",
       "default": "./dist/date-picker.js"
     },
+    "./time-field": {
+      "types": "./dist/ds/src/time-field.d.ts",
+      "default": "./dist/time-field.js"
+    },
+    "./file-input": {
+      "types": "./dist/ds/src/file-input.d.ts",
+      "default": "./dist/file-input.js"
+    },
     "./rich-text-editor": {
       "types": "./dist/ds/src/rich-text-editor.d.ts",
       "default": "./dist/rich-text-editor.js"