@seekho/ui 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    children: React.ReactNode;
+}
+declare function Button({ variant, size, loading, disabled, className, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = "default" | "success" | "warning" | "danger" | "info";
+interface BadgeProps {
+    variant?: BadgeVariant;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Badge({ variant, children, className }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    hint?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * useState backed by localStorage — syncs value on mount and persists on change.
+ */
+declare function useLocalStorage<T>(key: string, initialValue: T): readonly [T, (value: T | ((prev: T) => T)) => void, () => void];
+
+/**
+ * Merges class names, filtering out falsy values.
+ * Lightweight alternative to clsx for simple use cases.
+ */
+declare function cn(...classes: (string | undefined | null | false)[]): string;
+
+export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Input, type InputProps, cn, useLocalStorage };

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    children: React.ReactNode;
+}
+declare function Button({ variant, size, loading, disabled, className, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = "default" | "success" | "warning" | "danger" | "info";
+interface BadgeProps {
+    variant?: BadgeVariant;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Badge({ variant, children, className }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    hint?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * useState backed by localStorage — syncs value on mount and persists on change.
+ */
+declare function useLocalStorage<T>(key: string, initialValue: T): readonly [T, (value: T | ((prev: T) => T)) => void, () => void];
+
+/**
+ * Merges class names, filtering out falsy values.
+ * Lightweight alternative to clsx for simple use cases.
+ */
+declare function cn(...classes: (string | undefined | null | false)[]): string;
+
+export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Input, type InputProps, cn, useLocalStorage };

package/dist/index.js

@@ -0,0 +1,217 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var variantClasses = {
+  primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+  secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-400",
+  danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
+  ghost: "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-300"
+};
+var sizeClasses = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+  lg: "px-5 py-2.5 text-base"
+};
+function Button(_a) {
+  var _b = _a, {
+    variant = "primary",
+    size = "md",
+    loading = false,
+    disabled,
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "loading",
+    "disabled",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      disabled: disabled || loading,
+      className: [
+        "inline-flex items-center justify-center gap-2 rounded-md font-medium",
+        "focus:outline-none focus:ring-2 focus:ring-offset-2",
+        "transition-colors duration-150",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      ].join(" ")
+    }, props), {
+      children: [
+        loading && /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: "animate-spin h-4 w-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                }
+              )
+            ]
+          }
+        ),
+        children
+      ]
+    })
+  );
+}
+var variantClasses2 = {
+  default: "bg-gray-100 text-gray-800",
+  success: "bg-green-100 text-green-800",
+  warning: "bg-yellow-100 text-yellow-800",
+  danger: "bg-red-100 text-red-800",
+  info: "bg-blue-100 text-blue-800"
+};
+function Badge({ variant = "default", children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: [
+        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+        variantClasses2[variant],
+        className
+      ].join(" "),
+      children
+    }
+  );
+}
+var Input = React__default.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { label, error, hint, className = "", id } = _b, props = __objRest(_b, ["label", "error", "hint", "className", "id"]);
+    const inputId = id || (label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-"));
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "text-sm font-medium text-gray-700",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        __spreadValues({
+          ref,
+          id: inputId,
+          className: [
+            "block w-full rounded-md border px-3 py-2 text-sm shadow-sm",
+            "placeholder:text-gray-400",
+            "focus:outline-none focus:ring-2 focus:ring-offset-0",
+            error ? "border-red-400 focus:border-red-500 focus:ring-red-300" : "border-gray-300 focus:border-blue-500 focus:ring-blue-200",
+            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
+            className
+          ].join(" ")
+        }, props)
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-600", children: error }),
+      hint && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: hint })
+    ] });
+  }
+);
+Input.displayName = "Input";
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = React.useState(() => {
+    if (typeof window === "undefined") return initialValue;
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (e) {
+      return initialValue;
+    }
+  });
+  const setValue = (value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      }
+    } catch (error) {
+      console.warn(`useLocalStorage: failed to set "${key}"`, error);
+    }
+  };
+  const remove = () => {
+    try {
+      setStoredValue(initialValue);
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem(key);
+      }
+    } catch (error) {
+      console.warn(`useLocalStorage: failed to remove "${key}"`, error);
+    }
+  };
+  return [storedValue, setValue, remove];
+}
+
+// src/utils/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Input = Input;
+exports.cn = cn;
+exports.useLocalStorage = useLocalStorage;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Badge/Badge.tsx","../src/components/Input/Input.tsx","../src/hooks/useLocalStorage.ts","../src/utils/cn.ts"],"names":["jsxs","jsx","variantClasses","React","useState"],"mappings":"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","file":"index.js","sourcesContent":["import React from \"react\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"danger\" | \"ghost\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  loading?: boolean;\n  children: React.ReactNode;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary: \"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500\",\n  secondary: \"bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-400\",\n  danger: \"bg-red-600 text-white hover:bg-red-700 focus:ring-red-500\",\n  ghost: \"bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-300\",\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  sm: \"px-3 py-1.5 text-sm\",\n  md: \"px-4 py-2 text-sm\",\n  lg: \"px-5 py-2.5 text-base\",\n};\n\nexport function Button({\n  variant = \"primary\",\n  size = \"md\",\n  loading = false,\n  disabled,\n  className = \"\",\n  children,\n  ...props\n}: ButtonProps) {\n  return (\n    <button\n      disabled={disabled || loading}\n      className={[\n        \"inline-flex items-center justify-center gap-2 rounded-md font-medium\",\n        \"focus:outline-none focus:ring-2 focus:ring-offset-2\",\n        \"transition-colors duration-150\",\n        \"disabled:opacity-50 disabled:cursor-not-allowed\",\n        variantClasses[variant],\n        sizeClasses[size],\n        className,\n      ].join(\" \")}\n      {...props}\n    >\n      {loading && (\n        <svg\n          className=\"animate-spin h-4 w-4\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle\n            className=\"opacity-25\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            strokeWidth=\"4\"\n          />\n          <path\n            className=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n          />\n        </svg>\n      )}\n      {children}\n    </button>\n  );\n}\n","import React from \"react\";\n\nexport type BadgeVariant = \"default\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport interface BadgeProps {\n  variant?: BadgeVariant;\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst variantClasses: Record<BadgeVariant, string> = {\n  default: \"bg-gray-100 text-gray-800\",\n  success: \"bg-green-100 text-green-800\",\n  warning: \"bg-yellow-100 text-yellow-800\",\n  danger: \"bg-red-100 text-red-800\",\n  info: \"bg-blue-100 text-blue-800\",\n};\n\nexport function Badge({ variant = \"default\", children, className = \"\" }: BadgeProps) {\n  return (\n    <span\n      className={[\n        \"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium\",\n        variantClasses[variant],\n        className,\n      ].join(\" \")}\n    >\n      {children}\n    </span>\n  );\n}\n","import React from \"react\";\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: string;\n  error?: string;\n  hint?: string;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ label, error, hint, className = \"\", id, ...props }, ref) => {\n    const inputId = id || label?.toLowerCase().replace(/\\s+/g, \"-\");\n\n    return (\n      <div className=\"flex flex-col gap-1\">\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"text-sm font-medium text-gray-700\"\n          >\n            {label}\n          </label>\n        )}\n        <input\n          ref={ref}\n          id={inputId}\n          className={[\n            \"block w-full rounded-md border px-3 py-2 text-sm shadow-sm\",\n            \"placeholder:text-gray-400\",\n            \"focus:outline-none focus:ring-2 focus:ring-offset-0\",\n            error\n              ? \"border-red-400 focus:border-red-500 focus:ring-red-300\"\n              : \"border-gray-300 focus:border-blue-500 focus:ring-blue-200\",\n            \"disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500\",\n            className,\n          ].join(\" \")}\n          {...props}\n        />\n        {error && <p className=\"text-xs text-red-600\">{error}</p>}\n        {hint && !error && <p className=\"text-xs text-gray-500\">{hint}</p>}\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n","import { useState } from \"react\";\n\n/**\n * useState backed by localStorage — syncs value on mount and persists on change.\n */\nexport function useLocalStorage<T>(key: string, initialValue: T) {\n  const [storedValue, setStoredValue] = useState<T>(() => {\n    if (typeof window === \"undefined\") return initialValue;\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? (JSON.parse(item) as T) : initialValue;\n    } catch {\n      return initialValue;\n    }\n  });\n\n  const setValue = (value: T | ((prev: T) => T)) => {\n    try {\n      const valueToStore = value instanceof Function ? value(storedValue) : value;\n      setStoredValue(valueToStore);\n      if (typeof window !== \"undefined\") {\n        window.localStorage.setItem(key, JSON.stringify(valueToStore));\n      }\n    } catch (error) {\n      console.warn(`useLocalStorage: failed to set \"${key}\"`, error);\n    }\n  };\n\n  const remove = () => {\n    try {\n      setStoredValue(initialValue);\n      if (typeof window !== \"undefined\") {\n        window.localStorage.removeItem(key);\n      }\n    } catch (error) {\n      console.warn(`useLocalStorage: failed to remove \"${key}\"`, error);\n    }\n  };\n\n  return [storedValue, setValue, remove] as const;\n}\n","/**\n * Merges class names, filtering out falsy values.\n * Lightweight alternative to clsx for simple use cases.\n */\nexport function cn(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(\" \");\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,207 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState } from 'react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var variantClasses = {
+  primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+  secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-400",
+  danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
+  ghost: "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-300"
+};
+var sizeClasses = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+  lg: "px-5 py-2.5 text-base"
+};
+function Button(_a) {
+  var _b = _a, {
+    variant = "primary",
+    size = "md",
+    loading = false,
+    disabled,
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "loading",
+    "disabled",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      disabled: disabled || loading,
+      className: [
+        "inline-flex items-center justify-center gap-2 rounded-md font-medium",
+        "focus:outline-none focus:ring-2 focus:ring-offset-2",
+        "transition-colors duration-150",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      ].join(" ")
+    }, props), {
+      children: [
+        loading && /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "animate-spin h-4 w-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                }
+              )
+            ]
+          }
+        ),
+        children
+      ]
+    })
+  );
+}
+var variantClasses2 = {
+  default: "bg-gray-100 text-gray-800",
+  success: "bg-green-100 text-green-800",
+  warning: "bg-yellow-100 text-yellow-800",
+  danger: "bg-red-100 text-red-800",
+  info: "bg-blue-100 text-blue-800"
+};
+function Badge({ variant = "default", children, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: [
+        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+        variantClasses2[variant],
+        className
+      ].join(" "),
+      children
+    }
+  );
+}
+var Input = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { label, error, hint, className = "", id } = _b, props = __objRest(_b, ["label", "error", "hint", "className", "id"]);
+    const inputId = id || (label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-"));
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "text-sm font-medium text-gray-700",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        __spreadValues({
+          ref,
+          id: inputId,
+          className: [
+            "block w-full rounded-md border px-3 py-2 text-sm shadow-sm",
+            "placeholder:text-gray-400",
+            "focus:outline-none focus:ring-2 focus:ring-offset-0",
+            error ? "border-red-400 focus:border-red-500 focus:ring-red-300" : "border-gray-300 focus:border-blue-500 focus:ring-blue-200",
+            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
+            className
+          ].join(" ")
+        }, props)
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-600", children: error }),
+      hint && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: hint })
+    ] });
+  }
+);
+Input.displayName = "Input";
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    if (typeof window === "undefined") return initialValue;
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (e) {
+      return initialValue;
+    }
+  });
+  const setValue = (value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      }
+    } catch (error) {
+      console.warn(`useLocalStorage: failed to set "${key}"`, error);
+    }
+  };
+  const remove = () => {
+    try {
+      setStoredValue(initialValue);
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem(key);
+      }
+    } catch (error) {
+      console.warn(`useLocalStorage: failed to remove "${key}"`, error);
+    }
+  };
+  return [storedValue, setValue, remove];
+}
+
+// src/utils/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export { Badge, Button, Input, cn, useLocalStorage };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Badge/Badge.tsx","../src/components/Input/Input.tsx","../src/hooks/useLocalStorage.ts","../src/utils/cn.ts"],"names":["variantClasses","jsx","jsxs"],"mappings":"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","file":"index.mjs","sourcesContent":["import React from \"react\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"danger\" | \"ghost\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  loading?: boolean;\n  children: React.ReactNode;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary: \"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500\",\n  secondary: \"bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-400\",\n  danger: \"bg-red-600 text-white hover:bg-red-700 focus:ring-red-500\",\n  ghost: \"bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-300\",\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  sm: \"px-3 py-1.5 text-sm\",\n  md: \"px-4 py-2 text-sm\",\n  lg: \"px-5 py-2.5 text-base\",\n};\n\nexport function Button({\n  variant = \"primary\",\n  size = \"md\",\n  loading = false,\n  disabled,\n  className = \"\",\n  children,\n  ...props\n}: ButtonProps) {\n  return (\n    <button\n      disabled={disabled || loading}\n      className={[\n        \"inline-flex items-center justify-center gap-2 rounded-md font-medium\",\n        \"focus:outline-none focus:ring-2 focus:ring-offset-2\",\n        \"transition-colors duration-150\",\n        \"disabled:opacity-50 disabled:cursor-not-allowed\",\n        variantClasses[variant],\n        sizeClasses[size],\n        className,\n      ].join(\" \")}\n      {...props}\n    >\n      {loading && (\n        <svg\n          className=\"animate-spin h-4 w-4\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle\n            className=\"opacity-25\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            strokeWidth=\"4\"\n          />\n          <path\n            className=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n          />\n        </svg>\n      )}\n      {children}\n    </button>\n  );\n}\n","import React from \"react\";\n\nexport type BadgeVariant = \"default\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport interface BadgeProps {\n  variant?: BadgeVariant;\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst variantClasses: Record<BadgeVariant, string> = {\n  default: \"bg-gray-100 text-gray-800\",\n  success: \"bg-green-100 text-green-800\",\n  warning: \"bg-yellow-100 text-yellow-800\",\n  danger: \"bg-red-100 text-red-800\",\n  info: \"bg-blue-100 text-blue-800\",\n};\n\nexport function Badge({ variant = \"default\", children, className = \"\" }: BadgeProps) {\n  return (\n    <span\n      className={[\n        \"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium\",\n        variantClasses[variant],\n        className,\n      ].join(\" \")}\n    >\n      {children}\n    </span>\n  );\n}\n","import React from \"react\";\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: string;\n  error?: string;\n  hint?: string;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ label, error, hint, className = \"\", id, ...props }, ref) => {\n    const inputId = id || label?.toLowerCase().replace(/\\s+/g, \"-\");\n\n    return (\n      <div className=\"flex flex-col gap-1\">\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"text-sm font-medium text-gray-700\"\n          >\n            {label}\n          </label>\n        )}\n        <input\n          ref={ref}\n          id={inputId}\n          className={[\n            \"block w-full rounded-md border px-3 py-2 text-sm shadow-sm\",\n            \"placeholder:text-gray-400\",\n            \"focus:outline-none focus:ring-2 focus:ring-offset-0\",\n            error\n              ? \"border-red-400 focus:border-red-500 focus:ring-red-300\"\n              : \"border-gray-300 focus:border-blue-500 focus:ring-blue-200\",\n            \"disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500\",\n            className,\n          ].join(\" \")}\n          {...props}\n        />\n        {error && <p className=\"text-xs text-red-600\">{error}</p>}\n        {hint && !error && <p className=\"text-xs text-gray-500\">{hint}</p>}\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n","import { useState } from \"react\";\n\n/**\n * useState backed by localStorage — syncs value on mount and persists on change.\n */\nexport function useLocalStorage<T>(key: string, initialValue: T) {\n  const [storedValue, setStoredValue] = useState<T>(() => {\n    if (typeof window === \"undefined\") return initialValue;\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? (JSON.parse(item) as T) : initialValue;\n    } catch {\n      return initialValue;\n    }\n  });\n\n  const setValue = (value: T | ((prev: T) => T)) => {\n    try {\n      const valueToStore = value instanceof Function ? value(storedValue) : value;\n      setStoredValue(valueToStore);\n      if (typeof window !== \"undefined\") {\n        window.localStorage.setItem(key, JSON.stringify(valueToStore));\n      }\n    } catch (error) {\n      console.warn(`useLocalStorage: failed to set \"${key}\"`, error);\n    }\n  };\n\n  const remove = () => {\n    try {\n      setStoredValue(initialValue);\n      if (typeof window !== \"undefined\") {\n        window.localStorage.removeItem(key);\n      }\n    } catch (error) {\n      console.warn(`useLocalStorage: failed to remove \"${key}\"`, error);\n    }\n  };\n\n  return [storedValue, setValue, remove] as const;\n}\n","/**\n * Merges class names, filtering out falsy values.\n * Lightweight alternative to clsx for simple use cases.\n */\nexport function cn(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(\" \");\n}\n"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@seekho/ui",
+  "version": "0.1.0",
+  "description": "Seekho internal UI component library",
+  "keywords": ["seekho", "ui", "components", "react", "tailwind"],
+  "author": "Seekho",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.4.27",
+    "postcss": "^8.5.8",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.2",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.2",
+    "storybook": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
+    "@chromatic-com/storybook": "^5.1.1",
+    "@storybook/addon-vitest": "^10.3.3",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-onboarding": "^10.3.3",
+    "vitest": "^4.1.2",
+    "playwright": "^1.58.2",
+    "@vitest/browser-playwright": "^4.1.2",
+    "@vitest/coverage-v8": "^4.1.2"
+  }
+}

