@alpic-ai/ui 0.0.0-staging.ddb67e5 → 0.0.0-staging.de3b169

package/dist/components/alert.d.mts

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/alert.d.ts
 declare const alertVariants: (props?: ({
-  variant?: "default" | "success" | "destructive" | "warning" | null | undefined;
+  variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {}
 declare function Alert({

package/dist/components/badge.d.mts

@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "success" | "warning" | "primary" | "secondary" | "error" | null | undefined;
+  variant?: "warning" | "success" | "secondary" | "primary" | "error" | null | undefined;
   size?: "sm" | "md" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}

package/dist/components/button.d.mts

@@ -5,8 +5,8 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "destructive" | "primary" | "secondary" | "tertiary" | "link" | "link-muted" | "cta" | null | undefined;
-  size?: "default" | "pill" | "icon" | "icon-rounded" | null | undefined;
+  variant?: "destructive" | "secondary" | "primary" | "tertiary" | "link" | "link-muted" | "cta" | null | undefined;
+  size?: "default" | "icon" | "icon-rounded" | "pill" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
   asChild?: boolean;

package/dist/components/page-loader.d.mts

@@ -0,0 +1,11 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/page-loader.d.ts
+interface PageLoaderProps {
+  className?: string;
+}
+declare function PageLoader({
+  className
+}: PageLoaderProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageLoader, type PageLoaderProps };

package/dist/components/page-loader.mjs

@@ -0,0 +1,122 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/page-loader.tsx
+const CABLE_CAR_SVG = /* @__PURE__ */ jsxs("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",
+	children: [
+		/* @__PURE__ */ jsx("line", {
+			x1: "60",
+			y1: "3",
+			x2: "60",
+			y2: "58",
+			stroke: "#333",
+			strokeWidth: "4"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "60",
+			cy: "11",
+			r: "10",
+			fill: "#555"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "5",
+			y: "58",
+			width: "110",
+			height: "64",
+			rx: "4",
+			fill: "#e90060"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "5",
+			y: "58",
+			width: "110",
+			height: "20",
+			rx: "4",
+			fill: "#F5F0E8"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "5",
+			y: "68",
+			width: "110",
+			height: "10",
+			fill: "#F5F0E8"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "14",
+			y: "66",
+			width: "26",
+			height: "30",
+			rx: "2",
+			fill: "#5B8EC9",
+			stroke: "#C4B9A8",
+			strokeWidth: "1.5"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "47",
+			y: "66",
+			width: "26",
+			height: "30",
+			rx: "2",
+			fill: "#5B8EC9",
+			stroke: "#C4B9A8",
+			strokeWidth: "1.5"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "80",
+			y: "66",
+			width: "26",
+			height: "30",
+			rx: "2",
+			fill: "#5B8EC9",
+			stroke: "#C4B9A8",
+			strokeWidth: "1.5"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "5",
+			y: "115",
+			width: "110",
+			height: "7",
+			rx: "3",
+			fill: "#9f0042"
+		})
+	]
+});
+function PageLoader({ className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-h-screen items-center justify-center bg-background", className),
+		role: "status",
+		"aria-label": "Loading Alpic…",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative h-[120px] w-[200px]",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-[30px] left-0 h-[3px] w-full rounded-sm bg-[#6c6c77]",
+					style: {
+						transform: "rotate(-15deg)",
+						transformOrigin: "left center"
+					}
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-[33px] -left-[45px] w-[45px] motion-safe:animate-[alpic-ride_4s_linear_infinite]",
+					children: CABLE_CAR_SVG
+				}),
+				/* @__PURE__ */ jsx("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)" }
+				}),
+				/* @__PURE__ */ jsx("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%)" }
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { PageLoader };

package/dist/components/shimmer-text.d.mts

@@ -0,0 +1,12 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/shimmer-text.d.ts
+declare function ShimmerText({
+  children,
+  className
+}: {
+  children: string | number;
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ShimmerText };

package/dist/components/shimmer-text.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/shimmer-text.tsx
+const shimmerStyle = {
+	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"
+};
+function ShimmerText({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(className),
+		style: shimmerStyle,
+		children
+	});
+}
+//#endregion
+export { ShimmerText };

package/dist/components/sidebar.d.mts

@@ -108,7 +108,7 @@ declare function SidebarMenuItem({
 }: React.ComponentProps<"li">): _$react_jsx_runtime0.JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "sm" | "lg" | "default" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function SidebarMenuButton({
   asChild,

package/dist/components/skeleton.d.mts

@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/skeleton.d.ts
 declare const skeletonVariants: (props?: ({
-  shape?: "circle" | "rectangle" | null | undefined;
+  shape?: "rectangle" | "circle" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.ComponentProps<"div">, VariantProps<typeof skeletonVariants> {}
 declare function Skeleton({

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?: "success" | "destructive" | "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/table.d.mts

@@ -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

@@ -6,7 +6,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/tabs.d.ts
 declare const tabsTriggerVariants: (props?: ({
-  variant?: "default" | "line" | "pill" | null | undefined;
+  variant?: "default" | "pill" | "line" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Tabs({
   className,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-staging.ddb67e5",
+  "version": "0.0.0-staging.de3b169",
   "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.73.1",
+    "react-hook-form": "^7.74.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.3",
+    "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.3",
+    "@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.73.1",
+    "lucide-react": "^1.14.0",
+    "react-hook-form": "^7.74.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.3",
-    "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/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/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/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>

package/src/styles/tokens.css

@@ -113,6 +113,24 @@
   --animate-beacon-ring-pulse: beacon-ring-pulse 2.2s ease-in-out infinite;
 }
 
+@keyframes shimmer-text {
+  from {
+    background-position: 100% center;
+  }
+  to {
+    background-position: 0% center;
+  }
+}
+
+@keyframes alpic-ride {
+  0% {
+    transform: translate(0px, 0px);
+  }
+  100% {
+    transform: translate(237px, -64px);
+  }
+}
+
 @keyframes accordion-down {
   from {
     height: 0;
@@ -146,14 +164,12 @@
 @keyframes beacon-ring-pulse {
   0%,
   100% {
-    opacity: 0.88;
+    opacity: 0.55;
     transform: scale(1);
-    filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
   }
   50% {
-    opacity: 1;
+    opacity: 0.9;
     transform: scale(1.02);
-    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.24));
   }
 }