@redsift/design-system 11.5.0 → 11.6.0-muiv5-alpha.1

package/components/icon-button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/icon-button/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledButton } from '../button';\nimport { IconButtonVariant, StyledIconButtonProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledIconButton = styled(StyledButton)<StyledIconButtonProps>`\n  ${({ $variant }) => css`\n    padding: ${$variant === IconButtonVariant.secondary ? '8px' : '9px'};\n  `};\n\n  ${({ $isLoading }) =>\n    $isLoading\n      ? css`\n          & > .redsift-shield {\n            position: relative;\n          }\n        `\n      : ''}\n`;\n"],"names":["StyledIconButton","styled","StyledButton","_ref","$variant","css","IconButtonVariant","secondary","_ref2","$isLoading"],"mappings":";;;;AAIA;AACA;AACA;MACaA,gBAAgB,GAAGC,MAAM,CAACC,YAAY,CAAyB,CAAA;AAC5E,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AAC1B,aAAeD,EAAAA,QAAQ,KAAKE,iBAAiB,CAACC,SAAS,GAAG,KAAK,GAAG,KAAM,CAAA;AACxE,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,KAAA,CAAA;EAAA,OACfC,UAAU,GACNJ,GAAI,CAAA;AACZ;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}

package/components/icon-button/types.d.ts

@@ -0,0 +1,56 @@
+import { ComponentProps } from 'react';
+import { ButtonsColorPalette, Theme } from '../../types/colors.js';
+import { IconProps } from '../icon/types.js';
+import { ValueOf } from '../../types/helpers.js';
+import { StylingProps } from '../../types/styles.js';
+
+/**
+ * Component variant.
+ */
+declare const IconButtonVariant: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly unstyled: "unstyled";
+};
+type IconButtonVariant = ValueOf<typeof IconButtonVariant>;
+/**
+ * Component color.
+ */
+type IconButtonColor = ButtonsColorPalette;
+/**
+ * Component props.
+ */
+interface IconButtonProps extends ComponentProps<'button'>, StylingProps {
+    /** Color variant. */
+    color?: IconButtonColor;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    icon: IconProps['icon'];
+    /** Props to forward to the icon. */
+    iconProps?: Omit<IconProps, 'ref' | 'icon'>;
+    /** Whether the component is active or not. */
+    isActive?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is hovered or not. */
+    isHovered?: boolean;
+    /** Whether the component is in a loading state or not. */
+    isLoading?: boolean;
+    /** Theme. */
+    theme?: Theme;
+    /** Button variant. */
+    variant?: IconButtonVariant;
+}
+type StyledIconButtonProps = Omit<IconButtonProps, 'icon'> & {
+    $color: IconButtonProps['color'];
+    $isActive: IconButtonProps['isActive'];
+    $isDisabled: IconButtonProps['isDisabled'];
+    $isHovered: IconButtonProps['isHovered'];
+    $isLoading: IconButtonProps['isLoading'];
+    $theme: IconButtonProps['theme'];
+    $variant: IconButtonProps['variant'];
+};
+
+export { IconButtonColor, IconButtonProps, IconButtonVariant, StyledIconButtonProps };

package/components/icon-button/types.js

