@snowztech/ui 0.1.0

package/dist/client.js

@@ -0,0 +1,112 @@
+"use client";
+import { CheckIcon } from './chunk-XYNFF4B5.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ThemeToggle({
+  size = 12,
+  storageKey = "theme",
+  defaultTheme = "dark",
+  className,
+  style
+}) {
+  const [theme, setTheme] = React.useState(defaultTheme);
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    const stored = localStorage.getItem(storageKey) ?? defaultTheme;
+    setTheme(stored);
+    setMounted(true);
+  }, [storageKey, defaultTheme]);
+  const toggle = () => {
+    const next = theme === "dark" ? "light" : "dark";
+    setTheme(next);
+    localStorage.setItem(storageKey, next);
+    if (next === "light") document.documentElement.setAttribute("data-theme", "light");
+    else document.documentElement.removeAttribute("data-theme");
+  };
+  const filled = theme === "dark";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggle,
+      "aria-label": `switch to ${filled ? "light" : "dark"} mode`,
+      className,
+      style: {
+        appearance: "none",
+        border: "none",
+        background: "transparent",
+        padding: 6,
+        cursor: "pointer",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: mounted ? 1 : 0,
+        transition: "opacity 200ms",
+        ...style
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            width: size,
+            height: size,
+            borderRadius: "50%",
+            border: `1px solid var(--sn-fg-muted)`,
+            background: filled ? "var(--sn-fg)" : "transparent",
+            transition: "background 160ms ease"
+          }
+        }
+      )
+    }
+  );
+}
+function CopyButton({ value, size = 14, className, style }) {
+  const [copied, setCopied] = React.useState(false);
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onCopy,
+      "aria-label": copied ? "copied" : "copy",
+      className,
+      style: {
+        appearance: "none",
+        border: "1px solid transparent",
+        background: "transparent",
+        color: copied ? "var(--sn-success)" : "var(--sn-fg-muted)",
+        padding: 6,
+        cursor: "pointer",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "var(--sn-r-xs)",
+        transition: "color 120ms ease, border-color 120ms ease",
+        ...style
+      },
+      onMouseEnter: (e) => {
+        if (!copied) e.currentTarget.style.color = "var(--sn-fg)";
+      },
+      onMouseLeave: (e) => {
+        if (!copied) e.currentTarget.style.color = "var(--sn-fg-muted)";
+      },
+      children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size }) : /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15V5a1 1 0 0 1 1-1h10" })
+      ] })
+    }
+  );
+}
+
+export { CopyButton, ThemeToggle };
+//# sourceMappingURL=client.js.map
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme-toggle.tsx","../src/copy-button.tsx"],"names":["React2","jsx"],"mappings":"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","file":"client.js","sourcesContent":["import * as React from \"react\";\n\nexport type Theme = \"light\" | \"dark\";\n\nexport interface ThemeToggleProps {\n  size?: number;\n  storageKey?: string;\n  defaultTheme?: Theme;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function ThemeToggle({\n  size = 12,\n  storageKey = \"theme\",\n  defaultTheme = \"dark\",\n  className,\n  style,\n}: ThemeToggleProps) {\n  const [theme, setTheme] = React.useState<Theme>(defaultTheme);\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    const stored = (localStorage.getItem(storageKey) as Theme | null) ?? defaultTheme;\n    setTheme(stored);\n    setMounted(true);\n  }, [storageKey, defaultTheme]);\n\n  const toggle = () => {\n    const next: Theme = theme === \"dark\" ? \"light\" : \"dark\";\n    setTheme(next);\n    localStorage.setItem(storageKey, next);\n    if (next === \"light\") document.documentElement.setAttribute(\"data-theme\", \"light\");\n    else document.documentElement.removeAttribute(\"data-theme\");\n  };\n\n  const filled = theme === \"dark\";\n\n  return (\n    <button\n      type=\"button\"\n      onClick={toggle}\n      aria-label={`switch to ${filled ? \"light\" : \"dark\"} mode`}\n      className={className}\n      style={{\n        appearance: \"none\",\n        border: \"none\",\n        background: \"transparent\",\n        padding: 6,\n        cursor: \"pointer\",\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        opacity: mounted ? 1 : 0,\n        transition: \"opacity 200ms\",\n        ...style,\n      }}\n    >\n      <span\n        style={{\n          display: \"inline-block\",\n          width: size,\n          height: size,\n          borderRadius: \"50%\",\n          border: `1px solid var(--sn-fg-muted)`,\n          background: filled ? \"var(--sn-fg)\" : \"transparent\",\n          transition: \"background 160ms ease\",\n        }}\n      />\n    </button>\n  );\n}\n","import * as React from \"react\";\nimport { CheckIcon } from \"./icons\";\n\nexport interface CopyButtonProps {\n  value: string;\n  size?: number;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function CopyButton({ value, size = 14, className, style }: CopyButtonProps) {\n  const [copied, setCopied] = React.useState(false);\n\n  const onCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1200);\n    } catch {\n      // ignored\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onCopy}\n      aria-label={copied ? \"copied\" : \"copy\"}\n      className={className}\n      style={{\n        appearance: \"none\",\n        border: \"1px solid transparent\",\n        background: \"transparent\",\n        color: copied ? \"var(--sn-success)\" : \"var(--sn-fg-muted)\",\n        padding: 6,\n        cursor: \"pointer\",\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        borderRadius: \"var(--sn-r-xs)\",\n        transition: \"color 120ms ease, border-color 120ms ease\",\n        ...style,\n      }}\n      onMouseEnter={(e) => {\n        if (!copied) e.currentTarget.style.color = \"var(--sn-fg)\";\n      }}\n      onMouseLeave={(e) => {\n        if (!copied) e.currentTarget.style.color = \"var(--sn-fg-muted)\";\n      }}\n    >\n      {copied ? (\n        <CheckIcon size={size} />\n      ) : (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n          <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"1.5\" />\n          <path d=\"M5 15V5a1 1 0 0 1 1-1h10\" />\n        </svg>\n      )}\n    </button>\n  );\n}\n"]}