@kamod-ch/ui 0.2.1

package/dist/chunk-OCLVMKVC.js

@@ -0,0 +1,110 @@
+import { popoverTrigger, popoverContent, popover, PopoverContent, PopoverTrigger, Popover, usePopover } from './chunk-U2UNWXBC.js';
+import { tv } from 'tailwind-variants';
+import { jsx, jsxs } from 'preact/jsx-runtime';
+
+var popoverClose = tv({
+  base: [
+    "absolute right-3 top-3 inline-flex size-6 items-center justify-center rounded-sm opacity-70",
+    "hover:opacity-100 focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
+    "disabled:pointer-events-none"
+  ]
+});
+var PopoverClose = ({
+  class: className,
+  children,
+  onClick,
+  ...rest
+}) => {
+  const popover2 = usePopover();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      class: popoverClose({ class: className }),
+      "data-slot": "popover-close",
+      "aria-label": "Close",
+      onClick: (event) => {
+        popover2.setOpen(false);
+        popover2.triggerRef.current?.focus();
+        onClick?.(event);
+      },
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          children: [
+            /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+            /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+          ]
+        }
+      )
+    }
+  );
+};
+var popoverDescription = tv({ base: "text-muted-foreground text-sm" });
+var PopoverDescription = ({
+  class: className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    class: popoverDescription({ class: className }),
+    "data-slot": "popover-description",
+    ...rest,
+    children
+  }
+);
+var popoverHeader = tv({ base: "flex flex-col gap-1.5" });
+var PopoverHeader = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    class: popoverHeader({ class: className }),
+    "data-slot": "popover-header",
+    ...rest,
+    children
+  }
+);
+var popoverTitle = tv({ base: "font-medium leading-none" });
+var PopoverTitle = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    class: popoverTitle({ class: className }),
+    "data-slot": "popover-title",
+    ...rest,
+    children
+  }
+);
+
+// src/components/popover/index.ts
+var PopoverVariants = {
+  popover,
+  popoverClose,
+  popoverContent,
+  popoverDescription,
+  popoverHeader,
+  popoverTitle,
+  popoverTrigger
+};
+var popover_default = {
+  Root: Popover,
+  Close: PopoverClose,
+  Trigger: PopoverTrigger,
+  Content: PopoverContent,
+  Header: PopoverHeader,
+  Title: PopoverTitle,
+  Description: PopoverDescription
+};
+
+export { PopoverClose, PopoverDescription, PopoverHeader, PopoverTitle, PopoverVariants, popover_default };
+//# sourceMappingURL=chunk-OCLVMKVC.js.map
+//# sourceMappingURL=chunk-OCLVMKVC.js.map

