@alpic-ai/ui 0.0.0

package/dist/components/textarea.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { Label } from "./label.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/components/textarea.tsx
+function Textarea({ className, id, label, required, hint, error, ...props }) {
+	const generatedId = React.useId();
+	const fieldId = id ?? generatedId;
+	const textarea = /* @__PURE__ */ jsx("textarea", {
+		id: fieldId,
+		"data-slot": "textarea",
+		className: cn("block w-full min-h-[120px] resize-none", "px-3.5 py-3", "type-text-md text-foreground placeholder:text-placeholder", "bg-background border border-border rounded-md", "transition-colors", "outline-none focus-visible:border-ring focus-visible:border-2", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed", "aria-invalid:border-border-error [@media(hover:hover)]:aria-invalid:hover:border-border-error", error && "border-border-error [@media(hover:hover)]:hover:border-border-error", className),
+		required,
+		"aria-invalid": error ? true : void 0,
+		"aria-describedby": fieldId && (hint || error) ? `${fieldId}-description` : void 0,
+		...props
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-0.5",
+				children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: fieldId,
+					className: "type-text-sm font-medium text-muted-foreground",
+					children: label
+				}), required && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "type-text-sm font-medium text-required",
+					children: "*"
+				})]
+			}),
+			textarea,
+			(hint || error) && /* @__PURE__ */ jsx("p", {
+				id: fieldId ? `${fieldId}-description` : void 0,
+				className: cn("type-text-sm", error ? "text-destructive" : "text-subtle-foreground"),
+				children: error ?? hint
+			})
+		]
+	});
+}
+//#endregion
+export { Textarea };

package/dist/components/toggle-group.d.mts

@@ -0,0 +1,28 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/toggle-group.d.ts
+declare const toggleGroupItemVariants: (props?: ({
+  variant?: "default" | "outline" | null | undefined;
+  size?: "sm" | "default" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+type ToggleGroupContextValue = VariantProps<typeof toggleGroupItemVariants>;
+declare function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleGroupContextValue): _$react_jsx_runtime0.JSX.Element;
+declare function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleGroupItemVariants>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ToggleGroup, ToggleGroupItem, toggleGroupItemVariants };

package/dist/components/toggle-group.mjs

@@ -0,0 +1,72 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+//#region src/components/toggle-group.tsx
+const toggleGroupItemVariants = cva([
+	"inline-flex items-center justify-center gap-1 whitespace-nowrap",
+	"type-text-sm font-medium",
+	"transition-colors",
+	"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus:z-10 focus-visible:z-10",
+	"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+	"disabled:pointer-events-none disabled:opacity-50"
+].join(" "), {
+	variants: {
+		variant: {
+			default: [
+				"bg-transparent text-muted-foreground",
+				"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+				"[@media(hover:hover)]:hover:bg-background-hover [@media(hover:hover)]:hover:text-muted-foreground-hover"
+			].join(" "),
+			outline: [
+				"border border-border bg-transparent text-muted-foreground",
+				"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+				"[@media(hover:hover)]:hover:bg-background-hover [@media(hover:hover)]:hover:text-muted-foreground-hover"
+			].join(" ")
+		},
+		size: {
+			default: "h-8 px-2 min-w-8",
+			sm: "h-7 px-1.5 min-w-7"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const ToggleGroupContext = React.createContext({
+	size: "default",
+	variant: "default"
+});
+function ToggleGroup({ className, variant, size, children, ...props }) {
+	return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, {
+		"data-slot": "toggle-group",
+		className: cn("group/toggle-group flex h-fit w-fit items-center rounded-md", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+			value: {
+				variant,
+				size
+			},
+			children
+		})
+	});
+}
+function ToggleGroupItem({ className, children, variant, size, ...props }) {
+	const context = React.useContext(ToggleGroupContext);
+	const resolvedVariant = context.variant ?? variant;
+	const resolvedSize = context.size ?? size;
+	return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, {
+		"data-slot": "toggle-group-item",
+		className: cn(toggleGroupItemVariants({
+			variant: resolvedVariant,
+			size: resolvedSize
+		}), "min-w-0 flex-1 shrink-0 rounded-none first:rounded-l-md last:rounded-r-md", resolvedVariant === "outline" && "border-l-0 first:border-l", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { ToggleGroup, ToggleGroupItem, toggleGroupItemVariants };

package/dist/components/tooltip-icon-button.d.mts

@@ -0,0 +1,12 @@
+import { Button } from "./button.mjs";
+import * as _$react from "react";
+import { ComponentPropsWithRef } from "react";
+
+//#region src/components/tooltip-icon-button.d.ts
+type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
+  tooltip: string;
+  side?: "top" | "bottom" | "left" | "right";
+};
+declare const TooltipIconButton: _$react.ForwardRefExoticComponent<Omit<TooltipIconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { TooltipIconButton, type TooltipIconButtonProps };

package/dist/components/tooltip-icon-button.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { Button } from "./button.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Slottable } from "@radix-ui/react-slot";
+//#region src/components/tooltip-icon-button.tsx
+const TooltipIconButton = forwardRef(({ children, tooltip, side = "bottom", ...rest }, ref) => {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			size: "icon",
+			...rest,
+			ref,
+			children: [/* @__PURE__ */ jsx(Slottable, { children }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: tooltip
+			})]
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side,
+		children: tooltip
+	})] });
+});
+TooltipIconButton.displayName = "TooltipIconButton";
+//#endregion
+export { TooltipIconButton };

