pixelize-design-library 2.2.192 → 3.0.1-beta.1

package/dist/theme-v2/ThemeProvider.js

@@ -0,0 +1,149 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
+const React = __importStar(require("react"));
+const TooltipPrimitive = __importStar(require("@radix-ui/react-tooltip"));
+const ThemeContext = React.createContext(null);
+const THEME_NAMES = [
+    "default",
+    "meadow",
+    "rosewood",
+    "skyline",
+    "slate",
+    "emerald",
+    "radiant",
+];
+const MODES = ["light", "dark", "system"];
+function isThemeName(value) {
+    return typeof value === "string" && THEME_NAMES.includes(value);
+}
+function isThemeMode(value) {
+    return typeof value === "string" && MODES.includes(value);
+}
+function readStorage(key) {
+    if (typeof window === "undefined")
+        return {};
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return {};
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== "object")
+            return {};
+        const candidate = parsed;
+        return {
+            theme: isThemeName(candidate.theme) ? candidate.theme : undefined,
+            mode: isThemeMode(candidate.mode) ? candidate.mode : undefined,
+        };
+    }
+    catch (_a) {
+        return {};
+    }
+}
+function getSystemMode() {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return "light";
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function ThemeProvider({ children, defaultTheme = "default", defaultMode = "system", storageKey = "px-ui-theme", }) {
+    const [theme, setThemeState] = React.useState(defaultTheme);
+    const [mode, setModeState] = React.useState(defaultMode);
+    const [systemMode, setSystemMode] = React.useState("light");
+    // Hydrate from storage + initial system mode after mount (SSR-safe).
+    React.useEffect(() => {
+        const stored = readStorage(storageKey);
+        if (stored.theme)
+            setThemeState(stored.theme);
+        if (stored.mode)
+            setModeState(stored.mode);
+        setSystemMode(getSystemMode());
+    }, [storageKey]);
+    // Subscribe to OS color-scheme changes.
+    React.useEffect(() => {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return undefined;
+        }
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        const handler = (event) => {
+            setSystemMode(event.matches ? "dark" : "light");
+        };
+        mq.addEventListener("change", handler);
+        return () => mq.removeEventListener("change", handler);
+    }, []);
+    const resolvedMode = mode === "system" ? systemMode : mode;
+    // Apply data-theme + .dark class to <html>.
+    React.useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const root = document.documentElement;
+        root.setAttribute("data-theme", theme);
+        if (resolvedMode === "dark") {
+            root.classList.add("dark");
+        }
+        else {
+            root.classList.remove("dark");
+        }
+    }, [theme, resolvedMode]);
+    // Persist selections.
+    React.useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        try {
+            window.localStorage.setItem(storageKey, JSON.stringify({ theme, mode }));
+        }
+        catch (_a) {
+            // Storage may be unavailable (private mode, quota). Ignore.
+        }
+    }, [theme, mode, storageKey]);
+    const setTheme = React.useCallback((next) => {
+        setThemeState(next);
+    }, []);
+    const setMode = React.useCallback((next) => {
+        setModeState(next);
+    }, []);
+    const value = React.useMemo(() => ({ theme, setTheme, mode, setMode, resolvedMode }), [theme, setTheme, mode, setMode, resolvedMode]);
+    return (React.createElement(ThemeContext.Provider, { value: value },
+        React.createElement(TooltipPrimitive.Provider, { delayDuration: 200, skipDelayDuration: 300 }, children)));
+}
+function useTheme() {
+    const ctx = React.useContext(ThemeContext);
+    if (!ctx) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return ctx;
+}

package/dist/theme-v2/dark.css

@@ -0,0 +1,47 @@
+/**
+ * Dark mode token overrides.
+ *
+ * Activated by adding `.dark` to the <html> element (handled by ThemeProvider).
+ * Avoids pure black: surfaces sit on a desaturated blue-gray to feel premium
+ * while staying inside WCAG AA contrast against `--color-foreground`.
+ */
+.dark {
+    --color-primary: 217 91% 60%;
+    --color-primary-foreground: 222 47% 11%;
+
+    --color-background: 222 47% 8%;
+    --color-foreground: 210 40% 98%;
+
+    --color-card: 222 47% 11%;
+    --color-card-foreground: 210 40% 98%;
+
+    --color-secondary: 217 33% 18%;
+    --color-secondary-foreground: 210 40% 98%;
+
+    --color-muted: 217 33% 17%;
+    --color-muted-foreground: 215 20% 65%;
+
+    --color-accent: 217 33% 20%;
+    --color-accent-foreground: 210 40% 98%;
+
+    --color-border: 217 33% 20%;
+    --color-input: 217 33% 22%;
+    --color-ring: 217 91% 60%;
+
+    --color-destructive: 0 63% 50%;
+    --color-destructive-foreground: 210 40% 98%;
+
+    --color-success: 142 65% 45%;
+    --color-success-foreground: 222 47% 11%;
+
+    --color-warning: 38 92% 55%;
+    --color-warning-foreground: 222 47% 11%;
+
+    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.4);
+    --shadow-md:
+        0 4px 6px -1px hsl(0 0% 0% / 0.5),
+        0 2px 4px -2px hsl(0 0% 0% / 0.4);
+    --shadow-lg:
+        0 10px 15px -3px hsl(0 0% 0% / 0.6),
+        0 4px 6px -4px hsl(0 0% 0% / 0.45);
+}

