@redis-ui/components 37.0.0

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.js

@@ -0,0 +1,18 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { CollapseIcon } from "./CollapseIndicator.style.js";
+import { useSectionContext } from "../../../../Section.context.js";
+const CollapseIndicator = (props) => {
+  const {
+    collapsible
+  } = useSectionContext();
+  if (collapsible) {
+    return jsxRuntimeExports.jsx(CollapseIcon, {
+      size: "M",
+      ...props
+    });
+  }
+  return null;
+};
+export {
+  CollapseIndicator
+};

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const CollapseIcon = _styled__default.default(redisUiIcons.ChevronDownIcon).withConfig({
+  displayName: "CollapseIndicatorstyle__CollapseIcon",
+  componentId: "RedisUI__sc-i5i8uh-0"
+})(["transition:transform 0.1s;"]);
+exports.CollapseIcon = CollapseIcon;

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.style.d.ts

@@ -0,0 +1 @@
+export declare const CollapseIcon: import("styled-components").StyledComponent<({ size, customSize, color, customColor, title: titleProp, ...rest }: import("@redislabsdev/redis-ui-icons").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { ChevronDownIcon } from "@redislabsdev/redis-ui-icons";
+const CollapseIcon = _styled(ChevronDownIcon).withConfig({
+  displayName: "CollapseIndicatorstyle__CollapseIcon",
+  componentId: "RedisUI__sc-i5i8uh-0"
+})(["transition:transform 0.1s;"]);
+export {
+  CollapseIcon
+};

package/dist/Section/components/Header/components/CollapseIndicator/CollapseIndicator.types.d.ts

@@ -0,0 +1,2 @@
+import { MonochromeIconProps } from '@redislabsdev/redis-ui-icons/monochrome';
+export type SectionCollapseIndicatorProps = MonochromeIconProps;

package/dist/Section/components/Header/components/Compose/Compose.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Compose_style = require("./Compose.style.cjs");
+const Section_context = require("../../../../Section.context.cjs");
+const Compose = ({
+  children,
+  collapsedInfo,
+  ...props
+}) => {
+  const {
+    collapsible
+  } = Section_context.useSectionContext();
+  return jsxRuntime.jsxRuntimeExports.jsxs(Compose_style.SectionHeader, {
+    "$collapsible": collapsible,
+    ...props,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SectionHeaderContent, {
+      children
+    }), collapsedInfo && jsxRuntime.jsxRuntimeExports.jsx(Compose_style.CollapsedInfoBar, {
+      "$collapsible": collapsible,
+      children: collapsedInfo
+    })]
+  });
+};
+exports.Compose = Compose;

package/dist/Section/components/Header/components/Compose/Compose.d.ts