package/readme.md

@@ -0,0 +1,118 @@
+# seekho-ui
+
+Seekho internal UI component library — shared components, hooks, and utilities for internal tools built on React + Tailwind.
+
+## What's included
+
+| Export | Description |
+| ------ | ----------- |
+| `<Button>` | Primary, secondary, danger, ghost variants with loading state |
+| `<Badge>` | Status badges (success, warning, danger, info) |
+| `<Input>` | Form input with label, hint, and error state |
+| `useLocalStorage` | useState backed by localStorage |
+| `cn()` | Utility to merge Tailwind class names |
+
+## Development
+
+```bash
+npm install
+npm run storybook     # component playground at http://localhost:6006
+npm run build         # build dist/
+npm run lint          # type check
+```
+
+## Using in a consumer project
+
+### 1. Install
+
+```bash
+# If published to npm:
+npm install seekho-ui
+
+# If using local path during development:
+npm install ../seekho-ui
+```
+
+### 2. Add library source to your Tailwind content paths
+
+In your app's `tailwind.config.js` (or `tailwind.css` for v4):
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/seekho-ui/dist/**/*.js",  // <-- add this
+  ],
+}
+```
+
+### 3. Import and use
+
+```tsx
+import { Button, Badge, Input, useLocalStorage, cn } from "seekho-ui";
+
+export function MyPage() {
+  return (
+    <div>
+      <Button variant="primary" onClick={() => {}}>Save</Button>
+      <Badge variant="success">Active</Badge>
+      <Input label="Email" placeholder="you@seekho.ai" />
+    </div>
+  );
+}
+```
+
+## Publishing
+
+### npm (recommended for internal use)
+
+```bash
+# Login once
+npm login
+
+# Publish
+npm publish
+
+# Or bump version first
+npm version patch   # 0.1.0 → 0.1.1
+npm publish
+```
+
+### GitHub Packages (free private hosting)
+
+1. Add to `package.json`: `"name": "@seekho/ui"`
+2. Create `.npmrc`:
+
+   ```ini
+   @seekho:registry=https://npm.pkg.github.com
+   //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+   ```
+
+3. `npm publish`
+
+## Adding a new component
+
+```text
+src/components/
+└── MyComponent/
+    ├── MyComponent.tsx        # component + types
+    ├── MyComponent.stories.tsx
+    └── index.ts               # re-export
+```
+
+Then add `export * from "./MyComponent"` to [src/components/index.ts](src/components/index.ts).
+
+## Project structure
+
+```text
+seekho-ui/
+├── src/
+│   ├── components/      # React components
+│   ├── hooks/           # Shared React hooks
+│   ├── utils/           # Pure utility functions
+│   └── index.ts         # Single entry point
+├── .storybook/          # Storybook config
+├── tsup.config.ts       # Build config
+└── tailwind.config.js   # Tailwind (for Storybook)
+```