@lt-three/love3 0.0.0 → 0.1.1

package/dist/web/atom/select.d.ts

@@ -0,0 +1,43 @@
+import { SelectTrigger } from "../base/select.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/web/atom/select.d.ts
+export type SelectOption = {
+  value: string;
+  label: ReactNode;
+  /** For text search (specify when label is a ReactNode) */
+  textValue?: string;
+};
+export type SelectOptionGroup = {
+  label: ReactNode;
+  options: SelectOption[];
+};
+export type SelectProps = {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: (SelectOption | SelectOptionGroup)[];
+  placeholder?: string;
+  label?: ReactNode;
+  required?: boolean;
+  description?: ReactNode;
+  helpText?: ReactNode;
+  className?: string;
+  wrapperClassName?: string;
+  disabled?: boolean;
+  size?: "xs" | "sm" | "default";
+  /** Controls the open state (inline editing, etc.) */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** DOM props passed straight to the Trigger (autoFocus, onBlur, etc.) */
+  triggerProps?: ComponentProps<typeof SelectTrigger>;
+  /** Slot for the form side to insert an error */
+  errorSlot?: ReactNode;
+  invalid?: boolean;
+  /** DEV-E2E: ID used by e2e to identify the trigger button */
+  "data-testid"?: string;
+  /** DOM id of the trigger. Use it to pair with an outer `<label htmlFor>`. */
+  id?: string;
+  /** Accessible name when there is no visible label. Not needed when `label` is passed. */
+  "aria-label"?: string;
+};
+export declare function Select({ value, onValueChange, options, placeholder, label, required, description, helpText, className, wrapperClassName, disabled, size, open, onOpenChange, triggerProps, errorSlot, invalid, id, "aria-label": ariaLabel, "data-testid": testId }: SelectProps): import("react").JSX.Element;
+//#endregion

package/dist/web/atom/select.js

@@ -0,0 +1,93 @@
+import { cn } from "../lib/utils.js";
+import { Label } from "../base/label.js";
+import { Select as Select$1, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "../base/select.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/atom/select.tsx
+const EMPTY_SENTINEL = "__atom_select_empty__";
+/**
+* Whether `""` may be treated as "not selected yet" rather than "an empty choice".
+*
+* When it is replaced by the sentinel, Radix interprets it as **a value is selected**, so
+* `<SelectValue placeholder>` is not rendered at all (the value is not among the options, so the
+* content is empty too, and the trigger becomes a **silently empty button**). When there is no
+* empty option, draw the placeholder yourself so that it reads as "not selected".
+*/
+function hasEmptyOption(options) {
+	return options.some((o) => isOptionGroup(o) ? o.options.some((x) => x.value === "") : o.value === "");
+}
+function toInternalValue(value) {
+	return value === "" ? EMPTY_SENTINEL : value;
+}
+function fromInternalValue(value) {
+	return value === EMPTY_SENTINEL ? "" : value;
+}
+function isOptionGroup(option) {
+	return "options" in option;
+}
+function renderOption(option) {
+	const v = toInternalValue(option.value);
+	return /* @__PURE__ */ jsx(SelectItem, {
+		value: v,
+		textValue: option.textValue,
+		children: option.label
+	}, v);
+}
+function Select({ value, onValueChange, options, placeholder, label, required, description, helpText, className, wrapperClassName, disabled, size = "default", open, onOpenChange, triggerProps, errorSlot, invalid, id, "aria-label": ariaLabel, "data-testid": testId }) {
+	const generatedId = useId();
+	const triggerId = id ?? generatedId;
+	const select = /* @__PURE__ */ jsxs(Select$1, {
+		value: toInternalValue(value),
+		onValueChange: (v) => onValueChange(fromInternalValue(v)),
+		disabled,
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			id: triggerId,
+			size,
+			"aria-label": ariaLabel,
+			"aria-invalid": invalid,
+			"data-testid": testId,
+			...triggerProps,
+			className: cn("w-full cursor-pointer", className, triggerProps?.className),
+			children: /* @__PURE__ */ jsx(SelectValue, {
+				placeholder,
+				children: value === "" && !hasEmptyOption(options) ? /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: placeholder
+				}) : void 0
+			})
+		}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => isOptionGroup(option) ? /* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: option.label }), option.options.map(renderOption)] }, typeof option.label === "string" ? option.label : option.options.map((o) => o.value).join(",")) : renderOption(option)) })]
+	});
+	if (!label && !description && !errorSlot) return select;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", wrapperClassName),
+		children: [
+			label && /* @__PURE__ */ jsxs(Label, {
+				htmlFor: triggerId,
+				className: "font-semibold text-xs opacity-80 flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: label }),
+					required ? /* @__PURE__ */ jsx("span", {
+						className: "text-destructive",
+						children: "*"
+					}) : null,
+					helpText ? /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground font-normal",
+						children: helpText
+					}) : null
+				]
+			}),
+			select,
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: description
+			}),
+			errorSlot
+		]
+	});
+}
+
+//#endregion
+export { Select };

