@vllnt/ui 0.1.4 → 0.1.7-canary.2c4792f

package/dist/components/social-fab/social-fab.js

@@ -0,0 +1,211 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { cn } from "../../lib/utils";
+import { useSocialFab } from "./use-social-fab";
+function ShareMenu({
+  onPlatformSelect,
+  platforms
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: platforms.map((p) => {
+    const handleClick = () => {
+      onPlatformSelect(p.key);
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "rounded px-3 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        onClick: handleClick,
+        type: "button",
+        children: p.label
+      },
+      p.key
+    );
+  }) });
+}
+function ActionButton({ action }) {
+  const handleClick = action.onClick;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: "rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-accent",
+      onClick: handleClick,
+      type: "button",
+      children: action.label
+    }
+  );
+}
+function ActionPanel({
+  actions,
+  isMobile,
+  onShareHover,
+  onShareLeave,
+  shareLabel
+}) {
+  const shareAction = actions.find((a) => a.id === "share");
+  const otherActions = actions.filter((a) => a.id !== "share");
+  const handleShareClick = shareAction?.onClick;
+  const handleShareMouseEnter = isMobile ? void 0 : onShareHover;
+  const handleShareMouseLeave = isMobile ? void 0 : onShareLeave;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: [
+    shareAction ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-accent",
+        onClick: handleShareClick,
+        onMouseEnter: handleShareMouseEnter,
+        onMouseLeave: handleShareMouseLeave,
+        type: "button",
+        children: shareLabel
+      }
+    ) : null,
+    otherActions.map((action) => /* @__PURE__ */ jsx(ActionButton, { action }, action.id))
+  ] });
+}
+function MainFabButton({
+  isExpanded,
+  isMobile,
+  labels,
+  mainText,
+  onToggle
+}) {
+  const handleClick = onToggle;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-expanded": isExpanded,
+      "aria-label": isExpanded ? labels.close : labels.share,
+      className: cn(
+        "flex size-10 items-center justify-center rounded-md",
+        "border border-gray-300 bg-background dark:border-gray-600",
+        "transition-all duration-200 ease-out",
+        "hover:-translate-y-0.5 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-500"
+      ),
+      onClick: handleClick,
+      type: "button",
+      children: /* @__PURE__ */ jsx("span", { className: "text-sm font-mono", children: isMobile && isExpanded ? "\u2715" : mainText })
+    }
+  );
+}
+function Backdrop({ onClose }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "fixed inset-0 z-40 bg-black/10",
+      onClick: onClose
+    }
+  );
+}
+function ExpandedPanel({
+  actions,
+  fab,
+  labels,
+  onPlatformSelect,
+  sharePlatforms
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-2 transition-all duration-200 ease-out",
+        fab.state.isExpanded ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-2 opacity-0"
+      ),
+      children: [
+        fab.state.showShareMenu && sharePlatforms.length > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            onMouseEnter: fab.handleShareHover,
+            onMouseLeave: fab.handleShareLeave,
+            children: /* @__PURE__ */ jsx(
+              ShareMenu,
+              {
+                onPlatformSelect,
+                platforms: sharePlatforms
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          ActionPanel,
+          {
+            actions,
+            isMobile: fab.state.isMobile,
+            onShareHover: fab.handleShareHover,
+            onShareLeave: fab.handleShareLeave,
+            shareLabel: labels.share
+          }
+        )
+      ]
+    }
+  );
+}
+function SocialFAB({
+  actions,
+  bottomOffset = 24,
+  hidden = false,
+  labels,
+  mainText = "\u22EF",
+  onAction,
+  onClose,
+  onOpen,
+  rightOffset = 24,
+  sharePlatforms = []
+}) {
+  const options = { onAction, onClose, onOpen };
+  const fab = useSocialFab(options);
+  const handleBackdrop = useCallback(() => {
+    fab.close("backdrop");
+  }, [fab]);
+  const handlePlatformSelect = useCallback(
+    (key) => {
+      const platform = sharePlatforms.find((p) => p.key === key);
+      if (platform) {
+        window.open(
+          platform.buildUrl(window.location.href, document.title),
+          "_blank",
+          "noopener,noreferrer"
+        );
+      }
+    },
+    [sharePlatforms]
+  );
+  if (hidden) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    fab.state.isMobile && fab.state.isExpanded ? /* @__PURE__ */ jsx(Backdrop, { onClose: handleBackdrop }) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed z-50 flex flex-col items-end gap-2",
+        onMouseEnter: fab.handleMouseEnter,
+        onMouseLeave: fab.handleMouseLeave,
+        style: { bottom: `${bottomOffset}px`, right: `${rightOffset}px` },
+        children: [
+          /* @__PURE__ */ jsx(
+            ExpandedPanel,
+            {
+              actions,
+              fab,
+              labels,
+              onPlatformSelect: handlePlatformSelect,
+              sharePlatforms
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MainFabButton,
+            {
+              isExpanded: fab.state.isExpanded,
+              isMobile: fab.state.isMobile,
+              labels,
+              mainText,
+              onToggle: fab.handleToggle
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  SocialFAB
+};

package/dist/components/social-fab/use-social-fab.js

@@ -0,0 +1,111 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+function useMobileDetect() {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const check = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    check();
+    window.addEventListener("resize", check);
+    return () => {
+      window.removeEventListener("resize", check);
+    };
+  }, []);
+  return isMobile;
+}
+function useExpansion(options, isMobile) {
+  const { onClose, onOpen } = options;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const close = useCallback(
+    (trigger) => {
+      setIsExpanded(false);
+      onClose?.(trigger);
+    },
+    [onClose]
+  );
+  const open = useCallback(
+    (trigger, device) => {
+      setIsExpanded(true);
+      onOpen?.(trigger, device);
+    },
+    [onOpen]
+  );
+  const handleToggle = useCallback(() => {
+    const device = isMobile ? "mobile" : "desktop";
+    if (isExpanded) close("tap_close");
+    else open("tap", device);
+  }, [isMobile, isExpanded, close, open]);
+  const handleMouseEnter = useCallback(() => {
+    if (!isMobile) open("hover", "desktop");
+  }, [isMobile, open]);
+  const handleMouseLeave = useCallback(() => {
+    if (!isMobile) close("hover_leave");
+  }, [isMobile, close]);
+  return {
+    close,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleToggle,
+    isExpanded
+  };
+}
+function useShareMenu(onAction, isMobile) {
+  const [showShareMenu, setShowShareMenu] = useState(false);
+  const handleShareToggle = useCallback(() => {
+    setShowShareMenu((previous) => {
+      if (!previous) onAction?.("share");
+      return !previous;
+    });
+  }, [onAction]);
+  const handleShareHover = useCallback(() => {
+    if (!isMobile) {
+      onAction?.("share");
+      setShowShareMenu(true);
+    }
+  }, [isMobile, onAction]);
+  const handleShareLeave = useCallback(() => {
+    if (!isMobile) {
+      setShowShareMenu(false);
+    }
+  }, [isMobile]);
+  const reset = useCallback(() => {
+    setShowShareMenu(false);
+  }, []);
+  return {
+    handleShareHover,
+    handleShareLeave,
+    handleShareToggle,
+    reset,
+    showShareMenu
+  };
+}
+function useSocialFab(options = {}) {
+  const isMobile = useMobileDetect();
+  const expansion = useExpansion(options, isMobile);
+  const shareMenu = useShareMenu(options.onAction, isMobile);
+  const close = useCallback(
+    (trigger) => {
+      expansion.close(trigger);
+      shareMenu.reset();
+    },
+    [expansion, shareMenu]
+  );
+  return {
+    close,
+    handleMouseEnter: expansion.handleMouseEnter,
+    handleMouseLeave: expansion.handleMouseLeave,
+    handleShareHover: shareMenu.handleShareHover,
+    handleShareLeave: shareMenu.handleShareLeave,
+    handleShareToggle: shareMenu.handleShareToggle,
+    handleToggle: expansion.handleToggle,
+    state: {
+      isExpanded: expansion.isExpanded,
+      isMobile,
+      showShareMenu: shareMenu.showShareMenu
+    }
+  };
+}
+export {
+  useSocialFab
+};

package/dist/components/spinner/index.js

@@ -0,0 +1,4 @@
+import { Spinner } from "./spinner";
+export {
+  Spinner
+};

package/dist/components/spinner/spinner.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function Spinner({ className, size = "md", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "animate-spin rounded-full border-2 border-current border-t-transparent",
+        {
+          "h-4 w-4": size === "sm",
+          "h-6 w-6": size === "md",
+          "h-8 w-8": size === "lg"
+        },
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+}
+export {
+  Spinner
+};

package/dist/components/step-by-step/index.js

@@ -0,0 +1,8 @@
+import {
+  Step,
+  StepByStep
+} from "./step-by-step";
+export {
+  Step,
+  StepByStep
+};

package/dist/components/step-by-step/step-by-step.js

@@ -0,0 +1,194 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+function Step({
+  children,
+  className,
+  number,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold", children: number }),
+      /* @__PURE__ */ jsx("div", { className: "w-px flex-1 bg-border mt-2" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 pb-8 last:pb-0", children: [
+      /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground mb-2", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground [&>p]:mb-2 [&>pre]:my-2", children })
+    ] })
+  ] });
+}
+function InteractiveStep({
+  children,
+  isCompleted,
+  isLast,
+  onToggle,
+  stepNumber,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cn(
+            "flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold transition-colors",
+            isCompleted ? "bg-green-500 text-white" : "bg-primary text-primary-foreground"
+          ),
+          onClick: onToggle,
+          type: "button",
+          children: isCompleted ? /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-4 w-4",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M5 13l4 4L19 7",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2
+                }
+              )
+            }
+          ) : stepNumber
+        }
+      ),
+      !isLast && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "w-px flex-1 mt-2",
+            isCompleted ? "bg-green-500" : "bg-border"
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex-1 pb-8 transition-opacity",
+          isCompleted && "opacity-60"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "h4",
+            {
+              className: cn(
+                "font-semibold text-foreground mb-2",
+                isCompleted && "line-through"
+              ),
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground [&>p]:mb-2 [&>pre]:my-2", children })
+        ]
+      }
+    )
+  ] });
+}
+function StepByStep({
+  children,
+  className,
+  interactive = false,
+  title
+}) {
+  const [completedSteps, setCompletedSteps] = useState(/* @__PURE__ */ new Set());
+  const steps = Array.isArray(children) ? children : [children];
+  const toggleStep = (index) => {
+    const newCompleted = new Set(completedSteps);
+    if (newCompleted.has(index)) newCompleted.delete(index);
+    else newCompleted.add(index);
+    setCompletedSteps(newCompleted);
+  };
+  if (!interactive) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("my-6", className), children: [
+      title ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "h-5 w-5 text-primary",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "m9 18 6-6-6-6",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg", children: title })
+      ] }) : null,
+      /* @__PURE__ */ jsx("div", { className: "space-y-0", children: steps.map((step, index) => {
+        const stepElement = step;
+        return /* @__PURE__ */ jsx(
+          Step,
+          {
+            number: index + 1,
+            title: stepElement.props.title,
+            children: stepElement.props.children
+          },
+          index
+        );
+      }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("my-6", className), children: [
+    title ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-5 w-5 text-primary",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "m9 18 6-6-6-6",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg", children: title }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
+        completedSteps.size,
+        "/",
+        steps.length,
+        " completed"
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "space-y-0", children: steps.map((step, index) => /* @__PURE__ */ jsx(
+      InteractiveStep,
+      {
+        isCompleted: completedSteps.has(index),
+        isLast: index === steps.length - 1,
+        onToggle: () => {
+          toggleStep(index);
+        },
+        stepNumber: index + 1,
+        title: step.props.title,
+        children: step.props.children
+      },
+      index
+    )) })
+  ] });
+}
+StepByStep.Step = Step;
+export {
+  Step,
+  StepByStep
+};