@@ -0,0 +1,19 @@
+/**
+ * Component variant.
+ */
+const IconButtonVariant = {
+  primary: 'primary',
+  secondary: 'secondary',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component color.
+ */
+
+/**
+ * Component props.
+ */
+
+export { IconButtonVariant };
+//# sourceMappingURL=types.js.map

package/components/icon-button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/icon-button/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ButtonsColorPalette, StylingProps, Theme, ValueOf } from '../../types';\nimport { IconProps } from '../icon';\n\n/**\n * Component variant.\n */\nexport const IconButtonVariant = {\n  primary: 'primary',\n  secondary: 'secondary',\n  unstyled: 'unstyled',\n} as const;\nexport type IconButtonVariant = ValueOf<typeof IconButtonVariant>;\n\n/**\n * Component color.\n */\nexport type IconButtonColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface IconButtonProps extends ComponentProps<'button'>, StylingProps {\n  /** Color variant. */\n  color?: IconButtonColor;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  icon: IconProps['icon'];\n  /** Props to forward to the icon. */\n  iconProps?: Omit<IconProps, 'ref' | 'icon'>;\n  /** Whether the component is active or not. */\n  isActive?: boolean;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is hovered or not. */\n  isHovered?: boolean;\n  /** Whether the component is in a loading state or not. */\n  isLoading?: boolean;\n  /** Theme. */\n  theme?: Theme;\n  /** Button variant. */\n  variant?: IconButtonVariant;\n}\n\nexport type StyledIconButtonProps = Omit<IconButtonProps, 'icon'> & {\n  $color: IconButtonProps['color'];\n  $isActive: IconButtonProps['isActive'];\n  $isDisabled: IconButtonProps['isDisabled'];\n  $isHovered: IconButtonProps['isHovered'];\n  $isLoading: IconButtonProps['isLoading'];\n  $theme: IconButtonProps['theme'];\n  $variant: IconButtonProps['variant'];\n};\n"],"names":["IconButtonVariant","primary","secondary","unstyled"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,iBAAiB,GAAG;AAC/BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;AAGA;AACA;AACA;;;;"}

package/components/icon-button-link/IconButtonLink.d.ts

@@ -0,0 +1,13 @@
+import { IconButtonLinkProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The IconButtonLink is a semantic link that looks like an icon button.
+ *
+ * For a semantic button that looks like an icon button, please use the IconButton component.
+ * For a semantic link that looks like a link, please use the Link component.
+ * For a semantic button that looks like a link, please use the LinkButton component.
+ */
+declare const IconButtonLink: Comp<IconButtonLinkProps, HTMLAnchorElement>;
+
+export { IconButtonLink };

package/components/icon-button-link/IconButtonLink.js

@@ -0,0 +1,76 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledGradientBorder } from '../gradient-border/index.js';
+import { StyledIconButton } from '../icon-button/styles.js';
+import { IconButtonVariant } from '../icon-button/types.js';
+import { useTheme } from '../theme/useTheme.js';
+import { ButtonsColorPalette } from '../../types/colors.js';
+import { ConditionalWrapper } from '../conditional-wrapper/ConditionalWrapper.js';
+import { Icon } from '../icon/Icon.js';
+
+const _excluded = ["as", "className", "color", "href", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "target", "theme", "variant"];
+const COMPONENT_NAME = 'IconButtonLink';
+const CLASSNAME = 'redsift-icon-button-link';
+
+/**
+ * The IconButtonLink is a semantic link that looks like an icon button.
+ *
+ * For a semantic button that looks like an icon button, please use the IconButton component.
+ * For a semantic link that looks like a link, please use the Link component.
+ * For a semantic button that looks like a link, please use the LinkButton component.
+ */
+const IconButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      className,
+      color: propsColor,
+      href,
+      icon,
+      iconProps,
+      isActive,
+      isDisabled,
+      isHovered,
+      target,
+      theme: propsTheme,
+      variant: propsVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const variant = Object.values(IconButtonVariant).includes(propsVariant) ? propsVariant : 'unstyled';
+  const isGradient = color === ButtonsColorPalette.radar;
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isGradient && variant === IconButtonVariant.secondary,
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
+      $color: color,
+      $isActive: isActive,
+      $isDisabled: isDisabled,
+      $isHovered: isHovered,
+      $theme: theme
+    }, children)
+  }, /*#__PURE__*/React__default.createElement(StyledIconButton, _extends({
+    as: as || 'a',
+    role: "link",
+    tabIndex: !isDisabled ? 0 : undefined
+  }, forwardedProps, {
+    $color: color,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isGradient: isGradient,
+    $isHovered: isHovered,
+    $theme: theme,
+    $variant: variant,
+    className: classNames(IconButtonLink.className, className),
+    href: !isDisabled ? href : undefined,
+    ref: ref,
+    target: target
+  }), /*#__PURE__*/React__default.createElement(Icon, _extends({}, iconProps, {
+    icon: icon
+  }))));
+});
+IconButtonLink.className = CLASSNAME;
+IconButtonLink.displayName = COMPONENT_NAME;
+
+export { IconButtonLink };
+//# sourceMappingURL=IconButtonLink.js.map

