pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/Components/Input/TextInput.styles.js

@@ -1,104 +1,66 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+exports.Input = exports.fieldSizes = exports.fieldAddonSx = exports.fieldFlushedStyles = exports.fieldFilledStyles = exports.fieldPartStyles = void 0;
+const fieldStyles_1 = require("../Common/fieldStyles");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+/** Field look shared by Input, Textarea and NumberInput; `_invalid` also clears Chakra's stock invalid shadow. */
+const fieldPartStyles = (colors) => {
+    const error = colors.semanticText.error;
+    return {
+        ...(0, fieldStyles_1.fieldControlStyles)(colors),
+        _invalid: {
+            borderColor: error,
+            boxShadow: "none",
+            _hover: { borderColor: error },
+            _focusVisible: { borderColor: error, ...(0, focusRing_styles_1.fieldFocusVisible)(colors) },
+        },
+    };
+};
+exports.fieldPartStyles = fieldPartStyles;
+const fieldFilledStyles = (colors) => {
+    const filledBand = (0, planeStep_1.bandOn)(colors.background[100], colors.background[50]);
+    return {
+        ...(0, exports.fieldPartStyles)(colors),
+        bg: filledBand,
+        borderColor: "transparent",
+        _hover: { bg: filledBand, borderColor: "transparent" },
+    };
+};
+exports.fieldFilledStyles = fieldFilledStyles;
+const fieldFlushedStyles = (colors) => ({
+    ...(0, exports.fieldPartStyles)(colors),
+    bg: "transparent",
+    borderWidth: 0,
+    borderBottomWidth: fieldStyles_1.FIELD_BORDER_WIDTH,
+    borderRadius: 0,
+});
+exports.fieldFlushedStyles = fieldFlushedStyles;
+/** Look for `InputLeftAddon`/`InputRightAddon` — Chakra ships no token-aware default for these parts. */
+const fieldAddonSx = (colors) => ({
+    bg: colors.background[100],
+    borderColor: colors.boxborder[500],
+    color: colors.textMuted,
+});
+exports.fieldAddonSx = fieldAddonSx;
+const fieldSizes = (part) => Object.fromEntries(controlSizes_1.CONTROL_SIZE_NAMES.map((size) => [size, { [part]: (0, fieldStyles_1.controlSizeStyles)(size) }]));
+exports.fieldSizes = fieldSizes;
 exports.Input = {
-    baseStyle: ({ theme }) => ({
+    baseStyle: {
         field: {
-            fontWeight: 500,
-            fontSize: "0.875rem",
-            letterSpacing: "0.044rem",
-            pt: "0.813rem",
-            pb: "0.813rem",
             display: "flex",
             alignItems: "center",
-            borderRadius: "lg",
-            transition: "border-color 0.2s, box-shadow 0.2s",
-            // Every variant inherits the hint ink; only `outline` used to set it.
-            _placeholder: {
-                fontStyle: "italic",
-                color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-            },
-        },
-    }),
-    sizes: {
-        sm: {
-            field: {
-                h: "2rem",
-                fontSize: "0.8125rem",
-            },
-        },
-        md: {
-            field: {
-                h: "2.75rem",
-                fontSize: "0.875rem",
-            },
-        },
-        lg: {
-            field: {
-                h: "3.25rem",
-                fontSize: "0.9375rem",
-            },
         },
     },
+    sizes: Object.fromEntries(controlSizes_1.CONTROL_SIZE_NAMES.map((size) => [size, { field: (0, fieldStyles_1.controlSizeStyles)(size), addon: (0, fieldStyles_1.controlSizeStyles)(size) }])),
     variants: {
-        outline: (props) => {
-            const { theme } = props;
-            const errorColor = theme.colors.semanticText.error;
-            const borderColor = theme.colors.boxborder[500];
-            const shadowPrimary = theme.colors.boxShadow.primary;
-            const shadowError = theme.colors.boxShadow.error;
-            const primary = theme.colors.primary[500];
-            return {
-                field: {
-                    bg: theme.colors.gray[50],
-                    border: "0.063rem solid",
-                    borderColor,
-                    _placeholder: {
-                        color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-                    },
-                    _hover: {
-                        borderColor: primary,
-                        // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                        outline: "0"
-                    },
-                    _focus: {
-                        borderColor: primary,
-                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                        outline: "0"
-                    },
-                    _invalid: {
-                        borderColor: errorColor,
-                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        _hover: {
-                            borderColor: errorColor,
-                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                            outline: "0"
-                        },
-                        _focus: {
-                            borderColor: errorColor,
-                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                            outline: "0"
-                        },
-                    },
-                    _readOnly: {
-                        boxShadow: 'inherit',
-                    },
-                    _disabled: {
-                        bg: theme.colors.gray[100],
-                        opacity: 1,
-                        cursor: "not-allowed",
-                        _hover: {
-                            border: "0.063rem solid",
-                            borderColor,
-                        },
-                    },
-                },
-            };
-        },
+        outline: ({ theme }) => ({ field: (0, exports.fieldPartStyles)(theme.colors) }),
+        filled: ({ theme }) => ({ field: (0, exports.fieldFilledStyles)(theme.colors) }),
+        flushed: ({ theme }) => ({ field: (0, exports.fieldFlushedStyles)(theme.colors) }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: controlSizes_1.DEFAULT_CONTROL_SIZE,
     },
 };

package/dist/Components/Input/TextInputProps.d.ts

@@ -1,24 +1,63 @@
-import { InputProps } from "@chakra-ui/react";
-import type { ReactNode } from "react";
-export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "height" | "errorBorderColor" | "size" | "onKeyDown" | "onKeyUp" | "onMouseEnter" | "onMouseLeave"> & {
+import { InputProps, SystemProps } from "@chakra-ui/react";
+import type { CSSProperties, ReactNode } from "react";
+/** The library's primary single-line text field (default size `sm`, 38px; no default placeholder). `type="password"` auto-renders a show/hide toggle unless `inputRightIcon` is set or `isPasswordToggleDisabled` is true. Inside a consumer's own `FormControl`, it detects the ancestor and skips rendering its own, inheriting id/invalid/required/disabled from it. */
+export type TextInputProps = Omit<InputProps, "id" | "name" | "minW" | "maxW" | "autoComplete" | "ref" | "isInvalid"> & {
     label?: string;
+    /** Optional — an id is generated when omitted, so the label is always bound. `isRequired` sets `aria-required`, not native `required`. */
     id?: string;
     name?: string;
+    /** Marks the input invalid (error border + `aria-invalid`) and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Shown while `error` is true. Omitting it renders no message and still hides `helperText`. */
     errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
     helperText?: string;
+    /** Chakra field look: `"outline"` (default), `"filled"` (tinted, borderless until focus) or `"flushed"` (bottom border only). */
+    variant?: "outline" | "filled" | "flushed";
+    /** When set, the right icon renders as a real, focusable `<button>`. */
+    onRightIconClick?: () => void;
+    /** @deprecated Misspelt; use `onRightIconClick`, which wins when both are set. */
     onRightIconclick?: () => void;
+    /** Decorative (`aria-hidden`) unless `onRightIconClick` is set. Takes priority over the automatic password toggle. */
     inputRightIcon?: ReactNode;
+    /** Accessible name for the clickable right icon, e.g. "Show password". */
+    rightIconAriaLabel?: string;
+    /** When set, the left icon renders as a real, focusable `<button>`. */
     onLeftIconClick?: () => void;
+    /** Decorative (`aria-hidden`) unless `onLeftIconClick` is set. */
     inputLeftIcon?: ReactNode;
-    inputStyle?: object;
-    inputGroupStyle?: object;
+    /** Accessible name for the clickable left icon. */
+    leftIconAriaLabel?: string;
+    /** Non-interactive segment attached outside the field's left edge, e.g. a protocol like "https://". */
+    inputLeftAddon?: ReactNode;
+    /** Non-interactive segment attached outside the field's right edge, e.g. a unit like "kg". */
+    inputRightAddon?: ReactNode;
+    /** Shows a clear (x) button once there is a value; requires a controlled string `value` and fires `onChange` with `""`. */
+    isClearable?: boolean;
+    /** Accessible name for the clear button; defaults to "Clear" (or "<label>: Clear"). */
+    clearIconAriaLabel?: string;
+    /** Shows "length/maxLength" under the field; needs both `maxLength` and a controlled string `value`. */
+    showCharacterCount?: boolean;
+    /** Shows a spinner in place of the right icon(s) and sets `aria-busy`; does not itself disable the field. */
+    isLoading?: boolean;
+    /** Opts out of the automatic show/hide button that `type="password"` renders when no `inputRightIcon` is set. */
+    isPasswordToggleDisabled?: boolean;
+    /** Chakra style props spread onto the `<input>`; rest props spread after and win. */
+    inputStyle?: SystemProps;
+    /** Plain CSS `style` object for the InputGroup wrapper, not Chakra style props. */
+    inputGroupStyle?: CSSProperties;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. Independent of `error`/`helperText` — it lives beside the label, not in the message row below the field. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
-    leftElementStyle?: object;
-    rightElementStyle?: object;
+    /** Chakra style props for the left icon slot; its height, display and alignItems are always overridden. */
+    leftElementStyle?: SystemProps;
+    /** Chakra style props for the right icon slot; its height, display and alignItems are always overridden. */
+    rightElementStyle?: SystemProps;
     ref?: React.Ref<HTMLInputElement>;
     autoComplete?: string;
+    /** Applied to the whole field wrapper, not just the `<input>`. */
     minW?: string;
+    /** Applied to the whole field wrapper, not just the `<input>`. */
     maxW?: string;
 };

package/dist/Components/Input/textInputIconSize.d.ts

@@ -1,10 +1,5 @@
 import type { SystemStyleObject } from "@chakra-ui/styled-system";
-/**
- * Returns icon target width/height in px for a Chakra `Input` / `InputGroup` `size`.
- */
+/** Icon px for a field size, from the shared control scale; unknown sizes fall back to the default size. */
 export declare function getTextInputIconSizePx(size: string | undefined): number;
-/**
- * Scales SVG icons in the icon slot (e.g. Lucide) to match field size; plain `fontSize` does not
- * affect them because they set explicit width/height.
- */
+/** Scales SVG icons (e.g. Lucide, which set explicit width/height) in an icon slot to the field size. */
 export declare function getTextInputIconWrapperSx(size: string | undefined): SystemStyleObject;

package/dist/Components/Input/textInputIconSize.js

@@ -2,39 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTextInputIconSizePx = getTextInputIconSizePx;
 exports.getTextInputIconWrapperSx = getTextInputIconWrapperSx;
-/** Pixels: aligned with `Input` field density (Chakra `sizes.6`–`12` and typical Lucide use). */
-const TEXT_INPUT_ICON_PX = {
-    xs: 14,
-    sm: 16,
-    md: 18,
-    lg: 20,
-    xl: 24,
-};
-/**
- * Returns icon target width/height in px for a Chakra `Input` / `InputGroup` `size`.
- */
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const iconBox_1 = require("../Common/iconBox");
+/** Icon px for a field size, from the shared control scale; unknown sizes fall back to the default size. */
 function getTextInputIconSizePx(size) {
-    var _a;
-    if (!size)
-        return TEXT_INPUT_ICON_PX.md;
-    return (_a = TEXT_INPUT_ICON_PX[size]) !== null && _a !== void 0 ? _a : TEXT_INPUT_ICON_PX.md;
+    return controlSizes_1.CONTROL_SIZES[(0, controlSizes_1.isControlSize)(size) ? size : controlSizes_1.DEFAULT_CONTROL_SIZE].iconSize;
 }
-/**
- * Scales SVG icons in the icon slot (e.g. Lucide) to match field size; plain `fontSize` does not
- * affect them because they set explicit width/height.
- */
+/** Scales SVG icons (e.g. Lucide, which set explicit width/height) in an icon slot to the field size. */
 function getTextInputIconWrapperSx(size) {
-    const px = getTextInputIconSizePx(size);
-    return {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        lineHeight: 0,
-        flexShrink: 0,
-        // Override Lucide/inline width on SVG; cover direct or nested (e.g. one wrapper) icons
-        "& > svg, & > * svg, & svg": {
-            width: `${px}px !important`,
-            height: `${px}px !important`,
-        },
-    };
+    return (0, iconBox_1.iconBoxSx)(getTextInputIconSizePx(size));
 }

package/dist/Components/Input/useAriaRequired.d.ts

@@ -0,0 +1,2 @@
+/** Sets `aria-required` on a Chakra field without native `required`; Chakra's useFormControl overwrites the prop. */
+export declare const useAriaRequired: <T extends HTMLElement>(isRequired: boolean) => import("react").RefObject<T>;

package/dist/Components/Input/useAriaRequired.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAriaRequired = void 0;
+const react_1 = require("react");
+/** Sets `aria-required` on a Chakra field without native `required`; Chakra's useFormControl overwrites the prop. */
+const useAriaRequired = (isRequired) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        if (isRequired)
+            node.setAttribute("aria-required", "true");
+        else
+            node.removeAttribute("aria-required");
+    }, [isRequired]);
+    return ref;
+};
+exports.useAriaRequired = useAriaRequired;

