@alpic-ai/ui 0.0.0 → 1.112.0

package/dist/components/textarea.mjs

@@ -1,10 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
 import { Label } from "./label.mjs";
+import { Info } from "lucide-react";
 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 }) {
+function Textarea({ className, id, label, required, hint, error, tooltip, ...props }) {
 	const generatedId = React.useId();
 	const fieldId = id ?? generatedId;
 	const textarea = /* @__PURE__ */ jsx("textarea", {
@@ -21,15 +23,22 @@ function Textarea({ className, id, label, required, hint, error, ...props }) {
 		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: "*"
-				})]
+				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: "*"
+					}),
+					tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Info, { className: "size-4 text-muted-foreground" })
+					}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] })
+				]
 			}),
 			textarea,
 			(hint || error) && /* @__PURE__ */ jsx("p", {

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

@@ -7,7 +7,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 //#region src/components/toggle-group.d.ts
 declare const toggleGroupItemVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "sm" | "default" | null | undefined;
+  size?: "default" | "sm" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ToggleGroupContextValue = VariantProps<typeof toggleGroupItemVariants>;
 declare function ToggleGroup({

package/dist/components/typography.d.mts

@@ -0,0 +1,34 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/typography.d.ts
+declare function H1({
+  children,
+  className
+}: {
+  children: ReactNode;
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function H2({
+  children,
+  className
+}: {
+  children: ReactNode;
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function H3({
+  children,
+  className
+}: {
+  children: ReactNode;
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function H4({
+  children,
+  className
+}: {
+  children: ReactNode;
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { H1, H2, H3, H4 };

package/dist/components/typography.mjs

@@ -0,0 +1,29 @@
+import { cn } from "../lib/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/typography.tsx
+function H1({ children, className }) {
+	return /* @__PURE__ */ jsx("h1", {
+		className: cn("scroll-m-20 type-display-sm font-bold", className),
+		children
+	});
+}
+function H2({ children, className }) {
+	return /* @__PURE__ */ jsx("h2", {
+		className: cn("scroll-m-20 type-display-xs font-semibold", className),
+		children
+	});
+}
+function H3({ children, className }) {
+	return /* @__PURE__ */ jsx("h3", {
+		className: cn("scroll-m-20 type-text-lg font-semibold", className),
+		children
+	});
+}
+function H4({ children, className }) {
+	return /* @__PURE__ */ jsx("h4", {
+		className: cn("scroll-m-20 type-text-md font-semibold", className),
+		children
+	});
+}
+//#endregion
+export { H1, H2, H3, H4 };

package/package.json

@@ -1,53 +1,35 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0",
+  "version": "1.112.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",
+    "./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"
   },
   "files": [
     "dist",
-    "src/components",
-    "src/hooks",
-    "src/lib",
-    "src/styles/tokens.css"
+    "src"
   ],
-  "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"
+    "lucide-react": "^1.7.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.72.1",
+    "sonner": "^2.0.7",
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -78,11 +60,20 @@
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "lucide-react": "^1.7.0",
+    "react-hook-form": "^7.72.1",
     "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"
+  },
+  "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"
   }
-}
+}

package/src/components/combobox.tsx

@@ -349,7 +349,7 @@ function ComboboxItem({ className, children, itemValue, ...props }: ComboboxItem
       data-selected-item={selected || undefined}
       onSelect={() => onSelect(itemValue)}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-2.5 outline-hidden select-none",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-hidden select-none",
         "type-text-md font-medium text-foreground mx-1.5 my-px",
         "data-[selected=true]:bg-background-hover",
         "data-[selected-item]:bg-accent",

package/src/components/dialog.tsx

@@ -37,7 +37,7 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
 const dialogContentVariants = cva(
   [
     "bg-background fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2",
-    "overflow-y-auto rounded-2xl px-6 shadow-lg outline-none",
+    "max-h-[calc(100vh-4rem)] overflow-hidden rounded-2xl px-6 shadow-lg outline-none",
     "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",
@@ -93,7 +93,7 @@ function DialogContent({ className, children, size, showCloseButton = true, ...p
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="dialog-header" className={cn("flex flex-col gap-0.5 pt-6 pr-10", className)} {...props} />;
+  return <div data-slot="dialog-header" className={cn("flex flex-col gap-0.5 py-6 pr-10", className)} {...props} />;
 }
 
 const dialogFooterVariants = cva("pb-6 pt-6", {

package/src/components/form.tsx

@@ -0,0 +1,343 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { Info } from "lucide-react";
+import * as React from "react";
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState,
+} from "react-hook-form";
+
+import { cn } from "../lib/cn";
+import { Input, type InputProps } from "./input";
+import { Label } from "./label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+import { Textarea, type TextareaProps } from "./textarea";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+
+  if (!fieldContext.name) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div data-slot="form-item" className={cn("grid gap-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+}
+
+interface FormLabelProps extends React.ComponentProps<typeof Label> {
+  required?: boolean;
+  tooltip?: string;
+}
+
+function FormLabel({ className, required, tooltip, children, ...props }: FormLabelProps) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <div className="flex items-center gap-0.5">
+      <Label
+        data-slot="form-label"
+        data-error={!!error}
+        className={cn("data-[error=true]:text-destructive", className)}
+        htmlFor={formItemId}
+        {...props}
+      >
+        {children}
+      </Label>
+      {required && (
+        <span aria-hidden className="type-text-sm font-medium text-required">
+          *
+        </span>
+      )}
+      {tooltip && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Info className="size-4 text-quaternary-foreground" />
+          </TooltipTrigger>
+          <TooltipContent>{tooltip}</TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p data-slot="form-message" id={formMessageId} className={cn("text-destructive text-sm", className)} {...props}>
+      {body}
+    </p>
+  );
+}
+
+/* ── Layout components ───────────────────────────────────────────────────── */
+
+interface FormHeaderProps extends React.ComponentProps<"div"> {
+  title: string;
+  description?: string;
+}
+
+function FormHeader({ title, description, className, ...props }: FormHeaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-1", className)} {...props}>
+      <h2 className="type-display-sm font-semibold text-foreground">{title}</h2>
+      {description && <p className="type-text-xl text-subtle-foreground">{description}</p>}
+    </div>
+  );
+}
+
+function FormFields({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("flex flex-col gap-6", className)} {...props} />;
+}
+
+/* ── Convenience field wrappers ─────────────────────────────────────────── */
+
+interface FormFieldBaseProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> {
+  control: ControllerProps<TFieldValues, TName>["control"];
+  name: TName;
+  rules?: ControllerProps<TFieldValues, TName>["rules"];
+  required?: boolean;
+  label?: string;
+  description?: string;
+  tooltip?: string;
+}
+
+interface InputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>
+  extends FormFieldBaseProps<TFieldValues, TName>,
+    Omit<InputProps, "name" | "label"> {}
+
+function InputField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  required,
+  label,
+  description,
+  tooltip,
+  ...inputProps
+}: InputFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field }) => (
+        <FormItem>
+          {label && (
+            <FormLabel required={required} tooltip={tooltip}>
+              {label}
+            </FormLabel>
+          )}
+          <FormControl>
+            <Input {...inputProps} {...field} />
+          </FormControl>
+          {description && <FormDescription>{description}</FormDescription>}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+interface TextareaFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>
+  extends FormFieldBaseProps<TFieldValues, TName>,
+    Omit<TextareaProps, "name" | "label"> {}
+
+function TextareaField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  required,
+  label,
+  description,
+  tooltip,
+  ...textareaProps
+}: TextareaFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field }) => (
+        <FormItem>
+          {label && (
+            <FormLabel required={required} tooltip={tooltip}>
+              {label}
+            </FormLabel>
+          )}
+          <FormControl>
+            <Textarea {...textareaProps} {...field} />
+          </FormControl>
+          {description && <FormDescription>{description}</FormDescription>}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+interface SelectFieldOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SelectFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>
+  extends FormFieldBaseProps<TFieldValues, TName> {
+  options: SelectFieldOption[];
+  placeholder?: string;
+}
+
+function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  required,
+  label,
+  description,
+  tooltip,
+  options,
+  placeholder,
+}: SelectFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field }) => (
+        <FormItem>
+          {label && (
+            <FormLabel required={required} tooltip={tooltip}>
+              {label}
+            </FormLabel>
+          )}
+          <Select value={field.value} onValueChange={field.onChange}>
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder={placeholder} />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              {options.map((option) => (
+                <SelectItem key={option.value} value={option.value} disabled={option.disabled}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {description && <FormDescription>{description}</FormDescription>}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export type { SelectFieldOption };
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormFields,
+  FormHeader,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  InputField,
+  SelectField,
+  TextareaField,
+  useFormField,
+};

package/src/components/input.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+import { Info } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../lib/cn";
 import { Label } from "./label";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 
 const inputSizeStyles = {
   sm: {
@@ -29,6 +31,7 @@ interface InputProps extends Omit<React.ComponentProps<"input">, "size"> {
   required?: boolean;
   hint?: string;
   error?: string;
+  tooltip?: string;
   leadingText?: string;
   leadingIcon?: React.ReactNode;
   size?: "sm" | "md";
@@ -41,6 +44,7 @@ function Input({
   required,
   hint,
   error,
+  tooltip,
   leadingText,
   leadingIcon,
   size = "md",
@@ -126,6 +130,14 @@ function Input({
               *
             </span>
           )}
+          {tooltip && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="size-4 text-muted-foreground" />
+              </TooltipTrigger>
+              <TooltipContent>{tooltip}</TooltipContent>
+            </Tooltip>
+          )}
         </div>
       )}
       {wrappedInput}

package/src/components/select-trigger-variants.ts

@@ -12,6 +12,7 @@ export const selectTriggerVariants = cva(
     "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
     "data-[state=open]:ring-2 data-[state=open]:ring-ring data-[state=open]:ring-offset-2 data-[state=open]:ring-offset-background",
     "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground disabled:border-disabled",
+    "aria-invalid:border-border-error",
     "[&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0",
   ].join(" "),
   {