@kamod-ch/ui 0.2.1

package/dist/chunk-CP55TVOV.js

@@ -0,0 +1,271 @@
+import { cn } from './chunk-MS2ZNYCJ.js';
+import { signal } from '@preact/signals';
+import { createContext } from 'preact';
+import { useContext, useMemo, useCallback, useRef, useLayoutEffect } from 'preact/hooks';
+import { jsx, jsxs } from 'preact/jsx-runtime';
+
+var CommandContext = createContext(null);
+var useCommand = () => {
+  const context = useContext(CommandContext);
+  if (!context) throw new Error("Command subcomponents must be used within Command");
+  return context;
+};
+var Command = ({
+  class: className,
+  children,
+  autoHighlight = false,
+  query: queryProp,
+  hasVisibleItems: hasVisibleProp,
+  ...rest
+}) => {
+  const internalQuery = useMemo(() => signal(""), []);
+  const query = queryProp ?? internalQuery;
+  const internalHas = useMemo(() => signal(true), []);
+  const hasVisibleItems = hasVisibleProp ?? internalHas;
+  const highlightedIndex = useMemo(() => signal(-1), []);
+  const listRef = useMemo(() => ({ current: null }), []);
+  const moveHighlight = useCallback(
+    (delta) => {
+      const root = listRef.current;
+      if (!root || !autoHighlight) return;
+      const nodes = [
+        ...root.querySelectorAll('[data-slot="command-item"][data-match="true"]')
+      ];
+      if (nodes.length === 0) return;
+      let idx = highlightedIndex.value;
+      if (idx < 0) idx = delta > 0 ? 0 : nodes.length - 1;
+      else idx = (idx + delta + nodes.length) % nodes.length;
+      highlightedIndex.value = idx;
+    },
+    [autoHighlight, highlightedIndex, listRef]
+  );
+  const activateHighlighted = useCallback(() => {
+    if (!autoHighlight) return;
+    const root = listRef.current;
+    if (!root) return;
+    const nodes = [
+      ...root.querySelectorAll('[data-slot="command-item"][data-match="true"]')
+    ];
+    if (nodes.length === 0) return;
+    let idx = highlightedIndex.value;
+    if (idx < 0 || idx >= nodes.length) idx = 0;
+    nodes[idx]?.click();
+  }, [autoHighlight, highlightedIndex, listRef]);
+  const contextValue = useMemo(
+    () => ({
+      query,
+      hasVisibleItems,
+      autoHighlight,
+      highlightedIndex,
+      listRef,
+      moveHighlight,
+      activateHighlighted
+    }),
+    [
+      query,
+      hasVisibleItems,
+      autoHighlight,
+      highlightedIndex,
+      listRef,
+      moveHighlight,
+      activateHighlighted
+    ]
+  );
+  return /* @__PURE__ */ jsx(CommandContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "command",
+      class: cn("w-full rounded-md border bg-popover text-popover-foreground", className),
+      ...rest,
+      children
+    }
+  ) });
+};
+var CommandEmpty = ({ children, class: className, ...rest }) => {
+  const { query, hasVisibleItems } = useCommand();
+  void hasVisibleItems.value;
+  if (!(query.value ?? "").trim()) return null;
+  if (hasVisibleItems.value) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "command-empty",
+      class: cn("p-2 text-sm text-muted-foreground", className),
+      ...rest,
+      children
+    }
+  );
+};
+var CommandGroup = ({
+  heading,
+  class: className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "data-slot": "command-group",
+    role: "presentation",
+    class: cn("text-foreground overflow-hidden p-1", className),
+    ...rest,
+    children: [
+      heading ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          class: "text-muted-foreground px-2 py-1.5 text-xs font-medium",
+          "data-slot": "command-group-heading",
+          children: heading
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("div", { class: "space-y-0.5", role: "group", children })
+    ]
+  }
+);
+var CommandInput = ({
+  class: className,
+  onInput,
+  onKeyDown,
+  ...rest
+}) => {
+  const { query, autoHighlight, moveHighlight, activateHighlighted } = useCommand();
+  void query.value;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "data-slot": "command-input",
+      class: cn("h-10 w-full border-b bg-transparent px-3 text-sm outline-none", className),
+      value: query.value,
+      onInput: (event) => {
+        query.value = event.currentTarget.value;
+        onInput?.(event);
+      },
+      onKeyDown: (event) => {
+        if (autoHighlight) {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            moveHighlight(1);
+            return;
+          }
+          if (event.key === "ArrowUp") {
+            event.preventDefault();
+            moveHighlight(-1);
+            return;
+          }
+          if (event.key === "Enter") {
+            event.preventDefault();
+            activateHighlighted();
+            return;
+          }
+        }
+        onKeyDown?.(event);
+      },
+      ...rest
+    }
+  );
+};
+var CommandItem = ({
+  class: className,
+  value,
+  children,
+  disabled,
+  onClick,
+  onSelect,
+  ...rest
+}) => {
+  const { query } = useCommand();
+  const q = (query.value ?? "").trim().toLowerCase();
+  const textMatch = !q || value.toLowerCase().includes(q);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "command-item",
+      "data-match": textMatch ? "true" : "false",
+      disabled,
+      class: cn(
+        "flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm outline-none",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus:bg-accent focus:text-accent-foreground",
+        "data-[highlighted=true]:bg-accent data-[highlighted=true]:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        !textMatch && "hidden",
+        className
+      ),
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        onSelect?.(value);
+      },
+      ...rest,
+      children
+    }
+  );
+};
+var CommandList = ({ class: className, children, onMount, ...rest }) => {
+  const { query, hasVisibleItems, autoHighlight, highlightedIndex, listRef } = useCommand();
+  const prevQueryRef = useRef(null);
+  void query.value;
+  void highlightedIndex.value;
+  useLayoutEffect(() => {
+    const root = listRef.current;
+    if (!root) return;
+    const nodes = [
+      ...root.querySelectorAll('[data-slot="command-item"][data-match="true"]')
+    ];
+    hasVisibleItems.value = nodes.length > 0;
+    if (!autoHighlight) {
+      root.querySelectorAll('[data-slot="command-item"]').forEach((el) => el.removeAttribute("data-highlighted"));
+      prevQueryRef.current = query.value;
+      return;
+    }
+    const queryBumped = prevQueryRef.current !== query.value;
+    prevQueryRef.current = query.value;
+    let idx = highlightedIndex.value;
+    if (queryBumped) {
+      idx = nodes.length > 0 ? 0 : -1;
+      highlightedIndex.value = idx;
+    } else {
+      if (nodes.length === 0) {
+        highlightedIndex.value = -1;
+        idx = -1;
+      } else if (idx >= nodes.length) {
+        idx = nodes.length - 1;
+        highlightedIndex.value = idx;
+      } else if (idx < 0) {
+        idx = 0;
+        highlightedIndex.value = idx;
+      }
+    }
+    root.querySelectorAll('[data-slot="command-item"]').forEach((el) => el.removeAttribute("data-highlighted"));
+    if (idx >= 0 && nodes[idx]) {
+      nodes[idx].setAttribute("data-highlighted", "true");
+      nodes[idx].scrollIntoView({ block: "nearest" });
+    }
+  }, [query.value, highlightedIndex.value, autoHighlight]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        listRef.current = node;
+        onMount?.(node);
+      },
+      "data-slot": "command-list",
+      class: cn("max-h-72 overflow-y-auto overflow-x-hidden p-1", className),
+      ...rest,
+      children
+    }
+  );
+};
+var CommandSeparator = ({ class: className, ...rest }) => /* @__PURE__ */ jsx(
+  "hr",
+  {
+    "data-slot": "command-separator",
+    class: cn("bg-border -mx-1 my-1 h-px border-0", className),
+    ...rest
+  }
+);
+
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, useCommand };
+//# sourceMappingURL=chunk-CP55TVOV.js.map
+//# sourceMappingURL=chunk-CP55TVOV.js.map

