@alpic-ai/ui 0.0.0-dev.cfc1427 → 0.0.0-dev.d0c2830

package/dist/components/avatar.d.mts

@@ -6,7 +6,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/avatar.d.ts
 declare const avatarVariants: (props?: ({
-  size?: "sm" | "lg" | "md" | "xs" | "xl" | null | undefined;
+  size?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
 type AvatarStatus = "online";

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?: "warning" | "success" | "secondary" | "primary" | "error" | null | undefined;
+  variant?: "warning" | "success" | "primary" | "secondary" | "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,14 +5,13 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "destructive" | "secondary" | "primary" | "tertiary" | "link" | "link-muted" | "cta" | null | undefined;
-  size?: "default" | "pill" | "icon" | "icon-rounded" | null | undefined;
+  variant?: "destructive" | "link" | "primary" | "secondary" | "tertiary" | "link-muted" | 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;
   loading?: boolean;
   icon?: React.ReactNode;
-  iconTrailing?: React.ReactNode;
 }
 declare function Button({
   className,
@@ -22,7 +21,6 @@ declare function Button({
   asChild,
   loading,
   icon,
-  iconTrailing,
   disabled,
   children,
   ...props

package/dist/components/button.mjs

@@ -35,14 +35,7 @@ const buttonVariants = cva([
 				"[@media(hover:hover)]:hover:underline",
 				"focus-visible:bg-background"
 			].join(" "),
-			destructive: ["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(" ")
+			destructive: ["bg-destructive text-destructive-foreground", "[@media(hover:hover)]:hover:bg-destructive-hover"].join(" ")
 		},
 		size: {
 			default: "type-text-sm",
@@ -56,7 +49,7 @@ const buttonVariants = cva([
 		size: "default"
 	}
 });
-function Button({ className, variant, size, type = "button", asChild = false, loading = false, icon, iconTrailing, disabled, children, ...props }) {
+function Button({ className, variant, size, type = "button", asChild = false, loading = false, icon, disabled, children, ...props }) {
 	return /* @__PURE__ */ jsxs(asChild ? Slot : "button", {
 		"data-slot": "button",
 		className: cn(buttonVariants({
@@ -67,14 +60,7 @@ function Button({ className, variant, size, type = "button", asChild = false, lo
 		disabled: disabled || loading,
 		"aria-busy": loading || void 0,
 		...props,
-		children: [
-			loading ? /* @__PURE__ */ jsx(Loader2, { className: "motion-safe:animate-spin" }) : icon,
-			asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : children,
-			!loading && iconTrailing ? /* @__PURE__ */ jsx("span", {
-				"data-cta-icon-trailing": true,
-				children: iconTrailing
-			}) : null
-		]
+		children: [loading ? /* @__PURE__ */ jsx(Loader2, { className: "motion-safe:animate-spin" }) : icon, asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : children]
 	});
 }
 //#endregion

package/dist/components/sidebar.mjs

@@ -105,7 +105,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 	}
 	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sidebar",
-		className: cn("bg-sidebar-surface text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
+		className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
 		...props,
 		children
 	});
@@ -117,7 +117,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			"data-sidebar": "sidebar",
 			"data-slot": "sidebar",
 			"data-mobile": "true",
-			className: "bg-sidebar-surface text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+			className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
 			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
 			side,
 			children: [/* @__PURE__ */ jsxs(SheetHeader, {
@@ -141,12 +141,12 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
 		}), /* @__PURE__ */ jsx("div", {
 			"data-slot": "sidebar-container",
-			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", 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", className),
 			...props,
 			children: /* @__PURE__ */ jsx("div", {
 				"data-sidebar": "sidebar",
 				"data-slot": "sidebar-inner",
-				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",
+				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",
 				onClickCapture: handleSurfaceClickCapture,
 				children
 			})

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?: "secondary" | "primary" | null | undefined;
+  variant?: "primary" | "secondary" | null | undefined;
   size?: "sm" | "lg" | "md" | "xl" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface SpinnerProps extends Omit<React.ComponentProps<"svg">, "children">, VariantProps<typeof spinnerVariants> {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-dev.cfc1427",
+  "version": "0.0.0-dev.d0c2830",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {

package/src/components/button.tsx

@@ -46,13 +46,6 @@ 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",
@@ -72,7 +65,6 @@ interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeo
   asChild?: boolean;
   loading?: boolean;
   icon?: React.ReactNode;
-  iconTrailing?: React.ReactNode;
 }
 
 function Button({
@@ -83,7 +75,6 @@ function Button({
   asChild = false,
   loading = false,
   icon,
-  iconTrailing,
   disabled,
   children,
   ...props
@@ -101,7 +92,6 @@ 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/sidebar.tsx

@@ -179,7 +179,7 @@ function Sidebar({
     return (
       <div
         data-slot="sidebar"
-        className={cn("bg-sidebar-surface text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
+        className={cn("bg-sidebar 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-surface text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="bg-sidebar 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)]"
-            : "border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            : "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-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"
+          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"
           onClickCapture={handleSurfaceClickCapture}
         >
           {children}

package/src/stories/button.stories.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, Plus, Sparkles } from "lucide-react";
+import { Plus } from "lucide-react";
 
 import { Button } from "../components/button";
 
@@ -323,28 +323,6 @@ 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/styles/tokens.css

@@ -39,9 +39,6 @@
 
   --color-ring: #f22b79; /* Figma: focus-ring */
 
-  /* cta — decorative gradient accent, used with --color-primary in the CTA button ring */
-  --color-cta-accent: #6eece7; /* Figma: CTA border accent (cyan) */
-
   /* sidebar */
   --color-sidebar: #f8fafa; /* Figma: bg-secondary-subtle */
   --color-sidebar-foreground: #3a4848; /* Figma: fg-secondary */
@@ -157,160 +154,6 @@
   }
 }
 
-/* ─── CTA button — animated conic gradient ring ───────────────────────────── */
-
-@property --cta-angle {
-  syntax: "<angle>";
-  inherits: false;
-  initial-value: 135deg;
-}
-
-@keyframes cta-rotate {
-  to {
-    --cta-angle: 495deg;
-  }
-}
-
-.button-cta {
-  position: relative;
-  isolation: isolate;
-  /* light mode: whisper-of-gradient surface tint + soft rose drop-shadow */
-  background-image: linear-gradient(
-    135deg,
-    color-mix(in oklab, var(--color-primary) 5%, transparent) 0%,
-    color-mix(in oklab, var(--color-cta-accent) 5%, transparent) 100%
-  );
-  box-shadow:
-    0 6px 24px -10px color-mix(in oklab, var(--color-primary) 38%, transparent),
-    0 2px 6px -4px color-mix(in oklab, var(--color-cta-accent) 30%, transparent);
-  transition:
-    box-shadow 400ms ease,
-    transform 300ms ease,
-    filter 300ms ease;
-}
-
-@media (hover: hover) {
-  .button-cta:hover {
-    box-shadow:
-      0 10px 30px -8px color-mix(in oklab, var(--color-primary) 52%, transparent),
-      0 3px 10px -3px color-mix(in oklab, var(--color-cta-accent) 40%, transparent);
-  }
-}
-
-/* dark mode: solid inverted surface, no tint or shadow — let the halo do the work */
-.dark .button-cta {
-  background-image: none;
-  box-shadow: none;
-}
-
-.button-cta::before,
-.button-cta::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  /* Always "running" in browser terms, but paused at rest — freezes at current
-     angle on unhover instead of snapping back. */
-  animation: cta-rotate 3.2s linear infinite;
-  animation-play-state: paused;
-}
-
-/* Gradient ring (masked so only the border shows) */
-.button-cta::before {
-  padding: 1.5px;
-  background: conic-gradient(
-    from var(--cta-angle),
-    var(--color-cta-accent) 0deg,
-    var(--color-primary) 150deg,
-    var(--color-cta-accent) 300deg,
-    var(--color-cta-accent) 360deg
-  );
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  transition: filter 400ms ease;
-}
-
-/* Blurred glow halo behind the button — subtle in light, bolder in dark */
-.button-cta::after {
-  z-index: -1;
-  background: conic-gradient(
-    from var(--cta-angle),
-    var(--color-cta-accent) 0deg,
-    var(--color-primary) 150deg,
-    var(--color-cta-accent) 300deg,
-    var(--color-cta-accent) 360deg
-  );
-  filter: blur(12px);
-  opacity: 0.05;
-  transition: opacity 400ms ease;
-}
-
-.dark .button-cta::after {
-  opacity: 0.14;
-}
-
-@media (hover: hover) {
-  .button-cta:hover::before,
-  .button-cta:hover::after {
-    animation-play-state: running;
-  }
-  .button-cta:hover::before {
-    filter: saturate(1.15) brightness(1.05);
-  }
-  .button-cta:hover::after {
-    opacity: 0.18;
-  }
-  .dark .button-cta:hover::after {
-    opacity: 0.32;
-  }
-}
-
-.button-cta:focus-visible::before,
-.button-cta:focus-visible::after {
-  animation-play-state: running;
-}
-
-.button-cta:disabled::before,
-.button-cta:disabled::after,
-[aria-busy="true"].button-cta::before,
-[aria-busy="true"].button-cta::after {
-  animation-play-state: paused;
-}
-.button-cta:disabled::after {
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .button-cta::before,
-  .button-cta::after {
-    animation: none;
-  }
-}
-
-/* Icon slide on hover (applied to [data-cta-icon-trailing]) */
-.button-cta [data-cta-icon-trailing] {
-  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-@media (hover: hover) {
-  .button-cta:hover [data-cta-icon-trailing] {
-    transform: translateX(2px);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .button-cta [data-cta-icon-trailing] {
-    transition: none;
-  }
-  .button-cta:hover [data-cta-icon-trailing] {
-    transform: none;
-  }
-}
-
 /* ─── Dark mode ───────────────────────────────────────────────────────────── */
 
 .dark {
@@ -348,9 +191,6 @@
 
   --color-ring: #f22b79; /* Figma: focus-ring */
 
-  /* cta — decorative gradient accent, used with --color-primary in the CTA button ring */
-  --color-cta-accent: #6eece7; /* Figma: CTA border accent (cyan) */
-
   /* sidebar */
   --color-sidebar: #0c1c1c; /* Figma: bg-secondary */
   --color-sidebar-foreground: #90a4a4; /* Figma: fg-secondary */
@@ -409,14 +249,6 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
-:root {
-  --gradient-sidebar: linear-gradient(0deg, #c9e2e280 0%, #ffffff 70%); /* Figma: bg-nav-gradiant-light */
-}
-
-.dark {
-  --gradient-sidebar: linear-gradient(0deg, #213535 0%, #121e1e 70%); /* Figma: bg-nav-gradiant-dark */
-}
-
 @layer base {
   * {
     @apply border-border shadow-shadow;
@@ -470,11 +302,6 @@
 
 /* ─── Type preset utilities ───────────────────────────────────────────────── */
 
-@utility bg-sidebar-surface {
-  background-color: var(--color-background);
-  background-image: var(--gradient-sidebar);
-}
-
 @utility type-display-2xl {
   font-family: var(--font-display);
   font-size: var(--font-size-display-2xl);