package/dist/components/tooltip.d.mts

@@ -0,0 +1,23 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+//#region src/components/tooltip.d.ts
+declare function TooltipProvider({
+  delayDuration,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>): _$react_jsx_runtime0.JSX.Element;
+declare function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
+declare function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>): _$react_jsx_runtime0.JSX.Element;
+declare function TooltipContent({
+  className,
+  sideOffset,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+//#region src/components/tooltip.tsx
+function TooltipProvider({ delayDuration = 0, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+		"data-slot": "tooltip-provider",
+		delayDuration,
+		...props
+	});
+}
+function Tooltip({ ...props }) {
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
+		"data-slot": "tooltip",
+		...props
+	}) });
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipContent({ className, sideOffset = 6, children, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
+		"data-slot": "tooltip-content",
+		sideOffset,
+		className: cn("bg-inverted text-inverted-foreground dark:bg-subtle dark:text-foreground", "z-50 w-fit rounded-md px-3 py-2 shadow-lg dark:shadow-none dark:drop-shadow-[0_0_0.5px_var(--color-border)]", "type-text-xs font-semibold text-balance text-center", "animate-in fade-in-0 zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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", "origin-(--radix-tooltip-content-transform-origin)", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-inverted fill-inverted dark:bg-subtle dark:fill-subtle z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })]
+	}) });
+}
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/hooks/use-copy-to-clipboard.d.mts

@@ -0,0 +1,11 @@
+//#region src/hooks/use-copy-to-clipboard.d.ts
+declare function useCopyToClipboard({
+  resetDelay
+}?: {
+  resetDelay?: number;
+}): {
+  copy: (text: string) => void;
+  isCopied: boolean;
+};
+//#endregion
+export { useCopyToClipboard };

package/dist/hooks/use-copy-to-clipboard.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/hooks/use-copy-to-clipboard.ts
+function useCopyToClipboard({ resetDelay = 2e3 } = {}) {
+	const [isCopied, setIsCopied] = useState(false);
+	const timeoutRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	return {
+		copy: useCallback((text) => {
+			navigator.clipboard.writeText(text).then(() => {
+				setIsCopied(true);
+				if (timeoutRef.current) clearTimeout(timeoutRef.current);
+				timeoutRef.current = setTimeout(() => setIsCopied(false), resetDelay);
+			});
+		}, [resetDelay]),
+		isCopied
+	};
+}
+//#endregion
+export { useCopyToClipboard };

package/dist/hooks/use-mobile.d.mts

@@ -0,0 +1,4 @@
+//#region src/hooks/use-mobile.d.ts
+declare function useIsMobile(): boolean;
+//#endregion
+export { useIsMobile };

package/dist/hooks/use-mobile.mjs

@@ -0,0 +1,16 @@
+import * as React from "react";
+//#region src/hooks/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState(void 0);
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => setIsMobile(mql.matches);
+		mql.addEventListener("change", onChange);
+		setIsMobile(mql.matches);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+}
+//#endregion
+export { useIsMobile };

package/dist/lib/cn.d.mts

@@ -0,0 +1,6 @@
+import { ClassValue } from "clsx";
+
+//#region src/lib/cn.d.ts
+declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+export { cn };

package/dist/lib/cn.mjs

@@ -0,0 +1,8 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/lib/cn.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { cn };

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@alpic-ai/ui",
+  "version": "0.0.0",
+  "description": "Alpic design system — shared UI components",
+  "type": "module",
+  "exports": {
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./lib/cn": "./src/lib/cn.ts",
+    "./theme": "./src/styles/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src/components",
+    "src/hooks",
+    "src/lib",
+    "src/styles/tokens.css"
+  ],
+  "publishConfig": {
+    "exports": {
+      "./components/*": {
+        "types": "./dist/components/*.d.mts",
+        "default": "./dist/components/*.mjs"
+      },
+      "./hooks/*": {
+        "types": "./dist/hooks/*.d.mts",
+        "default": "./dist/hooks/*.mjs"
+      },
+      "./lib/cn": {
+        "types": "./dist/lib/cn.d.mts",
+        "default": "./dist/lib/cn.mjs"
+      },
+      "./theme": "./src/styles/tokens.css"
+    }
+  },
+  "scripts": {
+    "build": "shx rm -rf dist && tsdown",
+    "format": "biome check --write --error-on-warnings .",
+    "test:type": "tsc --noEmit",
+    "test:format": "biome check --error-on-warnings .",
+    "dev:ui": "ladle serve",
+    "publish:npm": "pnpm publish --tag \"${NPM_TAG}\" --access public --no-git-checks"
+  },
+  "peerDependencies": {
+    "lucide-react": "^1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^2.0.0",
+    "tailwindcss": "^4.0.0",
+    "tw-animate-css": "^1.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@ladle/react": "^5.1.1",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "lucide-react": "^1.7.0",
+    "shx": "^0.4.0",
+    "sonner": "^2.0.7",
+    "tailwindcss": "^4.2.2",
+    "tsdown": "^0.21.7",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^6.0.2"
+  }
+}

