npm - @true-kit/ui - Versions diffs - 0.1.2 → 0.1.5 - Mend

@true-kit/ui 0.1.2 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.css CHANGED Viewed

@@ -35,4 +35,60 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+/* src/components/InputController/Controller.css */
+.ui-input-controller {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-spacing-xs);
+}
+.ui-input-controller__label {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-color-foreground);
+  cursor: pointer;
+}
+.ui-input-controller__input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--ui-spacing-sm) var(--ui-spacing-md);
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-md);
+  color: var(--ui-color-foreground);
+  background: var(--ui-color-background);
+  border: 1px solid var(--ui-color-border);
+  border-radius: var(--ui-radius-md);
+  outline: none;
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    opacity 150ms ease;
+}
+.ui-input-controller__input::placeholder {
+  color: var(--ui-color-muted-foreground);
+}
+.ui-input-controller__input:hover:not(:disabled) {
+  border-color: var(--ui-color-primary);
+}
+.ui-input-controller__input:focus {
+  border-color: var(--ui-color-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-primary) 15%, transparent);
+}
+.ui-input-controller__input--error {
+  border-color: var(--ui-color-danger);
+}
+.ui-input-controller__input--error:focus {
+  border-color: var(--ui-color-danger);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-color-danger) 15%, transparent);
+}
+.ui-input-controller__input--disabled,
+.ui-input-controller__input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ui-input-controller__error {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-color-danger);
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map CHANGED Viewed

	@@ -1 +1 @@
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":[]}
1	+ {"version":3,"sources":["../src/components/Button/Button.css","../src/components/InputController/Controller.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}",".ui-input-controller {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--ui-spacing-xs);\r\n}\r\n\r\n.ui-input-controller__label {\r\n font-family: var(--ui-font-family);\r\n font-size: var(--ui-font-size-sm);\r\n color: var(--ui-color-foreground);\r\n\r\n cursor: pointer;\r\n}\r\n\r\n.ui-input-controller__input {\r\n width: 100%;\r\n box-sizing: border-box;\r\n\r\n padding:\r\n var(--ui-spacing-sm) var(--ui-spacing-md);\r\n\r\n font-family: var(--ui-font-family);\r\n font-size: var(--ui-font-size-md);\r\n\r\n color: var(--ui-color-foreground);\r\n background: var(--ui-color-background);\r\n\r\n border: 1px solid var(--ui-color-border);\r\n border-radius: var(--ui-radius-md);\r\n\r\n outline: none;\r\n\r\n transition:\r\n border-color 150ms ease,\r\n box-shadow 150ms ease,\r\n opacity 150ms ease;\r\n}\r\n\r\n.ui-input-controller__input::placeholder {\r\n color: var(--ui-color-muted-foreground);\r\n}\r\n\r\n.ui-input-controller__input:hover:not(:disabled) {\r\n border-color: var(--ui-color-primary);\r\n}\r\n\r\n.ui-input-controller__input:focus {\r\n border-color: var(--ui-color-primary);\r\n\r\n box-shadow:\r\n 0 0 0 2px color-mix(in srgb,\r\n var(--ui-color-primary) 15%,\r\n transparent);\r\n}\r\n\r\n.ui-input-controller__input--error {\r\n border-color: var(--ui-color-danger);\r\n}\r\n\r\n.ui-input-controller__input--error:focus {\r\n border-color: var(--ui-color-danger);\r\n\r\n box-shadow:\r\n 0 0 0 2px color-mix(in srgb,\r\n var(--ui-color-danger) 15%,\r\n transparent);\r\n}\r\n\r\n.ui-input-controller__input--disabled,\r\n.ui-input-controller__input:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.ui-input-controller__error {\r\n font-family: var(--ui-font-family);\r\n font-size: var(--ui-font-size-sm);\r\n color: var(--ui-color-danger);\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;;;ACpDA,CAAC;AACG,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACb;AAEA,CAAC;AACG,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,SAAO,IAAI;AAEX,UAAQ;AACZ;AAEA,CAAC;AACG,SAAO;AACP,cAAY;AAEZ,WACI,IAAI,iBAAiB,IAAI;AAE7B,eAAa,IAAI;AACjB,aAAW,IAAI;AAEf,SAAO,IAAI;AACX,cAAY,IAAI;AAEhB,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AAEnB,WAAS;AAET;AAAA,IACI,aAAa,MAAM,IAAI;AAAA,IACvB,WAAW,MAAM,IAAI;AAAA,IACrB,QAAQ,MAAM;AACtB;AAEA,CAxBC,0BAwB0B;AACvB,SAAO,IAAI;AACf;AAEA,CA5BC,0BA4B0B,MAAM,KAAK;AAClC,gBAAc,IAAI;AACtB;AAEA,CAhCC,0BAgC0B;AACvB,gBAAc,IAAI;AAElB,cACI,EAAE,EAAE,EAAE,IAAI,UAAU,GAAG,IAAI,EACvB,IAAI,oBAAoB,GAAG,EAC3B;AACZ;AAEA,CAAC;AACG,gBAAc,IAAI;AACtB;AAEA,CAJC,iCAIiC;AAC9B,gBAAc,IAAI;AAElB,cACI,EAAE,EAAE,EAAE,IAAI,UAAU,GAAG,IAAI,EACvB,IAAI,mBAAmB,GAAG,EAC1B;AACZ;AAEA,CAAC;AACD,CAvDC,0BAuD0B;AACvB,WAAS;AACT,UAAQ;AACZ;AAEA,CAAC;AACG,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,SAAO,IAAI;AACf;","names":[]}

package/dist/index.d.mts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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
 });
