@economic/taco 2.55.0 → 2.56.0

package/dist/taco.css

@@ -337,76 +337,6 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
 [class*='text-'] svg circle {
     stroke: currentColor;
 }
-/* Base styles */
-[data-taco='checkbox-container'] [data-taco='checkbox'] {
-    @apply border-grey-500;
-}
-
-[data-taco='checkbox-container'][data-focus-visible] [data-taco='checkbox'] {
-    @apply yt-focus;
-}
-
-/* Readonly state */
-[data-taco='checkbox-container'][data-readonly] [data-taco='checkbox'] {
-    @apply cursor-default;
-}
-
-/* Invalid state */
-[data-taco='checkbox-container'][data-invalid] [data-taco='checkbox'] {
-    @apply border-red-500;
-}
-
-/* Selected or indeterminate state */
-[data-taco='checkbox-container'][data-selected] [data-taco='checkbox'],
-[data-taco='checkbox-container'][data-indeterminate] [data-taco='checkbox'] {
-    @apply border-blue-500 bg-blue-500;
-}
-
-/* Selected or indeterminate AND invalid state */
-[data-taco='checkbox-container'][data-selected][data-invalid] [data-taco='checkbox'],
-[data-taco='checkbox-container'][data-indeterminate][data-invalid] [data-taco='checkbox'] {
-    @apply !border-red-500 !bg-red-500;
-}
-
-/* Disabled state */
-[data-taco='checkbox-container'][data-disabled] [data-taco='checkbox'] {
-    @apply border-grey-500/50 cursor-not-allowed;
-}
-
-[data-taco='checkbox-container'][data-disabled][data-invalid] [data-taco='checkbox'] {
-    @apply !border-red-500/50 !bg-red-500/50;
-}
-
-[data-taco='checkbox-container'][data-disabled][data-selected] [data-taco='checkbox'],
-[data-taco='checkbox-container'][data-disabled][data-indeterminate] [data-taco='checkbox'] {
-    @apply !bg-blue-500/50;
-}
-
-[data-taco='checkbox-container'][data-disabled][data-selected][data-invalid] [data-taco='checkbox'],
-[data-taco='checkbox-container'][data-disabled][data-indeterminate][data-invalid] [data-taco='checkbox'] {
-    @apply !bg-red-500/50 text-white;
-}
-
-/* Hover states (separate rules for clarity) */
-[data-taco='checkbox-container']:hover:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
-    @apply border-grey-700;
-}
-
-[data-taco='checkbox-container']:hover[data-selected]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'],
-[data-taco='checkbox-container']:hover[data-indeterminate]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
-    @apply !border-blue-700 !bg-blue-700;
-}
-
-[data-taco='checkbox-container']:hover[data-invalid]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
-    @apply !border-red-700;
-}
-
-[data-taco='checkbox-container']:hover[data-invalid][data-selected]:not([data-disabled]):not([data-readonly])
-    [data-taco='checkbox'],
-[data-taco='checkbox-container']:hover[data-invalid][data-indeterminate]:not([data-disabled]):not([data-readonly])
-    [data-taco='checkbox'] {
-    @apply !border-red-700 !bg-red-700;
-}
 [data-taco='scrollable-list'].yt-list--multiselect li:first-child {
     @apply border-grey-100 border-b-2 pl-4; /* Listbox max-height is dependant on this border-bottom-width value! */
 }
@@ -876,7 +806,7 @@ table[data-taco^='table'] tr[data-row-id] td[data-cell-truncate='true'] [data-ta
     @apply focus:absolute focus:overflow-y-auto;
 }
 
