@etus/ui 0.4.0-beta.1 → 0.4.0-beta.3

package/dist/chunk-KXSJSLPJ.js

@@ -0,0 +1,354 @@
+import { SkeletonLoader } from './chunk-QHKOBGLW.js';
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-HNYBLROK.js';
+import { Badge } from './chunk-KOTCWE7V.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var listVariants = cva(
+  "flex flex-col bg-background text-foreground transition-colors duration-150",
+  {
+    variants: {
+      variant: {
+        default: "border border-border rounded-md",
+        flat: "divide-y divide-border",
+        card: "gap-4 flex-col",
+        minimal: "divide-y divide-border border-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var listItemVariants = cva(
+  "group/list-item flex items-center text-sm transition-colors duration-150 outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border-b border-border last:border-b-0",
+        flat: "",
+        card: "border border-border rounded-md bg-background",
+        minimal: ""
+      },
+      size: {
+        sm: "px-3 py-2 min-h-8 gap-2",
+        default: "px-4 py-3 min-h-10 gap-3",
+        lg: "px-5 py-4 min-h-12 gap-4"
+      },
+      selectable: {
+        true: "cursor-pointer hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        false: ""
+      },
+      selected: {
+        true: "bg-muted",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      selectable: false,
+      selected: false,
+      disabled: false
+    }
+  }
+);
+function List({
+  className,
+  variant = "default",
+  items,
+  selectable = false,
+  multiple = false,
+  loading = false,
+  onSelect,
+  children,
+  ref,
+  ...props
+}) {
+  const [selectedIds, setSelectedIds] = React.useState(() => /* @__PURE__ */ new Set());
+  const [focusedIndex, setFocusedIndex] = React.useState(-1);
+  const itemRefsRef = React.useRef(/* @__PURE__ */ new Map());
+  const handleSelect = React.useCallback(
+    (item) => {
+      if (item.disabled) return;
+      if (multiple) {
+        setSelectedIds((prev) => {
+          const newSet = new Set(prev);
+          if (newSet.has(item.id)) {
+            newSet.delete(item.id);
+          } else {
+            newSet.add(item.id);
+          }
+          return newSet;
+        });
+      } else {
+        setSelectedIds(/* @__PURE__ */ new Set([item.id]));
+      }
+      onSelect?.(item);
+      item.onClick?.();
+    },
+    [multiple, onSelect]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (!items || items.length === 0) return;
+      const enabledIndices = items.map((item, index) => item.disabled ? -1 : index).filter((i) => i !== -1);
+      let newIndex = focusedIndex;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (focusedIndex === -1) {
+            newIndex = enabledIndices[0] ?? -1;
+          } else {
+            const currentEnabledPos = enabledIndices.indexOf(focusedIndex);
+            const nextPos = Math.min(
+              currentEnabledPos + 1,
+              enabledIndices.length - 1
+            );
+            newIndex = enabledIndices[nextPos] ?? focusedIndex;
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (focusedIndex === -1) {
+            newIndex = enabledIndices[enabledIndices.length - 1] ?? -1;
+          } else {
+            const currentEnabledPos = enabledIndices.indexOf(focusedIndex);
+            const prevPos = Math.max(currentEnabledPos - 1, 0);
+            newIndex = enabledIndices[prevPos] ?? focusedIndex;
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (focusedIndex >= 0 && selectable && items[focusedIndex]) {
+            handleSelect(items[focusedIndex]);
+          }
+          break;
+        case "Home":
+          e.preventDefault();
+          newIndex = enabledIndices[0] ?? -1;
+          break;
+        case "End":
+          e.preventDefault();
+          newIndex = enabledIndices[enabledIndices.length - 1] ?? -1;
+          break;
+      }
+      if (newIndex !== focusedIndex) {
+        setFocusedIndex(newIndex);
+        itemRefsRef.current.get(newIndex)?.focus();
+      }
+    },
+    [items, focusedIndex, selectable, handleSelect]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        "data-loading": true,
+        "aria-busy": "true",
+        "aria-label": "Loading list",
+        className: cn(listVariants({ variant }), className),
+        "data-slot": "list",
+        "data-variant": variant,
+        role: "list",
+        ...props,
+        children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn(listItemVariants({ variant, size: "default" })),
+            "data-slot": "list-item",
+            children: [
+              /* @__PURE__ */ jsx(SkeletonLoader, { className: "size-10 rounded-full" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [
+                /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-32" }),
+                /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-3 w-24" })
+              ] })
+            ]
+          },
+          i
+        ))
+      }
+    );
+  }
+  if (items && items.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        "aria-label": props["aria-label"],
+        className: cn(listVariants({ variant }), className),
+        "data-slot": "list",
+        "data-variant": variant,
+        role: selectable ? "listbox" : "list",
+        tabIndex: selectable ? 0 : void 0,
+        onKeyDown: selectable ? handleKeyDown : void 0,
+        ...props,
+        children: items.map((item, index) => {
+          const isSelected = selectedIds.has(item.id);
+          const isFocused = focusedIndex === index;
+          return /* @__PURE__ */ jsx(
+            ListItemInternal,
+            {
+              ref: (el) => {
+                if (el) {
+                  itemRefsRef.current.set(index, el);
+                } else {
+                  itemRefsRef.current.delete(index);
+                }
+              },
+              tabIndex: selectable ? isFocused || focusedIndex === -1 && index === 0 ? 0 : -1 : void 0,
+              "aria-disabled": item.disabled ? true : void 0,
+              "aria-selected": selectable ? isSelected : void 0,
+              "data-focused": isFocused ? true : void 0,
+              "data-selected": isSelected ? true : void 0,
+              disabled: item.disabled,
+              isFocused,
+              item,
+              selectable,
+              selected: isSelected,
+              variant,
+              onClick: selectable && !item.disabled ? () => {
+                handleSelect(item);
+              } : void 0
+            },
+            item.id
+          );
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref,
+      "aria-label": props["aria-label"],
+      className: cn(listVariants({ variant }), className),
+      "data-slot": "list",
+      "data-variant": variant,
+      role: "list",
+      ...props,
+      children
+    }
+  );
+}
+function ListItemInternal({
+  ref,
+  item,
+  variant = "default",
+  selectable = false,
+  selected = false,
+  disabled = false,
+  isFocused = false,
+  onClick,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      className: cn(
+        listItemVariants({
+          variant,
+          size: "default",
+          selectable,
+          selected,
+          disabled
+        }),
+        isFocused && "ring-[3px] ring-ring/50",
+        className
+      ),
+      "data-slot": "list-item",
+      role: selectable ? "option" : void 0,
+      onClick,
+      ...props,
+      children: [
+        item.avatar && /* @__PURE__ */ jsxs(Avatar, { className: "size-10", "data-slot": "list-item-avatar", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { alt: item.label, src: item.avatar }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: item.label.slice(0, 2).toUpperCase() })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-0.5", "data-slot": "list-item-content", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium leading-snug", children: item.label }),
+          item.description && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-muted-foreground text-xs leading-normal",
+              "data-slot": "list-item-description",
+              children: item.description
+            }
+          )
+        ] }),
+        item.badge && /* @__PURE__ */ jsx("div", { "data-slot": "list-item-actions", children: /* @__PURE__ */ jsx(Badge, { color: "muted", type: "pill-color", children: item.badge }) })
+      ]
+    }
+  );
+}
+function ListItem({
+  className,
+  variant = "default",
+  size = "default",
+  selectable = false,
+  selected = false,
+  disabled = false,
+  ref,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      className: cn(
+        listItemVariants({ variant, size, selectable, selected, disabled }),
+        className
+      ),
+      "aria-disabled": disabled ? true : void 0,
+      "aria-selected": selectable ? selected : void 0,
+      "data-disabled": disabled ? true : void 0,
+      "data-selected": selected ? true : void 0,
+      "data-size": size,
+      "data-slot": "list-item",
+      "data-variant": variant,
+      role: selectable ? "option" : void 0,
+      tabIndex: selectable && !disabled ? 0 : void 0,
+      ...restProps
+    }
+  );
+}
+function ListItemContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-1 flex-col gap-0.5", className),
+      "data-slot": "list-item-content",
+      ...props
+    }
+  );
+}
+function ListItemActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-2", className),
+      "data-slot": "list-item-actions",
+      ...props
+    }
+  );
+}
+
+export { List, ListItem, ListItemActions, ListItemContent, listItemVariants, listVariants };
+//# sourceMappingURL=chunk-KXSJSLPJ.js.map
+//# sourceMappingURL=chunk-KXSJSLPJ.js.map

