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

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

@@ -1,101 +1,58 @@
-import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { controlSizeStyles, fieldControlStyles, FIELD_BORDER_WIDTH } from "../Common/fieldStyles.js";
+import { CONTROL_SIZE_NAMES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+/** Field look shared by Input, Textarea and NumberInput; `_invalid` also clears Chakra's stock invalid shadow. */
+export const fieldPartStyles = (colors) => {
+    const error = colors.semanticText.error;
+    return {
+        ...fieldControlStyles(colors),
+        _invalid: {
+            borderColor: error,
+            boxShadow: "none",
+            _hover: { borderColor: error },
+            _focusVisible: { borderColor: error, ...fieldFocusVisible(colors) },
+        },
+    };
+};
+export const fieldFilledStyles = (colors) => {
+    const filledBand = bandOn(colors.background[100], colors.background[50]);
+    return {
+        ...fieldPartStyles(colors),
+        bg: filledBand,
+        borderColor: "transparent",
+        _hover: { bg: filledBand, borderColor: "transparent" },
+    };
+};
+export const fieldFlushedStyles = (colors) => ({
+    ...fieldPartStyles(colors),
+    bg: "transparent",
+    borderWidth: 0,
+    borderBottomWidth: FIELD_BORDER_WIDTH,
+    borderRadius: 0,
+});
+/** Look for `InputLeftAddon`/`InputRightAddon` — Chakra ships no token-aware default for these parts. */
+export const fieldAddonSx = (colors) => ({
+    bg: colors.background[100],
+    borderColor: colors.boxborder[500],
+    color: colors.textMuted,
+});
+export const fieldSizes = (part) => Object.fromEntries(CONTROL_SIZE_NAMES.map((size) => [size, { [part]: controlSizeStyles(size) }]));
 export const 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: 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(CONTROL_SIZE_NAMES.map((size) => [size, { field: controlSizeStyles(size), addon: 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: 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: fieldPartStyles(theme.colors) }),
+        filled: ({ theme }) => ({ field: fieldFilledStyles(theme.colors) }),
+        flushed: ({ theme }) => ({ field: fieldFlushedStyles(theme.colors) }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: DEFAULT_CONTROL_SIZE,
     },
 };

package/dist/esm/Components/Input/textInputIconSize.js

@@ -1,36 +1,10 @@
-/** 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`.
- */
+import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE, isControlSize, } from "../../Theme/tokens/primitives/controlSizes.js";
+import { iconBoxSx } from "../Common/iconBox.js";
+/** Icon px for a field size, from the shared control scale; unknown sizes fall back to the default size. */
 export 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 CONTROL_SIZES[isControlSize(size) ? size : 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. */
 export 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 iconBoxSx(getTextInputIconSizePx(size));
 }

package/dist/esm/Components/Input/useAriaRequired.js

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+/** Sets `aria-required` on a Chakra field without native `required`; Chakra's useFormControl overwrites the prop. */
+export const useAriaRequired = (isRequired) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        if (isRequired)
+            node.setAttribute("aria-required", "true");
+        else
+            node.removeAttribute("aria-required");
+    }, [isRequired]);
+    return ref;
+};

package/dist/esm/Components/InputTextArea/InputTextArea.js

@@ -1,10 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { FormControl, Textarea, } from "@chakra-ui/react";
+import { FormControl, Textarea, useMergeRefs } from "@chakra-ui/react";
 import { TextLabel } from "../Common/FormLabel.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
