pixelize-design-library 2.2.197 → 2.3.1-beta.1

package/dist/components-v2/Charts/PieChart.js

@@ -0,0 +1,54 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieChart = PieChart;
+const React = __importStar(require("react"));
+const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+const utils_1 = require("../../lib/utils");
+const chartOptions_1 = require("./chartOptions");
+const useChartTheme_1 = require("./useChartTheme");
+function PieChart({ series, labels, height = 320, variant = "pie", showLegend = true, options, className, }) {
+    const theme = (0, useChartTheme_1.useChartTheme)();
+    const merged = React.useMemo(() => {
+        const base = (0, chartOptions_1.baseApexOptions)(theme);
+        return Object.assign(Object.assign(Object.assign({}, base), { chart: Object.assign(Object.assign({}, base.chart), { type: variant }), labels, stroke: { width: 0 }, legend: Object.assign(Object.assign({}, base.legend), { show: showLegend, position: "bottom" }) }), options);
+    }, [theme, labels, variant, showLegend, options]);
+    return (React.createElement("div", { className: (0, utils_1.cn)("w-full", className) },
+        React.createElement(react_apexcharts_1.default, { key: `${theme.mode}-${theme.primary}-${variant}`, options: merged, series: series, type: variant, height: height })));
+}
+PieChart.displayName = "PieChart";

package/dist/components-v2/Charts/PolarChart.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { ApexOptions } from "apexcharts";
+export interface PolarChartProps {
+    series: number[];
+    labels: string[];
+    height?: number | string;
+    showLegend?: boolean;
+    options?: ApexOptions;
+    className?: string;
+}
+export declare function PolarChart({ series, labels, height, showLegend, options, className, }: PolarChartProps): React.ReactElement;
+export declare namespace PolarChart {
+    var displayName: string;
+}

package/dist/components-v2/Charts/PolarChart.js

@@ -0,0 +1,54 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PolarChart = PolarChart;
+const React = __importStar(require("react"));
+const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+const utils_1 = require("../../lib/utils");
+const chartOptions_1 = require("./chartOptions");
+const useChartTheme_1 = require("./useChartTheme");
+function PolarChart({ series, labels, height = 320, showLegend = true, options, className, }) {
+    const theme = (0, useChartTheme_1.useChartTheme)();
+    const merged = React.useMemo(() => {
+        const base = (0, chartOptions_1.baseApexOptions)(theme);
+        return Object.assign(Object.assign(Object.assign({}, base), { chart: Object.assign(Object.assign({}, base.chart), { type: "polarArea" }), labels, stroke: { colors: [theme.border], width: 1 }, fill: { opacity: 0.85 }, legend: Object.assign(Object.assign({}, base.legend), { show: showLegend, position: "bottom" }) }), options);
+    }, [theme, labels, showLegend, options]);
+    return (React.createElement("div", { className: (0, utils_1.cn)("w-full", className) },
+        React.createElement(react_apexcharts_1.default, { key: `${theme.mode}-${theme.primary}`, options: merged, series: series, type: "polarArea", height: height })));
+}
+PolarChart.displayName = "PolarChart";

package/dist/components-v2/Charts/chartOptions.d.ts

@@ -0,0 +1,7 @@
+import type { ApexOptions } from "apexcharts";
+import type { ChartTheme } from "./useChartTheme";
+/**
+ * Shared Apex options derived from the active theme. Each chart wrapper merges
+ * additional config on top.
+ */
+export declare function baseApexOptions(theme: ChartTheme): ApexOptions;

package/dist/components-v2/Charts/chartOptions.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.baseApexOptions = baseApexOptions;
+/**
+ * Shared Apex options derived from the active theme. Each chart wrapper merges
+ * additional config on top.
+ */
+function baseApexOptions(theme) {
+    return {
+        chart: {
+            background: "transparent",
+            foreColor: theme.foreground,
+            fontFamily: "inherit",
+            toolbar: { show: false },
+            zoom: { enabled: false },
+        },
+        theme: { mode: theme.mode },
+        colors: theme.palette,
+        grid: {
+            borderColor: theme.border,
+            strokeDashArray: 3,
+            xaxis: { lines: { show: false } },
+        },
+        xaxis: {
+            labels: { style: { colors: theme.muted } },
+            axisBorder: { color: theme.border },
+            axisTicks: { color: theme.border },
+        },
+        yaxis: {
+            labels: { style: { colors: theme.muted } },
+        },
+        legend: {
+            labels: { colors: theme.foreground },
+        },
+        tooltip: {
+            theme: theme.mode,
+        },
+        dataLabels: { enabled: false },
+        stroke: { curve: "smooth", width: 2 },
+    };
+}

package/dist/components-v2/Charts/useChartTheme.d.ts