package/dist/web/atom/separator.d.ts

@@ -0,0 +1,2 @@
+import { Separator } from "../base/separator.js";
+export { Separator };

package/dist/web/atom/separator.js

@@ -0,0 +1,3 @@
+import { Separator } from "../base/separator.js";
+
+export { Separator };

package/dist/web/atom/skeleton.d.ts

@@ -0,0 +1,2 @@
+import { Skeleton } from "../base/skeleton.js";
+export { Skeleton };

package/dist/web/atom/skeleton.js

@@ -0,0 +1,3 @@
+import { Skeleton } from "../base/skeleton.js";
+
+export { Skeleton };

package/dist/web/atom/slider.d.ts

@@ -0,0 +1,33 @@
+import { Slider as Slider$1 } from "../base/slider.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/web/atom/slider.d.ts
+type CommonProps = {
+  label?: ReactNode;
+  required?: boolean;
+  description?: ReactNode;
+  helpText?: ReactNode;
+  className?: string;
+  wrapperClassName?: string;
+  errorSlot?: ReactNode;
+  invalid?: boolean;
+  disabled?: boolean;
+  min?: number;
+  max: number;
+  step?: number;
+  /** Formatted string shown to the right of the value. If not given, the raw number is shown (a range is separated by ` / `) */
+  formattedValue?: ReactNode;
+} & Omit<ComponentProps<typeof Slider$1>, "value" | "onValueChange" | "defaultValue" | "min" | "max" | "step" | "disabled" | "className">;
+export type SliderProps = ({
+  value: number;
+  onValueChange: (value: number) => void;
+} & CommonProps) | ({
+  value: number[];
+  onValueChange: (value: number[]) => void;
+} & CommonProps);
+/**
+ * A controlled-only Slider. Accepts both a single value (`number`) and a range (`number[]`).
+ * Radix Slider handles `number[]` internally, so a `number` input is turned into an array at runtime.
+ */
+export declare function Slider(props: SliderProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/web/atom/slider.js

@@ -0,0 +1,70 @@
+import { cn } from "../lib/utils.js";
+import { Label } from "../base/label.js";
+import { Slider as Slider$1 } from "../base/slider.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/atom/slider.tsx
+function isRange(props) {
+	return Array.isArray(props.value);
+}
+/**
+* A controlled-only Slider. Accepts both a single value (`number`) and a range (`number[]`).
+* Radix Slider handles `number[]` internally, so a `number` input is turned into an array at runtime.
+*/
+function Slider(props) {
+	const { label, required, description, helpText, className, wrapperClassName, errorSlot, invalid, "aria-invalid": ariaInvalid, min, max, step, disabled, formattedValue, value, onValueChange: _onValueChange, ...rest } = props;
+	const labelId = useId();
+	const sliderValue = Array.isArray(value) ? value : typeof value === "number" ? [value] : [];
+	const handleChange = (next) => {
+		if (isRange(props)) props.onValueChange(next);
+		else if (typeof next[0] === "number") props.onValueChange(next[0]);
+	};
+	const inlineDisplay = formattedValue ?? sliderValue.join(" / ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-2", wrapperClassName),
+		children: [
+			(label || formattedValue !== void 0 || sliderValue.length > 0) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between gap-2",
+				children: [label ? /* @__PURE__ */ jsxs(Label, {
+					id: labelId,
+					className: "font-semibold text-xs opacity-80 flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: label }),
+						required ? /* @__PURE__ */ jsx("span", {
+							className: "text-destructive",
+							children: "*"
+						}) : null,
+						helpText ? /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground font-normal",
+							children: helpText
+						}) : null
+					]
+				}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-sm font-mono tabular-nums",
+					children: inlineDisplay
+				})]
+			}),
+			/* @__PURE__ */ jsx(Slider$1, {
+				"aria-labelledby": label ? labelId : void 0,
+				...rest,
+				"aria-invalid": invalid ?? ariaInvalid,
+				value: sliderValue,
+				onValueChange: handleChange,
+				min,
+				max,
+				step,
+				disabled,
+				className: cn("grow", className)
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: description
+			}),
+			errorSlot
+		]
+	});
+}
+
+//#endregion
+export { Slider };

