@ftdata/ui 0.0.9 → 0.0.10

package/dist/components/{CustomSelect/CustomSelectList → Select/List/Row}/style.js

@@ -1,53 +1,5 @@
 import styled_components from "styled-components";
 import { COLOR_ACCENT_DARK, COLOR_ACCENT_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER, FONT_FAMILY_01, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
-const SelectDropdown = styled_components.div`
-  background-color: ${COLOR_NEUTRAL_DAY};
-  border-radius: 0.25rem;
-  box-shadow: 0px 2px 4px rgba(107, 117, 124, 0.32);
-  color: ${COLOR_NEUTRAL_DUSK};
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  width: 100%;
-  height: auto;
-  z-index: 3;
-
-  .action {
-    span {
-      font-weight: 600;
-      color: ${COLOR_ACCENT_MEDIUM};
-    }
-
-    &:hover {
-      span {
-        color: ${COLOR_ACCENT_MEDIUM};
-      }
-    }
-  }
-
-  & > div {
-    border-radius: 0.25rem;
-  }
-
-  & > div > div {
-    border-radius: 0.25rem;
-  }
-
-  *::-webkit-scrollbar-track {
-    background-color: #f4f4f4;
-    border-radius: 0 0.25rem 0.25rem 0;
-  }
-
-  *::-webkit-scrollbar {
-    width: 10px;
-    background: #f4f4f4;
-    border-radius: 0 0.25rem 0.25rem 0;
-  }
-
-  *::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: #d5d8da;
-  }
-`;
 const OptionContainer = styled_components.div`
   background-color: ${({ isSelected })=>isSelected ? COLOR_NEUTRAL_LIGHTER : COLOR_NEUTRAL_DAY};
   box-sizing: border-box;
@@ -77,11 +29,6 @@ const OptionContainer = styled_components.div`
     position: relative;
   }
 `;
-const LoadingContainer = styled_components.div`
-  background-color: ${COLOR_NEUTRAL_DAY};
-  height: 10rem;
-  width: 100%;
-`;
 const CustomAction = styled_components(OptionContainer)`
   color: ${COLOR_ACCENT_MEDIUM};
   font-weight: 500;
@@ -92,4 +39,4 @@ const CustomAction = styled_components(OptionContainer)`
     color: ${COLOR_ACCENT_DARK};
   }
 `;
-export { CustomAction, LoadingContainer, OptionContainer, SelectDropdown };
+export { CustomAction, OptionContainer };

package/dist/components/Select/List/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ISelectOption } from "..";
+interface SelectListProps {
+    onClickOption?: (event: React.MouseEvent<HTMLDivElement>, option: ISelectOption) => void;
+    options: ISelectOption[];
+    selectedOption?: ISelectOption | null;
+    isLoading?: boolean;
+    handleCustomAction: (action: () => void) => void;
+    onLoadMore?: () => Promise<void>;
+}
+declare const SelectList: React.FC<SelectListProps>;
+export default SelectList;

