@true-kit/ui 0.1.0 → 0.1.1

package/dist/index.css

@@ -0,0 +1,38 @@
+/* src/components/Button/Button.css */
+.ui-button {
+  border: 0;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-md);
+  border-radius: var(--ui-radius-md);
+  cursor: pointer;
+  transition: background-color 150ms ease, opacity 150ms ease;
+}
+.ui-button--sm {
+  padding: var(--ui-spacing-xs) var(--ui-spacing-sm);
+}
+.ui-button--md {
+  padding: var(--ui-spacing-sm) var(--ui-spacing-md);
+}
+.ui-button--lg {
+  padding: var(--ui-spacing-md) var(--ui-spacing-lg);
+}
+.ui-button--primary {
+  background: var(--ui-color-primary);
+  color: var(--ui-color-primary-foreground);
+}
+.ui-button--primary:hover:not(:disabled) {
+  background: var(--ui-color-primary-hover);
+}
+.ui-button--secondary {
+  background: var(--ui-color-secondary);
+  color: var(--ui-color-secondary-foreground);
+}
+.ui-button--danger {
+  background: var(--ui-color-danger);
+  color: #ffffff;
+}
+.ui-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.css"],"sourcesContent":[".ui-button {\r\n    border: 0;\r\n\r\n    font-family: var(--ui-font-family);\r\n    font-size: var(--ui-font-size-md);\r\n\r\n    border-radius: var(--ui-radius-md);\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n        background-color 150ms ease,\r\n        opacity 150ms ease;\r\n}\r\n\r\n.ui-button--sm {\r\n    padding:\r\n        var(--ui-spacing-xs) var(--ui-spacing-sm);\r\n}\r\n\r\n.ui-button--md {\r\n    padding:\r\n        var(--ui-spacing-sm) var(--ui-spacing-md);\r\n}\r\n\r\n.ui-button--lg {\r\n    padding:\r\n        var(--ui-spacing-md) var(--ui-spacing-lg);\r\n}\r\n\r\n.ui-button--primary {\r\n    background: var(--ui-color-primary);\r\n    color: var(--ui-color-primary-foreground);\r\n}\r\n\r\n.ui-button--primary:hover:not(:disabled) {\r\n    background: var(--ui-color-primary-hover);\r\n}\r\n\r\n.ui-button--secondary {\r\n    background: var(--ui-color-secondary);\r\n    color: var(--ui-color-secondary-foreground);\r\n}\r\n\r\n.ui-button--danger {\r\n    background: var(--ui-color-danger);\r\n    color: #ffffff;\r\n}\r\n\r\n.ui-button:disabled {\r\n    opacity: 0.5;\r\n    cursor: not-allowed;\r\n}"],"mappings":";AAAA,CAAC;AACG,UAAQ;AAER,eAAa,IAAI;AACjB,aAAW,IAAI;AAEf,iBAAe,IAAI;AAEnB,UAAQ;AAER,cACI,iBAAiB,MAAM,IAAI,EAC3B,QAAQ,MAAM;AACtB;AAEA,CAAC;AACG,WACI,IAAI,iBAAiB,IAAI;AACjC;AAEA,CAAC;AACG,WACI,IAAI,iBAAiB,IAAI;AACjC;AAEA,CAAC;AACG,WACI,IAAI,iBAAiB,IAAI;AACjC;AAEA,CAAC;AACG,cAAY,IAAI;AAChB,SAAO,IAAI;AACf;AAEA,CALC,kBAKkB,MAAM,KAAK;AAC1B,cAAY,IAAI;AACpB;AAEA,CAAC;AACG,cAAY,IAAI;AAChB,SAAO,IAAI;AACf;AAEA,CAAC;AACG,cAAY,IAAI;AAChB,SAAO;AACX;AAEA,CAjDC,SAiDS;AACN,WAAS;AACT,UAAQ;AACZ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,69 @@
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+
+interface UITheme {
+    color?: {
+        primary?: string;
+        primaryHover?: string;
+        primaryActive?: string;
+        primaryForeground?: string;
+        secondary?: string;
+        secondaryHover?: string;
+        secondaryForeground?: string;
+        background?: string;
+        foreground?: string;
+        surface?: string;
+        border?: string;
+        muted?: string;
+        success?: string;
+        warning?: string;
+        danger?: string;
+    };
+    radius?: {
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        full?: string;
+    };
+    spacing?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    font?: {
+        family?: string;
+        size?: {
+            sm?: string;
+            md?: string;
+            lg?: string;
+            xl?: string;
+        };
+    };
+    shadow?: {
+        sm?: string;
+        md?: string;
+        lg?: string;
+    };
+}
+
+interface UIProviderProps {
+    children: ReactNode;
+    theme?: UITheme;
+}
+declare function UIProvider({ children, theme, }: UIProviderProps): react.JSX.Element;
+declare function useUITheme(): UITheme;
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: "primary" | "secondary" | "danger";
+    size?: "sm" | "md" | "lg";
+    loading?: boolean;
+    disabled?: boolean;
+}
+
+declare function Button({ children, variant, size, loading, disabled, className, ...props }: ButtonProps): react.JSX.Element;
+
+export { Button, type ButtonProps, UIProvider, type UITheme, useUITheme };

