fromsrc 0.0.2 → 0.0.22

package/dist/components/checkbox.js

@@ -5,9 +5,9 @@ import { ErrorMessage } from './errormessage';
 import { Tooltip } from './tooltip';
 
 const sizes = {
-  sm: { box: "h-3.5 w-3.5", label: "text-xs" },
+  lg: { box: "h-5 w-5", label: "text-base" },
   md: { box: "h-4 w-4", label: "text-sm" },
-  lg: { box: "h-5 w-5", label: "text-base" }
+  sm: { box: "h-3.5 w-3.5", label: "text-xs" }
 };
 function CheckboxInner({
   label,
@@ -52,23 +52,36 @@ function CheckboxInner({
               ...props
             }
           ),
-          label && /* @__PURE__ */ jsxs("span", { className: `${sizes[size].label} text-fg flex items-center gap-1.5`, children: [
-            label,
-            tooltip && /* @__PURE__ */ jsx(Tooltip, { content: tooltip, children: /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                "aria-hidden": "true",
-                className: "h-3.5 w-3.5 text-muted",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: [
-                  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }),
-                  /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeWidth: 2, d: "M12 16v-4m0-4h.01" })
-                ]
-              }
-            ) })
-          ] })
+          label && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: `${sizes[size].label} text-fg flex items-center gap-1.5`,
+              children: [
+                label,
+                tooltip && /* @__PURE__ */ jsx(Tooltip, { content: tooltip, children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    className: "h-3.5 w-3.5 text-muted",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: [
+                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeWidth: 2,
+                          d: "M12 16v-4m0-4h.01"
+                        }
+                      )
+                    ]
+                  }
+                ) })
+              ]
+            }
+          )
         ]
       }
     ),

package/dist/components/code.d.ts

@@ -19,7 +19,7 @@ interface PreProps {
     children: ReactNode;
     className?: string;
 }
-declare function CodeComponent({ children, color }: CodeProps): JSX.Element;
+declare function CodeComponent({ children, color, }: CodeProps): JSX.Element;
 declare function PreComponent({ children, className }: PreProps): JSX.Element;
 declare const Code: react.MemoExoticComponent<typeof CodeComponent>;
 declare const Pre: react.MemoExoticComponent<typeof PreComponent>;

package/dist/components/code.js

@@ -2,13 +2,16 @@ import { jsx } from 'react/jsx-runtime';
 import { memo } from 'react';
 
 const colors = {
+  blue: "bg-blue-500/10 text-blue-300",
   default: "bg-surface text-fg",
   green: "bg-green-500/10 text-green-300",
   red: "bg-red-500/10 text-red-300",
-  yellow: "bg-yellow-500/10 text-yellow-300",
-  blue: "bg-blue-500/10 text-blue-300"
+  yellow: "bg-yellow-500/10 text-yellow-300"
 };
-function CodeComponent({ children, color = "default" }) {
+function CodeComponent({
+  children,
+  color = "default"
+}) {
   return /* @__PURE__ */ jsx(
     "code",
     {

package/dist/components/codeblock.js

@@ -1,23 +1,23 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { memo, useRef, useId, useState, useEffect, useCallback } from 'react';
+import { memo, useRef, useState, useEffect, useCallback } from 'react';
 import { useCopy } from '../hooks/copy';
 import { LangIcon } from './langicon';
 
 const wrapkey = "fromsrc-code-wrap";
 const wrapevent = "fromsrc-code-wrap-event";
 const linenumberstyle = `[data-line-numbers] code{counter-reset:line}[data-line-numbers] .line::before{counter-increment:line;content:counter(line);display:inline-block;width:3ch;margin-right:1.5ch;text-align:right;color:#4a4a4a;user-select:none;-webkit-user-select:none;font-variant-numeric:tabular-nums}`;
-const iconstyle = { width: 14, height: 14 };
+const iconstyle = { height: 14, width: 14 };
 const btnstyle = {
-  display: "flex",
   alignItems: "center",
-  justifyContent: "center",
-  padding: "6px",
   background: "transparent",
   border: "none",
+  borderRadius: "4px",
   cursor: "pointer",
-  transition: "color 0.15s",
-  borderRadius: "4px"
+  display: "flex",
+  justifyContent: "center",
+  padding: "6px",
+  transition: "color 0.15s"
 };
 const CopyBtn = memo(function CopyBtn2({ coderef }) {
   const { copied, copy } = useCopy();
@@ -30,16 +30,41 @@ const CopyBtn = memo(function CopyBtn2({ coderef }) {
         "aria-label": copied ? "Copied" : "Copy code",
         className: "hover:text-neutral-50",
         style: { ...btnstyle, color: copied ? "#22c55e" : "#737373" },
-        children: copied ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: iconstyle, "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: iconstyle, "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-          /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-        ] })
+        children: copied ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            style: iconstyle,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            style: iconstyle,
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+            ]
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "copied to clipboard" : "" })
   ] });
 });
