@clayer/theme 1.0.0

package/dist/chunk-LNPBYTUA.js

@@ -0,0 +1,56 @@
+// src/tailwind-preset.ts
+var tailwindPreset = {
+  content: [],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--cx-background))",
+        foreground: "hsl(var(--cx-foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--cx-primary))",
+          foreground: "hsl(var(--cx-primary-foreground))"
+        },
+        card: {
+          DEFAULT: "hsl(var(--cx-card))",
+          foreground: "hsl(var(--cx-card-foreground))"
+        },
+        border: "hsl(var(--cx-border))",
+        input: "hsl(var(--cx-input))",
+        ring: "hsl(var(--cx-ring))",
+        muted: {
+          DEFAULT: "hsl(var(--cx-muted))",
+          foreground: "hsl(var(--cx-muted-foreground))"
+        },
+        success: "hsl(var(--cx-success))",
+        warning: "hsl(var(--cx-warning))",
+        danger: "hsl(var(--cx-danger))",
+        info: "hsl(var(--cx-info))",
+        sidebar: {
+          DEFAULT: "hsl(var(--cx-sidebar))",
+          foreground: "hsl(var(--cx-sidebar-foreground))",
+          active: "hsl(var(--cx-sidebar-active))"
+        },
+        chart: {
+          1: "hsl(var(--cx-chart-1))",
+          2: "hsl(var(--cx-chart-2))",
+          3: "hsl(var(--cx-chart-3))",
+          4: "hsl(var(--cx-chart-4))",
+          5: "hsl(var(--cx-chart-5))"
+        }
+      },
+      borderRadius: {
+        sm: "calc(var(--cx-radius) - 4px)",
+        md: "calc(var(--cx-radius) - 2px)",
+        lg: "var(--cx-radius)",
+        xl: "calc(var(--cx-radius) + 4px)"
+      }
+    }
+  }
+};
+var tailwind_preset_default = tailwindPreset;
+
+export {
+  tailwindPreset,
+  tailwind_preset_default
+};
+//# sourceMappingURL=chunk-LNPBYTUA.js.map