package/dist/chunk-KXSJSLPJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/List/List.tsx"],"names":[],"mappings":"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","file":"chunk-KXSJSLPJ.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../primitives/Avatar\"\nimport { Badge } from \"../../primitives/Badge\"\nimport { SkeletonLoader } from \"../../primitives/SkeletonLoader\"\n\n// ============================================\n// TYPES\n// ============================================\ninterface ListItem {\n  avatar?: string\n  badge?: string\n  description?: string\n  disabled?: boolean\n  id: string\n  label: string\n  onClick?: () => void\n}\n\n// ============================================\n// VARIANTS\n// ============================================\nconst listVariants = cva(\n  \"flex flex-col bg-background text-foreground transition-colors duration-150\",\n  {\n    variants: {\n      variant: {\n        default: \"border border-border rounded-md\",\n        flat: \"divide-y divide-border\",\n        card: \"gap-4 flex-col\",\n        minimal: \"divide-y divide-border border-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst listItemVariants = cva(\n  \"group/list-item flex items-center text-sm transition-colors duration-150 outline-none\",\n  {\n    variants: {\n      variant: {\n        default: \"border-b border-border last:border-b-0\",\n        flat: \"\",\n        card: \"border border-border rounded-md bg-background\",\n        minimal: \"\",\n      },\n      size: {\n        sm: \"px-3 py-2 min-h-8 gap-2\",\n        default: \"px-4 py-3 min-h-10 gap-3\",\n        lg: \"px-5 py-4 min-h-12 gap-4\",\n      },\n      selectable: {\n        true: \"cursor-pointer hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        false: \"\",\n      },\n      selected: {\n        true: \"bg-muted\",\n        false: \"\",\n      },\n      disabled: {\n        true: \"opacity-50 cursor-not-allowed pointer-events-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      selectable: false,\n      selected: false,\n      disabled: false,\n    },\n  }\n)\n\n// ============================================\n// LIST COMPONENT\n// ============================================\ntype ListProps = React.ComponentProps<\"ul\"> &\n  VariantProps<typeof listVariants> & {\n    items?: ListItem[]\n    loading?: boolean\n    multiple?: boolean\n    onSelect?: (item: ListItem) => void\n    selectable?: boolean\n  }\n\nfunction List({\n  className,\n  variant = \"default\",\n  items,\n  selectable = false,\n  multiple = false,\n  loading = false,\n  onSelect,\n  children,\n  ref,\n  ...props\n}: ListProps) {\n  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set())\n  const [focusedIndex, setFocusedIndex] = React.useState<number>(-1)\n  const itemRefsRef = React.useRef<Map<number, HTMLLIElement>>(new Map())\n\n  const handleSelect = React.useCallback(\n    (item: ListItem) => {\n      if (item.disabled) return\n\n      if (multiple) {\n        setSelectedIds((prev) => {\n          const newSet = new Set(prev)\n          if (newSet.has(item.id)) {\n            newSet.delete(item.id)\n          } else {\n            newSet.add(item.id)\n          }\n          return newSet\n        })\n      } else {\n        setSelectedIds(new Set([item.id]))\n      }\n\n      onSelect?.(item)\n      item.onClick?.()\n    },\n    [multiple, onSelect]\n  )\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLUListElement>) => {\n      if (!items || items.length === 0) return\n\n      const enabledIndices = items\n        .map((item, index) => (item.disabled ? -1 : index))\n        .filter((i) => i !== -1)\n\n      let newIndex = focusedIndex\n\n      switch (e.key) {\n        case \"ArrowDown\":\n          e.preventDefault()\n          if (focusedIndex === -1) {\n            newIndex = enabledIndices[0] ?? -1\n          } else {\n            const currentEnabledPos = enabledIndices.indexOf(focusedIndex)\n            const nextPos = Math.min(\n              currentEnabledPos + 1,\n              enabledIndices.length - 1\n            )\n            newIndex = enabledIndices[nextPos] ?? focusedIndex\n          }\n          break\n        case \"ArrowUp\":\n          e.preventDefault()\n          if (focusedIndex === -1) {\n            newIndex = enabledIndices[enabledIndices.length - 1] ?? -1\n          } else {\n            const currentEnabledPos = enabledIndices.indexOf(focusedIndex)\n            const prevPos = Math.max(currentEnabledPos - 1, 0)\n            newIndex = enabledIndices[prevPos] ?? focusedIndex\n          }\n          break\n        case \"Enter\":\n        case \" \":\n          e.preventDefault()\n          if (focusedIndex >= 0 && selectable && items[focusedIndex]) {\n            handleSelect(items[focusedIndex])\n          }\n          break\n        case \"Home\":\n          e.preventDefault()\n          newIndex = enabledIndices[0] ?? -1\n          break\n        case \"End\":\n          e.preventDefault()\n          newIndex = enabledIndices[enabledIndices.length - 1] ?? -1\n          break\n      }\n\n      if (newIndex !== focusedIndex) {\n        setFocusedIndex(newIndex)\n        itemRefsRef.current.get(newIndex)?.focus()\n      }\n    },\n    [items, focusedIndex, selectable, handleSelect]\n  )\n\n  // Loading skeleton\n  if (loading) {\n    return (\n      <ul\n        ref={ref}\n        data-loading\n        aria-busy=\"true\"\n        aria-label=\"Loading list\"\n        className={cn(listVariants({ variant }), className)}\n        data-slot=\"list\"\n        data-variant={variant}\n        role=\"list\"\n        {...props}\n      >\n        {[1, 2, 3].map((i) => (\n          <li\n            key={i}\n            className={cn(listItemVariants({ variant, size: \"default\" }))}\n            data-slot=\"list-item\"\n          >\n            <SkeletonLoader className=\"size-10 rounded-full\" />\n            <div className=\"flex flex-1 flex-col gap-1\">\n              <SkeletonLoader className=\"h-4 w-32\" />\n              <SkeletonLoader className=\"h-3 w-24\" />\n            </div>\n          </li>\n        ))}\n      </ul>\n    )\n  }\n\n  // Render with items prop\n  if (items && items.length > 0) {\n    return (\n      <ul\n        ref={ref}\n        aria-label={props[\"aria-label\"]}\n        className={cn(listVariants({ variant }), className)}\n        data-slot=\"list\"\n        data-variant={variant}\n        role={selectable ? \"listbox\" : \"list\"}\n        tabIndex={selectable ? 0 : undefined}\n        onKeyDown={selectable ? handleKeyDown : undefined}\n        {...props}\n      >\n        {items.map((item, index) => {\n          const isSelected = selectedIds.has(item.id)\n          const isFocused = focusedIndex === index\n\n          return (\n            <ListItemInternal\n              key={item.id}\n              ref={(el) => {\n                if (el) {\n                  itemRefsRef.current.set(index, el)\n                } else {\n                  itemRefsRef.current.delete(index)\n                }\n              }}\n              tabIndex={\n                selectable\n                  ? isFocused || (focusedIndex === -1 && index === 0)\n                    ? 0\n                    : -1\n                  : undefined\n              }\n              aria-disabled={item.disabled ? true : undefined}\n              aria-selected={selectable ? isSelected : undefined}\n              data-focused={isFocused ? true : undefined}\n              data-selected={isSelected ? true : undefined}\n              disabled={item.disabled}\n              isFocused={isFocused}\n              item={item}\n              selectable={selectable}\n              selected={isSelected}\n              variant={variant}\n              onClick={\n                selectable && !item.disabled\n                  ? () => { handleSelect(item); }\n                  : undefined\n              }\n            />\n          )\n        })}\n      </ul>\n    )\n  }\n\n  // Render with children\n  return (\n    <ul\n      ref={ref}\n      aria-label={props[\"aria-label\"]}\n      className={cn(listVariants({ variant }), className)}\n      data-slot=\"list\"\n      data-variant={variant}\n      role=\"list\"\n      {...props}\n    >\n      {children}\n    </ul>\n  )\n}\n\n// ============================================\n// INTERNAL LIST ITEM (for items prop rendering)\n// ============================================\ninterface ListItemInternalProps\n  extends Omit<React.ComponentProps<\"li\">, \"onClick\"> {\n  disabled?: boolean\n  isFocused?: boolean\n  item: ListItem\n  onClick?: () => void\n  selectable?: boolean\n  selected?: boolean\n  variant?: \"card\" | \"default\" | \"flat\" | \"minimal\" | null\n}\n\nfunction ListItemInternal({\n  ref,\n  item,\n  variant = \"default\",\n  selectable = false,\n  selected = false,\n  disabled = false,\n  isFocused = false,\n  onClick,\n  className,\n  ...props\n}: ListItemInternalProps & { ref?: React.Ref<HTMLLIElement | null> }) {\n    return (\n      <li\n        ref={ref}\n        className={cn(\n          listItemVariants({\n            variant,\n            size: \"default\",\n            selectable,\n            selected,\n            disabled,\n          }),\n          isFocused && \"ring-[3px] ring-ring/50\",\n          className\n        )}\n        data-slot=\"list-item\"\n        role={selectable ? \"option\" : undefined}\n        onClick={onClick}\n        {...props}\n      >\n        {item.avatar && (\n          <Avatar className=\"size-10\" data-slot=\"list-item-avatar\">\n            <AvatarImage alt={item.label} src={item.avatar} />\n            <AvatarFallback>\n              {item.label.slice(0, 2).toUpperCase()}\n            </AvatarFallback>\n          </Avatar>\n        )}\n\n        <div className=\"flex flex-1 flex-col gap-0.5\" data-slot=\"list-item-content\">\n          <span className=\"font-medium leading-snug\">{item.label}</span>\n          {item.description && (\n            <span\n              className=\"text-muted-foreground text-xs leading-normal\"\n              data-slot=\"list-item-description\"\n            >\n              {item.description}\n            </span>\n          )}\n        </div>\n\n        {item.badge && (\n          <div data-slot=\"list-item-actions\">\n            <Badge color=\"muted\" type=\"pill-color\">{item.badge}</Badge>\n          </div>\n        )}\n      </li>\n    )\n  }\n\n// ============================================\n// PUBLIC LIST ITEM COMPONENT\n// ============================================\ninterface ListItemProps extends Omit<React.ComponentProps<\"li\">, \"disabled\"> {\n  disabled?: boolean\n  selectable?: boolean\n  selected?: boolean\n  size?: \"default\" | \"lg\" | \"sm\"\n  variant?: \"card\" | \"default\" | \"flat\" | \"minimal\"\n}\n\nfunction ListItem({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  selectable = false,\n  selected = false,\n  disabled = false,\n  ref,\n  ...restProps\n}: ListItemProps) {\n  return (\n    <li\n      ref={ref}\n      className={cn(\n        listItemVariants({ variant, size, selectable, selected, disabled }),\n        className\n      )}\n      aria-disabled={disabled ? true : undefined}\n      aria-selected={selectable ? selected : undefined}\n      data-disabled={disabled ? true : undefined}\n      data-selected={selected ? true : undefined}\n      data-size={size}\n      data-slot=\"list-item\"\n      data-variant={variant}\n      role={selectable ? \"option\" : undefined}\n      tabIndex={selectable && !disabled ? 0 : undefined}\n      {...restProps}\n    />\n  )\n}\n\n// ============================================\n// LIST ITEM CONTENT\n// ============================================\nfunction ListItemContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-1 flex-col gap-0.5\", className)}\n      data-slot=\"list-item-content\"\n      {...props}\n    />\n  )\n}\n\n// ============================================\n// LIST ITEM ACTIONS\n// ============================================\nfunction ListItemActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex items-center gap-2\", className)}\n      data-slot=\"list-item-actions\"\n      {...props}\n    />\n  )\n}\n\n// ============================================\n// EXPORTS\n// ============================================\nexport {\n  List,\n  ListItem,\n  ListItemActions,\n  ListItemContent,\n  listItemVariants,\n  listVariants,\n}\nexport type { ListItemProps, ListItem as ListItemType, ListProps }\n"]}

