@olwiba/cn 0.1.24 → 0.1.26

package/dist/index.d.ts

@@ -120,7 +120,7 @@ declare const badgeVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     disabled?: boolean;
-    mode?: "playful" | "smooth";
+    mode?: "playful";
 }
 declare function Badge({ className, variant, size, disabled, mode: modeProp, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
@@ -945,10 +945,16 @@ declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<Omit<ToggleGrou
 interface AsciiTextProps {
     text?: string;
     accent?: string;
+    accents?: Array<{
+        text: string;
+        color: string;
+    }>;
+    shine?: string;
+    shineColor?: string;
     color?: string;
     accentColor?: string;
 }
-declare function AsciiText({ text, accent, color, accentColor, }: AsciiTextProps): react_jsx_runtime.JSX.Element;
+declare function AsciiText({ text, accent, accents, shine, shineColor, color, accentColor, }: AsciiTextProps): react_jsx_runtime.JSX.Element;
 
 declare function useIsMobile(): boolean;
 
@@ -986,7 +992,11 @@ declare function ThemeScript(): react_jsx_runtime.JSX.Element;
 
 interface EnchantedProps extends React$1.HTMLAttributes<HTMLDivElement> {
     children: React$1.ReactNode;
+    /** Only show the glints while the wrapper is hovered. */
+    hoverOnly?: boolean;
+    /** Overrides the glint colour (defaults to text-primary). */
+    glintClassName?: string;
 }
-declare function Enchanted({ children, className, ...props }: EnchantedProps): react_jsx_runtime.JSX.Element;
+declare function Enchanted({ children, className, hoverOnly, glintClassName, ...props }: EnchantedProps): react_jsx_runtime.JSX.Element;
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AsciiText, type AsciiTextProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, type ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type ConfettiOptions, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Enchanted, type EnchantedProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SliderProps, Spinner, StatusIndicator, type StatusIndicatorProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, ThemeScript, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UIVariant, UIVariantProvider, badgeVariants, buttonGroupVariants, buttonVariants, cn, fireConfetti, navigationMenuTriggerStyle, statusIndicatorDotVariants, toggleVariants, useCopyToClipboard, useFormField, useIsMobile, useSidebar, useUIVariant };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React37 from 'react';
-import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import { useMemo, useCallback, useRef, useState, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDown, ArrowLeft, ArrowRight, Check, X, Search, ChevronRight, Circle, Dot, ChevronUp, PanelLeft, MoreHorizontal, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ChevronLeft, GripVertical, LoaderCircle, OctagonX, TriangleAlert, Info, CircleCheck, Loader2Icon } from 'lucide-react';
@@ -475,16 +475,50 @@ var badgeVariants = cva(
     }
   }
 );
+var playfulBackdrop = {
+  default: "bg-primary/30 dark:bg-primary/20",
+  destructive: "bg-destructive/30 dark:bg-destructive/20",
+  secondary: "bg-foreground/10 dark:bg-foreground/10",
+  outline: "bg-foreground/10 dark:bg-foreground/10"
+};
 function Badge({ className, variant, size, disabled = false, mode: modeProp, ...props }) {
   const mode = modeProp ?? useUIVariant();
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "group/playful relative inline-flex",
+          disabled && "opacity-50 pointer-events-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "absolute inset-0 rounded-full transition-transform duration-200 translate-x-[3px] translate-y-[3px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg] group-hover/playful:scale-[1.01]",
+                playfulBackdrop[variant ?? "default"]
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(badgeVariants({ variant, size }), "relative rotate-[0.3deg]", className),
+              ...props
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
         badgeVariants({ variant, size }),
         disabled && "opacity-50 pointer-events-none",
-        mode === "smooth" && "shadow-sm",
-        mode === "playful" && "rotate-[0.5deg] [box-shadow:2px_2px_0px_0px_color-mix(in_srgb,currentColor_15%,transparent)]",
         className
       ),
       ...props