package/dist/chunk-LNPBYTUA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tailwind-preset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nexport const tailwindPreset = {\n  content: [],\n  theme: {\n    extend: {\n      colors: {\n        background: \"hsl(var(--cx-background))\",\n        foreground: \"hsl(var(--cx-foreground))\",\n        primary: {\n          DEFAULT: \"hsl(var(--cx-primary))\",\n          foreground: \"hsl(var(--cx-primary-foreground))\"\n        },\n        card: {\n          DEFAULT: \"hsl(var(--cx-card))\",\n          foreground: \"hsl(var(--cx-card-foreground))\"\n        },\n        border: \"hsl(var(--cx-border))\",\n        input: \"hsl(var(--cx-input))\",\n        ring: \"hsl(var(--cx-ring))\",\n        muted: {\n          DEFAULT: \"hsl(var(--cx-muted))\",\n          foreground: \"hsl(var(--cx-muted-foreground))\"\n        },\n        success: \"hsl(var(--cx-success))\",\n        warning: \"hsl(var(--cx-warning))\",\n        danger: \"hsl(var(--cx-danger))\",\n        info: \"hsl(var(--cx-info))\",\n        sidebar: {\n          DEFAULT: \"hsl(var(--cx-sidebar))\",\n          foreground: \"hsl(var(--cx-sidebar-foreground))\",\n          active: \"hsl(var(--cx-sidebar-active))\"\n        },\n        chart: {\n          1: \"hsl(var(--cx-chart-1))\",\n          2: \"hsl(var(--cx-chart-2))\",\n          3: \"hsl(var(--cx-chart-3))\",\n          4: \"hsl(var(--cx-chart-4))\",\n          5: \"hsl(var(--cx-chart-5))\"\n        }\n      },\n      borderRadius: {\n        sm: \"calc(var(--cx-radius) - 4px)\",\n        md: \"calc(var(--cx-radius) - 2px)\",\n        lg: \"var(--cx-radius)\",\n        xl: \"calc(var(--cx-radius) + 4px)\"\n      }\n    }\n  }\n} satisfies Config;\n\nexport default tailwindPreset;\n"],"mappings":";AAEO,IAAM,iBAAiB;AAAA,EAC5B,SAAS,CAAC;AAAA,EACV,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QACd;AAAA,QACA,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,YAAY;AAAA,QACd;AAAA,QACA,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,QACd;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,MACF;AAAA,MACA,cAAc;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,0BAAQ;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+export { default as tailwindPreset } from './tailwind-preset.js';
+
+type ThemeSlotStyles = Record<string, string | undefined>;
+type Theme = {
+    components: {
+        Button: ThemeSlotStyles;
+        Card: ThemeSlotStyles;
+        Input: ThemeSlotStyles;
+        Modal: ThemeSlotStyles;
+    };
+    advanced: {
+        DataTable: ThemeSlotStyles;
+        DynamicForm: ThemeSlotStyles;
+        Chart: ThemeSlotStyles;
+        Graph: ThemeSlotStyles;
+    };
+    layout: {
+        DashboardLayout: ThemeSlotStyles;
+        Sidebar: ThemeSlotStyles;
+        Topbar: ThemeSlotStyles;
+        PageHeader: ThemeSlotStyles;
+    };
+};
+type PartialTheme = {
+    components?: Partial<Theme["components"]>;
+    advanced?: Partial<Theme["advanced"]>;
+    layout?: Partial<Theme["layout"]>;
+};
+declare const defaultTheme: Theme;
+
+declare function createTheme(theme?: PartialTheme): Theme;
+
+type ThemeProviderProps = {
+    theme?: PartialTheme;
+    children: ReactNode;
+};
+declare function ThemeProvider({ theme, children }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): Theme;
+
+export { type PartialTheme, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeSlotStyles, createTheme, defaultTheme, useTheme };

package/dist/index.js

@@ -0,0 +1,57 @@
+import {
+  tailwindPreset
+} from "./chunk-LNPBYTUA.js";
+
+// src/create-theme.ts
+import { deepMerge } from "@clayer/utils";
+
+// src/default-theme.ts
+var defaultTheme = {
+  components: {
+    Button: {},
+    Card: {},
+    Input: {},
+    Modal: {}
+  },
+  advanced: {
+    DataTable: {},
+    DynamicForm: {},
+    Chart: {},
+    Graph: {}
+  },
+  layout: {
+    DashboardLayout: {},
+    Sidebar: {},
+    Topbar: {},
+    PageHeader: {}
+  }
+};
+
+// src/create-theme.ts
+function createTheme(theme) {
+  return deepMerge(defaultTheme, theme);
+}
+
+// src/provider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { deepMerge as deepMerge2 } from "@clayer/utils";
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(defaultTheme);
+function ThemeProvider({ theme, children }) {
+  const parentTheme = useContext(ThemeContext);
+  const mergedTheme = useMemo(() => {
+    return deepMerge2(parentTheme, theme);
+  }, [parentTheme, theme]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: mergedTheme, children });
+}
+function useTheme() {
+  return useContext(ThemeContext);
+}
+export {
+  ThemeProvider,
+  createTheme,
+  defaultTheme,
+  tailwindPreset,
+  useTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/create-theme.ts","../src/default-theme.ts","../src/provider.tsx"],"sourcesContent":["import { deepMerge } from \"@clayer/utils\";\n\nimport { defaultTheme, type PartialTheme, type Theme } from \"./default-theme\";\n\nexport function createTheme(theme?: PartialTheme): Theme {\n  return deepMerge(defaultTheme, theme);\n}\n","export type ThemeSlotStyles = Record<string, string | undefined>;\n\nexport type Theme = {\n  components: {\n    Button: ThemeSlotStyles;\n    Card: ThemeSlotStyles;\n    Input: ThemeSlotStyles;\n    Modal: ThemeSlotStyles;\n  };\n  advanced: {\n    DataTable: ThemeSlotStyles;\n    DynamicForm: ThemeSlotStyles;\n    Chart: ThemeSlotStyles;\n    Graph: ThemeSlotStyles;\n  };\n  layout: {\n    DashboardLayout: ThemeSlotStyles;\n    Sidebar: ThemeSlotStyles;\n    Topbar: ThemeSlotStyles;\n    PageHeader: ThemeSlotStyles;\n  };\n};\n\nexport type PartialTheme = {\n  components?: Partial<Theme[\"components\"]>;\n  advanced?: Partial<Theme[\"advanced\"]>;\n  layout?: Partial<Theme[\"layout\"]>;\n};\n\nexport const defaultTheme: Theme = {\n  components: {\n    Button: {},\n    Card: {},\n    Input: {},\n    Modal: {}\n  },\n  advanced: {\n    DataTable: {},\n    DynamicForm: {},\n    Chart: {},\n    Graph: {}\n  },\n  layout: {\n    DashboardLayout: {},\n    Sidebar: {},\n    Topbar: {},\n    PageHeader: {}\n  }\n};\n","import { createContext, useContext, useMemo, type ReactNode } from \"react\";\nimport { deepMerge } from \"@clayer/utils\";\n\nimport { defaultTheme, type PartialTheme, type Theme } from \"./default-theme\";\n\nconst ThemeContext = createContext<Theme>(defaultTheme);\n\nexport type ThemeProviderProps = {\n  theme?: PartialTheme;\n  children: ReactNode;\n};\n\nexport function ThemeProvider({ theme, children }: ThemeProviderProps) {\n  const parentTheme = useContext(ThemeContext);\n\n  const mergedTheme = useMemo(() => {\n    return deepMerge(parentTheme, theme);\n  }, [parentTheme, theme]);\n\n  return <ThemeContext.Provider value={mergedTheme}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme() {\n  return useContext(ThemeContext);\n}\n"],"mappings":";;;;;AAAA,SAAS,iBAAiB;;;AC6BnB,IAAM,eAAsB;AAAA,EACjC,YAAY;AAAA,IACV,QAAQ,CAAC;AAAA,IACT,MAAM,CAAC;AAAA,IACP,OAAO,CAAC;AAAA,IACR,OAAO,CAAC;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,WAAW,CAAC;AAAA,IACZ,aAAa,CAAC;AAAA,IACd,OAAO,CAAC;AAAA,IACR,OAAO,CAAC;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,iBAAiB,CAAC;AAAA,IAClB,SAAS,CAAC;AAAA,IACV,QAAQ,CAAC;AAAA,IACT,YAAY,CAAC;AAAA,EACf;AACF;;;AD5CO,SAAS,YAAY,OAA6B;AACvD,SAAO,UAAU,cAAc,KAAK;AACtC;;;AENA,SAAS,eAAe,YAAY,eAA+B;AACnE,SAAS,aAAAA,kBAAiB;AAkBjB;AAdT,IAAM,eAAe,cAAqB,YAAY;AAO/C,SAAS,cAAc,EAAE,OAAO,SAAS,GAAuB;AACrE,QAAM,cAAc,WAAW,YAAY;AAE3C,QAAM,cAAc,QAAQ,MAAM;AAChC,WAAOC,WAAU,aAAa,KAAK;AAAA,EACrC,GAAG,CAAC,aAAa,KAAK,CAAC;AAEvB,SAAO,oBAAC,aAAa,UAAb,EAAsB,OAAO,aAAc,UAAS;AAC9D;AAEO,SAAS,WAAW;AACzB,SAAO,WAAW,YAAY;AAChC;","names":["deepMerge","deepMerge"]}

package/dist/styles.css

@@ -0,0 +1,61 @@
+:root {
+  --cx-background: 0 0% 100%;
+  --cx-foreground: 222 47% 11%;
+
+  --cx-primary: 222 89% 55%;
+  --cx-primary-foreground: 0 0% 100%;
+
+  --cx-card: 0 0% 100%;
+  --cx-card-foreground: 222 47% 11%;
+
+  --cx-border: 214 32% 91%;
+  --cx-input: 214 32% 91%;
+  --cx-ring: 222 89% 55%;
+
+  --cx-muted: 210 40% 96%;
+  --cx-muted-foreground: 215 16% 47%;
+
+  --cx-success: 142 72% 29%;
+  --cx-warning: 38 92% 50%;
+  --cx-danger: 0 84% 60%;
+  --cx-info: 199 89% 48%;
+
+  --cx-sidebar: 222 47% 8%;
+  --cx-sidebar-foreground: 210 40% 98%;
+  --cx-sidebar-active: 217 91% 60%;
+
+  --cx-chart-1: 222 89% 55%;
+  --cx-chart-2: 160 84% 39%;
+  --cx-chart-3: 38 92% 50%;
+  --cx-chart-4: 0 84% 60%;
+  --cx-chart-5: 262 83% 58%;
+
+  --cx-radius: 0.75rem;
+}
+
+.dark {
+  --cx-background: 222 47% 7%;
+  --cx-foreground: 210 40% 98%;
+
+  --cx-primary: 217 91% 60%;
+  --cx-primary-foreground: 222 47% 7%;
+
+  --cx-card: 222 47% 10%;
+  --cx-card-foreground: 210 40% 98%;
+
+  --cx-border: 217 33% 18%;
+  --cx-input: 217 33% 18%;
+  --cx-ring: 217 91% 60%;
+
+  --cx-muted: 217 33% 16%;
+  --cx-muted-foreground: 215 20% 70%;
+
+  --cx-success: 142 70% 45%;
+  --cx-warning: 38 92% 58%;
+  --cx-danger: 0 84% 66%;
+  --cx-info: 199 89% 58%;
+
+  --cx-sidebar: 222 47% 5%;
+  --cx-sidebar-foreground: 210 40% 98%;
+  --cx-sidebar-active: 217 91% 60%;
+}

package/dist/tailwind-preset.d.ts

@@ -0,0 +1,50 @@
+declare const tailwindPreset: {
+    content: never[];
+    theme: {
+        extend: {
+            colors: {
+                background: string;
+                foreground: string;
+                primary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                card: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                border: string;
+                input: string;
+                ring: string;
+                muted: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                success: string;
+                warning: string;
+                danger: string;
+                info: string;
+                sidebar: {
+                    DEFAULT: string;
+                    foreground: string;
+                    active: string;
+                };
+                chart: {
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                    5: string;
+                };
+            };
+            borderRadius: {
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+        };
+    };
+};
+
+export { tailwindPreset as default, tailwindPreset };

package/dist/tailwind-preset.js

@@ -0,0 +1,9 @@
+import {
+  tailwindPreset,
+  tailwind_preset_default
+} from "./chunk-LNPBYTUA.js";
+export {
+  tailwind_preset_default as default,
+  tailwindPreset
+};
+//# sourceMappingURL=tailwind-preset.js.map

package/dist/tailwind-preset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@clayer/theme",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./tailwind-preset": {
+      "types": "./dist/tailwind-preset.d.ts",
+      "import": "./dist/tailwind-preset.js",
+      "default": "./dist/tailwind-preset.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@clayer/utils": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "typescript": "^5.6.3",
+    "tsup": "^8.3.5"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rm -rf dist"
+  }
+}