@redis-ui/components 37.0.0

package/dist/Checkbox/components/Label/Label.style.d.ts

@@ -0,0 +1,6 @@
+import { CheckboxVariants, CheckedType } from '../Compose/Compose.types';
+export declare const CheckboxLabel: import("styled-components").StyledComponent<"label", any, {
+    $checked: CheckedType;
+    $variant: CheckboxVariants;
+}, never>;
+export declare const TypographyBody: import("styled-components").StyledComponent<({ size, variant, component, color, ellipsis, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Checkbox/components/Label/Label.style.js

@@ -0,0 +1,38 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { CheckboxCompose } from "../Compose/Compose.style.js";
+import { textColorMap } from "../../../Button/Button.style.utils.js";
+import { getRelatedStateSelector, styleFromTokens } from "../../../Helpers/css.utils.js";
+import { CheckboxIndicator } from "../Indicator/Indicator.style.js";
+import Typography from "../../../Typography/Typography.js";
+const maps = [textColorMap];
+const getStateStyles = (tokens) => {
+  const getLabelStateSelector = (state, stateTokens, fallbackTokens) => `${getRelatedStateSelector(CheckboxIndicator, state, CheckboxCompose)} {
+    ${styleFromTokens(maps, stateTokens, fallbackTokens)};
+  }`;
+  return css`
+    ${getLabelStateSelector("", tokens.normal)};
+    ${getLabelStateSelector(":hover", tokens.hover, tokens.normal)};
+    ${getLabelStateSelector(":active", tokens.active, tokens.normal)};
+    ${getLabelStateSelector(":disabled", tokens.disabled)};
+
+    ${getRelatedStateSelector(CheckboxIndicator, ":disabled", CheckboxCompose)} {
+      pointer-events: none;
+    }
+  `;
+};
+const CheckboxLabel = _styled.label.withConfig({
+  displayName: "Labelstyle__CheckboxLabel",
+  componentId: "RedisUI__sc-ttjdpe-0"
+})(["display:flex;align-items:center;cursor:pointer;padding:", ";min-width:0;gap:", ";overflow:hidden;text-overflow:ellipsis;", ""], () => useTheme().components.checkbox.label.padding, () => useTheme().components.checkbox.label.gap, ({
+  $variant,
+  $checked
+}) => getStateStyles(useTheme().components.checkbox.variants[$variant][$checked ? "on" : "off"]));
+const TypographyBody = _styled(Typography.Body).withConfig({
+  displayName: "Labelstyle__TypographyBody",
+  componentId: "RedisUI__sc-ttjdpe-1"
+})(["overflow:hidden;text-overflow:ellipsis;"]);
+export {
+  CheckboxLabel,
+  TypographyBody
+};

package/dist/Checkbox/components/Label/Label.types.d.ts

@@ -0,0 +1,2 @@
+import { LabelHTMLAttributes } from 'react';
+export type CheckboxLabelProps = LabelHTMLAttributes<HTMLLabelElement>;

package/dist/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Checkbox } from './Checkbox';
+export * from './Checkbox.types';
+export type { CheckedType } from './components/Compose/Compose.types';

package/dist/Chip/Chip.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const Compose = require("./components/Compose/Compose.cjs");
+const CloseButton = require("./components/CloseButton/CloseButton.cjs");
+const Title = require("./components/Title/Title.cjs");
+const Chip = Object.assign(({
+  text,
+  onClose,
+  ...restProps
+}) => {
+  return jsxRuntime.jsxRuntimeExports.jsxs(Chip.Compose, {
+    ...restProps,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Chip.Title, {
+      children: text
+    }), jsxRuntime.jsxRuntimeExports.jsx(Chip.CloseButton, {
+      onClose
+    })]
+  });
+}, {
+  Compose: Compose.Compose,
+  Title: Title.Title,
+  CloseButton: CloseButton.CloseButton
+});
+const Chip$1 = Chip;
+exports.default = Chip$1;

