fromsrc 0.0.2 → 0.0.22

package/dist/components/table.js

@@ -13,26 +13,44 @@ function Table({
   caption,
   className = ""
 }) {
-  const [sortKey, setSortKey] = useState(defaultSort ?? null);
-  const [sortDir, setSortDir] = useState(defaultSort ? defaultDirection : null);
+  const [sortKey, setSortKey] = useState(
+    defaultSort ?? null
+  );
+  const [sortDir, setSortDir] = useState(
+    defaultSort ? defaultDirection : null
+  );
   const id = useId();
   const sorted = useMemo(() => {
-    if (!sortKey || !sortDir) return data;
+    if (!sortKey || !sortDir) {
+      return data;
+    }
     return [...data].sort((a, b) => {
       const va = a[sortKey];
       const vb = b[sortKey];
-      if (va === vb) return 0;
-      if (va == null) return 1;
-      if (vb == null) return -1;
-      const cmp = va < vb ? -1 : 1;
+      if (va === vb) {
+        return 0;
+      }
+      if (va == null) {
+        return 1;
+      }
+      if (vb == null) {
+        return -1;
+      }
+      const na = typeof va === "number" ? va : String(va);
+      const nb = typeof vb === "number" ? vb : String(vb);
+      const cmp = na < nb ? -1 : na > nb ? 1 : 0;
       return sortDir === "asc" ? cmp : -cmp;
     });
   }, [data, sortKey, sortDir]);
   const handleSort = useCallback(
     (key) => {
       if (sortKey === key) {
-        setSortDir(sortDir === "asc" ? "desc" : sortDir === "desc" ? null : "asc");
-        if (sortDir === "desc") setSortKey(null);
+        setSortDir(
+          sortDir === "asc" ? "desc" : sortDir === "desc" ? null : "asc"
+        );
+        if (sortDir === "desc") {
+          setSortKey(null);
+        }
       } else {
         setSortKey(key);
         setSortDir("asc");
@@ -44,8 +62,12 @@ function Table({
   const getSortLabel = useCallback(
     (col) => {
       if (sortKey === col.key) {
-        if (sortDir === "asc") return `${col.header}, sorted ascending`;
-        if (sortDir === "desc") return `${col.header}, sorted descending`;
+        if (sortDir === "asc") {
+          return `${col.header}, sorted ascending`;
+        }
+        if (sortDir === "desc") {
+          return `${col.header}, sorted descending`;
+        }
       }
       return `${col.header}, sortable`;
     },
@@ -119,7 +141,10 @@ function Table({
     }
   );
 }
-const SortIcon = memo(function SortIcon2({ active, direction }) {
+const SortIcon = memo(function SortIcon2({
+  active,
+  direction
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {

package/dist/components/tabnav.d.ts

@@ -25,6 +25,6 @@ interface TabNavDropdownProps {
     tabs: NavTab[];
     label?: string;
 }
-declare function TabNavDropdown({ tabs, label }: TabNavDropdownProps): ReactNode;
+declare function TabNavDropdown({ tabs, label, }: TabNavDropdownProps): ReactNode;
 
 export { type NavTab, TabNav, TabNavDropdown, type TabNavDropdownProps, type TabNavProps };

package/dist/components/tabnav.js

@@ -26,37 +26,50 @@ function TabNav({ tabs, label = "Navigation" }) {
         direction: "both",
         wrap: true
       });
-      if (next === index) return;
+      if (next === index) {
+        return;
+      }
       e.preventDefault();
       refs.current[next]?.focus();
     },
     [tabs.length]
   );
-  return /* @__PURE__ */ jsx("nav", { "aria-label": label, role: "tablist", className: "flex gap-1 p-1 bg-surface rounded-lg", children: tabs.map((tab, i) => {
-    const active = isActive(tab);
-    return /* @__PURE__ */ jsxs(
-      Link,
-      {
-        ref: (el) => {
-          refs.current[i] = el;
-        },
-        href: tab.href,
-        role: "tab",
-        tabIndex: active ? 0 : -1,
-        "aria-selected": active,
-        "aria-current": active ? "page" : void 0,
-        onKeyDown: (e) => handleKeyDown(e, i),
-        className: `flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${active ? "bg-bg text-fg shadow-sm" : "text-muted hover:text-fg hover:bg-bg/50"}`,
-        children: [
-          tab.icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4", "aria-hidden": "true", children: tab.icon }),
-          tab.label
-        ]
-      },
-      tab.id
-    );
-  }) });
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": label,
+      role: "tablist",
+      className: "flex gap-1 p-1 bg-surface rounded-lg",
+      children: tabs.map((tab, i) => {
+        const active = isActive(tab);
+        return /* @__PURE__ */ jsxs(
+          Link,
+          {
+            ref: (el) => {
+              refs.current[i] = el;
+            },
+            href: tab.href,
+            role: "tab",
+            tabIndex: active ? 0 : -1,
+            "aria-selected": active,
+            "aria-current": active ? "page" : void 0,
+            onKeyDown: (e) => handleKeyDown(e, i),
+            className: `flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${active ? "bg-bg text-fg shadow-sm" : "text-muted hover:text-fg hover:bg-bg/50"}`,
+            children: [
+              tab.icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4", "aria-hidden": "true", children: tab.icon }),
+              tab.label
+            ]
+          },
+          tab.id
+        );
+      })
+    }
+  );
 }
-function TabNavDropdown({ tabs, label = "Navigation" }) {
+function TabNavDropdown({
+  tabs,
+  label = "Navigation"
+}) {
   const pathname = usePathname();
   const [open, setOpen] = useState(false);
   const [focused, setFocused] = useState(0);
@@ -90,7 +103,7 @@ function TabNavDropdown({ tabs, label = "Navigation" }) {
     (e) => {
       if (e.key === "ArrowDown" || e.key === "ArrowUp") {
         e.preventDefault();
-        openMenu(currentIndex >= 0 ? currentIndex : 0);
+        openMenu(Math.max(currentIndex, 0));
       }
     },
     [currentIndex, openMenu]
@@ -111,7 +124,9 @@ function TabNavDropdown({ tabs, label = "Navigation" }) {
         current: index,
         wrap: true
       });
-      if (next === index) return;
+      if (next === index) {
+        return;
+      }
       e.preventDefault();
       setFocused(next);
       optionRefs.current[next]?.focus();
@@ -122,17 +137,14 @@ function TabNavDropdown({ tabs, label = "Navigation" }) {
     if (open) {
       closeMenu();
     } else {
-      openMenu(currentIndex >= 0 ? currentIndex : 0);
+      openMenu(Math.max(currentIndex, 0));
     }
   }, [open, closeMenu, openMenu, currentIndex]);
-  const handleBlur = useCallback(
-    (e) => {
-      if (!containerRef.current?.contains(e.relatedTarget)) {
-        setOpen(false);
-      }
-    },
-    []
-  );
+  const handleBlur = useCallback((e) => {
+    if (!containerRef.current?.contains(e.relatedTarget)) {
+      setOpen(false);
+    }
+  }, []);
   return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: "relative", ref: containerRef, children: [
     /* @__PURE__ */ jsxs(
       "button",

package/dist/components/tabs.d.ts

@@ -5,7 +5,7 @@ interface TabsProps {
     defaultValue?: string;
     children: ReactNode;
 }
-declare function Tabs({ items, defaultValue, children }: TabsProps): JSX.Element;
+declare function Tabs({ items, defaultValue, children, }: TabsProps): JSX.Element;
 interface TabProps {
     value: string;
     children: ReactNode;

package/dist/components/tabs.js

@@ -4,7 +4,11 @@ import { createContext, useState, useId, useRef, useCallback, useContext } from
 import { getNextIndex } from '../hooks/arrownav';
 
 const TabsContext = createContext(null);
-function Tabs({ items, defaultValue, children }) {
+function Tabs({
+  items,
+  defaultValue,
+  children
+}) {
   const [active, setActive] = useState(defaultValue ?? items[0] ?? "");
   const id = useId();
   const tabsRef = useRef(null);
@@ -37,7 +41,9 @@ function Tabs({ items, defaultValue, children }) {
         direction: "horizontal",
         wrap: true
       });
-      if (nextIndex === currentIndex) return;
+      if (nextIndex === currentIndex) {
+        return;
+      }
       e.preventDefault();
       const nextItem = items[nextIndex];
       if (nextItem !== void 0) {
@@ -48,48 +54,58 @@ function Tabs({ items, defaultValue, children }) {
     },
     [active, items]
   );
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { active, setActive, id, getTabId, getPanelId }, children: /* @__PURE__ */ jsxs("div", { className: "my-6", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: tabsRef,
-        role: "tablist",
-        onKeyDown: handleKeyDown,
-        className: "flex border-b border-line",
-        children: items.map((item) => /* @__PURE__ */ jsx(
-          "button",
+  return /* @__PURE__ */ jsx(
+    TabsContext.Provider,
+    {
+      value: { active, getPanelId, getTabId, id, setActive },
+      children: /* @__PURE__ */ jsxs("div", { className: "my-6", children: [
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            id: getTabId(item),
-            type: "button",
-            role: "tab",
-            "aria-selected": active === item,
-            "aria-controls": getPanelId(item),
-            tabIndex: active === item ? 0 : -1,
-            onClick: () => setActive(item),
-            className: `px-4 py-2 text-sm font-medium transition-colors border-b -mb-px ${active === item ? "text-fg border-fg" : "text-muted hover:text-fg border-transparent"}`,
-            children: item
-          },
-          item
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: getPanelId(active),
-        role: "tabpanel",
-        "aria-labelledby": getTabId(active),
-        tabIndex: 0,
-        className: "pt-4",
-        children
-      }
-    )
-  ] }) });
+            ref: tabsRef,
+            role: "tablist",
+            onKeyDown: handleKeyDown,
+            className: "flex border-b border-line",
+            children: items.map((item) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                id: getTabId(item),
+                type: "button",
+                role: "tab",
+                "aria-selected": active === item,
+                "aria-controls": getPanelId(item),
+                tabIndex: active === item ? 0 : -1,
+                onClick: () => setActive(item),
+                className: `px-4 py-2 text-sm font-medium transition-colors border-b -mb-px ${active === item ? "text-fg border-fg" : "text-muted hover:text-fg border-transparent"}`,
+                children: item
+              },
+              item
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: getPanelId(active),
+            role: "tabpanel",
+            "aria-labelledby": getTabId(active),
+            tabIndex: 0,
+            className: "pt-4",
+            children
+          }
+        )
+      ] })
+    }
+  );
 }
 function Tab({ value, children }) {
   const context = useContext(TabsContext);
-  if (!context) return null;
-  if (context.active !== value) return null;
+  if (!context) {
+    return null;
+  }
+  if (context.active !== value) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 

package/dist/components/tag.js

@@ -3,13 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { memo } from 'react';
 
 const styles = {
+  danger: "bg-red-500/10 border-red-500/20 text-red-400",
   default: "bg-surface border-line text-muted",
   primary: "bg-accent/10 border-accent/20 text-accent",
   success: "bg-emerald-500/10 border-emerald-500/20 text-emerald-400",
-  warning: "bg-amber-500/10 border-amber-500/20 text-amber-400",
-  danger: "bg-red-500/10 border-red-500/20 text-red-400"
+  warning: "bg-amber-500/10 border-amber-500/20 text-amber-400"
 };
-function TagBase({ variant = "default", className, children, ...props }) {
+function TagBase({
+  variant = "default",
+  className,
+  children,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     "span",
     {

package/dist/components/terminal.js

@@ -2,7 +2,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, useState, useRef, useCallback, useEffect } from 'react';
 
-const Terminal = memo(function Terminal2({ title = "Terminal", children }) {
+const Terminal = memo(function Terminal2({
+  title = "Terminal",
+  children
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-xl border border-line overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2.5 bg-[#0a0a0a] border-b border-line", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", "aria-hidden": "true", children: [
@@ -15,13 +18,18 @@ const Terminal = memo(function Terminal2({ title = "Terminal", children }) {
     /* @__PURE__ */ jsx("div", { className: "p-4 bg-[#0a0a0a] font-mono text-sm", children })
   ] });
 });
-const Line = memo(function Line2({ prompt = "$", children }) {
+const Line = memo(function Line2({
+  prompt = "$",
+  children
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
     /* @__PURE__ */ jsx("span", { className: "text-emerald-400 select-none shrink-0", children: prompt }),
     /* @__PURE__ */ jsx("span", { className: "text-zinc-300", children })
   ] });
 });
-const Output = memo(function Output2({ children }) {
+const Output = memo(function Output2({
+  children
+}) {
   return /* @__PURE__ */ jsx("div", { className: "text-zinc-500 pl-5", children });
 });
 const caretStyle = {
@@ -48,7 +56,9 @@ function Typed({ text, speed = 50 }) {
     reset();
   }, [text, reset]);
   useEffect(() => {
-    if (done) return;
+    if (done) {
+      return;
+    }
     const interval = setInterval(tick, speed);
     return () => clearInterval(interval);
   }, [text, speed, done, tick]);

package/dist/components/textarea.js

@@ -9,92 +9,106 @@ const variants = {
   error: "border-red-500/50 bg-red-500/5 text-fg placeholder:text-muted focus:border-red-500"
 };
 const sizes = {
-  sm: "px-2.5 py-1.5 text-xs min-h-[60px]",
+  lg: "px-4 py-3 text-base min-h-[100px]",
   md: "px-3 py-2 text-sm min-h-[80px]",
-  lg: "px-4 py-3 text-base min-h-[100px]"
+  sm: "px-2.5 py-1.5 text-xs min-h-[60px]"
 };
-const Textarea = memo(forwardRef(function Textarea2({
-  variant = "default",
-  size = "md",
-  label,
-  error,
-  hint,
-  autoresize = false,
-  showCount = false,
-  tooltip,
-  maxLength,
-  className = "",
-  id,
-  value,
-  defaultValue,
-  onChange,
-  ...props
-}, ref) {
-  const generatedId = useId();
-  const textareaId = id || generatedId;
-  const errorId = error ? `${textareaId}-error` : void 0;
-  const hintId = hint && !error ? `${textareaId}-hint` : void 0;
-  const countId = showCount ? `${textareaId}-count` : void 0;
-  const describedBy = [errorId, hintId, countId].filter(Boolean).join(" ") || void 0;
-  const actualVariant = error ? "error" : variant;
-  const internalRef = useRef(null);
-  const [charCount, setCharCount] = useState(() => {
-    const initial = value ?? defaultValue ?? "";
-    return typeof initial === "string" ? initial.length : 0;
-  });
-  const resize = useCallback(() => {
-    const textarea = internalRef.current;
-    if (!textarea || !autoresize) return;
-    textarea.style.height = "auto";
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  }, [autoresize]);
-  useEffect(() => {
-    resize();
-  }, [resize, value]);
-  const handleChange = (e) => {
-    setCharCount(e.target.value.length);
-    if (autoresize) resize();
-    onChange?.(e);
-  };
-  const setRefs = useCallback(
-    (node) => {
-      internalRef.current = node;
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
+const Textarea = memo(
+  forwardRef(function Textarea2({
+    variant = "default",
+    size = "md",
+    label,
+    error,
+    hint,
+    autoresize = false,
+    showCount = false,
+    tooltip,
+    maxLength,
+    className = "",
+    id,
+    value,
+    defaultValue,
+    onChange,
+    ...props
+  }, ref) {
+    const generatedId = useId();
+    const textareaId = id || generatedId;
+    const errorId = error ? `${textareaId}-error` : void 0;
+    const hintId = hint && !error ? `${textareaId}-hint` : void 0;
+    const countId = showCount ? `${textareaId}-count` : void 0;
+    const describedBy = [errorId, hintId, countId].filter(Boolean).join(" ") || void 0;
+    const actualVariant = error ? "error" : variant;
+    const internalRef = useRef(null);
+    const [charCount, setCharCount] = useState(() => {
+      const initial = value ?? defaultValue ?? "";
+      return typeof initial === "string" ? initial.length : 0;
+    });
+    const resize = useCallback(() => {
+      const textarea = internalRef.current;
+      if (!textarea || !autoresize) {
+        return;
       }
-    },
-    [ref]
-  );
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-    label && /* @__PURE__ */ jsx(FormLabel, { label, tooltip, htmlFor: textareaId }),
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref: setRefs,
-        id: textareaId,
-        "aria-invalid": actualVariant === "error" ? true : void 0,
-        "aria-describedby": describedBy,
-        maxLength,
-        value,
-        defaultValue,
-        onChange: handleChange,
-        className: `rounded-md border outline-none transition-colors resize-vertical ${variants[actualVariant]} ${sizes[size]} ${autoresize ? "resize-none overflow-hidden" : ""} ${className}`.trim(),
-        ...props
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }, [autoresize]);
+    useEffect(() => {
+      resize();
+    }, [resize, value]);
+    const handleChange = (e) => {
+      setCharCount(e.target.value.length);
+      if (autoresize) {
+        resize();
       }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-        error && /* @__PURE__ */ jsx(ErrorMessage, { id: errorId, children: error }),
-        hint && !error && /* @__PURE__ */ jsx("span", { id: hintId, className: "text-xs text-muted", children: hint })
-      ] }),
-      showCount && /* @__PURE__ */ jsxs("span", { id: countId, className: "text-xs text-muted", "aria-live": "polite", children: [
-        charCount,
-        maxLength ? `/${maxLength}` : ""
+      onChange?.(e);
+    };
+    const setRefs = useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      label && /* @__PURE__ */ jsx(FormLabel, { label, tooltip, htmlFor: textareaId }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: setRefs,
+          id: textareaId,
+          "aria-invalid": actualVariant === "error" ? true : void 0,
+          "aria-describedby": describedBy,
+          maxLength,
+          value,
+          defaultValue,
+          onChange: handleChange,
+          className: `rounded-md border outline-none transition-colors resize-vertical ${variants[actualVariant]} ${sizes[size]} ${autoresize ? "resize-none overflow-hidden" : ""} ${className}`.trim(),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          error && /* @__PURE__ */ jsx(ErrorMessage, { id: errorId, children: error }),
+          hint && !error && /* @__PURE__ */ jsx("span", { id: hintId, className: "text-xs text-muted", children: hint })
+        ] }),
+        showCount && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            id: countId,
+            className: "text-xs text-muted",
+            "aria-live": "polite",
+            children: [
+              charCount,
+              maxLength ? `/${maxLength}` : ""
+            ]
+          }
+        )
       ] })
-    ] })
-  ] });
-}));
+    ] });
+  })
+);
 
 export { Textarea };

package/dist/components/theme.d.ts

@@ -5,7 +5,7 @@ type Theme = "light" | "dark" | "system";
 interface ThemeToggleProps {
     defaultTheme?: Theme;
 }
-declare function ThemeToggleBase({ defaultTheme }: ThemeToggleProps): JSX.Element;
+declare function ThemeToggleBase({ defaultTheme, }: ThemeToggleProps): JSX.Element;
 declare const ThemeToggle: react.MemoExoticComponent<typeof ThemeToggleBase>;
 
 export { type Theme, ThemeToggle, type ThemeToggleProps };