package/dist/theme-v2/tokens.css

@@ -0,0 +1,72 @@
+/**
+ * Base design tokens — light mode defaults.
+ *
+ * All color values are HSL channels without the hsl() wrapper so they can be
+ * composed with Tailwind opacity modifiers (e.g. `bg-primary/50`).
+ *
+ *   --color-primary: 221 83% 53%;
+ *   background-color: hsl(var(--color-primary) / 0.5);
+ *
+ * Consumers can override any of these variables on :root (or a scoped element)
+ * to fully restyle the library.
+ */
+:root {
+    /* Brand */
+    --color-primary: 221 83% 53%;
+    --color-primary-foreground: 0 0% 100%;
+
+    /* Surfaces */
+    --color-background: 0 0% 100%;
+    --color-foreground: 222 47% 11%;
+
+    --color-card: 0 0% 100%;
+    --color-card-foreground: 222 47% 11%;
+
+    /* Secondary action surfaces */
+    --color-secondary: 210 40% 96%;
+    --color-secondary-foreground: 222 47% 11%;
+
+    --color-muted: 210 40% 96%;
+    --color-muted-foreground: 215 16% 47%;
+
+    --color-accent: 210 40% 96%;
+    --color-accent-foreground: 222 47% 11%;
+
+    /* Lines / focus */
+    --color-border: 214 32% 91%;
+    --color-input: 214 32% 91%;
+    --color-ring: 221 83% 53%;
+
+    /* Status */
+    --color-destructive: 0 84% 60%;
+    --color-destructive-foreground: 0 0% 100%;
+
+    --color-success: 142 71% 45%;
+    --color-success-foreground: 0 0% 100%;
+
+    --color-warning: 38 92% 50%;
+    --color-warning-foreground: 222 47% 11%;
+
+    /* Radius */
+    --radius: 0.5rem;
+
+    /* Elevation */
+    --shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / 0.05);
+    --shadow-md:
+        0 4px 6px -1px hsl(222 47% 11% / 0.08),
+        0 2px 4px -2px hsl(222 47% 11% / 0.06);
+    --shadow-lg:
+        0 10px 15px -3px hsl(222 47% 11% / 0.1),
+        0 4px 6px -4px hsl(222 47% 11% / 0.06);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.192",
+  "version": "3.0.1-beta.1",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -8,20 +8,41 @@
   "dependencies": {
     "@fontsource-variable/inter": "^5.2.8",
     "@hello-pangea/dnd": "^18.0.1",
-    "jodit-react": "^5.2.38",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
+    "date-fns": "^3.6.0",
     "lucide-react": "^0.487.0",
     "react-apexcharts": "^1.4.1",
-    "react-datepicker": "^7.3.0",
     "react-dropzone": "^14.3.8",
-    "react-window": "^1.8.11"
+    "sonner": "^1.7.2",
+    "tailwind-merge": "^2.5.4"
   },
   "scripts": {
-    "start": "vite",
-    "build": "tsc && copyfiles -u 1 src/**/*.css src/assets/**/* dist/",
+    "start": "storybook dev -p 6006",
+    "build": "tsc && copyfiles -u 1 src/**/*.css dist/",
     "test": "jest",
     "test:watch": "jest --watch",
-    "remove": "rm -rf dist/Pages dist/App.js dist/App.d.ts dist/Layout.js dist/Layout.d.ts dist/bootstrap.js dist/bootstrap.d.ts",
-    "package": "npm version patch && npm run build && npm run remove && npm publish"
+    "package": "npm version patch && npm run build && npm publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -69,19 +90,21 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.5",
     "@babel/preset-typescript": "^7.24.5",
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@tailwindcss/typography": "^0.5.15",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/leaflet": "^1.9.21",
-    "@types/leaflet-routing-machine": "^3.2.9",
     "@types/node": "^20.0.0",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.4.1",
     "autoprefixer": "^10.4.21",
     "babel-jest": "^29.7.0",
@@ -89,21 +112,19 @@
     "framer-motion": "^10.18.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "path": "^0.12.7",
     "postcss": "^8.5.4",
     "prettier": "^3.3.2",
-    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "storybook": "^8.4.7",
     "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.9.3",
-    "vite": "^6.2.0",
-    "webpack": "^5.91.0"
+    "vite": "^6.2.0"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^2.8.2",
     "framer-motion": "^10.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
-}
+}