package/components/icon-button-link/IconButtonLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButtonLink.js","sources":["../../../src/components/icon-button-link/IconButtonLink.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ButtonsColorPalette } from '../../types';\nimport { Icon } from '../icon';\nimport { IconButtonLinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\nimport { StyledIconButton } from '../icon-button/styles';\nimport { IconButtonVariant } from '../icon-button/types';\n\nconst COMPONENT_NAME = 'IconButtonLink';\nconst CLASSNAME = 'redsift-icon-button-link';\n\n/**\n * The IconButtonLink is a semantic link that looks like an icon button.\n *\n * For a semantic button that looks like an icon button, please use the IconButton component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const IconButtonLink: Comp<IconButtonLinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n  const {\n    as,\n    className,\n    color: propsColor,\n    href,\n    icon,\n    iconProps,\n    isActive,\n    isDisabled,\n    isHovered,\n    target,\n    theme: propsTheme,\n    variant: propsVariant,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n  const variant = Object.values(IconButtonVariant).includes(propsVariant!) ? propsVariant : 'unstyled';\n  const isGradient = color === ButtonsColorPalette.radar;\n\n  return (\n    <ConditionalWrapper\n      condition={isGradient && variant === IconButtonVariant.secondary}\n      wrapper={(children) => (\n        <StyledGradientBorder\n          $color={color}\n          $isActive={isActive}\n          $isDisabled={isDisabled}\n          $isHovered={isHovered}\n          $theme={theme}\n        >\n          {children}\n        </StyledGradientBorder>\n      )}\n    >\n      <StyledIconButton\n        as={(as || 'a') as any}\n        role=\"link\"\n        tabIndex={!isDisabled ? 0 : undefined}\n        {...forwardedProps}\n        $color={color}\n        $isActive={isActive}\n        $isDisabled={isDisabled}\n        $isGradient={isGradient}\n        $isHovered={isHovered}\n        $theme={theme}\n        $variant={variant}\n        className={classNames(IconButtonLink.className, className)}\n        href={!isDisabled ? href : undefined}\n        ref={ref as RefObject<HTMLAnchorElement>}\n        target={target}\n      >\n        <Icon {...iconProps} icon={icon} />\n      </StyledIconButton>\n    </ConditionalWrapper>\n  );\n});\nIconButtonLink.className = CLASSNAME;\nIconButtonLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","IconButtonLink","forwardRef","props","ref","as","className","color","propsColor","href","icon","iconProps","isActive","isDisabled","isHovered","target","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","IconButtonVariant","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","children","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledIconButton","_extends","role","tabIndex","undefined","$isGradient","$variant","classNames","Icon","displayName"],"mappings":"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"}

package/components/icon-button-link/types.d.ts

@@ -0,0 +1,18 @@
+import { LinkProps } from '../link/types.js';
+import { IconButtonProps } from '../icon-button/types.js';
+
+/**
+ * Component props.
+ */
+interface IconButtonLinkProps extends Omit<LinkProps, 'color'>, Pick<IconButtonProps, 'icon' | 'iconProps' | 'color' | 'isActive' | 'isDisabled' | 'isHovered' | 'variant' | 'theme'> {
+}
+type StyledIconButtonLinkProps = Omit<IconButtonLinkProps, 'isActive' | 'isDisabled' | 'variant' | 'color' | 'size'> & {
+    $isActive: IconButtonLinkProps['isActive'];
+    $isDisabled: IconButtonLinkProps['isDisabled'];
+    $isHovered: IconButtonLinkProps['isHovered'];
+    $variant: IconButtonLinkProps['variant'];
+    $theme: IconButtonLinkProps['theme'];
+    $color: IconButtonLinkProps['color'];
+};
+
+export { IconButtonLinkProps, StyledIconButtonLinkProps };

package/components/item/Item.d.ts

@@ -0,0 +1,10 @@
+import { ItemProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+declare const RenderedListboxItem: Comp<Omit<ItemProps, 'value'> & Required<Pick<ItemProps, 'value'>>, HTMLElement>;
+/**
+ * The Item component.
+ */
+declare const Item: Comp<ItemProps, HTMLElement>;
+
+export { Item, RenderedListboxItem };

package/components/item/Item.js

@@ -0,0 +1,225 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useContext } from 'react';
+import classNames from 'classnames';
+import { StyledItem } from './styles.js';
+import { useListboxItem } from '../listbox/useListboxItem.js';
+import { useMenuItem } from './useMenuItem.js';
+import { mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@redsift/icons';
+import { StyledGradientBorder } from '../gradient-border/index.js';
+import { FocusWithinGroupContext } from '../focus-within-group/context.js';
+import { useTheme } from '../theme/useTheme.js';
+import { ButtonsColorPalette } from '../../types/colors.js';
+import { ConditionalWrapper } from '../conditional-wrapper/ConditionalWrapper.js';
+import { Flexbox } from '../flexbox/Flexbox.js';
+import { Icon } from '../icon/Icon.js';
+import { Text } from '../text/Text.js';
+import { useId } from '../../utils/useId.js';
+import { isComponent } from '../../utils/isComponent.js';
+
+const _excluded = ["borderRadius", "children", "className", "color", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "hasBorder", "hasCheckbox", "theme", "value"],
+  _excluded2 = ["borderRadius", "children", "className", "color", "hasBorder", "id", "isActive", "isDisabled", "isHovered", "theme", "onClick"];
+const COMPONENT_NAME = 'Item';
+const CLASSNAME = 'redsift-item';
+const RenderedListboxItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      borderRadius = '0',
+      children,
+      className,
+      color: propsColor,
+      defaultSelected,
+      id: propsId,
+      isActive,
+      isDisabled: propsIsDisabled,
+      isHovered,
+      isSelected: propsIsSelected,
+      hasBorder,
+      hasCheckbox,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const id = propsId !== null && propsId !== void 0 ? propsId : value;
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const {
+    tabIndex,
+    isFocused,
+    isSelected,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  } = useListboxItem({
+    domElementRef: divRef,
+    value,
+    id,
+    isDisabled: propsIsDisabled,
+    propsIsSelected: propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected
+  });
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const isGradient = color === ButtonsColorPalette.radar;
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isGradient,
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
+      $borderRadius: borderRadius,
+      $color: color,
+      $isActive: isActive,
+      $isDisabled: isDisabled,
+      $isHovered: isHovered,
+      $theme: theme,
+      width: "auto"
+    }, children)
+  }, /*#__PURE__*/React__default.createElement(StyledItem, _extends({
+    role: "option"
+  }, forwardedProps, {
+    id: id,
+    $borderRadius: borderRadius,
+    $color: color,
+    $hasBorder: hasBorder,
+    $hasCheckbox: hasCheckbox,
+    $isActive: isActive || isSelected,
+    $isDisabled: isDisabled,
+    $isGradient: isGradient,
+    $isHovered: isHovered || isFocused,
+    $theme: theme,
+    "aria-selected": isSelected,
+    "aria-disabled": isDisabled,
+    className: classNames(Item.className, className),
+    onClick: isDisabled ? undefined : handleClick,
+    ref: divRef,
+    onKeyDown: handleKeyDown,
+    tabIndex: tabIndex
+  }), hasCheckbox ? /*#__PURE__*/React__default.createElement(Flexbox, null, isSelected ? /*#__PURE__*/React__default.createElement(Icon, {
+    color: isDisabled ? 'grey' : color,
+    icon: mdiCheckboxMarked
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    color: "question",
+    icon: mdiCheckboxBlankOutline
+  }), children ? children : /*#__PURE__*/React__default.createElement(Text, null, value)) : children !== null && children !== void 0 ? children : value));
+});
+const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      borderRadius = '0',
+      children,
+      className,
+      color: propsColor,
+      hasBorder,
+      id: propsId,
+      isActive,
+      isDisabled: propsIsDisabled,
+      isHovered,
+      theme: propsTheme,
+      onClick
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded2);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const linkRef = useRef(null);
+  const isLinkMenuItem = isComponent('Link')(children);
+  const {
+    tabIndex,
+    isFocused,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  } = useMenuItem({
+    domElementRef: divRef,
+    id,
+    isDisabled: propsIsDisabled,
+    onClick: onClick,
+    isLinkMenuItem,
+    linkRef
+  });
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const isGradient = color === ButtonsColorPalette.radar;
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isGradient,
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
+      $borderRadius: borderRadius,
+      $color: color,
+      $isActive: isActive,
+      $isDisabled: isDisabled,
+      $isHovered: isHovered,
+      $theme: theme,
+      width: "auto"
+    }, children)
+  }, /*#__PURE__*/React__default.createElement(StyledItem, _extends({
+    as: "li",
+    role: isLinkMenuItem ? 'none' : 'menuitem'
+  }, forwardedProps, {
+    id: id,
+    $borderRadius: borderRadius,
+    $color: color,
+    $hasBorder: hasBorder,
+    $hasCheckbox: false,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isGradient: isGradient,
+    $isHovered: isHovered || isFocused,
+    $theme: theme,
+    "aria-disabled": isDisabled,
+    className: classNames(Item.className, className),
+    onClick: isDisabled ? undefined : handleClick,
+    ref: divRef,
+    onKeyDown: handleKeyDown,
+    tabIndex: tabIndex
+  }), isLinkMenuItem ? /*#__PURE__*/React__default.cloneElement(children, {
+    role: 'menuitem',
+    ref: linkRef
+  }) : children));
+});
+
+/**
+ * The Item component.
+ */
+const Item = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value
+  } = props;
+  const focusContext = useContext(FocusWithinGroupContext);
+  const isListbox = focusContext.state.listRole === 'listbox';
+  if (!focusContext.state.filter) {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends({}, props, {
+      ref: ref
+    }));
+  }
+  const {
+    value: filterValue,
+    type,
+    caseSensitive
+  } = focusContext.state.filter;
+  if (!filterValue) {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends({}, props, {
+      ref: ref
+    }));
+  } else if (caseSensitive && (type === 'startsWith' && value.startsWith(filterValue) || type === 'contains' && value.includes(filterValue) || type === 'endsWith' && value.endsWith(filterValue))) {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends({}, props, {
+      ref: ref
+    }));
+  } else if (!caseSensitive && (type === 'startsWith' && value.toLowerCase().startsWith(filterValue.toLowerCase()) || type === 'contains' && value.toLowerCase().includes(filterValue.toLowerCase()) || type === 'endsWith' && value.toLowerCase().endsWith(filterValue.toLowerCase()))) {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends({}, props, {
+      ref: ref
+    }));
+  }
+  return null;
+});
+Item.className = CLASSNAME;
+Item.displayName = COMPONENT_NAME;
+
+export { Item, RenderedListboxItem };
+//# sourceMappingURL=Item.js.map

