@alpic-ai/ui 0.0.0-dev.c31638e → 0.0.0-dev.c32f1dd

package/dist/components/spinner.d.mts

@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/spinner.d.ts
 declare const spinnerVariants: (props?: ({
-  variant?: "primary" | "secondary" | null | undefined;
+  variant?: "secondary" | "primary" | null | undefined;
   size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface SpinnerProps extends Omit<React.ComponentProps<"svg">, "children">, VariantProps<typeof spinnerVariants> {}

package/dist/components/status-dot.d.mts

@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/status-dot.d.ts
 declare const statusDotVariants: (props?: ({
-  variant?: "destructive" | "success" | "warning" | "muted" | null | undefined;
+  variant?: "destructive" | "warning" | "success" | "muted" | null | undefined;
   pulse?: boolean | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface StatusDotProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statusDotVariants> {}

package/dist/components/switch.d.mts

@@ -1,5 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 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_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/table.d.ts
 declare function Table({
@@ -26,10 +26,19 @@ declare function TableHead({
   className,
   ...props
 }: React.ComponentProps<"th">): _$react_jsx_runtime0.JSX.Element;
+interface TableCellProps extends React.ComponentProps<"td"> {
+  /**
+   * When true, the cell renders edge-to-edge so the child can act as the
+   * interactive surface (e.g. a button or popover trigger filling the cell).
+   * Defaults to false (standard padded cell).
+   */
+  interactive?: boolean;
+}
 declare function TableCell({
   className,
+  interactive,
   ...props
-}: React.ComponentProps<"td">): _$react_jsx_runtime0.JSX.Element;
+}: TableCellProps): _$react_jsx_runtime0.JSX.Element;
 declare function TableCaption({
   className,
   ...props

package/dist/components/table.mjs

@@ -47,10 +47,10 @@ function TableHead({ className, ...props }) {
 		...props
 	});
 }
-function TableCell({ className, ...props }) {
+function TableCell({ className, interactive = false, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("px-6 py-2 align-middle", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3", className),
+		className: cn("align-middle", interactive ? "h-px p-0" : "px-6 py-2", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3", className),
 		...props
 	});
 }

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_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/textarea.d.ts
 interface TextareaProps extends React.ComponentProps<"textarea"> {

package/dist/components/textarea.mjs

@@ -2,9 +2,9 @@
 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, tooltip, ...props }) {
 	const generatedId = React.useId();

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 { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 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_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 //#region src/components/tooltip.d.ts

package/dist/components/typography.d.mts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-dev.c31638e",
+  "version": "0.0.0-dev.c32f1dd",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -23,12 +23,12 @@
     "src"
   ],
   "peerDependencies": {
-    "lucide-react": "^1.8.0",
+    "lucide-react": "^1.14.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "react-hook-form": "^7.72.1",
+    "react-hook-form": "^7.74.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.2.4",
     "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
@@ -56,15 +56,15 @@
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",
-    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/postcss": "^4.2.4",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.8.0",
-    "react-hook-form": "^7.72.1",
+    "lucide-react": "^1.14.0",
+    "react-hook-form": "^7.74.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.2",
-    "tsdown": "^0.21.9",
+    "tailwindcss": "^4.2.4",
+    "tsdown": "^0.21.10",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   },

package/src/components/button.tsx

@@ -46,6 +46,13 @@ const buttonVariants = cva(
           "bg-destructive text-destructive-foreground",
           "[@media(hover:hover)]:hover:bg-destructive-hover",
         ].join(" "),
+        cta: [
+          "button-cta",
+          "h-9 px-4 gap-2 rounded-md",
+          "dark:bg-inverted text-foreground",
+          "transition-[transform,filter] duration-300 ease-out",
+          "active:scale-[0.99]",
+        ].join(" "),
       },
       size: {
         default: "type-text-sm",
@@ -65,6 +72,7 @@ interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeo
   asChild?: boolean;
   loading?: boolean;
   icon?: React.ReactNode;
+  iconTrailing?: React.ReactNode;
 }
 
 function Button({
@@ -75,6 +83,7 @@ function Button({
   asChild = false,
   loading = false,
   icon,
+  iconTrailing,
   disabled,
   children,
   ...props
@@ -92,6 +101,7 @@ function Button({
     >
       {loading ? <Loader2 className="motion-safe:animate-spin" /> : icon}
       {asChild ? <Slottable>{children}</Slottable> : children}
+      {!loading && iconTrailing ? <span data-cta-icon-trailing>{iconTrailing}</span> : null}
     </Comp>
   );
 }

package/src/components/combobox.tsx

@@ -84,7 +84,9 @@ function Combobox(props: ComboboxProps) {
 
   const onOpenChange = useCallback(
     (newOpen: boolean) => {
-      if (!isOpenControlled) setUncontrolledOpen(newOpen);
+      if (!isOpenControlled) {
+        setUncontrolledOpen(newOpen);
+      }
       controlledOnOpenChange?.(newOpen);
     },
     [isOpenControlled, controlledOnOpenChange],
@@ -105,7 +107,9 @@ function Combobox(props: ComboboxProps) {
 
   const isSelected = useCallback(
     (itemValue: string) => {
-      if (multiple) return multiValues.includes(itemValue);
+      if (multiple) {
+        return multiValues.includes(itemValue);
+      }
       return singleValue === itemValue;
     },
     [multiple, singleValue, multiValues],
@@ -123,11 +127,15 @@ function Combobox(props: ComboboxProps) {
         const next = multiValues.includes(itemValue)
           ? multiValues.filter((val) => val !== itemValue)
           : [...multiValues, itemValue];
-        if (!isControlledMulti) setUncontrolledMultiValue(next);
+        if (!isControlledMulti) {
+          setUncontrolledMultiValue(next);
+        }
         onValueChangeMulti?.(next);
         // Stay open in multi mode
       } else {
-        if (!isControlledSingle) setUncontrolledSingleValue(itemValue);
+        if (!isControlledSingle) {
+          setUncontrolledSingleValue(itemValue);
+        }
         onValueChangeSingle?.(itemValue);
         onOpenChange(false);
       }
@@ -145,9 +153,13 @@ function Combobox(props: ComboboxProps) {
 
   const onDeselect = useCallback(
     (itemValue: string) => {
-      if (!multiple) return;
+      if (!multiple) {
+        return;
+      }
       const next = multiValues.filter((val) => val !== itemValue);
-      if (!isControlledMulti) setUncontrolledMultiValue(next);
+      if (!isControlledMulti) {
+        setUncontrolledMultiValue(next);
+      }
       onValueChangeMulti?.(next);
     },
     [multiple, isControlledMulti, onValueChangeMulti, multiValues],

package/src/components/page-loader.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "../lib/cn";
+
+const CABLE_CAR_SVG = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 120 130"
+    width="240"
+    height="260"
+    aria-hidden="true"
+    className="block h-auto w-full"
+  >
+    <line x1="60" y1="3" x2="60" y2="58" stroke="#333" strokeWidth="4" />
+    <circle cx="60" cy="11" r="10" fill="#555" />
+    <rect x="5" y="58" width="110" height="64" rx="4" fill="#e90060" />
+    <rect x="5" y="58" width="110" height="20" rx="4" fill="#F5F0E8" />
+    <rect x="5" y="68" width="110" height="10" fill="#F5F0E8" />
+    <rect x="14" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
+    <rect x="47" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
+    <rect x="80" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
+    <rect x="5" y="115" width="110" height="7" rx="3" fill="#9f0042" />
+  </svg>
+);
+
+interface PageLoaderProps {
+  className?: string;
+}
+
+function PageLoader({ className }: PageLoaderProps) {
+  return (
+    <div
+      className={cn("flex min-h-screen items-center justify-center bg-background", className)}
+      role="status"
+      aria-label="Loading Alpic…"
+    >
+      <div className="relative h-[120px] w-[200px]">
+        <div
+          className="absolute top-[30px] left-0 h-[3px] w-full rounded-sm bg-[#6c6c77]"
+          style={{ transform: "rotate(-15deg)", transformOrigin: "left center" }}
+        />
+        <div className="absolute top-[33px] -left-[45px] w-[45px] motion-safe:animate-[alpic-ride_4s_linear_infinite]">
+          {CABLE_CAR_SVG}
+        </div>
+        <div
+          className="pointer-events-none absolute -top-[40px] -left-[45px] z-10 h-[200px] w-[95px]"
+          style={{ background: "linear-gradient(to right, var(--color-background) 47%, transparent)" }}
+        />
+        <div
+          className="pointer-events-none absolute -top-[40px] left-[142px] z-10 h-[200px] w-[95px]"
+          style={{ background: "linear-gradient(to right, transparent, var(--color-background) 53%)" }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export type { PageLoaderProps };
+export { PageLoader };

package/src/components/shimmer-text.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type React from "react";
+
+import { cn } from "../lib/cn";
+
+const shimmerStyle: React.CSSProperties = {
+  background: `linear-gradient(90deg, #0000 calc(50% - 60px), var(--color-foreground), #0000 calc(50% + 60px)), linear-gradient(color-mix(in oklab, var(--color-muted-foreground) 70%, transparent), color-mix(in oklab, var(--color-muted-foreground) 70%, transparent))`,
+  backgroundSize: "250% 100%, auto",
+  backgroundRepeat: "no-repeat, padding-box",
+  WebkitBackgroundClip: "text",
+  WebkitTextFillColor: "transparent",
+  backgroundClip: "text",
+  animation: "shimmer-text 2.5s linear infinite",
+};
+
+export function ShimmerText({ children, className }: { children: string | number; className?: string }) {
+  return (
+    <span className={cn(className)} style={shimmerStyle}>
+      {children}
+    </span>
+  );
+}

package/src/components/sidebar.tsx

@@ -179,7 +179,7 @@ function Sidebar({
     return (
       <div
         data-slot="sidebar"
-        className={cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
+        className={cn("bg-sidebar-surface text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
         {...props}
       >
         {children}
@@ -194,7 +194,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="bg-sidebar-surface text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -243,7 +243,7 @@ function Sidebar({
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            : "border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
           className,
         )}
         {...props}
@@ -251,7 +251,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full cursor-pointer flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          className="bg-sidebar-surface group-data-[variant=floating]:border-sidebar-border flex h-full w-full cursor-pointer flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
           onClickCapture={handleSurfaceClickCapture}
         >
           {children}

package/src/components/table.tsx

@@ -66,11 +66,25 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
   );
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+interface TableCellProps extends React.ComponentProps<"td"> {
+  /**
+   * When true, the cell renders edge-to-edge so the child can act as the
+   * interactive surface (e.g. a button or popover trigger filling the cell).
+   * Defaults to false (standard padded cell).
+   */
+  interactive?: boolean;
+}
+
+function TableCell({ className, interactive = false, ...props }: TableCellProps) {
   return (
     <td
       data-slot="table-cell"
-      className={cn("px-6 py-2 align-middle", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3", className)}
+      className={cn(
+        "align-middle",
+        interactive ? "h-px p-0" : "px-6 py-2",
+        "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3",
+        className,
+      )}
       {...props}
     />
   );

package/src/hooks/use-copy-to-clipboard.ts

@@ -8,7 +8,9 @@ export function useCopyToClipboard({ resetDelay = 2000 }: { resetDelay?: number
 
   useEffect(() => {
     return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     };
   }, []);
 
@@ -16,7 +18,9 @@ export function useCopyToClipboard({ resetDelay = 2000 }: { resetDelay?: number
     (text: string) => {
       navigator.clipboard.writeText(text).then(() => {
         setIsCopied(true);
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
         timeoutRef.current = setTimeout(() => setIsCopied(false), resetDelay);
       });
     },

package/src/stories/button.stories.tsx

@@ -1,4 +1,4 @@
-import { Plus } from "lucide-react";
+import { ArrowRight, Plus, Sparkles } from "lucide-react";
 
 import { Button } from "../components/button";
 
@@ -323,6 +323,28 @@ export const AllVariants = () => {
         </Button>
       </div>
 
+      {/* ── CTA (animated gradient ring) ────────────────────────────────── */}
+      <span className={SECTION_HEADER}>CTA — animated</span>
+      <p className="type-text-xs text-muted-foreground -mt-2 max-w-md">
+        Hover to rotate the conic gradient around the border and ignite the soft halo.
+      </p>
+
+      <div className="flex items-center gap-6">
+        <Button variant="cta" iconTrailing={<ArrowRight />}>
+          Get started
+        </Button>
+        <Button variant="cta" icon={<Sparkles />} iconTrailing={<ArrowRight />}>
+          Launch server
+        </Button>
+        <Button variant="cta">Deploy now</Button>
+        <Button variant="cta" iconTrailing={<ArrowRight />} disabled>
+          Disabled
+        </Button>
+        <Button variant="cta" iconTrailing={<ArrowRight />} loading>
+          Deploying
+        </Button>
+      </div>
+
       {/* ── asChild ─────────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>asChild</span>
 

package/src/stories/table.stories.tsx

@@ -190,8 +190,8 @@ export const AllVariants: Story = () => (
           </TableRow>
         </TableHeader>
         <TableBody>
-          {USERS.slice(0, 3).map((user, i) => (
-            <TableRow key={user.id} data-state={i === 1 ? "selected" : undefined}>
+          {USERS.slice(0, 3).map((user, index) => (
+            <TableRow key={user.id} data-state={index === 1 ? "selected" : undefined}>
               <TableCell className="font-medium text-foreground">{user.name}</TableCell>
               <TableCell className="text-subtle-foreground">{user.role}</TableCell>
               <TableCell className="text-subtle-foreground">{user.email}</TableCell>