package/dist/index.d.ts

@@ -0,0 +1,69 @@
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+
+interface UITheme {
+    color?: {
+        primary?: string;
+        primaryHover?: string;
+        primaryActive?: string;
+        primaryForeground?: string;
+        secondary?: string;
+        secondaryHover?: string;
+        secondaryForeground?: string;
+        background?: string;
+        foreground?: string;
+        surface?: string;
+        border?: string;
+        muted?: string;
+        success?: string;
+        warning?: string;
+        danger?: string;
+    };
+    radius?: {
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        full?: string;
+    };
+    spacing?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    font?: {
+        family?: string;
+        size?: {
+            sm?: string;
+            md?: string;
+            lg?: string;
+            xl?: string;
+        };
+    };
+    shadow?: {
+        sm?: string;
+        md?: string;
+        lg?: string;
+    };
+}
+
+interface UIProviderProps {
+    children: ReactNode;
+    theme?: UITheme;
+}
+declare function UIProvider({ children, theme, }: UIProviderProps): react.JSX.Element;
+declare function useUITheme(): UITheme;
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: "primary" | "secondary" | "danger";
+    size?: "sm" | "md" | "lg";
+    loading?: boolean;
+    disabled?: boolean;
+}
+
+declare function Button({ children, variant, size, loading, disabled, className, ...props }: ButtonProps): react.JSX.Element;
+
+export { Button, type ButtonProps, UIProvider, type UITheme, useUITheme };

package/dist/index.js