-const WrapBtn = memo(function WrapBtn2({ wrap, toggle }) {
+const WrapBtn = memo(function WrapBtn2({
+  wrap,
+  toggle
+}) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -48,14 +73,37 @@ const WrapBtn = memo(function WrapBtn2({ wrap, toggle }) {
       "aria-label": "Toggle word wrap",
       className: "hover:text-neutral-50",
       style: { ...btnstyle, color: wrap ? "#ef4444" : "#737373" },
-      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: iconstyle, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M3 12h15a3 3 0 1 1 0 6H9m0 0 3-3m-3 3 3 3", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          style: iconstyle,
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M3 6h18M3 12h15a3 3 0 1 1 0 6H9m0 0 3-3m-3 3 3 3",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      )
     }
   );
 });
-const CodeBlock = memo(function CodeBlock2({ children, lang, title, lines }) {
+const CodeBlock = memo(function CodeBlock2({
+  children,
+  lang,
+  title,
+  lines
+}) {
   const coderef = useRef(null);
-  const labelid = useId();
   const hasheader = Boolean(title || lang);
+  const label = title || lang;
   const [wrap, setwrap] = useState(false);
   useEffect(() => {
     try {
@@ -70,33 +118,103 @@ const CodeBlock = memo(function CodeBlock2({ children, lang, title, lines }) {
     return () => window.removeEventListener(wrapevent, handler);
   }, []);
   const toggle = useCallback(() => {
-    setwrap((prev) => {
-      const next = !prev;
-      const value = next ? "1" : "0";
-      try {
-        localStorage.setItem(wrapkey, value);
-      } catch {
-      }
-      window.dispatchEvent(new CustomEvent(wrapevent, { detail: value }));
-      return next;
-    });
-  }, []);
-  const controls = /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+    const next = !wrap;
+    const value = next ? "1" : "0";
+    setwrap(next);
+    try {
+      localStorage.setItem(wrapkey, value);
+    } catch {
+    }
+    window.dispatchEvent(new CustomEvent(wrapevent, { detail: value }));
+  }, [wrap]);
+  const controls = /* @__PURE__ */ jsxs("div", { style: { alignItems: "center", display: "flex", gap: "4px" }, children: [
     /* @__PURE__ */ jsx(WrapBtn, { wrap, toggle }),
     /* @__PURE__ */ jsx(CopyBtn, { coderef })
   ] });
-  return /* @__PURE__ */ jsxs("figure", { role: "group", "aria-labelledby": hasheader ? labelid : void 0, "data-line-numbers": lines || void 0, style: { position: "relative", margin: "24px 0", borderRadius: "8px", backgroundColor: "#0d0d0d", border: "1px solid #1c1c1c", overflow: "hidden" }, children: [
-    lines && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: linenumberstyle } }),
-    hasheader && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 16px", height: "40px", backgroundColor: "#141414", borderBottom: "1px solid #1c1c1c" }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-        lang && /* @__PURE__ */ jsx(LangIcon, { lang }),
-        /* @__PURE__ */ jsx("span", { id: labelid, style: { fontSize: "0.8rem", fontFamily: "ui-monospace, monospace", color: "#a0a0a0" }, children: title || lang })
-      ] }),
-      controls
-    ] }),
-    /* @__PURE__ */ jsx("div", { ref: coderef, tabIndex: 0, role: "region", "aria-label": hasheader ? `${title || lang} code` : "code", className: "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] focus:outline-none focus:ring-1 focus:ring-dim", style: { padding: "14px 16px", overflow: wrap ? "visible" : "auto", fontSize: "13px", lineHeight: "1.6", maxHeight: "500px", whiteSpace: wrap ? "pre-wrap" : "pre", wordBreak: wrap ? "break-all" : "normal" }, children }),
-    !hasheader && /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: "8px", right: "8px", display: "flex", alignItems: "center", gap: "4px" }, children: controls })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      role: "group",
+      "aria-label": hasheader ? label : void 0,
+      "data-line-numbers": lines || void 0,
+      style: {
+        backgroundColor: "#0d0d0d",
+        border: "1px solid #1c1c1c",
+        borderRadius: "8px",
+        margin: "24px 0",
+        overflow: "hidden",
+        position: "relative"
+      },
+      children: [
+        lines && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: linenumberstyle } }),
+        hasheader && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              alignItems: "center",
+              backgroundColor: "#141414",
+              borderBottom: "1px solid #1c1c1c",
+              display: "flex",
+              height: "40px",
+              justifyContent: "space-between",
+              padding: "0 16px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { alignItems: "center", display: "flex", gap: "8px" }, children: [
+                lang && /* @__PURE__ */ jsx(LangIcon, { lang }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      color: "#a0a0a0",
+                      fontFamily: "ui-monospace, monospace",
+                      fontSize: "0.8rem"
+                    },
+                    children: label
+                  }
+                )
+              ] }),
+              controls
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: coderef,
+            tabIndex: 0,
+            role: "region",
+            "aria-label": hasheader ? `${label} code` : "code",
+            className: "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] focus:outline-none focus:ring-1 focus:ring-dim",
+            style: {
+              fontSize: "13px",
+              lineHeight: "1.6",
+              maxHeight: "500px",
+              overflow: wrap ? "visible" : "auto",
+              padding: "14px 16px",
+              whiteSpace: wrap ? "pre-wrap" : "pre",
+              wordBreak: wrap ? "break-all" : "normal"
+            },
+            children
+          }
+        ),
+        !hasheader && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              alignItems: "center",
+              display: "flex",
+              gap: "4px",
+              position: "absolute",
+              right: "8px",
+              top: "8px"
+            },
+            children: controls
+          }
+        )
+      ]
+    }
+  );
 });
 
 export { CodeBlock };