@@ -2603,20 +2637,33 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 var Input = React37.forwardRef(
   ({ className, type, mode: modeProp, ...props }, ref) => {
     const mode = modeProp ?? useUIVariant();
-    return /* @__PURE__ */ jsx(
+    const input = /* @__PURE__ */ jsx(
       "input",
       {
         type,
         className: cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/20",
           mode === "smooth" && "rounded-full",
-          mode === "playful" && "rotate-[0.3deg] [box-shadow:3px_3px_0px_0px_color-mix(in_srgb,currentColor_12%,transparent)]",
+          mode === "playful" && "relative z-10",
           className
         ),
         ref,
         ...props
       }
     );
+    if (mode === "playful") {
+      return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex w-full", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 z-0 translate-x-[3px] translate-y-[3px] -rotate-[0.4deg] rounded-md bg-foreground/8 transition-transform duration-200 group-hover/playful:-rotate-[1deg] group-focus-within/playful:-rotate-[1deg] dark:bg-foreground/10"
+          }
+        ),
+        input
+      ] });
+    }
+    return input;
   }
 );
 Input.displayName = "Input";
@@ -5260,16 +5307,30 @@ function composeAsciiText(font, text) {
 function getAsciiAccentColumns(font, text, accent) {
   if (!accent) return /* @__PURE__ */ new Set();
   const columns = /* @__PURE__ */ new Set();
+  const accentRanges = [];
+  let searchFrom = 0;
+  while (true) {
+    const idx = text.indexOf(accent, searchFrom);
+    if (idx === -1) break;
+    accentRanges.push({ start: idx, end: idx + accent.length });
+    searchFrom = idx + 1;
+  }
+  if (accentRanges.length === 0) return columns;
   let offsetX = 0;
+  let charIndex = 0;
   for (const ch of text) {
     const code = ch.charCodeAt(0);
     const glyph = font.chars.get(code) ?? font.chars.get(32);
-    if (!glyph) continue;
+    if (!glyph) {
+      charIndex++;
+      continue;
+    }
     const width = Math.max(...glyph.map((line) => line.length));
-    if (accent.includes(ch)) {
+    if (accentRanges.some((r) => charIndex >= r.start && charIndex < r.end)) {
       for (let col = 0; col < width; col++) columns.add(offsetX + col);
     }
     offsetX += width;
+    charIndex++;
   }
   return columns;
 }
@@ -6526,6 +6587,9 @@ $$$@@
 function AsciiText({
   text = "olwibaCN",
   accent = "",
+  accents,
+  shine = "",
+  shineColor = "rgba(255,255,255,0.92)",
   color,
   accentColor
 }) {
@@ -6534,6 +6598,26 @@ function AsciiText({
   const accentCols = useMemo(() => {
     return getAsciiAccentColumns(font, text, accent);
   }, [font, text, accent]);
+  const multiAccentCols = useMemo(() => {
+    if (!accents?.length) return null;
+    const map = /* @__PURE__ */ new Map();
+    for (const item of accents) {
+      const cols2 = getAsciiAccentColumns(font, text, item.text);
+      for (const col of cols2) map.set(col, item.color);
+    }
+    return map;
+  }, [accents, font, text]);
+  const getCellColor = useCallback((col, baseColor, highlightColor) => {
+    return multiAccentCols?.get(col) ?? (accentCols.has(col) ? highlightColor : baseColor);
+  }, [accentCols, multiAccentCols]);
+  const shineCols = useMemo(() => {
+    return getAsciiAccentColumns(font, text, shine);
+  }, [font, shine, text]);
+  const shineBounds = useMemo(() => {
+    if (!shineCols.size) return null;
+    const cols2 = Array.from(shineCols);
+    return { min: Math.min(...cols2), max: Math.max(...cols2) };
+  }, [shineCols]);
   const canvasRef = useRef(null);
   const animRef = useRef(0);
   const timeRef = useRef(0);
@@ -6584,24 +6668,46 @@ function AsciiText({
     const time = timeRef.current;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     const { base: baseColor, accent: highlightColor } = colorsRef.current;
-    renderAsciiFrameToContext(ctx, { cells, cols, rows }, {
-      accentColumns: accentCols,
-      color: baseColor,
-      accentColor: highlightColor,
-      time,
-      pointer: mouseRef.current,
-      waves: wavesRef.current
-    });
+    if (multiAccentCols || shineCols.size) {
+      for (const cell of cells) {
+        const intensity = getAsciiCellIntensity(cell, {
+          time,
+          pointer: mouseRef.current,
+          waves: wavesRef.current
+        });
+        ctx.globalAlpha = intensity;
+        ctx.fillStyle = getCellColor(cell.col, baseColor, highlightColor);
+        ctx.fillRect(cell.col * ASCII_CHAR_WIDTH, cell.row * ASCII_CHAR_HEIGHT, ASCII_CHAR_WIDTH, ASCII_CHAR_HEIGHT);
+        if (shineBounds && shineCols.has(cell.col)) {
+          const alpha = getShineAlpha(cell.col, cell.row, time, shineBounds) * (cell.ch === "\u2591" ? 0.55 : 1);
+          if (alpha > 0) {
+            ctx.globalAlpha = intensity * alpha;
+            ctx.fillStyle = shineColor;
+            ctx.fillRect(cell.col * ASCII_CHAR_WIDTH, cell.row * ASCII_CHAR_HEIGHT, ASCII_CHAR_WIDTH, ASCII_CHAR_HEIGHT);
+          }
+        }
+      }
+      ctx.globalAlpha = 1;
+    } else {
+      renderAsciiFrameToContext(ctx, { cells, cols, rows }, {
+        accentColumns: accentCols,
+        color: baseColor,
+        accentColor: highlightColor,
+        time,
+        pointer: mouseRef.current,
+        waves: wavesRef.current
+      });
+    }
     if (!hasPaintedRef.current) {
       hasPaintedRef.current = true;
       setIsCanvasReady(true);
     }
     wavesRef.current = wavesRef.current.filter((w) => time - w.t < 3);
-  }, [cells, accentCols, cols, rows]);
+  }, [accentCols, cells, cols, getCellColor, multiAccentCols, rows, shineBounds, shineColor, shineCols]);
   useEffect(() => {
     hasPaintedRef.current = false;
     setIsCanvasReady(false);
-  }, [text, accent, color, accentColor]);
+  }, [text, accent, accents, shine, shineColor, color, accentColor]);
   useEffect(() => {
     let running = true;
     const loop = () => {
@@ -6666,18 +6772,32 @@ function AsciiText({
             preserveAspectRatio: "xMidYMid meet",
             children: cells.map((cell) => {
               const isAccent = accentCols.has(cell.col);
-              return /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x: cell.col * ASCII_CHAR_WIDTH,
-                  y: cell.row * ASCII_CHAR_HEIGHT,
-                  width: ASCII_CHAR_WIDTH,
-                  height: ASCII_CHAR_HEIGHT,
-                  fill: isAccent ? fallbackAccentColor : "currentColor",
-                  opacity: cell.ch === "\u2591" ? 0.15 : 0.78
-                },
-                `${cell.col}-${cell.row}`
-              );
+              const multiAccentColor = multiAccentCols?.get(cell.col);
+              const shineAlpha = shineBounds && shineCols.has(cell.col) ? getShineAlpha(cell.col, cell.row, 0.2, shineBounds) * (cell.ch === "\u2591" ? 0.55 : 1) : 0;
+              return /* @__PURE__ */ jsxs(React37.Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: cell.col * ASCII_CHAR_WIDTH,
+                    y: cell.row * ASCII_CHAR_HEIGHT,
+                    width: ASCII_CHAR_WIDTH,
+                    height: ASCII_CHAR_HEIGHT,
+                    fill: multiAccentColor ?? (isAccent ? fallbackAccentColor : "currentColor"),
+                    opacity: cell.ch === "\u2591" ? 0.15 : 0.78
+                  }
+                ),
+                shineAlpha > 0 && /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: cell.col * ASCII_CHAR_WIDTH,
+                    y: cell.row * ASCII_CHAR_HEIGHT,
+                    width: ASCII_CHAR_WIDTH,
+                    height: ASCII_CHAR_HEIGHT,
+                    fill: shineColor,
+                    opacity: shineAlpha
+                  }
+                )
+              ] }, `${cell.col}-${cell.row}`);
             })
           }
         ),
