@alpic-ai/ui 0.0.0-dev.b616637 → 0.0.0-dev.b627f44

package/dist/components/task-progress.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { Separator } from "./separator.mjs";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/task-progress.tsx
+const REVEAL_CLASSES = "animate-in fade-in slide-in-from-bottom-2 duration-300";
+function TaskProgress({ steps, trailingLabel, stepRevealDelayMs, className, ...props }) {
+	const total = steps.length;
+	const doneCount = steps.filter((step) => step.status === "done").length;
+	const percent = total > 0 ? Math.round(doneCount / total * 100) : 0;
+	const stagger = stepRevealDelayMs != null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "bg-muted h-2 w-full overflow-hidden rounded-full",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "h-full rounded-full bg-success transition-all duration-500",
+				style: { width: `${percent}%` }
+			})
+		}), /* @__PURE__ */ jsxs("div", { children: [steps.map((step, idx) => /* @__PURE__ */ jsxs("div", {
+			className: stagger ? REVEAL_CLASSES : void 0,
+			style: stagger ? {
+				animationDelay: `${idx * (stepRevealDelayMs ?? 0)}ms`,
+				animationFillMode: "both"
+			} : void 0,
+			children: [/* @__PURE__ */ jsx(TaskProgressRow, {
+				label: step.label,
+				status: step.status
+			}), idx < steps.length - 1 && /* @__PURE__ */ jsx(Separator, {})]
+		}, step.id)), trailingLabel && /* @__PURE__ */ jsxs("div", {
+			className: stagger ? REVEAL_CLASSES : void 0,
+			children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsx(TaskProgressRow, {
+				label: trailingLabel,
+				status: "running",
+				muted: true
+			})]
+		})] })]
+	});
+}
+function TaskProgressRow({ label, status, muted }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between py-2",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("type-text-sm", muted && "text-muted-foreground"),
+				children: label
+			}),
+			status === "done" && /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1 type-text-sm text-success",
+				children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }), /* @__PURE__ */ jsx("span", { children: "done" })]
+			}),
+			status === "running" && /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1.5 type-text-sm text-warning",
+				children: [/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-warning" }), /* @__PURE__ */ jsx("span", { children: "running…" })]
+			}),
+			status === "pending" && /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1.5 type-text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full border border-muted-foreground" }), /* @__PURE__ */ jsx("span", { children: "pending" })]
+			})
+		]
+	});
+}
+//#endregion
+export { TaskProgress };

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/dist/components/tooltip.mjs

@@ -26,7 +26,7 @@ function TooltipContent({ className, sideOffset = 6, children, ...props }) {
 	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
 		"data-slot": "tooltip-content",
 		sideOffset,
-		className: cn("bg-inverted text-inverted-foreground dark:bg-subtle dark:text-foreground", "z-50 w-fit rounded-md px-3 py-2 shadow-lg dark:shadow-none dark:drop-shadow-[0_0_0.5px_var(--color-border)]", "type-text-xs font-semibold text-balance text-center", "animate-in fade-in-0 zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-tooltip-content-transform-origin)", className),
+		className: cn("bg-inverted text-inverted-foreground dark:bg-subtle dark:text-foreground", "z-50 w-fit rounded-md px-3 py-2 shadow-lg dark:shadow-none dark:drop-shadow-[0_0_0.5px_var(--color-border)]", "type-text-xs font-semibold text-balance text-center whitespace-pre-line", "animate-in fade-in-0 zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-tooltip-content-transform-origin)", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-inverted fill-inverted dark:bg-subtle dark:fill-subtle z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })]
 	}) });

package/dist/components/wizard.d.mts

