alicia-design-system 1.110.13 → 1.111.0

package/dist/cjs/alicia-ui/common/Buttons/ButtonBrand.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { type ButtonProps } from '@chakra-ui/react';
+export type ButtonBrandProps = ButtonProps;
+/**
+ * Brand-aware button component.
+ *
+ * Styles are defined in `aliciaDesignTheme.ts` via `buttonBrandRecipe`.
+ * The recipe is registered globally as `recipes.button`, extending Chakra's
+ * built-in button recipe — so existing buttons using `solid`, `outline` etc.
+ * are completely unaffected.
+ *
+ * Import via the `/brand` subpath:
+ * ```ts
+ * import { Button } from 'alicia-design-system/brand';
+ * ```
+ *
+ * @example Primary CTA
+ * ```tsx
+ * <Button variant="primary" onClick={handleClick}>
+ *   Plan een gesprek
+ * </Button>
+ * ```
+ *
+ * @example Secondary
+ * ```tsx
+ * <Button variant="secondary">Bekijk platform</Button>
+ * ```
+ *
+ * @example Compact for header
+ * ```tsx
+ * <Button variant="primary" size="compact">Header CTA</Button>
+ * ```
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/alicia-ui/common/Buttons/ButtonBrand.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const react_1 = require("@chakra-ui/react");
+// ─── Component ────────────────────────────────────────────────────────────────
+/**
+ * Brand-aware button component.
+ *
+ * Styles are defined in `aliciaDesignTheme.ts` via `buttonBrandRecipe`.
+ * The recipe is registered globally as `recipes.button`, extending Chakra's
+ * built-in button recipe — so existing buttons using `solid`, `outline` etc.
+ * are completely unaffected.
+ *
+ * Import via the `/brand` subpath:
+ * ```ts
+ * import { Button } from 'alicia-design-system/brand';
+ * ```
+ *
+ * @example Primary CTA
+ * ```tsx
+ * <Button variant="primary" onClick={handleClick}>
+ *   Plan een gesprek
+ * </Button>
+ * ```
+ *
+ * @example Secondary
+ * ```tsx
+ * <Button variant="secondary">Bekijk platform</Button>
+ * ```
+ *
+ * @example Compact for header
+ * ```tsx
+ * <Button variant="primary" size="compact">Header CTA</Button>
+ * ```
+ */
+exports.Button = react_1.Button;
+//# sourceMappingURL=ButtonBrand.js.map

package/dist/cjs/alicia-ui/common/Buttons/ButtonBrand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBrand.js","sourceRoot":"","sources":["../../../../../src/alicia-ui/common/Buttons/ButtonBrand.tsx"],"names":[],"mappings":";;;AAAA,4CAA4E;AAM5E,iFAAiF;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACU,QAAA,MAAM,GAAG,cAAY,CAAC"}

package/dist/cjs/alicia-ui/common/List/ListBrand.d.ts

