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

package/dist/services/feedback.js

@@ -1,74 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.submitFeedback = submitFeedback;
-function submitFeedback(options) {
-    return __awaiter(this, void 0, void 0, function () {
-        var endpoint, payload, headers, res, text;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    endpoint = options.endpoint, payload = options.payload, headers = options.headers;
-                    return [4 /*yield*/, fetch(endpoint, {
-                            method: "POST",
-                            headers: __assign({ "Content-Type": "application/json" }, (headers !== null && headers !== void 0 ? headers : {})),
-                            body: JSON.stringify(payload),
-                        })];
-                case 1:
-                    res = _a.sent();
-                    if (!!res.ok) return [3 /*break*/, 3];
-                    return [4 /*yield*/, res.text().catch(function () { return ""; })];
-                case 2:
-                    text = _a.sent();
-                    throw new Error("Feedback submit failed: ".concat(res.status, " ").concat(text));
-                case 3: return [2 /*return*/];
-            }
-        });
-    });
-}

package/dist/theme-v2/ThemeProvider.d.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-export type ThemeName = "default" | "meadow" | "rosewood" | "skyline" | "slate" | "emerald" | "radiant";
-export type ThemeMode = "light" | "dark" | "system";
-export type ResolvedMode = "light" | "dark";
-export interface ThemeContextValue {
-    theme: ThemeName;
-    setTheme: (theme: ThemeName) => void;
-    mode: ThemeMode;
-    setMode: (mode: ThemeMode) => void;
-    resolvedMode: ResolvedMode;
-}
-export interface ThemeProviderProps {
-    children: React.ReactNode;
-    defaultTheme?: ThemeName;
-    defaultMode?: ThemeMode;
-    storageKey?: string;
-}
-export declare function ThemeProvider({ children, defaultTheme, defaultMode, storageKey, }: ThemeProviderProps): React.ReactElement;
-export declare function useTheme(): ThemeContextValue;

package/dist/theme-v2/ThemeProvider.js

@@ -1,149 +0,0 @@
-"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

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

@@ -1,72 +0,0 @@
-/**
- * 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/tailwind.config.ts

@@ -1,91 +0,0 @@
-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,52 +0,0 @@
-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"),
-        },
-    },
-    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]";
-                },
-            },
-        },
-    },
-});