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

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

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

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

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

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

package/dist/lib/utils.js

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

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

@@ -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.198",
+  "version": "2.3.1-beta.1",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -106,4 +106,4 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
-}
+}