package/dist/web/atom/spinner.d.ts

@@ -0,0 +1,8 @@
+import { Spinner as Spinner$1 } from "../base/spinner.js";
+import React from "react";
+//#region src/web/atom/spinner.d.ts
+export type SpinnerProps = React.ComponentProps<typeof Spinner$1> & {
+  full?: boolean;
+};
+export declare function Spinner({ full, ...props }: SpinnerProps): React.JSX.Element;
+//#endregion

package/dist/web/atom/spinner.js

@@ -0,0 +1,14 @@
+import { cn } from "../lib/utils.js";
+import { Spinner as Spinner$1 } from "../base/spinner.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/web/atom/spinner.tsx
+function Spinner({ full, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(full && "grow w-full h-full flex justify-center items-center"),
+		children: /* @__PURE__ */ jsx(Spinner$1, { ...props })
+	});
+}
+
+//#endregion
+export { Spinner };

package/dist/web/atom/switch.d.ts

@@ -0,0 +1,11 @@
+import { Switch as Switch$1 } from "../base/switch.js";
+import { ComponentProps } from "react";
+//#region src/web/atom/switch.d.ts
+/**
+ * A controlled Switch that works outside a form.
+ * `form/switch.tsx` depends on TanStack Form's field context,
+ * so use this one for a standalone ON/OFF toggle.
+ */
+export type SwitchProps = ComponentProps<typeof Switch$1>;
+export declare function Switch(props: SwitchProps): import("react").JSX.Element;
+//#endregion

package/dist/web/atom/switch.js

@@ -0,0 +1,10 @@
+import { Switch as Switch$1 } from "../base/switch.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/web/atom/switch.tsx
+function Switch(props) {
+	return /* @__PURE__ */ jsx(Switch$1, { ...props });
+}
+
+//#endregion
+export { Switch };

package/dist/web/atom/text-area.d.ts

@@ -0,0 +1,23 @@
+import { textareaVariants } from "../base/textarea.js";
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/web/atom/text-area.d.ts
+export type TextAreaProps = Omit<ComponentProps<"textarea">, "value" | "onChange"> & VariantProps<typeof textareaVariants> & {
+  value: string;
+  onValueChange: (value: string) => void;
+};
+/**
+ * A plain multi-line input. Use it directly from screens that do not use TanStack Form
+ * (settings, small edit fields, read-only output). Apps are expected not to import
+ * `base/textarea` directly, so this is the entry point for it. A multi-line version
+ * of `atom/text-field`.
+ *
+ * The variants match `atom/text-field`:
+ *   default ... a field with a 1px border
+ *   `<3`    ... an underline-only field that attaches to an existing row
+ *   block   ... a field with no border that reads as body text (an always-editable row)
+ *
+ * When you need form integration, use `form/text-area` (it uses the same `base/textarea` inside).
+ */
+export declare function TextArea({ value, onValueChange, ...props }: TextAreaProps): import("react").JSX.Element;
+//#endregion

package/dist/web/atom/text-area.js

@@ -0,0 +1,27 @@
+import { Textarea } from "../base/textarea.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/web/atom/text-area.tsx
+/**
+* A plain multi-line input. Use it directly from screens that do not use TanStack Form
+* (settings, small edit fields, read-only output). Apps are expected not to import
+* `base/textarea` directly, so this is the entry point for it. A multi-line version
+* of `atom/text-field`.
+*
+* The variants match `atom/text-field`:
+*   default ... a field with a 1px border
+*   `<3`    ... an underline-only field that attaches to an existing row
+*   block   ... a field with no border that reads as body text (an always-editable row)
+*
+* When you need form integration, use `form/text-area` (it uses the same `base/textarea` inside).
+*/
+function TextArea({ value, onValueChange, ...props }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		value,
+		onChange: (event) => onValueChange(event.target.value),
+		...props
+	});
+}
+
+//#endregion
+export { TextArea };

