@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.22

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

@@ -0,0 +1,171 @@
+"use client";
+import { cn } from "../../../lib/utils.js";
+import { buttonVariants } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck } from "@tabler/icons-react";
+import { Questionnaire } from "@shadcn/react/questionnaire";
+//#region ../ui/src/components/ui/questionnaire/questionnaire.tsx
+var Questionnaire$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Questionnaire.Root, {
+		"data-slot": "questionnaire",
+		className: cn("flex w-full min-w-0 flex-col gap-4", className),
+		...props
+	});
+};
+var QuestionnaireProgress = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Questionnaire.Progress, {
+		"data-slot": "questionnaire-progress",
+		className: cn("min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium text-muted-foreground tabular-nums", className),
+		...props
+	});
+};
+var QuestionnaireItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Questionnaire.Item, {
+		"data-slot": "questionnaire-item",
+		className: cn("flex min-w-0 flex-col gap-4 border-0 p-0 outline-none", className),
+		...props
+	});
+};
+var QuestionnaireTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Questionnaire.Title, {
+		"data-slot": "questionnaire-title",
+		className: cn("font-heading text-base leading-snug font-medium text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4", className),
+		...props
+	});
+};
+var QuestionnaireDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Questionnaire.Description, {
+		"data-slot": "questionnaire-description",
+		className: cn("text-sm text-pretty text-muted-foreground", className),
+		...props
+	});
+};
+var QuestionnaireChoices = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Questionnaire.Choices, {
+		"data-slot": "questionnaire-choices",
+		className: cn("group/questionnaire-choices grid min-w-0 gap-2", className),
+		...props
+	});
+};
+var QuestionnaireChoice = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsxs(Questionnaire.Choice, {
+		"data-slot": "questionnaire-choice",
+		className: cn("group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-2.5 rounded-lg border border-control bg-transparent px-3 py-2.5 text-start text-sm transition-colors outline-none select-none hover:bg-muted/50 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-ring/50 data-invalid:border-destructive dark:bg-input/20 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Questionnaire.ChoiceInput, {
+				"data-slot": "questionnaire-choice-input",
+				className: "absolute inset-0 z-10 size-full cursor-pointer opacity-0"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				"data-slot": "questionnaire-choice-indicator",
+				className: "pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[4px] border border-control group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "questionnaire-choice-indicator-dot",
+					className: "hidden size-2 rounded-full bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+				}), /* @__PURE__ */ jsx(IconCheck, {
+					"data-slot": "questionnaire-choice-indicator-check",
+					className: "hidden size-3.5 group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Questionnaire.ChoiceLabel, {
+				"data-slot": "questionnaire-choice-label",
+				className: "flex min-w-0 flex-1 flex-col gap-0.5 leading-snug",
+				children
+			}),
+			/* @__PURE__ */ jsx(Questionnaire.ChoiceShortcut, {
+				"data-slot": "questionnaire-choice-shortcut",
+				className: "pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-md border border-control bg-background font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
+			})
+		]
+	});
+};
+var QuestionnaireChoiceDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "questionnaire-choice-description",
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+};
+var QuestionnaireInput = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "questionnaire-input-wrapper",
+		className: "group/questionnaire-input relative w-full min-w-0",
+		children: /* @__PURE__ */ jsx(Questionnaire.Input, {
+			"data-slot": "questionnaire-input",
+			className: cn("h-8 min-h-11 w-full min-w-0 rounded-lg border border-control bg-transparent px-2.5 py-1 text-base transition-[color,box-shadow,background-color] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground", className),
+			...props
+		})
+	});
+};
+var QuestionnaireError = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Questionnaire.Error, {
+		"data-slot": "questionnaire-error",
+		className: cn("mt-2 text-sm text-destructive", className),
+		...props
+	});
+};
+var QuestionnaireActions = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "questionnaire-actions",
+		className: cn("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-8", className),
+		...props
+	});
+};
+var QuestionnairePrevious = ({ children, className, size = "default", variant = "outline", ...props }) => {
+	return /* @__PURE__ */ jsx(Questionnaire.Previous, {
+		"data-slot": "questionnaire-previous",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0", className),
+		...props,
+		children: children ?? "Previous"
+	});
+};
+var QuestionnaireSkip = ({ children, className, size = "default", variant = "outline", ...props }) => {
+	return /* @__PURE__ */ jsx(Questionnaire.Skip, {
+		"data-slot": "questionnaire-skip",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0", className),
+		...props,
+		children: children ?? "Skip"
+	});
+};
+var QuestionnaireNext = ({ children, className, size = "default", variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Questionnaire.Next, {
+		"data-slot": "questionnaire-next",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0", className),
+		...props,
+		children: children ?? "Next"
+	});
+};
+var QuestionnaireSubmit = ({ children, className, size = "default", variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Questionnaire.Submit, {
+		"data-slot": "questionnaire-submit",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0", className),
+		...props,
+		children: children ?? "Submit"
+	});
+};
+//#endregion
+export { Questionnaire$1 as Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle };
+
+//# sourceMappingURL=questionnaire.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"questionnaire.js","names":[],"sources":["../../../../../../../ui/src/components/ui/questionnaire/questionnaire.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@edyn/ui/lib/utils';\nimport { Questionnaire as QuestionnairePrimitive } from '@shadcn/react/questionnaire';\nimport { IconCheck } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { type Button, buttonVariants } from '../button';\n\nexport const Questionnaire = ({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Root>) => {\n  return <QuestionnairePrimitive.Root data-slot=\"questionnaire\" className={cn('flex w-full min-w-0 flex-col gap-4', className)} {...props} />;\n};\n\nexport const QuestionnaireProgress = ({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Progress>) => {\n  return (\n    <QuestionnairePrimitive.Progress\n      data-slot=\"questionnaire-progress\"\n      className={cn('min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium text-muted-foreground tabular-nums', className)}\n      {...props}\n    />\n  );\n};\n\nexport const QuestionnaireItem = ({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Item>) => {\n  return (\n    <QuestionnairePrimitive.Item\n      data-slot=\"questionnaire-item\"\n      className={cn('flex min-w-0 flex-col gap-4 border-0 p-0 outline-none', className)}\n      {...props}\n    />\n  );\n};\n\nexport const QuestionnaireTitle = ({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Title>) => {\n  return (\n    <QuestionnairePrimitive.Title\n      data-slot=\"questionnaire-title\"\n      className={cn(\n        'font-heading text-base leading-snug font-medium text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const QuestionnaireDescription = ({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Description>) => {\n  return (\n    <QuestionnairePrimitive.Description\n      data-slot=\"questionnaire-description\"\n      className={cn('text-sm text-pretty text-muted-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const QuestionnaireChoices = ({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Choices>) => {\n  return (\n    <QuestionnairePrimitive.Choices\n      data-slot=\"questionnaire-choices\"\n      className={cn('group/questionnaire-choices grid min-w-0 gap-2', className)}\n      {...props}\n    />\n  );\n};\n\nexport const QuestionnaireChoice = ({ children, className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Choice>) => {\n  return (\n    <QuestionnairePrimitive.Choice\n      data-slot=\"questionnaire-choice\"\n      className={cn(\n        'group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-2.5 rounded-lg border border-control bg-transparent px-3 py-2.5 text-start text-sm transition-colors outline-none select-none hover:bg-muted/50 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-ring/50 data-invalid:border-destructive dark:bg-input/20 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted',\n        'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      <QuestionnairePrimitive.ChoiceInput\n        data-slot=\"questionnaire-choice-input\"\n        className=\"absolute inset-0 z-10 size-full cursor-pointer opacity-0\"\n      />\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"questionnaire-choice-indicator\"\n        className=\"pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[4px] border border-control group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary\"\n      >\n        <span\n          data-slot=\"questionnaire-choice-indicator-dot\"\n          className=\"hidden size-2 rounded-full bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block\"\n        />\n        <IconCheck\n          data-slot=\"questionnaire-choice-indicator-check\"\n          className=\"hidden size-3.5 group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block\"\n        />\n      </span>\n      <QuestionnairePrimitive.ChoiceLabel data-slot=\"questionnaire-choice-label\" className=\"flex min-w-0 flex-1 flex-col gap-0.5 leading-snug\">\n        {children}\n      </QuestionnairePrimitive.ChoiceLabel>\n      <QuestionnairePrimitive.ChoiceShortcut\n        data-slot=\"questionnaire-choice-shortcut\"\n        className=\"pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-md border border-control bg-background font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex\"\n      />\n    </QuestionnairePrimitive.Choice>\n  );\n};\n\nexport const QuestionnaireChoiceDescription = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return <span data-slot=\"questionnaire-choice-description\" className={cn('text-muted-foreground', className)} {...props} />;\n};\n\nexport const QuestionnaireInput = ({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Input>) => {\n  return (\n    <div data-slot=\"questionnaire-input-wrapper\" className=\"group/questionnaire-input relative w-full min-w-0\">\n      <QuestionnairePrimitive.Input\n        data-slot=\"questionnaire-input\"\n        className={cn(\n          'h-8 min-h-11 w-full min-w-0 rounded-lg border border-control bg-transparent px-2.5 py-1 text-base transition-[color,box-shadow,background-color] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n          'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n};\n\nexport const QuestionnaireError = ({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Error>) => {\n  return <QuestionnairePrimitive.Error data-slot=\"questionnaire-error\" className={cn('mt-2 text-sm text-destructive', className)} {...props} />;\n};\n\nexport const QuestionnaireActions = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"questionnaire-actions\"\n      className={cn('grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-8', className)}\n      {...props}\n    />\n  );\n};\n\nexport const QuestionnairePrevious = ({\n  children,\n  className,\n  size = 'default',\n  variant = 'outline',\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Previous> & Pick<React.ComponentProps<typeof Button>, 'size' | 'variant'>) => {\n  return (\n    <QuestionnairePrimitive.Previous\n      data-slot=\"questionnaire-previous\"\n      data-size={size}\n      data-variant={variant}\n      className={cn(buttonVariants({ size, variant }), 'col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0', className)}\n      {...props}\n    >\n      {children ?? 'Previous'}\n    </QuestionnairePrimitive.Previous>\n  );\n};\n\nexport const QuestionnaireSkip = ({\n  children,\n  className,\n  size = 'default',\n  variant = 'outline',\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Skip> & Pick<React.ComponentProps<typeof Button>, 'size' | 'variant'>) => {\n  return (\n    <QuestionnairePrimitive.Skip\n      data-slot=\"questionnaire-skip\"\n      data-size={size}\n      data-variant={variant}\n      className={cn(buttonVariants({ size, variant }), 'col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0', className)}\n      {...props}\n    >\n      {children ?? 'Skip'}\n    </QuestionnairePrimitive.Skip>\n  );\n};\n\nexport const QuestionnaireNext = ({\n  children,\n  className,\n  size = 'default',\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Next> & Pick<React.ComponentProps<typeof Button>, 'size' | 'variant'>) => {\n  return (\n    <QuestionnairePrimitive.Next\n      data-slot=\"questionnaire-next\"\n      data-size={size}\n      data-variant={variant}\n      className={cn(buttonVariants({ size, variant }), 'col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0', className)}\n      {...props}\n    >\n      {children ?? 'Next'}\n    </QuestionnairePrimitive.Next>\n  );\n};\n\nexport const QuestionnaireSubmit = ({\n  children,\n  className,\n  size = 'default',\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Submit> & Pick<React.ComponentProps<typeof Button>, 'size' | 'variant'>) => {\n  return (\n    <QuestionnairePrimitive.Submit\n      data-slot=\"questionnaire-submit\"\n      data-size={size}\n      data-variant={variant}\n      className={cn(buttonVariants({ size, variant }), 'col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0', className)}\n      {...props}\n    >\n      {children ?? 'Submit'}\n    </QuestionnairePrimitive.Submit>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/ui/radio-group/radio-group.js