@@ -0,0 +1,2 @@
+import { SectionHeaderComposeProps } from './Compose.types';
+export declare const Compose: ({ children, collapsedInfo, ...props }: SectionHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Section/components/Header/components/Compose/Compose.js

@@ -0,0 +1,25 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { SectionHeader, SectionHeaderContent, CollapsedInfoBar } from "./Compose.style.js";
+import { useSectionContext } from "../../../../Section.context.js";
+const Compose = ({
+  children,
+  collapsedInfo,
+  ...props
+}) => {
+  const {
+    collapsible
+  } = useSectionContext();
+  return jsxRuntimeExports.jsxs(SectionHeader, {
+    "$collapsible": collapsible,
+    ...props,
+    children: [jsxRuntimeExports.jsx(SectionHeaderContent, {
+      children
+    }), collapsedInfo && jsxRuntimeExports.jsx(CollapsedInfoBar, {
+      "$collapsible": collapsible,
+      children: collapsedInfo
+    })]
+  });
+};
+export {
+  Compose
+};

package/dist/Section/components/Header/components/Compose/Compose.style.cjs

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const index = require("../../../../../node_modules/@radix-ui/react-collapsible/dist/index.cjs");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const CollapseIndicator_style = require("../CollapseIndicator/CollapseIndicator.style.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const SectionHeader = _styled__default.default(index.Trigger).withConfig({
+  displayName: "Composestyle__SectionHeader",
+  componentId: "RedisUI__sc-kgg5ny-0"
+})(["display:block;padding:0;&[type='button']{cursor:", ";}border:none;border-radius:unset;background-color:transparent;font-family:inherit;font-size:unset;transition:unset;outline:unset;&:hover{background-color:transparent;}position:relative;", ";&[data-state='open']{box-shadow:0 ", " 0 0 ", ";", "{transform:rotate(180deg);}}"], ({
+  $collapsible
+}) => $collapsible ? "pointer" : "default", ({
+  $collapsible
+}) => (
+  // cannot do it on button itself because of border-radius conflicts with bottom shadow border
+  $collapsible ? _styled.css`
+          &:focus-visible {
+            &:before {
+              content: '';
+              pointer-events: none;
+              position: absolute;
+              inset: 0;
+              border-radius: ${() => redisUiStyles.useTheme().components.section.borderRadius};
+              ${redisUiStyles.getFocusStyleProperties(`-${redisUiStyles.useTheme().core.focus.size}`)};
+            }
+          }
+        ` : void 0
+), () => redisUiStyles.useTheme().components.section.separator.width, () => redisUiStyles.useTheme().components.section.separator.color, CollapseIndicator_style.CollapseIcon);
+const SectionHeaderContent = _styled__default.default.div.withConfig({
+  displayName: "Composestyle__SectionHeaderContent",
+  componentId: "RedisUI__sc-kgg5ny-1"
+})(["min-height:", ";padding:", ";background-color:", ";display:flex;align-items:center;justify-content:space-between;"], () => redisUiStyles.useTheme().components.section.header.minHeight, () => redisUiStyles.useTheme().components.section.header.padding, () => redisUiStyles.useTheme().components.section.header.backgroundColor);
+const CollapsedInfoBar = _styled__default.default.div.withConfig({
+  displayName: "Composestyle__CollapsedInfoBar",
+  componentId: "RedisUI__sc-kgg5ny-2"
+})(["background-color:", ";min-height:", ";padding:", ";box-shadow:inset 0 ", " 0 0 ", ";[data-state='open'] &{display:none;}"], ({
+  $collapsible
+}) => $collapsible ? redisUiStyles.useTheme().components.section.header.collapsedInfo.collapsableBackgroundColor : redisUiStyles.useTheme().components.section.header.collapsedInfo.backgroundColor, () => redisUiStyles.useTheme().components.section.header.collapsedInfo.minHeight, () => redisUiStyles.useTheme().components.section.header.collapsedInfo.padding, () => redisUiStyles.useTheme().components.section.separator.width, () => redisUiStyles.useTheme().components.section.separator.color);
+exports.CollapsedInfoBar = CollapsedInfoBar;
+exports.SectionHeader = SectionHeader;
+exports.SectionHeaderContent = SectionHeaderContent;

package/dist/Section/components/Header/components/Compose/Compose.style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import * as Collapsible from '@radix-ui/react-collapsible';
+export declare const SectionHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Collapsible.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, any, {
+    $collapsible?: boolean | undefined;
+}, never>;
+export declare const SectionHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollapsedInfoBar: import("styled-components").StyledComponent<"div", any, {
+    $collapsible?: boolean | undefined;
+}, never>;

package/dist/Section/components/Header/components/Compose/Compose.style.js

@@ -0,0 +1,41 @@
+import _styled, { css } from "styled-components";
+import { Trigger } from "../../../../../node_modules/@radix-ui/react-collapsible/dist/index.js";
+import { useTheme, getFocusStyleProperties } from "@redislabsdev/redis-ui-styles";
+import { CollapseIcon } from "../CollapseIndicator/CollapseIndicator.style.js";
+const SectionHeader = _styled(Trigger).withConfig({
+  displayName: "Composestyle__SectionHeader",
+  componentId: "RedisUI__sc-kgg5ny-0"
+})(["display:block;padding:0;&[type='button']{cursor:", ";}border:none;border-radius:unset;background-color:transparent;font-family:inherit;font-size:unset;transition:unset;outline:unset;&:hover{background-color:transparent;}position:relative;", ";&[data-state='open']{box-shadow:0 ", " 0 0 ", ";", "{transform:rotate(180deg);}}"], ({
+  $collapsible
+}) => $collapsible ? "pointer" : "default", ({
+  $collapsible
+}) => (
+  // cannot do it on button itself because of border-radius conflicts with bottom shadow border
+  $collapsible ? css`
+          &:focus-visible {
+            &:before {
+              content: '';
+              pointer-events: none;
+              position: absolute;
+              inset: 0;
+              border-radius: ${() => useTheme().components.section.borderRadius};
+              ${getFocusStyleProperties(`-${useTheme().core.focus.size}`)};
+            }
+          }
+        ` : void 0
+), () => useTheme().components.section.separator.width, () => useTheme().components.section.separator.color, CollapseIcon);
+const SectionHeaderContent = _styled.div.withConfig({
+  displayName: "Composestyle__SectionHeaderContent",
+  componentId: "RedisUI__sc-kgg5ny-1"
+})(["min-height:", ";padding:", ";background-color:", ";display:flex;align-items:center;justify-content:space-between;"], () => useTheme().components.section.header.minHeight, () => useTheme().components.section.header.padding, () => useTheme().components.section.header.backgroundColor);
+const CollapsedInfoBar = _styled.div.withConfig({
+  displayName: "Composestyle__CollapsedInfoBar",
+  componentId: "RedisUI__sc-kgg5ny-2"
+})(["background-color:", ";min-height:", ";padding:", ";box-shadow:inset 0 ", " 0 0 ", ";[data-state='open'] &{display:none;}"], ({
+  $collapsible
+}) => $collapsible ? useTheme().components.section.header.collapsedInfo.collapsableBackgroundColor : useTheme().components.section.header.collapsedInfo.backgroundColor, () => useTheme().components.section.header.collapsedInfo.minHeight, () => useTheme().components.section.header.collapsedInfo.padding, () => useTheme().components.section.separator.width, () => useTheme().components.section.separator.color);
+export {
+  CollapsedInfoBar,
+  SectionHeader,
+  SectionHeaderContent
+};