package/dist/web/atom/text-field.d.ts

@@ -0,0 +1,18 @@
+import { inputVariants } from "../base/input.js";
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/web/atom/text-field.d.ts
+export type TextFieldProps = Omit<ComponentProps<"input">, "value" | "onChange"> & VariantProps<typeof inputVariants> & {
+  value: string;
+  onValueChange: (value: string) => void;
+};
+/**
+ * A plain text input. Use it directly from screens that do not use TanStack Form
+ * (settings, search filters, small edit fields). Apps are expected not to import
+ * `base/input` directly, so this is the entry point for it.
+ *
+ * When you need form integration, use `form/text-input` (it uses the same `base/input` inside).
+ * It pairs with native's `atom/text-field`.
+ */
+export declare function TextField({ value, onValueChange, ...props }: TextFieldProps): import("react").JSX.Element;
+//#endregion

package/dist/web/atom/text-field.js

@@ -0,0 +1,22 @@
+import { Input } from "../base/input.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/web/atom/text-field.tsx
+/**
+* A plain text input. Use it directly from screens that do not use TanStack Form
+* (settings, search filters, small edit fields). Apps are expected not to import
+* `base/input` directly, so this is the entry point for it.
+*
+* When you need form integration, use `form/text-input` (it uses the same `base/input` inside).
+* It pairs with native's `atom/text-field`.
+*/
+function TextField({ value, onValueChange, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		value,
+		onChange: (event) => onValueChange(event.target.value),
+		...props
+	});
+}
+
+//#endregion
+export { TextField };

package/dist/web/atom/toggle-chip.d.ts

@@ -0,0 +1,22 @@
+import { BadgeVariants } from "../base/badge.js";
+import { ReactNode } from "react";
+//#region src/web/atom/toggle-chip.d.ts
+export type ToggleChipProps = {
+  children: ReactNode;
+  /** Whether it is selected. When selected, `variant` becomes `default` (indigo fill). */
+  pressed: boolean;
+  onPressedChange: (pressed: boolean) => void;
+  /** Look when not selected (default `outline`). */
+  inactiveVariant?: BadgeVariants;
+  disabled?: boolean;
+  className?: string;
+};
+/**
+ * A Badge that toggles selection when pressed. Used for filter tags and multi-selecting accounts.
+ *
+ * Wrapping a `Badge` in a `<button>` by hand makes it easy to forget `type="button"`
+ * or miss `aria-pressed`. How the pressed state looks (indigo fill) is also something
+ * the design system should decide, so it is gathered into a single component.
+ */
+export declare function ToggleChip({ children, pressed, onPressedChange, inactiveVariant, disabled, className }: ToggleChipProps): import("react").JSX.Element;
+//#endregion

package/dist/web/atom/toggle-chip.js

@@ -0,0 +1,28 @@
+import { cn } from "../lib/utils.js";
+import { Badge } from "../base/badge.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/web/atom/toggle-chip.tsx
+/**
+* A Badge that toggles selection when pressed. Used for filter tags and multi-selecting accounts.
+*
+* Wrapping a `Badge` in a `<button>` by hand makes it easy to forget `type="button"`
+* or miss `aria-pressed`. How the pressed state looks (indigo fill) is also something
+* the design system should decide, so it is gathered into a single component.
+*/
+function ToggleChip({ children, pressed, onPressedChange, inactiveVariant = "outline", disabled, className }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-pressed": pressed,
+		disabled,
+		onClick: () => onPressedChange(!pressed),
+		className: cn("shrink-0", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className),
+		children: /* @__PURE__ */ jsx(Badge, {
+			variant: pressed ? "default" : inactiveVariant,
+			children
+		})
+	});
+}
+
+//#endregion
+export { ToggleChip };

