@wow-two-beta/ui 0.0.59 → 0.0.61

package/dist/{chunk-Y5GS4CLT.js → chunk-GDJMPYPU.js}

@@ -1,8 +1,8 @@
-import { Kbd, addDays, MONTHS_LONG, startOfDay, WEEKDAYS_SHORT, isToday, addMonths, isSameDay } from './chunk-XDATW7NF.js';
+import { Kbd, addDays, MONTHS_LONG, startOfDay, WEEKDAYS_SHORT, isToday, addMonths, isSameDay } from './chunk-3SWPYYRQ.js';
 import { Inline } from './chunk-4XWLEKH2.js';
 import { useClipboard, useControlled, useReducedMotion, useEscape } from './chunk-V267IMBH.js';
 import { Icon } from './chunk-MVMDDGW7.js';
-import { tv, CssExtensions, surfaceVariants, dataAttr, composeEventHandlers, Tones } from './chunk-JYGC5SRP.js';
+import { tv, CssExtensions, surfaceVariants, dataAttr, composeEventHandlers, Tones } from './chunk-DX7FYAKY.js';
 import { Slot, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner } from './chunk-TTSJZEL7.js';
 import { useId as useId$1 } from './chunk-LGTGZ3RW.js';
 import { cn, composeRefs } from './chunk-X2MYOHOB.js';
