@inntechcorp/it-design 2.0.113 → 2.0.115

package/dist/index.d.mts

@@ -70,7 +70,7 @@ export type { AccordionSubMenuProps } from './types/AccordionSubMenuProps';
 export type { AccordionItemProps } from './types/AccordionItemProps';
 export type { InputProps, InputVariant } from './types/InputProps';
 export type { TextAreaProps, TextAreaVariant, TextAreaEvent } from './types/TextAreaProps';
-export type { SelectProps, SelectToggleProps, SelectOptionProps, SelectVariant, SelectDirection, SelectPosition } from './types/SelectProps';
+export type { SelectProps, SelectToggleProps, SelectOptionProps, SelectValue, SelectVariant, SelectDirection, SelectPosition } from './types/SelectProps';
 export type { CheckboxProps, CheckboxGroupProps, GroupCheckboxOptionType, CheckboxEvent } from './types/CheckboxProps';
 export type { ITDImperativeFuncProps } from './types/ITDImperativeFuncProps';
 export type { SingleQueryProps } from './types/SingleQueryProps';

package/dist/index.d.ts

@@ -760,8 +760,8 @@ type TextAreaVariant = "default" | "filled" | "dashed";
 
 type SelectProps = {
     id?: string;
-    defaultValue?: string | number;
-    value?: string | number;
+    defaultValue?: SelectValue;
+    value?: SelectValue;
     label?: string;
     position?: SelectPosition;
     direction?: SelectDirection;
@@ -778,13 +778,13 @@ type SelectProps = {
     floating?: boolean;
     style?: CSSProperties;
     children?: ReactElement<SelectOptionProps> | Array<ReactElement<SelectOptionProps>> | ChildrenProps;
-    onChange?: ((value: any) => void) | null;
-    onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;
+    onChange?: ((value: SelectValue) => void) | null;
+    onUpdate?: ((value: SelectValue, update?: boolean, validation?: boolean) => void) | null;
 };
 type SelectToggleProps = {
     id?: string;
     label: string;
-    value: string | number | [];
+    value: SelectValue;
     errorMessage: string;
     isOpen: boolean;
     showSearch: boolean;
@@ -802,6 +802,7 @@ type SelectToggleProps = {
     onFilter: (value: string) => void;
     onChange: (open: boolean) => void;
 };
+type SelectValue = string | number | any[];
 type SelectVariant = "default" | "solid" | "filled" | "outline" | "custom";
 type SelectPosition = "top" | "bottom";
 type SelectDirection = "right" | "left";
@@ -1335,4 +1336,4 @@ declare enum FileExtensions {
     OTF = ".otf"
 }
 
-export { ALink, Accordion, type AccordionItemProps, type AccordionProps, type AccordionSubMenuProps, AddDefaultThemeStyle, AddZero, Alert, type AlertProps, type AlertSize, type AlertType, Arrow as ArrowIcon, BackToTop, BackTop, Button, type ButtonContentPosition, type ButtonProps, type ButtonState, type ButtonType, type ButtonVariant, Calendar, Card, type CardProps, CheckFileURL, Checkbox, type CheckboxEvent, type CheckboxGroupProps, type CheckboxProps, Checkmark, ChunkArray, Collapse, ConsoleLog, ConvertCurrency, DatePicker, DetermineNewHeight, DetermineNewWidth, type FieldUpdateProps, FileChecker, FileExtensions, FileTypes, FindSelector, Flex, type FlexAlignProps, type FlexGapProps, type FlexJustifyProps, type FlexProps, Form, type FormContextType, type FormItemProps, type FormProps, type FormRuleProps, type FormSubComponentProps, type FormValueProps, FormatBytes, FormatDate, FormatDateTime, FormatSimpleDate, FormatSimpleDateTime, FormatTime, GetByCurrency, GetCountryCodeByCurrencyCode, GetCountryCodeByLanguage, GetCurrencyFormat, GetCurrencySymbol, GetDecimalByCurrency, GetTypeByFileType, type GroupCheckboxOptionType, H1, H2, H3, H4, ITDContext, type ITDContextType, type ITDImperativeFuncProps, ITDProvider, type ITDProviderProps, type ITDSize, type ITDSizeSlug, _default as Image, InlineSelect, InlineSelectArrow, Input, type InputProps, type InputVariant, IsValidJSON, Lock as LockIcon, type ModalContentProps, ModalManager, type ModalProps, type ModalRefProps, ModalState, NoData, Notification, type NotificationContextType, type NotificationsProps, Picture, Progress, type ProgressProps, type ProgressStatus, Radio, RemoveUnits, Result, type ResultProps, SVGLoader, Select, type SelectDirection, type SelectOptionProps, type SelectPosition, type SelectProps, type SelectToggleProps, type SelectVariant, type SingleQueryProps, Spin, Status, type StatusProps, type StatusVariant, Switch, type SwitchProps, Table, type TableColumnType, type TableProps, Tabs, type TabsItemProps, type TabsProps, TextArea, type TextAreaEvent, type TextAreaProps, type TextAreaVariant, TinyScrollbar, Tooltip, Trash, UniUpperCase, UpdateThemeStyle, Upload, Upload$1 as UploadIcon, type UploadProgressProps, type UploadProps, type UploadResultMessageProps, Wait, ZoomIn, ZoomOut, useAddExternalCSS, useComponentSize, useConnectionStatus, useConstructor, useContextBridge, useCoreFetch, useCreateDynamicStyle, useCreateStyledStyle, useMultiQuery, useOnClickOutside, useOnESCKeyDown, useOnResize, useReCaptcha, useSingleQuery };
+export { ALink, Accordion, type AccordionItemProps, type AccordionProps, type AccordionSubMenuProps, AddDefaultThemeStyle, AddZero, Alert, type AlertProps, type AlertSize, type AlertType, Arrow as ArrowIcon, BackToTop, BackTop, Button, type ButtonContentPosition, type ButtonProps, type ButtonState, type ButtonType, type ButtonVariant, Calendar, Card, type CardProps, CheckFileURL, Checkbox, type CheckboxEvent, type CheckboxGroupProps, type CheckboxProps, Checkmark, ChunkArray, Collapse, ConsoleLog, ConvertCurrency, DatePicker, DetermineNewHeight, DetermineNewWidth, type FieldUpdateProps, FileChecker, FileExtensions, FileTypes, FindSelector, Flex, type FlexAlignProps, type FlexGapProps, type FlexJustifyProps, type FlexProps, Form, type FormContextType, type FormItemProps, type FormProps, type FormRuleProps, type FormSubComponentProps, type FormValueProps, FormatBytes, FormatDate, FormatDateTime, FormatSimpleDate, FormatSimpleDateTime, FormatTime, GetByCurrency, GetCountryCodeByCurrencyCode, GetCountryCodeByLanguage, GetCurrencyFormat, GetCurrencySymbol, GetDecimalByCurrency, GetTypeByFileType, type GroupCheckboxOptionType, H1, H2, H3, H4, ITDContext, type ITDContextType, type ITDImperativeFuncProps, ITDProvider, type ITDProviderProps, type ITDSize, type ITDSizeSlug, _default as Image, InlineSelect, InlineSelectArrow, Input, type InputProps, type InputVariant, IsValidJSON, Lock as LockIcon, type ModalContentProps, ModalManager, type ModalProps, type ModalRefProps, ModalState, NoData, Notification, type NotificationContextType, type NotificationsProps, Picture, Progress, type ProgressProps, type ProgressStatus, Radio, RemoveUnits, Result, type ResultProps, SVGLoader, Select, type SelectDirection, type SelectOptionProps, type SelectPosition, type SelectProps, type SelectToggleProps, type SelectValue, type SelectVariant, type SingleQueryProps, Spin, Status, type StatusProps, type StatusVariant, Switch, type SwitchProps, Table, type TableColumnType, type TableProps, Tabs, type TabsItemProps, type TabsProps, TextArea, type TextAreaEvent, type TextAreaProps, type TextAreaVariant, TinyScrollbar, Tooltip, Trash, UniUpperCase, UpdateThemeStyle, Upload, Upload$1 as UploadIcon, type UploadProgressProps, type UploadProps, type UploadResultMessageProps, Wait, ZoomIn, ZoomOut, useAddExternalCSS, useComponentSize, useConnectionStatus, useConstructor, useContextBridge, useCoreFetch, useCreateDynamicStyle, useCreateStyledStyle, useMultiQuery, useOnClickOutside, useOnESCKeyDown, useOnResize, useReCaptcha, useSingleQuery };

package/dist/{output-DCvuWNga.css → output-DfOH-aLb.css}

@@ -61,6 +61,32 @@
   -webkit-box-shadow: 0 0 0 30px #151d3d inset !important;
 }
 
+.option {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  min-width: max-content;
+  padding: 10px 30px 10px 15px;
+}
+.option:not(:last-child) {
+  margin-bottom: 1px;
+}
+.option:hover {
+  background-color: rgba(29, 38, 73, 0.5019607843);
+}
+
+.selected .single, .selected .option span {
+  color: #ffffff;
+}
+
+.single, .option span {
+  color: rgba(255, 255, 255, 0.6666666667);
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 12px;
+  white-space: nowrap;
+}
+
 .arrow {
   transition: all 0.25s ease-out;
   margin-left: auto;
@@ -156,32 +182,6 @@
   transition: height 150ms ease-out;
 }
 
-.option {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  min-width: max-content;
-  padding: 10px 30px 10px 15px;
-}
-.option:not(:last-child) {
-  margin-bottom: 1px;
-}
-.option:hover {
-  background-color: rgba(29, 38, 73, 0.5019607843);
-}
-
-.selected .single, .selected .option span {
-  color: #ffffff;
-}
-
-.single, .option span {
-  color: rgba(255, 255, 255, 0.6666666667);
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 12px;
-  white-space: nowrap;
-}
-
 .container {
   display: flex;
   align-items: center;

package/dist/output-DjWTgiS1.css

@@ -0,0 +1,241 @@
+.defaultInput {
+  height: 100%;
+}
+
+.floatingInput {
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.8509803922);
+  caret-color: rgba(0, 0, 0, 0.8509803922);
+}
+
+/* --------------------------------- */
+.floatingInput::placeholder {
+  color: rgba(0, 0, 0, 0);
+}
+
+.floatingInput:disabled:not(.floatingInput[data-locked=true]) {
+  opacity: 0.5;
+}
+
+.floatingInput:disabled :not(.floatingInput[data-locked=true]) {
+  opacity: 0.5;
+}
+
+.floatingLabel {
+  display: block;
+  position: relative;
+  max-height: 0;
+  font-weight: 500;
+  pointer-events: none;
+  font-size: 16px;
+}
+
+.floatingLabel::before {
+  color: rgba(0, 0, 0, 0.6);
+  content: attr(data-content);
+  display: inline-block;
+  filter: blur(0);
+  backface-visibility: hidden;
+  transform-origin: left top;
+  transition: transform 0.2s ease-out;
+  position: relative;
+}
+
+.floatingInput:placeholder-shown + .floatingLabel::before {
+  transform: translate3d(0, -32px, 0) scale3d(0.8, 0.8, 1);
+  font-smooth: always;
+  -webkit-font-smoothing: antialiased;
+}
+
+.floatingLabel::before,
+.floatingInput:focus + .floatingLabel::before {
+  transform: translate3d(0, -40px, 0) scale3d(0.8, 0.8, 1);
+}
+
+.floatingInput:focus + .floatingLabel::before {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.floatingInputinput:-webkit-autofill, .floatingInputinput:-webkit-autofill:focus, .floatingInputinput:-webkit-autofill:hover {
+  -webkit-text-fill-color: #3496fa !important;
+  -webkit-box-shadow: 0 0 0 30px #151d3d inset !important;
+}
+
+.arrow {
+  transition: all 0.25s ease-out;
+  margin-left: auto;
+  transform: rotate(0deg);
+  width: 20px;
+  height: 20px;
+  fill: rgba(255, 255, 255, 0.6);
+}
+
+.arrowNormal {
+  margin-left: auto;
+  transform: rotate(-90deg);
+}
+
+.arrowOpen {
+  transform: rotate(-180deg);
+  fill: #ffffff;
+}
+
+.icon {
+  margin-right: 8px;
+  height: 22px;
+  width: 22px;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 22px;
+  display: flex;
+  align-items: center;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  min-width: max-content;
+  padding: 10px 30px 10px 15px;
+}
+.option:not(:last-child) {
+  margin-bottom: 1px;
+}
+.option:hover {
+  background-color: rgba(29, 38, 73, 0.5019607843);
+}
+
+.selected .single, .selected .option span {
+  color: #ffffff;
+}
+
+.single, .option span {
+  color: rgba(255, 255, 255, 0.6666666667);
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 12px;
+  white-space: nowrap;
+}
+
+.menu {
+  background-color: #050A20;
+  border-radius: 0 5px 5px 5px;
+  overflow: hidden;
+  position: absolute;
+  z-index: 2;
+  box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.25);
+  transform-origin: 50% 1%;
+  transform-box: fill-box;
+  transition-timing-function: cubic-bezier(0.75, -0.5, 0, 1.25);
+}
+.menu ul {
+  min-width: max-content;
+}
+
+.bodyWrapper {
+  height: 300px;
+}
+
+.bodyWrapperLong {
+  height: 300px;
+}
+
+.bottom {
+  top: 100%;
+}
+
+.left {
+  left: 0;
+}
+
+/* -------------------------------- */
+.menuEnter {
+  opacity: 0;
+  height: 50px;
+}
+
+.menuEnterActive {
+  opacity: 1;
+  height: 300px;
+  transition: height 150ms ease-out;
+}
+
+.menuExit {
+  opacity: 1;
+}
+
+.menuExitActive {
+  opacity: 0;
+  height: 300px;
+  transition: height 150ms ease-out;
+}
+
+/* -------------------------------- */
+.menuEnterActiveLong {
+  opacity: 1;
+  height: 300px;
+  transition: height 150ms ease-out;
+}
+
+.menuExitActiveLong {
+  opacity: 0;
+  height: 300px;
+  transition: height 150ms ease-out;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.label span {
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.2;
+  margin-left: 10px;
+}
+
+.checkmark {
+  height: 20px;
+  width: 20px;
+  border-radius: 6px;
+  background-color: #1D2649;
+  transition: background-color 0.25sn ease-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.checkmark svg {
+  fill: #ffffff;
+  visibility: hidden;
+}
+
+.check {
+  background-color: #3396FB;
+}
+.check svg {
+  visibility: visible;
+  animation: bounce 0.5s;
+}
+
+@keyframes bounce {
+  0% {
+    transform: scale(0.2) rotate(4deg);
+  }
+  50% {
+    transform: scale(1.2) rotate(-2deg);
+  }
+  75% {
+    transform: scale(0.9) rotate(1deg);
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+  }
+}

package/dist/select/menu/Menu.d.ts

@@ -1,6 +1,7 @@
 import { ChildrenProps } from 'types/ChildrenProps';
+import { SelectValue } from 'types/SelectProps';
 type MenuProps = {
-    value: string | number | [];
+    value: SelectValue;
     position: string;
     direction: string;
     mode: string;

package/dist/types/SelectProps.d.ts

@@ -3,8 +3,8 @@ import { ChildrenProps } from "./ChildrenProps";
 import { ITDSize } from "../index";
 export type SelectProps = {
     id?: string;
-    defaultValue?: string | number;
-    value?: string | number;
+    defaultValue?: SelectValue;
+    value?: SelectValue;
     label?: string;
     position?: SelectPosition;
     direction?: SelectDirection;
@@ -21,13 +21,13 @@ export type SelectProps = {
     floating?: boolean;
     style?: CSSProperties;
     children?: ReactElement<SelectOptionProps> | Array<ReactElement<SelectOptionProps>> | ChildrenProps;
-    onChange?: ((value: any) => void) | null;
-    onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;
+    onChange?: ((value: SelectValue) => void) | null;
+    onUpdate?: ((value: SelectValue, update?: boolean, validation?: boolean) => void) | null;
 };
 export type SelectToggleProps = {
     id?: string;
     label: string;
-    value: string | number | [];
+    value: SelectValue;
     errorMessage: string;
     isOpen: boolean;
     showSearch: boolean;
@@ -45,6 +45,7 @@ export type SelectToggleProps = {
     onFilter: (value: string) => void;
     onChange: (open: boolean) => void;
 };
+export type SelectValue = string | number | any[];
 export type SelectVariant = "default" | "solid" | "filled" | "outline" | "custom";
 export type SelectPosition = "top" | "bottom";
 export type SelectDirection = "right" | "left";

package/dist/utils/GetSizeBySizeSlug.d.ts

@@ -1,2 +1,2 @@
 import { ITDSizeSlug } from "../index";
-export default function GetSizeBySizeSlug(size: ITDSizeSlug): "large" | "small" | "x-small" | "medium" | "default" | "x-large" | "df";
+export default function GetSizeBySizeSlug(size: ITDSizeSlug): "x-small" | "small" | "medium" | "default" | "large" | "x-large" | "df";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inntechcorp/it-design",
-  "version": "2.0.113",
+  "version": "2.0.115",
   "description": "All in one Design library for web applications.",
   "author": "Inn.Tech",
   "license": "ISC",