@microlight/core 0.10.0 → 0.11.0

package/dist/server/components/ui/card.js

@@ -0,0 +1,81 @@
+// @ts-check
+import * as React from "react";
+import { cn } from "../../utils/css/cn";
+
+/**
+ * @param {{ className?: string } & React.HTMLAttributes<HTMLDivElement>} props
+ * @returns {React.JSX.Element}
+ */
+function Card({
+  className,
+  ...props
+}) {
+  return <div data-slot="card" className={cn("bg-card text-card-foreground flex flex-col gap-4 rounded-md border py-4 px-3 shadow-sm", className)} {...props} />;
+}
+
+/**
+ * @param {{ className?: string } & React.HTMLAttributes<HTMLDivElement>} props
+ * @returns {React.JSX.Element}
+ */
+function CardHeader({
+  className,
+  ...props
+}) {
+  return <div data-slot="card-header" className={cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4", className)} {...props} />;
+}
+
+/**
+ * @param {{ className?: string } & React.HTMLAttributes<HTMLDivElement>} props
+ * @returns {React.JSX.Element}
+ */
+function CardTitle({
+  className,
+  ...props
+}) {
+  return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />;
+}
+
+/**
+ * @param {{ className?: string } & React.HTMLAttributes<HTMLDivElement>} props
+ * @returns {React.JSX.Element}
+ */
+function CardDescription({
+  className,
+  ...props
+}) {
+  return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
+}
+
+/**
+ * @param {{ className?: string } & React.HTMLAttributes<HTMLDivElement>} props
+ * @returns {React.JSX.Element}
+ */
+function CardAction({
+  className,
+  ...props
+}) {
+  return <div data-slot="card-action" className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)} {...props} />;
+}
+
+/**
+ * @param {{ className?: string } & React.HTMLAttributes<HTMLDivElement>} props
+ * @returns {React.JSX.Element}
+ */
+function CardContent({
+  className,
+  ...props
+}) {
+  return <div data-slot="card-content" className={cn("px-4", className)} {...props} />;
+}
+
+/**
+ * @param {{ className?: string } & React.HTMLAttributes<HTMLDivElement>} props
+ * @returns {React.JSX.Element}
+ */
+function CardFooter({
+  className,
+  ...props
+}) {
+  return <div data-slot="card-footer" className={cn("flex items-center px-4 [.border-t]:pt-4", className)} {...props} />;
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/dist/server/components/ui/dropdown-menu.js

@@ -0,0 +1,222 @@
+// @ts-check
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { cn } from "../../utils/css/cn";
+
+/**
+ * @param {React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenu({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+/**
+ * @param {React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuPortal({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+/**
+ * @param {React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string,
+ *   sideOffset?: number
+ * } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content data-slot="dropdown-menu-content" sideOffset={sideOffset} className={cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", className)} {...props} />
+    </DropdownMenuPrimitive.Portal>;
+}
+
+/**
+ * @param {React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuGroup({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string,
+ *   inset?: boolean,
+ *   variant?: 'default' | 'destructive'
+ * } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Item data-slot="dropdown-menu-item" data-inset={inset} data-variant={variant} className={cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string,
+ *   children?: React.ReactNode,
+ *   checked?: boolean
+ * } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return <DropdownMenuPrimitive.CheckboxItem data-slot="dropdown-menu-checkbox-item" className={cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} checked={checked} {...props}>
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>;
+}
+
+/**
+ * @param {React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string,
+ *   children?: React.ReactNode
+ * } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return <DropdownMenuPrimitive.RadioItem data-slot="dropdown-menu-radio-item" className={cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} {...props}>
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>;
+}
+
+/**
+ * @param {{
+ *   className?: string,
+ *   inset?: boolean
+ * } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Label data-slot="dropdown-menu-label" data-inset={inset} className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)} {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Separator data-slot="dropdown-menu-separator" className={cn("bg-border -mx-1 my-1 h-px", className)} {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.HTMLAttributes<HTMLSpanElement>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return <span data-slot="dropdown-menu-shortcut" className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...props} />;
+}
+
+/**
+ * @param {React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuSub({
+  ...props
+}) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string,
+ *   inset?: boolean,
+ *   children?: React.ReactNode
+ * } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return <DropdownMenuPrimitive.SubTrigger data-slot="dropdown-menu-sub-trigger" data-inset={inset} className={cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", className)} {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>} props
+ * @returns {React.JSX.Element}
+ */
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return <DropdownMenuPrimitive.SubContent data-slot="dropdown-menu-sub-content" className={cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className)} {...props} />;
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent };

package/dist/server/components/ui/input.js

@@ -0,0 +1,21 @@
+// @ts-check
+import * as React from "react";
+import { cn } from "../../utils/css/cn";
+
+/**
+ * @param {{
+ *   className?: string,
+ *   type?: string,
+ *   size?: 'default' | 'sm'
+ * } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>} props
+ * @returns {React.JSX.Element}
+ */
+function Input({
+  className,
+  type,
+  size = "default",
+  ...props
+}) {
+  return <input type={type} data-slot="input" data-size={size} className={cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "data-[size=default]:h-9 data-[size=sm]:h-8", className)} {...props} />;
+}
+export { Input };

package/dist/server/components/ui/label.js

@@ -0,0 +1,20 @@
+// @ts-check
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "../../utils/css/cn";
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>} props
+ * @returns {React.JSX.Element}
+ */
+function Label({
+  className,
+  ...props
+}) {
+  return <LabelPrimitive.Root data-slot="label" className={cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className)} {...props} />;
+}
+export { Label };