package/dist/Section/components/Header/components/Compose/Compose.types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { ComposeElementProps } from '../../../../../Helpers/common.types';
+export interface SectionHeaderComposeProps extends ComposeElementProps<HTMLButtonElement> {
+    collapsedInfo?: ReactNode;
+}

package/dist/Section/components/Header/components/Group/Group.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Group_style = require("./Group.style.cjs");
+const Group = (props) => jsxRuntime.jsxRuntimeExports.jsx(Group_style.GroupContainer, {
+  ...props
+});
+exports.Group = Group;

package/dist/Section/components/Header/components/Group/Group.d.ts

@@ -0,0 +1,2 @@
+import { SectionHeaderGroupProps } from './Group.types';
+export declare const Group: (props: SectionHeaderGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Section/components/Header/components/Group/Group.js

@@ -0,0 +1,8 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { GroupContainer } from "./Group.style.js";
+const Group = (props) => jsxRuntimeExports.jsx(GroupContainer, {
+  ...props
+});
+export {
+  Group
+};

package/dist/Section/components/Header/components/Group/Group.style.cjs

@@ -0,0 +1,11 @@
+"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 GroupContainer = _styled__default.default.div.withConfig({
+  displayName: "Groupstyle__GroupContainer",
+  componentId: "RedisUI__sc-12ie17l-0"
+})(["display:flex;align-items:center;gap:", ";"], () => redisUiStyles.useTheme().components.section.header.group.gap);
+exports.GroupContainer = GroupContainer;

package/dist/Section/components/Header/components/Group/Group.style.d.ts

@@ -0,0 +1 @@
+export declare const GroupContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Section/components/Header/components/Group/Group.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const GroupContainer = _styled.div.withConfig({
+  displayName: "Groupstyle__GroupContainer",
+  componentId: "RedisUI__sc-12ie17l-0"
+})(["display:flex;align-items:center;gap:", ";"], () => useTheme().components.section.header.group.gap);
+export {
+  GroupContainer
+};

package/dist/Section/components/Header/components/Group/Group.types.d.ts

@@ -0,0 +1,2 @@
+import { ComposeElementProps } from '../../../../../Helpers/common.types';
+export type SectionHeaderGroupProps = ComposeElementProps;

