pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

package/dist/Theme/chakra/Avatar.styles.d.ts

@@ -1,32 +0,0 @@
-import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $badgeBorder: {
-    variable: string;
-    reference: string;
-};
-export declare const Avatar: {
-    baseStyle?: (({ theme }: StyleFunctionProps) => {
-        badge: {
-            [$badgeBorder.variable]: string;
-        };
-        container: {
-            [$badgeBorder.variable]: string;
-        };
-    }) | undefined;
-    sizes?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
-        }>;
-    } | undefined;
-    variants?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
-        }>;
-    } | undefined;
-    defaultProps?: {
-        size?: string | number | undefined;
-        variant?: string | number | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("group" | "label" | "container" | "badge" | "excessLabel")[];
-};
-export {};

package/dist/Theme/chakra/Avatar.styles.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-const paletteFromTheme_1 = require("./paletteFromTheme");
-const react_1 = require("@chakra-ui/react");
-const anatomy_1 = require("@chakra-ui/anatomy");
-const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.avatarAnatomy.keys);
-const $badgeBorder = (0, react_1.cssVar)("avatar-border-color");
-/**
- * Same bug class as Menu/Modal/Popover: Chakra's own Avatar baseStyle hardcodes the badge/
- * container border color to `colors.white` outside `_dark` (it's a cutout ring meant to match
- * the surface the avatar sits on), gated behind `_dark`, which this theme-swap app never
- * triggers. Every bare `<Avatar>`/`<AvatarBadge>` renders a white ring on the dark canvas.
- */
-const baseStyle = definePartsStyle(({ theme }) => {
-    const border = (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light;
-    return {
-        badge: {
-            [$badgeBorder.variable]: border,
-        },
-        container: {
-            [$badgeBorder.variable]: border,
-        },
-    };
-});
-exports.Avatar = defineMultiStyleConfig({
-    baseStyle,
-});

package/dist/Theme/chakra/Switch.styles.d.ts

@@ -1,30 +0,0 @@
-import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $thumbBg: {
-    variable: string;
-    reference: string;
-};
-export declare const Switch: {
-    baseStyle?: (({ theme }: StyleFunctionProps) => {
-        thumb: {
-            [$thumbBg.variable]: string;
-            bg: string;
-        };
-    }) | undefined;
-    sizes?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("label" | "track" | "container" | "thumb")[];
-        }>;
-    } | undefined;
-    variants?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("label" | "track" | "container" | "thumb")[];
-        }>;
-    } | undefined;
-    defaultProps?: {
-        size?: string | number | undefined;
-        variant?: string | number | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("label" | "track" | "container" | "thumb")[];
-};
-export {};

package/dist/Theme/chakra/Switch.styles.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = void 0;
-const react_1 = require("@chakra-ui/react");
-const anatomy_1 = require("@chakra-ui/anatomy");
-const paletteFromTheme_1 = require("./paletteFromTheme");
-const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.switchAnatomy.keys);
-const $thumbBg = (0, react_1.cssVar)("switch-thumb-bg");
-/**
- * Same bug as Slider's thumb: Chakra's own Switch thumb baseStyle hardcodes `bg: "white"` with no
- * `_dark` gate at all, so every bare `<Switch>` renders a literal white knob on the dark canvas
- * regardless of mode.
- */
-const baseStyle = definePartsStyle(({ theme }) => ({
-    thumb: {
-        [$thumbBg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
-        bg: $thumbBg.reference,
-    },
-}));
-exports.Switch = defineMultiStyleConfig({
-    baseStyle,
-});

package/dist/Theme/chakra/Tabs.styles.d.ts

@@ -1,42 +0,0 @@
-import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $bg: {
-    variable: string;
-    reference: string;
-};
-declare const $border: {
-    variable: string;
-    reference: string;
-};
-export declare const Tabs: {
-    baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
-        keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-    }> | undefined;
-    sizes?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-        }>;
-    } | undefined;
-    variants?: {
-        enclosed: ({ theme }: StyleFunctionProps) => {
-            tab: {
-                _selected: {
-                    [$border.variable]: string;
-                };
-            };
-        };
-        "enclosed-colored": ({ theme }: StyleFunctionProps) => {
-            tab: {
-                _selected: {
-                    [$bg.variable]: string;
-                };
-            };
-        };
-    } | undefined;
-    defaultProps?: {
-        size?: string | number | undefined;
-        variant?: "enclosed" | "enclosed-colored" | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
-};
-export {};

