Merge remote-tracking branch 'origin/develop'

packages/ui/src/components/accordion/accordion.types.ts

@@ -5,14 +5,22 @@ import { type VariantProps } from 'tailwind-variants';
 import { styles } from './accordion.styles.js';
 import { AccordionItemProps } from './components/index.js';
 
-export type AccordionProps<T = any> = SpectrumAccordionProps<T> &
-  VariantProps<typeof styles> & {
-    /**
-     * Accordion colors
-     */
-    color?: AccordionItemProps['color'];
-    /**
-     * Stretch the tab to fill the whole content
-     */
-    justify?: boolean;
-  } & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+type Variants = VariantProps<typeof styles>;
+export type AccordionProps<T = any> = SpectrumAccordionProps<T> & {
+  /**
+   * Accordion colors
+   */
+  color?: AccordionItemProps['color'];
+  /**
+   * Stretch the tab to fill the whole content
+   */
+  justify?: boolean;
+  /**
+   * The look of the accordion
+   */
+  look?: Variants['look'];
+  /**
+   * Whether the accordion is rounded
+   */
+  rounded?: Variants['rounded'];
+} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;

packages/ui/src/components/accordion/components/accordion-item/accordion-item.types.ts

@@ -4,11 +4,21 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './accordion-item.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type AccordionItemProps<T = any> = {
+  /**
+   * Color of the item
+   */
+  color?: Variants['color'];
   /**
    * Node from react-stately
    */
   item: Node<T>;
+  /**
+   * Look of the item
+   */
+  look?: Variants['look'];
   /**
    * Tree state
    */
@@ -17,5 +27,4 @@ export type AccordionItemProps<T = any> = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

packages/ui/src/components/alert/alert.types.ts

@@ -1,7 +1,4 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './alert.styles.js';
 
 export type Look = 'info' | 'success' | 'warning' | 'danger' | 'system';
 
@@ -44,5 +41,4 @@ export type AlertProps = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

packages/ui/src/components/autocomplete/autocomplete.types.ts

@@ -8,6 +8,8 @@ import { FormHintProps } from '../index.js';
 import { styles } from './autocomplete.styles.js';
 import { PopoverProps } from './components/index.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type AutocompleteProps<T extends object> = {
   /**
    * error message
@@ -21,10 +23,21 @@ export type AutocompleteProps<T extends object> = {
    * hint message
    */
   hintMessage?: FormHintProps['children'];
+  /**
+   * Whether autocomplete is invalid
+   */
+  invalid?: Variants['invalid'];
+  /**
+   * Whether autocomplete is disabled
+   */
+  isDisabled?: Variants['isDisabled'];
   /**
    * Element where the popover will be rendered, by default it will be into the body
    */
   portalContainer?: PopoverProps['portalContainer'];
-} & VariantProps<typeof styles> &
-  ComboBoxProps<T> &
+  /**
+   * Size of autocomplete
+   */
+  size?: Variants['size'];
+} & ComboBoxProps<T> &
   AriaLabelingProps;

packages/ui/src/components/badge/badge.types.ts

@@ -3,10 +3,19 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './badge.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type BadgeProps = {
+  /**
+   * Color of badge
+   */
+  color?: Variants['color'];
   /**
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  Omit<HTMLAttributes<Element>, 'color' | 'type'>;
+  /**
+   * Type of badge
+   */
+  type?: Variants['type'];
+} & Omit<HTMLAttributes<Element>, 'color' | 'type'>;

packages/ui/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.types.ts