@@ -0,0 +1,178 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  UIProvider: () => UIProvider,
+  useUITheme: () => useUITheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/theme/UIProvider.tsx
+var import_react = require("react");
+
+// src/theme/defaultTheme.ts
+var defaultTheme = {
+  color: {
+    primary: "#2563eb",
+    primaryHover: "#1d4ed8",
+    primaryActive: "#1e40af",
+    primaryForeground: "#ffffff",
+    secondary: "#64748b",
+    secondaryHover: "#475569",
+    secondaryForeground: "#ffffff",
+    background: "#ffffff",
+    foreground: "#0f172a",
+    surface: "#f8fafc",
+    border: "#e2e8f0",
+    muted: "#64748b",
+    success: "#16a34a",
+    warning: "#d97706",
+    danger: "#dc2626"
+  },
+  radius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px"
+  },
+  font: {
+    family: "inherit",
+    size: {
+      sm: "12px",
+      md: "14px",
+      lg: "16px",
+      xl: "20px"
+    }
+  },
+  shadow: {
+    sm: "0 1px 2px rgba(0,0,0,0.05)",
+    md: "0 4px 6px rgba(0,0,0,0.1)",
+    lg: "0 10px 15px rgba(0,0,0,0.1)"
+  }
+};
+
+// src/theme/utils.ts
+var camelToKebab = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+function themeToCSSVariables(theme, prefix = "ui") {
+  const variables = {};
+  const walk = (object, path = []) => {
+    Object.entries(object).forEach(([key, value]) => {
+      if (value === void 0 || value === null) return;
+      const nextPath = [...path, camelToKebab(key)];
+      if (typeof value === "object" && !Array.isArray(value)) {
+        walk(value, nextPath);
+        return;
+      }
+      variables[`--${prefix}-${nextPath.join("-")}`] = String(value);
+    });
+  };
+  walk(theme);
+  return variables;
+}
+function mergeTheme(target, source) {
+  if (!source) {
+    return { ...target };
+  }
+  const result = { ...target };
+  Object.entries(source).forEach(([key, sourceValue]) => {
+    const targetValue = result[key];
+    if (sourceValue !== null && typeof sourceValue === "object" && !Array.isArray(sourceValue)) {
+      result[key] = mergeTheme(
+        targetValue ?? {},
+        sourceValue
+      );
+    } else if (sourceValue !== void 0) {
+      result[key] = sourceValue;
+    }
+  });
+  return result;
+}
+
+// src/theme/UIProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(defaultTheme);
+function UIProvider({
+  children,
+  theme
+}) {
+  const mergedTheme = (0, import_react.useMemo)(
+    () => mergeTheme(defaultTheme, theme),
+    [theme]
+  );
+  const cssVariables = (0, import_react.useMemo)(
+    () => themeToCSSVariables(mergedTheme),
+    [mergedTheme]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: mergedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-ui-provider": "",
+      style: cssVariables,
+      children
+    }
+  ) });
+}
+function useUITheme() {
+  return (0, import_react.useContext)(ThemeContext);
+}
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      ...props,
+      disabled: disabled || loading,
+      className: [
+        "ui-button",
+        `ui-button--${variant}`,
+        `ui-button--${size}`,
+        className
+      ].filter(Boolean).join(" "),
+      children: loading ? "Loading..." : children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  UIProvider,
+  useUITheme
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/theme/UIProvider.tsx","../src/theme/defaultTheme.ts","../src/theme/utils.ts","../src/components/Button/Button.tsx"],"sourcesContent":["export {\r\n    UIProvider,\r\n    useUITheme,\r\n} from \"./theme/UIProvider\";\r\n\r\nexport type {\r\n    UITheme,\r\n} from \"./theme/types\";\r\n\r\nexport {\r\n    Button,\r\n} from \"./components/Button\";\r\n\r\nexport type {\r\n    ButtonProps,\r\n} from \"./components/Button\";","import {\r\n    createContext,\r\n    useContext,\r\n    useMemo,\r\n    type CSSProperties,\r\n    type ReactNode,\r\n} from \"react\";\r\n\r\nimport { defaultTheme } from \"./defaultTheme\";\r\nimport { mergeTheme, themeToCSSVariables } from \"./utils\";\r\nimport type { UITheme } from \"./types\";\r\n\r\ninterface UIProviderProps {\r\n    children: ReactNode;\r\n    theme?: UITheme;\r\n}\r\n\r\nconst ThemeContext = createContext<UITheme>(defaultTheme);\r\n\r\nexport function UIProvider({\r\n    children,\r\n    theme,\r\n}: UIProviderProps) {\r\n    const mergedTheme = useMemo(\r\n        () => mergeTheme(defaultTheme as any, theme),\r\n        [theme]\r\n    );\r\n\r\n    const cssVariables = useMemo(\r\n        () => themeToCSSVariables(mergedTheme),\r\n        [mergedTheme]\r\n    );\r\n\r\n    return (\r\n        <ThemeContext.Provider value={mergedTheme}>\r\n            <div\r\n                data-ui-provider=\"\"\r\n                style={cssVariables as CSSProperties}\r\n            >\r\n                {children}\r\n            </div>\r\n        </ThemeContext.Provider>\r\n    );\r\n}\r\n\r\nexport function useUITheme() {\r\n    return useContext(ThemeContext);\r\n}","import type { UITheme } from \"./types\";\r\n\r\nexport const defaultTheme: UITheme = {\r\n    color: {\r\n        primary: \"#2563eb\",\r\n        primaryHover: \"#1d4ed8\",\r\n        primaryActive: \"#1e40af\",\r\n        primaryForeground: \"#ffffff\",\r\n\r\n        secondary: \"#64748b\",\r\n        secondaryHover: \"#475569\",\r\n        secondaryForeground: \"#ffffff\",\r\n\r\n        background: \"#ffffff\",\r\n        foreground: \"#0f172a\",\r\n        surface: \"#f8fafc\",\r\n        border: \"#e2e8f0\",\r\n        muted: \"#64748b\",\r\n\r\n        success: \"#16a34a\",\r\n        warning: \"#d97706\",\r\n        danger: \"#dc2626\",\r\n    },\r\n\r\n    radius: {\r\n        sm: \"4px\",\r\n        md: \"8px\",\r\n        lg: \"12px\",\r\n        xl: \"16px\",\r\n        full: \"9999px\",\r\n    },\r\n\r\n    spacing: {\r\n        xs: \"4px\",\r\n        sm: \"8px\",\r\n        md: \"16px\",\r\n        lg: \"24px\",\r\n        xl: \"32px\",\r\n    },\r\n\r\n    font: {\r\n        family: \"inherit\",\r\n\r\n        size: {\r\n            sm: \"12px\",\r\n            md: \"14px\",\r\n            lg: \"16px\",\r\n            xl: \"20px\",\r\n        },\r\n    },\r\n\r\n    shadow: {\r\n        sm: \"0 1px 2px rgba(0,0,0,0.05)\",\r\n        md: \"0 4px 6px rgba(0,0,0,0.1)\",\r\n        lg: \"0 10px 15px rgba(0,0,0,0.1)\",\r\n    },\r\n};","import type { CSSProperties } from \"react\";\r\nimport type { UITheme } from \"./types\";\r\n\r\ntype CSSVariables = CSSProperties & Record<`--ui-${string}`, string>;\r\n\r\nconst camelToKebab = (value: string) =>\r\n    value.replace(/([a-z0-9])([A-Z])/g, \"$1-$2\").toLowerCase();\r\n\r\nexport function themeToCSSVariables(\r\n    theme: UITheme,\r\n    prefix = \"ui\"\r\n): CSSVariables {\r\n    const variables: Record<string, string> = {};\r\n\r\n    const walk = (\r\n        object: Record<string, unknown>,\r\n        path: string[] = []\r\n    ) => {\r\n        Object.entries(object).forEach(([key, value]) => {\r\n            if (value === undefined || value === null) return;\r\n\r\n            const nextPath = [...path, camelToKebab(key)];\r\n\r\n            if (typeof value === \"object\" && !Array.isArray(value)) {\r\n                walk(value as Record<string, unknown>, nextPath);\r\n                return;\r\n            }\r\n\r\n            variables[\r\n                `--${prefix}-${nextPath.join(\"-\")}`\r\n            ] = String(value);\r\n        });\r\n    };\r\n\r\n    walk(theme as Record<string, unknown>);\r\n\r\n    return variables as CSSVariables;\r\n}\r\n\r\nexport function mergeTheme<T extends Record<string, unknown>>(\r\n    target: T,\r\n    source?: Partial<T>\r\n): T {\r\n    if (!source) {\r\n        return { ...target };\r\n    }\r\n\r\n    const result: Record<string, unknown> = { ...target };\r\n\r\n    Object.entries(source).forEach(([key, sourceValue]) => {\r\n        const targetValue = result[key];\r\n\r\n        if (\r\n            sourceValue !== null &&\r\n            typeof sourceValue === \"object\" &&\r\n            !Array.isArray(sourceValue)\r\n        ) {\r\n            result[key] = mergeTheme(\r\n                (targetValue ?? {}) as Record<string, unknown>,\r\n                sourceValue as Record<string, unknown>\r\n            );\r\n        } else if (sourceValue !== undefined) {\r\n            result[key] = sourceValue;\r\n        }\r\n    });\r\n\r\n    return result as T;\r\n}","import type { ButtonProps } from \"./Button.types\";\r\n\r\nimport \"./Button.css\";\r\n\r\nexport function Button({\r\n    children,\r\n    variant = \"primary\",\r\n    size = \"md\",\r\n    loading = false,\r\n    disabled,\r\n    className = \"\",\r\n    ...props\r\n}: ButtonProps) {\r\n    return (\r\n        <button\r\n            {...props}\r\n            disabled={disabled || loading}\r\n            className={[\r\n                \"ui-button\",\r\n                `ui-button--${variant}`,\r\n                `ui-button--${size}`,\r\n                className,\r\n            ]\r\n                .filter(Boolean)\r\n                .join(\" \")}\r\n        >\r\n            {loading ? \"Loading...\" : children}\r\n        </button>\r\n    );\r\n}"],"mappings":"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","names":["import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,153 @@
+// src/theme/UIProvider.tsx
+import {
+  createContext,
+  useContext,
+  useMemo
+} from "react";
+
+// src/theme/defaultTheme.ts
+var defaultTheme = {
+  color: {
+    primary: "#2563eb",
+    primaryHover: "#1d4ed8",
+    primaryActive: "#1e40af",
+    primaryForeground: "#ffffff",
+    secondary: "#64748b",
+    secondaryHover: "#475569",
+    secondaryForeground: "#ffffff",
+    background: "#ffffff",
+    foreground: "#0f172a",
+    surface: "#f8fafc",
+    border: "#e2e8f0",
+    muted: "#64748b",
+    success: "#16a34a",
+    warning: "#d97706",
+    danger: "#dc2626"
+  },
+  radius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px"
+  },
+  font: {
+    family: "inherit",
+    size: {
+      sm: "12px",
+      md: "14px",
+      lg: "16px",
+      xl: "20px"
+    }
+  },
+  shadow: {
+    sm: "0 1px 2px rgba(0,0,0,0.05)",
+    md: "0 4px 6px rgba(0,0,0,0.1)",
+    lg: "0 10px 15px rgba(0,0,0,0.1)"
+  }
+};
+
+// src/theme/utils.ts
+var camelToKebab = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+function themeToCSSVariables(theme, prefix = "ui") {
+  const variables = {};
+  const walk = (object, path = []) => {
+    Object.entries(object).forEach(([key, value]) => {
+      if (value === void 0 || value === null) return;
+      const nextPath = [...path, camelToKebab(key)];
+      if (typeof value === "object" && !Array.isArray(value)) {
+        walk(value, nextPath);
+        return;
+      }
+      variables[`--${prefix}-${nextPath.join("-")}`] = String(value);
+    });
+  };
+  walk(theme);
+  return variables;
+}
+function mergeTheme(target, source) {
+  if (!source) {
+    return { ...target };
+  }
+  const result = { ...target };
+  Object.entries(source).forEach(([key, sourceValue]) => {
+    const targetValue = result[key];
+    if (sourceValue !== null && typeof sourceValue === "object" && !Array.isArray(sourceValue)) {
+      result[key] = mergeTheme(
+        targetValue ?? {},
+        sourceValue
+      );
+    } else if (sourceValue !== void 0) {
+      result[key] = sourceValue;
+    }
+  });
+  return result;
+}
+
+// src/theme/UIProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(defaultTheme);
+function UIProvider({
+  children,
+  theme
+}) {
+  const mergedTheme = useMemo(
+    () => mergeTheme(defaultTheme, theme),
+    [theme]
+  );
+  const cssVariables = useMemo(
+    () => themeToCSSVariables(mergedTheme),
+    [mergedTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: mergedTheme, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-ui-provider": "",
+      style: cssVariables,
+      children
+    }
+  ) });
+}
+function useUITheme() {
+  return useContext(ThemeContext);
+}
+
+// src/components/Button/Button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      ...props,
+      disabled: disabled || loading,
+      className: [
+        "ui-button",
+        `ui-button--${variant}`,
+        `ui-button--${size}`,
+        className
+      ].filter(Boolean).join(" "),
+      children: loading ? "Loading..." : children
+    }
+  );
+}
+export {
+  Button,
+  UIProvider,
+  useUITheme
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/UIProvider.tsx","../src/theme/defaultTheme.ts","../src/theme/utils.ts","../src/components/Button/Button.tsx"],"sourcesContent":["import {\r\n    createContext,\r\n    useContext,\r\n    useMemo,\r\n    type CSSProperties,\r\n    type ReactNode,\r\n} from \"react\";\r\n\r\nimport { defaultTheme } from \"./defaultTheme\";\r\nimport { mergeTheme, themeToCSSVariables } from \"./utils\";\r\nimport type { UITheme } from \"./types\";\r\n\r\ninterface UIProviderProps {\r\n    children: ReactNode;\r\n    theme?: UITheme;\r\n}\r\n\r\nconst ThemeContext = createContext<UITheme>(defaultTheme);\r\n\r\nexport function UIProvider({\r\n    children,\r\n    theme,\r\n}: UIProviderProps) {\r\n    const mergedTheme = useMemo(\r\n        () => mergeTheme(defaultTheme as any, theme),\r\n        [theme]\r\n    );\r\n\r\n    const cssVariables = useMemo(\r\n        () => themeToCSSVariables(mergedTheme),\r\n        [mergedTheme]\r\n    );\r\n\r\n    return (\r\n        <ThemeContext.Provider value={mergedTheme}>\r\n            <div\r\n                data-ui-provider=\"\"\r\n                style={cssVariables as CSSProperties}\r\n            >\r\n                {children}\r\n            </div>\r\n        </ThemeContext.Provider>\r\n    );\r\n}\r\n\r\nexport function useUITheme() {\r\n    return useContext(ThemeContext);\r\n}","import type { UITheme } from \"./types\";\r\n\r\nexport const defaultTheme: UITheme = {\r\n    color: {\r\n        primary: \"#2563eb\",\r\n        primaryHover: \"#1d4ed8\",\r\n        primaryActive: \"#1e40af\",\r\n        primaryForeground: \"#ffffff\",\r\n\r\n        secondary: \"#64748b\",\r\n        secondaryHover: \"#475569\",\r\n        secondaryForeground: \"#ffffff\",\r\n\r\n        background: \"#ffffff\",\r\n        foreground: \"#0f172a\",\r\n        surface: \"#f8fafc\",\r\n        border: \"#e2e8f0\",\r\n        muted: \"#64748b\",\r\n\r\n        success: \"#16a34a\",\r\n        warning: \"#d97706\",\r\n        danger: \"#dc2626\",\r\n    },\r\n\r\n    radius: {\r\n        sm: \"4px\",\r\n        md: \"8px\",\r\n        lg: \"12px\",\r\n        xl: \"16px\",\r\n        full: \"9999px\",\r\n    },\r\n\r\n    spacing: {\r\n        xs: \"4px\",\r\n        sm: \"8px\",\r\n        md: \"16px\",\r\n        lg: \"24px\",\r\n        xl: \"32px\",\r\n    },\r\n\r\n    font: {\r\n        family: \"inherit\",\r\n\r\n        size: {\r\n            sm: \"12px\",\r\n            md: \"14px\",\r\n            lg: \"16px\",\r\n            xl: \"20px\",\r\n        },\r\n    },\r\n\r\n    shadow: {\r\n        sm: \"0 1px 2px rgba(0,0,0,0.05)\",\r\n        md: \"0 4px 6px rgba(0,0,0,0.1)\",\r\n        lg: \"0 10px 15px rgba(0,0,0,0.1)\",\r\n    },\r\n};","import type { CSSProperties } from \"react\";\r\nimport type { UITheme } from \"./types\";\r\n\r\ntype CSSVariables = CSSProperties & Record<`--ui-${string}`, string>;\r\n\r\nconst camelToKebab = (value: string) =>\r\n    value.replace(/([a-z0-9])([A-Z])/g, \"$1-$2\").toLowerCase();\r\n\r\nexport function themeToCSSVariables(\r\n    theme: UITheme,\r\n    prefix = \"ui\"\r\n): CSSVariables {\r\n    const variables: Record<string, string> = {};\r\n\r\n    const walk = (\r\n        object: Record<string, unknown>,\r\n        path: string[] = []\r\n    ) => {\r\n        Object.entries(object).forEach(([key, value]) => {\r\n            if (value === undefined || value === null) return;\r\n\r\n            const nextPath = [...path, camelToKebab(key)];\r\n\r\n            if (typeof value === \"object\" && !Array.isArray(value)) {\r\n                walk(value as Record<string, unknown>, nextPath);\r\n                return;\r\n            }\r\n\r\n            variables[\r\n                `--${prefix}-${nextPath.join(\"-\")}`\r\n            ] = String(value);\r\n        });\r\n    };\r\n\r\n    walk(theme as Record<string, unknown>);\r\n\r\n    return variables as CSSVariables;\r\n}\r\n\r\nexport function mergeTheme<T extends Record<string, unknown>>(\r\n    target: T,\r\n    source?: Partial<T>\r\n): T {\r\n    if (!source) {\r\n        return { ...target };\r\n    }\r\n\r\n    const result: Record<string, unknown> = { ...target };\r\n\r\n    Object.entries(source).forEach(([key, sourceValue]) => {\r\n        const targetValue = result[key];\r\n\r\n        if (\r\n            sourceValue !== null &&\r\n            typeof sourceValue === \"object\" &&\r\n            !Array.isArray(sourceValue)\r\n        ) {\r\n            result[key] = mergeTheme(\r\n                (targetValue ?? {}) as Record<string, unknown>,\r\n                sourceValue as Record<string, unknown>\r\n            );\r\n        } else if (sourceValue !== undefined) {\r\n            result[key] = sourceValue;\r\n        }\r\n    });\r\n\r\n    return result as T;\r\n}","import type { ButtonProps } from \"./Button.types\";\r\n\r\nimport \"./Button.css\";\r\n\r\nexport function Button({\r\n    children,\r\n    variant = \"primary\",\r\n    size = \"md\",\r\n    loading = false,\r\n    disabled,\r\n    className = \"\",\r\n    ...props\r\n}: ButtonProps) {\r\n    return (\r\n        <button\r\n            {...props}\r\n            disabled={disabled || loading}\r\n            className={[\r\n                \"ui-button\",\r\n                `ui-button--${variant}`,\r\n                `ui-button--${size}`,\r\n                className,\r\n            ]\r\n                .filter(Boolean)\r\n                .join(\" \")}\r\n        >\r\n            {loading ? \"Loading...\" : children}\r\n        </button>\r\n    );\r\n}"],"mappings":"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","names":["jsx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-kit/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Reusable React UI components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -32,4 +32,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}