@@ -0,0 +1,38 @@
+import { type CustomListItemProps, type ListProps } from './ListBrand.types';
+export type { ListOption, ListProps, CustomListItemProps, } from './ListBrand.types';
+export declare const CustomListItem: (props: CustomListItemProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Brand-aware ordered/unordered list component.
+ *
+ * Import via the `/brand` subpath to use the Alicia design tokens:
+ * ```ts
+ * import { List } from 'alicia-design-system/brand';
+ * ```
+ *
+ * @example Plain ordered list
+ * ```tsx
+ * <List
+ *   list={steps}
+ *   type="ordered"
+ *   bubbleProps={{ bg: 'volt.500', color: 'ink.900' }}
+ *   enableVisualEffects
+ * />
+ * ```
+ *
+ * @example Card variant with staggered entrance
+ * ```tsx
+ * <List
+ *   list={steps}
+ *   type="ordered"
+ *   variant="card"
+ *   title="Wat ga je doen?"
+ *   cardBg="forest.600"
+ *   bubbleProps={{ bg: 'volt.500', color: 'ink.900' }}
+ *   itemLabelProps={{ color: 'white' }}
+ *   itemDescriptionProps={{ color: 'whiteAlpha.700' }}
+ *   dividerColor="border.onForest"
+ *   enableVisualEffects
+ * />
+ * ```
+ */
+export declare const List: (props: ListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/alicia-ui/common/List/ListBrand.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = exports.CustomListItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const polished_1 = require("polished");
+const icons_1 = require("../../icons");
+const CustomListItem = (props) => {
+    const { data, type = 'ordered', bubbleProps, itemLabelProps, itemDescriptionProps, itemProps, withRightIcon, enableVisualEffects, } = props;
+    const isClickable = props.isClickable === true;
+    const isSelected = isClickable && props.selectedValue === data.value;
+    const selectedBg = isClickable ? props.selectedItemColor : undefined;
+    const isCard = props.variant === 'card';
+    const itemDelay = enableVisualEffects
+        ? (isCard ? 0.3 : 0) + data.index * 0.15
+        : 0;
+    const handleClick = () => {
+        if (isClickable) {
+            props.onItemClick({ value: data.value, label: data.label });
+        }
+    };
+    const ArrowIcon = (0, icons_1.ArrowForwardCircleIcon)({
+        fillColor: 'currentColor',
+    });
+    return ((0, jsx_runtime_1.jsxs)(react_1.List.Item, Object.assign({ css: {
+            listStyle: 'none',
+            '&[data-selected=true]': { background: selectedBg },
+        }, display: "flex", gap: (0, polished_1.rem)(16), alignItems: "center", py: (0, polished_1.rem)(18), cursor: isClickable ? 'pointer' : 'auto', transition: "background 0.15s ease", px: isClickable ? (0, polished_1.rem)(8) : 0, _hover: isClickable ? { bg: selectedBg } : undefined }, itemProps, { "data-testid": "list-brand-item", "data-selected": isSelected, animationStyle: enableVisualEffects ? 'alicia.fadeUp' : undefined, style: enableVisualEffects ? { animationDelay: `${itemDelay}s` } : undefined, onClick: handleClick, children: [type === 'ordered' && ((0, jsx_runtime_1.jsx)(react_1.Box, Object.assign({ borderRadius: "full", w: (0, polished_1.rem)(44), h: (0, polished_1.rem)(44), flexShrink: 0, justifyContent: "center", alignItems: "center", display: "flex" }, bubbleProps, { children: (0, jsx_runtime_1.jsx)(react_1.Text, { textStyle: "body.md", fontWeight: "700", fontVariantNumeric: "tabular-nums", children: data.index + 1 }) }))), (0, jsx_runtime_1.jsxs)(react_1.Stack, { gap: (0, polished_1.rem)(4), flex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ textStyle: "body.lg", fontWeight: "600" }, itemLabelProps, { children: data.label })), (data === null || data === void 0 ? void 0 : data.description) && ((0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ as: "span", textStyle: "body.md" }, itemDescriptionProps, { children: data === null || data === void 0 ? void 0 : data.description })))] }), withRightIcon && ((0, jsx_runtime_1.jsx)(ArrowIcon, { flexShrink: 0, width: (0, polished_1.rem)(30), height: (0, polished_1.rem)(30) }))] })));
+};
+exports.CustomListItem = CustomListItem;
+// ─── List ─────────────────────────────────────────────────────────────────────
+/**
+ * Brand-aware ordered/unordered list component.
+ *
+ * Import via the `/brand` subpath to use the Alicia design tokens:
+ * ```ts
+ * import { List } from 'alicia-design-system/brand';
+ * ```
+ *
+ * @example Plain ordered list
+ * ```tsx
+ * <List
+ *   list={steps}
+ *   type="ordered"
+ *   bubbleProps={{ bg: 'volt.500', color: 'ink.900' }}
+ *   enableVisualEffects
+ * />
+ * ```
+ *
+ * @example Card variant with staggered entrance
+ * ```tsx
+ * <List
+ *   list={steps}
+ *   type="ordered"
+ *   variant="card"
+ *   title="Wat ga je doen?"
+ *   cardBg="forest.600"
+ *   bubbleProps={{ bg: 'volt.500', color: 'ink.900' }}
+ *   itemLabelProps={{ color: 'white' }}
+ *   itemDescriptionProps={{ color: 'whiteAlpha.700' }}
+ *   dividerColor="border.onForest"
+ *   enableVisualEffects
+ * />
+ * ```
+ */
+const List = (props) => {
+    var _a;
+    const fx = (_a = props.enableVisualEffects) !== null && _a !== void 0 ? _a : false;
+    const { dividerColor } = props;
+    const listItems = props.list.flatMap(({ value, label, description }, index) => {
+        const item = ((0, jsx_runtime_1.jsx)(exports.CustomListItem, Object.assign({ data: { value, label, description, index } }, props), `item-${index}`));
+        if (index < props.list.length - 1) {
+            return [
+                item,
+                (0, jsx_runtime_1.jsx)(react_1.Separator, { borderColor: dividerColor }, `sep-${index}`),
+            ];
+        }
+        return [item];
+    });
+    const list = ((0, jsx_runtime_1.jsx)(react_1.List.Root, { "data-testid": "list-brand-root", children: listItems }));
+    const wrapWithCard = (list) => {
+        var _a;
+        if (props.variant !== 'card')
+            return null;
+        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: (_a = props.cardBg) !== null && _a !== void 0 ? _a : 'forest.500', borderRadius: "xl", p: (0, polished_1.rem)(32), boxShadow: "card", "data-testid": "list-brand-card", animationStyle: fx ? 'alicia.fadeUp' : undefined, children: [(props.title || props.subtitle) && ((0, jsx_runtime_1.jsxs)(react_1.Stack, { gap: (0, polished_1.rem)(4), mb: (0, polished_1.rem)(24), children: [props.title && ((0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ textStyle: "heading.lg", fontWeight: "700" }, props.itemLabelProps, { children: props.title }))), props.subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ textStyle: "body.lg" }, props.itemDescriptionProps, { children: props.subtitle })))] })), list] }));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { flexDirection: "column", w: "inherit", children: props.variant === 'card' ? wrapWithCard(list) : list }));
+};
+exports.List = List;
+//# sourceMappingURL=ListBrand.js.map