package/dist/Components/InputTextArea/InputTextArea.d.ts

@@ -1,4 +1,5 @@
-declare const InputTextArea: import("react").ForwardRefExoticComponent<Pick<import("@chakra-ui/react").TextareaProps, "placeholder" | "resize" | "id" | "onBlur" | "onChange" | "variant" | "size" | "isDisabled" | "name" | "value" | "isReadOnly" | "isRequired" | "autoComplete"> & {
+/** Labelled multi-line text field — full width by default, label always bound (auto id), helper/error row, rest props reach the `<textarea>`. */
+declare const InputTextArea: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").TextareaProps, "width" | "isInvalid"> & {
     label?: string;
     error?: boolean;
     errorMessage?: string;

package/dist/Components/InputTextArea/InputTextArea.js

@@ -7,9 +7,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const FormLabel_1 = require("../Common/FormLabel");
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
-const InputTextArea = (0, react_1.forwardRef)(function InputTextArea({ label, placeholder, value, onChange, onBlur, name, size = "md", resize = "both", width = 500, isDisabled, isReadOnly, isRequired = false, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete = "" }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [label && (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: ref, id: id, name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, size: size, resize: resize, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height, autoComplete: autoComplete }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const useAriaRequired_1 = require("../Input/useAriaRequired");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+/** Labelled multi-line text field — full width by default, label always bound (auto id), helper/error row, rest props reach the `<textarea>`. */
+const InputTextArea = (0, react_1.forwardRef)(function InputTextArea({ label, size = controlSizes_1.DEFAULT_CONTROL_SIZE, resize = "both", width = "100%", isRequired = false, error, errorMessage, helperText, isInformation, informationMessage, id, autoComplete = "", ...rest }, ref) {
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const mergedRef = (0, react_2.useMergeRefs)(ref, (0, useAriaRequired_1.useAriaRequired)(isRequired));
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { w: width, children: [label && (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: mergedRef, size: size, resize: resize, isInvalid: error, width: "100%", autoComplete: autoComplete, ...ids.controlProps, ...rest }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 exports.default = InputTextArea;

package/dist/Components/InputTextArea/InputTextArea.style.js

@@ -1,81 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = void 0;
-const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const TextInput_styles_1 = require("../Input/TextInput.styles");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const PADDING_Y = { xs: "0.25rem", sm: "0.375rem", md: "0.5rem", lg: "0.75rem" };
 exports.Textarea = {
-    baseStyle: ({ theme }) => ({
-        fontWeight: 500,
-        fontSize: "0.875rem",
-        letterSpacing: "0.044rem",
-        pt: "0.813rem",
-        pb: "0.813rem",
-        borderRadius: "lg",
-        transition: "border-color 0.2s, box-shadow 0.2s",
-        _placeholder: {
-            fontStyle: "italic",
-            color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-        },
-    }),
-    sizes: {
-        md: {
-            fontSize: "0.875rem",
-            h: "2.75rem",
-        },
+    baseStyle: {
+        h: "auto",
+        minH: "5rem",
+        lineHeight: "short",
+        verticalAlign: "top",
     },
+    sizes: Object.fromEntries(controlSizes_1.CONTROL_SIZE_NAMES.map((size) => [
+        size,
+        { fontSize: controlSizes_1.CONTROL_SIZES[size].fontSize, px: controlSizes_1.CONTROL_SIZES[size].paddingX, py: PADDING_Y[size], h: "auto" },
+    ])),
     variants: {
-        outline: (props) => {
-            const { theme } = props;
-            const errorColor = theme.colors.semanticText.error;
-            const borderColor = theme.colors.boxborder[500];
-            const shadowPrimary = theme.colors.boxShadow.primary;
-            const shadowError = theme.colors.boxShadow.error;
-            const primary = theme.colors.primary[500];
-            return {
-                border: "0.063rem solid",
-                borderColor,
-                bg: theme.colors.gray[50],
-                _placeholder: {
-                    color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-                },
-                _hover: {
-                    borderColor: primary,
-                    outline: "0",
-                },
-                _focus: {
-                    borderColor: primary,
-                    boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                    outline: "0",
-                },
-                _invalid: {
-                    borderColor: errorColor,
-                    boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                    _hover: {
-                        borderColor: errorColor,
-                        outline: "0",
-                    },
-                    _focus: {
-                        borderColor: errorColor,
-                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        outline: "0",
-                    },
-                },
-                _readOnly: {
-                    boxShadow: 'inherit',
-                },
-                _disabled: {
-                    bg: theme.colors.gray[100],
-                    opacity: 1,
-                    cursor: "not-allowed",
-                    _hover: {
-                        border: "0.063rem solid",
-                        borderColor,
-                    },
-                },
-            };
-        },
+        outline: ({ theme }) => (0, TextInput_styles_1.fieldPartStyles)(theme.colors),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: controlSizes_1.DEFAULT_CONTROL_SIZE,
     },
 };

package/dist/Components/InputTextArea/InputTextAreaProps.d.ts

@@ -1,12 +1,20 @@
 import { TextareaProps } from "@chakra-ui/react";
-export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "onBlur" | "name" | "id" | "size" | "resize" | "isDisabled" | "isReadOnly" | "isRequired" | "variant" | "autoComplete"> & {
+/** Multi-line field; every other Chakra `Textarea` prop (`maxLength`, `onKeyDown`, `sx`, `aria-*`…) is spread onto the `<textarea>`. */
+export type InputTextAreaProps = Omit<TextareaProps, "width" | "isInvalid"> & {
     label?: string;
+    /** Marks the textarea invalid (error border + `aria-invalid`) and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Shown while `error` is true. Omitting it renders no message and still hides `helperText`. */
     errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
     helperText?: string;
+    /** Width of the whole field (label + textarea + message). Defaults to `"100%"`. */
     width?: string | number;
     rows?: number;
+    /** Height of the `<textarea>` itself; the field grows with the message row. */
     height?: string | number;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
 };

package/dist/Components/KanbanBoard/AccountCard.d.ts

@@ -1,10 +1,13 @@
 import React from "react";
 import { Account, KanbanBoardProps } from "./KanbanBoardProps";
+/** Renders one card; if `account.customNode` is set it fully replaces this (and the built-in delete/open/expand) — not exported from the package. */
 declare const AccountCard: React.MemoExoticComponent<({ account, onDelete, onOpen, isExpanded, onToggleExpand, isDeletable, }: {
     account: Account;
+    /** Accepted but never read inside the component — has no effect on rendering, keys, or ordering. */
     index?: number;
     onDelete: KanbanBoardProps["onDelete"];
     onOpen: KanbanBoardProps["onOpen"];
+    /** When false, shows only the first 4 string fields; `details` never renders until this is true. */
     isExpanded?: boolean;
     onToggleExpand?: () => void;
     isDeletable?: boolean;

package/dist/Components/KanbanBoard/AccountCard.js

@@ -42,25 +42,32 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const AccountRow_1 = __importDefault(require("./AccountRow"));
 const excludeKeys = ["id", "details"];
+const ACTION_TRANSITION = (0, motion_1.transitionFor)(["background-color", "color"]);
+/** Renders one card; if `account.customNode` is set it fully replaces this (and the built-in delete/open/expand) — not exported from the package. */
 const AccountCard = react_1.default.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
+    const errorTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.error);
+    const openHover = (0, planeStep_1.bandOn)(colors.primary[50], colors.background[50]);
     const keys = (0, react_1.useMemo)(() => Object.keys(account).filter((key) => typeof account[key] === "string" && !excludeKeys.includes(key)), [account]);
     const visibleKeys = isExpanded ? keys : keys.slice(0, 4);
     const handleToggle = () => {
         onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
     };
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", width: "100%", borderRadius: "lg", background: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, boxShadow: "sm", p: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease", _hover: {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", width: "100%", borderRadius: "xl", background: colors.background[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, p: 3, boxSizing: "border-box", minHeight: isExpanded ? "11.25rem" : "5rem", transition: (0, motion_1.transitionFor)(["border-color", "box-shadow", "transform"]), sx: (0, motion_2.reducedMotionSx)({ transform: "none" }), _hover: {
             borderColor: colors.primary[300],
             boxShadow: "md",
-            transform: "translateY(-0.063rem)",
-        }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: colors.text[500], children: [visibleKeys.map((key) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { pt: 2, fontSize: "0.8125rem", color: colors.text[600], children: account.details }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: colors.accentText, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: colors.primary[700] }, children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: colors.textMuted, transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: colors.textMuted, transition: "background 0.15s ease, color 0.15s ease", _hover: {
-                                            bg: colors.primary[50],
-                                            color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]),
+            transform: "translateY(-1px)",
+        }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "sm", color: colors.text[500], children: [visibleKeys.map((key) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { pt: 2, fontSize: "xs-plus", color: colors.text[600], children: account.details }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { as: "button", type: "button", "aria-expanded": isExpanded, color: colors.accentText, fontSize: "xs", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, borderRadius: "sm", _hover: { textDecoration: "underline" }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity"]), _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, sx: (0, motion_2.reducedMotionSx)(), children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, _hover: {
+                                            bg: openHover,
+                                            color: (0, accentText_1.accentTextOnCanvas)(colors.primary, openHover),
                                         }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 15 }) }) })] })] })] }) }));
 });
 exports.default = AccountCard;