package/dist/chunk-L2XR5IFJ.js

@@ -0,0 +1,103 @@
+import { useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+// src/components/advanced/Portal/Portal.tsx
+var emptySubscribe = () => () => {
+};
+var getClientSnapshot = () => true;
+var getServerSnapshot = () => false;
+function Portal({ children, container, disabled = false }) {
+  const mounted = useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot);
+  if (disabled) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (!mounted) {
+    return null;
+  }
+  const portalContainer = container ?? globalThis.document.body;
+  return createPortal(children, portalContainer);
+}
+var portalContainerVariants = cva(
+  "",
+  {
+    variants: {
+      position: {
+        fixed: "fixed",
+        absolute: "absolute",
+        relative: "relative"
+      },
+      zIndex: {
+        base: "z-[var(--z-base)]",
+        dropdown: "z-[var(--z-dropdown)]",
+        sticky: "z-[var(--z-sticky)]",
+        modal: "z-[var(--z-modal)]",
+        popover: "z-[var(--z-popover)]",
+        tooltip: "z-[var(--z-tooltip)]",
+        toast: "z-[var(--z-toast)]",
+        overlay: "z-[var(--z-overlay)]",
+        // `max` is intended for "highest possible" use-cases. The token system
+        // tops out at --z-toast (700); use this when nothing semantic fits.
+        max: "z-[var(--z-toast)]"
+      }
+    },
+    defaultVariants: {
+      position: "fixed",
+      zIndex: "modal"
+    }
+  }
+);
+var portalOverlayVariants = cva(
+  "fixed inset-0 transition-opacity",
+  {
+    variants: {
+      variant: {
+        transparent: "bg-transparent",
+        light: "bg-background/80 backdrop-blur-sm",
+        dark: "bg-black/50 backdrop-blur-sm",
+        solid: "bg-background"
+      },
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      variant: "dark",
+      visible: true
+    }
+  }
+);
+var portalContentVariants = cva(
+  "",
+  {
+    variants: {
+      position: {
+        center: "fixed inset-0 flex items-center justify-center",
+        top: "fixed top-0 left-0 right-0",
+        bottom: "fixed bottom-0 left-0 right-0",
+        left: "fixed top-0 left-0 bottom-0",
+        right: "fixed top-0 right-0 bottom-0",
+        "top-right": "fixed top-4 right-4",
+        "top-left": "fixed top-4 left-4",
+        "bottom-right": "fixed bottom-4 right-4",
+        "bottom-left": "fixed bottom-4 left-4"
+      },
+      padding: {
+        none: "p-0",
+        sm: "p-2",
+        md: "p-4",
+        lg: "p-6"
+      }
+    },
+    defaultVariants: {
+      position: "center",
+      padding: "md"
+    }
+  }
+);
+
+export { Portal, portalContainerVariants, portalContentVariants, portalOverlayVariants };
+//# sourceMappingURL=chunk-L2XR5IFJ.js.map
+//# sourceMappingURL=chunk-L2XR5IFJ.js.map