@@ -169,9 +171,94 @@ function Button({
     }
   );
 }
+// src/components/InputController/Controller.tsx
+var import_react_hook_form = require("react-hook-form");
+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 CHANGED Viewed

	@@ -1 +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\";","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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAMO;;;ACJA,IAAM,eAAwB;AAAA,EACjC,OAAO;AAAA,IACH,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,IACf,mBAAmB;AAAA,IAEnB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,qBAAqB;AAAA,IAErB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,IAEP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACZ;AAAA,EAEA,QAAQ;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EACV;AAAA,EAEA,SAAS;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACR;AAAA,EAEA,MAAM;AAAA,IACF,QAAQ;AAAA,IAER,MAAM;AAAA,MACF,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACR;AAAA,EACJ;AAAA,EAEA,QAAQ;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACR;AACJ;;;ACnDA,IAAM,eAAe,CAAC,UAClB,MAAM,QAAQ,sBAAsB,OAAO,EAAE,YAAY;AAEtD,SAAS,oBACZ,OACA,SAAS,MACG;AACZ,QAAM,YAAoC,CAAC;AAE3C,QAAM,OAAO,CACT,QACA,OAAiB,CAAC,MACjB;AACD,WAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AAC7C,UAAI,UAAU,UAAa,UAAU,KAAM;AAE3C,YAAM,WAAW,CAAC,GAAG,MAAM,aAAa,GAAG,CAAC;AAE5C,UAAI,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK,GAAG;AACpD,aAAK,OAAkC,QAAQ;AAC/C;AAAA,MACJ;AAEA,gBACI,KAAK,MAAM,IAAI,SAAS,KAAK,GAAG,CAAC,EACrC,IAAI,OAAO,KAAK;AAAA,IACpB,CAAC;AAAA,EACL;AAEA,OAAK,KAAgC;AAErC,SAAO;AACX;AAEO,SAAS,WACZ,QACA,QACC;AACD,MAAI,CAAC,QAAQ;AACT,WAAO,EAAE,GAAG,OAAO;AAAA,EACvB;AAEA,QAAM,SAAkC,EAAE,GAAG,OAAO;AAEpD,SAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,WAAW,MAAM;AACnD,UAAM,cAAc,OAAO,GAAG;AAE9B,QACI,gBAAgB,QAChB,OAAO,gBAAgB,YACvB,CAAC,MAAM,QAAQ,WAAW,GAC5B;AACE,aAAO,GAAG,IAAI;AAAA,QACT,eAAe,CAAC;AAAA,QACjB;AAAA,MACJ;AAAA,IACJ,WAAW,gBAAgB,QAAW;AAClC,aAAO,GAAG,IAAI;AAAA,IAClB;AAAA,EACJ,CAAC;AAED,SAAO;AACX;;;AFhCY;AAlBZ,IAAM,mBAAe,4BAAuB,YAAY;AAEjD,SAAS,WAAW;AAAA,EACvB;AAAA,EACA;AACJ,GAAoB;AAChB,QAAM,kBAAc;AAAA,IAChB,MAAM,WAAW,cAAqB,KAAK;AAAA,IAC3C,CAAC,KAAK;AAAA,EACV;AAEA,QAAM,mBAAe;AAAA,IACjB,MAAM,oBAAoB,WAAW;AAAA,IACrC,CAAC,WAAW;AAAA,EAChB;AAEA,SACI,4CAAC,aAAa,UAAb,EAAsB,OAAO,aAC1B;AAAA,IAAC;AAAA;AAAA,MACG,oBAAiB;AAAA,MACjB,OAAO;AAAA,MAEN;AAAA;AAAA,EACL,GACJ;AAER;AAEO,SAAS,aAAa;AACzB,aAAO,yBAAW,YAAY;AAClC;;;AGjCQ,IAAAA,sBAAA;AAVD,SAAS,OAAO;AAAA,EACnB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACP,GAAgB;AACZ,SACI;AAAA,IAAC;AAAA;AAAA,MACI,GAAG;AAAA,MACJ,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,QACP;AAAA,QACA,cAAc,OAAO;AAAA,QACrB,cAAc,IAAI;AAAA,QAClB;AAAA,MACJ,EACK,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEZ,oBAAU,eAAe;AAAA;AAAA,EAC9B;AAER;","names":["import_jsx_runtime"]}
1	+ {"version":3,"sources":["../src/index.ts","../src/theme/UIProvider.tsx","../src/theme/defaultTheme.ts","../src/theme/utils.ts","../src/components/Button/Button.tsx","../src/components/InputController/Controller.tsx"],"sourcesContent":["\"use client\";\r\n// UI Provider\r\nexport { UIProvider, useUITheme } from \"./theme/UIProvider\";\r\n\r\nexport type { UITheme } from \"./theme/types\";\r\n\r\n// Buttons\r\nexport { Button } from \"./components/Button\";\r\n\r\nexport type { ButtonProps } from \"./components/Button\";\r\n\r\n// Controllers\r\n\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}","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}","\"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}"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.mjs CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 // src/theme/UIProvider.tsx
 import {
   createContext,
@@ -145,8 +147,93 @@ function Button({
     }
   );
 }
+// src/components/InputController/Controller.tsx
+import { Controller } from "react-hook-form";
+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 CHANGED Viewed

	@@ -1 +1 @@
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"]}
1	+ {"version":3,"sources":["../src/theme/UIProvider.tsx","../src/theme/defaultTheme.ts","../src/theme/utils.ts","../src/components/Button/Button.tsx","../src/components/InputController/Controller.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}","\"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}"],"mappings":"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","names":["jsx","jsx"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@true-kit/ui",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "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"