-import HelperText from "../Common/HelperText.js";
-const InputTextArea = 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 (_jsxs(FormControl, { children: [label && _jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), _jsx(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 && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { useAriaRequired } from "../Input/useAriaRequired.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+/** Labelled multi-line text field — full width by default, label always bound (auto id), helper/error row, rest props reach the `<textarea>`. */
+const InputTextArea = forwardRef(function InputTextArea({ label, size = DEFAULT_CONTROL_SIZE, resize = "both", width = "100%", isRequired = false, error, errorMessage, helperText, isInformation, informationMessage, id, autoComplete = "", ...rest }, ref) {
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const mergedRef = useMergeRefs(ref, useAriaRequired(isRequired));
+    return (_jsxs(FormControl, { w: width, children: [label && _jsx(TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), _jsx(Textarea, { ref: mergedRef, size: size, resize: resize, isInvalid: error, width: "100%", autoComplete: autoComplete, ...ids.controlProps, ...rest }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 export default InputTextArea;

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

@@ -1,78 +1,22 @@
-import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { fieldPartStyles } from "../Input/TextInput.styles.js";
+import { CONTROL_SIZES, CONTROL_SIZE_NAMES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+const PADDING_Y = { xs: "0.25rem", sm: "0.375rem", md: "0.5rem", lg: "0.75rem" };
 export const 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: placeholderInk(theme.colors),
-        },
-    }),
-    sizes: {
-        md: {
-            fontSize: "0.875rem",
-            h: "2.75rem",
-        },
+    baseStyle: {
+        h: "auto",
+        minH: "5rem",
+        lineHeight: "short",
+        verticalAlign: "top",
     },
+    sizes: Object.fromEntries(CONTROL_SIZE_NAMES.map((size) => [
+        size,
+        { fontSize: CONTROL_SIZES[size].fontSize, px: 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: 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 }) => fieldPartStyles(theme.colors),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: DEFAULT_CONTROL_SIZE,
     },
 };

package/dist/esm/Components/KanbanBoard/AccountCard.js

@@ -3,26 +3,33 @@ import React, { useMemo } from "react";
 import { Box, Flex, Text, Tooltip, HStack, VStack, Collapse, Spacer, } from "@chakra-ui/react";
 import { ChevronDown, ChevronUp, ExternalLink, Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import AccountRow from "./AccountRow.js";
 const excludeKeys = ["id", "details"];
+const ACTION_TRANSITION = 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.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
     const { colors } = useCustomTheme();
-    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = resolveStatusTone(colors.semantic.error, mode);
+    const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    const openHover = bandOn(colors.primary[50], colors.background[50]);
     const keys = 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 (_jsx(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 (_jsx(Box, { role: "group", width: "100%", borderRadius: "xl", background: colors.background[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, p: 3, boxSizing: "border-box", minHeight: isExpanded ? "11.25rem" : "5rem", transition: transitionFor(["border-color", "box-shadow", "transform"]), sx: reducedMotionSx({ transform: "none" }), _hover: {
             borderColor: colors.primary[300],
             boxShadow: "md",
-            transform: "translateY(-0.063rem)",
-        }, children: _jsxs(VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: colors.text[500], children: [visibleKeys.map((key) => (_jsx(AccountRow, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), _jsx(Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: _jsx(Text, { pt: 2, fontSize: "0.8125rem", color: colors.text[600], children: account.details }) }), _jsxs(Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? (_jsxs(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 ? _jsx(ChevronUp, { size: 13 }) : _jsx(ChevronDown, { size: 13 })] })) : (_jsx(Spacer, {})), _jsxs(HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && (_jsx(Tooltip, { label: "Delete", hasArrow: true, children: _jsx(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: _jsx(Trash2, { size: 15 }) }) })), _jsx(Tooltip, { label: "Open", hasArrow: true, children: _jsx(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: accentTextOnCanvas(colors.primary, colors.primary[50]),
+            transform: "translateY(-1px)",
+        }, children: _jsxs(VStack, { align: "stretch", spacing: 1, fontSize: "sm", color: colors.text[500], children: [visibleKeys.map((key) => (_jsx(AccountRow, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), _jsx(Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: _jsx(Text, { pt: 2, fontSize: "xs-plus", color: colors.text[600], children: account.details }) }), _jsxs(Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? (_jsxs(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: focusVisibleStyles(colors), children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? _jsx(ChevronUp, { size: 13 }) : _jsx(ChevronDown, { size: 13 })] })) : (_jsx(Spacer, {})), _jsxs(HStack, { spacing: 1, opacity: 0, transition: transitionFor(["opacity"]), _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, sx: reducedMotionSx(), children: [isDeletable && (_jsx(Tooltip, { label: "Delete", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: _jsx(Trash2, { size: 15 }) }) })), _jsx(Tooltip, { label: "Open", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: {
+                                            bg: openHover,
+                                            color: accentTextOnCanvas(colors.primary, openHover),
                                         }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: _jsx(ExternalLink, { size: 15 }) }) })] })] })] }) }));
 });
 export default AccountCard;

package/dist/esm/Components/KanbanBoard/AccountRow.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Text, Tooltip, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { toWords } from "../../Utils/functions.js";
+/** 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 } = useCustomTheme();
-    return (_jsxs(Flex, { w: "full", gap: 1, children: [_jsx(Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: _jsx(Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "0.75rem", children: toWords(label) }) }), _jsx(Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem", children: ":" }), _jsx(Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: _jsx(Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem", children: value }) })] }));
+    return (_jsxs(Flex, { w: "full", gap: 1, children: [_jsx(Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: _jsx(Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "xs", children: toWords(label) }) }), _jsx(Text, { w: "0.75rem", textAlign: "center", fontSize: "xs", children: ":" }), _jsx(Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: _jsx(Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "xs", children: value }) })] }));
 };
 export default AccountRow;

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

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "@chakra-ui/react";
 import Select from "../../Select/Select.js";
 import { CirclePlus, SquarePen } from "lucide-react";
-import VeritcalDivider from "../../Divider/Divider.js";
+import VerticalDivider from "../../Divider/Divider.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
 import Button from "../../Button/Button.js";
+/** Standalone filter+Edit+Create bar, exported from the package; KanbanBoard itself uses HeaderActions. */
 const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VeritcalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20, color: onFilled(colors.primary[500], colors.white, colors.black) }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { native: false, options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VerticalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
 };
 export default KanbanActions;