package/dist/cjs/alicia-ui/common/List/ListBrand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBrand.js","sourceRoot":"","sources":["../../../../../src/alicia-ui/common/List/ListBrand.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/alicia-ui/common/List/ListBrand.types.d.ts

@@ -0,0 +1,140 @@
+/**
+ * Type definitions for the brand List component.
+ * See ListBrand.tsx for implementation.
+ */
+import { type BoxProps, type SystemStyleObject, type TextProps } from '@chakra-ui/react';
+export type ListOption = {
+    /** Unique identifier for this item. Used as the selected value in clickable mode. */
+    value: string;
+    /** Primary text label displayed on the item row. */
+    label: string;
+    /** Optional secondary text shown below the label. */
+    description?: string;
+};
+/** Props present on every variant / clickable state. */
+type ListBaseProps = {
+    /** Array of items to render in the list. */
+    list: ListOption[];
+    /**
+     * Render style of the list.
+     * - `'ordered'` — each item shows a numbered circular bubble on the left.
+     * - `'unordered'` — plain list with no bubble.
+     * @default 'ordered'
+     */
+    type?: 'ordered' | 'unordered';
+    /**
+     * When `true`, an arrow icon is appended to the right of every item.
+     * Icon color is fixed to the `text` token.
+     * @default false
+     */
+    withRightIcon?: boolean;
+    /**
+     * Override any Chakra `Box` props on the numbered bubble (the circular
+     * icon shown when `type="ordered"`).
+     *
+     * Defaults: `borderRadius="full"`, `w=44px`, `h=44px`.
+     *
+     * Use `bg` and `color` to set the bubble background and number colour:
+     * @example
+     * bubbleProps={{ bg: 'volt.500', color: 'ink.900' }}
+     */
+    bubbleProps?: BoxProps;
+    /**
+     * Override any Chakra `Text` props on each item's label (primary line).
+     *
+     * Defaults: `textStyle="body.lg"`, `fontWeight="600"`.
+     * @example
+     * itemLabelProps={{ color: 'white', fontWeight: '700' }}
+     */
+    itemLabelProps?: TextProps;
+    /**
+     * Override any Chakra `Text` props on each item's description (secondary line).
+     *
+     * Default: `textStyle="body.md"`.
+     * @example
+     * itemDescriptionProps={{ color: 'whiteAlpha.700' }}
+     */
+    itemDescriptionProps?: TextProps;
+    /**
+     * Override Chakra style tokens on each item row (`<li>` rendered as Flex).
+     *
+     * Defaults: `py="4.5"`, `gap=4`, `alignItems="center"`.
+     * @example
+     * itemProps={{ py: 6, gap: 6 }}
+     */
+    itemProps?: SystemStyleObject;
+    /**
+     * Token or CSS value for the hairline divider drawn between items.
+     * @example
+     * dividerColor="border.onForest"  // on dark forest card
+     * dividerColor="border"           // on light background
+     */
+    dividerColor?: string;
+    /**
+     * When `true`, items and the card container fade up on mount using the
+     * `alicia.fadeUp` animation style defined in `aliciaDesignTheme.ts`.
+     * Items are staggered by 150 ms each.
+     * @default false
+     */
+    enableVisualEffects?: boolean;
+};
+/** Default variant — plain list with no card wrapper. */
+type PlainVariant = {
+    variant?: 'plain';
+};
+/**
+ * Card variant — wraps the list in a styled container with optional
+ * title and subtitle. Typically used on dark (`forest`) backgrounds.
+ */
+type CardVariant = {
+    variant: 'card';
+    /** Optional heading shown above the list inside the card. */
+    title?: string;
+    /** Optional supporting text shown below the title. */
+    subtitle?: string;
+    /**
+     * Background color token for the card container.
+     * @default 'forest.500'
+     */
+    cardBg?: string;
+};
+type VariantProps = PlainVariant | CardVariant;
+/** Non-interactive list — items cannot be selected. */
+type NotClickable = {
+    /** @default false */
+    isClickable?: false;
+    /** Not available when `isClickable` is false. */
+    onItemClick?: never;
+    /** Not available when `isClickable` is false. */
+    selectedValue?: never;
+    /** Not available when `isClickable` is false. */
+    selectedItemColor?: never;
+};
+/** Interactive list — items can be tapped/clicked and one can be pre-selected. */
+type IsClickable = {
+    /** Set to `true` to enable row selection. */
+    isClickable: true;
+    /**
+     * Callback fired when the user clicks an item.
+     * Receives the full `ListOption` object (`{ value, label }`).
+     */
+    onItemClick: (item: ListOption) => void;
+    /** Value of the currently selected item (controlled). */
+    selectedValue?: string;
+    /**
+     * Background color token applied to the hovered / selected row.
+     * @example selectedItemColor="forest.50"
+     */
+    selectedItemColor?: string;
+};
+type ClickableProps = NotClickable | IsClickable;
+export type ListProps = ListBaseProps & VariantProps & ClickableProps;
+export type CustomListItemProps = ListProps & {
+    data: {
+        value: string;
+        label: string;
+        description?: string;
+        index: number;
+    };
+};
+export {};