package/dist/Chip/Chip.context.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ChipContext = React.createContext(null);
+function useChipContext() {
+  const chipContext = React.useContext(ChipContext);
+  if (!chipContext) {
+    throw new Error(`Chip compound components cannot be rendered outside the Chip component`);
+  }
+  return chipContext;
+}
+exports.ChipContext = ChipContext;
+exports.useChipContext = useChipContext;

package/dist/Chip/Chip.context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ChipContextType } from './Chip.types';
+export declare const ChipContext: import("react").Context<ChipContextType | null>;
+export declare function useChipContext(): ChipContextType;

package/dist/Chip/Chip.context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const ChipContext = createContext(null);
+function useChipContext() {
+  const chipContext = useContext(ChipContext);
+  if (!chipContext) {
+    throw new Error(`Chip compound components cannot be rendered outside the Chip component`);
+  }
+  return chipContext;
+}
+export {
+  ChipContext,
+  useChipContext
+};

package/dist/Chip/Chip.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ChipProps } from './Chip.types';
+declare const Chip: (({ text, onClose, ...restProps }: ChipProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ size, variant, disabled, tooltip, ...restProps }: import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLSpanElement>, "content" | "children"> & import("./components/Compose/Compose.types").ChipComposeProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ size, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+    CloseButton: ({ onClose, icon: Icon, ...restProps }: Pick<import("react").HTMLAttributes<HTMLElement>, "style" | "className"> & {
+        icon?: import("@redislabsdev/redis-ui-icons/monochrome").IconType | undefined;
+    } & import("./components/CloseButton/CloseButton.types").ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default Chip;

package/dist/Chip/Chip.js

@@ -0,0 +1,26 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { Compose } from "./components/Compose/Compose.js";
+import { CloseButton } from "./components/CloseButton/CloseButton.js";
+import { Title } from "./components/Title/Title.js";
+const Chip = Object.assign(({
+  text,
+  onClose,
+  ...restProps
+}) => {
+  return jsxRuntimeExports.jsxs(Chip.Compose, {
+    ...restProps,
+    children: [jsxRuntimeExports.jsx(Chip.Title, {
+      children: text
+    }), jsxRuntimeExports.jsx(Chip.CloseButton, {
+      onClose
+    })]
+  });
+}, {
+  Compose,
+  Title,
+  CloseButton
+});
+const Chip$1 = Chip;
+export {
+  Chip$1 as default
+};

package/dist/Chip/Chip.types.d.ts

@@ -0,0 +1,13 @@
+import type { ChipComposeProps, RestChipComposeProps } from './components/Compose/Compose.types';
+import type { ChipCloseButtonProps } from './components/CloseButton/CloseButton.types';
+import type { ChildFree } from '../Helpers/common.types';
+export interface ChipProps extends ChipComposeProps, ChildFree<RestChipComposeProps>, ChipCloseButtonProps {
+    text: string;
+}
+export type ChipSizes = 'M' | 'S';
+export type ChipVariants = 'regular' | 'flat';
+export interface ChipContextType {
+    size: ChipSizes;
+    disabled: boolean;
+    variant: ChipVariants;
+}

package/dist/Chip/components/CloseButton/CloseButton.cjs

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const CloseButton_style = require("./CloseButton.style.cjs");
+const Chip_context = require("../../Chip.context.cjs");
+const sizeMapper = {
+  S: "M",
+  M: "L"
+};
+const CloseButton = ({
+  onClose,
+  icon: Icon = redisUiIcons.ToastCancelIcon,
+  ...restProps
+}) => {
+  const {
+    size,
+    variant,
+    disabled
+  } = Chip_context.useChipContext();
+  if (!onClose || disabled) return null;
+  const handleRemoveChip = (e) => {
+    e.stopPropagation();
+    onClose();
+  };
+  return jsxRuntime.jsxRuntimeExports.jsx(CloseButton_style.CloseButton, {
+    type: "button",
+    role: "button",
+    onClick: handleRemoveChip,
+    "$size": size,
+    "$variant": variant,
+    ...restProps,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Icon, {
+      size: sizeMapper[size],
+      customColor: "currentColor",
+      title: "Remove"
+    })
+  });
+};
+exports.CloseButton = CloseButton;

package/dist/Chip/components/CloseButton/CloseButton.d.ts

@@ -0,0 +1,2 @@
+import { ChipCloseButtonProps, RestChipCloseButtonProps } from './CloseButton.types';
+export declare const CloseButton: ({ onClose, icon: Icon, ...restProps }: RestChipCloseButtonProps & ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Chip/components/CloseButton/CloseButton.js

@@ -0,0 +1,40 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { ToastCancelIcon } from "@redislabsdev/redis-ui-icons";
+import { CloseButton as CloseButton$1 } from "./CloseButton.style.js";
+import { useChipContext } from "../../Chip.context.js";
+const sizeMapper = {
+  S: "M",
+  M: "L"
+};
+const CloseButton = ({
+  onClose,
+  icon: Icon = ToastCancelIcon,
+  ...restProps
+}) => {
+  const {
+    size,
+    variant,
+    disabled
+  } = useChipContext();
+  if (!onClose || disabled) return null;
+  const handleRemoveChip = (e) => {
+    e.stopPropagation();
+    onClose();
+  };
+  return jsxRuntimeExports.jsx(CloseButton$1, {
+    type: "button",
+    role: "button",
+    onClick: handleRemoveChip,
+    "$size": size,
+    "$variant": variant,
+    ...restProps,
+    children: jsxRuntimeExports.jsx(Icon, {
+      size: sizeMapper[size],
+      customColor: "currentColor",
+      title: "Remove"
+    })
+  });
+};
+export {
+  CloseButton
+};

package/dist/Chip/components/CloseButton/CloseButton.style.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const CloseButton = _styled__default.default.button.withConfig({
+  displayName: "CloseButtonstyle__CloseButton",
+  componentId: "RedisUI__sc-1pnn9du-0"
+})(["", ";flex:none;cursor:pointer;background-color:transparent;display:flex;align-items:center;justify-content:center;padding:0;&:hover{background-color:transparent;}", ";"], ({
+  $size,
+  $variant
+}) => {
+  const style = redisUiStyles.useTheme().components.chip.closeButton;
+  return _styled.css`
+      color: ${style.variant[$variant].color};
+      border-radius: ${style.size[$size].borderRadius};
+    `;
+}, redisUiStyles.getFocusStyle("0px"));
+exports.CloseButton = CloseButton;

package/dist/Chip/components/CloseButton/CloseButton.style.d.ts

@@ -0,0 +1,5 @@
+import { ChipContextType } from '../../Chip.types';
+export declare const CloseButton: import("styled-components").StyledComponent<"button", any, {
+    $size: ChipContextType['size'];
+    $variant: ChipContextType['variant'];
+}, never>;

package/dist/Chip/components/CloseButton/CloseButton.style.js

@@ -0,0 +1,18 @@
+import _styled, { css } from "styled-components";
+import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
+const CloseButton = _styled.button.withConfig({
+  displayName: "CloseButtonstyle__CloseButton",
+  componentId: "RedisUI__sc-1pnn9du-0"
+})(["", ";flex:none;cursor:pointer;background-color:transparent;display:flex;align-items:center;justify-content:center;padding:0;&:hover{background-color:transparent;}", ";"], ({
+  $size,
+  $variant
+}) => {
+  const style = useTheme().components.chip.closeButton;
+  return css`
+      color: ${style.variant[$variant].color};
+      border-radius: ${style.size[$size].borderRadius};
+    `;
+}, getFocusStyle("0px"));
+export {
+  CloseButton
+};

package/dist/Chip/components/CloseButton/CloseButton.types.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { IconType } from '@redislabsdev/redis-ui-icons';
+export type ChipCloseButtonProps = {
+    onClose?: VoidFunction;
+};
+export type RestChipCloseButtonProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & {
+    icon?: IconType;
+};

package/dist/Chip/components/Compose/Compose.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const Chip_context = require("../../Chip.context.cjs");
+const Compose_style = require("./Compose.style.cjs");
+const Tooltip = require("../../../Tooltip/Tooltip.cjs");
+const Compose = ({
+  size = "M",
+  variant = "regular",
+  disabled = false,
+  tooltip,
+  ...restProps
+}) => {
+  const context = React.useMemo(() => ({
+    size,
+    variant,
+    disabled
+  }), [size, variant, disabled]);
+  const chip = jsxRuntime.jsxRuntimeExports.jsx(Compose_style.ChipContainer, {
+    "$size": size,
+    "$variant": variant,
+    "$disabled": disabled,
+    "data-disabled": disabled ? "" : void 0,
+    ...restProps
+  });
+  if (tooltip) {
+    const tooltipProps = typeof tooltip === "string" ? {
+      content: tooltip
+    } : tooltip;
+    return jsxRuntime.jsxRuntimeExports.jsx(Chip_context.ChipContext.Provider, {
+      value: context,
+      children: jsxRuntime.jsxRuntimeExports.jsx(Tooltip.default, {
+        ...tooltipProps,
+        children: chip
+      })
+    });
+  }
+  return jsxRuntime.jsxRuntimeExports.jsx(Chip_context.ChipContext.Provider, {
+    value: context,
+    children: chip
+  });
+};
+exports.Compose = Compose;

package/dist/Chip/components/Compose/Compose.d.ts

@@ -0,0 +1,2 @@
+import { ChipComposeProps, RestChipComposeProps } from './Compose.types';
+export declare const Compose: ({ size, variant, disabled, tooltip, ...restProps }: RestChipComposeProps & ChipComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Chip/components/Compose/Compose.js

@@ -0,0 +1,44 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useMemo } from "react";
+import { ChipContext } from "../../Chip.context.js";
+import { ChipContainer } from "./Compose.style.js";
+import Tooltip from "../../../Tooltip/Tooltip.js";
+const Compose = ({
+  size = "M",
+  variant = "regular",
+  disabled = false,
+  tooltip,
+  ...restProps
+}) => {
+  const context = useMemo(() => ({
+    size,
+    variant,
+    disabled
+  }), [size, variant, disabled]);
+  const chip = jsxRuntimeExports.jsx(ChipContainer, {
+    "$size": size,
+    "$variant": variant,
+    "$disabled": disabled,
+    "data-disabled": disabled ? "" : void 0,
+    ...restProps
+  });
+  if (tooltip) {
+    const tooltipProps = typeof tooltip === "string" ? {
+      content: tooltip
+    } : tooltip;
+    return jsxRuntimeExports.jsx(ChipContext.Provider, {
+      value: context,
+      children: jsxRuntimeExports.jsx(Tooltip, {
+        ...tooltipProps,
+        children: chip
+      })
+    });
+  }
+  return jsxRuntimeExports.jsx(ChipContext.Provider, {
+    value: context,
+    children: chip
+  });
+};
+export {
+  Compose
+};

package/dist/Chip/components/Compose/Compose.style.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const css_utils = require("../../../Helpers/css.utils.cjs");
+const Button_style_utils = require("../../../Button/Button.style.utils.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const ChipContainer = _styled__default.default.span.withConfig({
+  displayName: "Composestyle__ChipContainer",
+  componentId: "RedisUI__sc-1at36a0-0"
+})(["", " ", ";max-width:100%;display:inline-flex;align-items:center;justify-content:space-between;min-width:0;"], ({
+  $variant,
+  $disabled
+}) => {
+  const variantStyle = redisUiStyles.useTheme().components.chip.variant[$variant][$disabled ? "disabled" : "normal"];
+  return css_utils.styleFromTokens([Button_style_utils.bgColorMap, Button_style_utils.textColorMap], variantStyle);
+}, ({
+  $size
+}) => {
+  const style = redisUiStyles.useTheme().components.chip.sizes[$size];
+  return _styled.css`
+      height: ${style.height};
+      padding: ${style.padding};
+      border-radius: ${style.borderRadius};
+      gap: ${style.gap};
+    `;
+});
+exports.ChipContainer = ChipContainer;

package/dist/Chip/components/Compose/Compose.style.d.ts

@@ -0,0 +1,6 @@
+import { ChipVariants, ChipSizes } from '../../Chip.types';
+export declare const ChipContainer: import("styled-components").StyledComponent<"span", any, {
+    $size: ChipSizes;
+    $variant: ChipVariants;
+    $disabled: boolean;
+}, never>;

package/dist/Chip/components/Compose/Compose.style.js

@@ -0,0 +1,27 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { styleFromTokens } from "../../../Helpers/css.utils.js";
+import { bgColorMap, textColorMap } from "../../../Button/Button.style.utils.js";
+const ChipContainer = _styled.span.withConfig({
+  displayName: "Composestyle__ChipContainer",
+  componentId: "RedisUI__sc-1at36a0-0"
+})(["", " ", ";max-width:100%;display:inline-flex;align-items:center;justify-content:space-between;min-width:0;"], ({
+  $variant,
+  $disabled
+}) => {
+  const variantStyle = useTheme().components.chip.variant[$variant][$disabled ? "disabled" : "normal"];
+  return styleFromTokens([bgColorMap, textColorMap], variantStyle);
+}, ({
+  $size
+}) => {
+  const style = useTheme().components.chip.sizes[$size];
+  return css`
+      height: ${style.height};
+      padding: ${style.padding};
+      border-radius: ${style.borderRadius};
+      gap: ${style.gap};
+    `;
+});
+export {
+  ChipContainer
+};

package/dist/Chip/components/Compose/Compose.types.d.ts

@@ -0,0 +1,7 @@
+import { TooltipContentProps } from '../../../Tooltip/components/Content/Content.types';
+import { ComposeElementProps } from '../../../Helpers/common.types';
+import { ChipContextType } from '../../Chip.types';
+export interface ChipComposeProps extends Partial<ChipContextType> {
+    tooltip?: string | Omit<TooltipContentProps, 'children'>;
+}
+export type RestChipComposeProps = ComposeElementProps<HTMLSpanElement>;

package/dist/Chip/components/Title/Title.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Chip_context = require("../../Chip.context.cjs");
+const Typography = require("../../../Typography/Typography.cjs");
+const Title = ({
+  size,
+  ...restProps
+}) => {
+  const context = Chip_context.useChipContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
+    size: size ?? context.size,
+    ellipsis: true,
+    tooltipOnEllipsis: true,
+    ...restProps
+  });
+};
+exports.Title = Title;

