@alpic-ai/ui 0.0.0-dev.4a35dc7 → 0.0.0-dev.85c8341

package/dist/components/sidebar.mjs

@@ -1,15 +1,15 @@
 "use client";
-import { useIsMobile } from "../hooks/use-mobile.mjs";
 import { cn } from "../lib/cn.mjs";
 import { Button } from "./button.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
 import { Separator } from "./separator.mjs";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.mjs";
+import { useIsMobile } from "../hooks/use-mobile.mjs";
 import { Skeleton } from "./skeleton.mjs";
-import * as React from "react";
 import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 //#region src/components/sidebar.tsx
 const SIDEBAR_COOKIE_NAME = "sidebar_state";

package/dist/components/sonner.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import { Toaster as Toaster$1, toast } from "sonner";
 
 //#region src/components/sonner.d.ts

package/dist/components/switch.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 
 //#region src/components/switch.d.ts

package/dist/components/table.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/table.d.ts
 declare function Table({

package/dist/components/tabs.d.mts

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 

package/dist/components/tabs.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { createContext, use } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { createContext, use } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 //#region src/components/tabs.tsx

package/dist/components/textarea.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/textarea.d.ts
 interface TextareaProps extends React.ComponentProps<"textarea"> {
@@ -7,6 +7,7 @@ interface TextareaProps extends React.ComponentProps<"textarea"> {
   required?: boolean;
   hint?: string;
   error?: string;
+  tooltip?: string;
 }
 declare function Textarea({
   className,
@@ -15,6 +16,7 @@ declare function Textarea({
   required,
   hint,
   error,
+  tooltip,
   ...props
 }: TextareaProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion

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 * as React from "react";
+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

@@ -1,6 +1,6 @@
-import * as React from "react";
 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";
 

package/dist/components/toggle-group.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import * as React from "react";
 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([

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

@@ -1,8 +1,8 @@
 "use client";
 import { Button } from "./button.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
-import { forwardRef } from "react";
 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) => {

package/dist/components/tooltip.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-dev.4a35dc7",
+  "version": "0.0.0-dev.85c8341",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -20,15 +20,13 @@
   },
   "files": [
     "dist",
-    "src/components",
-    "src/hooks",
-    "src/lib",
-    "src/styles/tokens.css"
+    "src"
   ],
   "peerDependencies": {
     "lucide-react": "^1.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.72.1",
     "sonner": "^2.0.0",
     "tailwindcss": "^4.0.0",
     "tw-animate-css": "^1.0.0"
@@ -62,6 +60,7 @@
     "@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",

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(" "),
   {

package/src/components/textarea.tsx

@@ -1,18 +1,21 @@
 "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";
 
 interface TextareaProps extends React.ComponentProps<"textarea"> {
   label?: string;
   required?: boolean;
   hint?: string;
   error?: string;
+  tooltip?: string;
 }
 
-function Textarea({ className, id, label, required, hint, error, ...props }: TextareaProps) {
+function Textarea({ className, id, label, required, hint, error, tooltip, ...props }: TextareaProps) {
   const generatedId = React.useId();
   const fieldId = id ?? generatedId;
 
@@ -51,6 +54,14 @@ function Textarea({ className, id, label, required, hint, error, ...props }: Tex
               *
             </span>
           )}
+          {tooltip && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="size-4 text-muted-foreground" />
+              </TooltipTrigger>
+              <TooltipContent>{tooltip}</TooltipContent>
+            </Tooltip>
+          )}
         </div>
       )}
       {textarea}