package/dist/Section/components/Header/components/Label/Label.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Label_style = require("./Label.style.cjs");
+const Label = ({
+  label,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Label_style.LabelText, {
+  size: "S",
+  ellipsis: true,
+  tooltipOnEllipsis: true,
+  ...restProps,
+  children: label
+});
+exports.Label = Label;

package/dist/Section/components/Header/components/Label/Label.d.ts

@@ -0,0 +1,2 @@
+import { SectionHeaderLabelProps } from './Label.types';
+export declare const Label: ({ label, ...restProps }: SectionHeaderLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Section/components/Header/components/Label/Label.js

@@ -0,0 +1,15 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { LabelText } from "./Label.style.js";
+const Label = ({
+  label,
+  ...restProps
+}) => jsxRuntimeExports.jsx(LabelText, {
+  size: "S",
+  ellipsis: true,
+  tooltipOnEllipsis: true,
+  ...restProps,
+  children: label
+});
+export {
+  Label
+};

package/dist/Section/components/Header/components/Label/Label.style.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Typography = require("../../../../../Typography/Typography.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const LabelText = _styled__default.default(Typography.default.Heading).withConfig({
+  displayName: "Labelstyle__LabelText",
+  componentId: "RedisUI__sc-14ws5ga-0"
+})(["color:", ";"], () => redisUiStyles.useTheme().components.section.header.label.textColor);
+exports.LabelText = LabelText;

package/dist/Section/components/Header/components/Label/Label.style.d.ts

@@ -0,0 +1 @@
+export declare const LabelText: import("styled-components").StyledComponent<({ size, color, ellipsis, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Section/components/Header/components/Label/Label.style.js

@@ -0,0 +1,10 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import Typography from "../../../../../Typography/Typography.js";
+const LabelText = _styled(Typography.Heading).withConfig({
+  displayName: "Labelstyle__LabelText",
+  componentId: "RedisUI__sc-14ws5ga-0"
+})(["color:", ";"], () => useTheme().components.section.header.label.textColor);
+export {
+  LabelText
+};

package/dist/Section/components/Header/components/Label/Label.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export interface SectionHeaderLabelProps extends Omit<HTMLAttributes<HTMLHeadingElement>, 'children' | 'color'> {
+    label: string;
+}

package/dist/Section/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Section } from './Section';
+export { CategoryValueList } from './components/Header/components/CategoryValueList';
+export type { CategoryValueListProps } from './components/Header/components/CategoryValueList/CategoryValueList.types';
+export type { SectionProps } from './Section.types';

package/dist/Select/Select.cjs

@@ -0,0 +1,61 @@
+"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 Trigger = require("./components/Trigger/Trigger.cjs");
+const Content = require("./components/Content/Content.cjs");
+const Option = require("./components/Content/components/Option/Option.cjs");
+const Select = Object.assign(({
+  options,
+  disabled,
+  defaultOpen,
+  open,
+  onOpenChange,
+  defaultValue,
+  value,
+  onChange,
+  customCompare,
+  error,
+  valid,
+  valueRender,
+  searchable,
+  placement,
+  maxVisibleItems,
+  placeholder = "Select...",
+  virtualized,
+  contentWidth,
+  ...restProps
+}) => {
+  return jsxRuntime.jsxRuntimeExports.jsxs(Select.Compose, {
+    options,
+    disabled,
+    defaultOpen,
+    open,
+    onOpenChange,
+    defaultValue,
+    value,
+    onChange,
+    customCompare,
+    error,
+    valid,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Select.Trigger, {
+      placeholder,
+      valueRender,
+      ...restProps
+    }), jsxRuntime.jsxRuntimeExports.jsx(Select.Content, {
+      searchable,
+      optionValueRender: valueRender,
+      placement,
+      maxVisibleItems,
+      virtualized,
+      contentWidth
+    })]
+  });
+}, {
+  Compose: Compose.default,
+  Trigger: Trigger.default,
+  Content: Content.default,
+  Option: Option.default
+});
+const Select$1 = Select;
+exports.default = Select$1;