package/dist/Components/KanbanBoard/AccountRow.d.ts

@@ -1,3 +1,4 @@
+/** Renders one label:value row; `label` is re-run through `toWords`, which splits snake_case, kebab-case and camelCase. */
 declare const AccountRow: ({ label, value }: {
     label: string;
     value: string;

package/dist/Components/KanbanBoard/AccountRow.js

@@ -4,8 +4,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const functions_1 = require("../../Utils/functions");
+/** Renders one label:value row; `label` is re-run through `toWords`, which splits snake_case, kebab-case and camelCase. */
 const AccountRow = ({ label, value }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "full", gap: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "0.75rem", children: (0, functions_1.toWords)(label) }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem", children: ":" }), (0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem", children: value }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "full", gap: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "xs", children: (0, functions_1.toWords)(label) }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { w: "0.75rem", textAlign: "center", fontSize: "xs", children: ":" }), (0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "xs", children: value }) })] }));
 };
 exports.default = AccountRow;

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.d.ts

@@ -1,7 +1,9 @@
 import { OptionProp } from "../../Select/SelectProps";
+/** Standalone filter+Edit+Create bar, exported from the package; KanbanBoard itself uses HeaderActions. */
 declare const KanbanActions: ({ options, onSelectChange, onEdit, onCreate, }: {
     options: OptionProp[];
     onSelectChange?: (option?: OptionProp) => void;
+    /** Unlike `HeaderActions`, there is no `isEditable`/`isCreatable` gate — both buttons always render. */
     onEdit?: () => void;
     onCreate?: () => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.js

@@ -9,10 +9,10 @@ const Select_1 = __importDefault(require("../../Select/Select"));
 const lucide_react_1 = require("lucide-react");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const Button_1 = __importDefault(require("../../Button/Button"));
+/** Standalone filter+Edit+Create bar, exported from the package; KanbanBoard itself uses HeaderActions. */
 const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [(0, jsx_runtime_1.jsx)(Select_1.default, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "solid", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 20, color: (0, accentText_1.onFilled)(colors.primary[500], colors.white, colors.black) }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [(0, jsx_runtime_1.jsx)(Select_1.default, { native: false, options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "solid", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
 };
 exports.default = KanbanActions;

package/dist/Components/KanbanBoard/KanbanBoard.d.ts

@@ -1,3 +1,4 @@
 import { KanbanBoardProps } from "./KanbanBoardProps";
-declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, preferences, }: KanbanBoardProps) => import("react/jsx-runtime").JSX.Element | null;
+/** Full drag-and-drop board (columns + virtualized cards); its header select/edit/create bar is `HeaderActions`, not the unrelated `KanbanActions`. */
+declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete: onDeleteProp, onOpen: onOpenProp, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, preferences, height, maxH, }: KanbanBoardProps) => import("react/jsx-runtime").JSX.Element | null;
 export default KanbanBoard;