package/dist/components/Select/List/index.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { List } from "react-window";
+import { LoadingContainer, SelectDropdown } from "./style.js";
+import Loading from "../../Loading/index.js";
+import { TooltipWrapper } from "../../TooltipWrapper/index.js";
+import Row from "./Row/index.js";
+const SelectList = ({ options, onClickOption, selectedOption, isLoading, onLoadMore, handleCustomAction })=>{
+    const [lastIndex, setLastIndex] = useState(0);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const OPTION_SIZE = 36;
+    const optionLength = options.length;
+    const height = OPTION_SIZE * (0 === optionLength ? 1 : optionLength >= 7 ? 7 : optionLength);
+    const onItemsRendered = useCallback(async ({ stopIndex })=>{
+        const isAtEnd = stopIndex >= options.length - 1;
+        console.log(lastIndex, stopIndex, isAtEnd);
+        if (loadingMore) return;
+        try {
+            setLoadingMore(true);
+            if (lastIndex !== stopIndex && isAtEnd) {
+                if (onLoadMore) await onLoadMore();
+                setLastIndex(stopIndex);
+            }
+        } finally{
+            setLoadingMore(false);
+        }
+    }, [
+        options.length,
+        onLoadMore,
+        lastIndex
+    ]);
+    return /*#__PURE__*/ jsx(SelectDropdown, {
+        children: isLoading ? /*#__PURE__*/ jsx(LoadingContainer, {
+            children: /*#__PURE__*/ jsx(Loading, {
+                size: "lg",
+                variant: "light"
+            })
+        }) : /*#__PURE__*/ jsx(TooltipWrapper, {
+            spacing: 18,
+            children: ({ showTooltip, hideTooltip })=>/*#__PURE__*/ jsx(List, {
+                    rowComponent: Row,
+                    rowCount: options.length,
+                    rowHeight: OPTION_SIZE,
+                    rowProps: {
+                        data: options,
+                        onClickOption,
+                        selectedOption,
+                        showTooltip,
+                        hideTooltip,
+                        handleCustomAction
+                    },
+                    style: {
+                        height: `${height / 16}rem`,
+                        width: "100%"
+                    },
+                    onRowsRendered: onItemsRendered,
+                    overscanCount: 0
+                })
+        })
+    });
+};
+const Select_List = SelectList;
+export { Select_List as default };

package/dist/components/Select/List/style.d.ts

@@ -0,0 +1,2 @@
+export declare const SelectDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Select/List/style.js

@@ -0,0 +1,56 @@
+import styled_components from "styled-components";
+import { COLOR_ACCENT_MEDIUM, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK } from "@ftdata/f-tokens";
+const SelectDropdown = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DAY};
+  border-radius: 0.25rem;
+  box-shadow: 0px 2px 4px rgba(107, 117, 124, 0.32);
+  color: ${COLOR_NEUTRAL_DUSK};
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  width: 100%;
+  height: auto;
+  z-index: 3;
+
+  .action {
+    span {
+      font-weight: 600;
+      color: ${COLOR_ACCENT_MEDIUM};
+    }
+
+    &:hover {
+      span {
+        color: ${COLOR_ACCENT_MEDIUM};
+      }
+    }
+  }
+
+  & > div {
+    border-radius: 0.25rem;
+  }
+
+  & > div > div {
+    border-radius: 0.25rem;
+  }
+
+  *::-webkit-scrollbar-track {
+    background-color: #f4f4f4;
+    border-radius: 0 0.25rem 0.25rem 0;
+  }
+
+  *::-webkit-scrollbar {
+    width: 10px;
+    background: #f4f4f4;
+    border-radius: 0 0.25rem 0.25rem 0;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #d5d8da;
+  }
+`;
+const LoadingContainer = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DAY};
+  height: 10rem;
+  width: 100%;
+`;
+export { LoadingContainer, SelectDropdown };

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

@@ -0,0 +1,34 @@
+import React, { InputHTMLAttributes, JSX } from "react";
+export interface ISelectOption {
+    label: string;
+    value: string;
+    chip?: JSX.Element;
+    action?: () => void;
+}
+export interface IAction {
+    label: string;
+    action: () => void;
+}
+type InputPropsWithoutOnToggle = Omit<InputHTMLAttributes<HTMLInputElement>, "onToggle">;
+export interface SelectProps extends InputPropsWithoutOnToggle {
+    t: (key: string) => string;
+    helpText?: string;
+    isError?: boolean;
+    isSuccess?: boolean;
+    label?: string;
+    isRequired?: boolean;
+    name?: string;
+    options: ISelectOption[] | [];
+    placeholder?: string;
+    search?: (query: string) => void;
+    isLoading?: boolean;
+    icon?: JSX.Element;
+    variation?: "default" | "searchable";
+    selected: ISelectOption | null;
+    setSelected: React.Dispatch<React.SetStateAction<ISelectOption | null>>;
+    onLoadMore?: () => Promise<void>;
+    onToggle?: (open: boolean) => void;
+}
+export default function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation, selected, setSelected, onLoadMore, onToggle, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare const normalizeOptions: (options: ISelectOption[]) => ISelectOption[];
+export {};

