@alpic-ai/ui 0.0.0-dev.4a35dc7 → 0.0.0-dev.6953a69

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/select.tsx

@@ -2,7 +2,7 @@
 
 import * as SelectPrimitive from "@radix-ui/react-select";
 import type { VariantProps } from "class-variance-authority";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import type * as React from "react";
 
 import { cn } from "../lib/cn";
@@ -75,7 +75,6 @@ function SelectContent({
         position={position}
         {...props}
       >
-        <SelectScrollUpButton />
         <SelectPrimitive.Viewport
           className={cn(
             "p-1",
@@ -85,7 +84,6 @@ function SelectContent({
         >
           {children}
         </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
   );
@@ -110,7 +108,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-2 pr-8 pl-2.5 outline-hidden select-none",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pl-2 outline-hidden select-none",
         "type-text-md font-medium text-foreground mx-1 my-px",
         "[@media(hover:hover)]:hover:bg-background-hover",
         "focus:bg-background-hover",
@@ -142,43 +140,12 @@ function SelectSeparator({ className, ...props }: React.ComponentProps<typeof Se
   );
 }
 
-/* ── Scroll buttons ──────────────────────────────────────────────────────── */
-
-function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  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>
-  );
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  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/src/components/sidebar.tsx

@@ -316,21 +316,19 @@ function SidebarHeader({ className, icon, title, children, ...props }: SidebarHe
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2 group-data-[collapsible=icon]:items-center", className)}
+      className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     >
-      <div className="flex h-8 items-center gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:px-0">
+      <div className="flex h-8 items-center gap-2 px-3">
         <div className="relative shrink-0">
           <span className="transition-opacity group-data-[collapsible=icon]:group-hover:opacity-0">{icon}</span>
           <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-data-[collapsible=icon]:group-hover:opacity-100">
-            <SidebarTrigger className="!size-4 !p-0" />
+            <SidebarTrigger />
           </div>
         </div>
-        {title && (
-          <span className="text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden">
-            {title}
-          </span>
-        )}
+        <span className="text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden">
+          {title}
+        </span>
         <SidebarTrigger className="ml-auto shrink-0 group-data-[collapsible=icon]:hidden" />
       </div>
       {children}
@@ -376,7 +374,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      className={cn("relative flex w-full min-w-0 flex-col", className)}
       {...props}
     />
   );
@@ -453,7 +451,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
+      className={cn("group/menu-item relative px-3", className)}
       {...props}
     />
   );

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}

package/src/stories/accordion-card.stories.tsx

@@ -0,0 +1,53 @@
+import type { Story } from "@ladle/react";
+import {
+  AccordionCard,
+  AccordionCardContent,
+  AccordionCardHeader,
+  AccordionCardTitle,
+} from "../components/accordion-card";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-6 max-w-md">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Default (collapsed)</p>
+      <AccordionCard>
+        <AccordionCardHeader>
+          <AccordionCardTitle>Logs</AccordionCardTitle>
+        </AccordionCardHeader>
+        <AccordionCardContent>Content inside the accordion card.</AccordionCardContent>
+      </AccordionCard>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Default open</p>
+      <AccordionCard defaultOpen>
+        <AccordionCardHeader>
+          <AccordionCardTitle>Build settings</AccordionCardTitle>
+        </AccordionCardHeader>
+        <AccordionCardContent>
+          This card starts open. The chevron rotates to indicate the open state.
+        </AccordionCardContent>
+      </AccordionCard>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Without title component</p>
+      <AccordionCard>
+        <AccordionCardHeader>
+          <span className="type-text-sm font-medium">Environment Variables</span>
+        </AccordionCardHeader>
+        <AccordionCardContent>Header text can be any element, not just AccordionCardTitle.</AccordionCardContent>
+      </AccordionCard>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled</p>
+      <AccordionCard disabled>
+        <AccordionCardHeader>
+          <AccordionCardTitle>Disabled card</AccordionCardTitle>
+        </AccordionCardHeader>
+        <AccordionCardContent>Cannot be opened.</AccordionCardContent>
+      </AccordionCard>
+    </div>
+  </div>
+);

package/src/stories/accordion.stories.tsx

@@ -0,0 +1,65 @@
+import type { Story } from "@ladle/react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/accordion";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-10 max-w-md">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Single (collapsible)</p>
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>What is Alpic?</AccordionTrigger>
+          <AccordionContent>
+            Alpic is a multi-tenant SaaS platform for deploying MCP servers. It handles infrastructure, scaling, and
+            distribution so you can focus on building.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>How do I deploy?</AccordionTrigger>
+          <AccordionContent>
+            Use the Alpic CLI to deploy your MCP server with a single command. The platform handles containerization,
+            routing, and scaling automatically.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>What languages are supported?</AccordionTrigger>
+          <AccordionContent>
+            Any language that can run in a container. TypeScript, Python, Go, Rust, and more are all supported out of
+            the box with pre-built runtime images.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Multiple</p>
+      <Accordion type="multiple" defaultValue={["item-1", "item-3"]}>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>First item (open by default)</AccordionTrigger>
+          <AccordionContent>Content for the first item. Multiple items can be open at the same time.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Second item</AccordionTrigger>
+          <AccordionContent>Content for the second item.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Third item (open by default)</AccordionTrigger>
+          <AccordionContent>Content for the third item.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled</p>
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Enabled item</AccordionTrigger>
+          <AccordionContent>This item can be toggled.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2" disabled>
+          <AccordionTrigger>Disabled item</AccordionTrigger>
+          <AccordionContent>This content cannot be reached.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  </div>
+);