pixelize-design-library 2.2.193 → 2.2.195

package/dist/components-v2/ui/textarea.js

@@ -1,96 +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;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = void 0;
-const React = __importStar(require("react"));
-const utils_1 = require("../../lib/utils");
-const form_field_1 = require("./form-field");
-function syncHeight(element, minRows, maxRows) {
-    const computed = window.getComputedStyle(element);
-    const lineHeight = parseFloat(computed.lineHeight) || 20;
-    const paddingTop = parseFloat(computed.paddingTop) || 0;
-    const paddingBottom = parseFloat(computed.paddingBottom) || 0;
-    element.style.height = "auto";
-    const contentHeight = element.scrollHeight - paddingTop - paddingBottom;
-    const rows = Math.ceil(contentHeight / lineHeight);
-    const clamped = Math.max(minRows, maxRows ? Math.min(rows, maxRows) : rows);
-    element.style.height = `${clamped * lineHeight + paddingTop + paddingBottom}px`;
-    element.style.overflowY = maxRows && rows > maxRows ? "auto" : "hidden";
-}
-exports.Textarea = React.forwardRef((_a, ref) => {
-    var { className, autoResize = false, maxRows, minRows = 3, id: idProp, value, defaultValue, onChange, "aria-describedby": ariaDescribedByProp, "aria-invalid": ariaInvalidProp } = _a, rest = __rest(_a, ["className", "autoResize", "maxRows", "minRows", "id", "value", "defaultValue", "onChange", "aria-describedby", "aria-invalid"]);
-    const field = (0, form_field_1.useFormField)();
-    const id = idProp !== null && idProp !== void 0 ? idProp : (field.id || undefined);
-    const describedBy = ariaDescribedByProp !== null && ariaDescribedByProp !== void 0 ? ariaDescribedByProp : (0, form_field_1.buildAriaDescribedBy)(field);
-    const invalid = ariaInvalidProp !== undefined ? ariaInvalidProp : field.hasError || undefined;
-    const innerRef = React.useRef(null);
-    const setRefs = React.useCallback((node) => {
-        innerRef.current = node;
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current =
-                node;
-        }
-    }, [ref]);
-    React.useLayoutEffect(() => {
-        if (!autoResize)
-            return;
-        const node = innerRef.current;
-        if (!node)
-            return;
-        syncHeight(node, minRows, maxRows);
-    }, [autoResize, minRows, maxRows, value, defaultValue]);
-    const handleChange = (event) => {
-        if (autoResize && innerRef.current) {
-            syncHeight(innerRef.current, minRows, maxRows);
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange(event);
-    };
-    return (React.createElement("textarea", Object.assign({ ref: setRefs, id: id, rows: minRows, value: value, defaultValue: defaultValue, onChange: handleChange, "aria-describedby": describedBy, "aria-invalid": invalid, className: (0, utils_1.cn)("flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm transition-colors", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background", "disabled:cursor-not-allowed disabled:opacity-50", "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive", autoResize ? "resize-none" : "resize-y", className) }, rest)));
-});
-exports.Textarea.displayName = "Textarea";

package/dist/components-v2/ui/tooltip.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { type VariantProps } from "class-variance-authority";
-/**
- * TooltipProvider is mounted globally by ThemeProvider. Re-exported here for
- * consumers who render outside ThemeProvider (e.g. portal roots, tests).
- */
-export declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
-export declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
-export declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const contentVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, VariantProps<typeof contentVariants> {
-}
-export declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/components-v2/ui/tooltip.js

@@ -1,75 +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;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TooltipContent = exports.TooltipTrigger = exports.Tooltip = exports.TooltipProvider = void 0;
-const React = __importStar(require("react"));
-const TooltipPrimitive = __importStar(require("@radix-ui/react-tooltip"));
-const class_variance_authority_1 = require("class-variance-authority");
-const utils_1 = require("../../lib/utils");
-/**
- * TooltipProvider is mounted globally by ThemeProvider. Re-exported here for
- * consumers who render outside ThemeProvider (e.g. portal roots, tests).
- */
-exports.TooltipProvider = TooltipPrimitive.Provider;
-exports.Tooltip = TooltipPrimitive.Root;
-exports.TooltipTrigger = TooltipPrimitive.Trigger;
-const contentVariants = (0, class_variance_authority_1.cva)((0, utils_1.cn)("z-50 overflow-hidden rounded-md bg-foreground px-3 py-1.5 text-background shadow-md", "animate-in fade-in-0 zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2"), {
-    variants: {
-        size: {
-            sm: "px-2 py-1 text-xs",
-            md: "px-3 py-1.5 text-xs",
-        },
-    },
-    defaultVariants: {
-        size: "md",
-    },
-});
-exports.TooltipContent = React.forwardRef((_a, ref) => {
-    var { className, size, sideOffset = 4, side = "top" } = _a, rest = __rest(_a, ["className", "size", "sideOffset", "side"]);
-    return (React.createElement(TooltipPrimitive.Portal, null,
-        React.createElement(TooltipPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, side: side, className: (0, utils_1.cn)(contentVariants({ size }), className) }, rest))));
-});
-exports.TooltipContent.displayName = TooltipPrimitive.Content.displayName;

package/dist/lib/utils.d.ts

@@ -1,2 +0,0 @@
-import { type ClassValue } from "clsx";
-export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cn = cn;
-const clsx_1 = require("clsx");
-const tailwind_merge_1 = require("tailwind-merge");
-function cn(...inputs) {
-    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
-}

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;
-    }
-}