package/dist/components/{CustomSelect → Select}/index.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { CavetButton, HelpText, IconContainer, InputWrapper, SelectContainer, StyledInput, StyledLabel } from "./styles.js";
 import { Icon } from "@ftdata/f-icons";
-import CustomSelectList from "./CustomSelectList/index.js";
-function CustomSelect({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation = "default", selected, setSelected, ...rest }) {
+import List from "./List/index.js";
+function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation = "default", selected, setSelected, onLoadMore, onToggle, ...rest }) {
     const [showList, setShowList] = useState(false);
     const [currentValue, setCurrentValue] = useState("");
     const [filtered, setFiltered] = useState([]);
@@ -69,14 +69,14 @@ function CustomSelect({ helpText, isError, isSuccess, label, name, isRequired, o
         ]);
     };
     const handleChange = (event)=>{
-        setShowList(true);
-        if (selected) setSelected(null);
         const query = event.target.value;
+        setCurrentValue(query);
+        setShowList(true);
         if ("searchable" === variation) {
             if (search) search(query);
-            filter(query);
+            if (!search && !onLoadMore) filter(query);
         }
-        setCurrentValue(query);
+        if (selected && "" === query.trim()) setSelected(null);
     };
     const addSelectedByEnter = (option)=>{
         setFiltered([]);
@@ -96,6 +96,7 @@ function CustomSelect({ helpText, isError, isSuccess, label, name, isRequired, o
         selected
     ]);
     useEffect(()=>{
+        if (onToggle) onToggle(showList);
         if (showList) document.addEventListener("click", handleClickOutside, true);
         return ()=>{
             document.removeEventListener("click", handleClickOutside, true);
@@ -158,14 +159,15 @@ function CustomSelect({ helpText, isError, isSuccess, label, name, isRequired, o
                             size: "1.5rem"
                         })
                     }),
-                    showList && /*#__PURE__*/ jsx(CustomSelectList, {
+                    showList && /*#__PURE__*/ jsx(List, {
                         options: computedOptions() || [
                             notFound
                         ],
                         onClickOption: options.length ? handleClickOption : ()=>null,
                         selectedOption: selected,
                         isLoading: isLoading,
-                        handleCustomAction: handleCustomAction
+                        handleCustomAction: handleCustomAction,
+                        onLoadMore: onLoadMore
                     })
                 ]
             }),
@@ -190,4 +192,4 @@ const normalizeOptions = (options)=>{
     const newOptions = options ? options.filter((option)=>option && option.label && option.value) : [];
     return newOptions;
 };
-export { CustomSelect as default, normalizeOptions };
+export { Select as default, normalizeOptions };

package/dist/components/{CustomSelect → Select}/styles.d.ts

@@ -1,4 +1,4 @@
-import { CustomSelectProps } from ".";
+import { SelectProps } from ".";
 interface CustomSelect {
     isError?: boolean;
     isSuccess?: boolean;
@@ -12,7 +12,7 @@ interface CavetButtonProps {
     isListOpen: boolean;
 }
 export declare const CavetButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, CavetButtonProps>> & string;
-interface StyledInputProps extends Partial<Omit<CustomSelectProps, "t" | "options">> {
+interface StyledInputProps extends Partial<Omit<SelectProps, "t" | "options">> {
     t?: () => void;
     options?: [];
 }

package/dist/components/{CustomSelect → Select}/styles.js

@@ -1,5 +1,5 @@
 import styled_components from "styled-components";
-import { COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
+import { COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
 const SelectContainer = styled_components.div`
   display: flex;
   flex-direction: column;
@@ -35,20 +35,20 @@ const CavetButton = styled_components.button`
   right: 0.5rem;
   top: 0.5rem;
   width: 1.5rem;
-
-  svg {
-    transform: ${({ isListOpen })=>isListOpen ? "rotate(180deg)" : "none"};
-  }
+  transition: all 0.15s ease-in-out;
+  transform: ${({ isListOpen })=>isListOpen ? "rotate(-180deg)" : "none"};
 `;
 const StyledInput = styled_components.input`
+  background-color: ${({ disabled })=>disabled ? COLOR_NEUTRAL_LIGHTER : COLOR_NEUTRAL_DAY};
   border-radius: 0.25rem;
   box-shadow: 0px 0px 0px 1px
     ${({ isError, isSuccess })=>isError ? COLOR_DANGER_MEDIUM : isSuccess ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_MEDIUM};
   color: ${COLOR_NEUTRAL_DUSK};
-  cursor: ${({ variation })=>"default" === variation ? "pointer" : "insert"};
+  cursor: ${({ variation, disabled })=>disabled ? "not-allowed" : "default" === variation ? "pointer" : "insert"};
   font-weight: ${FONT_WEIGHT_MEDIUM};
   padding: ${({ icon })=>icon ? "0.5rem 2.5rem 0.5rem 3rem" : "0.5rem 2.5rem 0.5rem 1rem"};
   outline: none;
+  opacity: ${({ disabled })=>disabled ? "0.5" : "1"};
   width: 100%;
   ${({ variation })=>"default" === variation && "pointer-events: none;"}
   ${({ variation })=>"default" === variation && "user-select: none;"}
@@ -87,7 +87,5 @@ const ChipExemple = styled_components.div`
   height: 1.25rem;
   line-height: 1.25rem;
   padding: 0 0.375rem;
-  /* position: absolute; // se quiser que fique fixo no fim
-    left: 0.5rem; // se quiser que fique fixo no fim */
 `;
 export { CavetButton, ChipExemple, HelpText, IconContainer, InputWrapper, SelectContainer, StyledInput, StyledLabel };

package/dist/components/fields/components/HelpText/index.d.ts

@@ -0,0 +1,8 @@
+import { IconsNames } from "@ftdata/f-icons";
+export type HelpTextFeedbackType = "danger" | "success" | "warning" | "info" | "disabled";
+export interface HelpTextProps {
+    feedback?: HelpTextFeedbackType;
+    text: string;
+    icon?: IconsNames;
+}
+export default function HelpText({ feedback, text, icon }: HelpTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/fields/components/HelpText/index.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@ftdata/f-icons";
+import { HelpTextContainer } from "./styles.js";
+const DEFAULT_ICONS = {
+    danger: "ui info-information",
+    success: "ui done-check-checkmark",
+    warning: "ui warning-triangle"
+};
+const getFeedbackIcon = (feedback)=>{
+    if ("info" === feedback || "disabled" === feedback || !feedback) return;
+    return /*#__PURE__*/ jsx(Icon, {
+        name: DEFAULT_ICONS[feedback],
+        color: "currentColor",
+        size: "1rem",
+        weight: "2.5"
+    });
+};
+function HelpText({ feedback, text, icon }) {
+    return /*#__PURE__*/ jsxs(HelpTextContainer, {
+        feedback: feedback,
+        children: [
+            icon && /*#__PURE__*/ jsx(Icon, {
+                name: icon,
+                color: "currentColor",
+                size: "1rem"
+            }),
+            " ",
+            !icon && getFeedbackIcon(feedback),
+            /*#__PURE__*/ jsx("span", {
+                children: text
+            })
+        ]
+    });
+}
+export { HelpText as default };

package/dist/components/fields/components/HelpText/modifiers/colors.d.ts

@@ -0,0 +1,4 @@
+import { HelpTextFeedbackType } from "..";
+type HelpTextColorModifierType = Record<HelpTextFeedbackType, string>;
+export declare const HELP_TEXT_COLOR_MODIFIER: HelpTextColorModifierType;
+export {};

package/dist/components/fields/components/HelpText/modifiers/colors.js

@@ -0,0 +1,9 @@
+import { COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, COLOR_WARNING_MEDIUM } from "@ftdata/f-tokens";
+const HELP_TEXT_COLOR_MODIFIER = {
+    danger: COLOR_DANGER_MEDIUM,
+    warning: COLOR_WARNING_MEDIUM,
+    success: COLOR_SUCCESS_MEDIUM,
+    info: COLOR_NEUTRAL_DUSK,
+    disabled: COLOR_NEUTRAL_MEDIUM
+};
+export { HELP_TEXT_COLOR_MODIFIER };

package/dist/components/fields/components/HelpText/styles.d.ts

@@ -0,0 +1,2 @@
+import { HelpTextProps } from ".";
+export declare const HelpTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Partial<HelpTextProps>>> & string;

package/dist/components/fields/components/HelpText/styles.js

@@ -0,0 +1,19 @@
+import styled_components from "styled-components";
+import { HELP_TEXT_COLOR_MODIFIER } from "./modifiers/colors.js";
+const HelpTextContainer = styled_components.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: ${({ feedback = "info" })=>HELP_TEXT_COLOR_MODIFIER[feedback]};
+  transition: all 0.18s ease;
+
+  span {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+export { HelpTextContainer };

package/dist/components/fields/components/Label/index.d.ts

@@ -0,0 +1,8 @@
+interface LabelProps {
+    text: string;
+    subtext?: string;
+    required?: boolean;
+    htmlFor?: string;
+}
+export default function Label({ text, subtext, required, htmlFor, }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/fields/components/Label/index.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LabelContainer } from "./styles.js";
+function Label({ text, subtext, required, htmlFor }) {
+    return /*#__PURE__*/ jsx(LabelContainer, {
+        required: required,
+        children: /*#__PURE__*/ jsxs("div", {
+            children: [
+                /*#__PURE__*/ jsx("label", {
+                    htmlFor: htmlFor,
+                    children: text
+                }),
+                subtext && /*#__PURE__*/ jsx("span", {
+                    children: subtext
+                }),
+                required && /*#__PURE__*/ jsx("span", {
+                    children: "*"
+                })
+            ]
+        })
+    });
+}
+export { Label as default };

package/dist/components/fields/components/Label/styles.d.ts

@@ -0,0 +1,5 @@
+interface labelProps {
+    required?: boolean;
+}
+export declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, labelProps>> & string;
+export {};

package/dist/components/fields/components/Label/styles.js

@@ -0,0 +1,28 @@
+import styled_components from "styled-components";
+import { COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DUSK, FONT_WEIGHT_BOLD } from "@ftdata/f-tokens";
+const LabelContainer = styled_components.div`
+  display: flex;
+  gap: ${({ required })=>required ? "0" : "0.5rem"};
+  position: relative;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  label {
+    color: ${COLOR_NEUTRAL_DUSK};
+    font-size: 0.875rem;
+    font-weight: ${FONT_WEIGHT_BOLD};
+    line-height: 1rem;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  span {
+    margin-left: ${({ required })=>required ? "0" : "0.5rem"};
+    color: ${({ required })=>required ? COLOR_DANGER_MEDIUM : COLOR_NEUTRAL_DARK};
+    font-size: 0.875rem;
+    font-weight: ${FONT_WEIGHT_BOLD};
+    line-height: 1rem;
+  }
+`;
+export { LabelContainer };

package/dist/components/fields/components/RotateButton/index.d.ts

@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes } from "react";
+interface RotateButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    rotate?: boolean;
+}
+export default function RotateButton({ rotate }: RotateButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/fields/components/RotateButton/index.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { Icon } from "@ftdata/f-icons";
+import { Rotate } from "./styles.js";
+function RotateButton({ rotate }) {
+    return /*#__PURE__*/ jsx(Rotate, {
+        rotate: rotate,
+        children: /*#__PURE__*/ jsx(Icon, {
+            name: "arw caret-down",
+            color: "currentColor"
+        })
+    });
+}
+export { RotateButton as default };

package/dist/components/fields/components/RotateButton/styles.d.ts

@@ -0,0 +1,5 @@
+interface RotateProps {
+    rotate?: boolean;
+}
+export declare const Rotate: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, RotateProps>> & string;
+export {};

package/dist/components/fields/components/RotateButton/styles.js

@@ -0,0 +1,10 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DARKER } from "@ftdata/f-tokens";
+const Rotate = styled_components.button`
+  color: ${COLOR_NEUTRAL_DARKER};
+  height: 1.5rem;
+  width: 1.5rem;
+  transition: rotate 0.18s ease-in-out;
+  rotate: ${({ rotate })=>rotate ? "-180deg" : "0deg"};
+`;
+export { Rotate };

package/dist/components/fields/helpers/getFeedbackType.d.ts

@@ -0,0 +1,2 @@
+import { HelpTextFeedbackType } from "../components/HelpText";
+export declare function getHelpTextFeedbackType(feedback?: HelpTextFeedbackType, disabled?: boolean): HelpTextFeedbackType;

package/dist/components/fields/helpers/getFeedbackType.js

@@ -0,0 +1,11 @@
+const FEEDBACK_MAP = {
+    danger: "danger",
+    success: "success",
+    warning: "warning",
+    info: "info"
+};
+function getHelpTextFeedbackType(feedback, disabled) {
+    const feedBackHelpText = disabled ? "disabled" : FEEDBACK_MAP[feedback ?? "info"];
+    return feedBackHelpText;
+}
+export { getHelpTextFeedbackType };

package/dist/components/fields/modifiers/color_modifiers.d.ts

@@ -0,0 +1,2 @@
+import { FieldFeedbackType } from "../../../types/feedback";
+export declare const FEEDBACK_COLORS: Record<FieldFeedbackType, string>;

package/dist/components/fields/modifiers/color_modifiers.js

@@ -0,0 +1,7 @@
+import { COLOR_DANGER_MEDIUM, COLOR_SUCCESS_MEDIUM, COLOR_WARNING_MEDIUM } from "@ftdata/f-tokens";
+const FEEDBACK_COLORS = {
+    danger: COLOR_DANGER_MEDIUM,
+    success: COLOR_SUCCESS_MEDIUM,
+    warning: COLOR_WARNING_MEDIUM
+};
+export { FEEDBACK_COLORS };

package/dist/components/fields/modifiers/inputColorModifier.d.ts

@@ -0,0 +1,2 @@
+import { FieldFeedbackType } from "../../../types/feedback";
+export declare const fieldColorModifier: (feedback?: FieldFeedbackType) => "" | import("styled-components").RuleSet<object>;

package/dist/components/fields/modifiers/inputColorModifier.js

@@ -0,0 +1,14 @@
+import { css } from "styled-components";
+import { FEEDBACK_COLORS } from "./color_modifiers.js";
+const fieldColorModifier = (feedback)=>{
+    if (!feedback) return "";
+    const color = FEEDBACK_COLORS[feedback];
+    return css`
+    box-shadow: 0 0 0 1px ${color};
+
+    &:focus-within {
+      box-shadow: 0 0 0 2px ${color};
+    }
+  `;
+};
+export { fieldColorModifier };

package/dist/components/fields/modifiers/selectColorModifier.d.ts

@@ -0,0 +1,2 @@
+import { FieldFeedbackType } from "../../../types/feedback";
+export declare function selectColorModifier(feedback?: FieldFeedbackType, active?: boolean): "" | import("styled-components").RuleSet<object>;

package/dist/components/fields/modifiers/selectColorModifier.js

@@ -0,0 +1,10 @@
+import { css } from "styled-components";
+import { FEEDBACK_COLORS } from "./color_modifiers.js";
+function selectColorModifier(feedback, active) {
+    if (!feedback) return "";
+    const color = FEEDBACK_COLORS[feedback];
+    return css`
+    box-shadow: 0 0 0 ${active ? "2px" : "1px"} ${color};
+  `;
+}
+export { selectColorModifier };

package/dist/index.d.ts

@@ -12,8 +12,8 @@ export { default as EmptyState } from "./components/EmptyState";
 export { default as Tooltips } from "./components/Tooltips";
 export { default as Collapse } from "./components/Collapse";
 export { default as UserMenu } from "./components/UserMenu";
-export { default as CustomSelect } from "./components/CustomSelect";
-export type { ICustomSelectOption } from "./components/CustomSelect";
+export { default as Select } from "./components/Select";
+export type { ISelectOption } from "./components/Select";
 export { default as StateAlert } from "./components/StateAlert";
 export { default as MultiSelect } from "./components/MultiSelect";
 export type { IMultiSelectOption } from "./components/MultiSelect";