package/dist/components/codecopy.d.ts

@@ -6,7 +6,7 @@ interface CodeCopyProps {
     className?: string;
     timeout?: number;
 }
-declare function CodeCopyBase({ code, className, timeout }: CodeCopyProps): ReactElement;
+declare function CodeCopyBase({ code, className, timeout, }: CodeCopyProps): ReactElement;
 declare const CodeCopy: react.MemoExoticComponent<typeof CodeCopyBase>;
 
 export { CodeCopy, type CodeCopyProps };

package/dist/components/codecopy.js

@@ -2,21 +2,42 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useState, useRef, useCallback, useEffect } from 'react';
 
-const svg = { "aria-hidden": true, width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
-function CodeCopyBase({ code, className, timeout = 2e3 }) {
+const svg = {
+  "aria-hidden": true,
+  fill: "none",
+  height: 16,
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2,
+  viewBox: "0 0 24 24",
+  width: 16
+};
+function CodeCopyBase({
+  code,
+  className,
+  timeout = 2e3
+}) {
   const [copied, setCopied] = useState(false);
   const timer = useRef(null);
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(code).then(() => {
       setCopied(true);
-      if (timer.current) clearTimeout(timer.current);
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
       timer.current = setTimeout(() => setCopied(false), timeout);
     }).catch(() => {
     });
   }, [code, timeout]);
-  useEffect(() => () => {
-    if (timer.current) clearTimeout(timer.current);
-  }, []);
+  useEffect(
+    () => () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+    },
+    []
+  );
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -25,24 +46,26 @@ function CodeCopyBase({ code, className, timeout = 2e3 }) {
       "aria-label": copied ? "Copied" : "Copy code",
       className,
       style: {
-        position: "absolute",
-        top: 8,
-        right: 8,
-        display: "flex",
         alignItems: "center",
-        justifyContent: "center",
-        padding: 6,
         background: "transparent",
         border: "none",
         cursor: "pointer",
+        display: "flex",
+        justifyContent: "center",
         opacity: copied ? 1 : 0.5,
+        padding: 6,
+        position: "absolute",
+        right: 8,
+        top: 8,
         transition: "opacity 0.15s"
       },
       onMouseEnter: (e) => {
         e.currentTarget.style.opacity = "1";
       },
       onMouseLeave: (e) => {
-        if (!copied) e.currentTarget.style.opacity = "0.5";
+        if (!copied) {
+          e.currentTarget.style.opacity = "0.5";
+        }
       },
       children: copied ? /* @__PURE__ */ jsx("svg", { ...svg, children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }) : /* @__PURE__ */ jsxs("svg", { ...svg, children: [
         /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),

package/dist/components/codegroup.js

@@ -5,7 +5,7 @@ import { createContext, memo, useContext, useRef, useCallback, useState, useMemo
 const key = "fromsrc-code-lang";
 const context = createContext(null);
 function safe(value) {
-  return value.replace(/[^a-z0-9_-]/gi, "-").toLowerCase();
+  return value.replaceAll(/[^a-z0-9_-]/gi, "-").toLowerCase();
 }
 function CodeGroup({
   children,
@@ -23,7 +23,7 @@ function CodeGroup({
   );
   const storekey = `${basekey}:${signature}`;
   const eventkey = `${basekey}:event`;
-  const uid = useId().replace(/[:]/g, "");
+  const uid = useId().replaceAll(/[:]/g, "");
   const add = useCallback((value) => {
     setlist((items) => items.includes(value) ? items : [...items, value]);
   }, []);
@@ -31,31 +31,43 @@ function CodeGroup({
     setlist((items) => items.filter((item) => item !== value));
   }, []);
   useEffect(() => {
-    if (list.length === 0) return;
+    if (list.length === 0) {
+      return;
+    }
     if (persist) {
       try {
         const stored = localStorage.getItem(storekey);
         if (stored && list.includes(stored)) {
-          if (stored !== active) rawset(stored);
+          if (stored !== active) {
+            rawset(stored);
+          }
           return;
         }
         const fallback = localStorage.getItem(basekey);
         if (fallback && list.includes(fallback)) {
-          if (fallback !== active) rawset(fallback);
+          if (fallback !== active) {
+            rawset(fallback);
+          }
           return;
         }
       } catch {
       }
     }
-    if (active && list.includes(active)) return;
+    if (active && list.includes(active)) {
+      return;
+    }
     const first = list[0] ?? "";
     rawset(defaultValue && list.includes(defaultValue) ? defaultValue : first);
   }, [active, basekey, defaultValue, list, persist, storekey]);
   useEffect(() => {
-    if (!persist) return;
+    if (!persist) {
+      return;
+    }
     const handler = (event) => {
       const value = event.detail;
-      if (typeof value === "string" && list.includes(value)) rawset(value);
+      if (typeof value === "string" && list.includes(value)) {
+        rawset(value);
+      }
     };
     window.addEventListener(eventkey, handler);
     return () => window.removeEventListener(eventkey, handler);
@@ -63,7 +75,9 @@ function CodeGroup({
   const set = useCallback(
     (value) => {
       rawset(value);
-      if (!persist) return;
+      if (!persist) {
+        return;
+      }
       try {
         localStorage.setItem(basekey, value);
         localStorage.setItem(storekey, value);
@@ -73,13 +87,21 @@ function CodeGroup({
     },
     [basekey, eventkey, persist, storekey]
   );
-  return /* @__PURE__ */ jsx(context.Provider, { value: { active, set, add, remove, list, prefix: `code-${uid}` }, children: /* @__PURE__ */ jsx("div", { className: "my-4 rounded-lg border border-white/10 overflow-hidden", children }) });
+  return /* @__PURE__ */ jsx(
+    context.Provider,
+    {
+      value: { active, add, list, prefix: `code-${uid}`, remove, set },
+      children: /* @__PURE__ */ jsx("div", { className: "my-4 rounded-lg border border-white/10 overflow-hidden", children })
+    }
+  );
 }
 function CodeTab({ value, label, children }) {
   const ctx = useContext(context);
-  if (!ctx) return null;
-  const add = ctx.add;
-  const remove = ctx.remove;
+  if (!ctx) {
+    return null;
+  }
+  const { add } = ctx;
+  const { remove } = ctx;
   useEffect(() => {
     add(value);
     return () => remove(value);
@@ -103,32 +125,72 @@ function CodeTab({ value, label, children }) {
         children: label
       }
     ),
-    isactive && /* @__PURE__ */ jsx("div", { role: "tabpanel", id: panelid, "aria-labelledby": tabid, className: "[&>pre]:!mt-0 [&>pre]:!rounded-t-none", children })
+    isactive && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tabpanel",
+        id: panelid,
+        "aria-labelledby": tabid,
+        className: "[&>pre]:!mt-0 [&>pre]:!rounded-t-none",
+        children
+      }
+    )
   ] });
 }
-const CodeTabs = memo(function CodeTabs2({ children }) {
+const CodeTabs = memo(function CodeTabs2({
+  children
+}) {
   const ctx = useContext(context);
   const ref = useRef(null);
   const onkey = useCallback(
     (event) => {
-      if (!ctx || ctx.list.length === 0) return;
-      const current = Math.max(0, ctx.list.indexOf(ctx.active || ctx.list[0] || ""));
+      if (!ctx || ctx.list.length === 0) {
+        return;
+      }
+      const current = Math.max(
+        0,
+        ctx.list.indexOf(ctx.active || ctx.list[0] || "")
+      );
       let next = current;
-      if (event.key === "ArrowRight") next = Math.min(ctx.list.length - 1, current + 1);
-      if (event.key === "ArrowLeft") next = Math.max(0, current - 1);
-      if (event.key === "Home") next = 0;
-      if (event.key === "End") next = ctx.list.length - 1;
-      if (next === current) return;
+      if (event.key === "ArrowRight") {
+        next = Math.min(ctx.list.length - 1, current + 1);
+      }
+      if (event.key === "ArrowLeft") {
+        next = Math.max(0, current - 1);
+      }
+      if (event.key === "Home") {
+        next = 0;
+      }
+      if (event.key === "End") {
+        next = ctx.list.length - 1;
+      }
+      if (next === current) {
+        return;
+      }
       event.preventDefault();
       const value = ctx.list[next];
-      if (!value) return;
+      if (!value) {
+        return;
+      }
       ctx.set(value);
-      const button = ref.current?.querySelector(`button[data-value="${value}"]`);
+      const button = ref.current?.querySelector(
+        `button[data-value="${value}"]`
+      );
       button?.focus();
     },
     [ctx]
   );
-  return /* @__PURE__ */ jsx("div", { ref, role: "tablist", "aria-label": "code examples", onKeyDown: onkey, className: "flex border-b border-white/10 bg-bg", children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tablist",
+      "aria-label": "code examples",
+      onKeyDown: onkey,
+      className: "flex border-b border-white/10 bg-bg",
+      children
+    }
+  );
 });
 
 export { CodeGroup, CodeTab, CodeTabs };

package/dist/components/collapsible.d.ts

@@ -12,7 +12,7 @@ interface CollapsibleProps {
     /** The content to display when expanded. */
     children: ReactNode;
 }
-declare function CollapsibleBase({ title, defaultOpen, children }: CollapsibleProps): JSX.Element;
+declare function CollapsibleBase({ title, defaultOpen, children, }: CollapsibleProps): JSX.Element;
 declare const Collapsible: react.MemoExoticComponent<typeof CollapsibleBase>;
 /**
  * Props for the Details component.

package/dist/components/collapsible.js

@@ -3,7 +3,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, useState, useId, useCallback } from 'react';
 import { IconChevronRight } from './icons';
 
-function CollapsibleBase({ title, defaultOpen = false, children }) {
+function CollapsibleBase({
+  title,
+  defaultOpen = false,
+  children
+}) {
   const [open, setOpen] = useState(defaultOpen);
   const id = useId();
   const buttonId = `${id}-button`;

package/dist/components/command.d.ts

@@ -17,6 +17,6 @@ interface CommandProps {
     placeholder?: string;
     onSelect?: (item: CommandItem) => void;
 }
-declare function Command({ items, placeholder, onSelect }: CommandProps): JSX.Element;
+declare function Command({ items, placeholder, onSelect, }: CommandProps): JSX.Element;
 
 export { Command, type CommandItem, type CommandProps };