package/dist/chunk-OCLVMKVC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/popover/PopoverClose.tsx","../src/components/popover/PopoverDescription.tsx","../src/components/popover/PopoverHeader.tsx","../src/components/popover/PopoverTitle.tsx","../src/components/popover/index.ts"],"names":["popover","tv","jsx"],"mappings":"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","file":"chunk-OCLVMKVC.js","sourcesContent":["import type { ComponentChildren, JSX } from \"preact\";\nimport { tv } from \"tailwind-variants\";\nimport { usePopover } from \"./Popover\";\n\nexport const popoverClose = tv({\n  base: [\n    \"absolute right-3 top-3 inline-flex size-6 items-center justify-center rounded-sm opacity-70\",\n    \"hover:opacity-100 focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none\",\n    \"disabled:pointer-events-none\",\n  ],\n});\n\nexport type PopoverCloseProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {\n  children?: ComponentChildren;\n};\n\nexport const PopoverClose = ({\n  class: className,\n  children,\n  onClick,\n  ...rest\n}: PopoverCloseProps) => {\n  const popover = usePopover();\n\n  return (\n    <button\n      type=\"button\"\n      class={popoverClose({ class: className as string | undefined })}\n      data-slot=\"popover-close\"\n      aria-label=\"Close\"\n      onClick={(event) => {\n        popover.setOpen(false);\n        popover.triggerRef.current?.focus();\n        onClick?.(event);\n      }}\n      {...rest}\n    >\n      {children ?? (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      )}\n    </button>\n  );\n};\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { tv } from \"tailwind-variants\";\n\nexport const popoverDescription = tv({ base: \"text-muted-foreground text-sm\" });\n\nexport type PopoverDescriptionProps = JSX.HTMLAttributes<HTMLParagraphElement> & {\n  children?: ComponentChildren;\n};\n\nexport const PopoverDescription = ({\n  class: className,\n  children,\n  ...rest\n}: PopoverDescriptionProps) => (\n  <p\n    class={popoverDescription({ class: className as string | undefined })}\n    data-slot=\"popover-description\"\n    {...rest}\n  >\n    {children}\n  </p>\n);\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { tv } from \"tailwind-variants\";\n\nexport const popoverHeader = tv({ base: \"flex flex-col gap-1.5\" });\n\nexport type PopoverHeaderProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  children?: ComponentChildren;\n};\n\nexport const PopoverHeader = ({ class: className, children, ...rest }: PopoverHeaderProps) => (\n  <div\n    class={popoverHeader({ class: className as string | undefined })}\n    data-slot=\"popover-header\"\n    {...rest}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { tv } from \"tailwind-variants\";\n\nexport const popoverTitle = tv({ base: \"font-medium leading-none\" });\n\nexport type PopoverTitleProps = JSX.HTMLAttributes<HTMLHeadingElement> & {\n  children?: ComponentChildren;\n};\n\nexport const PopoverTitle = ({ class: className, children, ...rest }: PopoverTitleProps) => (\n  <h3\n    class={popoverTitle({ class: className as string | undefined })}\n    data-slot=\"popover-title\"\n    {...rest}\n  >\n    {children}\n  </h3>\n);\n","import { Popover, popover } from \"./Popover\";\nimport { PopoverClose, popoverClose } from \"./PopoverClose\";\nimport { PopoverContent, popoverContent } from \"./PopoverContent\";\nimport { PopoverDescription, popoverDescription } from \"./PopoverDescription\";\nimport { PopoverHeader, popoverHeader } from \"./PopoverHeader\";\nimport { PopoverTitle, popoverTitle } from \"./PopoverTitle\";\nimport { PopoverTrigger, popoverTrigger } from \"./PopoverTrigger\";\n\nconst PopoverVariants = {\n  popover,\n  popoverClose,\n  popoverContent,\n  popoverDescription,\n  popoverHeader,\n  popoverTitle,\n  popoverTrigger,\n};\n\nexport {\n  Popover,\n  PopoverClose,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n  PopoverVariants,\n};\n\nexport default {\n  Root: Popover,\n  Close: PopoverClose,\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Header: PopoverHeader,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n};\n"]}

package/dist/chunk-PFV7YIEP.js

@@ -0,0 +1,104 @@
+import { Spinner } from './chunk-NKKMM6CK.js';
+import { cn } from './chunk-MS2ZNYCJ.js';
+import { signal } from '@preact/signals';
+import { jsxs, jsx } from 'preact/jsx-runtime';
+
+var Dropzone = ({
+  accept,
+  multiple = true,
+  onFilesChange,
+  class: className,
+  children,
+  ...rest
+}) => {
+  const isDragging = signal(false);
+  const readFiles = (list) => {
+    const files = list ? Array.from(list) : [];
+    onFilesChange?.(files);
+  };
+  const onDragOver = (event) => {
+    event.preventDefault();
+    isDragging.value = true;
+  };
+  const onDragLeave = (event) => {
+    event.preventDefault();
+    isDragging.value = false;
+  };
+  const onDrop = (event) => {
+    event.preventDefault();
+    isDragging.value = false;
+    readFiles(event.dataTransfer?.files ?? null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "dropzone",
+      "data-dragging": isDragging.value ? "true" : "false",
+      class: cn(
+        "border-input bg-background hover:bg-muted/50 relative rounded-lg border border-dashed p-5 transition-colors",
+        isDragging.value && "border-primary bg-primary/5",
+        className
+      ),
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "data-slot": "dropzone-input",
+            type: "file",
+            accept,
+            multiple,
+            class: "absolute inset-0 cursor-pointer opacity-0",
+            onChange: (event) => readFiles(event.currentTarget.files)
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var DropzoneFilesList = ({ files, class: className, ...rest }) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    "data-slot": "dropzone-files-list",
+    class: cn("text-muted-foreground mt-2 grid gap-1 text-sm", className),
+    ...rest,
+    children: files.map((file) => /* @__PURE__ */ jsx("li", { children: file.name }, file.name))
+  }
+);
+var DropzoneLoadingIndicator = ({
+  class: className,
+  children = "Uploading...",
+  ...rest
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "data-slot": "dropzone-loading-indicator",
+    class: cn("inline-flex items-center gap-2 text-sm", className),
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+      /* @__PURE__ */ jsx("span", { children })
+    ]
+  }
+);
+var DropzoneUploadIndicator = ({
+  class: className,
+  children = "Drop files here or click to upload",
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "dropzone-upload-indicator",
+    class: cn("text-muted-foreground text-sm", className),
+    ...rest,
+    children
+  }
+);
+
+export { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator };
+//# sourceMappingURL=chunk-PFV7YIEP.js.map
+//# sourceMappingURL=chunk-PFV7YIEP.js.map