@@ -6698,6 +6818,20 @@ function AsciiText({
     }
   ) });
 }
+function getShineAlpha(col, row, time, bounds) {
+  const span = bounds.max - bounds.min + 1;
+  const travel = span + 6;
+  const diagonalCol = col + row * 0.62;
+  const primarySweep = bounds.max + 3 - time * 1.35 % 1 * travel;
+  const secondarySweep = bounds.max + 3 - (time * 1.35 + 0.5) % 1 * travel;
+  const primary = getShineBandAlpha(diagonalCol, primarySweep);
+  const secondary = getShineBandAlpha(diagonalCol, secondarySweep);
+  return Math.min(0.86, primary + secondary * 0.82);
+}
+function getShineBandAlpha(diagonalCol, sweep) {
+  const distance = Math.abs(diagonalCol - sweep);
+  return Math.max(0, 1 - distance / 2.7) ** 2 * 0.78;
+}
 function useCopyToClipboard(timeout = 2e3) {
   const [isCopied, setIsCopied] = useState(false);
   const copyToClipboard = useCallback(
@@ -6812,25 +6946,33 @@ function ThemeScript() {
 }
 var GLINTS = [
   // perimeter
-  { top: "-7px", left: "10%", size: 7, delay: "0s", duration: "2.1s" },
-  { top: "2px", right: "-7px", size: 6, delay: "0.3s", duration: "3.4s" },
-  { bottom: "-6px", right: "15%", size: 6, delay: "1.1s", duration: "1.7s" },
-  { top: "3px", left: "-6px", size: 5, delay: "0.7s", duration: "2.9s" },
+  { top: "-8px", left: "10%", size: 9, delay: "0s", duration: "2.1s" },
+  { top: "2px", right: "-8px", size: 8, delay: "0.3s", duration: "3.4s" },
+  { bottom: "-7px", right: "15%", size: 8, delay: "1.1s", duration: "1.7s" },
+  { top: "3px", left: "-7px", size: 7, delay: "0.7s", duration: "2.9s" },
+  { bottom: "-6px", left: "40%", size: 6, delay: "2.2s", duration: "2.6s" },
+  { top: "-6px", right: "35%", size: 6, delay: "1.4s", duration: "2.2s" },
   // inside / overlapping the child
-  { top: "20%", left: "38%", size: 5, delay: "1.5s", duration: "2.3s" },
-  { top: "15%", right: "22%", size: 4, delay: "0.5s", duration: "3.1s" },
-  { bottom: "15%", left: "22%", size: 4, delay: "1.9s", duration: "1.8s" }
+  { top: "20%", left: "38%", size: 6, delay: "1.5s", duration: "2.3s" },
+  { top: "15%", right: "22%", size: 5, delay: "0.5s", duration: "3.1s" },
+  { bottom: "15%", left: "22%", size: 5, delay: "1.9s", duration: "1.8s" }
 ];
 function GlintIcon({ size }) {
   return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 8 8", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 0.5 L4.6 3.4 L7.5 4 L4.6 4.6 L4 7.5 L3.4 4.6 L0.5 4 L3.4 3.4 Z" }) });
 }
-function Enchanted({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ...props, children: [
+function Enchanted({ children, className, hoverOnly = false, glintClassName, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", hoverOnly && "group/enchanted", className), ...props, children: [
     children,
     GLINTS.map((g, i) => /* @__PURE__ */ jsx(
       "span",
       {
-        className: "pointer-events-none absolute z-10 text-primary animate-enchanted",
+        className: cn(
+          "pointer-events-none absolute z-10 animate-enchanted drop-shadow-[0_0_3px_currentColor]",
+          glintClassName ?? "text-primary",
+          // Display toggle (not opacity) - the keyframes own opacity, and
+          // re-mounting restarts the glint timeline on each hover.
+          hoverOnly && "hidden group-hover/enchanted:block"
+        ),
         style: { top: g.top, bottom: g.bottom, left: g.left, right: g.right, animationDelay: g.delay, animationDuration: g.duration },
         children: /* @__PURE__ */ jsx(GlintIcon, { size: g.size })
       },