package/dist/Theme/chakra/Tabs.styles.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = void 0;
-const paletteFromTheme_1 = require("./paletteFromTheme");
-const react_1 = require("@chakra-ui/react");
-const anatomy_1 = require("@chakra-ui/anatomy");
-const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.tabsAnatomy.keys);
-const $bg = (0, react_1.cssVar)("tabs-bg");
-const $border = (0, react_1.cssVar)("tabs-border-color");
-/**
- * Same bug class as Menu/Modal/Popover: Chakra's own Tabs baseStyle hardcodes the selected tab's
- * "cutout" color to `colors.white` outside `_dark` for two variants — `enclosed`'s selected border
- * (meant to match the panel it sits against) and `enclosed-colored`'s selected background — both
- * gated behind `_dark`, which this theme-swap app never triggers. Every selected `enclosed`/
- * `enclosed-colored` tab renders a white seam/fill on the dark canvas.
- */
-const variantEnclosed = definePartsStyle(({ theme }) => ({
-    tab: {
-        _selected: {
-            [$border.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
-        },
-    },
-}));
-const variantEnclosedColored = definePartsStyle(({ theme }) => ({
-    tab: {
-        _selected: {
-            [$bg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
-        },
-    },
-}));
-exports.Tabs = defineMultiStyleConfig({
-    variants: {
-        enclosed: variantEnclosed,
-        "enclosed-colored": variantEnclosedColored,
-    },
-});

package/dist/esm/Components/PinInputs/PinInputs.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { Box, HStack, Input } from "@chakra-ui/react";
-import Label from "../Common/Label.js";
-import ErrorComponent from "../Common/ErrorComponent.js";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-/** Unused hand-rolled OTP input — not exported from index.ts and not referenced anywhere in this repo; use `PinInput` (from `Components/PinInput/`) instead. */
-const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
-    const { colors } = useCustomTheme();
-    const [values, setValues] = useState(Array(length).fill(""));
-    const inputsRef = useRef([]);
-    const borderColor = error
-        ? colors.semanticText.error
-        : colors.boxborder[500];
-    const focusRing = error ? colors.boxShadow.error : colors.boxShadow.primary;
-    const focusShadow = `0 0 0 0.125rem ${focusRing}`;
-    const handleChange = (index, value) => {
-        var _a;
-        if (!/^[0-9]?$/.test(value))
-            return;
-        const newValues = [...values];
-        newValues[index] = value;
-        setValues(newValues);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(""));
-        if (value && index < length - 1) {
-            (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        if (newValues.every((v) => v !== "")) {
-            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValues.join(""));
-        }
-    };
-    const handleKeyDown = (e, index) => {
-        var _a;
-        if (e.key === "Backspace" && !values[index] && index > 0) {
-            (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    };
-    return (_jsxs(Box, { children: [label && _jsx(Label, { label: label }), _jsx(HStack, { spacing: 2, children: Array.from({ length }).map((_, index) => (_jsx(Input, { ref: (el) => {
-                        inputsRef.current[index] = el;
-                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: { boxShadow: focusShadow, outline: "none" } }, index))) }), error && _jsx(ErrorComponent, { error: error })] }));
-};
-export default PinInputs;

package/dist/esm/Components/Table/hooks/useDebounce.js

@@ -1,22 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-// First, create a custom debounce hook
-const useDebounce = (callback, delay) => {
-    const timeoutRef = useRef();
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    const debouncedCallback = useCallback((...args) => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(() => {
-            callback(...args);
-        }, delay);
-    }, [callback, delay]);
-    return debouncedCallback;
-};
-export default useDebounce;

package/dist/esm/Components/Trail/EditableCell.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { Box, Input, Button, Menu, MenuButton, MenuList, MenuItem, useOutsideClick, } from "@chakra-ui/react";
-import { ChevronDown } from "lucide-react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-/** Inline editable cell driven entirely by parent-owned row state — no internal draft state of its own. */
-export const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChange, }) => {
-    const { colors } = useCustomTheme();
-    const cellRef = useRef(null);
-    useOutsideClick({
-        ref: cellRef,
-        handler: () => {
-            var _a;
-            return handleCellChange(row.id, column.label, String((_a = row[column.label]) !== null && _a !== void 0 ? _a : ""));
-        },
-    });
-    const value = row[column.label] || "-";
-    if (isEditable) {
-        if (column.label === "dueDate") {
-            return (_jsx(Box, { width: "50%", ref: cellRef, children: _jsx(Input, { type: "date", value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
-        }
-        else if (column.label === "priority") {
-            return (_jsx(Box, { width: "100%", ref: cellRef, children: _jsxs(Menu, { isOpen: true, children: [_jsx(MenuButton, { as: Button, rightIcon: _jsx(ChevronDown, {}), bg: colors.teal[50], color: accentTextOnCanvas(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), _jsxs(MenuList, { children: [_jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), children: "Low" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), children: "Medium" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), children: "High" })] })] }) }));
-        }
-        else {
-            return (_jsx(Box, { width: "100%", ref: cellRef, children: _jsx(Input, { value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
-        }
-    }
-    return (_jsx("span", { onClick: () => handleCellClick(row.id, column.id), children: value }));
-};

package/dist/esm/Components/Trail/SelectAllCheckbox.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox } from "@chakra-ui/react";
-/** Purely presentational — isAllSelected/isIndeterminate must be computed and owned entirely by the parent. */
-export const SelectAllCheckbox = ({ isAllSelected, isIndeterminate, handleSelectAll, }) => {
-    return (_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: handleSelectAll }));
-};

package/dist/esm/Components/Trail/TrailWorks.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Thead, Table, Tr, Th, Tbody, Td, Checkbox, } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-/** Hardcoded 2-row demo table with no props at all — not a reusable grid; use Table for a real editable/selectable list. */
-const TrailWorks = () => {
-    const { colors } = useCustomTheme();
-    const cellBorder = colors.boxborder[200];
-    const data = [
-        {
-            contact: "John Doe",
-            type: "Customer",
-            deals: 5,
-            phone: "555-555-5555",
-            email: "hhhhh@gmail.com",
-        },
-        {
-            contact: "John Doe",
-            type: "Customer",
-            deals: 5,
-            phone: "555-555-5555",
-            email: "hhhhh@gmail.com",
-        },
-    ];
-    const columns = [
-        {
-            Header: "Contact",
-            accessor: "contact",
-        },
-        {
-            Header: "Type",
-            accessor: "type",
-        },
-        {
-            Header: "Deals",
-            accessor: "deals",
-        },
-        {
-            Header: "Phone",
-            accessor: "phone",
-        },
-        {
-            Header: "Email",
-            accessor: "email",
-        },
-    ];
-    const renderRow = (row, index) => {
-        return (_jsxs(Tr, { border: "1px solid", borderColor: cellBorder, children: [_jsx(Td, { border: "1px solid", borderColor: cellBorder, padding: "5px", children: _jsx(Checkbox, {}) }), columns.map((column, colIndex) => {
-                    return (_jsx(Td, { border: "1px solid", borderColor: cellBorder, children: row[column.accessor] }, colIndex));
-                })] }, index));
-    };
-    return (_jsx(Box, { width: "100%", overflowX: "auto", children: _jsxs(Table, { variant: "simple", size: "md", border: "1px solid", borderColor: cellBorder, children: [_jsx(Thead, { border: "1px solid", borderColor: cellBorder, children: _jsxs(Tr, { border: "1px solid", borderColor: cellBorder, children: [_jsx(Th, { border: "1px solid", borderColor: cellBorder, padding: "5px", children: _jsx(Checkbox, {}) }), columns.map((column, index) => {
-                                return (_jsx(Th, { border: "1px solid", borderColor: cellBorder, children: column.Header }, index));
-                            })] }) }), _jsx(Tbody, { border: "1px solid", borderColor: cellBorder, children: data.map((row, index) => renderRow(row, index)) })] }) }));
-};
-export default TrailWorks;

package/dist/esm/Components/Trail/data.js

@@ -1,26 +0,0 @@
-export const initialColumns = [
-    { id: 1, label: "project" },
-    { id: 2, label: "owner" },
-    { id: 3, label: "status" },
-    { id: 4, label: "priority" },
-    { id: 5, label: "dueDate" },
-];
-export const initialRows = [
-    {
-        id: 1,
-        project: "Project A",
-        owner: "Owner A",
-        status: "In Progress",
-        priority: "High",
-        dueDate: "2023-12-31",
-    },
-    {
-        id: 2,
-        project: "Project B",
-        owner: "Owner B",
-        status: "Completed",
-        priority: "Medium",
-        dueDate: "2023-11-30",
-    },
-    // Add more initial rows as needed
-];

package/dist/esm/Theme/chakra/Avatar.styles.js

@@ -1,25 +0,0 @@
-import { paletteOf } from "./paletteFromTheme.js";
-import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
-import { avatarAnatomy } from "@chakra-ui/anatomy";
-const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(avatarAnatomy.keys);
-const $badgeBorder = cssVar("avatar-border-color");
-/**
- * Same bug class as Menu/Modal/Popover: Chakra's own Avatar baseStyle hardcodes the badge/
- * container border color to `colors.white` outside `_dark` (it's a cutout ring meant to match
- * the surface the avatar sits on), gated behind `_dark`, which this theme-swap app never
- * triggers. Every bare `<Avatar>`/`<AvatarBadge>` renders a white ring on the dark canvas.
- */
-const baseStyle = definePartsStyle(({ theme }) => {
-    const border = paletteOf(theme).backgroundColor.light;
-    return {
-        badge: {
-            [$badgeBorder.variable]: border,
-        },
-        container: {
-            [$badgeBorder.variable]: border,
-        },
-    };
-});
-export const Avatar = defineMultiStyleConfig({
-    baseStyle,
-});

package/dist/esm/Theme/chakra/Switch.styles.js

@@ -1,19 +0,0 @@
-import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
-import { switchAnatomy } from "@chakra-ui/anatomy";
-import { paletteOf } from "./paletteFromTheme.js";
-const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(switchAnatomy.keys);
-const $thumbBg = cssVar("switch-thumb-bg");
-/**
- * Same bug as Slider's thumb: Chakra's own Switch thumb baseStyle hardcodes `bg: "white"` with no
- * `_dark` gate at all, so every bare `<Switch>` renders a literal white knob on the dark canvas
- * regardless of mode.
- */
-const baseStyle = definePartsStyle(({ theme }) => ({
-    thumb: {
-        [$thumbBg.variable]: paletteOf(theme).backgroundColor.light,
-        bg: $thumbBg.reference,
-    },
-}));
-export const Switch = defineMultiStyleConfig({
-    baseStyle,
-});

package/dist/esm/Theme/chakra/Tabs.styles.js

@@ -1,33 +0,0 @@
-import { paletteOf } from "./paletteFromTheme.js";
-import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
-import { tabsAnatomy } from "@chakra-ui/anatomy";
-const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(tabsAnatomy.keys);
-const $bg = cssVar("tabs-bg");
-const $border = cssVar("tabs-border-color");
-/**
- * Same bug class as Menu/Modal/Popover: Chakra's own Tabs baseStyle hardcodes the selected tab's
- * "cutout" color to `colors.white` outside `_dark` for two variants — `enclosed`'s selected border
- * (meant to match the panel it sits against) and `enclosed-colored`'s selected background — both
- * gated behind `_dark`, which this theme-swap app never triggers. Every selected `enclosed`/
- * `enclosed-colored` tab renders a white seam/fill on the dark canvas.
- */
-const variantEnclosed = definePartsStyle(({ theme }) => ({
-    tab: {
-        _selected: {
-            [$border.variable]: paletteOf(theme).backgroundColor.light,
-        },
-    },
-}));
-const variantEnclosedColored = definePartsStyle(({ theme }) => ({
-    tab: {
-        _selected: {
-            [$bg.variable]: paletteOf(theme).backgroundColor.light,
-        },
-    },
-}));
-export const Tabs = defineMultiStyleConfig({
-    variants: {
-        enclosed: variantEnclosed,
-        "enclosed-colored": variantEnclosedColored,
-    },
-});