package/dist/chunk-PFV7YIEP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dropzone/Dropzone.tsx","../src/components/dropzone/DropzoneFilesList.tsx","../src/components/dropzone/DropzoneLoadingIndicator.tsx","../src/components/dropzone/DropzoneUploadIndicator.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-PFV7YIEP.js","sourcesContent":["import { signal } from \"@preact/signals\";\nimport type { ComponentChildren, JSX, TargetedDragEvent } from \"preact\";\nimport { cn } from \"../../lib/utils\";\n\nexport type DropzoneProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  accept?: string;\n  multiple?: boolean;\n  onFilesChange?: (files: File[]) => void;\n  children?: ComponentChildren;\n};\n\nexport const Dropzone = ({\n  accept,\n  multiple = true,\n  onFilesChange,\n  class: className,\n  children,\n  ...rest\n}: DropzoneProps) => {\n  const isDragging = signal(false);\n\n  const readFiles = (list: FileList | null) => {\n    const files = list ? Array.from(list) : [];\n    onFilesChange?.(files);\n  };\n\n  const onDragOver = (event: TargetedDragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    isDragging.value = true;\n  };\n\n  const onDragLeave = (event: TargetedDragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    isDragging.value = false;\n  };\n\n  const onDrop = (event: TargetedDragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    isDragging.value = false;\n    readFiles(event.dataTransfer?.files ?? null);\n  };\n\n  return (\n    <div\n      data-slot=\"dropzone\"\n      data-dragging={isDragging.value ? \"true\" : \"false\"}\n      class={cn(\n        \"border-input bg-background hover:bg-muted/50 relative rounded-lg border border-dashed p-5 transition-colors\",\n        isDragging.value && \"border-primary bg-primary/5\",\n        className,\n      )}\n      onDragOver={onDragOver}\n      onDragLeave={onDragLeave}\n      onDrop={onDrop}\n      {...rest}\n    >\n      <input\n        data-slot=\"dropzone-input\"\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        class=\"absolute inset-0 cursor-pointer opacity-0\"\n        onChange={(event) => readFiles((event.currentTarget as HTMLInputElement).files)}\n      />\n      {children}\n    </div>\n  );\n};\n","import type { JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\n\nexport type DropzoneFilesListProps = JSX.HTMLAttributes<HTMLUListElement> & {\n  files: File[];\n};\n\nexport const DropzoneFilesList = ({ files, class: className, ...rest }: DropzoneFilesListProps) => (\n  <ul\n    data-slot=\"dropzone-files-list\"\n    class={cn(\"text-muted-foreground mt-2 grid gap-1 text-sm\", className)}\n    {...rest}\n  >\n    {files.map((file) => (\n      <li key={file.name}>{file.name}</li>\n    ))}\n  </ul>\n);\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\nimport { Spinner } from \"../spinner\";\n\nexport type DropzoneLoadingIndicatorProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  children?: ComponentChildren;\n};\n\nexport const DropzoneLoadingIndicator = ({\n  class: className,\n  children = \"Uploading...\",\n  ...rest\n}: DropzoneLoadingIndicatorProps) => (\n  <div\n    data-slot=\"dropzone-loading-indicator\"\n    class={cn(\"inline-flex items-center gap-2 text-sm\", className)}\n    {...rest}\n  >\n    <Spinner size=\"sm\" />\n    <span>{children}</span>\n  </div>\n);\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\n\nexport type DropzoneUploadIndicatorProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  children?: ComponentChildren;\n};\n\nexport const DropzoneUploadIndicator = ({\n  class: className,\n  children = \"Drop files here or click to upload\",\n  ...rest\n}: DropzoneUploadIndicatorProps) => (\n  <div\n    data-slot=\"dropzone-upload-indicator\"\n    class={cn(\"text-muted-foreground text-sm\", className)}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n"]}