package/dist/chunk-CP55TVOV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/command/Command.tsx","../src/components/command/CommandEmpty.tsx","../src/components/command/CommandGroup.tsx","../src/components/command/CommandInput.tsx","../src/components/command/CommandItem.tsx","../src/components/command/CommandList.tsx","../src/components/command/CommandSeparator.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-CP55TVOV.js","sourcesContent":["import { type Signal, signal } from \"@preact/signals\";\nimport type { ComponentChildren, JSX } from \"preact\";\nimport { createContext } from \"preact\";\nimport { useCallback, useContext, useMemo } from \"preact/hooks\";\nimport { cn } from \"../../lib/utils\";\n\nexport type CommandContextValue = {\n  query: Signal<string>;\n  hasVisibleItems: Signal<boolean>;\n  autoHighlight: boolean;\n  highlightedIndex: Signal<number>;\n  listRef: { current: HTMLDivElement | null };\n  moveHighlight: (delta: number) => void;\n  activateHighlighted: () => void;\n};\n\nconst CommandContext = createContext<CommandContextValue | null>(null);\n\nexport const useCommand = () => {\n  const context = useContext(CommandContext);\n  if (!context) throw new Error(\"Command subcomponents must be used within Command\");\n  return context;\n};\n\nexport type CommandProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  children?: ComponentChildren;\n  /** First visible item gets `data-highlighted`; enables ArrowUp/Down + Enter in `CommandInput`. */\n  autoHighlight?: boolean;\n  /** External filter signal (e.g. combobox inline input shares query with the list). */\n  query?: Signal<string>;\n  /** External visibility signal; updated by `CommandList` when provided. */\n  hasVisibleItems?: Signal<boolean>;\n};\n\nexport const Command = ({\n  class: className,\n  children,\n  autoHighlight = false,\n  query: queryProp,\n  hasVisibleItems: hasVisibleProp,\n  ...rest\n}: CommandProps) => {\n  const internalQuery = useMemo(() => signal(\"\"), []);\n  const query = queryProp ?? internalQuery;\n  const internalHas = useMemo(() => signal(true), []);\n  const hasVisibleItems = hasVisibleProp ?? internalHas;\n  const highlightedIndex = useMemo(() => signal(-1), []);\n  const listRef = useMemo(() => ({ current: null as HTMLDivElement | null }), []);\n\n  const moveHighlight = useCallback(\n    (delta: number) => {\n      const root = listRef.current;\n      if (!root || !autoHighlight) return;\n      const nodes = [\n        ...root.querySelectorAll<HTMLElement>('[data-slot=\"command-item\"][data-match=\"true\"]'),\n      ];\n      if (nodes.length === 0) return;\n      let idx = highlightedIndex.value;\n      if (idx < 0) idx = delta > 0 ? 0 : nodes.length - 1;\n      else idx = (idx + delta + nodes.length) % nodes.length;\n      highlightedIndex.value = idx;\n    },\n    [autoHighlight, highlightedIndex, listRef],\n  );\n\n  const activateHighlighted = useCallback(() => {\n    if (!autoHighlight) return;\n    const root = listRef.current;\n    if (!root) return;\n    const nodes = [\n      ...root.querySelectorAll<HTMLElement>('[data-slot=\"command-item\"][data-match=\"true\"]'),\n    ];\n    if (nodes.length === 0) return;\n    let idx = highlightedIndex.value;\n    if (idx < 0 || idx >= nodes.length) idx = 0;\n    nodes[idx]?.click();\n  }, [autoHighlight, highlightedIndex, listRef]);\n\n  const contextValue = useMemo<CommandContextValue>(\n    () => ({\n      query,\n      hasVisibleItems,\n      autoHighlight,\n      highlightedIndex,\n      listRef,\n      moveHighlight,\n      activateHighlighted,\n    }),\n    [\n      query,\n      hasVisibleItems,\n      autoHighlight,\n      highlightedIndex,\n      listRef,\n      moveHighlight,\n      activateHighlighted,\n    ],\n  );\n\n  return (\n    <CommandContext.Provider value={contextValue}>\n      <div\n        data-slot=\"command\"\n        class={cn(\"w-full rounded-md border bg-popover text-popover-foreground\", className)}\n        {...rest}\n      >\n        {children}\n      </div>\n    </CommandContext.Provider>\n  );\n};\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\nimport { useCommand } from \"./Command\";\n\nexport type CommandEmptyProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  children?: ComponentChildren;\n};\n\nexport const CommandEmpty = ({ children, class: className, ...rest }: CommandEmptyProps) => {\n  const { query, hasVisibleItems } = useCommand();\n  void hasVisibleItems.value;\n\n  if (!(query.value ?? \"\").trim()) return null;\n  if (hasVisibleItems.value) return null;\n\n  return (\n    <div\n      data-slot=\"command-empty\"\n      class={cn(\"p-2 text-sm text-muted-foreground\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\n\nexport type CommandGroupProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  heading?: string;\n  children?: ComponentChildren;\n};\n\nexport const CommandGroup = ({\n  heading,\n  class: className,\n  children,\n  ...rest\n}: CommandGroupProps) => (\n  <div\n    data-slot=\"command-group\"\n    role=\"presentation\"\n    class={cn(\"text-foreground overflow-hidden p-1\", className)}\n    {...rest}\n  >\n    {heading ? (\n      <div\n        class=\"text-muted-foreground px-2 py-1.5 text-xs font-medium\"\n        data-slot=\"command-group-heading\"\n      >\n        {heading}\n      </div>\n    ) : null}\n    <div class=\"space-y-0.5\" role=\"group\">\n      {children}\n    </div>\n  </div>\n);\n","import type { JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\nimport { useCommand } from \"./Command\";\n\nexport type CommandInputProps = JSX.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CommandInput = ({\n  class: className,\n  onInput,\n  onKeyDown,\n  ...rest\n}: CommandInputProps) => {\n  const { query, autoHighlight, moveHighlight, activateHighlighted } = useCommand();\n  void query.value;\n  return (\n    <input\n      data-slot=\"command-input\"\n      class={cn(\"h-10 w-full border-b bg-transparent px-3 text-sm outline-none\", className)}\n      value={query.value}\n      onInput={(event) => {\n        query.value = event.currentTarget.value;\n        onInput?.(event);\n      }}\n      onKeyDown={(event) => {\n        if (autoHighlight) {\n          if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            moveHighlight(1);\n            return;\n          }\n          if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            moveHighlight(-1);\n            return;\n          }\n          if (event.key === \"Enter\") {\n            event.preventDefault();\n            activateHighlighted();\n            return;\n          }\n        }\n        onKeyDown?.(event);\n      }}\n      {...rest}\n    />\n  );\n};\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\nimport { useCommand } from \"./Command\";\n\nexport type CommandItemProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {\n  /** Used for case-insensitive filtering against the query. */\n  value: string;\n  children?: ComponentChildren;\n  onSelect?: (value: string) => void;\n};\n\nexport const CommandItem = ({\n  class: className,\n  value,\n  children,\n  disabled,\n  onClick,\n  onSelect,\n  ...rest\n}: CommandItemProps) => {\n  const { query } = useCommand();\n  const q = (query.value ?? \"\").trim().toLowerCase();\n  const textMatch = !q || value.toLowerCase().includes(q);\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"command-item\"\n      data-match={textMatch ? \"true\" : \"false\"}\n      disabled={disabled}\n      class={cn(\n        \"flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm outline-none\",\n        \"hover:bg-accent hover:text-accent-foreground\",\n        \"focus:bg-accent focus:text-accent-foreground\",\n        \"data-[highlighted=true]:bg-accent data-[highlighted=true]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        !textMatch && \"hidden\",\n        className,\n      )}\n      onClick={(event) => {\n        onClick?.(event);\n        if (event.defaultPrevented) return;\n        onSelect?.(value);\n      }}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n};\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { useLayoutEffect, useRef } from \"preact/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { useCommand } from \"./Command\";\n\nexport type CommandListProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  children?: ComponentChildren;\n  /** Notified when the list root mounts (e.g. combobox inline input forwards keyboard to the list). */\n  onMount?: (el: HTMLDivElement | null) => void;\n};\n\nexport const CommandList = ({ class: className, children, onMount, ...rest }: CommandListProps) => {\n  const { query, hasVisibleItems, autoHighlight, highlightedIndex, listRef } = useCommand();\n  const prevQueryRef = useRef<string | null>(null);\n\n  void query.value;\n  void highlightedIndex.value;\n\n  useLayoutEffect(() => {\n    const root = listRef.current;\n    if (!root) return;\n\n    const nodes = [\n      ...root.querySelectorAll<HTMLElement>('[data-slot=\"command-item\"][data-match=\"true\"]'),\n    ];\n    hasVisibleItems.value = nodes.length > 0;\n\n    if (!autoHighlight) {\n      root\n        .querySelectorAll('[data-slot=\"command-item\"]')\n        .forEach((el) => el.removeAttribute(\"data-highlighted\"));\n      prevQueryRef.current = query.value;\n      return;\n    }\n\n    const queryBumped = prevQueryRef.current !== query.value;\n    prevQueryRef.current = query.value;\n\n    let idx = highlightedIndex.value;\n    if (queryBumped) {\n      idx = nodes.length > 0 ? 0 : -1;\n      highlightedIndex.value = idx;\n    } else {\n      if (nodes.length === 0) {\n        highlightedIndex.value = -1;\n        idx = -1;\n      } else if (idx >= nodes.length) {\n        idx = nodes.length - 1;\n        highlightedIndex.value = idx;\n      } else if (idx < 0) {\n        idx = 0;\n        highlightedIndex.value = idx;\n      }\n    }\n\n    root\n      .querySelectorAll('[data-slot=\"command-item\"]')\n      .forEach((el) => el.removeAttribute(\"data-highlighted\"));\n    if (idx >= 0 && nodes[idx]) {\n      nodes[idx].setAttribute(\"data-highlighted\", \"true\");\n      nodes[idx].scrollIntoView({ block: \"nearest\" });\n    }\n  }, [query.value, highlightedIndex.value, autoHighlight]);\n\n  return (\n    <div\n      ref={(node) => {\n        listRef.current = node;\n        onMount?.(node);\n      }}\n      data-slot=\"command-list\"\n      class={cn(\"max-h-72 overflow-y-auto overflow-x-hidden p-1\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n","import type { JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\n\nexport type CommandSeparatorProps = JSX.HTMLAttributes<HTMLHRElement>;\n\nexport const CommandSeparator = ({ class: className, ...rest }: CommandSeparatorProps) => (\n  <hr\n    data-slot=\"command-separator\"\n    class={cn(\"bg-border -mx-1 my-1 h-px border-0\", className)}\n    {...rest}\n  />\n);\n"]}