@@ -0,0 +1,22 @@
+export interface ChartTheme {
+    /** Series palette (hsl strings). */
+    palette: string[];
+    /** Primary color from current theme. */
+    primary: string;
+    /** Page foreground. */
+    foreground: string;
+    /** Muted text + axis labels. */
+    muted: string;
+    /** Border / grid lines. */
+    border: string;
+    /** Card background. */
+    background: string;
+    /** ApexCharts mode token. */
+    mode: "light" | "dark";
+}
+/**
+ * Reads computed CSS variables from `:root` so chart libraries get real colors
+ * (not `hsl(var(--*))` strings). Re-runs when the resolved light/dark mode
+ * changes so theme switches re-paint charts.
+ */
+export declare function useChartTheme(): ChartTheme;

package/dist/components-v2/Charts/useChartTheme.js

@@ -0,0 +1,106 @@
+"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.useChartTheme = useChartTheme;
+const React = __importStar(require("react"));
+const ThemeProvider_1 = require("../../theme-v2/ThemeProvider");
+/**
+ * Reads computed CSS variables from `:root` so chart libraries get real colors
+ * (not `hsl(var(--*))` strings). Re-runs when the resolved light/dark mode
+ * changes so theme switches re-paint charts.
+ */
+function useChartTheme() {
+    const { resolvedMode, theme } = (0, ThemeProvider_1.useTheme)();
+    const [colors, setColors] = React.useState(() => fallbackTheme());
+    React.useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const id = requestAnimationFrame(() => {
+            setColors(readThemeFromDocument(resolvedMode));
+        });
+        return () => cancelAnimationFrame(id);
+    }, [resolvedMode, theme]);
+    return colors;
+}
+function readThemeFromDocument(mode) {
+    const root = document.documentElement;
+    const styles = getComputedStyle(root);
+    const read = (variable) => {
+        const value = styles.getPropertyValue(variable).trim();
+        return value ? `hsl(${value})` : "";
+    };
+    const primary = read("--color-primary") || "#3b82f6";
+    const foreground = read("--color-foreground") || "#0f172a";
+    const muted = read("--color-muted-foreground") || "#64748b";
+    const border = read("--color-border") || "#e2e8f0";
+    const background = read("--color-card") || (mode === "dark" ? "#0f172a" : "#ffffff");
+    const palette = derivePalette(primary, mode);
+    return { palette, primary, foreground, muted, border, background, mode };
+}
+/**
+ * Derive a small categorical palette around the primary hue, plus a few
+ * complementary fixed hues for variety.
+ */
+function derivePalette(primary, mode) {
+    const baseHueMatch = primary.match(/hsl\(\s*(-?[\d.]+)/);
+    const hue = baseHueMatch ? parseFloat(baseHueMatch[1]) : 220;
+    const lightness = mode === "dark" ? 60 : 50;
+    return [
+        `hsl(${hue} 80% ${lightness}%)`,
+        `hsl(${(hue + 60) % 360} 70% ${lightness}%)`,
+        `hsl(${(hue + 120) % 360} 70% ${lightness}%)`,
+        `hsl(${(hue + 180) % 360} 70% ${lightness}%)`,
+        `hsl(${(hue + 240) % 360} 70% ${lightness}%)`,
+        `hsl(${(hue + 300) % 360} 70% ${lightness}%)`,
+    ];
+}
+function fallbackTheme() {
+    return {
+        palette: [
+            "hsl(221 83% 53%)",
+            "hsl(168 76% 36%)",
+            "hsl(27 96% 54%)",
+            "hsl(346 77% 49%)",
+            "hsl(199 89% 48%)",
+            "hsl(248 53% 58%)",
+        ],
+        primary: "hsl(221 83% 53%)",
+        foreground: "hsl(222 47% 11%)",
+        muted: "hsl(215 16% 47%)",
+        border: "hsl(214 32% 91%)",
+        background: "hsl(0 0% 100%)",
+        mode: "light",
+    };
+}

package/dist/components-v2/ContactForm/ContactForm.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface ContactFormValues {
+    name: string;
+    email: string;
+    subject?: string;
+    message: string;
+}
+export interface ContactFormProps {
+    onSubmit: (values: ContactFormValues) => void | Promise<void>;
+    isLoading?: boolean;
+    successMessage?: React.ReactNode;
+    /** Field visibility / required state. */
+    fields?: {
+        subject?: boolean | "required";
+    };
+    submitLabel?: string;
+    className?: string;
+    /** Reset state to idle after a successful submission. */
+    isSubmitted?: boolean;
+    onReset?: () => void;
+}
+export declare function ContactForm({ onSubmit, isLoading, successMessage, fields, submitLabel, className, isSubmitted, onReset, }: ContactFormProps): React.ReactElement;
+export declare namespace ContactForm {
+    var displayName: string;
+}

package/dist/components-v2/ContactForm/ContactForm.js

@@ -0,0 +1,116 @@
+"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.ContactForm = ContactForm;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const button_1 = require("../ui/button");
+const TextInput_1 = require("../Input/TextInput");
+const textarea_1 = require("../ui/textarea");
+const field_1 = require("../ui/field");
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function validate(values, requireSubject) {
+    var _a;
+    const errors = {};
+    if (!values.name.trim())
+        errors.name = "Name is required.";
+    if (!values.email.trim())
+        errors.email = "Email is required.";
+    else if (!EMAIL_RE.test(values.email))
+        errors.email = "Enter a valid email.";
+    if (requireSubject && !((_a = values.subject) !== null && _a !== void 0 ? _a : "").trim())
+        errors.subject = "Subject is required.";
+    if (!values.message.trim())
+        errors.message = "Message is required.";
+    return errors;
+}
+function ContactForm({ onSubmit, isLoading = false, successMessage, fields = { subject: true }, submitLabel = "Send message", className, isSubmitted = false, onReset, }) {
+    var _a;
+    const [values, setValues] = React.useState({
+        name: "",
+        email: "",
+        subject: "",
+        message: "",
+    });
+    const [errors, setErrors] = React.useState({});
+    const [touched, setTouched] = React.useState({
+        name: false,
+        email: false,
+        subject: false,
+        message: false,
+    });
+    const showSubject = fields.subject !== false;
+    const requireSubject = fields.subject === "required";
+    const update = (key) => (event) => {
+        setValues((prev) => (Object.assign(Object.assign({}, prev), { [key]: event.target.value })));
+        if (touched[key]) {
+            setErrors(validate(Object.assign(Object.assign({}, values), { [key]: event.target.value }), requireSubject));
+        }
+    };
+    const blur = (key) => () => {
+        setTouched((prev) => (Object.assign(Object.assign({}, prev), { [key]: true })));
+        setErrors(validate(values, requireSubject));
+    };
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        const next = validate(values, requireSubject);
+        setErrors(next);
+        setTouched({
+            name: true,
+            email: true,
+            subject: true,
+            message: true,
+        });
+        if (Object.keys(next).length > 0)
+            return;
+        await onSubmit(values);
+    };
+    if (isSubmitted && successMessage) {
+        return (React.createElement("div", { role: "status", className: (0, utils_1.cn)("flex flex-col items-center gap-3 rounded-lg border border-success/40 bg-success/10 p-6 text-center text-success", className) },
+            React.createElement(lucide_react_1.CheckCircle2, { "aria-hidden": "true", className: "h-8 w-8" }),
+            React.createElement("div", { className: "text-sm" }, successMessage),
+            onReset && (React.createElement(button_1.Button, { variant: "outline", size: "sm", onClick: onReset }, "Send another"))));
+    }
+    return (React.createElement("form", { onSubmit: handleSubmit, noValidate: true, className: (0, utils_1.cn)("space-y-4", className) },
+        React.createElement(TextInput_1.TextInput, { label: "Name", isRequired: true, value: values.name, onChange: update("name"), onBlur: blur("name"), error: !!errors.name && touched.name, errorMessage: errors.name, autoComplete: "name" }),
+        React.createElement(TextInput_1.TextInput, { label: "Email", type: "email", isRequired: true, value: values.email, onChange: update("email"), onBlur: blur("email"), error: !!errors.email && touched.email, errorMessage: errors.email, autoComplete: "email" }),
+        showSubject && (React.createElement(TextInput_1.TextInput, { label: "Subject", isRequired: requireSubject, value: (_a = values.subject) !== null && _a !== void 0 ? _a : "", onChange: update("subject"), onBlur: blur("subject"), error: !!errors.subject && touched.subject, errorMessage: errors.subject })),
+        React.createElement(field_1.Field, { label: "Message", isRequired: true, error: !!errors.message && touched.message, errorMessage: errors.message },
+            React.createElement(textarea_1.Textarea, { value: values.message, onChange: update("message"), onBlur: blur("message"), rows: 5, autoResize: true, minRows: 4, maxRows: 10 })),
+        React.createElement("div", { className: "flex justify-end" },
+            React.createElement(button_1.Button, { type: "submit", isLoading: isLoading, loadingText: "Sending\u2026" }, submitLabel))));
+}
+ContactForm.displayName = "ContactForm";

package/dist/components-v2/DatePicker/Calendar.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type DateConstraints, type DayOfWeek } from "./utils";
+export interface CalendarProps {
+    /** Currently focused / displayed month. */
+    viewDate: Date;
+    onViewDateChange: (date: Date) => void;
+    /** Selected date(s). */
+    selected?: Date | null;
+    rangeStart?: Date | null;
+    rangeEnd?: Date | null;
+    onSelectDate: (date: Date) => void;
+    mode: "single" | "range";
+    constraints?: DateConstraints;
+    weekStartsOn?: DayOfWeek;
+    locale?: Intl.LocalesArgument;
+    /** Render compactly inside a Popover. */
+    compact?: boolean;
+}
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;