@true-kit/ui 0.1.3 → 0.1.6

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes } from 'react';
+import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
+import { FieldValues, Control, FieldPath } from 'react-hook-form';
 
 interface UITheme {
     color?: {
@@ -66,4 +67,21 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 declare function Button({ children, variant, size, loading, disabled, className, ...props }: ButtonProps): react.JSX.Element;
 
-export { Button, type ButtonProps, UIProvider, type UITheme, useUITheme };
+interface InputControllerClasses {
+    root?: string;
+    label?: string;
+    input?: string;
+    error?: string;
+}
+interface InputControllerProps<TFieldValues extends FieldValues = FieldValues> extends Omit<InputHTMLAttributes<HTMLInputElement>, "name"> {
+    label?: ReactNode;
+    placeholder?: string;
+    control: Control<TFieldValues>;
+    name: FieldPath<TFieldValues>;
+    classes?: InputControllerClasses;
+    showError?: boolean;
+}
+
+declare function InputController<TFieldValues extends Record<string, unknown>>({ label, placeholder, control, name, classes, showError, id, ...props }: InputControllerProps<TFieldValues>): react.JSX.Element;
+
+export { Button, type ButtonProps, InputController, type InputControllerClasses, type InputControllerProps, UIProvider, type UITheme, useUITheme };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes } from 'react';
+import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
+import { FieldValues, Control, FieldPath } from 'react-hook-form';
 
 interface UITheme {
     color?: {
@@ -66,4 +67,21 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 declare function Button({ children, variant, size, loading, disabled, className, ...props }: ButtonProps): react.JSX.Element;
 
-export { Button, type ButtonProps, UIProvider, type UITheme, useUITheme };
+interface InputControllerClasses {
+    root?: string;
+    label?: string;
+    input?: string;
+    error?: string;
+}
+interface InputControllerProps<TFieldValues extends FieldValues = FieldValues> extends Omit<InputHTMLAttributes<HTMLInputElement>, "name"> {
+    label?: ReactNode;
+    placeholder?: string;
+    control: Control<TFieldValues>;
+    name: FieldPath<TFieldValues>;
+    classes?: InputControllerClasses;
+    showError?: boolean;
+}
+
+declare function InputController<TFieldValues extends Record<string, unknown>>({ label, placeholder, control, name, classes, showError, id, ...props }: InputControllerProps<TFieldValues>): react.JSX.Element;
+
+export { Button, type ButtonProps, InputController, type InputControllerClasses, type InputControllerProps, UIProvider, type UITheme, useUITheme };

package/dist/index.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  InputController: () => InputController,
   UIProvider: () => UIProvider,
   useUITheme: () => useUITheme
 });
@@ -143,6 +145,31 @@ function useUITheme() {
   return (0, import_react.useContext)(ThemeContext);
 }
 
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/components/Button/Button.css
+styleInject(".ui-button {\n  border: 0;\n  font-family: var(--ui-font-family);\n  font-size: var(--ui-font-size-md);\n  border-radius: var(--ui-radius-md);\n  cursor: pointer;\n  transition: background-color 150ms ease, opacity 150ms ease;\n}\n.ui-button--sm {\n  padding: var(--ui-spacing-xs) var(--ui-spacing-sm);\n}\n.ui-button--md {\n  padding: var(--ui-spacing-sm) var(--ui-spacing-md);\n}\n.ui-button--lg {\n  padding: var(--ui-spacing-md) var(--ui-spacing-lg);\n}\n.ui-button--primary {\n  background: var(--ui-color-primary);\n  color: var(--ui-color-primary-foreground);\n}\n.ui-button--primary:hover:not(:disabled) {\n  background: var(--ui-color-primary-hover);\n}\n.ui-button--secondary {\n  background: var(--ui-color-secondary);\n  color: var(--ui-color-secondary-foreground);\n}\n.ui-button--danger {\n  background: var(--ui-color-danger);\n  color: #ffffff;\n}\n.ui-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n");
+
 // src/components/Button/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Button({
@@ -169,9 +196,99 @@ function Button({
     }
   );
 }