package/dist/Select/Select.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { SelectOption, SelectProps } from './Select.types';
+import { RestSelectTriggerComposeProps } from './components/Trigger/components/Compose/Compose.types';
+declare const Select: (<TValue extends string = string, TOption extends SelectOption<TValue> = SelectOption<TValue>>({ options, disabled, defaultOpen, open, onOpenChange, defaultValue, value, onChange, customCompare, error, valid, valueRender, searchable, placement, maxVisibleItems, placeholder, virtualized, contentWidth, ...restProps }: import("./components/Compose/Compose.types").SelectComposeProps<TValue, TOption> & Omit<import("./components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps, "customContainer"> & import("./components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption> & {
+    allowReset?: boolean | undefined;
+    loading?: boolean | undefined;
+} & Omit<import("./components/Content/Content.types").SelectContentProps<TOption>, "optionComponent" | "optionValueRender"> & RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: <TValue_1 extends string = string, TOption_1 extends SelectOption<TValue_1> = SelectOption<TValue_1>>({ options, children, onOpenChange, defaultValue, value, onChange, customCompare, error, valid, disabled, ...restProps }: import("./components/Compose/Compose.types").SelectComposeProps<TValue_1, TOption_1> & import("../Helpers/common.types").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: (<TOption_2 extends SelectOption<string> = SelectOption<string>>({ placeholder, valueRender, allowReset, loading, ...props }: Omit<import("./components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps, "customContainer"> & import("./components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption_2> & {
+        allowReset?: boolean | undefined;
+        loading?: boolean | undefined;
+    } & RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ({ customContainer, id, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps & RestSelectTriggerComposeProps & import("../Helpers/common.types").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
+        Value: <TOption_3 extends SelectOption<string> = SelectOption<string>>({ placeholder, valueRender, ...restProps }: import("./components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption_3> & import("./components/Trigger/components/Value/Value.types").RestSelectTriggerValueProps) => import("react/jsx-runtime").JSX.Element;
+        ResetButton: ({ children, title, ...restProps }: import("react").HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element | null;
+        StatusIndicator: (props: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element;
+        LoadingIndicator: ({ loading, ...restProps }: import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+        Arrow: ({ icon, ...restProps }: import("./components/Trigger/components/Arrow/Arrow.types").TriggerArrowProps) => import("react/jsx-runtime").JSX.Element;
+        ErrorIcon: (props: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element;
+    };
+    Content: (<TOption_4 extends SelectOption<string> = SelectOption<string>>({ searchable, optionValueRender, optionComponent, maxVisibleItems, virtualized, ...restProps }: import("./components/Content/components/Compose/Compose.types").SelectContentComposeProps & import("./components/Content/components/OptionList/OptionList.types").OptionListProps<TOption_4> & {
+        searchable?: boolean | undefined;
+    } & import("./components/Content/components/Compose/Compose.types").RestSelectContentComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ({ children, placement, contentWidth, ...restProps }: import("./components/Content/components/Compose/Compose.types").SelectContentComposeProps & import("./components/Content/components/Compose/Compose.types").RestSelectContentComposeProps & import("../Helpers/common.types").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
+        OptionList: <TOption_5 extends SelectOption<string> = SelectOption<string>>({ optionValueRender, optionComponent: OptionComponent, maxVisibleItems, virtualized, ...restProps }: import("./components/Content/components/OptionList/OptionList.types").OptionListProps<TOption_5> & import("./components/Content/components/OptionList/OptionList.types").RestOptionListProps) => import("react/jsx-runtime").JSX.Element;
+        Search: import("react").ForwardRefExoticComponent<Omit<import("../Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "readOnly" | "parser" | "formatter"> & import("../Inputs/components/InputTag/InputTag.types").InputTagProps & import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("..").RestInputProps & import("react").RefAttributes<HTMLInputElement>>;
+        Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
+    };
+    Option: (<TOption_6 extends SelectOption<string> = SelectOption<string>>({ option, content, ...restProps }: import("./components/Content/components/Option/components/Compose/Compose.types").SelectOptionComposeProps<TOption_6> & {
+        content?: import("react").ReactNode;
+    } & import("./components/Content/components/Option/components/Compose/Compose.types").RestSelectOptionComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: import("react").ForwardRefExoticComponent<import("./components/Content/components/Option/components/Compose/Compose.types").SelectOptionComposeProps<SelectOption<string>> & import("./components/Content/components/Option/components/Compose/Compose.types").RestSelectOptionComposeProps & import("../Helpers/common.types").ComposeChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
+        Content: (props: import("../Helpers/common.types").ComposeChildrenProps & import("./components/Content/components/Option/components/Content/Content.types").RestSelectOptionContentProps) => import("react/jsx-runtime").JSX.Element;
+        Indicator: ({ children, ...restProps }: import("@radix-ui/react-select").SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default Select;

package/dist/Select/Select.js

@@ -0,0 +1,61 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import Compose from "./components/Compose/Compose.js";
+import Trigger from "./components/Trigger/Trigger.js";
+import Content from "./components/Content/Content.js";
+import Option from "./components/Content/components/Option/Option.js";
+const Select = Object.assign(({
+  options,
+  disabled,
+  defaultOpen,
+  open,
+  onOpenChange,
+  defaultValue,
+  value,
+  onChange,
+  customCompare,
+  error,
+  valid,
+  valueRender,
+  searchable,
+  placement,
+  maxVisibleItems,
+  placeholder = "Select...",
+  virtualized,
+  contentWidth,
+  ...restProps
+}) => {
+  return jsxRuntimeExports.jsxs(Select.Compose, {
+    options,
+    disabled,
+    defaultOpen,
+    open,
+    onOpenChange,
+    defaultValue,
+    value,
+    onChange,
+    customCompare,
+    error,
+    valid,
+    children: [jsxRuntimeExports.jsx(Select.Trigger, {
+      placeholder,
+      valueRender,
+      ...restProps
+    }), jsxRuntimeExports.jsx(Select.Content, {
+      searchable,
+      optionValueRender: valueRender,
+      placement,
+      maxVisibleItems,
+      virtualized,
+      contentWidth
+    })]
+  });
+}, {
+  Compose,
+  Trigger,
+  Content,
+  Option
+});
+const Select$1 = Select;
+export {
+  Select$1 as default
+};

package/dist/Select/Select.types.d.ts

@@ -0,0 +1,33 @@
+import { ComponentType } from 'react';
+import { IconType } from '@redislabsdev/redis-ui-icons';
+import type { SelectComposeProps } from './components/Compose/Compose.types';
+import type { SelectTriggerProps } from './components/Trigger/Trigger.types';
+import type { SelectContentProps } from './components/Content/Content.types';
+export type SelectValueRenderParams<TOption extends SelectOption = SelectOption> = {
+    option: TOption;
+    isOptionValue?: boolean;
+    isSelected?: boolean;
+};
+export type SelectValueRender<TOption extends SelectOption = SelectOption> = (params: SelectValueRenderParams<TOption>) => string | JSX.Element;
+export type SelectOption<TValue extends string = string> = Record<string, unknown> & {
+    value: TValue;
+    label?: string;
+    icon?: IconType | ComponentType;
+    disabled?: boolean;
+    hidden?: boolean;
+};
+export type SelectProps<TValue extends string = string, TOption extends SelectOption<TValue> = SelectOption<TValue>> = SelectComposeProps<TValue, TOption> & SelectTriggerProps<TOption> & Omit<SelectContentProps<TOption>, 'optionComponent' | 'optionValueRender'>;
+export type SelectCompareHandler<TOption extends SelectOption> = (option: TOption, searchValue: string) => boolean;
+export type SelectContextType<TOption extends SelectOption = SelectOption> = Record<string, unknown> & {
+    searchValue: string;
+    setSearchValue: (text: string) => void;
+    getValidOptions: () => TOption[];
+    isOptionSelected: (option: TOption) => boolean;
+    options: TOption[];
+    hasSelection: boolean;
+    hasSearch: boolean;
+    canUnselect: boolean;
+    resetSelection: VoidFunction;
+    toggleOption: (value: TOption['value']) => void;
+    isSingleSelect: boolean;
+};

package/dist/Select/components/Compose/Compose.cjs

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../../node_modules/@radix-ui/react-select/dist/index.cjs");
+const Context = require("../Context/Context.cjs");
+const useSelectContextApi = require("../Context/hooks/useSelectContextApi.cjs");
+const Field_context = require("../../../Inputs/components/Context/Field.context.cjs");
+const Compose = ({
+  options,
+  children,
+  onOpenChange,
+  defaultValue,
+  value,
+  onChange,
+  customCompare,
+  error,
+  valid,
+  disabled,
+  ...restProps
+}) => {
+  const {
+    currentValue,
+    context
+  } = useSelectContextApi.useSelectContextApi({
+    value,
+    defaultValue,
+    onChange,
+    customCompare,
+    options
+  });
+  return jsxRuntime.jsxRuntimeExports.jsx(Context.SelectContextProvider, {
+    value: context,
+    error,
+    valid,
+    children: jsxRuntime.jsxRuntimeExports.jsx(index.Root, {
+      value: currentValue,
+      onValueChange: (val) => val && context.toggleOption(val),
+      onOpenChange: (isOpen) => {
+        onOpenChange == null ? void 0 : onOpenChange(isOpen);
+        context.setSearchValue("");
+      },
+      ...restProps,
+      disabled: Field_context.useFieldDisabled(disabled),
+      children
+    })
+  });
+};
+exports.default = Compose;

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

@@ -0,0 +1,5 @@
+import { SelectComposeProps } from './Compose.types';
+import { SelectOption } from '../../Select.types';
+import { ComposeChildrenProps } from '../../../Helpers/common.types';
+declare const Compose: <TValue extends string = string, TOption extends SelectOption<TValue> = SelectOption<TValue>>({ options, children, onOpenChange, defaultValue, value, onChange, customCompare, error, valid, disabled, ...restProps }: SelectComposeProps<TValue, TOption> & ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
+export default Compose;