@kjaniec-dev/ui 0.7.2 → 0.8.0

package/dist/index.cjs

@@ -540,6 +540,7 @@ function useTabs() {
 }
 function Tabs({ value, defaultValue, onValueChange, className, children, ...props }) {
   const [internal, setInternal] = React18__namespace.useState(defaultValue ?? "");
+  const uid = React18__namespace.useId();
   const current = value ?? internal;
   const setValue = React18__namespace.useCallback(
     (v) => {
@@ -548,7 +549,7 @@ function Tabs({ value, defaultValue, onValueChange, className, children, ...prop
     },
     [value, onValueChange]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, setValue }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, ...props, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, setValue, uid }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, ...props, children }) });
 }
 var TabsList = React18__namespace.forwardRef(
   ({ className, onKeyDown, ...props }, ref) => {
@@ -599,7 +600,7 @@ var TabsList = React18__namespace.forwardRef(
 TabsList.displayName = "TabsList";
 var TabsTrigger = React18__namespace.forwardRef(
   ({ className, value, children, ...props }, ref) => {
-    const { value: current, setValue } = useTabs();
+    const { value: current, setValue, uid } = useTabs();
     const active = current === value;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -607,8 +608,8 @@ var TabsTrigger = React18__namespace.forwardRef(
         ref,
         type: "button",
         role: "tab",
-        id: `tabs-trigger-${value}`,
-        "aria-controls": `tabs-panel-${value}`,
+        id: `tabs-trigger-${uid}-${value}`,
+        "aria-controls": `tabs-panel-${uid}-${value}`,
         "aria-selected": active,
         tabIndex: active ? 0 : -1,
         onClick: () => setValue(value),
@@ -628,7 +629,7 @@ var TabsTrigger = React18__namespace.forwardRef(
 TabsTrigger.displayName = "TabsTrigger";
 var TabsContent = React18__namespace.forwardRef(
   ({ className, value, ...props }, ref) => {
-    const { value: current } = useTabs();
+    const { value: current, uid } = useTabs();
     const active = current === value;
     if (!active) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -636,8 +637,8 @@ var TabsContent = React18__namespace.forwardRef(
       {
         ref,
         role: "tabpanel",
-        id: `tabs-panel-${value}`,
-        "aria-labelledby": `tabs-trigger-${value}`,
+        id: `tabs-panel-${uid}-${value}`,
+        "aria-labelledby": `tabs-trigger-${uid}-${value}`,
         tabIndex: 0,
         className: cn("pt-5 text-[0.9rem] text-muted-foreground outline-none", className),
         ...props
@@ -2079,6 +2080,422 @@ function SidebarNav({ className, groups, currentHref, ...props }) {
   ] }, groupIdx)) });
 }
 SidebarNav.displayName = "SidebarNav";
+var fabVariants = classVarianceAuthority.cva(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap select-none",
+    "font-sans font-semibold leading-none",
+    "border border-transparent rounded-full cursor-pointer shadow-lg",
+    "transition-[background-color,color,border-color,box-shadow,transform] duration-150",
+    "active:translate-y-px active:shadow-md",
+    "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45",
+    "disabled:opacity-50 disabled:pointer-events-none"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary-hover",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover",
+        outline: "bg-transparent text-foreground border-border hover:bg-muted hover:border-muted-foreground",
+        danger: "bg-danger text-white hover:brightness-95"
+      },
+      size: {
+        sm: "h-10 w-10 p-0 text-sm",
+        md: "h-14 w-14 p-0 text-base",
+        lg: "h-16 w-16 p-0 text-lg"
+      },
+      position: {
+        "bottom-right": "fixed bottom-6 right-6 z-50",
+        "bottom-left": "fixed bottom-6 left-6 z-50",
+        "bottom-center": "fixed bottom-6 left-1/2 -translate-x-1/2 z-50",
+        none: "relative"
+      }
+    },
+    defaultVariants: { variant: "primary", size: "md", position: "bottom-right" }
+  }
+);
+var Fab = React18__namespace.forwardRef(
+  ({ className, variant, size, position, mobileOnly, icon, label, loading, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        className: cn(
+          fabVariants({ variant, size, position }),
+          mobileOnly && "md:hidden",
+          className
+        ),
+        ...props,
+        disabled: disabled || loading,
+        "aria-label": label,
+        "aria-busy": loading || void 0,
+        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "h-[1.2em] w-[1.2em] rounded-full border-2 border-current border-t-transparent animate-spin"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[&_svg]:h-[1.35em] [&_svg]:w-[1.35em] flex items-center justify-center", children: icon })
+      }
+    );
+  }
+);
+Fab.displayName = "Fab";
+var BottomSheetContext = React18__namespace.createContext(null);
+function BottomSheet({
+  open,
+  onClose,
+  children,
+  maxWidth = "max-w-lg",
+  className,
+  showClose = true
+}) {
+  const titleId = React18__namespace.useId();
+  const descId = React18__namespace.useId();
+  const containerRef = React18__namespace.useRef(null);
+  const lastActiveElement = React18__namespace.useRef(null);
+  const [mounted, setMounted] = React18__namespace.useState(open);
+  React18__namespace.useEffect(() => {
+    if (open) {
+      setMounted(true);
+    } else {
+      const timer = setTimeout(() => setMounted(false), 200);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+  React18__namespace.useEffect(() => {
+    if (!open) return;
+    lastActiveElement.current = document.activeElement;
+    const container = containerRef.current;
+    if (container) {
+      const focusables = container.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusables.length > 0) {
+        focusables[0].focus();
+        setTimeout(() => {
+          if (container.contains(document.activeElement)) return;
+          focusables[0].focus();
+        }, 50);
+      } else {
+        container.focus();
+      }
+    }
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key === "Tab") {
+        const container2 = containerRef.current;
+        if (!container2) return;
+        const focusables = Array.from(
+          container2.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          )
+        );
+        if (focusables.length === 0) {
+          e.preventDefault();
+          return;
+        }
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        if (!container2.contains(document.activeElement)) {
+          e.preventDefault();
+          if (e.shiftKey) {
+            last.focus();
+          } else {
+            first.focus();
+          }
+          return;
+        }
+        if (e.shiftKey) {
+          if (document.activeElement === first || document.activeElement === container2) {
+            last.focus();
+            e.preventDefault();
+          }
+        } else {
+          if (document.activeElement === last) {
+            first.focus();
+            e.preventDefault();
+          }
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+      if (lastActiveElement.current) {
+        lastActiveElement.current.focus();
+        lastActiveElement.current = null;
+      }
+    };
+  }, [open, onClose]);
+  if (!open && !mounted) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(BottomSheetContext.Provider, { value: { titleId, descId }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "presentation",
+      onClick: (e) => e.target === e.currentTarget && onClose(),
+      className: cn(
+        "fixed inset-0 z-[100] grid items-end sm:place-items-center p-0 sm:p-6 backdrop-blur-[3px] transition-all duration-200",
+        "bg-[color-mix(in_oklch,#09090b_55%,transparent)]",
+        open ? "opacity-100 pointer-events-auto visible" : "opacity-0 pointer-events-none invisible"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: containerRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": descId,
+          tabIndex: -1,
+          className: cn(
+            "relative w-full bg-surface border-t sm:border border-border shadow-kj-lg transition-all duration-200 outline-none",
+            "rounded-t-kj-2xl sm:rounded-kj-2xl flex flex-col max-h-[85vh] sm:max-h-[90vh]",
+            // Mobile sliding & Desktop scale/opacity transitions
+            open ? "translate-y-0 sm:scale-100 sm:opacity-100" : "translate-y-full sm:scale-95 sm:opacity-0",
+            // Mobile styling vs Desktop styling
+            "bottom-0 sm:bottom-auto",
+            maxWidth,
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-2 sm:hidden cursor-grab", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-1.5 rounded-full bg-muted-foreground/20" }) }),
+            showClose && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                "aria-label": "Close",
+                className: "absolute top-4 right-4 p-1.5 rounded-kj-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer z-10",
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  ) });
+}
+function BottomSheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 flex flex-col gap-1.5 border-b border-border", className), ...props });
+}
+function BottomSheetTitle({ className, id, ...props }) {
+  const ctx = React18__namespace.useContext(BottomSheetContext);
+  return /* @__PURE__ */ jsxRuntime.jsx("h2", { id: id ?? ctx?.titleId, className: cn("m-0 text-[1.15rem] font-bold tracking-[-0.01em]", className), ...props });
+}
+function BottomSheetDescription({ className, id, ...props }) {
+  const ctx = React18__namespace.useContext(BottomSheetContext);
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { id: id ?? ctx?.descId, className: cn("m-0 text-[0.9rem] text-muted-foreground", className), ...props });
+}
+function BottomSheetContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 overflow-y-auto flex-1", className), ...props });
+}
+function BottomSheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 border-t border-border flex gap-2.5 justify-end mt-auto", className), ...props });
+}
+var kbdVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center font-mono font-medium text-muted-foreground bg-muted border border-border border-b-2 rounded-kj-sm select-none",
+  {
+    variants: {
+      size: {
+        sm: "h-5 min-w-5 px-1 text-[0.68rem]",
+        md: "h-6 min-w-6 px-1.5 text-[0.78rem]"
+      }
+    },
+    defaultVariants: { size: "sm" }
+  }
+);
+var Kbd = React18__namespace.forwardRef(
+  ({ className, size, keys, children, ...props }, ref) => {
+    if (keys && keys.length > 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          className: cn("inline-flex items-center gap-1", className),
+          ...props,
+          children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: kbdVariants({ size }), children: k }, i))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("kbd", { ref, className: cn(kbdVariants({ size }), className), ...props, children });
+  }
+);
+Kbd.displayName = "Kbd";
+var CodeBlock = React18__namespace.forwardRef(
+  ({ className, code, language, filename, copyable = true, maxHeight, ...props }, ref) => {
+    const [copied, setCopied] = React18__namespace.useState(false);
+    const canCopy = copyable && typeof navigator !== "undefined" && !!navigator.clipboard;
+    const onCopy = () => {
+      navigator.clipboard.writeText(code).then(
+        () => {
+          setCopied(true);
+          window.setTimeout(() => setCopied(false), 1500);
+        },
+        () => {
+        }
+      );
+    };
+    const label = filename ?? language;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("rounded-kj-md border border-border bg-muted/50 overflow-hidden", className),
+        ...props,
+        children: [
+          (label || canCopy) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-3.5 py-2 border-b border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.72rem] font-mono text-muted-foreground", children: label }),
+            canCopy && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onCopy,
+                className: "text-[0.72rem] font-medium text-muted-foreground hover:text-foreground transition-colors cursor-pointer bg-transparent border-0 p-0",
+                children: copied ? "Copied" : "Copy"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "pre",
+            {
+              className: "m-0 px-3.5 py-3 overflow-x-auto text-[0.8rem] leading-relaxed font-mono text-foreground",
+              style: maxHeight ? { maxHeight, overflowY: "auto" } : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+var PopoverContext = React18__namespace.createContext(null);
+function usePopoverContext(part) {
+  const ctx = React18__namespace.useContext(PopoverContext);
+  if (!ctx) throw new Error(`${part} must be used inside <Popover>`);
+  return ctx;
+}
+function Popover({ children, className, open: openProp, onOpenChange }) {
+  const [openState, setOpenState] = React18__namespace.useState(false);
+  const controlled = openProp !== void 0;
+  const open = controlled ? openProp : openState;
+  const triggerRef = React18__namespace.useRef(null);
+  const ref = React18__namespace.useRef(null);
+  const setOpen = React18__namespace.useCallback(
+    (v) => {
+      if (!controlled) setOpenState(v);
+      onOpenChange?.(v);
+    },
+    [controlled, onOpenChange]
+  );
+  React18__namespace.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const onEsc = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onEsc);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [open, setOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block", className), children }) });
+}
+var PopoverTrigger = React18__namespace.forwardRef(({ onClick, asChild, ...props }, ref) => {
+  const ctx = usePopoverContext("PopoverTrigger");
+  const setRefs = (node) => {
+    ctx.triggerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  if (asChild) {
+    const child = React18__namespace.Children.only(props.children);
+    return React18__namespace.cloneElement(child, {
+      ref: setRefs,
+      ...props,
+      ...child.props,
+      onClick: (e) => {
+        ctx.setOpen(!ctx.open);
+        onClick?.(e);
+        child.props.onClick?.(e);
+      },
+      "aria-haspopup": "dialog",
+      "aria-expanded": ctx.open
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref: setRefs,
+      ...props,
+      type: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": ctx.open,
+      onClick: (e) => {
+        ctx.setOpen(!ctx.open);
+        onClick?.(e);
+      }
+    }
+  );
+});
+PopoverTrigger.displayName = "PopoverTrigger";
+var sideAlignClasses = {
+  "bottom-start": "top-[calc(100%+6px)] left-0",
+  "bottom-center": "top-[calc(100%+6px)] left-1/2 -translate-x-1/2",
+  "bottom-end": "top-[calc(100%+6px)] right-0",
+  "top-start": "bottom-[calc(100%+6px)] left-0",
+  "top-center": "bottom-[calc(100%+6px)] left-1/2 -translate-x-1/2",
+  "top-end": "bottom-[calc(100%+6px)] right-0",
+  "left-start": "right-[calc(100%+6px)] top-0",
+  "left-center": "right-[calc(100%+6px)] top-1/2 -translate-y-1/2",
+  "left-end": "right-[calc(100%+6px)] bottom-0",
+  "right-start": "left-[calc(100%+6px)] top-0",
+  "right-center": "left-[calc(100%+6px)] top-1/2 -translate-y-1/2",
+  "right-end": "left-[calc(100%+6px)] bottom-0"
+};
+function PopoverContent({
+  className,
+  side = "bottom",
+  align = "center",
+  children,
+  ...props
+}) {
+  const ctx = usePopoverContext("PopoverContent");
+  const ref = React18__namespace.useRef(null);
+  React18__namespace.useEffect(() => {
+    if (ctx.open) ref.current?.focus();
+  }, [ctx.open]);
+  if (!ctx.open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "dialog",
+      tabIndex: -1,
+      className: cn(
+        "absolute z-40 min-w-[200px] p-4 rounded-kj-md bg-surface border border-border shadow-kj-lg outline-none",
+        "animate-[kjpop_.12s_ease]",
+        sideAlignClasses[`${side}-${align}`],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -2089,6 +2506,12 @@ exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
 exports.BottomNavigation = BottomNavigation;
+exports.BottomSheet = BottomSheet;
+exports.BottomSheetContent = BottomSheetContent;
+exports.BottomSheetDescription = BottomSheetDescription;
+exports.BottomSheetFooter = BottomSheetFooter;
+exports.BottomSheetHeader = BottomSheetHeader;
+exports.BottomSheetTitle = BottomSheetTitle;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.BreadcrumbSeparator = BreadcrumbSeparator;
@@ -2101,6 +2524,7 @@ exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
 exports.CheckboxField = CheckboxField;
+exports.CodeBlock = CodeBlock;
 exports.CommandPalette = CommandPalette;
 exports.ConfirmDialog = ConfirmDialog;
 exports.DashboardShell = DashboardShell;
@@ -2114,10 +2538,12 @@ exports.DropdownMenuSeparator = DropdownMenuSeparator;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyState = EmptyState;
 exports.ErrorState = ErrorState;
+exports.Fab = Fab;
 exports.Field = Field;
 exports.FormField = FormField;
 exports.Hint = Hint;
 exports.Input = Input;
+exports.Kbd = Kbd;
 exports.Label = Label;
 exports.MetricCard = MetricCard;
 exports.Modal = Modal;
@@ -2126,6 +2552,9 @@ exports.ModalDescription = ModalDescription;
 exports.ModalTitle = ModalTitle;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
+exports.Popover = Popover;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
 exports.Progress = Progress;
 exports.Radio = Radio;
 exports.Segmented = Segmented;