package/dist/chunk-D3DQ4ICC.js

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+import { jsx } from 'preact/jsx-runtime';
+
+// src/components/label/Label.tsx
+var label = tv({
+  base: [
+    "text-foreground select-none font-medium leading-none",
+    "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+    "has-[+:disabled]:cursor-not-allowed has-[+:disabled]:opacity-70"
+  ],
+  variants: { size: { sm: "text-sm", md: "text-base", lg: "text-lg" } },
+  defaultVariants: { size: "sm" }
+});
+var Label = ({ size, class: className, ...rest }) => /* @__PURE__ */ jsx(
+  "label",
+  {
+    class: label({ size, class: className }),
+    "data-slot": "label",
+    ...rest
+  }
+);
+
+export { Label, label };
+//# sourceMappingURL=chunk-D3DQ4ICC.js.map
+//# sourceMappingURL=chunk-D3DQ4ICC.js.map

package/dist/chunk-D3DQ4ICC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/label/Label.tsx"],"names":[],"mappings":";;;;AAGO,IAAM,QAAQ,EAAA,CAAG;AAAA,EACtB,IAAA,EAAM;AAAA,IACJ,sDAAA;AAAA,IACA,2DAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU,EAAE,IAAA,EAAM,EAAE,EAAA,EAAI,WAAW,EAAA,EAAI,WAAA,EAAa,EAAA,EAAI,SAAA,EAAU,EAAE;AAAA,EACpE,eAAA,EAAiB,EAAE,IAAA,EAAM,IAAA;AAC3B,CAAC;AAKM,IAAM,KAAA,GAAQ,CAAC,EAAE,IAAA,EAAM,OAAO,SAAA,EAAW,GAAG,MAAK,qBACtD,GAAA;AAAA,EAAC,OAAA;AAAA,EAAA;AAAA,IACC,OAAO,KAAA,CAAM,EAAE,IAAA,EAAM,KAAA,EAAO,WAAiC,CAAA;AAAA,IAC7D,WAAA,EAAU,OAAA;AAAA,IACT,GAAG;AAAA;AACN","file":"chunk-D3DQ4ICC.js","sourcesContent":["import type { JSX } from \"preact\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const label = tv({\n  base: [\n    \"text-foreground select-none font-medium leading-none\",\n    \"peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n    \"has-[+:disabled]:cursor-not-allowed has-[+:disabled]:opacity-70\",\n  ],\n  variants: { size: { sm: \"text-sm\", md: \"text-base\", lg: \"text-lg\" } },\n  defaultVariants: { size: \"sm\" },\n});\n\nexport type LabelProps = Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, \"size\"> &\n  VariantProps<typeof label>;\n\nexport const Label = ({ size, class: className, ...rest }: LabelProps) => (\n  <label\n    class={label({ size, class: className as string | undefined })}\n    data-slot=\"label\"\n    {...rest}\n  />\n);\n"]}