package/dist/server/components/ui/select.js

@@ -0,0 +1,165 @@
+// @ts-check
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { cn } from "../../utils/css/cn";
+
+/**
+ * @param {React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>} props
+ * @returns {React.JSX.Element}
+ */
+function Select({
+  ...props
+}) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+/**
+ * @param {React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>} props
+ * @returns {React.JSX.Element}
+ */
+function SelectGroup({
+  ...props
+}) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+/**
+ * @param {React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>} props
+ * @returns {React.JSX.Element}
+ */
+function SelectValue({
+  ...props
+}) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string,
+ *   size?: 'default' | 'sm',
+ *   children?: React.ReactNode
+ * } & React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>} props
+ * @returns {React.JSX.Element}
+ */
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return <SelectPrimitive.Trigger data-slot="select-trigger" data-size={size} className={cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)} {...props}>
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>;
+}
+
+/**
+ * @param {{
+ *   className?: string,
+ *   children?: React.ReactNode,
+ *   position?: 'popper' | 'item-aligned'
+ * } & React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>} props
+ * @returns {React.JSX.Element}
+ */
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return <SelectPrimitive.Portal>
+      <SelectPrimitive.Content data-slot="select-content" className={cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className)} position={position} {...props}>
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport className={cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1")}>
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>} props
+ * @returns {React.JSX.Element}
+ */
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return <SelectPrimitive.Label data-slot="select-label" className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)} {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string,
+ *   children?: React.ReactNode,
+ *   value?: string | number
+ * } & Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, 'value'>} props
+ * @returns {React.JSX.Element}
+ */
+function SelectItem({
+  className,
+  children,
+  value,
+  ...props
+}) {
+  return <SelectPrimitive.Item data-slot="select-item" className={cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className)} value={value !== undefined ? String(value) : undefined} {...props}>
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>} props
+ * @returns {React.JSX.Element}
+ */
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return <SelectPrimitive.Separator data-slot="select-separator" className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)} {...props} />;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>} props
+ * @returns {React.JSX.Element}
+ */
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return <SelectPrimitive.ScrollUpButton data-slot="select-scroll-up-button" className={cn("flex cursor-default items-center justify-center py-1", className)} {...props}>
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>;
+}
+
+/**
+ * @param {{
+ *   className?: string
+ * } & React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>} props
+ * @returns {React.JSX.Element}
+ */
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return <SelectPrimitive.ScrollDownButton data-slot="select-scroll-down-button" className={cn("flex cursor-default items-center justify-center py-1", className)} {...props}>
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>;
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/server/components/ui/stack.js

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { cn } from "../../utils/css/cn";
+
+/**
+ * @typedef {Object} StackOwnProps
+ * @property {'row' | 'column' | 'row-reverse' | 'column-reverse'} [direction]
+ * @property {number | string} [spacing]
+ * @property {'start' | 'center' | 'end' | 'stretch' | 'baseline'} [align]
+ * @property {'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'} [justify]
+ * @property {boolean} [wrap]
+ * @property {React.ReactNode} [divider]
+ * @property {React.ReactNode} [children]
+ */
+
+/** @type {React.ForwardRefExoticComponent<StackOwnProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>} */
+const Stack = React.forwardRef(({
+  className,
+  direction = "column",
+  spacing = 1,
+  align,
+  justify,
+  wrap = false,
+  divider,
+  children,
+  ...restProps
+}, ref) => {
+  // Remove any non-DOM props that might have been passed
+  const {
+    alignItems,
+    justifyContent,
+    flexDirection,
+    ...domProps
+  } = restProps;
+  const directionClasses = {
+    row: "flex-row",
+    column: "flex-col",
+    "row-reverse": "flex-row-reverse",
+    "column-reverse": "flex-col-reverse"
+  };
+  const alignClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+    baseline: "items-baseline"
+  };
+  const justifyClasses = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly"
+  };
+
+  // Convert spacing to Tailwind gap classes
+  const getSpacingClass = spacing => {
+    if (typeof spacing === "string") return spacing;
+
+    // Map numbers to Tailwind spacing scale
+    const spacingMap = {
+      0: "gap-0",
+      0.5: "gap-0.5",
+      1: "gap-1",
+      1.5: "gap-1.5",
+      2: "gap-2",
+      2.5: "gap-2.5",
+      3: "gap-3",
+      4: "gap-4",
+      5: "gap-5",
+      6: "gap-6",
+      8: "gap-8",
+      10: "gap-10",
+      12: "gap-12",
+      16: "gap-16",
+      20: "gap-20",
+      24: "gap-24"
+    };
+    return spacingMap[spacing] || "gap-4";
+  };
+  const stackClasses = cn("flex", directionClasses[direction], getSpacingClass(spacing), align && alignClasses[align], justify && justifyClasses[justify], wrap && "flex-wrap", className);
+
+  // Handle divider rendering
+  if (divider && React.Children.count(children) > 1) {
+    const childrenArray = React.Children.toArray(children);
+    const childrenWithDividers = [];
+    childrenArray.forEach((child, index) => {
+      childrenWithDividers.push(child);
+      if (index < childrenArray.length - 1) {
+        childrenWithDividers.push(<div key={`divider-${index}`} className="flex-shrink-0">
+              {divider}
+            </div>);
+      }
+    });
+    return <div ref={ref} className={stackClasses} {...domProps}>
+          {childrenWithDividers}
+        </div>;
+  }
+  return <div ref={ref} className={stackClasses} {...domProps}>
+        {children}
+      </div>;
+});
+Stack.displayName = "Stack";
+export { Stack };