@@ -1,7 +1,4 @@
 import { AnchorHTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './breadcrumb-item.styles.js';
 
 export type BreadcrumbItemProps = {
   /**
@@ -16,5 +13,4 @@ export type BreadcrumbItemProps = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  AnchorHTMLAttributes<Element>;
+} & AnchorHTMLAttributes<Element>;

packages/ui/src/components/button-dropdown/button-dropdown.types.ts

@@ -5,7 +5,13 @@ import { ButtonProps } from '../button/index.js';
 
 import { styles } from './button-dropdown.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type ButtonDropdownProps = {
+  /**
+   * Size of the the dropdown panel
+   */
+  dropdownSize?: Variants['dropdownSize'];
   /**
    * Look for button
    */
@@ -23,5 +29,4 @@ export type ButtonDropdownProps = {
    */
   text: string;
 } & ButtonHTMLAttributes<Element> &
-  Pick<ButtonProps, 'size' | 'iconBefore' | 'block'> &
-  VariantProps<typeof styles>;
+  Pick<ButtonProps, 'size' | 'iconBefore' | 'block'>;

packages/ui/src/components/button/button.types.ts

@@ -5,7 +5,13 @@ import { IconProps } from '../icon/index.js';
 
 import { styles } from './button.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type ButtonProps = {
+  /**
+   * Fit button width to its parent width.
+   */
+  block?: Variants['block'];
   /**
    * Places an icon within the button, after the button’s text
    */
@@ -20,10 +26,25 @@ export type ButtonProps = {
    * Defaults to the current text color.
    */
   iconColor?: IconProps['color'];
+  /**
+   * Justify align button children
+   */
+  justify?: Variants['justify'];
+  /**
+   * Button look
+   */
+  look?: Variants['look'];
+  /**
+   * Size of the button
+   */
+  size?: Variants['size'];
+  /**
+   * Removes background colour and adjusts text colour.
+   */
+  soft?: Variants['soft'];
   /**
    * Tag to render
    */
   tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
 } & ButtonHTMLAttributes<Element> &
-  AnchorHTMLAttributes<Element> &
-  VariantProps<typeof styles>;
+  AnchorHTMLAttributes<Element>;

packages/ui/src/components/circle/circle.types.ts

@@ -1,12 +1,8 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './circle.styles.js';
 
 export type CircleProps = {
   /**
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

packages/ui/src/components/date-picker/date-picker.types.ts

@@ -14,6 +14,8 @@ export type DuetDatePickerElement = Element & {
   value?: string;
 };
 
+type Variants = VariantProps<typeof styles>;
+
 export type DatePickerProps = {
   /*
    * Disable specific dates. Must be in IS0-8601 format: YYYY-MM-DD
@@ -59,9 +61,12 @@ export type DatePickerProps = {
    * onOpen
    */
   onOpen?: (...args: any[]) => unknown;
+  /**
+   * Size of datepicker input
+   */
+  size?: Variants['size'];
   /*
    * Date picker input value. Must be in IS0-8601 format: YYYY-MM-DD
    */
   value?: string;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

packages/ui/src/components/error-message/error-message.types.ts

@@ -1,7 +1,4 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './error-message.styles.js';
 
 export type ErrorMessageProps = {
   /**
@@ -16,5 +13,4 @@ export type ErrorMessageProps = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

packages/ui/src/components/field/field.types.ts

@@ -1,11 +1,8 @@
 import { HTMLAttributes } from 'react';
 import { AriaFieldProps } from 'react-aria';
-import { type VariantProps } from 'tailwind-variants';
 
 import { FormHintProps } from '../index.js';
 
-import { styles } from './field.styles.js';
-
 export type FieldProps = {
   /**
    * error message
@@ -20,5 +17,4 @@ export type FieldProps = {
    */
   tag?: keyof JSX.IntrinsicElements;
 } & AriaFieldProps &
-  VariantProps<typeof styles> &
   HTMLAttributes<Element>;

packages/ui/src/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.types.ts

@@ -1,7 +1,4 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './flexi-cell-adornment.styles.js';
 
 export type FlexiCellAdornmentProps = {
   /**
@@ -16,5 +13,4 @@ export type FlexiCellAdornmentProps = {
    * Component's tag
    */
   tag?: keyof JSX.IntrinsicElements;
-} & HTMLAttributes<HTMLOrSVGElement> &
-  VariantProps<typeof styles>;
+} & HTMLAttributes<HTMLOrSVGElement>;

packages/ui/src/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.types.ts

@@ -1,7 +1,4 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './flexi-cell-body.styles.js';
 
 export type BaseFlexiCellBodyProps = {
   /**
@@ -40,5 +37,4 @@ export type FlexiCellBodyProps<Tag extends ElementKeysWithoutA = ElementKeysWith
   | FlexiCellBodyAsLinkProps
   | CircleAsAllOtherTagsProps<Tag>
 ) &
-  BaseFlexiCellBodyProps &
-  VariantProps<typeof styles>;
+  BaseFlexiCellBodyProps;

packages/ui/src/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.types.ts

@@ -1,7 +1,4 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { VariantProps } from 'tailwind-variants';
-
-import { styles } from './flexi-cell-hint.styles.js';
 
 export type FlexiCellHintProps = {
   /**
@@ -16,5 +13,4 @@ export type FlexiCellHintProps = {
    * Define if it is going to truncate the text
    */
   truncateText?: boolean;
-} & HTMLAttributes<HTMLOrSVGElement> &
-  VariantProps<typeof styles>;
+} & HTMLAttributes<HTMLOrSVGElement>;

packages/ui/src/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.types.ts

@@ -1,7 +1,4 @@
 import { CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './flexi-cell-label.styles.js';
 
 export type FlexiCellLabelProps = {
   /**
@@ -20,5 +17,4 @@ export type FlexiCellLabelProps = {
    * Define if it is going to truncate the text
    */
   truncateText?: boolean;
-} & HTMLAttributes<HTMLOrSVGElement> &
-  VariantProps<typeof styles>;
+} & HTMLAttributes<HTMLOrSVGElement>;

packages/ui/src/components/flexi-cell/flexi-cell.types.ts

@@ -1,7 +1,4 @@
 import { CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './flexi-cell.styles.js';
 
 type BaseFlexiCellProps = {
   /**
@@ -68,7 +65,4 @@ type FlexiCellAsAllOtherTagsProps<Tag> = {
 
 export type FlexiCellProps<
   Tag extends keyof Omit<JSX.IntrinsicElements, 'a'> = keyof Omit<JSX.IntrinsicElements, 'a'>,
-> = (FlexiCellAsLinkProps | FlexiCellAsAllOtherTagsProps<Tag>) &
-  BaseFlexiCellProps &
-  VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+> = (FlexiCellAsLinkProps | FlexiCellAsAllOtherTagsProps<Tag>) & BaseFlexiCellProps & HTMLAttributes<Element>;

packages/ui/src/components/form-hint/form-hint.types.ts

@@ -1,7 +1,4 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './form-hint.styles.js';
 
 export type FormHintProps = {
   /**
@@ -12,5 +9,4 @@ export type FormHintProps = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & Omit<VariantProps<typeof styles>, 'spacing'> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;