package/dist/chunk-ERBGZZ2U.js

@@ -0,0 +1,26 @@
+import { cn } from './chunk-MS2ZNYCJ.js';
+import { tv } from 'tailwind-variants';
+import { jsx } from 'preact/jsx-runtime';
+
+var kbd = tv({
+  base: [
+    "pointer-events-none inline-flex select-none items-center justify-center gap-1 whitespace-nowrap",
+    "rounded-md border border-border bg-muted font-mono font-medium text-muted-foreground shadow-xs",
+    "data-[icon=inline-end]:translate-x-0.5"
+  ],
+  variants: {
+    size: {
+      sm: "h-5 min-h-5 min-w-5 px-1.5 text-[11px] leading-none",
+      md: "h-6 min-h-6 min-w-6 px-2 text-xs leading-none"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var Kbd = ({ class: className, size, children, ...rest }) => /* @__PURE__ */ jsx("kbd", { "data-slot": "kbd", class: kbd({ size, class: className }), ...rest, children });
+var KbdGroup = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx("span", { "data-slot": "kbd-group", class: cn("inline-flex items-center gap-1", className), ...rest, children });
+
+export { Kbd, KbdGroup };
+//# sourceMappingURL=chunk-ERBGZZ2U.js.map
+//# sourceMappingURL=chunk-ERBGZZ2U.js.map

package/dist/chunk-ERBGZZ2U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/kbd/Kbd.tsx","../src/components/kbd/KbdGroup.tsx"],"names":["jsx"],"mappings":";;;;AAGO,IAAM,MAAM,EAAA,CAAG;AAAA,EACpB,IAAA,EAAM;AAAA,IACJ,iGAAA;AAAA,IACA,gGAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,qDAAA;AAAA,MACJ,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOM,IAAM,GAAA,GAAM,CAAC,EAAE,KAAA,EAAO,SAAA,EAAW,MAAM,QAAA,EAAU,GAAG,IAAA,EAAK,qBAC9D,GAAA,CAAC,KAAA,EAAA,EAAI,aAAU,KAAA,EAAM,KAAA,EAAO,GAAA,CAAI,EAAE,IAAA,EAAM,KAAA,EAAO,WAAiC,CAAA,EAAI,GAAG,IAAA,EACpF,QAAA,EACH;ACrBK,IAAM,QAAA,GAAW,CAAC,EAAE,KAAA,EAAO,WAAW,QAAA,EAAU,GAAG,MAAK,qBAC7DA,IAAC,MAAA,EAAA,EAAK,WAAA,EAAU,aAAY,KAAA,EAAO,EAAA,CAAG,kCAAkC,SAAS,CAAA,EAAI,GAAG,IAAA,EACrF,QAAA,EACH","file":"chunk-ERBGZZ2U.js","sourcesContent":["import type { ComponentChildren, JSX } from \"preact\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const kbd = tv({\n  base: [\n    \"pointer-events-none inline-flex select-none items-center justify-center gap-1 whitespace-nowrap\",\n    \"rounded-md border border-border bg-muted font-mono font-medium text-muted-foreground shadow-xs\",\n    \"data-[icon=inline-end]:translate-x-0.5\",\n  ],\n  variants: {\n    size: {\n      sm: \"h-5 min-h-5 min-w-5 px-1.5 text-[11px] leading-none\",\n      md: \"h-6 min-h-6 min-w-6 px-2 text-xs leading-none\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport type KbdProps = Omit<JSX.HTMLAttributes<HTMLElement>, \"size\"> &\n  VariantProps<typeof kbd> & {\n    children?: ComponentChildren;\n  };\n\nexport const Kbd = ({ class: className, size, children, ...rest }: KbdProps) => (\n  <kbd data-slot=\"kbd\" class={kbd({ size, class: className as string | undefined })} {...rest}>\n    {children}\n  </kbd>\n);\n","import type { ComponentChildren, JSX } from \"preact\";\nimport { cn } from \"../../lib/utils\";\n\nexport type KbdGroupProps = JSX.HTMLAttributes<HTMLSpanElement> & {\n  children?: ComponentChildren;\n};\n\nexport const KbdGroup = ({ class: className, children, ...rest }: KbdGroupProps) => (\n  <span data-slot=\"kbd-group\" class={cn(\"inline-flex items-center gap-1\", className)} {...rest}>\n    {children}\n  </span>\n);\n"]}