package/dist/chunk-PGOCR4LG.js

@@ -0,0 +1,216 @@
+import { cn } from './chunk-MS2ZNYCJ.js';
+import { createContext, toChildArray, isValidElement, Fragment } from 'preact';
+import { useState, useCallback, useMemo, useEffect, useContext } from 'preact/hooks';
+import { tv } from 'tailwind-variants';
+import { jsx, jsxs } from 'preact/jsx-runtime';
+
+var AvatarContext = createContext(null);
+var useAvatarContext = () => {
+  const ctx = useContext(AvatarContext);
+  if (!ctx) {
+    throw new Error("AvatarImage, AvatarFallback, and AvatarBadge must be used within Avatar");
+  }
+  return ctx;
+};
+var AvatarBadge = ({ class: className, children, ...rest }) => {
+  useAvatarContext();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "avatar-badge",
+      class: cn(
+        "absolute z-20 box-border inline-flex items-center justify-center rounded-full bg-primary",
+        /* Bottom-inline-end overlap (~¼ avatar width) with a thick white ring so the dot reads clearly on the photo. */
+        "bottom-0.5 end-0.5 ring-[3px] ring-white dark:ring-background",
+        "group-data-[size=sm]/avatar:bottom-px group-data-[size=sm]/avatar:end-px group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:ring-2",
+        "group-data-[size=sm]/avatar:[&_svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&_svg]:size-2",
+        "group-data-[size=lg]/avatar:bottom-1 group-data-[size=lg]/avatar:end-1 group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&_svg]:size-2",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+};
+var avatarRoot = tv({
+  base: "group/avatar relative inline-flex shrink-0 select-none",
+  variants: {
+    size: {
+      sm: "size-8",
+      default: "size-10",
+      lg: "size-12"
+    }
+  },
+  defaultVariants: { size: "default" }
+});
+var avatarMedia = tv({
+  base: [
+    "absolute inset-0 overflow-hidden rounded-full border border-border",
+    "after:pointer-events-none after:absolute after:inset-0 after:z-[5] after:rounded-full after:border after:border-border/50"
+  ]
+});
+function partitionAvatarChildren(children) {
+  const media = [];
+  const badges = [];
+  for (const node of toChildArray(children)) {
+    if (isValidElement(node) && node.type === AvatarBadge) {
+      badges.push(node);
+    } else {
+      media.push(node);
+    }
+  }
+  return { media, badges };
+}
+var Avatar = ({ size = "default", class: className, children, ...rest }) => {
+  const [loaded, setLoaded] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const notifyLoad = useCallback(() => {
+    setLoaded(true);
+    setFailed(false);
+  }, []);
+  const notifyError = useCallback(() => {
+    setFailed(true);
+    setLoaded(false);
+  }, []);
+  const resetImage = useCallback(() => {
+    setLoaded(false);
+    setFailed(false);
+  }, []);
+  const showFallback = !loaded || failed;
+  const value = useMemo(
+    () => ({
+      notifyLoad,
+      notifyError,
+      resetImage,
+      showFallback
+    }),
+    [notifyLoad, notifyError, resetImage, showFallback]
+  );
+  const dataSize = size === "default" ? "default" : size;
+  const { media, badges } = partitionAvatarChildren(children);
+  return /* @__PURE__ */ jsx(AvatarContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      "data-slot": "avatar",
+      "data-size": dataSize,
+      class: avatarRoot({ size, class: className }),
+      children: [
+        /* @__PURE__ */ jsx("span", { class: avatarMedia(), children: media }),
+        badges
+      ]
+    }
+  ) });
+};
+var AvatarFallback = ({ class: className, children, ...rest }) => {
+  const { showFallback } = useAvatarContext();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "avatar-fallback",
+      class: cn(
+        "bg-muted text-muted-foreground absolute inset-0 z-0 inline-flex size-full items-center justify-center font-medium",
+        "text-sm group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-base",
+        !showFallback && "hidden",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+};
+var AvatarGroupCount = ({
+  class: className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "avatar-group-count",
+    class: cn(
+      "bg-muted text-muted-foreground relative z-[100] -ms-2 inline-flex size-10 shrink-0 items-center justify-center rounded-full text-center text-xs font-medium tabular-nums leading-none ring-2 ring-background rtl:-ms-0 rtl:-me-2",
+      className
+    ),
+    ...rest,
+    children
+  }
+);
+var AvatarGroup = ({ class: className, children, ...rest }) => {
+  const items = toChildArray(children);
+  let stackIndex = 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "avatar-group",
+      class: cn(
+        "isolate flex flex-row flex-wrap items-center -space-x-2 rtl:space-x-reverse",
+        className
+      ),
+      ...rest,
+      children: items.map((child, i) => {
+        if (isValidElement(child) && child.type === Avatar) {
+          const z = stackIndex;
+          stackIndex += 1;
+          const key = typeof child.key === "string" || typeof child.key === "number" ? child.key : `avatar-group-${i}`;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              class: "relative inline-flex shrink-0 rounded-full ring-2 ring-background",
+              style: { zIndex: z },
+              children: child
+            },
+            key
+          );
+        }
+        if (isValidElement(child) && child.type === AvatarGroupCount) {
+          const key = typeof child.key === "string" || typeof child.key === "number" ? child.key : `avatar-group-count-${i}`;
+          return /* @__PURE__ */ jsx("span", { class: "relative z-[100] inline-flex shrink-0", children: child }, key);
+        }
+        return /* @__PURE__ */ jsx(Fragment, { children: child }, i);
+      })
+    }
+  );
+};
+var AvatarImage = ({
+  class: className,
+  src,
+  alt = "",
+  onLoad,
+  onError,
+  ...rest
+}) => {
+  const { notifyLoad, notifyError, resetImage, showFallback } = useAvatarContext();
+  useEffect(() => {
+    resetImage();
+    if (!src || src === "") {
+      notifyError();
+    }
+  }, [src, resetImage, notifyError]);
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      "data-slot": "avatar-image",
+      src,
+      alt,
+      class: cn(
+        "absolute inset-0 z-10 size-full object-cover",
+        showFallback && "invisible",
+        className
+      ),
+      onLoad: (e) => {
+        onLoad?.(e);
+        notifyLoad();
+      },
+      onError: (e) => {
+        onError?.(e);
+        notifyError();
+      },
+      ...rest
+    }
+  );
+};
+
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, avatarRoot };
+//# sourceMappingURL=chunk-PGOCR4LG.js.map
+//# sourceMappingURL=chunk-PGOCR4LG.js.map