package/dist/cjs/alicia-ui/common/List/ListBrand.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=ListBrand.types.js.map

package/dist/cjs/alicia-ui/common/List/ListBrand.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBrand.types.js","sourceRoot":"","sources":["../../../../../src/alicia-ui/common/List/ListBrand.types.ts"],"names":[],"mappings":""}

package/dist/cjs/alicia-ui/common/Search/SearchBrand.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { BoldTextI, SearchProps } from './SearchBrand.types';
+export declare const boldedText: ({ text, shouldBeBold }: BoldTextI) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: FC<SearchProps>;

package/dist/cjs/alicia-ui/common/Search/SearchBrand.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Search = exports.boldedText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const polished_1 = require("polished");
+const pi_1 = require("react-icons/pi");
+const rx_1 = require("react-icons/rx");
+const lu_1 = require("react-icons/lu");
+const boldedText = ({ text, shouldBeBold }) => {
+    const textArray = text.split(RegExp(shouldBeBold, 'ig'));
+    const match = text.match(RegExp(shouldBeBold, 'ig'));
+    return ((0, jsx_runtime_1.jsx)(react_2.Text, { lineClamp: 1, fontSize: (0, polished_1.rem)(16), children: textArray.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [item, index !== textArray.length - 1 && match ? ((0, jsx_runtime_1.jsx)("b", { children: match[index] })) : null] }, index))) }));
+};
+exports.boldedText = boldedText;
+const Search = ({ query, options = [], loading = false, isError, withRightIcon = true, customRightIcon = undefined, setQuery, onClickItem, renderItem = undefined, emptyMessage = 'No results found', result = {
+    styles: {
+        bg: 'white',
+        hoverBg: 'volt.200',
+    },
+}, loadingSkeleton = {
+    count: 3,
+    styles: {
+        bg: 'neutral.50',
+        hoverBg: 'neutral.100',
+    },
+}, inputProps, }) => {
+    var _a;
+    const inputRef = (0, react_1.useRef)(null);
+    const hasQuery = query !== '' && query !== undefined;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", width: "100%", "data-testid": "search-container", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, Object.assign({ width: "inherit", border: "input", borderRadius: "lg", _focusWithin: {
+                    borderColor: 'border.focus',
+                    boxShadow: 'focus',
+                }, px: (0, polished_1.rem)(16), py: (0, polished_1.rem)(9), bg: "white" }, (isError && {
+                color: 'critical.500',
+                borderColor: 'critical.500',
+                boxShadow: 'error',
+                _focusWithin: {
+                    borderColor: 'critical.500',
+                    boxShadow: 'error',
+                },
+            }), { justifyContent: "space-between", alignItems: "center", gap: (0, polished_1.rem)(8) }, ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled) && {
+                opacity: 0.5,
+                cursor: 'not-allowed',
+            }), { children: [(0, jsx_runtime_1.jsx)(react_2.Input, Object.assign({ defaultValue: query, ref: inputRef, autoFocus: true, px: (0, polished_1.rem)(2), py: (0, polished_1.rem)(1), border: "none", boxShadow: "none", _focusVisible: {
+                            boxShadow: 'none',
+                            borderColor: 'transparent',
+                            outline: 'none',
+                        }, css: {
+                            '&:focus, &:focus-visible': {
+                                outline: 'none',
+                                boxShadow: 'none',
+                            },
+                        }, _placeholder: {
+                            color: 'fg.subtle',
+                        }, textStyle: "body.lg", onChange: (e) => setQuery(e.target.value) }, inputProps)), (0, jsx_runtime_1.jsx)(react_2.Flex, Object.assign({ as: react_2.chakra.button, boxSize: (0, polished_1.rem)(20), cursor: "pointer", "data-testid": "search-clear-button", onClick: () => {
+                            setQuery('');
+                            if (inputRef.current) {
+                                inputRef.current.value = '';
+                            }
+                        } }, (isError && {
+                        color: 'critical.500',
+                    }), ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled) && {
+                        opacity: 0.5,
+                        cursor: 'not-allowed',
+                    }), { children: hasQuery ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { "aria-label": "Clear search", as: rx_1.RxCross2, height: (0, polished_1.rem)(20), width: (0, polished_1.rem)(20) })) : ((0, jsx_runtime_1.jsx)(react_2.Icon, { "aria-label": "Search", as: pi_1.PiMagnifyingGlassBold, height: (0, polished_1.rem)(20), width: (0, polished_1.rem)(20) })) }))] })), (0, jsx_runtime_1.jsx)(react_2.Flex, { my: (0, polished_1.rem)(12), direction: "column", children: (0, jsx_runtime_1.jsxs)(react_2.List.Root, { gap: (0, polished_1.rem)(8), children: [loading
+                            ? Array.from({ length: (_a = loadingSkeleton.count) !== null && _a !== void 0 ? _a : 3 }).map((_, i) => {
+                                var _a, _b;
+                                return ((0, jsx_runtime_1.jsx)(react_2.Skeleton, Object.assign({ as: react_2.List.Item, "data-testid": `search-skeleton-${i}`, css: { display: 'block' }, border: "default", borderRadius: "sm", px: (0, polished_1.rem)(12), py: (0, polished_1.rem)(4), height: (0, polished_1.rem)(60), loading: true }, ((loadingSkeleton === null || loadingSkeleton === void 0 ? void 0 : loadingSkeleton.styles) && {
+                                    bg: (_a = loadingSkeleton === null || loadingSkeleton === void 0 ? void 0 : loadingSkeleton.styles) === null || _a === void 0 ? void 0 : _a.bg,
+                                    hoverBg: (_b = loadingSkeleton === null || loadingSkeleton === void 0 ? void 0 : loadingSkeleton.styles) === null || _b === void 0 ? void 0 : _b.hoverBg,
+                                })), i));
+                            })
+                            : options.map((option, i) => {
+                                var _a, _b;
+                                return ((0, jsx_runtime_1.jsx)(react_2.List.Item, { as: react_2.chakra.button, "data-testid": `search-option-${i}`, color: "text", cursor: "pointer", onClick: () => onClickItem(option), fontSize: (0, polished_1.rem)(16), display: "block", bg: (_a = result === null || result === void 0 ? void 0 : result.styles) === null || _a === void 0 ? void 0 : _a.bg, borderRadius: "sm", px: (0, polished_1.rem)(18), py: (0, polished_1.rem)(4), transition: "transform .15s,background .15s", _hover: {
+                                        bg: (_b = result === null || result === void 0 ? void 0 : result.styles) === null || _b === void 0 ? void 0 : _b.hoverBg,
+                                        transform: 'translateY(-1px)',
+                                    }, boxShadow: "searchOption", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { py: (0, polished_1.rem)(12), direction: "row", justifyContent: "space-between", gap: (0, polished_1.rem)(8), alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { overflow: "auto", flexWrap: "wrap", children: renderItem
+                                                    ? renderItem(option)
+                                                    : (0, exports.boldedText)({
+                                                        text: option.label,
+                                                        shouldBeBold: query !== null && query !== void 0 ? query : '',
+                                                    }) }), withRightIcon && ((0, jsx_runtime_1.jsx)(react_2.Flex, { boxSize: (0, polished_1.rem)(20), children: customRightIcon !== null && customRightIcon !== void 0 ? customRightIcon : ((0, jsx_runtime_1.jsx)(react_2.Icon, { className: "hover-arrow", as: lu_1.LuArrowRight, width: (0, polished_1.rem)(20), height: (0, polished_1.rem)(20), "aria-label": "Arrow right" })) }))] }) }, i));
+                            }), !loading && options.length === 0 && hasQuery && ((0, jsx_runtime_1.jsx)(react_2.List.Item, { as: react_2.Flex, justifyContent: "center", alignItems: "center", px: (0, polished_1.rem)(12), py: (0, polished_1.rem)(4), "data-testid": "search-empty-message", children: (0, jsx_runtime_1.jsx)(react_2.Text, { textStyle: "caption", color: "gray.500", children: emptyMessage }) }))] }) })] }));
+};
+exports.Search = Search;
+//# sourceMappingURL=SearchBrand.js.map