package/dist/web/atom/tooltip.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+//#region src/web/atom/tooltip.d.ts
+type Props = {
+  /**
+   * The tooltip body. When falsy, no tooltip is attached and the children are rendered as is.
+   * This makes it easy to enable conditionally, e.g. "show the reason only when the button is disabled".
+   */
+  content?: React.ReactNode;
+  /**
+   * The element that is the target of hover and focus. A disabled element is wrapped in a focusable span.
+   * Even if you pass `<button disabled>`, the body appears on hover and on keyboard focus.
+   */
+  children: React.ReactNode;
+  side?: "top" | "right" | "bottom" | "left";
+};
+/**
+ * A light component wrapping shadcn's Tooltip. It is meant for "showing the reason when the trigger is disabled (cannot be pressed)".
+ *
+ * When content is empty, no tooltip is attached and the children are rendered as is.
+ */
+export declare function Tooltip({ content, children, side }: Props): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/atom/tooltip.js

@@ -0,0 +1,26 @@
+import { Tooltip as Tooltip$1, TooltipContent, TooltipTrigger } from "../base/tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/atom/tooltip.tsx
+/**
+* A light component wrapping shadcn's Tooltip. It is meant for "showing the reason when the trigger is disabled (cannot be pressed)".
+*
+* When content is empty, no tooltip is attached and the children are rendered as is.
+*/
+function Tooltip({ content, children, side }) {
+	if (!content) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("span", {
+			tabIndex: 0,
+			className: "contents",
+			children
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side,
+		children: content
+	})] });
+}
+
+//#endregion
+export { Tooltip };

package/dist/web/atom/typography.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+//#region src/web/atom/typography.d.ts
+export declare function SectionTitle({ className, children, description, ...props }: ComponentProps<"p"> & {
+  description?: string;
+}): import("react").JSX.Element;
+//#endregion

package/dist/web/atom/typography.js

@@ -0,0 +1,23 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/atom/typography.tsx
+function SectionTitle({ className, children, description, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-0.5",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "after:bg-action/70 relative py-2 pl-3 text-sm after:absolute after:inset-y-2 after:left-1 after:w-0.5",
+			children: /* @__PURE__ */ jsx("p", {
+				className: cn("font-semibold", className),
+				...props,
+				children
+			})
+		}), description && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: description
+		})]
+	});
+}
+
+//#endregion
+export { SectionTitle };

package/dist/web/base/accordion.d.ts

@@ -0,0 +1,9 @@
+import * as React$1 from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+//#region src/web/base/accordion.d.ts
+declare function Accordion({ ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root>): React$1.JSX.Element;
+declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): React$1.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): React$1.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): React$1.JSX.Element;
+//#endregion
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/web/base/accordion.js

@@ -0,0 +1,44 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+//#region src/web/base/accordion.tsx
+function Accordion({ ...props }) {
+	return /* @__PURE__ */ jsx(AccordionPrimitive.Root, {
+		"data-slot": "accordion",
+		...props
+	});
+}
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
+		"data-slot": "accordion-item",
+		className: cn("border-b last:border-b-0", className),
+		...props
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: cn(" flex flex-1 items-start justify-between gap-4 rounded-control py-3 text-left text-[13px] font-medium outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5" })]
+		})
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
+		"data-slot": "accordion-content",
+		className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-[13px]",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pt-0 pb-3", className),
+			children
+		})
+	});
+}
+
+//#endregion
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/web/base/alert.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/web/base/alert.d.ts
+declare const alertVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React$1.JSX.Element;
+declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { Alert, AlertDescription, AlertTitle };

package/dist/web/base/alert.js

@@ -0,0 +1,37 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/web/base/alert.tsx
+const alertVariants = cva("relative w-full rounded-surface border px-3.5 py-3 text-[13px] grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+	variants: { variant: {
+		default: "bg-card text-card-foreground",
+		destructive: "border-state-error/30 bg-state-error/5 text-state-error [&>svg]:text-current *:data-[slot=alert-description]:text-state-error"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Alert({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert",
+		role: "alert",
+		className: cn(alertVariants({ variant }), className),
+		...props
+	});
+}
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-title",
+		className: cn("col-start-2 min-h-4 font-medium tracking-tight", className),
+		...props
+	});
+}
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-description",
+		className: cn("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className),
+		...props
+	});
+}
+
+//#endregion
+export { Alert, AlertDescription, AlertTitle };

package/dist/web/base/avatar.d.ts

@@ -0,0 +1,8 @@
+import * as React$1 from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+//#region src/web/base/avatar.d.ts
+declare function Avatar({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Root>): React$1.JSX.Element;
+declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): React$1.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): React$1.JSX.Element;
+//#endregion
+export { Avatar, AvatarFallback, AvatarImage };