@@ -5769,7 +5769,208 @@ var ActivityItem = forwardRef(
 ActivityItem.displayName = "ActivityFeed.Item";
 var ActivityFeed = ActivityFeedInner;
 ActivityFeed.Item = ActivityItem;
+var FeatureCard = forwardRef(
+  ({ icon, title, description, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ref,
+      variant: "outline",
+      radius: "xl",
+      elevation: 0,
+      className: cn("bg-card p-6", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "grid size-11 place-items-center rounded-lg bg-primary-soft text-primary", children: icon }),
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: "md", className: cn("tracking-normal", icon && "mt-4"), children: title }),
+        (description ?? children) && /* @__PURE__ */ jsx(Text, { size: "sm", color: "muted", className: "mt-2 leading-relaxed", children: description ?? children })
+      ]
+    }
+  )
+);
+FeatureCard.displayName = "FeatureCard";
+var StepCard = forwardRef(
+  ({ step, icon, title, description, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ref,
+      variant: "outline",
+      radius: "xl",
+      elevation: 0,
+      className: cn("relative overflow-hidden bg-card p-6", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-4 top-3 text-5xl font-bold text-foreground/5", children: step }),
+        icon && /* @__PURE__ */ jsx("span", { className: "grid size-11 place-items-center rounded-lg bg-primary-soft text-primary", children: icon }),
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: "md", className: cn("tracking-normal", icon && "mt-4"), children: title }),
+        (description ?? children) && /* @__PURE__ */ jsx(Text, { size: "sm", color: "muted", className: "mt-2", children: description ?? children })
+      ]
+    }
+  )
+);
+StepCard.displayName = "StepCard";
+var PricingCard = forwardRef(
+  ({ name, price, cadence, tagline, features, featured = false, badgeLabel = "Most popular", children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ref,
+      variant: "outline",
+      radius: "2xl",
+      elevation: 0,
+      className: cn(
+        "relative flex flex-col bg-card p-6",
+        featured ? "border-primary shadow-lg shadow-primary/10" : "border-border",
+        className
+      ),
+      ...props,
+      children: [
+        featured && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "brand",
+            size: "md",
+            className: "absolute -top-3 left-6 bg-primary px-3 py-1 text-xs font-medium text-primary-foreground",
+            children: badgeLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: "md", className: "tracking-normal", children: name }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-baseline gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold tracking-tight", children: price }),
+          cadence && /* @__PURE__ */ jsx(Text, { as: "span", size: "sm", color: "muted", children: cadence })
+        ] }),
+        tagline && /* @__PURE__ */ jsx(Text, { size: "sm", color: "muted", className: "mt-2", children: tagline }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-5 flex flex-1 flex-col gap-2.5", children: features.map((feature, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx(Icon, { icon: Check, size: 16, className: "mt-0.5 text-primary" }),
+          /* @__PURE__ */ jsx("span", { children: feature })
+        ] }, index)) }),
+        children && /* @__PURE__ */ jsx("div", { className: "mt-6", children })
+      ]
+    }
+  )
+);
+PricingCard.displayName = "PricingCard";
+var SortableContext = createContext(null);
+var ItemContext = createContext(null);
+var useSortableRoot = () => {
+  const ctx = useContext(SortableContext);
+  if (!ctx) throw new Error("Sortable.Item must be rendered inside <Sortable>.");
+  return ctx;
+};
+var useSortableItem = () => {
+  const ctx = useContext(ItemContext);
+  if (!ctx) throw new Error("Sortable.Handle must be rendered inside <Sortable.Item>.");
+  return ctx;
+};
+var SortableRoot = forwardRef(
+  ({ onReorder, className, children, ...props }, ref) => {
+    const [dragIndex, setDragIndex] = useState(null);
+    const [overIndex, setOverIndex] = useState(null);
+    const dragRef = useRef(null);
+    const overRef = useRef(null);
+    const begin = useCallback((index) => {
+      dragRef.current = index;
+      setDragIndex(index);
+    }, []);
+    const hover = useCallback((index) => {
+      overRef.current = index;
+      setOverIndex(index);
+    }, []);
+    const end = useCallback(() => {
+      const from = dragRef.current;
+      const to = overRef.current;
+      if (from !== null && to !== null && from !== to) onReorder(from, to);
+      dragRef.current = null;
+      overRef.current = null;
+      setDragIndex(null);
+      setOverIndex(null);
+    }, [onReorder]);
+    const move = useCallback(
+      (from, to) => {
+        if (from !== to && to >= 0) onReorder(from, to);
+      },
+      [onReorder]
+    );
+    return /* @__PURE__ */ jsx(SortableContext.Provider, { value: { dragIndex, overIndex, begin, hover, end, move }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col", className), ...props, children }) });
+  }
+);
+SortableRoot.displayName = "Sortable";
+var SortableItem = forwardRef(
+  ({ index, className, children, ...props }, ref) => {
+    const { dragIndex, overIndex, begin, hover, end } = useSortableRoot();
+    const [armed, setArmed] = useState(false);
+    const isDragging = dragIndex === index;
+    const isOver = overIndex === index && dragIndex !== null && dragIndex !== index;
+    return /* @__PURE__ */ jsx(ItemContext.Provider, { value: { index, arm: () => setArmed(true), disarm: () => setArmed(false) }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        draggable: armed,
+        onDragStart: (e) => {
+          e.dataTransfer.effectAllowed = "move";
+          begin(index);
+        },
+        onDragEnter: () => hover(index),
+        onDragOver: (e) => {
+          if (dragIndex !== null) e.preventDefault();
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          end();
+          setArmed(false);
+        },
+        onDragEnd: () => {
+          end();
+          setArmed(false);
+        },
+        "data-dragging": isDragging || void 0,
+        "data-over": isOver || void 0,
+        className: cn("transition-opacity", isDragging && "opacity-50", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+SortableItem.displayName = "Sortable.Item";
+var SortableHandle = forwardRef(
+  ({ className, onKeyDown, children, ...props }, ref) => {
+    const { index, arm, disarm } = useSortableItem();
+    const { move } = useSortableRoot();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Drag to reorder",
+        "aria-roledescription": "sortable item handle",
+        onPointerDown: arm,
+        onPointerUp: disarm,
+        onBlur: disarm,
+        onKeyDown: (e) => {
+          if (e.key === "ArrowUp") {
+            e.preventDefault();
+            move(index, index - 1);
+          } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            move(index, index + 1);
+          }
+          onKeyDown?.(e);
+        },
+        className: cn(
+          "inline-flex cursor-grab touch-none items-center justify-center text-subtle-foreground transition-colors hover:text-muted-foreground active:cursor-grabbing",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SortableHandle.displayName = "Sortable.Handle";
+var Sortable = Object.assign(SortableRoot, {
+  Item: SortableItem,
+  Handle: SortableHandle
+});
 
-export { Accordion2 as Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, ActivityItem, AnimatedNumber, AnnotationMarker, AudioPlayer, AudioWaveform, Avatar, AvatarGroup, Badge, BadgeOverlay, Card, Carousel, CarouselDot, CarouselDots, CarouselNext, CarouselPrev, CarouselSlide, CarouselSlides, CarouselViewport, ChatBubble, Code, Collapsible, CollapsibleContent, CollapsibleTrigger, Comment, CommentThread, Confetti, CountBadge, CountUp, DataGrid, DataTable, DaySeparator, DescriptionList, DiffViewer, EmptyState, EventCalendar, Eyebrow, Gantt, GradientText, Heading, HeatmapCalendar, Highlight, Image, InfoRow, KeyboardShortcut, List, ListItem, Mark, Marquee, MessageList, MetaInline, MetricChip, NodeEditor, NotificationDot, PDFViewer, Quote, ReactionBar, ScheduleView, ScrollReveal, SectionHeader, Separator, Snippet, Sparkline, Stat, Status, SwipeActions, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeaderCell, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Text, ThreadView, Tilt, Timeline, TimelineDescription, TimelineItem, TimelineTitle, Tooltip, Tree, TreeGroup, TreeItem, Typewriter, VideoPlayer, avatarVariants, badgeVariants, codeVariants, headingVariants, textVariants };
-//# sourceMappingURL=chunk-Y5GS4CLT.js.map
-//# sourceMappingURL=chunk-Y5GS4CLT.js.map
+export { Accordion2 as Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, ActivityItem, AnimatedNumber, AnnotationMarker, AudioPlayer, AudioWaveform, Avatar, AvatarGroup, Badge, BadgeOverlay, Card, Carousel, CarouselDot, CarouselDots, CarouselNext, CarouselPrev, CarouselSlide, CarouselSlides, CarouselViewport, ChatBubble, Code, Collapsible, CollapsibleContent, CollapsibleTrigger, Comment, CommentThread, Confetti, CountBadge, CountUp, DataGrid, DataTable, DaySeparator, DescriptionList, DiffViewer, EmptyState, EventCalendar, Eyebrow, FeatureCard, Gantt, GradientText, Heading, HeatmapCalendar, Highlight, Image, InfoRow, KeyboardShortcut, List, ListItem, Mark, Marquee, MessageList, MetaInline, MetricChip, NodeEditor, NotificationDot, PDFViewer, PricingCard, Quote, ReactionBar, ScheduleView, ScrollReveal, SectionHeader, Separator, Snippet, Sortable, Sparkline, Stat, Status, StepCard, SwipeActions, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeaderCell, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Text, ThreadView, Tilt, Timeline, TimelineDescription, TimelineItem, TimelineTitle, Tooltip, Tree, TreeGroup, TreeItem, Typewriter, VideoPlayer, avatarVariants, badgeVariants, codeVariants, headingVariants, textVariants };
+//# sourceMappingURL=chunk-GDJMPYPU.js.map
+//# sourceMappingURL=chunk-GDJMPYPU.js.map