package/dist/cjs/alicia-ui/common/Search/SearchBrand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBrand.js","sourceRoot":"","sources":["../../../../../src/alicia-ui/common/Search/SearchBrand.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/alicia-ui/common/Search/SearchBrand.types.d.ts

@@ -0,0 +1,171 @@
+import { InputProps } from '@chakra-ui/react';
+import { ReactElement } from 'react';
+/**
+ * Props for the `Search` (SearchBrand) component.
+ *
+ * Extends Chakra UI's `InputProps` so any native `<Input>` prop (e.g.
+ * `placeholder`, `isDisabled`, `autoFocus`) can be forwarded directly to the
+ * underlying input element.
+ *
+ * @example
+ * ```tsx
+ * <Search
+ *   query={query}
+ *   options={filteredOptions}
+ *   isError={false}
+ *   loading={false}
+ *   setQuery={setQuery}
+ *   onClickItem={(option) => console.log(option)}
+ *   result={{ styles: { bg: 'neutral.50', hoverBg: 'volt.200' } }}
+ * />
+ * ```
+ */
+export type SearchProps = {
+    /**
+     * The props to be applied to the input.
+     * @default {}
+     * @example
+     * inputProps={{
+     *   'data-testid': 'search-input',
+     *   placeholder: 'Search',
+     * }}
+     */
+    inputProps?: InputProps;
+    /**
+     * The list of items to display in the dropdown.
+     * Can be plain objects of any shape or typed `Option` values.
+     * Pass an empty array to show the empty-state message when `query` is set.
+     */
+    options: any[] | Option[];
+    /**
+     * When `true` the input border and icons switch to the error/critical colour
+     * token and a red box-shadow is applied.
+     */
+    isError: boolean;
+    /**
+     * The current search string that drives both the controlled input value and
+     * the bold-highlight logic inside the default `renderItem`.
+     * Cleared automatically when the user clicks the ✕ icon.
+     */
+    query?: string;
+    /**
+     * When `true` skeleton placeholder rows are rendered instead of the real
+     * option list, indicating an in-flight async search request.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether to show an icon on the right side of each result row.
+     * Defaults to a right-arrow icon (`LuArrowRight`).
+     * @default true
+     */
+    withRightIcon?: boolean;
+    /**
+     * A custom React element to replace the default right-arrow icon that
+     * appears on each result row when `withRightIcon` is `true`.
+     *
+     * @example
+     * ```tsx
+     * customRightIcon={<Icon as={LuStar} color="volt.500" />}
+     * ```
+     */
+    customRightIcon?: ReactElement;
+    /**
+     * Text shown in the list when there are no results and `query` is non-empty.
+     * @default 'No results found'
+     */
+    emptyMessage?: string;
+    /**
+     * Called with the clicked option when the user selects a result row.
+     * Receives the raw item from `options` (typed `Option` or a custom object).
+     */
+    onClickItem: (value: any | Option) => void;
+    /**
+     * Controlled setter for the search query string.
+     * Should update whatever state is passed as `query`.
+     * Also called with an empty string when the user clicks the clear (✕) button.
+     */
+    setQuery: (value: string) => void;
+    /**
+     * Optional custom renderer for each result row.
+     * When omitted, the default renderer bolds the portion of `option.label`
+     * that matches the current `query`.
+     *
+     * @example
+     * ```tsx
+     * renderItem={(option) => (
+     *   <Flex direction="column">
+     *     <Text fontWeight="bold">{option.label}</Text>
+     *     <Text fontSize="sm" color="fg.subtle">{option.value}</Text>
+     *   </Flex>
+     * )}
+     * ```
+     */
+    renderItem?: (value: any | Option) => ReactElement;
+    /**
+     * Chakra colour tokens applied to each result row.
+     *
+     * - `bg`      – background colour of a result row at rest.
+     * - `hoverBg` – background colour on mouse-over / focus.
+     *
+     * @example
+     * result={{ styles: { bg: 'neutral.50', hoverBg: 'volt.200' } }}
+     */
+    result?: {
+        styles?: {
+            /** Background colour token for a result row at rest. */
+            bg?: string;
+            /** Background colour token for a result row on hover/focus. */
+            hoverBg?: string;
+        };
+    };
+    /**
+     * Configuration for the loading-skeleton rows shown while `loading` is `true`.
+     *
+     * - `count`        – number of skeleton rows to render.  @default 3
+     * - `styles.bg`      – skeleton background colour token.
+     * - `styles.hoverBg` – skeleton hover colour token (visual consistency).
+     *
+     * @example
+     * loadingSkeleton={{ count: 5, styles: { bg: 'blue.50', hoverBg: 'blue.100' } }}
+     */
+    loadingSkeleton?: {
+        /** Number of skeleton placeholder rows to render. @default 3 */
+        count?: number;
+        styles?: {
+            /** Background colour token for skeleton rows. */
+            bg?: string;
+            /** Hover background colour token for skeleton rows. */
+            hoverBg?: string;
+        };
+    };
+};
+/**
+ * A simple label/value pair used as the canonical item shape for the `options`
+ * array and `onClickItem` / `renderItem` callbacks.
+ *
+ * @example
+ * const option: Option = { label: 'Huisarts', value: 'huisarts' };
+ */
+export type Option = {
+    /** Human-readable display name shown in the result row. */
+    label: string;
+    /** Unique identifier / machine-readable key for the option. */
+    value: string;
+};
+/**
+ * Arguments for the `boldedText` helper that wraps a substring match in `<b>`.
+ *
+ * Used internally by the default `renderItem` to highlight the portion of
+ * `text` that matches the current search `query`.
+ *
+ * @example
+ * boldedText({ text: 'Huisarts', shouldBeBold: 'huis' })
+ * // → <Text>…<b>Huis</b>arts</Text>
+ */
+export type BoldTextI = {
+    /** The full string to display. */
+    text: string;
+    /** The substring (case-insensitive) that should be wrapped in `<b>`. */
+    shouldBeBold: string;
+};

package/dist/cjs/alicia-ui/common/Search/SearchBrand.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=SearchBrand.types.js.map

package/dist/cjs/alicia-ui/common/Search/SearchBrand.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBrand.types.js","sourceRoot":"","sources":["../../../../../src/alicia-ui/common/Search/SearchBrand.types.ts"],"names":[],"mappings":""}