+
+// src/components/InputController/Controller.tsx
+var import_react_hook_form = require("react-hook-form");
+
+// src/components/InputController/Controller.css
+styleInject(".ui-input-controller {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ui-spacing-xs);\n}\n.ui-input-controller__label {\n  font-family: var(--ui-font-family);\n  font-size: var(--ui-font-size-sm);\n  color: var(--ui-color-foreground);\n  cursor: pointer;\n}\n.ui-input-controller__input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--ui-spacing-sm) var(--ui-spacing-md);\n  font-family: var(--ui-font-family);\n  font-size: var(--ui-font-size-md);\n  color: var(--ui-color-foreground);\n  background: var(--ui-color-background);\n  border: 1px solid var(--ui-color-border);\n  border-radius: var(--ui-radius-md);\n  outline: none;\n  transition:\n    border-color 150ms ease,\n    box-shadow 150ms ease,\n    opacity 150ms ease;\n}\n.ui-input-controller__input::placeholder {\n  color: var(--ui-color-muted-foreground);\n}\n.ui-input-controller__input:hover:not(:disabled) {\n  border-color: var(--ui-color-primary);\n}\n.ui-input-controller__input:focus {\n  border-color: var(--ui-color-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-primary) 15%, transparent);\n}\n.ui-input-controller__input--error {\n  border-color: var(--ui-color-danger);\n}\n.ui-input-controller__input--error:focus {\n  border-color: var(--ui-color-danger);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-danger) 15%, transparent);\n}\n.ui-input-controller__input--disabled,\n.ui-input-controller__input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ui-input-controller__error {\n  font-family: var(--ui-font-family);\n  font-size: var(--ui-font-size-sm);\n  color: var(--ui-color-danger);\n}\n");
+
+// src/components/InputController/Controller.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function InputController({
+  label,
+  placeholder,
+  control,
+  name,
+  classes = {},
+  showError = true,
+  id,
+  ...props
+}) {
+  const inputId = id ?? String(name);
+  const errorId = `${inputId}-error`;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_hook_form.Controller,
+    {
+      name,
+      control,
+      render: ({
+        field,
+        fieldState
+      }) => {
+        const hasError = Boolean(fieldState.error);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: [
+              "ui-input-controller",
+              classes.root
+            ].filter(Boolean).join(" "),
+            children: [
+              label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "label",
+                {
+                  htmlFor: inputId,
+                  className: [
+                    "ui-input-controller__label",
+                    classes.label
+                  ].filter(Boolean).join(" "),
+                  children: label
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "input",
+                {
+                  ...props,
+                  ...field,
+                  id: inputId,
+                  name: field.name,
+                  placeholder,
+                  value: field.value ?? "",
+                  "aria-invalid": hasError,
+                  "aria-describedby": hasError && showError ? errorId : void 0,
+                  disabled: props.disabled || field.disabled,
+                  className: [
+                    "ui-input-controller__input",
+                    hasError ? "ui-input-controller__input--error" : "",
+                    props.disabled ? "ui-input-controller__input--disabled" : "",
+                    classes.input
+                  ].filter(Boolean).join(" ")
+                }
+              ),
+              hasError && showError && fieldState.error?.message && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  id: errorId,
+                  role: "alert",
+                  className: [
+                    "ui-input-controller__error",
+                    classes.error
+                  ].filter(Boolean).join(" "),
+                  children: fieldState.error.message
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  InputController,
   UIProvider,
   useUITheme
 });

package/dist/index.js.map

@@ -1 +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\";","\"use client\";\r\nimport {\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"]}
+{"version":3,"sources":["../src/index.ts","../src/theme/UIProvider.tsx","../src/theme/defaultTheme.ts","../src/theme/utils.ts","#style-inject:#style-inject","../src/components/Button/Button.css","../src/components/Button/Button.tsx","../src/components/InputController/Controller.tsx","../src/components/InputController/Controller.css"],"sourcesContent":["\"use client\";\r\n\r\n// UI Provider\r\nexport { UIProvider, useUITheme } from \"./theme/UIProvider\";\r\nexport type { UITheme } from \"./theme/types\";\r\n\r\n// Buttons\r\nexport { Button } from \"./components/Button\";\r\nexport type { ButtonProps } from \"./components/Button\";\r\n\r\n// Controllers\r\nexport { InputController } from \"./components/InputController\"\r\nexport type { InputControllerClasses, InputControllerProps } from \"./components/InputController\"","\"use client\";\r\nimport {\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}","\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';styleInject(\".ui-button {\\n  border: 0;\\n  font-family: var(--ui-font-family);\\n  font-size: var(--ui-font-size-md);\\n  border-radius: var(--ui-radius-md);\\n  cursor: pointer;\\n  transition: background-color 150ms ease, opacity 150ms ease;\\n}\\n.ui-button--sm {\\n  padding: var(--ui-spacing-xs) var(--ui-spacing-sm);\\n}\\n.ui-button--md {\\n  padding: var(--ui-spacing-sm) var(--ui-spacing-md);\\n}\\n.ui-button--lg {\\n  padding: var(--ui-spacing-md) var(--ui-spacing-lg);\\n}\\n.ui-button--primary {\\n  background: var(--ui-color-primary);\\n  color: var(--ui-color-primary-foreground);\\n}\\n.ui-button--primary:hover:not(:disabled) {\\n  background: var(--ui-color-primary-hover);\\n}\\n.ui-button--secondary {\\n  background: var(--ui-color-secondary);\\n  color: var(--ui-color-secondary-foreground);\\n}\\n.ui-button--danger {\\n  background: var(--ui-color-danger);\\n  color: #ffffff;\\n}\\n.ui-button:disabled {\\n  opacity: 0.5;\\n  cursor: not-allowed;\\n}\\n\")","import type { ButtonProps } from \"./Button.types\";\r\nimport \"./Button.css\";\r\n\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}","\"use client\";\r\n\r\nimport { Controller } from \"react-hook-form\";\r\n\r\nimport type { InputControllerProps } from \"./Controller.types\";\r\n\r\nimport \"./Controller.css\";\r\n\r\nexport function InputController<\r\n    TFieldValues extends Record<string, unknown>,\r\n>({\r\n    label,\r\n    placeholder,\r\n    control,\r\n    name,\r\n    classes = {},\r\n    showError = true,\r\n    id,\r\n    ...props\r\n}: InputControllerProps<TFieldValues>) {\r\n    const inputId = id ?? String(name);\r\n    const errorId = `${inputId}-error`;\r\n\r\n    return (\r\n        <Controller\r\n            name={name}\r\n            control={control}\r\n            render={({\r\n                field,\r\n                fieldState,\r\n            }) => {\r\n                const hasError = Boolean(fieldState.error);\r\n\r\n                return (\r\n                    <div\r\n                        className={[\r\n                            \"ui-input-controller\",\r\n                            classes.root,\r\n                        ]\r\n                            .filter(Boolean)\r\n                            .join(\" \")}\r\n                    >\r\n                        {label && (\r\n                            <label\r\n                                htmlFor={inputId}\r\n                                className={[\r\n                                    \"ui-input-controller__label\",\r\n                                    classes.label,\r\n                                ]\r\n                                    .filter(Boolean)\r\n                                    .join(\" \")}\r\n                            >\r\n                                {label}\r\n                            </label>\r\n                        )}\r\n\r\n                        <input\r\n                            {...props}\r\n                            {...field}\r\n                            id={inputId}\r\n                            name={field.name}\r\n                            placeholder={placeholder}\r\n                            value={field.value ?? \"\" as any}\r\n                            aria-invalid={\r\n                                hasError\r\n                            }\r\n                            aria-describedby={\r\n                                hasError && showError\r\n                                    ? errorId\r\n                                    : undefined\r\n                            }\r\n                            disabled={\r\n                                props.disabled ||\r\n                                field.disabled\r\n                            }\r\n                            className={[\r\n                                \"ui-input-controller__input\",\r\n                                hasError\r\n                                    ? \"ui-input-controller__input--error\"\r\n                                    : \"\",\r\n                                props.disabled\r\n                                    ? \"ui-input-controller__input--disabled\"\r\n                                    : \"\",\r\n                                classes.input,\r\n                            ]\r\n                                .filter(Boolean)\r\n                                .join(\" \")}\r\n                        />\r\n\r\n                        {hasError &&\r\n                            showError &&\r\n                            fieldState.error?.message && (\r\n                                <span\r\n                                    id={errorId}\r\n                                    role=\"alert\"\r\n                                    className={[\r\n                                        \"ui-input-controller__error\",\r\n                                        classes.error,\r\n                                    ]\r\n                                        .filter(Boolean)\r\n                                        .join(\" \")}\r\n                                >\r\n                                    {\r\n                                        fieldState\r\n                                            .error\r\n                                            .message\r\n                                    }\r\n                                </span>\r\n                            )}\r\n                    </div>\r\n                );\r\n            }}\r\n        />\r\n    );\r\n}","import styleInject from '#style-inject';styleInject(\".ui-input-controller {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--ui-spacing-xs);\\n}\\n.ui-input-controller__label {\\n  font-family: var(--ui-font-family);\\n  font-size: var(--ui-font-size-sm);\\n  color: var(--ui-color-foreground);\\n  cursor: pointer;\\n}\\n.ui-input-controller__input {\\n  width: 100%;\\n  box-sizing: border-box;\\n  padding: var(--ui-spacing-sm) var(--ui-spacing-md);\\n  font-family: var(--ui-font-family);\\n  font-size: var(--ui-font-size-md);\\n  color: var(--ui-color-foreground);\\n  background: var(--ui-color-background);\\n  border: 1px solid var(--ui-color-border);\\n  border-radius: var(--ui-radius-md);\\n  outline: none;\\n  transition:\\n    border-color 150ms ease,\\n    box-shadow 150ms ease,\\n    opacity 150ms ease;\\n}\\n.ui-input-controller__input::placeholder {\\n  color: var(--ui-color-muted-foreground);\\n}\\n.ui-input-controller__input:hover:not(:disabled) {\\n  border-color: var(--ui-color-primary);\\n}\\n.ui-input-controller__input:focus {\\n  border-color: var(--ui-color-primary);\\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-primary) 15%, transparent);\\n}\\n.ui-input-controller__input--error {\\n  border-color: var(--ui-color-danger);\\n}\\n.ui-input-controller__input--error:focus {\\n  border-color: var(--ui-color-danger);\\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-danger) 15%, transparent);\\n}\\n.ui-input-controller__input--disabled,\\n.ui-input-controller__input:disabled {\\n  opacity: 0.5;\\n  cursor: not-allowed;\\n}\\n.ui-input-controller__error {\\n  font-family: var(--ui-font-family);\\n  font-size: var(--ui-font-size-sm);\\n  color: var(--ui-color-danger);\\n}\\n\")"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.mjs

@@ -1,3 +1,5 @@
+"use client";
+
 // src/theme/UIProvider.tsx
 import {
   createContext,
@@ -119,6 +121,31 @@ function useUITheme() {
   return useContext(ThemeContext);
 }
 
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/components/Button/Button.css
+styleInject(".ui-button {\n  border: 0;\n  font-family: var(--ui-font-family);\n  font-size: var(--ui-font-size-md);\n  border-radius: var(--ui-radius-md);\n  cursor: pointer;\n  transition: background-color 150ms ease, opacity 150ms ease;\n}\n.ui-button--sm {\n  padding: var(--ui-spacing-xs) var(--ui-spacing-sm);\n}\n.ui-button--md {\n  padding: var(--ui-spacing-sm) var(--ui-spacing-md);\n}\n.ui-button--lg {\n  padding: var(--ui-spacing-md) var(--ui-spacing-lg);\n}\n.ui-button--primary {\n  background: var(--ui-color-primary);\n  color: var(--ui-color-primary-foreground);\n}\n.ui-button--primary:hover:not(:disabled) {\n  background: var(--ui-color-primary-hover);\n}\n.ui-button--secondary {\n  background: var(--ui-color-secondary);\n  color: var(--ui-color-secondary-foreground);\n}\n.ui-button--danger {\n  background: var(--ui-color-danger);\n  color: #ffffff;\n}\n.ui-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n");
+
 // src/components/Button/Button.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 function Button({
@@ -145,8 +172,98 @@ function Button({
     }
   );
 }
+
+// src/components/InputController/Controller.tsx
+import { Controller } from "react-hook-form";
+
+// src/components/InputController/Controller.css
+styleInject(".ui-input-controller {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ui-spacing-xs);\n}\n.ui-input-controller__label {\n  font-family: var(--ui-font-family);\n  font-size: var(--ui-font-size-sm);\n  color: var(--ui-color-foreground);\n  cursor: pointer;\n}\n.ui-input-controller__input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--ui-spacing-sm) var(--ui-spacing-md);\n  font-family: var(--ui-font-family);\n  font-size: var(--ui-font-size-md);\n  color: var(--ui-color-foreground);\n  background: var(--ui-color-background);\n  border: 1px solid var(--ui-color-border);\n  border-radius: var(--ui-radius-md);\n  outline: none;\n  transition:\n    border-color 150ms ease,\n    box-shadow 150ms ease,\n    opacity 150ms ease;\n}\n.ui-input-controller__input::placeholder {\n  color: var(--ui-color-muted-foreground);\n}\n.ui-input-controller__input:hover:not(:disabled) {\n  border-color: var(--ui-color-primary);\n}\n.ui-input-controller__input:focus {\n  border-color: var(--ui-color-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-primary) 15%, transparent);\n}\n.ui-input-controller__input--error {\n  border-color: var(--ui-color-danger);\n}\n.ui-input-controller__input--error:focus {\n  border-color: var(--ui-color-danger);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-danger) 15%, transparent);\n}\n.ui-input-controller__input--disabled,\n.ui-input-controller__input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ui-input-controller__error {\n  font-family: var(--ui-font-family);\n  font-size: var(--ui-font-size-sm);\n  color: var(--ui-color-danger);\n}\n");
+
+// src/components/InputController/Controller.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function InputController({
+  label,
+  placeholder,
+  control,
+  name,
+  classes = {},
+  showError = true,
+  id,
+  ...props
+}) {
+  const inputId = id ?? String(name);
+  const errorId = `${inputId}-error`;
+  return /* @__PURE__ */ jsx3(
+    Controller,
+    {
+      name,
+      control,
+      render: ({
+        field,
+        fieldState
+      }) => {
+        const hasError = Boolean(fieldState.error);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: [
+              "ui-input-controller",
+              classes.root
+            ].filter(Boolean).join(" "),
+            children: [
+              label && /* @__PURE__ */ jsx3(
+                "label",
+                {
+                  htmlFor: inputId,
+                  className: [
+                    "ui-input-controller__label",
+                    classes.label
+                  ].filter(Boolean).join(" "),
+                  children: label
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  ...props,
+                  ...field,
+                  id: inputId,
+                  name: field.name,
+                  placeholder,
+                  value: field.value ?? "",
+                  "aria-invalid": hasError,
+                  "aria-describedby": hasError && showError ? errorId : void 0,
+                  disabled: props.disabled || field.disabled,
+                  className: [
+                    "ui-input-controller__input",
+                    hasError ? "ui-input-controller__input--error" : "",
+                    props.disabled ? "ui-input-controller__input--disabled" : "",
+                    classes.input
+                  ].filter(Boolean).join(" ")
+                }
+              ),
+              hasError && showError && fieldState.error?.message && /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  id: errorId,
+                  role: "alert",
+                  className: [
+                    "ui-input-controller__error",
+                    classes.error
+                  ].filter(Boolean).join(" "),
+                  children: fieldState.error.message
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+}
 export {
   Button,
+  InputController,
   UIProvider,
   useUITheme
 };

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme/UIProvider.tsx","../src/theme/defaultTheme.ts","../src/theme/utils.ts","../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\r\nimport {\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"]}
+{"version":3,"sources":["../src/theme/UIProvider.tsx","../src/theme/defaultTheme.ts","../src/theme/utils.ts","#style-inject:#style-inject","../src/components/Button/Button.css","../src/components/Button/Button.tsx","../src/components/InputController/Controller.tsx","../src/components/InputController/Controller.css"],"sourcesContent":["\"use client\";\r\nimport {\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}","\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';styleInject(\".ui-button {\\n  border: 0;\\n  font-family: var(--ui-font-family);\\n  font-size: var(--ui-font-size-md);\\n  border-radius: var(--ui-radius-md);\\n  cursor: pointer;\\n  transition: background-color 150ms ease, opacity 150ms ease;\\n}\\n.ui-button--sm {\\n  padding: var(--ui-spacing-xs) var(--ui-spacing-sm);\\n}\\n.ui-button--md {\\n  padding: var(--ui-spacing-sm) var(--ui-spacing-md);\\n}\\n.ui-button--lg {\\n  padding: var(--ui-spacing-md) var(--ui-spacing-lg);\\n}\\n.ui-button--primary {\\n  background: var(--ui-color-primary);\\n  color: var(--ui-color-primary-foreground);\\n}\\n.ui-button--primary:hover:not(:disabled) {\\n  background: var(--ui-color-primary-hover);\\n}\\n.ui-button--secondary {\\n  background: var(--ui-color-secondary);\\n  color: var(--ui-color-secondary-foreground);\\n}\\n.ui-button--danger {\\n  background: var(--ui-color-danger);\\n  color: #ffffff;\\n}\\n.ui-button:disabled {\\n  opacity: 0.5;\\n  cursor: not-allowed;\\n}\\n\")","import type { ButtonProps } from \"./Button.types\";\r\nimport \"./Button.css\";\r\n\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}","\"use client\";\r\n\r\nimport { Controller } from \"react-hook-form\";\r\n\r\nimport type { InputControllerProps } from \"./Controller.types\";\r\n\r\nimport \"./Controller.css\";\r\n\r\nexport function InputController<\r\n    TFieldValues extends Record<string, unknown>,\r\n>({\r\n    label,\r\n    placeholder,\r\n    control,\r\n    name,\r\n    classes = {},\r\n    showError = true,\r\n    id,\r\n    ...props\r\n}: InputControllerProps<TFieldValues>) {\r\n    const inputId = id ?? String(name);\r\n    const errorId = `${inputId}-error`;\r\n\r\n    return (\r\n        <Controller\r\n            name={name}\r\n            control={control}\r\n            render={({\r\n                field,\r\n                fieldState,\r\n            }) => {\r\n                const hasError = Boolean(fieldState.error);\r\n\r\n                return (\r\n                    <div\r\n                        className={[\r\n                            \"ui-input-controller\",\r\n                            classes.root,\r\n                        ]\r\n                            .filter(Boolean)\r\n                            .join(\" \")}\r\n                    >\r\n                        {label && (\r\n                            <label\r\n                                htmlFor={inputId}\r\n                                className={[\r\n                                    \"ui-input-controller__label\",\r\n                                    classes.label,\r\n                                ]\r\n                                    .filter(Boolean)\r\n                                    .join(\" \")}\r\n                            >\r\n                                {label}\r\n                            </label>\r\n                        )}\r\n\r\n                        <input\r\n                            {...props}\r\n                            {...field}\r\n                            id={inputId}\r\n                            name={field.name}\r\n                            placeholder={placeholder}\r\n                            value={field.value ?? \"\" as any}\r\n                            aria-invalid={\r\n                                hasError\r\n                            }\r\n                            aria-describedby={\r\n                                hasError && showError\r\n                                    ? errorId\r\n                                    : undefined\r\n                            }\r\n                            disabled={\r\n                                props.disabled ||\r\n                                field.disabled\r\n                            }\r\n                            className={[\r\n                                \"ui-input-controller__input\",\r\n                                hasError\r\n                                    ? \"ui-input-controller__input--error\"\r\n                                    : \"\",\r\n                                props.disabled\r\n                                    ? \"ui-input-controller__input--disabled\"\r\n                                    : \"\",\r\n                                classes.input,\r\n                            ]\r\n                                .filter(Boolean)\r\n                                .join(\" \")}\r\n                        />\r\n\r\n                        {hasError &&\r\n                            showError &&\r\n                            fieldState.error?.message && (\r\n                                <span\r\n                                    id={errorId}\r\n                                    role=\"alert\"\r\n                                    className={[\r\n                                        \"ui-input-controller__error\",\r\n                                        classes.error,\r\n                                    ]\r\n                                        .filter(Boolean)\r\n                                        .join(\" \")}\r\n                                >\r\n                                    {\r\n                                        fieldState\r\n                                            .error\r\n                                            .message\r\n                                    }\r\n                                </span>\r\n                            )}\r\n                    </div>\r\n                );\r\n            }}\r\n        />\r\n    );\r\n}","import styleInject from '#style-inject';styleInject(\".ui-input-controller {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--ui-spacing-xs);\\n}\\n.ui-input-controller__label {\\n  font-family: var(--ui-font-family);\\n  font-size: var(--ui-font-size-sm);\\n  color: var(--ui-color-foreground);\\n  cursor: pointer;\\n}\\n.ui-input-controller__input {\\n  width: 100%;\\n  box-sizing: border-box;\\n  padding: var(--ui-spacing-sm) var(--ui-spacing-md);\\n  font-family: var(--ui-font-family);\\n  font-size: var(--ui-font-size-md);\\n  color: var(--ui-color-foreground);\\n  background: var(--ui-color-background);\\n  border: 1px solid var(--ui-color-border);\\n  border-radius: var(--ui-radius-md);\\n  outline: none;\\n  transition:\\n    border-color 150ms ease,\\n    box-shadow 150ms ease,\\n    opacity 150ms ease;\\n}\\n.ui-input-controller__input::placeholder {\\n  color: var(--ui-color-muted-foreground);\\n}\\n.ui-input-controller__input:hover:not(:disabled) {\\n  border-color: var(--ui-color-primary);\\n}\\n.ui-input-controller__input:focus {\\n  border-color: var(--ui-color-primary);\\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-primary) 15%, transparent);\\n}\\n.ui-input-controller__input--error {\\n  border-color: var(--ui-color-danger);\\n}\\n.ui-input-controller__input--error:focus {\\n  border-color: var(--ui-color-danger);\\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-danger) 15%, transparent);\\n}\\n.ui-input-controller__input--disabled,\\n.ui-input-controller__input:disabled {\\n  opacity: 0.5;\\n  cursor: not-allowed;\\n}\\n.ui-input-controller__error {\\n  font-family: var(--ui-font-family);\\n  font-size: var(--ui-font-size-sm);\\n  color: var(--ui-color-danger);\\n}\\n\")"],"mappings":"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","names":["jsx","jsx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-kit/ui",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "Reusable React UI components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -21,13 +21,15 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "react-hook-form": ">=7"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "react-hook-form": "^7.87.0"
   },
   "publishConfig": {
     "access": "public"

package/dist/index.css

@@ -1,38 +0,0 @@
-/* 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

@@ -1 +0,0 @@
-{"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":[]}