package/dist/components/step-navigation/index.js

@@ -0,0 +1,4 @@
+import { StepNavigation } from "./step-navigation";
+export {
+  StepNavigation
+};

package/dist/components/step-navigation/step-navigation.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "../../lib/utils";
+function StepNavigationImpl({
+  canNext,
+  canPrev,
+  className,
+  currentStep,
+  nextIcon,
+  nextLabel = "Next",
+  onNext,
+  onPrev,
+  previousIcon,
+  previousLabel = "Prev",
+  stepLabel = "Section",
+  totalSteps
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Step navigation",
+      className: cn(
+        "fixed bottom-0 left-0 right-0 z-50",
+        "border-t border-neutral-200 bg-white",
+        "dark:border-neutral-800 dark:bg-black",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-3xl items-center justify-between px-4 py-3", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            "aria-label": "Previous step",
+            className: cn(
+              "flex min-h-[44px] min-w-[44px] items-center justify-center",
+              "rounded-md px-3 py-2 text-sm font-medium transition-colors",
+              "hover:bg-neutral-100 dark:hover:bg-neutral-900",
+              "disabled:pointer-events-none disabled:opacity-40"
+            ),
+            disabled: !canPrev,
+            onClick: onPrev,
+            type: "button",
+            children: [
+              previousIcon ?? /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  className: "h-5 w-5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "m15 19-7-7 7-7",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "ml-1", children: previousLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "text-sm tabular-nums text-neutral-600 dark:text-neutral-400", children: [
+          stepLabel,
+          " ",
+          currentStep,
+          " / ",
+          totalSteps
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            "aria-label": "Next step",
+            className: cn(
+              "flex min-h-[44px] min-w-[44px] items-center justify-center",
+              "rounded-md px-3 py-2 text-sm font-medium transition-colors",
+              "hover:bg-neutral-100 dark:hover:bg-neutral-900",
+              "disabled:pointer-events-none disabled:opacity-40"
+            ),
+            disabled: !canNext,
+            onClick: onNext,
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "mr-1", children: nextLabel }),
+              nextIcon ?? /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  className: "h-5 w-5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "m9 5 7 7-7 7",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+const StepNavigation = memo(StepNavigationImpl);
+StepNavigation.displayName = "StepNavigation";
+export {
+  StepNavigation
+};

package/dist/components/switch/index.js

@@ -0,0 +1,4 @@
+import { Switch } from "./switch";
+export {
+  Switch
+};