package/components/item/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sources":["../../../src/components/item/Item.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp } from '../../types';\nimport { ItemProps } from './types';\nimport { StyledItem } from './styles';\nimport { useListboxItem } from '../listbox/useListboxItem';\nimport { FocusWithinGroupContext } from '../focus-within-group';\nimport { useMenuItem } from './useMenuItem';\nimport { isComponent, useId } from '../../utils';\nimport { useTheme } from '../theme';\nimport { Flexbox } from '../flexbox';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport { mdiCheckboxBlankOutline, mdiCheckboxMarked } from '@redsift/icons';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'Item';\nconst CLASSNAME = 'redsift-item';\n\nexport const RenderedListboxItem: Comp<Omit<ItemProps, 'value'> & Required<Pick<ItemProps, 'value'>>, HTMLElement> =\n  forwardRef((props, ref) => {\n    const {\n      borderRadius = '0',\n      children,\n      className,\n      color: propsColor,\n      defaultSelected,\n      id: propsId,\n      isActive,\n      isDisabled: propsIsDisabled,\n      isHovered,\n      isSelected: propsIsSelected,\n      hasBorder,\n      hasCheckbox,\n      theme: propsTheme,\n      value,\n      ...forwardedProps\n    } = props;\n    const id = propsId ?? value;\n    const _ref = useRef<HTMLElement>();\n    const divRef = ref ?? _ref;\n\n    const { tabIndex, isFocused, isSelected, isDisabled, handleKeyDown, handleClick } = useListboxItem({\n      domElementRef: divRef as RefObject<Element>,\n      value,\n      id,\n      isDisabled: propsIsDisabled!,\n      propsIsSelected: propsIsSelected ?? defaultSelected,\n    });\n\n    const theme = useTheme(propsTheme);\n    const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n    const isGradient = color === ButtonsColorPalette.radar;\n\n    return (\n      <ConditionalWrapper\n        condition={isGradient}\n        wrapper={(children) => (\n          <StyledGradientBorder\n            $borderRadius={borderRadius}\n            $color={color}\n            $isActive={isActive}\n            $isDisabled={isDisabled}\n            $isHovered={isHovered}\n            $theme={theme}\n            width=\"auto\"\n          >\n            {children}\n          </StyledGradientBorder>\n        )}\n      >\n        <StyledItem\n          role=\"option\"\n          {...forwardedProps}\n          id={id}\n          $borderRadius={borderRadius}\n          $color={color}\n          $hasBorder={hasBorder}\n          $hasCheckbox={hasCheckbox}\n          $isActive={isActive || isSelected}\n          $isDisabled={isDisabled}\n          $isGradient={isGradient}\n          $isHovered={isHovered || isFocused}\n          $theme={theme}\n          aria-selected={isSelected}\n          aria-disabled={isDisabled}\n          className={classNames(Item.className, className)}\n          onClick={isDisabled ? undefined : handleClick}\n          ref={divRef as RefObject<HTMLElement>}\n          onKeyDown={handleKeyDown}\n          tabIndex={tabIndex}\n        >\n          {hasCheckbox ? (\n            <Flexbox>\n              {isSelected ? (\n                <Icon color={isDisabled ? 'grey' : color} icon={mdiCheckboxMarked} />\n              ) : (\n                <Icon color=\"question\" icon={mdiCheckboxBlankOutline} />\n              )}\n              {children ? children : <Text>{value}</Text>}\n            </Flexbox>\n          ) : (\n            children ?? value\n          )}\n        </StyledItem>\n      </ConditionalWrapper>\n    );\n  });\n\nconst RenderedMenuItem: Comp<Omit<ItemProps, 'value'>, HTMLElement> = forwardRef((props, ref) => {\n  const {\n    borderRadius = '0',\n    children,\n    className,\n    color: propsColor,\n    hasBorder,\n    id: propsId,\n    isActive,\n    isDisabled: propsIsDisabled,\n    isHovered,\n    theme: propsTheme,\n    onClick,\n    ...forwardedProps\n  } = props;\n  const [_id] = useId();\n  const id = propsId ?? _id;\n  const _ref = useRef<HTMLElement>();\n  const divRef = ref ?? _ref;\n  const linkRef = useRef<HTMLAnchorElement>(null);\n\n  const isLinkMenuItem = isComponent('Link')(children);\n  const { tabIndex, isFocused, isDisabled, handleKeyDown, handleClick } = useMenuItem({\n    domElementRef: divRef as RefObject<Element>,\n    id,\n    isDisabled: propsIsDisabled!,\n    onClick: onClick as any,\n    isLinkMenuItem,\n    linkRef,\n  });\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n  const isGradient = color === ButtonsColorPalette.radar;\n\n  return (\n    <ConditionalWrapper\n      condition={isGradient}\n      wrapper={(children) => (\n        <StyledGradientBorder\n          $borderRadius={borderRadius}\n          $color={color}\n          $isActive={isActive}\n          $isDisabled={isDisabled}\n          $isHovered={isHovered}\n          $theme={theme}\n          width=\"auto\"\n        >\n          {children}\n        </StyledGradientBorder>\n      )}\n    >\n      <StyledItem\n        as=\"li\"\n        role={isLinkMenuItem ? 'none' : 'menuitem'}\n        {...forwardedProps}\n        id={id}\n        $borderRadius={borderRadius}\n        $color={color}\n        $hasBorder={hasBorder}\n        $hasCheckbox={false}\n        $isActive={isActive}\n        $isDisabled={isDisabled}\n        $isGradient={isGradient}\n        $isHovered={isHovered || isFocused}\n        $theme={theme}\n        aria-disabled={isDisabled}\n        className={classNames(Item.className, className)}\n        onClick={isDisabled ? undefined : handleClick}\n        ref={divRef}\n        onKeyDown={handleKeyDown}\n        tabIndex={tabIndex}\n      >\n        {isLinkMenuItem\n          ? React.cloneElement(children, {\n              role: 'menuitem',\n              ref: linkRef,\n            })\n          : children}\n      </StyledItem>\n    </ConditionalWrapper>\n  );\n});\n\n/**\n * The Item component.\n */\nexport const Item: Comp<ItemProps, HTMLElement> = forwardRef((props, ref) => {\n  const { value } = props;\n  const focusContext = useContext(FocusWithinGroupContext);\n  const isListbox = focusContext.state.listRole === 'listbox';\n\n  if (!focusContext.state.filter) {\n    return isListbox ? (\n      <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n    ) : (\n      <RenderedMenuItem {...props} ref={ref} />\n    );\n  }\n\n  const { value: filterValue, type, caseSensitive } = focusContext.state.filter;\n\n  if (!filterValue) {\n    return isListbox ? (\n      <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n    ) : (\n      <RenderedMenuItem {...props} ref={ref} />\n    );\n  } else if (\n    caseSensitive &&\n    ((type === 'startsWith' && value!.startsWith(filterValue)) ||\n      (type === 'contains' && value!.includes(filterValue)) ||\n      (type === 'endsWith' && value!.endsWith(filterValue)))\n  ) {\n    return isListbox ? (\n      <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n    ) : (\n      <RenderedMenuItem {...props} ref={ref} />\n    );\n  } else if (\n    !caseSensitive &&\n    ((type === 'startsWith' && value!.toLowerCase().startsWith(filterValue.toLowerCase())) ||\n      (type === 'contains' && value!.toLowerCase().includes(filterValue.toLowerCase())) ||\n      (type === 'endsWith' && value!.toLowerCase().endsWith(filterValue.toLowerCase())))\n  ) {\n    return isListbox ? (\n      <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n    ) : (\n      <RenderedMenuItem {...props} ref={ref} />\n    );\n  }\n\n  return null;\n});\nItem.className = CLASSNAME;\nItem.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","RenderedListboxItem","forwardRef","props","ref","borderRadius","children","className","color","propsColor","defaultSelected","id","propsId","isActive","isDisabled","propsIsDisabled","isHovered","isSelected","propsIsSelected","hasBorder","hasCheckbox","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","_ref","useRef","divRef","tabIndex","isFocused","handleKeyDown","handleClick","useListboxItem","domElementRef","useTheme","Object","values","ButtonsColorPalette","includes","isGradient","radar","React","createElement","ConditionalWrapper","condition","wrapper","StyledGradientBorder","$borderRadius","$color","$isActive","$isDisabled","$isHovered","$theme","width","StyledItem","_extends","role","$hasBorder","$hasCheckbox","$isGradient","classNames","Item","onClick","undefined","onKeyDown","Flexbox","Icon","icon","mdiCheckboxMarked","mdiCheckboxBlankOutline","Text","RenderedMenuItem","_excluded2","_id","useId","linkRef","isLinkMenuItem","isComponent","useMenuItem","as","cloneElement","focusContext","useContext","FocusWithinGroupContext","isListbox","state","listRole","filter","filterValue","type","caseSensitive","startsWith","endsWith","toLowerCase","displayName"],"mappings":"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"}

package/components/item/styles.d.ts

@@ -0,0 +1,20 @@
+import * as styled_components from 'styled-components';
+import { ItemProps } from './types.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component style.
+ */
+declare const StyledItem: styled_components.StyledComponent<"div", any, Omit<ItemProps, "color" | "onClick" | "value"> & {
+    $borderRadius: string | undefined;
+    $color: string | undefined;
+    $hasBorder: boolean | undefined;
+    $hasCheckbox: boolean | undefined;
+    $isActive: boolean | undefined;
+    $isDisabled: boolean | undefined;
+    $isGradient: boolean;
+    $isHovered: boolean | undefined;
+    $theme: Theme | undefined;
+}, never>;
+
+export { StyledItem };

package/components/item/styles.js

@@ -0,0 +1,129 @@
+import styled, { css } from 'styled-components';
+import { baseContainer } from '../shared/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledItem = styled.div`
+  min-height: 36px;
+  position: relative;
+  width: 100%;
+  padding: 8px 16px;
+
+  ${baseContainer}
+
+  align-items: center;
+  background: none;
+  border: none;
+  box-sizing: border-box;
+  display: inline-flex;
+
+  > a {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  ${_ref => {
+  let {
+    $color,
+    $isActive,
+    $isDisabled,
+    $isGradient,
+    $isHovered,
+    $hasBorder,
+    $theme
+  } = _ref;
+  return css`
+    ${!$isGradient ? css`
+          background-color: var(
+            --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}
+          );
+        ` : css`
+          background: var(
+            --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}
+          );
+        `}
+
+    ${$hasBorder ? css`
+          border: 1px solid
+            var(
+              --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-text-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}
+            );
+        ` : ''}
+  `;
+}}
+
+  &:hover {
+    outline: none;
+
+    ${_ref2 => {
+  let {
+    $color,
+    $isDisabled,
+    $isGradient,
+    $hasBorder,
+    $theme
+  } = _ref2;
+  return css`
+      cursor: ${$isDisabled ? 'default' : 'pointer'};
+
+      ${!$isDisabled ? css`
+            ${!$isGradient ? css`
+                  background-color: var(
+                    --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-background-hover
+                  );
+
+                  ${$hasBorder ? css`
+                        border: 1px solid
+                          var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-hover);
+                      ` : ''}
+                ` : css`
+                  background: var(
+                    --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-background-hover
+                  );
+                `}
+          ` : ''}
+    `;
+}};
+  }
+
+  &:active {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $color,
+    $hasBorder,
+    $isHovered,
+    $isDisabled,
+    $isGradient,
+    $theme
+  } = _ref3;
+  return css`
+      ${!$isDisabled ? css`
+            ${!$isGradient ? css`
+                  background-color: var(
+                    --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isHovered ? 'hover' : 'active'}
+                  );
+
+                  ${$hasBorder ? css`
+                        border: 1px solid
+                          var(
+                            --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-text-${$isHovered ? 'hover' : 'active'}
+                          );
+                      ` : ''}
+                ` : css`
+                  background: var(
+                    --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isHovered ? 'hover' : 'active'}
+                  );
+                `}
+          ` : ''}
+    `;
+}};
+  }
+`;
+
+export { StyledItem };
+//# sourceMappingURL=styles.js.map