package/tailwind.config.ts

@@ -0,0 +1,91 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+    darkMode: "class",
+    content: ["./src/**/*.{ts,tsx}", "./.storybook/**/*.{ts,tsx}"],
+    theme: {
+        extend: {
+            colors: {
+                primary: {
+                    DEFAULT: "hsl(var(--color-primary) / <alpha-value>)",
+                    foreground:
+                        "hsl(var(--color-primary-foreground) / <alpha-value>)",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--color-secondary) / <alpha-value>)",
+                    foreground:
+                        "hsl(var(--color-secondary-foreground) / <alpha-value>)",
+                },
+                background: "hsl(var(--color-background) / <alpha-value>)",
+                foreground: "hsl(var(--color-foreground) / <alpha-value>)",
+                card: {
+                    DEFAULT: "hsl(var(--color-card) / <alpha-value>)",
+                    foreground:
+                        "hsl(var(--color-card-foreground) / <alpha-value>)",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--color-muted) / <alpha-value>)",
+                    foreground:
+                        "hsl(var(--color-muted-foreground) / <alpha-value>)",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--color-accent) / <alpha-value>)",
+                    foreground:
+                        "hsl(var(--color-accent-foreground) / <alpha-value>)",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--color-destructive) / <alpha-value>)",
+                    foreground:
+                        "hsl(var(--color-destructive-foreground) / <alpha-value>)",
+                },
+                success: {
+                    DEFAULT: "hsl(var(--color-success) / <alpha-value>)",
+                    foreground:
+                        "hsl(var(--color-success-foreground) / <alpha-value>)",
+                },
+                warning: {
+                    DEFAULT: "hsl(var(--color-warning) / <alpha-value>)",
+                    foreground:
+                        "hsl(var(--color-warning-foreground) / <alpha-value>)",
+                },
+                border: "hsl(var(--color-border) / <alpha-value>)",
+                input: "hsl(var(--color-input) / <alpha-value>)",
+                ring: "hsl(var(--color-ring) / <alpha-value>)",
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
+            },
+            boxShadow: {
+                sm: "var(--shadow-sm)",
+                md: "var(--shadow-md)",
+                lg: "var(--shadow-lg)",
+            },
+            keyframes: {
+                "accordion-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-accordion-content-height)" },
+                },
+                "accordion-up": {
+                    from: { height: "var(--radix-accordion-content-height)" },
+                    to: { height: "0" },
+                },
+                shimmer: {
+                    "100%": { transform: "translateX(100%)" },
+                },
+            },
+            animation: {
+                "accordion-down": "accordion-down 0.2s ease-out",
+                "accordion-up": "accordion-up 0.2s ease-out",
+                shimmer: "shimmer 1.5s infinite",
+            },
+        },
+    },
+    plugins: [
+        require("@tailwindcss/typography"),
+        require("tailwindcss-animate"),
+    ],
+};
+
+export default config;

package/vite.config.ts

@@ -1,13 +1,52 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import path from 'path'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
 
 export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      src: path.resolve(__dirname, './src'),
+    plugins: [react()],
+    resolve: {
+        alias: {
+            src: path.resolve(__dirname, "./src"),
+        },
     },
-  },
-  publicDir: 'public',
-})
+    publicDir: "public",
+    css: {
+        postcss: "./postcss.config.js",
+    },
+    build: {
+        cssCodeSplit: false,
+        lib: {
+            entry: path.resolve(__dirname, "src/index.ts"),
+            formats: ["es", "cjs"],
+            fileName: (format) => `index.${format === "es" ? "js" : "cjs"}`,
+        },
+        rollupOptions: {
+            external: [
+                "react",
+                "react-dom",
+                "react/jsx-runtime",
+                "framer-motion",
+                "lucide-react",
+                "react-apexcharts",
+                "@hello-pangea/dnd",
+                "date-fns",
+                "@radix-ui/react-slot",
+                "class-variance-authority",
+                "clsx",
+                "tailwind-merge",
+            ],
+            output: {
+                globals: {
+                    react: "React",
+                    "react-dom": "ReactDOM",
+                },
+                assetFileNames: (info) => {
+                    if (info.name && info.name.endsWith(".css")) {
+                        return "index.css";
+                    }
+                    return "assets/[name][extname]";
+                },
+            },
+        },
+    },
+});

package/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Pixelize Design System</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <script type="module" src="/src/bootstrap.tsx"></script>
-  </body>
-</html>