@@ -0,0 +1,29 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region ../ui/src/components/ui/radio-group/radio-group.tsx
+var RadioGroup$1 = ({ className, orientation = "vertical", ...props }) => {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		"data-slot": "radio-group",
+		"data-orientation": orientation,
+		"aria-orientation": orientation,
+		className: cn("grid w-full gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:items-center", className),
+		...props
+	});
+};
+var RadioGroupItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		"data-slot": "radio-group-item",
+		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-full border border-control transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Radio.Indicator, {
+			"data-slot": "radio-group-item-indicator",
+			className: "flex size-2 shrink-0 rounded-full bg-primary transition-none"
+		})
+	});
+};
+//#endregion
+export { RadioGroup$1 as RadioGroup, RadioGroupItem };
+
+//# sourceMappingURL=radio-group.js.map

package/dist/ui/src/components/ui/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":[],"sources":["../../../../../../../ui/src/components/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { Radio } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\n\nimport { cn } from '@edyn/ui/lib/utils';\n\nexport interface IRadioGroupProps extends RadioGroupPrimitive.Props {\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const RadioGroup = ({ className, orientation = 'vertical', ...props }: IRadioGroupProps) => {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-orientation={orientation}\n      aria-orientation={orientation}\n      className={cn('grid w-full gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:items-center', className)}\n      {...props}\n    />\n  );\n};\n\nexport interface IRadioGroupItemProps extends Radio.Root.Props {\n  className?: string;\n}\n\nexport const RadioGroupItem = ({ className, ...props }: IRadioGroupItemProps) => {\n  return (\n    <Radio.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        'peer relative flex size-4 shrink-0 items-center justify-center rounded-full border border-control transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',\n        className,\n      )}\n      {...props}\n    >\n      <Radio.Indicator data-slot=\"radio-group-item-indicator\" className=\"flex size-2 shrink-0 rounded-full bg-primary transition-none\" />\n    </Radio.Root>\n  );\n};\n"],"mappings":";;;;;AASA,IAAa,gBAAc,EAAE,WAAW,cAAc,YAAY,GAAG,YAA8B;CACjG,OACE,oBAAC,YAAD;EACE,aAAU;EACV,oBAAkB;EAClB,oBAAkB;EAClB,WAAW,GAAG,mGAAmG,SAAS;EAC1H,GAAI;CACL,CAAA;AAEL;AAMA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAkC;CAC/E,OACE,oBAAC,MAAM,MAAP;EACE,aAAU;EACV,WAAW,GACT,2XACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,MAAM,WAAP;GAAiB,aAAU;GAA6B,WAAU;EAAgE,CAAA;CACxH,CAAA;AAEhB"}

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