package/dist/chunk-PGOCR4LG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/avatar/context.tsx","../src/components/avatar/AvatarBadge.tsx","../src/components/avatar/Avatar.tsx","../src/components/avatar/AvatarFallback.tsx","../src/components/avatar/AvatarGroupCount.tsx","../src/components/avatar/AvatarGroup.tsx","../src/components/avatar/AvatarImage.tsx"],"names":["jsx","toChildArray","isValidElement"],"mappings":"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","file":"chunk-PGOCR4LG.js","sourcesContent":["import { createContext } from \"preact\";\nimport { useContext } from \"preact/hooks\";\nimport type { AvatarContextValue } from \"./types\";\n\nexport const AvatarContext = createContext<AvatarContextValue | null>(null);\n\nexport const useAvatarContext = () => {\n  const ctx = useContext(AvatarContext);\n  if (!ctx) {\n    throw new Error(\"AvatarImage, AvatarFallback, and AvatarBadge must be used within Avatar\");\n  }\n  return ctx;\n};\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\nimport { useAvatarContext } from \"./context\";\n\nexport type AvatarBadgeProps = JSX.HTMLAttributes<HTMLSpanElement> & {\n  children?: ComponentChildren;\n};\n\nexport const AvatarBadge = ({ class: className, children, ...rest }: AvatarBadgeProps) => {\n  useAvatarContext();\n\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      class={cn(\n        \"absolute z-20 box-border inline-flex items-center justify-center rounded-full bg-primary\",\n        /* Bottom-inline-end overlap (~¼ avatar width) with a thick white ring so the dot reads clearly on the photo. */\n        \"bottom-0.5 end-0.5 ring-[3px] ring-white dark:ring-background\",\n        \"group-data-[size=sm]/avatar:bottom-px group-data-[size=sm]/avatar:end-px group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:ring-2\",\n        \"group-data-[size=sm]/avatar:[&_svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&_svg]:size-2\",\n        \"group-data-[size=lg]/avatar:bottom-1 group-data-[size=lg]/avatar:end-1 group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&_svg]:size-2\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n};\n","import type { ComponentChild, ComponentChildren, JSX, VNode } from \"preact\";\nimport { isValidElement, toChildArray } from \"preact\";\nimport { useCallback, useMemo, useState } from \"preact/hooks\";\nimport { tv } from \"tailwind-variants\";\nimport { AvatarBadge } from \"./AvatarBadge\";\nimport { AvatarContext } from \"./context\";\n\n/** Outer shell: no overflow so AvatarBadge rings are not clipped. */\nexport const avatarRoot = tv({\n  base: \"group/avatar relative inline-flex shrink-0 select-none\",\n  variants: {\n    size: {\n      sm: \"size-8\",\n      default: \"size-10\",\n      lg: \"size-12\",\n    },\n  },\n  defaultVariants: { size: \"default\" },\n});\n\n/** Circular clip + border for image/fallback only. */\nconst avatarMedia = tv({\n  base: [\n    \"absolute inset-0 overflow-hidden rounded-full border border-border\",\n    \"after:pointer-events-none after:absolute after:inset-0 after:z-[5] after:rounded-full after:border after:border-border/50\",\n  ],\n});\n\nfunction partitionAvatarChildren(children: ComponentChildren): {\n  media: ComponentChild[];\n  badges: VNode[];\n} {\n  const media: ComponentChild[] = [];\n  const badges: VNode[] = [];\n  for (const node of toChildArray(children)) {\n    if (isValidElement(node) && node.type === AvatarBadge) {\n      badges.push(node);\n    } else {\n      media.push(node);\n    }\n  }\n  return { media, badges };\n}\n\nexport type AvatarProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, \"size\"> & {\n  children?: ComponentChildren;\n  size?: \"sm\" | \"default\" | \"lg\";\n};\n\nexport const Avatar = ({ size = \"default\", class: className, children, ...rest }: AvatarProps) => {\n  const [loaded, setLoaded] = useState(false);\n  const [failed, setFailed] = useState(false);\n\n  const notifyLoad = useCallback(() => {\n    setLoaded(true);\n    setFailed(false);\n  }, []);\n\n  const notifyError = useCallback(() => {\n    setFailed(true);\n    setLoaded(false);\n  }, []);\n\n  const resetImage = useCallback(() => {\n    setLoaded(false);\n    setFailed(false);\n  }, []);\n\n  const showFallback = !loaded || failed;\n\n  const value = useMemo(\n    () => ({\n      notifyLoad,\n      notifyError,\n      resetImage,\n      showFallback,\n    }),\n    [notifyLoad, notifyError, resetImage, showFallback],\n  );\n\n  const dataSize = size === \"default\" ? \"default\" : size;\n  const { media, badges } = partitionAvatarChildren(children);\n\n  return (\n    <AvatarContext.Provider value={value}>\n      <span\n        {...rest}\n        data-slot=\"avatar\"\n        data-size={dataSize}\n        class={avatarRoot({ size, class: className as string | undefined })}\n      >\n        <span class={avatarMedia()}>{media}</span>\n        {badges}\n      </span>\n    </AvatarContext.Provider>\n  );\n};\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\nimport { useAvatarContext } from \"./context\";\n\nexport type AvatarFallbackProps = JSX.HTMLAttributes<HTMLSpanElement> & {\n  children?: ComponentChildren;\n};\n\nexport const AvatarFallback = ({ class: className, children, ...rest }: AvatarFallbackProps) => {\n  const { showFallback } = useAvatarContext();\n\n  return (\n    <span\n      data-slot=\"avatar-fallback\"\n      class={cn(\n        \"bg-muted text-muted-foreground absolute inset-0 z-0 inline-flex size-full items-center justify-center font-medium\",\n        \"text-sm group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-base\",\n        !showFallback && \"hidden\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n};\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\n\nexport type AvatarGroupCountProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  children?: ComponentChildren;\n};\n\nexport const AvatarGroupCount = ({\n  class: className,\n  children,\n  ...rest\n}: AvatarGroupCountProps) => (\n  <div\n    data-slot=\"avatar-group-count\"\n    class={cn(\n      \"bg-muted text-muted-foreground relative z-[100] -ms-2 inline-flex size-10 shrink-0 items-center justify-center rounded-full text-center text-xs font-medium tabular-nums leading-none ring-2 ring-background rtl:-ms-0 rtl:-me-2\",\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { Fragment, isValidElement, toChildArray } from \"preact\";\nimport { cn } from \"../../lib/utils\";\nimport { Avatar } from \"./Avatar\";\nimport { AvatarGroupCount } from \"./AvatarGroupCount\";\n\nexport type AvatarGroupProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  children?: ComponentChildren;\n};\n\nexport const AvatarGroup = ({ class: className, children, ...rest }: AvatarGroupProps) => {\n  const items = toChildArray(children);\n  let stackIndex = 0;\n\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      class={cn(\n        \"isolate flex flex-row flex-wrap items-center -space-x-2 rtl:space-x-reverse\",\n        className,\n      )}\n      {...rest}\n    >\n      {items.map((child, i) => {\n        if (isValidElement(child) && child.type === Avatar) {\n          const z = stackIndex;\n          stackIndex += 1;\n          const key =\n            typeof child.key === \"string\" || typeof child.key === \"number\"\n              ? child.key\n              : `avatar-group-${i}`;\n          return (\n            <span\n              key={key}\n              class=\"relative inline-flex shrink-0 rounded-full ring-2 ring-background\"\n              style={{ zIndex: z }}\n            >\n              {child}\n            </span>\n          );\n        }\n        if (isValidElement(child) && child.type === AvatarGroupCount) {\n          const key =\n            typeof child.key === \"string\" || typeof child.key === \"number\"\n              ? child.key\n              : `avatar-group-count-${i}`;\n          return (\n            <span key={key} class=\"relative z-[100] inline-flex shrink-0\">\n              {child}\n            </span>\n          );\n        }\n        return <Fragment key={i}>{child}</Fragment>;\n      })}\n    </div>\n  );\n};\n","import type { JSX } from \"preact\";\nimport { useEffect } from \"preact/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { useAvatarContext } from \"./context\";\n\nexport type AvatarImageProps = JSX.ImgHTMLAttributes<HTMLImageElement>;\n\nexport const AvatarImage = ({\n  class: className,\n  src,\n  alt = \"\",\n  onLoad,\n  onError,\n  ...rest\n}: AvatarImageProps) => {\n  const { notifyLoad, notifyError, resetImage, showFallback } = useAvatarContext();\n\n  useEffect(() => {\n    resetImage();\n    if (!src || src === \"\") {\n      notifyError();\n    }\n  }, [src, resetImage, notifyError]);\n\n  return (\n    <img\n      data-slot=\"avatar-image\"\n      src={src}\n      alt={alt}\n      class={cn(\n        \"absolute inset-0 z-10 size-full object-cover\",\n        showFallback && \"invisible\",\n        className,\n      )}\n      onLoad={(e) => {\n        onLoad?.(e);\n        notifyLoad();\n      }}\n      onError={(e) => {\n        onError?.(e);\n        notifyError();\n      }}\n      {...rest}\n    />\n  );\n};\n"]}

