@aivenio/aquarium 4.0.1 → 4.1.0

package/dist/src/atoms/DropdownMenu/DropdownMenu.d.ts

@@ -1,43 +1,164 @@
 import React, { type DOMAttributes } from 'react';
+import { type MenuItemProps as AriaMenuItemProps, type MenuProps as AriaMenuProps, type MenuSectionProps as AriaMenuSectionProps } from 'react-aria-components';
 import type { Icon } from '../../../types/IconProps';
 type DivAttributes = React.HTMLAttributes<HTMLDivElement>;
-type DropdownMenuProps = DivAttributes & {
+export declare const dropdownMenuStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+type DropdownMenuProps<T extends object> = Omit<AriaMenuProps<T>, 'className'> & {
+    className?: string;
     minHeight?: React.CSSProperties['minHeight'];
     maxHeight?: React.CSSProperties['maxHeight'];
     minWidth?: React.CSSProperties['minWidth'];
     maxWidth?: React.CSSProperties['maxWidth'];
 };
-type DropdownMenuComponent = React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLDivElement>> & {
-    ContentContainer: typeof ContentContainer;
-    List: typeof List;
-    Group: typeof Group;
-    Item: typeof Item;
-    Separator: typeof Separator;
-    Description: typeof Description;
-    EmptyStateContainer: typeof EmptyStateContainer;
+export declare const DropdownMenu: {
+    <T extends object>({ minHeight, maxHeight, minWidth, maxWidth, className, children, ...props }: DropdownMenuProps<T>): React.JSX.Element;
+    ContentContainer: React.FC<{
+        children?: React.ReactNode | undefined;
+    }>;
+    Group: ({ className, title, titleProps, children, ...props }: GroupProps) => React.JSX.Element;
+    Item: ({ kind, className, icon, description, showNotification, disabled, ...props }: MenuItemProps) => React.JSX.Element;
+    EmptyStateContainer: React.FC<DivAttributes>;
 };
-export declare const DropdownMenu: DropdownMenuComponent;
-declare const ContentContainer: React.FC<React.PropsWithChildren>;
-declare const List: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
-declare const Group: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLLIElement>, "title"> & {
-    title: React.ReactNode;
+export declare const dropdownMenuGroupStyles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    title: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    title: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string[];
+    title: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+type GroupProps = Omit<AriaMenuSectionProps<object>, 'items'> & {
+    title?: React.ReactNode;
     titleProps?: DOMAttributes<HTMLElement>;
-    disabled?: boolean;
-} & React.RefAttributes<HTMLLIElement>>;
-declare const Item: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLLIElement> & {
-    kind: "action" | "danger" | "default";
-    highlighted: boolean;
-    selected: boolean;
+};
+export declare const dropdownMenuItemStyles: import("tailwind-variants").TVReturnType<{
+    isDisabled: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+    kind: {
+        action: string;
+        danger: string;
+        default: string;
+    };
+}, undefined, "group flex items-center gap-x-3 p-3 outline-none cursor-pointer", import("tailwind-variants/dist/config").TVConfig<{
+    isDisabled: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+    kind: {
+        action: string;
+        danger: string;
+        default: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+    kind: {
+        action: string;
+        danger: string;
+        default: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+    kind: {
+        action: string;
+        danger: string;
+        default: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isDisabled: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+    kind: {
+        action: string;
+        danger: string;
+        default: string;
+    };
+}, undefined, "group flex items-center gap-x-3 p-3 outline-none cursor-pointer", import("tailwind-variants/dist/config").TVConfig<{
+    isDisabled: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+    kind: {
+        action: string;
+        danger: string;
+        default: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+    kind: {
+        action: string;
+        danger: string;
+        default: string;
+    };
+}>, unknown, unknown, undefined>>;
+type MenuItemProps = Omit<AriaMenuItemProps, 'className'> & {
+    kind?: 'action' | 'danger' | 'default';
+    className?: string;
+    description?: React.ReactNode;
     disabled?: boolean;
     icon?: Icon;
     showNotification?: boolean;
-} & React.RefAttributes<HTMLLIElement>>;
-type MenuItemDescription = DivAttributes & {
-    disabled?: boolean;
-    children: React.ReactNode;
 };
-declare const Description: React.FC<MenuItemDescription>;
-type MenuSeparatorProps = React.HTMLAttributes<HTMLLIElement>;
-declare const Separator: React.FC<MenuSeparatorProps>;
-declare const EmptyStateContainer: React.FC<DivAttributes>;
 export {};

package/dist/src/atoms/DropdownMenu/DropdownMenu.js

@@ -10,55 +10,83 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
+import { Collection as AriaCollection, composeRenderProps, Header as AriaHeader, Menu as AriaMenu, MenuItem as AriaMenuItem, MenuSection as AriaMenuSection, } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
 import { Badge } from '../../../src/molecules/Badge/Badge';
 import { InlineIcon } from '../../../src/molecules/Icon/Icon';
 import { Typography } from '../../../src/molecules/Typography/Typography';
 import { classNames, tw } from '../../../src/utils/tailwind';
 import tick from '../../../src/icons/tick';
-export const DropdownMenu = React.forwardRef((_a, ref) => {
-    var { minHeight, maxHeight = '100%', minWidth = '125px', maxWidth, className, children } = _a, props = __rest(_a, ["minHeight", "maxHeight", "minWidth", "maxWidth", "className", "children"]);
-    return (React.createElement("div", Object.assign({ ref: ref, style: { minHeight, maxHeight, minWidth, maxWidth }, className: classNames(className, 'Aquarium-DropdownMenu.Menu bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default') }, props), children));
+export const dropdownMenuStyles = tv({
+    base: 'bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default',
 });
+// Create the component using forwardRef and cast it to the component type
+export const DropdownMenu = (_a) => {
+    var { minHeight, maxHeight = '100%', minWidth = '125px', maxWidth, className, children } = _a, props = __rest(_a, ["minHeight", "maxHeight", "minWidth", "maxWidth", "className", "children"]);
+    return (React.createElement(AriaMenu, Object.assign({ style: { minHeight, maxHeight, minWidth, maxWidth }, className: dropdownMenuStyles({ className: ['Aquarium-DropdownMenu', className] }) }, props), children));
+};
 const ContentContainer = ({ children }) => (React.createElement("div", { className: tw('p-3 overflow-y-auto overflow-x-hidden') }, children));
 DropdownMenu.ContentContainer = ContentContainer;
-const List = React.forwardRef((_a, ref) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("ul", Object.assign({ ref: ref, className: classNames(className, 'outline-none ring-0') }, props), children));
+export const dropdownMenuGroupStyles = tv({
+    slots: {
+        base: [
+            '[&:not(:first-child)]:before:content-[""] [&:not(:first-child)]:before:block',
+            '[&:not(:first-child)]:before:h-[1px] [&:not(:first-child)]:before:bg-default [&:not(:first-child)]:before:m-3',
+        ],
+        title: 'p-3 text-inactive uppercase cursor-default typography-caption',
+    },
 });
-DropdownMenu.List = List;
-const Group = React.forwardRef((_a, ref) => {
+const Group = (_a) => {
     var { className, title, titleProps, children } = _a, props = __rest(_a, ["className", "title", "titleProps", "children"]);
-    return (React.createElement("li", Object.assign({ ref: ref }, props),
-        title && (React.createElement("div", Object.assign({ className: classNames(className, 'Aquarium-DropdownMenu.Group p-3 text-inactive uppercase cursor-default typography-caption') }, titleProps), title)),
-        children));
-});
+    const styles = dropdownMenuGroupStyles();
+    return (React.createElement(AriaMenuSection, Object.assign({ className: styles.base({ className: 'Aquarium-DropdownMenu.Group' }) }, props),
+        title && (React.createElement(AriaHeader, Object.assign({ className: styles.title() }, titleProps), title)),
+        React.createElement(AriaCollection, null, children)));
+};
 DropdownMenu.Group = Group;
-const Item = React.forwardRef((_a, ref) => {
-    var { kind, highlighted, selected, className, icon, showNotification = false, children } = _a, props = __rest(_a, ["kind", "highlighted", "selected", "className", "icon", "showNotification", "children"]);
-    return (React.createElement("li", Object.assign({ ref: ref, className: classNames(className, 'Aquarium-DropdownMenu.Item flex items-center gap-x-3 p-3 outline-none', {
-            'cursor-pointer hover:bg-muted': !props.disabled,
-            'bg-muted': highlighted,
-            'text-primary-intense': kind === 'action' && !props.disabled,
-            'text-danger-default': kind === 'danger' && !props.disabled,
-            'text-inactive cursor-not-allowed': props.disabled,
-        }) }, props),
+export const dropdownMenuItemStyles = tv({
+    base: 'group flex items-center gap-x-3 p-3 outline-none cursor-pointer',
+    variants: {
+        isDisabled: {
+            true: 'text-inactive cursor-not-allowed',
+        },
+        isFocused: {
+            true: 'bg-muted',
+        },
+        kind: {
+            action: '',
+            danger: '',
+            default: '',
+        },
+    },
+    compoundVariants: [
+        {
+            kind: 'action',
+            disabled: false,
+            className: 'text-primary-intense',
+        },
+        {
+            kind: 'danger',
+            disabled: false,
+            className: 'text-danger-default',
+        },
+    ],
+});
+const Item = (_a) => {
+    var { kind = 'default', className, icon, description, showNotification = false, disabled } = _a, props = __rest(_a, ["kind", "className", "icon", "description", "showNotification", "disabled"]);
+    return (React.createElement(AriaMenuItem, Object.assign({ className: (values) => dropdownMenuItemStyles(Object.assign(Object.assign({}, values), { kind, className: ['Aquarium-DropdownMenu.Item', className] })), isDisabled: disabled }, props), composeRenderProps(props.children, (children, { selectionMode, isSelected, isDisabled }) => (React.createElement(React.Fragment, null,
         icon && showNotification && (React.createElement(Badge.Notification, null,
             React.createElement(InlineIcon, { icon: icon }))),
         icon && !showNotification && React.createElement(InlineIcon, { icon: icon }),
-        React.createElement("span", { className: tw('grow') }, children),
-        selected && React.createElement(InlineIcon, { icon: tick })));
-});
-DropdownMenu.Item = Item;
-const Description = ({ disabled, children }) => (React.createElement(Typography.Caption, { color: disabled ? 'inactive' : 'muted' }, children));
-DropdownMenu.Description = Description;
-const Separator = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return React.createElement("li", Object.assign({}, props, { className: classNames(className, tw('m-3 block bg-default h-[1px]')) }));
+        React.createElement("span", { className: tw('grow') },
+            children,
+            description && (React.createElement(Typography.Caption, { color: isDisabled ? 'inactive' : 'muted' }, description))),
+        selectionMode !== 'none' && isSelected && React.createElement(InlineIcon, { icon: tick }))))));
 };
-DropdownMenu.Separator = Separator;
+DropdownMenu.Item = Item;
 const EmptyStateContainer = (_a) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
     return (React.createElement("div", Object.assign({ className: classNames(tw('border border-dashed border-default p-3'), className) }, props), children));
 };
 DropdownMenu.EmptyStateContainer = EmptyStateContainer;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHJvcGRvd25NZW51LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2F0b21zL0Ryb3Bkb3duTWVudS9Ecm9wZG93bk1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUE2QixNQUFNLE9BQU8sQ0FBQztBQUVsRCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3JELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUVqRSxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBRXBELE9BQU8sSUFBSSxNQUFNLGdCQUFnQixDQUFDO0FBeUJsQyxNQUFNLENBQUMsTUFBTSxZQUFZLEdBQTBCLEtBQUssQ0FBQyxVQUFVLENBQ2pFLENBQUMsRUFBOEYsRUFBRSxHQUFHLEVBQUUsRUFBRTtRQUF2RyxFQUFFLFNBQVMsRUFBRSxTQUFTLEdBQUcsTUFBTSxFQUFFLFFBQVEsR0FBRyxPQUFPLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxRQUFRLE9BQVksRUFBUCxLQUFLLGNBQTVGLDJFQUE4RixDQUFGO0lBQVksT0FBQSxDQUN2RywyQ0FDRSxHQUFHLEVBQUUsR0FBRyxFQUNSLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxFQUNuRCxTQUFTLEVBQUUsVUFBVSxDQUNuQixTQUFTLEVBQ1Qsb0hBQW9ILENBQ3JILElBQ0csS0FBSyxHQUVSLFFBQVEsQ0FDTCxDQUNQLENBQUE7Q0FBQSxDQUN1QixDQUFDO0FBRTNCLE1BQU0sZ0JBQWdCLEdBQXNDLENBQUMsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDNUUsNkJBQUssU0FBUyxFQUFFLEVBQUUsQ0FBQyx1Q0FBdUMs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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHJvcGRvd25NZW51LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2F0b21zL0Ryb3Bkb3duTWVudS9Ecm9wZG93bk1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUE2QixNQUFNLE9BQU8sQ0FBQztBQUNsRCxPQUFPLEVBQ0wsVUFBVSxJQUFJLGNBQWMsRUFDNUIsa0JBQWtCLEVBQ2xCLE1BQU0sSUFBSSxVQUFVLEVBQ3BCLElBQUksSUFBSSxRQUFRLEVBQ2hCLFFBQVEsSUFBSSxZQUFZLEVBR3hCLFdBQVcsSUFBSSxlQUFlLEdBRS9CLE1BQU0sdUJBQXVCLENBQUM7QUFDL0IsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRXZDLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDckQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBRWpFLE9BQU8sRUFBRSxVQUFVLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFcEQsT0FBTyxJQUFJLE1BQU0sZ0JBQWdCLENBQUM7QUFNbEMsTUFBTSxDQUFDLE1BQU0sa0JBQWtCLEdBQUcsRUFBRSxDQUFDO0lBQ25DLElBQUksRUFBRSx5RkFBeUY7Q0FDaEcsQ0FBQyxDQUFDO0FBVUgsMEVBQTBFO0FBQzFFLE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxDQUFtQixFQVF4QixFQUFFLEVBQUU7UUFSb0IsRUFDN0MsU0FBUyxFQUNULFNBQVMsR0FBRyxNQUFNLEVBQ2xCLFFBQVEsR0FBRyxPQUFPLEVBQ2xCLFFBQVEsRUFDUixTQUFTLEVBQ1QsUUFBUSxPQUVhLEVBRGxCLEtBQUssY0FQcUMsMkVBUTlDLENBRFM7SUFFUixPQUFPLENBQ0wsb0JBQUMsUUFBUSxrQkFDUCxLQUFL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

package/dist/src/atoms/Filter/Filter.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { type BadgeProps } from '../../../src/molecules/Badge/Badge';
+import { type IconProps } from '../../../src/molecules/Icon/Icon';
+type FilterTriggerProps = {
+    labelText: string;
+    icon: IconProps['icon'];
+    /**
+     * Indicates whether the filter trigger is in an error state.
+     */
+    error?: boolean;
+    /**
+     * onClear handler triggered when the clear button is clicked.
+     * Should be used to reset the controlled filter value passed in via `value` prop.
+     */
+    onClear?: () => void;
+    /**
+     * onClick handler triggered when the FilterTrigger is clicked.
+     * Useful when using <FilterTrigger> with controlled components like <Drawer>, <Modal>, or <Dialog>,
+     * allowing the open function to be passed via the onClick prop.
+     */
+    onClick?: () => void;
+} & ({
+    /**
+     * The value of the filter trigger, which will be displayed when the filter is applied.
+     */
+    value?: string | null | undefined;
+    badge?: never;
+} | {
+    value?: never;
+    /**
+     * Use the `badge` prop when displaying more than 5 filters side by side.
+     * In this case, no value will be displayed within the filter trigger.
+     */
+    badge?: BadgeProps['value'];
+});
+declare const Filter: React.FC & {
+    Trigger: React.FC<FilterTriggerProps>;
+};
+export { Filter };

package/dist/src/atoms/Filter/Filter.js

@@ -0,0 +1,127 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Button as AriaButton, DatePickerStateContext as AriaDatePickerStateContext, DateRangePickerStateContext as AriaDateRangePickerStateContext, Group as AriaGroup, } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+import { Badge } from '../../../src/molecules/Badge/Badge';
+import { Box } from '../../../src/molecules/Box/Box';
+import { InlineIcon } from '../../../src/molecules/Icon/Icon';
+import { Typography } from '../../../src/molecules/Typography/Typography';
+import { tw } from '../../../src/utils/tailwind';
+import crossIcon from '../../../src/icons/cross';
+const DATE_FORMAT_OPTIONS = {
+    locale: 'en-GB',
+    options: { day: 'numeric', month: 'numeric', year: 'numeric' },
+};
+const filterWrapper = tv({
+    base: 'rounded-full inline-flex items-center pressed:border-info-default justify-between outline-0 outline-none border border-dashed border-default text-default bg-transparent',
+    variants: {
+        isHovered: {
+            true: 'hover:bg-muted',
+        },
+        isFocusWithin: {
+            true: 'border-solid border-info-default',
+        },
+        isInvalid: {
+            true: 'border-solid border-danger-default',
+        },
+        hasValue: {
+            true: 'border-solid',
+        },
+    },
+});
+const FilterTrigger = (_a) => {
+    var { labelText, icon, badge, onClear, onClick, value, 
+    // children,
+    error = false } = _a, props = __rest(_a, ["labelText", "icon", "badge", "onClear", "onClick", "value", "error"]);
+    /**
+     * Date Picker Integration Logic
+     * ----------------------------
+     * This block handles the integration with DatePicker/DateTimePicker/DateRangePicker/DateTimeRangePicker components.
+     * It accesses the state and clear functionality when the Filter is used within
+     * either a DatePicker or DateRangePicker context.
+     */
+    const ariaDatePickerState = React.useContext(AriaDatePickerStateContext);
+    const ariaDateRangePickerState = React.useContext(AriaDateRangePickerStateContext);
+    const isUsedInsideDatePicker = !!(ariaDatePickerState === null || ariaDatePickerState === void 0 ? void 0 : ariaDatePickerState.value);
+    const isUsedInsideDateRangePicker = !!(ariaDateRangePickerState === null || ariaDateRangePickerState === void 0 ? void 0 : ariaDateRangePickerState.value.start) && !!ariaDateRangePickerState.value.end;
+    const onClearDatePickerRelated = () => {
+        if (isUsedInsideDatePicker) {
+            ariaDatePickerState.setValue(null);
+        }
+        else if (isUsedInsideDateRangePicker) {
+            ariaDateRangePickerState.setValue(null);
+        }
+    };
+    // End Date Picker Integration Logic
+    const hasValue = !!value || isUsedInsideDatePicker || isUsedInsideDateRangePicker;
+    const showClearButton = (!!onClear && !!value) || isUsedInsideDatePicker || isUsedInsideDateRangePicker;
+    return (React.createElement(AriaGroup, Object.assign({}, props, { isInvalid: error, className: (renderProps) => filterWrapper(Object.assign(Object.assign({}, renderProps), { hasValue: hasValue || !!badge })) }),
+        React.createElement(React.Fragment, null,
+            React.createElement(AriaButton, { onPress: () => {
+                    onClick && onClick();
+                }, className: tw('outline-0 outline-none flex items-center py-3 cursor-pointer', {
+                    'pl-4 pr-[6px]': showClearButton, // keep padding right the same as padding left of <FilterClearButton>
+                    'px-4': !showClearButton,
+                }) },
+                React.createElement("div", { className: tw('flex items-center gap-3 divide-x divide-grey-20') },
+                    React.createElement("div", { className: tw('flex items-center gap-3') },
+                        React.createElement("div", { className: tw('flex items-center gap-2') },
+                            React.createElement(InlineIcon, { icon: icon }),
+                            React.createElement(Typography.Small, null, labelText)),
+                        badge && (React.createElement(Typography, { color: "primary-active", className: tw('flex items-center') },
+                            React.createElement(Badge, { dense: true, value: badge })))),
+                    hasValue && (React.createElement("div", { className: "pl-3" },
+                        React.createElement(Typography.Small, { className: tw('truncate max-w-[233px]'), color: error ? 'danger-intense' : 'primary-active' },
+                            value,
+                            isUsedInsideDatePicker && React.createElement(DateDisplay, { state: ariaDatePickerState }),
+                            isUsedInsideDateRangePicker && React.createElement(DateDisplay, { state: ariaDateRangePickerState })))))),
+            showClearButton && (React.createElement(FilterClearButton, { onClear: () => {
+                    onClearDatePickerRelated();
+                    onClear === null || onClear === void 0 ? void 0 : onClear();
+                } })))));
+};
+const isDateRangePickerState = (state) => {
+    return 'value' in state && state.value !== null && 'start' in state.value;
+};
+const DateDisplay = ({ state }) => {
+    var _a, _b;
+    const primary = isDateRangePickerState(state)
+        ? (_a = state.formatValue(DATE_FORMAT_OPTIONS.locale, DATE_FORMAT_OPTIONS.options)) === null || _a === void 0 ? void 0 : _a.start
+        : state.formatValue(DATE_FORMAT_OPTIONS.locale, DATE_FORMAT_OPTIONS.options);
+    const secondary = isDateRangePickerState(state)
+        ? (_b = state.formatValue(DATE_FORMAT_OPTIONS.locale, DATE_FORMAT_OPTIONS.options)) === null || _b === void 0 ? void 0 : _b.end
+        : undefined;
+    return (React.createElement(Box.Flex, { gap: "2" },
+        React.createElement("span", null, primary),
+        secondary && (React.createElement(React.Fragment, null,
+            React.createElement("span", { "aria-hidden": true, className: tw('text-muted') }, "-"),
+            React.createElement("span", null, secondary)))));
+};
+const FilterClearButton = ({ onClear }) => (
+// using a native HTML <button> here instead of <Button slot={null} /> from react-aria because react-aria <DialogTrigger> doesn't support it as a child. If we used <Button slot={null}>, the popover would open simultaneously with the clear callback, which is unintended behavior. Interestingly, this issue doesn't occur in react-aria's <DatePicker>, but for consistency and to avoid conflicts here, we're sticking with a plain button.
+React.createElement("button", { "aria-label": "Clear filter", onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Focus the previous button before clearing, since clicking the clear button removes the clear button itself from the DOM and causes focus to be lost.
+        const previousButton = e.currentTarget.previousElementSibling;
+        if (previousButton instanceof HTMLElement) {
+            previousButton.focus();
+        }
+        onClear();
+    }, className: tw('py-[10px] pl-[6px] pr-4 inline-flex items-center hover:bg-default focus:bg-default outline-0 outline-none rounded-r-full') },
+    React.createElement(InlineIcon, { icon: crossIcon })));
+const Filter = () => null;
+FilterTrigger.displayName = 'Filter.Trigger';
+Filter.Trigger = FilterTrigger;
+export { Filter };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmlsdGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2F0b21zL0ZpbHRlci9GaWx0ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFDTCxNQUFNLElBQUksVUFBVSxFQUNwQixzQkFBc0IsSUFBSSwwQkFBMEIsRUFDcEQsMkJBQTJCLElBQUksK0JBQStCLEVBQzlELEtBQUssSUFBSSxTQUFTLEdBQ25CLE1BQU0sdUJBQXVCLENBQUM7QUFDL0IsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRXZDLE9BQU8sRUFBRSxLQUFLLEVBQW1CLE1BQU0sMkJBQTJCLENBQUM7QUFDbkUsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzVDLE9BQU8sRUFBa0IsVUFBVSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDckUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBRWpFLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUV4QyxPQUFPLFNBQVMsTUFBTSxpQkFBaUIsQ0FBQztBQUl4QyxNQUFNLG1CQUFtQixHQUFHO0lBQzFCLE1BQU0sRUFBRSxPQUFPO0lBQ2YsT0FBTyxFQUFFLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUU7Q0FDdEQsQ0FBQztBQUVYLE1BQU0sYUFBYSxHQUFHLEVBQUUsQ0FBQztJQUN2QixJQUFJLEVBQUUsMEtBQTBLO0lBQ2hMLFFBQVEsRUFBRTtRQUNSLFNBQVMsRUFBRTtZQUNULElBQUksRUFBRSxnQkFBZ0I7U0FDdkI7UUFDRCxhQUFhLEVBQUU7WUFDYixJQUFJLEVBQUUsa0NBQWtDO1NBQ3pDO1FBQ0QsU0FBUyxFQUFFO1lBQ1QsSUFBSSxF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

package/dist/src/atoms/index.d.ts

@@ -7,6 +7,7 @@ export * from './Chip/Chip';
 export * from './DataList/DataList';
 export * from './Dialog/Dialog';
 export * from './DropdownMenu/DropdownMenu';
+export * from './Filter/Filter';
 export * from './InputGroup/InputGroup';
 export * from './LineClamp/LineClamp';
 export * from './Link/Link';

package/dist/src/atoms/index.js

@@ -7,6 +7,7 @@ export * from './Chip/Chip';
 export * from './DataList/DataList';
 export * from './Dialog/Dialog';
 export * from './DropdownMenu/DropdownMenu';
+export * from './Filter/Filter';
 export * from './InputGroup/InputGroup';
 export * from './LineClamp/LineClamp';
 export * from './Link/Link';
@@ -25,4 +26,4 @@ export * from './Table/Table';
 export * from './Toast/Toast';
 export * from './Typography/Typography';
 export * from './VisuallyHidden/VisuallyHidden';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXRvbXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLGlDQUFpQyxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXRvbXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsaUNBQWlDLENBQUMifQ==

package/dist/src/atoms/utils/index.d.ts

@@ -48,7 +48,7 @@ export declare const fieldGroup: import("tailwind-variants").TVReturnType<{
     isDisabled: {
         true: string;
     };
-}, undefined, "group flex items-center bg-transparent border rounded-sm typography-small text-default px-3 py-3 overflow-hidden", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "group flex gap-3 items-center bg-transparent border rounded-sm typography-small text-default px-3 py-3 overflow-hidden", import("tailwind-variants/dist/config").TVConfig<{
     isReadOnly: {
         true: string;
     };
@@ -104,7 +104,7 @@ export declare const fieldGroup: import("tailwind-variants").TVReturnType<{
     isDisabled: {
         true: string;
     };
-}, undefined, "group flex items-center bg-transparent border rounded-sm typography-small text-default px-3 py-3 overflow-hidden", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "group flex gap-3 items-center bg-transparent border rounded-sm typography-small text-default px-3 py-3 overflow-hidden", import("tailwind-variants/dist/config").TVConfig<{
     isReadOnly: {
         true: string;
     };

package/dist/src/atoms/utils/index.js

@@ -26,7 +26,7 @@ const fieldBorder = tv({
     },
 });
 export const fieldGroup = tv({
-    base: 'group flex items-center bg-transparent border rounded-sm typography-small text-default px-3 py-3 overflow-hidden',
+    base: 'group flex gap-3 items-center bg-transparent border rounded-sm typography-small text-default px-3 py-3 overflow-hidden',
     variants: fieldBorder.variants,
 });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYXRvbXMvdXRpbHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRXZDLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDMUIsSUFBSSxFQUFFLGtEQUFrRDtJQUN4RCxRQUFRLEVBQUU7UUFDUixjQUFjLEVBQUU7WUFDZCxLQUFLLEVBQUUsV0FBVztZQUNsQixJQUFJLEVBQUUsV0FBVztTQUNsQjtLQUNGO0NBQ0YsQ0FBQyxDQUFDO0FBRUgsTUFBTSxXQUFXLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLFFBQVEsRUFBRTtRQUNSLFVBQVUsRUFBRTtZQUNWLElBQUksRUFBRSxrQkFBa0I7U0FDekI7UUFDRCxhQUFhLEVBQUU7WUFDYixLQUFLLEVBQUUscUNBQXFDO1lBQzVDLElBQUksRUFBRSxxQkFBcUI7U0FDNUI7UUFDRCxTQUFTLEVBQUU7WUFDVCxJQUFJLEVBQUUsdUJBQXVCO1NBQzlCO1FBQ0QsVUFBVSxFQUFFO1lBQ1YsSUFBSSxFQUFFLDZDQUE2QztTQUNwRDtLQUNGO0NBQ0YsQ0FBQyxDQUFDO0FBRUgsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLEVBQUUsQ0FBQztJQUMzQixJQUFJLEVBQUUsa0hBQWtIO0lBQ3hILFFBQVEsRUFBRSxXQUFXLENBQUMsUUFBUTtDQUMvQixDQUFDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYXRvbXMvdXRpbHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRXZDLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDMUIsSUFBSSxFQUFFLGtEQUFrRDtJQUN4RCxRQUFRLEVBQUU7UUFDUixjQUFjLEVBQUU7WUFDZCxLQUFLLEVBQUUsV0FBVztZQUNsQixJQUFJLEVBQUUsV0FBVztTQUNsQjtLQUNGO0NBQ0YsQ0FBQyxDQUFDO0FBRUgsTUFBTSxXQUFXLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLFFBQVEsRUFBRTtRQUNSLFVBQVUsRUFBRTtZQUNWLElBQUksRUFBRSxrQkFBa0I7U0FDekI7UUFDRCxhQUFhLEVBQUU7WUFDYixLQUFLLEVBQUUscUNBQXFDO1lBQzVDLElBQUksRUFBRSxxQkFBcUI7U0FDNUI7UUFDRCxTQUFTLEVBQUU7WUFDVCxJQUFJLEVBQUUsdUJBQXVCO1NBQzlCO1FBQ0QsVUFBVSxFQUFFO1lBQ1YsSUFBSSxFQUFFLDZDQUE2QztTQUNwRDtLQUNGO0NBQ0YsQ0FBQyxDQUFDO0FBRUgsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLEVBQUUsQ0FBQztJQUMzQixJQUFJLEVBQUUsd0hBQXdIO0lBQzlILFFBQVEsRUFBRSxXQUFXLENBQUMsUUFBUTtDQUMvQixDQUFDLENBQUMifQ==

package/dist/src/molecules/Card/Card.d.ts

@@ -1,19 +1,23 @@
 import React from 'react';
+import { type ChipProps, type StatusChipProps } from '../../../src/molecules/Chip/Chip';
 import { Card as CardBase } from '../../../src/atoms/Card/Card';
 import { CompactCard } from './Compact';
 import { CardGroup } from './Group';
 import type { ActionableCard, ClickableCard, IconCard, ImageCard } from './types';
 import type { Lines } from '../../../src/atoms/LineClamp/LineClamp';
-import type { Either } from '../../../types/utils';
+import type { Either, RequiredBy } from '../../../types/utils';
 export type CardProps = Either<ClickableCard, ActionableCard> & Either<ImageCard, IconCard> & {
     /** Short and concise card title as a string. If a custom title is needed, check out the custom title story in our storybook. */
     title: React.ReactElement<React.ComponentProps<typeof CardBase.Title>> | string;
     /** When provided, title will be clamped if needed. */
     clampTitle?: Lines;
     /**
-     * Optional list of tags, which will be rendered as chips underneath the page title.
+     * Optional list to render chips above the card title. You can pass in bare
+     * strings to render regular chips, or exact props to render either regular
+     * or status chips. `dense` props are not supported as the chips are always
+     * rendered using the dense variant.
      */
-    chips?: string[];
+    chips?: Array<Omit<ChipProps, 'dense'> | RequiredBy<Omit<StatusChipProps, 'dense'>, 'status'> | string>;
     /**
      * Optional full-width for a card.
      */