@@ -0,0 +1,29 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import * as ResizablePrimitive from "react-resizable-panels";
+//#region ../ui/src/components/ui/resizable/resizable.tsx
+var ResizablePanelGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Group, {
+		"data-slot": "resizable-panel-group",
+		className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className),
+		...props
+	});
+};
+var ResizablePanel = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, {
+		"data-slot": "resizable-panel",
+		...props
+	});
+};
+var ResizableHandle = ({ withHandle, className, ...props }) => {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Separator, {
+		"data-slot": "resizable-handle",
+		className: cn("relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90", className),
+		...props,
+		children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" })
+	});
+};
+//#endregion
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
+
+//# sourceMappingURL=resizable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.js","names":[],"sources":["../../../../../../../ui/src/components/ui/resizable/resizable.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport * as ResizablePrimitive from 'react-resizable-panels';\n\nexport const ResizablePanelGroup = ({ className, ...props }: ResizablePrimitive.GroupProps) => {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn('flex h-full w-full aria-[orientation=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ResizablePanel = ({ ...props }: ResizablePrimitive.PanelProps) => {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />;\n};\n\nexport const ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean;\n}) => {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        'relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90',\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />}\n    </ResizablePrimitive.Separator>\n  );\n};\n"],"mappings":";;;;AAGA,IAAa,uBAAuB,EAAE,WAAW,GAAG,YAA2C;CAC7F,OACE,oBAAC,mBAAmB,OAApB;EACE,aAAU;EACV,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,kBAAkB,EAAE,GAAG,YAA2C;CAC7E,OAAO,oBAAC,mBAAmB,OAApB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,IAAa,mBAAmB,EAC9B,YACA,WACA,GAAG,YAGC;CACJ,OACE,oBAAC,mBAAmB,WAApB;EACE,aAAU;EACV,WAAW,GACT,wkBACA,SACF;EACA,GAAI;EAEH,UAAA,cAAc,oBAAC,OAAD,EAAK,WAAU,kDAAmD,CAAA;CACrD,CAAA;AAElC"}