package/dist/chunk-PPYJQNE5.js

@@ -0,0 +1,159 @@
+import { signal, effect } from '@preact/signals';
+
+// src/lib/interactive/createDismissableLayer.ts
+var MODAL_DIALOG_PANEL_OUTSIDE_SLOP_PX = 48;
+var isPointerWithinModalDialogPanelSlop = (event) => {
+  const { clientX: x, clientY: y } = event;
+  const slop = MODAL_DIALOG_PANEL_OUTSIDE_SLOP_PX;
+  for (const panel of document.querySelectorAll(
+    '[data-slot="dialog-content"][data-state="open"]:not([data-kamod-root-dismissible])'
+  )) {
+    if (!(panel instanceof HTMLElement)) continue;
+    const r = panel.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0) continue;
+    if (x >= r.left - slop && x <= r.right + slop && y >= r.top - slop && y <= r.bottom + slop) {
+      return true;
+    }
+  }
+  return false;
+};
+var createDismissableLayer = ({
+  root,
+  open,
+  onDismiss
+}) => {
+  const enabled = signal(true);
+  const portalLayerSelector = '[data-slot="dialog-content"], [data-slot="alert-dialog-content"], [data-slot="sheet-content"], [data-slot="popover-content"], [data-slot="select-content"], [data-slot="dropdown-content"]';
+  const overlayLayerSlots = /* @__PURE__ */ new Set(["dialog-content", "alert-dialog-content"]);
+  const stop = effect(() => {
+    if (!enabled.value || !open()) return;
+    const onPointerDown = (event) => {
+      const node = root();
+      if (!node) return;
+      const target = event.target;
+      if (!target) return;
+      if (node.contains(target)) return;
+      if (target instanceof Element) {
+        const closestLayer = target.closest(portalLayerSelector);
+        if (closestLayer) {
+          const layerSlot = closestLayer.getAttribute("data-slot");
+          const rootDismissible = closestLayer.hasAttribute("data-kamod-root-dismissible");
+          if (layerSlot === "dialog-content" && target === closestLayer && !rootDismissible) {
+            return;
+          }
+          const isOverlayLayer = layerSlot ? overlayLayerSlots.has(layerSlot) : false;
+          if (!isOverlayLayer || target !== closestLayer) return;
+        }
+      }
+      if (target instanceof Element && target.closest('[data-slot="dialog-overlay"]') && isPointerWithinModalDialogPanelSlop(event)) {
+        return;
+      }
+      onDismiss();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onDismiss();
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  });
+  return {
+    enabled,
+    dispose: () => stop()
+  };
+};
+
+// src/lib/interactive/createFocusTrap.ts
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(", ");
+var getFocusableElements = (root) => Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+  (element) => !element.hasAttribute("disabled") && element.getAttribute("aria-hidden") !== "true" && element.tabIndex !== -1
+);
+var trapFocus = (container, options = {}) => {
+  const { focusContainer = true } = options;
+  const focusInitial = () => {
+    if (focusContainer && container.tabIndex >= -1) {
+      container.focus();
+      return;
+    }
+    getFocusableElements(container)[0]?.focus();
+  };
+  requestAnimationFrame(focusInitial);
+  const onKeyDown = (event) => {
+    if (event.key !== "Tab") return;
+    const focusables = getFocusableElements(container);
+    if (focusables.length === 0) {
+      event.preventDefault();
+      container.focus();
+      return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey) {
+      if (active === first || !container.contains(active)) {
+        event.preventDefault();
+        last.focus();
+      }
+      return;
+    }
+    if (active === last || !container.contains(active)) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  container.addEventListener("keydown", onKeyDown);
+  return () => container.removeEventListener("keydown", onKeyDown);
+};
+
+// src/lib/interactive/createIdFactory.ts
+var idCounter = 0;
+var createIdFactory = (prefix) => {
+  return (explicitId) => {
+    if (explicitId) return explicitId;
+    idCounter += 1;
+    return `${prefix}-${idCounter}`;
+  };
+};
+var createRovingFocus = (count, initialIndex = -1) => {
+  const activeIndex = signal(initialIndex);
+  const clamp = (index) => {
+    if (count <= 0) return -1;
+    if (index < 0) return count - 1;
+    if (index >= count) return 0;
+    return index;
+  };
+  return {
+    activeIndex,
+    moveNext: () => {
+      activeIndex.value = clamp(activeIndex.value + 1);
+    },
+    movePrev: () => {
+      activeIndex.value = clamp(activeIndex.value - 1);
+    },
+    moveFirst: () => {
+      activeIndex.value = count > 0 ? 0 : -1;
+    },
+    moveLast: () => {
+      activeIndex.value = count > 0 ? count - 1 : -1;
+    },
+    set: (index) => {
+      activeIndex.value = clamp(index);
+    }
+  };
+};
+
+export { MODAL_DIALOG_PANEL_OUTSIDE_SLOP_PX, createDismissableLayer, createIdFactory, createRovingFocus, getFocusableElements, isPointerWithinModalDialogPanelSlop, trapFocus };
+//# sourceMappingURL=chunk-PPYJQNE5.js.map
+//# sourceMappingURL=chunk-PPYJQNE5.js.map