package/src/components/accordion-card.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+
+const ACCORDION_CARD_VALUE = "accordion-card";
+
+function AccordionCard({
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  disabled,
+  className,
+  children,
+  ...props
+}: {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (nextOpen: boolean) => void;
+  disabled?: boolean;
+} & Omit<
+  React.ComponentProps<typeof AccordionPrimitive.Root>,
+  "type" | "collapsible" | "defaultValue" | "value" | "onValueChange" | "disabled"
+>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion-card"
+      className={cn("rounded-xl border bg-card text-card-foreground data-[disabled]:opacity-50", className)}
+      {...props}
+      type="single"
+      collapsible
+      disabled={disabled}
+      defaultValue={defaultOpen ? ACCORDION_CARD_VALUE : undefined}
+      {...(open !== undefined ? { value: open ? ACCORDION_CARD_VALUE : "" } : {})}
+      {...(onOpenChange !== undefined ? { onValueChange: (value: string) => onOpenChange(value !== "") } : {})}
+    >
+      <AccordionPrimitive.Item value={ACCORDION_CARD_VALUE} disabled={disabled}>
+        {children}
+      </AccordionPrimitive.Item>
+    </AccordionPrimitive.Root>
+  );
+}
+
+function AccordionCardHeader({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-card-header"
+        className={cn(
+          "flex flex-1 items-center justify-between gap-4 p-4",
+          "type-text-md font-semibold text-foreground",
+          "rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
+          "[@media(hover:hover)]:hover:underline",
+          "disabled:pointer-events-none",
+          "[&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="size-5 shrink-0 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionCardTitle({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3 className={cn("type-text-md font-semibold", className)} {...props}>
+      {children}
+    </h3>
+  );
+}
+
+/**
+ * `className` is forwarded to the inner padding wrapper, not the Radix Content root.
+ * The root always applies overflow-hidden and the accordion animations.
+ * To override overflow or animation behavior, wrap this component in an additional element.
+ */
+function AccordionCardContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-card-content"
+      className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("px-4 pb-4 type-text-sm text-muted-foreground", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { AccordionCard, AccordionCardContent, AccordionCardHeader, AccordionCardTitle };

package/src/components/accordion.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b border-border-secondary", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-center justify-between gap-4 py-4",
+          "type-text-md font-semibold text-foreground",
+          "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm",
+          "[@media(hover:hover)]:hover:underline",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "[&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="size-6 shrink-0 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+/**
+ * `className` is forwarded to the inner padding wrapper, not the Radix Content root.
+ * The root always applies overflow-hidden and the accordion animations.
+ * To override overflow or animation behavior, wrap this component in an additional element.
+ */
+function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pb-4 type-text-sm text-muted-foreground", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/components/alert.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { cn } from "@alpic-ai/ui/lib/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+import { AlertTriangleIcon } from "lucide-react";
+import type * as React from "react";
+
+const alertVariants = cva(
+  [
+    "w-full rounded-md border px-4 py-3",
+    "grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 items-start",
+    "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:mt-0.5",
+    "[&>:not(svg)]:col-start-2",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "bg-muted border-border [&>svg]:text-muted-foreground",
+        destructive: "bg-destructive/10 border-destructive/30 [&>svg]:text-destructive",
+        warning: "bg-badge-warning/10 border-badge-warning/30 [&>svg]:text-badge-warning",
+        success: "bg-badge-success/10 border-badge-success/30 [&>svg]:text-badge-success",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {}
+
+function Alert({ className, variant, ...props }: AlertProps) {
+  return <div role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
+}
+
+function AlertTitle({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("type-text-sm font-semibold leading-snug", className)} {...props} />;
+}
+
+function AlertDescription({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("type-text-sm text-muted-foreground [&_p]:leading-relaxed", className)} {...props} />;
+}
+
+interface ConvenienceAlertProps {
+  title?: string;
+  description?: React.ReactNode;
+  className?: string;
+}
+
+function ErrorAlert({
+  title = "An unexpected error occurred",
+  description = "Please try again later or contact support if the problem persists.",
+  className,
+}: ConvenienceAlertProps) {
+  return (
+    <Alert variant="destructive" className={className}>
+      <AlertTriangleIcon />
+      <AlertTitle>{title}</AlertTitle>
+      <AlertDescription>{description}</AlertDescription>
+    </Alert>
+  );
+}
+
+function WarningAlert({ title, description, className }: ConvenienceAlertProps) {
+  return (
+    <Alert variant="warning" className={className}>
+      <AlertTriangleIcon />
+      <AlertTitle>{title}</AlertTitle>
+      <AlertDescription>{description}</AlertDescription>
+    </Alert>
+  );
+}
+
+export { Alert, AlertDescription, AlertTitle, ErrorAlert, WarningAlert };