@@ -0,0 +1,34 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
+
+//#region src/components/wizard.d.ts
+interface WizardStep {
+  id: string;
+  label: string;
+}
+interface WizardStepsProps {
+  steps: readonly WizardStep[];
+  activeIdx: number;
+  onSelect: (idx: number) => void;
+  ariaLabel?: string;
+  className?: string;
+}
+declare function WizardSteps({
+  steps,
+  activeIdx,
+  onSelect,
+  ariaLabel,
+  className
+}: WizardStepsProps): _$react_jsx_runtime0.JSX.Element;
+interface WizardProgressProps extends React.ComponentProps<"div"> {
+  current: number;
+  total: number;
+}
+declare function WizardProgress({
+  current,
+  total,
+  className,
+  ...props
+}: WizardProgressProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { WizardProgress, type WizardStep, WizardSteps };

package/dist/components/wizard.mjs

@@ -0,0 +1,46 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { TabsNav, TabsNavList, TabsNavTrigger } from "./tabs.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/wizard.tsx
+function WizardSteps({ steps, activeIdx, onSelect, ariaLabel = "Wizard steps", className }) {
+	return /* @__PURE__ */ jsx(TabsNav, {
+		orientation: "vertical",
+		"aria-label": ariaLabel,
+		className,
+		children: /* @__PURE__ */ jsx(TabsNavList, { children: steps.map((step, idx) => /* @__PURE__ */ jsx(TabsNavTrigger, {
+			active: idx === activeIdx,
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onSelect(idx),
+				className: "w-full justify-start text-left",
+				children: step.label
+			})
+		}, step.id)) })
+	});
+}
+function WizardProgress({ current, total, className, ...props }) {
+	const percent = total > 0 ? Math.round(current / total * 100) : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5 px-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex items-center justify-between text-xs",
+			children: [/* @__PURE__ */ jsxs("span", { children: [
+				"Step ",
+				current,
+				"/",
+				total
+			] }), /* @__PURE__ */ jsxs("span", { children: [percent, "%"] })]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "bg-muted h-1.5 overflow-hidden rounded-full",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "bg-primary h-full transition-all",
+				style: { width: `${percent}%` }
+			})
+		})]
+	});
+}
+//#endregion
+export { WizardProgress, WizardSteps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-dev.b616637",
+  "version": "0.0.0-dev.b627f44",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -23,12 +23,12 @@
     "src"
   ],
   "peerDependencies": {
-    "lucide-react": "^1.8.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-hook-form": "^7.72.1",
+    "lucide-react": "^1.14.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.75.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
@@ -52,19 +52,19 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",
-    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/postcss": "^4.3.0",
     "@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.75.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.2",
-    "tsdown": "^0.21.9",
+    "tailwindcss": "^4.3.0",
+    "tsdown": "^0.22.0",
     "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/form.tsx

@@ -14,8 +14,10 @@ import {
 } from "react-hook-form";
 
 import { cn } from "../lib/cn";
+import { Checkbox } from "./checkbox";
 import { Input, type InputProps } from "./input";
 import { Label } from "./label";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 import { Textarea, type TextareaProps } from "./textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
@@ -141,7 +143,7 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="form-description"
       id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground type-text-sm whitespace-pre-line", className)}
       {...props}
     />
   );
@@ -220,10 +222,10 @@ function InputField<TFieldValues extends FieldValues, TName extends FieldPath<TF
               {label}
             </FormLabel>
           )}
+          {description && <FormDescription>{description}</FormDescription>}
           <FormControl>
             <Input {...inputProps} {...field} />
           </FormControl>
-          {description && <FormDescription>{description}</FormDescription>}
           <FormMessage />
         </FormItem>
       )}
@@ -257,10 +259,10 @@ function TextareaField<TFieldValues extends FieldValues, TName extends FieldPath
               {label}
             </FormLabel>
           )}
+          {description && <FormDescription>{description}</FormDescription>}
           <FormControl>
             <Textarea {...textareaProps} {...field} />
           </FormControl>
-          {description && <FormDescription>{description}</FormDescription>}
           <FormMessage />
         </FormItem>
       )}
@@ -303,6 +305,7 @@ function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<T
               {label}
             </FormLabel>
           )}
+          {description && <FormDescription>{description}</FormDescription>}
           <Select value={field.value} onValueChange={field.onChange}>
             <FormControl>
               <SelectTrigger>
