@inntechcorp/it-design 2.0.72 → 2.0.76

package/dist/output-IEkM2RRB.css

@@ -0,0 +1,286 @@
+.root *, .root :after, .root :before {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+}
+.root button, .root input, .root optgroup, .root select, .root textarea, .root input::placeholder, .root textarea::placeholder {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  text-transform: none;
+}
+.root [role=button], .root button {
+  cursor: pointer;
+}
+.root input {
+  background: transparent;
+  border: none;
+}
+.root [type=button], .root [type=reset], .root [type=submit], .root button {
+  background-color: transparent;
+  background-image: none;
+}
+.root a {
+  cursor: pointer;
+  color: #029CFD;
+  text-decoration: none;
+}
+.root a:hover {
+  color: #0083d4;
+}
+.root strong {
+  font-weight: 600;
+}
+.root input:focus-visible {
+  outline: none;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+  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/output-LWZ75260.css

@@ -0,0 +1,286 @@
+.root *, .root :after, .root :before {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+}
+.root button, .root input, .root optgroup, .root select, .root textarea, .root input::placeholder, .root textarea::placeholder {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  text-transform: none;
+}
+.root [role=button], .root button {
+  cursor: pointer;
+}
+.root input {
+  background: transparent;
+  border: none;
+}
+.root [type=button], .root [type=reset], .root [type=submit], .root button {
+  background-color: transparent;
+  background-image: none;
+}
+.root a {
+  cursor: pointer;
+  color: #029CFD;
+  text-decoration: none;
+}
+.root a:hover {
+  color: #0083d4;
+}
+.root strong {
+  font-weight: 600;
+}
+.root input:focus-visible {
+  outline: none;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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/style.settings.d.ts

@@ -1,17 +1,26 @@
 export declare const getImageSizeBySize: (size: string) => {
-    width: string;
-    height: string;
+    width: number;
+    height: number;
+};
+export declare const getArrowSizeBySize: (size: string) => {
+    width: number;
+    height: number;
 };
 export declare const getOptionSizeBySize: (size: string) => {
     padding: string;
-    height: string;
+    height: number;
 };
 export declare const getSelectSizeBySize: (size: string) => {
-    padding: string;
-    height: string;
+    padding: {
+        top: string;
+        right: string;
+        bottom: string;
+        left: string;
+    };
+    height: number;
 };
 export declare const getFontSizeBySize: (size: string) => {
-    fontSize: string;
-    lineHeight: string;
-    fontWeight: string;
+    fontSize: number;
+    lineHeight: number;
+    fontWeight: number;
 };

package/dist/select/toggle/Toggle.d.ts

@@ -1,3 +1,3 @@
 import { SelectToggleProps } from '../../index';
-declare const Toggle: ({ id, label, value, errorMessage, isOpen, locked, labelType, placeholder, icon, image, size, selected, onChange }: SelectToggleProps) => import("react/jsx-runtime").JSX.Element;
+declare const Toggle: ({ id, label, value, errorMessage, isOpen, locked, disabled, showSearch, labelType, placeholder, icon, image, size, selected, onFocus, onBlur }: SelectToggleProps) => import("react/jsx-runtime").JSX.Element;
 export default Toggle;

package/dist/select/toggle/label/single/SingleLabel.d.ts

@@ -1,9 +1,18 @@
+/// <reference types="react" />
+export type SingleLabelRefObject = {
+    setFocus: () => void;
+};
 type SingleLabelProps = {
     id?: string;
     value: string | number | [];
-    label: string | number | [];
-    placeholder: string | number;
+    label: string;
+    placeholder: string;
     size: string;
+    isOpen: boolean;
+    showSearch: boolean;
+    disabled: boolean;
+    onFocus: () => void;
+    onBlur: () => void;
 };
-declare const SingleLabel: ({ id, value, label, placeholder, size }: SingleLabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleLabel: import("react").ForwardRefExoticComponent<SingleLabelProps & import("react").RefAttributes<SingleLabelRefObject>>;
 export default SingleLabel;

package/dist/select/toggle/label/single/styled.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    $size: string;
+declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $preventInteractions?: boolean | undefined;
 }>> & string;
-export { Wrapper, Label, InputWrapper };
+export { Wrapper, InputWrapper };

package/dist/stories/root/index.d.ts

@@ -2,5 +2,5 @@ import { ChildrenProps } from "types/ChildrenProps";
 import "./index.scss";
 declare const StoryRoot: ({ children }: {
     children: ChildrenProps;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => ChildrenProps;
 export default StoryRoot;

package/dist/types/SelectProps.d.ts

@@ -5,7 +5,7 @@ export type SelectProps = {
     id?: string;
     defaultValue?: string | number;
     value?: string | number;
-    label?: string | number;
+    label?: string;
     position?: string;
     direction?: string;
     mode?: string;
@@ -16,6 +16,7 @@ export type SelectProps = {
     icon?: string;
     image?: string;
     disabled?: boolean;
+    showSearch?: boolean;
     locked?: boolean;
     floating?: boolean;
     children?: ReactElement<SelectOptionProps> | Array<ReactElement<SelectOptionProps>> | ChildrenProps;
@@ -24,17 +25,21 @@ export type SelectProps = {
 };
 export type SelectToggleProps = {
     id?: string;
-    label: string | number | [];
+    label: string;
     value: string | number | [];
     errorMessage: string;
     isOpen: boolean;
+    showSearch: boolean;
     locked: boolean;
+    disabled: boolean;
     labelType: string;
     placeholder: string;
     icon: string;
     image: string;
     size: ITDSize;
     selected: SelectOptionProps;
+    onFocus: () => void;
+    onBlur: () => void;
     onChange: (open: boolean) => void;
 };
 export type SelectVariant = "default" | "solid" | "filled" | "outline" | "custom";

package/dist/utils/GetSizeBySizeSlug.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inntechcorp/it-design",
-  "version": "2.0.72",
+  "version": "2.0.76",
   "description": "All in one Design library for desktop applications.",
   "author": "Inn.Tech",
   "license": "ISC",
@@ -115,6 +115,7 @@
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-styles": "4.0.0",
     "rollup-plugin-terser": "^7.0.2",