-table[data-taco^='table'] tr[data-row-id] td [data-taco='label'] {
+table[data-taco^='table'] tr[data-row-id] td label {
     @apply h-fit !min-h-fit w-full !pb-0;
 }
 
@@ -915,14 +845,14 @@ table[data-taco^='table'][data-table-font-size='small'] tr[data-row-id] td [data
     @apply !h-4 !w-4;
 }
 
-table[data-taco^='table'][data-table-font-size='small'] tr[data-row-id] td [data-taco='icon']:not([data-taco='checkbox'] *),
+table[data-taco^='table'][data-table-font-size='small'] tr[data-row-id] td [data-taco='icon'],
 table[data-taco^='table'][data-table-font-size='small'] tr[data-row-id] td [data-taco='spinner'] {
     @apply !-my-[3px];
 }
 
 table[data-taco^='table'][data-table-font-size='small'] tr[data-row-id] td [data-taco='badge'],
 table[data-taco^='table'][data-table-font-size='small'] tr[data-row-id] td [data-taco='badge-icon'],
-table[data-taco^='table'][data-table-font-size='small'] tr[data-row-id] td [data-taco='icon']:not([data-taco='checkbox'] *),
+table[data-taco^='table'][data-table-font-size='small'] tr[data-row-id] td [data-taco='icon'],
 table[data-taco^='table'][data-table-font-size='small'] tr[data-row-id] td [data-taco='spinner'] {
     @apply !-my-0.5 !text-xs;
 }
@@ -1089,7 +1019,7 @@ table[data-taco^='table'][data-table-font-size='medium'] tr[data-row-id] td [dat
     @apply !-my-1.5;
 }
 
-table[data-taco^='table'][data-table-font-size='medium'] tr[data-row-id] td [data-taco='icon']:not([data-taco='checkbox'] *) {
+table[data-taco^='table'][data-table-font-size='medium'] tr[data-row-id] td [data-taco='icon'] {
     @apply !-my-0.5;
 }
 
@@ -1203,7 +1133,7 @@ table[data-taco^='table'][data-table-font-size='large'] tr[data-row-id] td [data
     @apply !-my-1;
 }
 
-table[data-taco^='table'][data-table-font-size='large'] tr[data-row-id] td [data-taco='icon']:not([data-taco='checkbox'] *) {
+table[data-taco^='table'][data-table-font-size='large'] tr[data-row-id] td [data-taco='icon'] {
     @apply !-my-0.5;
 }
 
@@ -1556,11 +1486,11 @@ table[data-taco='table3'][data-table-editing-mode] tbody tr[data-row-editing-mov
         @apply border-r-2 border-blue-500 pr-[calc(var(--table-cell-padding-x)_-_2px)];
     }
 
-table[data-taco^='table3'][data-table-editing-mode] [data-cell-align='center'] > [data-taco='label'] {
+table[data-taco^='table3'][data-table-editing-mode] [data-cell-align='center'] > label {
     @apply flex-row justify-center text-center;
 }
 
-table[data-taco^='table3'][data-table-editing-mode] [data-cell-align='right'] > [data-taco='label'] {
+table[data-taco^='table3'][data-table-editing-mode] [data-cell-align='right'] > label {
     @apply flex-row justify-end text-right;
 }
 

package/dist/taco.d.ts

@@ -1,6 +1,5 @@
 import { BuiltInAggregationFn } from '@tanstack/react-table';
 import { BuiltInSortingFn } from '@tanstack/react-table';
-import { CheckboxProps as CheckboxProps_2 } from 'react-aria-components';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { CollapsibleProps } from '@radix-ui/react-collapsible';
 import { ColumnFilter } from '@tanstack/react-table';
@@ -11,9 +10,6 @@ import { ColumnSizingState } from '@tanstack/react-table';
 import { ColumnSort } from '@tanstack/react-table';
 import { default as default_2 } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { DisclosureGroupProps } from 'react-aria-components';
-import { DisclosurePanelProps } from 'react-aria-components';
-import { DisclosureProps } from 'react-aria-components';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { IdType } from 'react-table';
 import { Matcher } from 'react-day-picker';
@@ -22,26 +18,26 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as React_2 from 'react';
 import { ScaleType } from 'recharts/types/util/types';
 import { SortingState } from '@tanstack/react-table';
-import { SwitchProps as SwitchProps_2 } from 'react-aria-components';
 import { VisibilityState } from '@tanstack/react-table';
 
 export declare const Accordion: {
     (props: AccordionProps): default_2.JSX.Element;
-    Item: ({ disabled, className, ...otherProps }: AccordionItemProps) => default_2.JSX.Element;
+    Item: (props: AccordionItemProps) => default_2.JSX.Element;
     Trigger: default_2.ForwardRefExoticComponent<AccordionTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
-    Content: default_2.ForwardRefExoticComponent<DisclosurePanelProps & default_2.RefAttributes<HTMLDivElement>>;
+    Content: default_2.ForwardRefExoticComponent<AccordionContentProps & default_2.RefAttributes<HTMLDivElement>>;
 };
 
-declare type AccordionBaseProps = Omit<DisclosureGroupProps, 'id' | 'allowsMultipleExpanded' | 'isDisabled' | 'expandedKeys' | 'defaultExpandedKeys' | 'onExpandedChange'> & {
+declare type AccordionBaseProps = {
     children: default_2.ReactNode[];
     /** Change what heading element accordion regions will render */
     as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /** Additional classes for Accordion root element */
     className?: string;
-    disabled?: boolean;
 };
 
-declare type AccordionItemProps = Omit<DisclosureProps, 'id' | 'isDisabled' | 'onExpandedChange' | 'defaultExpanded' | 'isExpanded'> & {
+export declare type AccordionContentProps = default_2.HTMLAttributes<HTMLElement>;
+
+export declare type AccordionItemProps = default_2.HTMLAttributes<HTMLDivElement> & {
     id: string;
     disabled?: boolean;
 };
@@ -452,20 +448,23 @@ export declare type CardProps = Omit<React_2.HTMLAttributes<HTMLDivElement>, 'ti
     menu?: (props: Partial<MenuProps>) => JSX.Element;
 };
 
-export declare const Checkbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<HTMLButtonElement>>;
 
-export declare type CheckboxProps = Omit<RemapReactAriaIsProperties<CheckboxProps_2>, 'defaultSelected' | 'onChange'> & {
+declare type CheckboxBaseProps = Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {
+    /**
+     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all
+     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.
+     */
+    indeterminate?: boolean;
+    invalid?: boolean;
     /** Label for the checkbox */
     label?: React_2.ReactNode;
     /** Displays loading state in checkbox */
     loading?: boolean;
-    onClick?: (event: React_2.MouseEvent<HTMLSpanElement>) => void;
-} & Either<{
-    checked: boolean;
-    onChange: (checked: boolean) => void;
-}, {
-    defaultChecked?: boolean;
-}>;
+    required?: boolean;
+};
+
+export declare type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;
 
 export declare namespace CollectionPrimitive {
     export {
@@ -587,6 +586,18 @@ declare const Content: default_2.ForwardRefExoticComponent<LayoutContentProps &
 
 declare const Content_2: default_2.ForwardRefExoticComponent<Navigation2ContentProps & default_2.RefAttributes<HTMLLIElement>>;
 
+export declare interface ControlledCheckboxProps extends CheckboxBaseProps {
+    defaultChecked?: never;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+
+declare interface ControlledModeSwitchProps extends ModeSwitchBaseProps {
+    defaultChecked?: never;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+
 declare interface ControlledRadioGroupProps extends RadioGroupBaseProps {
     defaultValue?: never;
     /** Handler called when the value changes */
@@ -595,6 +606,12 @@ declare interface ControlledRadioGroupProps extends RadioGroupBaseProps {
     value?: RadioGroupItemValue;
 }
 
+export declare interface ControlledSwitchProps extends SwitchBaseProps {
+    defaultChecked?: never;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+
 export declare const convertRowIndexPathToNumberArray: (rowIndexPath: RowIndexPath) => number[];
 
 declare const createListboxValueSetter: (multiple: boolean, setValue: default_2.Dispatch<default_2.SetStateAction<Listbox2Value | undefined>>) => (nextValue: Listbox2Value) => void;
@@ -1162,8 +1179,6 @@ declare type DrawerTriggerProps = React_2.HTMLAttributes<HTMLButtonElement>;
 
 declare type DrawerVariant = 'overlay' | 'embedded';
 
-export declare type Either<T, U> = Only<T, U> | Only<U, T>;
-
 export declare const Field: React_2.ForwardRefExoticComponent<React_2.LabelHTMLAttributes<HTMLLabelElement> & {
     /** Content of the field */
     children: React_2.ReactNode;
@@ -1892,8 +1907,8 @@ export declare namespace List {
         children: JSX.Element | JSX.Element[];
         defaultOpen?: boolean;
     } & default_2.RefAttributes<HTMLDivElement>>;
-    var Switch: default_2.ForwardRefExoticComponent<ComposableListItemProps<"div"> & Required<Pick<SwitchProps, "onChange" | "checked">> & default_2.RefAttributes<HTMLDivElement>>;
-    var Checkbox: default_2.ForwardRefExoticComponent<ComposableListItemProps<"div"> & Required<Pick<SwitchProps, "onChange" | "checked">> & default_2.RefAttributes<HTMLDivElement>>;
+    var Switch: default_2.ForwardRefExoticComponent<ComposableListItemProps<"div"> & Omit<ControlledSwitchProps, "title"> & default_2.RefAttributes<HTMLDivElement>>;
+    var Checkbox: default_2.ForwardRefExoticComponent<ComposableListItemProps<"div"> & Omit<ControlledSwitchProps, "title"> & default_2.RefAttributes<HTMLDivElement>>;
     var Group: default_2.ForwardRefExoticComponent<Omit<default_2.HTMLAttributes<HTMLDivElement>, "children"> & {
         children: JSX.Element | JSX.Element[];
     } & default_2.RefAttributes<HTMLDivElement>>;
@@ -2024,7 +2039,7 @@ export declare type ListButtonProps = Omit<ComposableListItemProps<'button'>, 'o
     onClick: default_2.MouseEventHandler<HTMLButtonElement>;
 };
 
-export declare type ListCheckboxProps = ComposableListItemProps<'div'> & Required<Pick<CheckboxProps, 'checked' | 'onChange'>>;
+export declare type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;
 
 export declare type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {
     children: JSX.Element | JSX.Element[];
@@ -2053,7 +2068,7 @@ export declare type ListProps = default_2.HTMLAttributes<HTMLDivElement> & {
     children: JSX.Element | (JSX.Element | boolean | null | undefined)[];
 };
 
-export declare type ListSwitchProps = ComposableListItemProps<'div'> & Required<Pick<SwitchProps, 'checked' | 'onChange'>>;
+export declare type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;
 
 declare type Locale_2 = 'en-GB' | 'da-DK' | 'sv-SE' | 'no-NO';
 export { Locale_2 as Locale }
@@ -2195,18 +2210,13 @@ export declare type MenuTriggerProps = Omit<React_2.HTMLAttributes<HTMLButtonEle
 
 export declare function mergeRefs<T = any>(refs: Array<default_2.MutableRefObject<T> | default_2.LegacyRef<T>>): default_2.RefCallback<T>;
 
-export declare const ModeSwitch: React_2.ForwardRefExoticComponent<ModeSwitchProps & React_2.RefAttributes<HTMLInputElement>>;
+export declare const ModeSwitch: React_2.ForwardRefExoticComponent<ModeSwitchProps & React_2.RefAttributes<HTMLButtonElement>>;
 
-export declare type ModeSwitchProps = Omit<RemapReactAriaIsProperties<SwitchProps_2>, 'defaultSelected' | 'onChange'> & {
-    /** Label for the checkbox */
-    label?: React_2.ReactNode;
-    onClick?: (event: React_2.MouseEvent<HTMLSpanElement>) => void;
-} & Either<{
-    checked: boolean;
-    onChange: (checked: boolean) => void;
-}, {
-    defaultChecked?: boolean;
-}>;
+declare type ModeSwitchBaseProps = Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {
+    required?: boolean;
+};
+
+export declare type ModeSwitchProps = UncontrolledModeSwitchProps | ControlledModeSwitchProps;
 
 export declare const MultiListbox: React_2.ForwardRefExoticComponent<Pick<React_2.InputHTMLAttributes<HTMLInputElement>, "onFocus" | "onChange"> & Omit<React_2.InputHTMLAttributes<HTMLElement>, "onChange" | "defaultValue" | "value"> & {
     /** Data indicating the options in listbox */
@@ -2299,12 +2309,6 @@ export declare type NavigationPanelProps = default_2.HTMLAttributes<HTMLDivEleme
 
 export declare type NavigationProps = default_2.HTMLAttributes<HTMLDivElement>;
 
-declare type Only<T, U> = {
-    [P in keyof T]: T[P];
-} & {
-    [P in keyof U]?: never;
-};
-
 declare const Option_2: default_2.ForwardRefExoticComponent<default_2.HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean;
     value: Listbox2OptionValue;
@@ -2534,10 +2538,6 @@ export declare type RadioGroupItemValue = string | number | boolean | null;
 
 export declare type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;
 
-export declare type RemapReactAriaIsProperties<T> = {
-    [K in keyof T as K extends `is${infer Rest}` ? Uncapitalize<Rest> : K]: T[K];
-};
-
 export declare const removeChildTableRow: <TRow extends {}>(data: Row<TRow>[], rowIndexPath: RowIndexPath) => Row<TRow>[];
 
 declare const Report_2: (<TType = unknown>(props: ReportProps<TType> & default_2.RefAttributes<ReportRef>) => JSX.Element) & {
@@ -2869,18 +2869,15 @@ declare interface SubtleBadgeProps extends BadgeBaseProps {
     status?: never;
 }
 
-export declare const Switch: React_2.ForwardRefExoticComponent<SwitchProps & React_2.RefAttributes<HTMLInputElement>>;
+export declare const Switch: React_2.ForwardRefExoticComponent<SwitchProps & React_2.RefAttributes<HTMLButtonElement>>;
 
-export declare type SwitchProps = Omit<RemapReactAriaIsProperties<SwitchProps_2>, 'defaultSelected' | 'onChange'> & {
-    /** Label for the checkbox */
+declare type SwitchBaseProps = Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {
+    /** Label for the switch */
     label?: React_2.ReactNode;
-    onClick?: (event: React_2.MouseEvent<HTMLSpanElement>) => void;
-} & Either<{
-    checked: boolean;
-    onChange: (checked: boolean) => void;
-}, {
-    defaultChecked?: boolean;
-}>;
+    required?: boolean;
+};
+
+export declare type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;
 
 export declare type TabContentProps = React_2.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -3108,6 +3105,7 @@ export declare type TableCommonProps<TType = unknown> = TableFeatureProps<TType>
     defaultRowGroupColumnId?: keyof TType;
     defaultSettings?: TableSettings;
     emptyState?: TableEmptyStateRenderer;
+    enableLocalKeyboardShortcuts?: boolean;
     preset?: TablePreset;
     rowActions?: TableRowActionRenderer<TType>[];
     rowActionsForGroup?: TableRowActionGroupRenderer<TType>[];
@@ -3730,12 +3728,30 @@ export declare type TruncateProps = {
     tooltip: string;
 };
 
+export declare interface UncontrolledCheckboxProps extends CheckboxBaseProps {
+    checked?: never;
+    onChange?: never;
+    defaultChecked?: boolean;
+}
+
+declare interface UncontrolledModeSwitchProps extends ModeSwitchBaseProps {
+    checked?: never;
+    onChange?: never;
+    defaultChecked?: boolean;
+}
+
 declare interface UncontrolledRadioGroupProps extends RadioGroupBaseProps {
     defaultValue?: RadioGroupItemValue;
     onChange?: never;
     value?: never;
 }
 
+export declare interface UncontrolledSwitchProps extends SwitchBaseProps {
+    checked?: never;
+    onChange?: never;
+    defaultChecked?: boolean;
+}
+
 export declare const useBoundaryOverflowDetection: (ref: default_2.RefObject<HTMLElement>, dependencies?: any[]) => number | null | undefined;
 
 export declare const useBoundingClientRectListener: (ref: React_2.RefObject<HTMLElement>, dependencies?: Array<any>) => DOMRectReadOnly | undefined;