@@ -317,7 +320,56 @@ function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<T
               ))}
             </SelectContent>
           </Select>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+interface RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>
+  extends FormFieldBaseProps<TFieldValues, TName> {
+  options: SelectFieldOption[];
+}
+
+function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  required,
+  label,
+  description,
+  tooltip,
+  options,
+}: RadioFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field }) => (
+        <FormItem>
+          {label && (
+            <FormLabel required={required} tooltip={tooltip}>
+              {label}
+            </FormLabel>
+          )}
           {description && <FormDescription>{description}</FormDescription>}
+          <FormControl>
+            <RadioGroup value={field.value ?? ""} onValueChange={field.onChange} onBlur={field.onBlur}>
+              {options.map((option) => {
+                const itemId = `${field.name}-${option.value}`;
+                return (
+                  <div key={option.value} className="flex items-center gap-2">
+                    <RadioGroupItem id={itemId} value={option.value} disabled={option.disabled} />
+                    <Label htmlFor={itemId} className="type-text-sm font-normal">
+                      {option.label}
+                    </Label>
+                  </div>
+                );
+              })}
+            </RadioGroup>
+          </FormControl>
           <FormMessage />
         </FormItem>
       )}
@@ -325,8 +377,116 @@ function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<T
   );
 }
 
+interface ChecklistFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>
+  extends FormFieldBaseProps<TFieldValues, TName> {
+  options: SelectFieldOption[];
+}
+
+function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  required,
+  label,
+  description,
+  tooltip,
+  options,
+}: ChecklistFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field }) => {
+        const selected: string[] = Array.isArray(field.value) ? field.value : [];
+        const toggle = (value: string, checked: boolean) => {
+          if (checked) {
+            field.onChange([...selected, value]);
+          } else {
+            field.onChange(selected.filter((existing) => existing !== value));
+          }
+        };
+        return (
+          <FormItem>
+            {label && (
+              <FormLabel required={required} tooltip={tooltip}>
+                {label}
+              </FormLabel>
+            )}
+            {description && <FormDescription>{description}</FormDescription>}
+            <FormControl>
+              <fieldset className="m-0 flex flex-col gap-2 border-0 p-0" onBlur={field.onBlur}>
+                {options.map((option) => {
+                  const itemId = `${field.name}-${option.value}`;
+                  const checked = selected.includes(option.value);
+                  return (
+                    <div key={option.value} className="flex items-start gap-2">
+                      <Checkbox
+                        id={itemId}
+                        checked={checked}
+                        onCheckedChange={(next) => toggle(option.value, Boolean(next))}
+                        disabled={option.disabled}
+                      />
+                      <Label htmlFor={itemId} className="type-text-sm font-normal leading-tight">
+                        {option.label}
+                      </Label>
+                    </div>
+                  );
+                })}
+              </fieldset>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        );
+      }}
+    />
+  );
+}
+
+interface CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>
+  extends Omit<FormFieldBaseProps<TFieldValues, TName>, "required"> {}
+
+function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  label,
+  description,
+  tooltip,
+}: CheckboxFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field }) => (
+        <FormItem className="gap-1.5">
+          <div className="flex items-start gap-2">
+            <FormControl>
+              <Checkbox
+                checked={field.value ?? false}
+                onCheckedChange={(next) => field.onChange(Boolean(next))}
+                onBlur={field.onBlur}
+              />
+            </FormControl>
+            {label && (
+              <FormLabel tooltip={tooltip} className="font-normal">
+                {label}
+              </FormLabel>
+            )}
+          </div>
+          {description && <FormDescription className="ml-6">{description}</FormDescription>}
+          <FormMessage className="ml-6" />
+        </FormItem>
+      )}
+    />
+  );
+}
+
 export type { SelectFieldOption };
 export {
+  CheckboxField,
+  ChecklistField,
   Form,
   FormControl,
   FormDescription,
@@ -337,6 +497,7 @@ export {
   FormLabel,
   FormMessage,
   InputField,
+  RadioField,
   SelectField,
   TextareaField,
   useFormField,

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}