package/dist/chunk-L2XR5IFJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/advanced/Portal/Portal.tsx","../src/components/advanced/Portal/Portal.variants.ts"],"names":[],"mappings":";;;;;;AASA,IAAM,cAAA,GAAiB,MAAM,MAAM;AAAC,CAAA;AACpC,IAAM,oBAAoB,MAAM,IAAA;AAChC,IAAM,oBAAoB,MAAM,KAAA;AA4ChC,SAAS,OAAO,EAAE,QAAA,EAAU,SAAA,EAAW,QAAA,GAAW,OAAM,EAAgB;AAEtE,EAAA,MAAM,OAAA,GAAU,oBAAA,CAAqB,cAAA,EAAgB,iBAAA,EAAmB,iBAAiB,CAAA;AAGzF,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAGA,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAIA,EAAA,MAAM,eAAA,GAAkB,SAAA,IAAa,UAAA,CAAW,QAAA,CAAS,IAAA;AAEzD,EAAA,OAAO,YAAA,CAAa,UAAU,eAAe,CAAA;AAC/C;ACjEO,IAAM,uBAAA,GAA0B,GAAA;AAAA,EACrC,EAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,QAAA,EAAU;AAAA,QACR,KAAA,EAAO,OAAA;AAAA,QACP,QAAA,EAAU,UAAA;AAAA,QACV,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,mBAAA;AAAA,QACN,QAAA,EAAU,uBAAA;AAAA,QACV,MAAA,EAAQ,qBAAA;AAAA,QACR,KAAA,EAAO,oBAAA;AAAA,QACP,OAAA,EAAS,sBAAA;AAAA,QACT,OAAA,EAAS,sBAAA;AAAA,QACT,KAAA,EAAO,oBAAA;AAAA,QACP,OAAA,EAAS,sBAAA;AAAA;AAAA;AAAA,QAGT,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU,OAAA;AAAA,MACV,MAAA,EAAQ;AAAA;AACV;AAEJ;AAMO,IAAM,qBAAA,GAAwB,GAAA;AAAA,EACnC,kCAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,WAAA,EAAa,gBAAA;AAAA,QACb,KAAA,EAAO,mCAAA;AAAA,QACP,IAAA,EAAM,8BAAA;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,MAAA;AAAA,MACT,OAAA,EAAS;AAAA;AACX;AAEJ;AAMO,IAAM,qBAAA,GAAwB,GAAA;AAAA,EACnC,EAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,QAAA,EAAU;AAAA,QACR,MAAA,EAAQ,gDAAA;AAAA,QACR,GAAA,EAAK,4BAAA;AAAA,QACL,MAAA,EAAQ,+BAAA;AAAA,QACR,IAAA,EAAM,6BAAA;AAAA,QACN,KAAA,EAAO,8BAAA;AAAA,QACP,WAAA,EAAa,qBAAA;AAAA,QACb,UAAA,EAAY,oBAAA;AAAA,QACZ,cAAA,EAAgB,wBAAA;AAAA,QAChB,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,KAAA;AAAA,QACN,EAAA,EAAI,KAAA;AAAA,QACJ,EAAA,EAAI,KAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU,QAAA;AAAA,MACV,OAAA,EAAS;AAAA;AACX;AAEJ","file":"chunk-L2XR5IFJ.js","sourcesContent":["\"use client\"\n\nimport type { PortalProps } from \"./Portal.types\"\n\nimport { useSyncExternalStore } from \"react\"\nimport { createPortal } from \"react-dom\"\n\n// SSR-safe subscription for mounted state\n// eslint-disable-next-line @typescript-eslint/no-empty-function -- required by useSyncExternalStore API\nconst emptySubscribe = () => () => {}\nconst getClientSnapshot = () => true\nconst getServerSnapshot = () => false\n\n/**\n * Portal renders children into a DOM node outside of the parent component hierarchy.\n * Essential for modals, tooltips, dropdowns, and other elements that need to escape\n * the context of overflow or z-index.\n *\n * By default, content is rendered in document.body. A custom container can be specified\n * using the container prop.\n *\n * The Portal preserves React context (Context, events) and handles cleanup automatically.\n *\n * @example Basic usage\n * ```tsx\n * <Portal>\n *   <div className=\"fixed inset-0 bg-black/50 z-50\">\n *     <div className=\"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n *       Modal Content\n *     </div>\n *   </div>\n * </Portal>\n * ```\n *\n * @example With custom container\n * ```tsx\n * const [container, setContainer] = useState<HTMLElement | null>(null)\n *\n * return (\n *   <>\n *     <div ref={setContainer} id=\"custom-portal-container\" />\n *     <Portal container={container}>\n *       <div>Content in custom container</div>\n *     </Portal>\n *   </>\n * )\n * ```\n *\n * @example Disabled (inline rendering)\n * ```tsx\n * <Portal disabled>\n *   <div>This renders inline, not in a portal</div>\n * </Portal>\n * ```\n */\nfunction Portal({ children, container, disabled = false }: PortalProps) {\n  // Use useSyncExternalStore for SSR-safe mounted detection\n  const mounted = useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot)\n\n  // When disabled, render children inline (no portal)\n  if (disabled) {\n    return <>{children}</>\n  }\n\n  // SSR: render nothing until mounted on client\n  if (!mounted) {\n    return null\n  }\n\n  // Determine the container element\n  // Priority: container prop > document.body\n  const portalContainer = container ?? globalThis.document.body\n\n  return createPortal(children, portalContainer)\n}\n\nexport { Portal }\n","import { cva } from \"class-variance-authority\"\n\n/**\n * Portal container variants\n *\n * Note: Portal is primarily a utility component that renders children\n * outside the DOM hierarchy. These variants are for optional wrapper\n * styling when needed.\n */\nexport const portalContainerVariants = cva(\n  \"\",\n  {\n    variants: {\n      position: {\n        fixed: \"fixed\",\n        absolute: \"absolute\",\n        relative: \"relative\",\n      },\n      zIndex: {\n        base: \"z-[var(--z-base)]\",\n        dropdown: \"z-[var(--z-dropdown)]\",\n        sticky: \"z-[var(--z-sticky)]\",\n        modal: \"z-[var(--z-modal)]\",\n        popover: \"z-[var(--z-popover)]\",\n        tooltip: \"z-[var(--z-tooltip)]\",\n        toast: \"z-[var(--z-toast)]\",\n        overlay: \"z-[var(--z-overlay)]\",\n        // `max` is intended for \"highest possible\" use-cases. The token system\n        // tops out at --z-toast (700); use this when nothing semantic fits.\n        max: \"z-[var(--z-toast)]\",\n      },\n    },\n    defaultVariants: {\n      position: \"fixed\",\n      zIndex: \"modal\",\n    },\n  }\n)\n\n/**\n * Portal overlay variants\n * Used for backdrop/overlay styling when portaling modal content\n */\nexport const portalOverlayVariants = cva(\n  \"fixed inset-0 transition-opacity\",\n  {\n    variants: {\n      variant: {\n        transparent: \"bg-transparent\",\n        light: \"bg-background/80 backdrop-blur-sm\",\n        dark: \"bg-black/50 backdrop-blur-sm\",\n        solid: \"bg-background\",\n      },\n      visible: {\n        true: \"opacity-100\",\n        false: \"opacity-0 pointer-events-none\",\n      },\n    },\n    defaultVariants: {\n      variant: \"dark\",\n      visible: true,\n    },\n  }\n)\n\n/**\n * Portal content wrapper variants\n * Used for centering or positioning portaled content\n */\nexport const portalContentVariants = cva(\n  \"\",\n  {\n    variants: {\n      position: {\n        center: \"fixed inset-0 flex items-center justify-center\",\n        top: \"fixed top-0 left-0 right-0\",\n        bottom: \"fixed bottom-0 left-0 right-0\",\n        left: \"fixed top-0 left-0 bottom-0\",\n        right: \"fixed top-0 right-0 bottom-0\",\n        \"top-right\": \"fixed top-4 right-4\",\n        \"top-left\": \"fixed top-4 left-4\",\n        \"bottom-right\": \"fixed bottom-4 right-4\",\n        \"bottom-left\": \"fixed bottom-4 left-4\",\n      },\n      padding: {\n        none: \"p-0\",\n        sm: \"p-2\",\n        md: \"p-4\",\n        lg: \"p-6\",\n      },\n    },\n    defaultVariants: {\n      position: \"center\",\n      padding: \"md\",\n    },\n  }\n)\n"]}