@ftdata/ui 0.0.14 → 0.0.15

package/dist/components/Input/index.js

@@ -1,19 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { Container, ContainerTextField, DivIcon, HelpText, InputContainer, InputControl, TextField } from "./styles.js";
-import DoneCircleIcon from "../../assets/DoneCircleIcon.js";
-import CancelSquareIcon from "../../assets/CancelSquareIcon.js";
+import { Container, DivIcon, HelpText, InputContainer, InputControl, StyledLabel } from "./styles.js";
 import { Icon } from "@ftdata/f-icons";
 const Input = ({ disabled, error, helpText, name, success, width, icon, textField, margin, required, ...rest })=>/*#__PURE__*/ jsxs(Container, {
         margin: margin,
         children: [
-            textField && /*#__PURE__*/ jsxs(ContainerTextField, {
+            textField && /*#__PURE__*/ jsxs(StyledLabel, {
+                htmlFor: name,
                 children: [
-                    /*#__PURE__*/ jsx(TextField, {
-                        children: textField
-                    }),
-                    required && /*#__PURE__*/ jsx("div", {
-                        className: "required",
+                    textField,
+                    required && /*#__PURE__*/ jsx("span", {
                         children: "*"
                     })
                 ]
@@ -44,8 +40,16 @@ const Input = ({ disabled, error, helpText, name, success, width, icon, textFiel
                 error: error,
                 success: success,
                 children: [
-                    !disabled && error && /*#__PURE__*/ jsx(CancelSquareIcon, {}) || success && /*#__PURE__*/ jsx(DoneCircleIcon, {}),
-                    helpText
+                    error && /*#__PURE__*/ jsx("div", {
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: "ui warning-circle",
+                            size: "1rem",
+                            color: "currentColor"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: helpText
+                    })
                 ]
             })
         ]

package/dist/components/Input/styles.d.ts

@@ -13,5 +13,6 @@ interface HelpTextProps extends React.AllHTMLAttributes<HTMLSpanElement> {
     error?: boolean;
     success?: boolean;
 }
-export declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, HelpTextProps>> & string;
+export declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HelpTextProps>> & string;
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
 export {};

package/dist/components/Input/styles.js

@@ -1,5 +1,5 @@
 import styled_components from "styled-components";
-import { BORDER_RADIUS_SM, COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_DARK, COLOR_SUCCESS_MEDIUM, FONT_FAMILY_01, FONT_SIZE_MD, FONT_SIZE_SM, FONT_SIZE_XS, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM, LINE_HEIGHT_MEDIUM, SPACING_INLINE_01, SPACING_INLINE_02, SPACING_INSET_SM, SPACING_SQUISH_NANO, SPACING_STACK_02 } from "@ftdata/f-tokens";
+import { BORDER_RADIUS_SM, COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, FONT_FAMILY_01, FONT_SIZE_MD, FONT_SIZE_SM, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM, LINE_HEIGHT_MEDIUM, SPACING_INLINE_02, SPACING_INSET_SM, SPACING_SQUISH_NANO, SPACING_STACK_02 } from "@ftdata/f-tokens";
 import { Component } from "react";
 const ContainerTextField = styled_components.div`
   display: flex;
@@ -75,22 +75,33 @@ const InputControl = styled_components.input`
     color: ${({ disabled })=>disabled ? COLOR_NEUTRAL_LIGHT : COLOR_NEUTRAL_MEDIUM};
   }
 `;
-const HelpText = styled_components("span")`
-  align-items: center;
-  box-sizing: border-box;
-  color: ${({ disabled, error, success })=>disabled && COLOR_NEUTRAL_MEDIUM || error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_DARK || COLOR_NEUTRAL_DARK};
+const HelpText = styled_components.div`
+  color: ${({ error, success })=>error ? COLOR_DANGER_MEDIUM : success ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_DARK};
   display: flex;
-  font-family: ${FONT_FAMILY_01};
-  font-weight: ${FONT_WEIGHT_MEDIUM};
-  line-height: ${LINE_HEIGHT_MEDIUM};
-  font-size: ${FONT_SIZE_XS};
-  margin-top: 8px;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
 
-  svg {
-    margin-right: ${SPACING_INLINE_01};
-    path {
-      stroke: ${({ error, success })=>error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_MEDIUM || COLOR_NEUTRAL_DARK};
-    }
+  div {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  span {
+    font-size: 0.875rem;
+    line-height: 1rem;
+    font-weight: ${FONT_WEIGHT_MEDIUM};
+  }
+`;
+const StyledLabel = styled_components.label`
+  color: ${COLOR_NEUTRAL_DUSK};
+  display: flex;
+  font-size: 0.875rem;
+  font-weight: ${FONT_WEIGHT_BOLD};
+  line-height: 1rem;
+  margin-bottom: 0.5rem;
+
+  span {
+    color: ${COLOR_DANGER_MEDIUM};
   }
 `;
-export { Container, ContainerTextField, DivIcon, HelpText, InputContainer, InputControl, ReactInputMask, TextField };
+export { Container, ContainerTextField, DivIcon, HelpText, InputContainer, InputControl, ReactInputMask, StyledLabel, TextField };

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

@@ -13,7 +13,6 @@ const SelectList = ({ options, onClickOption, selectedOption, isLoading, onLoadM
     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);

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

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes, JSX } from "react";
+import { InputHTMLAttributes, JSX } from "react";
 export interface ISelectOption {
     label: string;
     value: string;
@@ -25,7 +25,7 @@ export interface SelectProps extends InputPropsWithoutOnToggle {
     icon?: JSX.Element;
     variation?: "default" | "searchable";
     selected: ISelectOption | null;
-    setSelected: React.Dispatch<React.SetStateAction<ISelectOption | null>>;
+    setSelected: (selected: ISelectOption | null) => void;
     onLoadMore?: () => Promise<void>;
     onToggle?: (open: boolean) => void;
     dropdownPosition?: "top" | "bottom";

package/dist/components/Select/index.js

@@ -153,6 +153,7 @@ function Select({ helpText, isError, isSuccess, label, name, isRequired, options
                         onClick: handleClickCavet,
                         isListOpen: showList,
                         ref: cavetRef,
+                        type: "button",
                         children: /*#__PURE__*/ jsx(Icon, {
                             name: "arw caret-down",
                             color: "currentColor",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftdata/ui",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "type": "module",
   "exports": {
     ".": {
@@ -31,7 +31,7 @@
     "react-input-mask-next": "3.0.0-alpha.12",
     "react-select": "^5.10.2",
     "react-window": "^2.0.2",
-    "@ftdata/f-icons": "0.0.2",
+    "@ftdata/f-icons": "0.0.3",
     "@ftdata/f-tokens": "0.0.1"
   },
   "publishConfig": {