@true-kit/ui 0.1.1 → 0.1.3

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.
package/dist/index.js.map CHANGED
@@ -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":"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","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"],"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"]}
@@ -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"],"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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@true-kit/ui",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "Reusable React UI components",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",