package/dist/Chip/components/Title/Title.d.ts

@@ -0,0 +1,2 @@
+import { BodyProps } from '../../../Typography/components/Body/Body.types';
+export declare const Title: ({ size, ...restProps }: BodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Chip/components/Title/Title.js

@@ -0,0 +1,18 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useChipContext } from "../../Chip.context.js";
+import Typography from "../../../Typography/Typography.js";
+const Title = ({
+  size,
+  ...restProps
+}) => {
+  const context = useChipContext();
+  return jsxRuntimeExports.jsx(Typography.Body, {
+    size: size ?? context.size,
+    ellipsis: true,
+    tooltipOnEllipsis: true,
+    ...restProps
+  });
+};
+export {
+  Title
+};

package/dist/Chip/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Chip } from './Chip';
+export type { ChipProps } from './Chip.types';
+export { ChipContainer } from './components/Compose/Compose.style';

package/dist/ChipList/ChipList.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const Chip = require("../Chip/Chip.cjs");
+const ExtraItem = require("./Components/ExtraItem.cjs");
+const ChipList_style = require("./ChipList.style.cjs");
+const ChipList = ({
+  chips,
+  onRemoveItem,
+  maxRows = 1,
+  size = "M",
+  variant,
+  disabled,
+  renderExtraTooltip,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(ChipList_style.ChipListOverflow, {
+  "$size": size,
+  ...restProps,
+  maxRows,
+  minItems: maxRows < 1 ? 0 : 1,
+  renderExtra: (visibleCount) => jsxRuntime.jsxRuntimeExports.jsx(ExtraItem.default, {
+    disabled,
+    size,
+    variant,
+    chips: chips.slice(visibleCount),
+    renderTooltip: renderExtraTooltip
+  }),
+  children: chips.map((item) => jsxRuntime.jsxRuntimeExports.jsx(Chip.default, {
+    text: item.label,
+    onClose: onRemoveItem ? () => onRemoveItem(item.key) : void 0,
+    tooltip: item.tooltip,
+    size,
+    variant,
+    disabled: disabled || item.disabled
+  }, item.key))
+});
+const ChipList$1 = ChipList;
+exports.default = ChipList$1;

package/dist/ChipList/ChipList.d.ts

@@ -0,0 +1,3 @@
+import { ChipListProps } from './ChipList.types';
+declare const ChipList: ({ chips, onRemoveItem, maxRows, size, variant, disabled, renderExtraTooltip, ...restProps }: ChipListProps) => import("react/jsx-runtime").JSX.Element;
+export default ChipList;

package/dist/ChipList/ChipList.js

@@ -0,0 +1,38 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import Chip from "../Chip/Chip.js";
+import ExtraItem from "./Components/ExtraItem.js";
+import { ChipListOverflow } from "./ChipList.style.js";
+const ChipList = ({
+  chips,
+  onRemoveItem,
+  maxRows = 1,
+  size = "M",
+  variant,
+  disabled,
+  renderExtraTooltip,
+  ...restProps
+}) => jsxRuntimeExports.jsx(ChipListOverflow, {
+  "$size": size,
+  ...restProps,
+  maxRows,
+  minItems: maxRows < 1 ? 0 : 1,
+  renderExtra: (visibleCount) => jsxRuntimeExports.jsx(ExtraItem, {
+    disabled,
+    size,
+    variant,
+    chips: chips.slice(visibleCount),
+    renderTooltip: renderExtraTooltip
+  }),
+  children: chips.map((item) => jsxRuntimeExports.jsx(Chip, {
+    text: item.label,
+    onClose: onRemoveItem ? () => onRemoveItem(item.key) : void 0,
+    tooltip: item.tooltip,
+    size,
+    variant,
+    disabled: disabled || item.disabled
+  }, item.key))
+});
+const ChipList$1 = ChipList;
+export {
+  ChipList$1 as default
+};

package/dist/ChipList/ChipList.style.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Overflow = require("../Overflow/Overflow.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const ChipListOverflow = _styled__default.default(Overflow.Overflow).withConfig({
+  displayName: "ChipListstyle__ChipListOverflow",
+  componentId: "RedisUI__sc-6bkxn2-0"
+})(["gap:", ";align-items:center;"], ({
+  $size
+}) => redisUiStyles.useTheme().components.chipList.sizes[$size].gap);
+exports.ChipListOverflow = ChipListOverflow;

package/dist/ChipList/ChipList.style.d.ts

@@ -0,0 +1,4 @@
+import { ChipSizes } from '../Chip/Chip.types';
+export declare const ChipListOverflow: import("styled-components").StyledComponent<({ children, renderExtra, maxRows, minItems, expectedGap, estimatedItemsPerRow, ...restProps }: import("../Overflow").OverflowProps) => import("react/jsx-runtime").JSX.Element, any, {
+    $size: ChipSizes;
+}, never>;

package/dist/ChipList/ChipList.style.js

@@ -0,0 +1,12 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { Overflow } from "../Overflow/Overflow.js";
+const ChipListOverflow = _styled(Overflow).withConfig({
+  displayName: "ChipListstyle__ChipListOverflow",
+  componentId: "RedisUI__sc-6bkxn2-0"
+})(["gap:", ";align-items:center;"], ({
+  $size
+}) => useTheme().components.chipList.sizes[$size].gap);
+export {
+  ChipListOverflow
+};