package/dist/ui/src/components/ui/scroll-area/index.d.ts

@@ -1 +1,2 @@
+export * from './popup-list-scroll';
 export * from './scroll-area';

package/dist/ui/src/components/ui/scroll-area/popup-list-scroll.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface IPopupListScrollProps {
+    children: ReactNode;
+    className?: string;
+    /** See ScrollArea. A menu turns it off: its items are the tab stops. */
+    focusable?: boolean;
+}
+/**
+ * The scrolling part of a popup list: eight rows at most, or the whole rows the room allows. Only rows are counted; a label
+ * or separator among them adds its own height. POPUP_LIST_HEIGHT_CLASS holds the CSS cap until this has measured
+ * (`--popup-list-cap`). See docs/architecture.md.
+ */
+export declare const PopupListScroll: ({ children, className, focusable }: IPopupListScrollProps) => import('react').JSX.Element;

package/dist/ui/src/components/ui/scroll-area/popup-list-scroll.js

@@ -0,0 +1,69 @@
+import { cn } from "../../../lib/utils.js";
+import { POPUP_LIST_HEIGHT_CLASS } from "../../../lib/popup-list.js";
+import { ScrollArea } from "./scroll-area.js";
+import { useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region ../ui/src/components/ui/scroll-area/popup-list-scroll.tsx
+var ROW = "[role=\"option\"], [role^=\"menuitem\"]";
+var FULL_ROWS = 8;
+/** POPUP_LIST_HEIGHT_CLASS's margin, above and below. */
+var AIR = 8;
+/**
+* The scrolling part of a popup list: eight rows at most, or the whole rows the room allows. Only rows are counted; a label
+* or separator among them adds its own height. POPUP_LIST_HEIGHT_CLASS holds the CSS cap until this has measured
+* (`--popup-list-cap`). See docs/architecture.md.
+*/
+var PopupListScroll = ({ children, className, focusable }) => {
+	const refRoot = useRef(null);
+	const refViewport = useRef(null);
+	useLayoutEffect(() => {
+		const root = refRoot.current;
+		const content = refViewport.current?.firstElementChild;
+		if (!root || !(content instanceof HTMLElement)) return;
+		const measure = () => {
+			const box = content.getBoundingClientRect();
+			const scale = content.offsetHeight > 0 ? box.height / content.offsetHeight : 1;
+			const bottoms = [...content.querySelectorAll(ROW)].map((row) => (row.getBoundingClientRect().bottom - box.top) / scale);
+			const available = Number.parseFloat(getComputedStyle(root).getPropertyValue("--available-height"));
+			const room = Number.isFinite(available) ? available - AIR : Number.POSITIVE_INFINITY;
+			let rows = Math.min(bottoms.length, FULL_ROWS);
+			while (rows > 0 && (bottoms[rows - 1] ?? 0) > room + .5) rows -= 1;
+			const cap = bottoms.length <= FULL_ROWS && content.offsetHeight <= room + .5 ? content.offsetHeight : rows > 0 ? bottoms[rows - 1] ?? 0 : void 0;
+			if (cap === void 0) root.style.removeProperty("--popup-list-cap");
+			else root.style.setProperty("--popup-list-cap", `${Math.ceil(cap)}px`);
+		};
+		measure();
+		const resized = new ResizeObserver(measure);
+		resized.observe(content);
+		const changed = new MutationObserver(measure);
+		changed.observe(content, {
+			childList: true,
+			subtree: true
+		});
+		let positioner = root.parentElement;
+		while (positioner && positioner.style.getPropertyValue("--available-height") === "") positioner = positioner.parentElement;
+		const moved = new MutationObserver(measure);
+		if (positioner) moved.observe(positioner, {
+			attributes: true,
+			attributeFilter: ["style"]
+		});
+		return () => {
+			resized.disconnect();
+			changed.disconnect();
+			moved.disconnect();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		ref: refRoot,
+		viewportRef: refViewport,
+		type: "always",
+		fade: true,
+		focusable,
+		className: cn(POPUP_LIST_HEIGHT_CLASS, className),
+		children
+	});
+};
+//#endregion
+export { PopupListScroll };
+
+//# sourceMappingURL=popup-list-scroll.js.map

package/dist/ui/src/components/ui/scroll-area/popup-list-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-list-scroll.js","names":[],"sources":["../../../../../../../ui/src/components/ui/scroll-area/popup-list-scroll.tsx"],"sourcesContent":["import { POPUP_LIST_HEIGHT_CLASS } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { type ReactNode, useLayoutEffect, useRef } from 'react';\nimport { ScrollArea } from './scroll-area';\n\nconst ROW = '[role=\"option\"], [role^=\"menuitem\"]';\nconst FULL_ROWS = 8;\n/** POPUP_LIST_HEIGHT_CLASS's margin, above and below. */\nconst AIR = 8;\n\nexport interface IPopupListScrollProps {\n  children: ReactNode;\n  className?: string;\n  /** See ScrollArea. A menu turns it off: its items are the tab stops. */\n  focusable?: boolean;\n}\n\n/**\n * The scrolling part of a popup list: eight rows at most, or the whole rows the room allows. Only rows are counted; a label\n * or separator among them adds its own height. POPUP_LIST_HEIGHT_CLASS holds the CSS cap until this has measured\n * (`--popup-list-cap`). See docs/architecture.md.\n */\nexport const PopupListScroll = ({ children, className, focusable }: IPopupListScrollProps) => {\n  const refRoot = useRef<HTMLDivElement | null>(null);\n  const refViewport = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    const root = refRoot.current;\n    const content = refViewport.current?.firstElementChild;\n    if (!root || !(content instanceof HTMLElement)) {\n      return;\n    }\n    const measure = () => {\n      // In layout units, not the scale of the opening animation.\n      const box = content.getBoundingClientRect();\n      const scale = content.offsetHeight > 0 ? box.height / content.offsetHeight : 1;\n      const bottoms = [...content.querySelectorAll<HTMLElement>(ROW)].map((row) => (row.getBoundingClientRect().bottom - box.top) / scale);\n      const available = Number.parseFloat(getComputedStyle(root).getPropertyValue('--available-height'));\n      const room = Number.isFinite(available) ? available - AIR : Number.POSITIVE_INFINITY;\n      let rows = Math.min(bottoms.length, FULL_ROWS);\n      while (rows > 0 && (bottoms[rows - 1] ?? 0) > room + 0.5) {\n        rows -= 1;\n      }\n      const everything = bottoms.length <= FULL_ROWS && content.offsetHeight <= room + 0.5;\n      const cap = everything ? content.offsetHeight : rows > 0 ? (bottoms[rows - 1] ?? 0) : undefined;\n      if (cap === undefined) {\n        root.style.removeProperty('--popup-list-cap');\n      } else {\n        root.style.setProperty('--popup-list-cap', `${Math.ceil(cap)}px`);\n      }\n    };\n    measure();\n    const resized = new ResizeObserver(measure);\n    resized.observe(content);\n    const changed = new MutationObserver(measure);\n    changed.observe(content, { childList: true, subtree: true });\n    // The room changes as the popup is placed and as the window moves.\n    let positioner: HTMLElement | null = root.parentElement;\n    while (positioner && positioner.style.getPropertyValue('--available-height') === '') {\n      positioner = positioner.parentElement;\n    }\n    const moved = new MutationObserver(measure);\n    if (positioner) {\n      moved.observe(positioner, { attributes: true, attributeFilter: ['style'] });\n    }\n    return () => {\n      resized.disconnect();\n      changed.disconnect();\n      moved.disconnect();\n    };\n  }, []);\n\n  return (\n    <ScrollArea ref={refRoot} viewportRef={refViewport} type=\"always\" fade focusable={focusable} className={cn(POPUP_LIST_HEIGHT_CLASS, className)}>\n      {children}\n    </ScrollArea>\n  );\n};\n"],"mappings":";;;;;;AAKA,IAAM,MAAM;AACZ,IAAM,YAAY;;AAElB,IAAM,MAAM;;;;;;AAcZ,IAAa,mBAAmB,EAAE,UAAU,WAAW,gBAAuC;CAC5F,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,cAAc,OAA8B,IAAI;CAEtD,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,UAAU,YAAY,SAAS;EACrC,IAAI,CAAC,QAAQ,EAAE,mBAAmB,cAChC;EAEF,MAAM,gBAAgB;GAEpB,MAAM,MAAM,QAAQ,sBAAsB;GAC1C,MAAM,QAAQ,QAAQ,eAAe,IAAI,IAAI,SAAS,QAAQ,eAAe;GAC7E,MAAM,UAAU,CAAC,GAAG,QAAQ,iBAA8B,GAAG,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,sBAAsB,CAAC,CAAC,SAAS,IAAI,OAAO,KAAK;GACnI,MAAM,YAAY,OAAO,WAAW,iBAAiB,IAAI,CAAC,CAAC,iBAAiB,oBAAoB,CAAC;GACjG,MAAM,OAAO,OAAO,SAAS,SAAS,IAAI,YAAY,MAAM,OAAO;GACnE,IAAI,OAAO,KAAK,IAAI,QAAQ,QAAQ,SAAS;GAC7C,OAAO,OAAO,MAAM,QAAQ,OAAO,MAAM,KAAK,OAAO,IACnD,QAAQ;GAGV,MAAM,MADa,QAAQ,UAAU,aAAa,QAAQ,gBAAgB,OAAO,KACxD,QAAQ,eAAe,OAAO,IAAK,QAAQ,OAAO,MAAM,IAAK,KAAA;GACtF,IAAI,QAAQ,KAAA,GACV,KAAK,MAAM,eAAe,kBAAkB;QAE5C,KAAK,MAAM,YAAY,oBAAoB,GAAG,KAAK,KAAK,GAAG,EAAE,GAAG;EAEpE;EACA,QAAQ;EACR,MAAM,UAAU,IAAI,eAAe,OAAO;EAC1C,QAAQ,QAAQ,OAAO;EACvB,MAAM,UAAU,IAAI,iBAAiB,OAAO;EAC5C,QAAQ,QAAQ,SAAS;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;EAE3D,IAAI,aAAiC,KAAK;EAC1C,OAAO,cAAc,WAAW,MAAM,iBAAiB,oBAAoB,MAAM,IAC/E,aAAa,WAAW;EAE1B,MAAM,QAAQ,IAAI,iBAAiB,OAAO;EAC1C,IAAI,YACF,MAAM,QAAQ,YAAY;GAAE,YAAY;GAAM,iBAAiB,CAAC,OAAO;EAAE,CAAC;EAE5E,aAAa;GACX,QAAQ,WAAW;GACnB,QAAQ,WAAW;GACnB,MAAM,WAAW;EACnB;CACF,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,YAAD;EAAY,KAAK;EAAS,aAAa;EAAa,MAAK;EAAS,MAAA;EAAgB;EAAW,WAAW,GAAG,yBAAyB,SAAS;EAC1I;CACS,CAAA;AAEhB"}

package/dist/ui/src/components/ui/scroll-area/scroll-area.behavior.test.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Edge-fade wiring and the sizing contract for ScrollArea.
+ *
+ * PATH TAKEN: the fades are cut by a mask in scroll-fade.css, keyed off the
+ * overflow flags Base UI keeps on the root (data-overflow-y-start and friends).
+ * happy-dom has neither layout nor a stylesheet, so what is checked here is the
+ * contract the stylesheet reads: which axis the component declares, and that
+ * nothing of the painted version is left behind. The mask itself, and the flags
+ * flipping at the right moment, are measured in a real browser by
+ * e2e/scroll-area-fade.spec.ts.
+ */
+export {};

package/dist/ui/src/components/ui/scroll-area/scroll-area.d.ts

@@ -1,7 +1,19 @@
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
 import { ComponentProps, RefObject } from 'react';
-/** When the bar shows: 'hover' on area hover or while scrolling (default), 'scroll' only while scrolling, 'always' permanent. */
+/**
+ * When the bar shows: 'hover' on area hover or while scrolling (default),
+ * 'scroll' only while scrolling, 'always' permanent. In every mode the bar is
+ * mounted only while that axis actually overflows, so 'always' means "always
+ * when there is something to scroll", never a bar on a list that fits.
+ */
 export type TScrollbarVisibility = 'hover' | 'scroll' | 'always';
+/**
+ * Surface the edge fades blended into, back when they were painted.
+ *
+ * @deprecated The fades are cut into the content by a mask, so they match any
+ * surface without being told which one. Still accepted, and ignored.
+ */
+export type TScrollAreaFadeFrom = 'card' | 'background' | 'sidebar' | 'popover';
 export interface IScrollBarProps extends ComponentProps<typeof BaseScrollArea.Scrollbar> {
     visibility?: TScrollbarVisibility;
 }
@@ -11,11 +23,35 @@ export interface IScrollAreaProps extends ComponentProps<typeof BaseScrollArea.R
     orientation?: 'horizontal' | 'vertical' | 'both';
     /** Scrollbar reveal behavior (mirrors the Radix ScrollArea `type` prop). */
     type?: TScrollbarVisibility;
-    viewPortId?: string;
+    /** Edge fades hinting at clipped content; each one shows only while its own edge hides something. */
+    fade?: boolean;
+    /**
+     * @deprecated No longer read. The fades mask the content, so they sit correctly
+     * on any surface; passing this does nothing and is safe to delete.
+     */
+    fadeFrom?: TScrollAreaFadeFrom;
+    /** Places both bars, for a host that gives them a gutter of their own (a sidebar menu). */
+    scrollbarClassName?: string;
+    viewportId?: string;
     /** Access to the scrollable viewport (e.g. to reset scroll position on route changes). */
+    viewportRef?: RefObject<HTMLDivElement | null>;
+    viewportClassName?: string;
+    /** Published on the viewport as data-scroll-restoration-id, for a router that restores scroll position. */
+    scrollRestorationId?: string;
+    /**
+     * Whether the viewport may be a tab stop (default). It is one only while it overflows and nothing inside can take Tab
+     * (axe's scrollable-region-focusable), with a 1px keyboard-only line. Off inside a menu, whose items are the tab stops.
+     */
+    focusable?: boolean;
+    /** @deprecated Use `viewportId`. */
+    viewPortId?: string;
+    /** @deprecated Use `viewportRef`. */
     viewPortRef?: RefObject<HTMLDivElement | null>;
+    /** @deprecated Use `viewportClassName`. */
     viewPortClassName?: string;
+    /** Places the vertical bar only; `scrollbarClassName` covers both. */
     scrollVerticalClassName?: string;
+    /** Places the horizontal bar only; `scrollbarClassName` covers both. */
     scrollHorizontalClassName?: string;
 }
 /**
@@ -24,9 +60,24 @@ export interface IScrollAreaProps extends ComponentProps<typeof BaseScrollArea.R
  * rule: wide/tall content (tables, lists, code) always goes through this, never a bare
  * overflow-* utility.
  *
+ * Cap the height with a plain class on the component itself, e.g.
+ * `<ScrollArea className="max-h-88">`. The viewport picks the cap up through
+ * `max-h-inherit`, which matters because the viewport is the element that actually
+ * scrolls: a cap that lands only on the root leaves tall content spilling out
+ * underneath with no scrollbar, and that reads as a working height right up until the
+ * content outgrows it.
+ *
+ * `fade` fades out each edge that is currently hiding content, rather than always
+ * fading one: a permanent fade is a lie half the time, dimming the last row that fits
+ * and promising more below when the reader is already at the end. It is cut into the
+ * content by a mask (@edyn/theme/scroll-fade.css), so it needs no surface colour and
+ * reads correctly over a tint, a gradient or a glow. A host that keeps something
+ * unscrolled at the top, such as a sticky table header, exempts that band by setting
+ * --scroll-fade-offset on the ScrollArea. The static faded-* utilities in
+ * @edyn/theme/utilities.css are the other tool, for DECORATIVE edges that do not
+ * track scroll position.
+ *
  * The viewport publishes its size as --scroll-area-width/--scroll-area-height CSS vars
- * so children can size against the visible area. Edge fades are NOT built in; apply
- * the faded-* utilities from @edyn/theme/utilities.css on the ScrollArea (it is the
- * positioning root) where a fade is wanted.
+ * so children can size against the visible area.
  */
-export declare const ScrollArea: ({ className, children, orientation, type, viewPortId, viewPortRef, viewPortClassName, scrollVerticalClassName, scrollHorizontalClassName, ...props }: IScrollAreaProps) => import('react').JSX.Element;
+export declare const ScrollArea: ({ className, children, orientation, type, fade, fadeFrom, scrollbarClassName, viewportId, viewportRef, viewportClassName, scrollRestorationId, focusable, viewPortId, viewPortRef, viewPortClassName, scrollVerticalClassName, scrollHorizontalClassName, ...props }: IScrollAreaProps) => import('react').JSX.Element;

package/dist/ui/src/components/ui/scroll-area/scroll-area.js

@@ -0,0 +1,125 @@
+import { cn } from "../../../lib/utils.js";
+import { useHoldsFocusable } from "../../../hooks/use-holds-focusable.js";
+import { useMergedRefs } from "../../../hooks/use-merged-refs.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region ../ui/src/components/ui/scroll-area/scroll-area.tsx
+var ScrollBar = ({ className, orientation = "vertical", visibility = "hover", ...props }) => {
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		className: cn("peer/scrollbar z-100 flex touch-none select-none motion-safe:transition-opacity motion-safe:duration-150", orientation === "vertical" && "h-(--scroll-bar-length) w-(--scroll-bar-size) me-(--scroll-bar-gap) mt-(--scroll-bar-offset-top) border-l border-l-transparent p-px", orientation === "horizontal" && "h-(--scroll-bar-size) ms-(--scroll-bar-gap) me-(--scroll-bar-gap) mb-(--scroll-bar-gap) flex-col border-t border-t-transparent p-px", visibility !== "always" && "opacity-0 data-scrolling:opacity-100", visibility === "hover" && "data-hovering:opacity-100 group-hover/scroll-area:opacity-100", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-muted-foreground/50 transition-colors hover:bg-muted-foreground/70 data-scrolling:bg-muted-foreground/70" })
+	});
+};
+/**
+* Which axes fade, published for scroll-fade.css to key its mask off. The
+* stylesheet reaches this element's own viewport through a child combinator, so a
+* ScrollArea nested in another one cannot pick up its ancestor's edges.
+*/
+/** Base UI's explicit `role="presentation"` on the parts fails axe's aria-required-children inside a menu or listbox; clearing it does not. */
+var NO_ROLE = { role: void 0 };
+/** Base UI makes the viewport a tab stop (0, or -1 with nothing to scroll); undefined takes that away. */
+var NO_TAB_STOP = { tabIndex: void 0 };
+var FADE_AXIS = {
+	vertical: "block",
+	horizontal: "inline",
+	both: "both"
+};
+/**
+* Themed scroll container (Base UI): overflowing content scrolls INSIDE the component
+* with a slim overlay scrollbar instead of exposing a native browser scrollbar. House
+* rule: wide/tall content (tables, lists, code) always goes through this, never a bare
+* overflow-* utility.
+*
+* Cap the height with a plain class on the component itself, e.g.
+* `<ScrollArea className="max-h-88">`. The viewport picks the cap up through
+* `max-h-inherit`, which matters because the viewport is the element that actually
+* scrolls: a cap that lands only on the root leaves tall content spilling out
+* underneath with no scrollbar, and that reads as a working height right up until the
+* content outgrows it.
+*
+* `fade` fades out each edge that is currently hiding content, rather than always
+* fading one: a permanent fade is a lie half the time, dimming the last row that fits
+* and promising more below when the reader is already at the end. It is cut into the
+* content by a mask (@edyn/theme/scroll-fade.css), so it needs no surface colour and
+* reads correctly over a tint, a gradient or a glow. A host that keeps something
+* unscrolled at the top, such as a sticky table header, exempts that band by setting
+* --scroll-fade-offset on the ScrollArea. The static faded-* utilities in
+* @edyn/theme/utilities.css are the other tool, for DECORATIVE edges that do not
+* track scroll position.
+*
+* The viewport publishes its size as --scroll-area-width/--scroll-area-height CSS vars
+* so children can size against the visible area.
+*/
+var ScrollArea$1 = ({ className, children, orientation = "vertical", type = "hover", fade = false, fadeFrom = "card", scrollbarClassName, viewportId, viewportRef, viewportClassName, scrollRestorationId, focusable = true, viewPortId, viewPortRef, viewPortClassName, scrollVerticalClassName, scrollHorizontalClassName, ...props }) => {
+	const refInner = useRef(null);
+	const refsViewport = useMergedRefs(refInner, viewportRef ?? viewPortRef);
+	const holdsFocusable = useHoldsFocusable(refInner, focusable);
+	useEffect(() => {
+		const el = refInner.current;
+		if (!el) return;
+		const root = el.parentElement;
+		const content = el.firstElementChild;
+		const observer = new ResizeObserver(() => {
+			el.style.setProperty("--scroll-area-width", `${el.clientWidth}px`);
+			el.style.setProperty("--scroll-area-height", `${el.clientHeight}px`);
+			if (orientation !== "vertical" && root && content instanceof HTMLElement) {
+				root.removeAttribute("data-bar-over");
+				const style = getComputedStyle(root);
+				const room = root.offsetHeight - content.offsetHeight;
+				const bar = Number.parseFloat(style.getPropertyValue("--scroll-bar-size")) + Number.parseFloat(style.getPropertyValue("--scroll-bar-gap"));
+				if (root.hasAttribute("data-has-overflow-x") && room >= 0 && room < bar) root.setAttribute("data-bar-over", "");
+			}
+		});
+		observer.observe(el);
+		if (orientation !== "vertical" && root && content) {
+			observer.observe(root);
+			observer.observe(content);
+		}
+		return () => {
+			observer.disconnect();
+		};
+	}, [orientation]);
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		"data-slot": "scroll-area",
+		"data-focus": "inset",
+		className: cn("group/scroll-area relative grid min-w-0 grid-rows-1 overflow-hidden", orientation !== "vertical" && "data-has-overflow-x:not-data-bar-over:pb-(--scroll-bar-reserve)", className),
+		"data-fade": fade ? FADE_AXIS[orientation] : void 0,
+		...NO_ROLE,
+		...props,
+		children: [
+			(orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, {
+				orientation: "vertical",
+				visibility: type,
+				className: cn(scrollbarClassName, scrollVerticalClassName)
+			}),
+			(orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, {
+				orientation: "horizontal",
+				visibility: type,
+				className: cn(scrollbarClassName, scrollHorizontalClassName)
+			}),
+			/* @__PURE__ */ jsx(ScrollArea.Corner, {}),
+			/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				"data-slot": "scroll-area-viewport",
+				id: viewportId ?? viewPortId,
+				ref: refsViewport,
+				"data-scroll-restoration-id": scrollRestorationId,
+				...NO_ROLE,
+				...focusable && !holdsFocusable ? null : NO_TAB_STOP,
+				className: cn("max-h-inherit w-full rounded-[inherit]", orientation === "vertical" && "overflow-x-hidden!", orientation === "horizontal" && "overflow-y-hidden!", viewportClassName ?? viewPortClassName),
+				children: /* @__PURE__ */ jsx(ScrollArea.Content, {
+					...NO_ROLE,
+					style: orientation === "vertical" ? { minWidth: 0 } : void 0,
+					children
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ScrollArea$1 as ScrollArea, ScrollBar };
+
+//# sourceMappingURL=scroll-area.js.map