@situaction/traq-ui-ste 1.0.13 → 1.0.15

package/dist/components/button/Button.d.ts

@@ -1,19 +1,19 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
 import { Color } from '../interface';
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    mode?: 'primary' | 'secondary' | 'tertiary' | 'ghost'; /** Is this the principal call to action on the page? */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    mode?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'text'; /** Is this the principal call to action on the page? */
     color?: Color; /** What background color to use (blue, red, ...)*/
     colorMode?: 'light' | 'dark'; /** what mode do you use for light or dark color **/
     size?: 's' | 'm' | 'l' | 'xl'; /** How large should the button be? */
     label: string; /** button contents */
-    error?: boolean;
-    children?: ReactNode; /** Additional content inside the button */
-    childrenPosition?: 'left' | 'right' | 'both'; /** Position of the children relative to the label */
+    error?: boolean; /** If true, the button will be styled to indicate an error state. */
+    selected?: boolean; /** If true, the button is activated */
+    childrenLeft?: ReactNode; /** Additional content inside the input */
+    childrenRight?: ReactNode; /** Additional content inside the input */
     onClick?: () => void; /** Optional click handler */
 }
 /**
  * Primary UI component for user interaction
  */
-export declare const Button: ({ mode, size, color, colorMode, label, error, children, childrenPosition, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Button: FC<ButtonProps>;

package/dist/components/button/Button.js

@@ -1,64 +1,67 @@
-import { jsxs as y, jsx as b } from "react/jsx-runtime";
-import '../../styles/index.css';import '../../styles/Button.css';/* empty css                    */
-import { useEffect as z } from "react";
-const c = "_button_tplzh_196", a = {
-  button: c,
-  "button-primary": "_button-primary_tplzh_211",
-  "button-secondary": "_button-secondary_tplzh_226",
-  "button-tertiary": "_button-tertiary_tplzh_245",
-  "button-ghost": "_button-ghost_tplzh_264",
-  "button-error": "_button-error_tplzh_279",
-  "button-size-xl": "_button-size-xl_tplzh_294",
-  "button-size-l": "_button-size-l_tplzh_299",
-  "button-size-m": "_button-size-m_tplzh_304",
-  "button-size-s": "_button-size-s_tplzh_309",
-  "button-gap-xl": "_button-gap-xl_tplzh_314",
-  "button-gap-l": "_button-gap-l_tplzh_317",
-  "button-gap-m": "_button-gap-m_tplzh_320",
-  "button-gap-s": "_button-gap-s_tplzh_320"
-}, d = ({
-  mode: s = "primary",
-  size: u = "m",
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { useEffect as y } from "react";
+import '../../styles/Button.css';const j = "_button_1mr6j_38", d = "_flexHorizontalCenter_1mr6j_180", r = {
+  button: j,
+  "button-primary": "_button-primary_1mr6j_60",
+  "button-secondary": "_button-secondary_1mr6j_74",
+  "button-tertiary": "_button-tertiary_1mr6j_88",
+  "button-ghost": "_button-ghost_1mr6j_102",
+  "button-text": "_button-text_1mr6j_118",
+  "button-text-selected": "_button-text-selected_1mr6j_131",
+  "button-error": "_button-error_1mr6j_137",
+  "button-size-xl": "_button-size-xl_1mr6j_150",
+  "button-size-l": "_button-size-l_1mr6j_155",
+  "button-size-m": "_button-size-m_1mr6j_160",
+  "button-size-s": "_button-size-s_1mr6j_165",
+  "button-gap-xl": "_button-gap-xl_1mr6j_170",
+  "button-gap-l": "_button-gap-l_1mr6j_173",
+  "button-gap-m": "_button-gap-m_1mr6j_176",
+  "button-gap-s": "_button-gap-s_1mr6j_176",
+  flexHorizontalCenter: d
+}, z = ({
+  mode: o = "primary",
+  size: a = "m",
   color: t,
-  colorMode: r,
-  label: _,
-  error: p,
-  children: o,
-  childrenPosition: n,
-  ...e
+  colorMode: n,
+  label: u,
+  error: b,
+  selected: i,
+  childrenLeft: s,
+  childrenRight: _,
+  ...m
 }) => {
-  const l = () => p ? "error" : s;
-  z(() => {
-    r && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
+  const l = () => b ? "error" : o;
+  y(() => {
+    n && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
   }, [t]);
-  const i = [
-    a.button,
-    a[`button-${l()}`],
-    a[`button-size-${u}`],
-    a[`button-gap-${u}`],
-    "flexHorizontalCenter"
-  ].join(" "), m = {
-    "--dynamic-color-text": t ? r === "dark" ? "var(--primary-color-900)" : "var(--color-light-100)" : "var(--btn-primary-color-text)",
-    "--dynamic-color": t ? `var(--color-${t}-${r === "dark" ? "200" : "900"})` : "var(--btn-primary-color)",
-    "--dynamic-color-hover": t ? `var(--color-${t}-${r === "dark" ? "100" : "800"})` : "var(--btn-primary-color-hover)",
-    "--dynamic-color-activated": t ? `var(--color-${t}-${r === "dark" ? "50" : "700"})` : "var(--btn-primary-color-activated)",
-    "--dynamic-color-disabled": t ? r === "dark" ? "var(--color-dark-10)" : `var(--color-${t}-50)` : "var(--btn-primary-color-disabled)"
+  const c = [
+    r.button,
+    r[`button-${l()}`],
+    r[`button-size-${a}`],
+    r[`button-gap-${a}`],
+    i && o === "text" && r["button-text-selected"],
+    r.flexHorizontalCenter
+  ].join(" "), p = {
+    "--dynamic-color-text": t ? n === "dark" ? `var(--color-${t}-900)` : "var(--color-light-100)" : "var(--btn-primary-color-text)",
+    "--dynamic-color": t ? `var(--color-${t}-${n === "dark" ? "200" : "900"})` : "var(--btn-primary-color)",
+    "--dynamic-color-hover": t ? `var(--color-${t}-${n === "dark" ? "100" : "800"})` : "var(--btn-primary-color-hover)",
+    "--dynamic-color-activated": t ? `var(--color-${t}-${n === "dark" ? "50" : "700"})` : "var(--btn-primary-color-activated)"
   };
-  return /* @__PURE__ */ y(
+  return /* @__PURE__ */ x(
     "button",
     {
       type: "button",
-      className: i,
-      style: s === "primary" ? m : void 0,
-      ...e,
+      className: c,
+      style: o === "primary" ? p : void 0,
+      ...m,
       children: [
-        (n === "left" || n === "both") && o && /* @__PURE__ */ b("span", { children: o }),
-        /* @__PURE__ */ b("span", { children: _ }),
-        (n === "right" || n === "both") && o && /* @__PURE__ */ b("span", { children: o })
+        s && /* @__PURE__ */ e("span", { className: r.flexHorizontalCenter, children: s }),
+        /* @__PURE__ */ e("span", { children: u }),
+        _ && /* @__PURE__ */ e("span", { className: r.flexHorizontalCenter, children: _ })
       ]
     }
   );
 };
 export {
-  d as Button
+  z as Button
 };

package/dist/components/colors/Colors.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+
+export interface ColorsProps {
+    color: string;
+    hex: string[];
+}
+declare const Colors: FC<ColorsProps>;
+export default Colors;

package/dist/components/colors/Colors.js

@@ -0,0 +1,24 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import '../../styles/Colors.css';const n = "_palette_l21ra_6", d = "_colors_l21ra_13", i = "_desc_l21ra_26", h = "_hex_l21ra_35", s = {
+  palette: n,
+  colors: d,
+  desc: i,
+  hex: h
+}, v = ({ color: t, hex: o }) => {
+  const r = t === "light" ? ["05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"] : ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+  return /* @__PURE__ */ e("div", { className: s.palette, children: o.map((c, a) => /* @__PURE__ */ l("div", { className: s.colors, children: [
+    /* @__PURE__ */ e("div", { style: { backgroundColor: c } }),
+    /* @__PURE__ */ l("div", { className: s.desc, children: [
+      /* @__PURE__ */ l("div", { children: [
+        "color-",
+        t,
+        "-",
+        r[a]
+      ] }),
+      /* @__PURE__ */ e("div", { className: s.hex, children: c })
+    ] })
+  ] })) });
+};
+export {
+  v as default
+};

package/dist/components/icon-button/IconButton.d.ts

@@ -1,14 +1,16 @@
 import { FC, ReactElement } from 'react';
 import { Color } from '../interface';
 
-interface IconButtonProps {
-    mode?: 'primary' | 'secondary' | 'tertiary' | 'ghost';
+export interface IconButtonProps {
+    mode?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'icon'; /** Specifies the visual style of the button. */
     color?: Color; /** What background color to use (blue, red, ...)*/
     colorMode?: 'light' | 'dark'; /** what mode do you use for light or dark color **/
-    size?: 'xs' | 's' | 'm' | 'l' | 'xl'; /** How large should the button be? */
-    error?: boolean;
+    size?: 's' | 'm' | 'l' | 'xl'; /** How large should the button be? */
+    round?: boolean; /** If true, the button will have rounded corners. */
+    error?: boolean; /** If true, the button will be styled to indicate an error state. */
+    selected?: boolean; /** If true, the button is activated */
+    disabled?: boolean; /** If true, the button will be disabled and non-interactive. */
     children: ReactElement; /** Only icons (React elements) allowed inside the button */
     onClick?: () => void; /** Optional click handler */
 }
 export declare const IconButton: FC<IconButtonProps>;
-export {};

package/dist/components/icon-button/IconButton.js

@@ -1,52 +1,60 @@
-import { jsx as _ } from "react/jsx-runtime";
-import { useEffect as c } from "react";
-import '../../styles/IconButton.css';const l = "_button_1qaum_196", o = {
-  button: l,
-  "button-primary": "_button-primary_1qaum_216",
-  "button-secondary": "_button-secondary_1qaum_231",
-  "button-tertiary": "_button-tertiary_1qaum_250",
-  "button-ghost": "_button-ghost_1qaum_269",
-  "button-error": "_button-error_1qaum_284",
-  "button-size-xl": "_button-size-xl_1qaum_299",
-  "button-size-l": "_button-size-l_1qaum_304",
-  "button-size-m": "_button-size-m_1qaum_309",
-  "button-size-s": "_button-size-s_1qaum_314",
-  "button-size-xs": "_button-size-xs_1qaum_319"
-}, v = ({
-  mode: a = "primary",
+import { jsx as m } from "react/jsx-runtime";
+import { useEffect as y } from "react";
+import '../../styles/IconButton.css';const k = "_button_7dkt1_38", x = "_flexHorizontalCenter_7dkt1_175", o = {
+  button: k,
+  "button-round": "_button-round_7dkt1_66",
+  "button-primary": "_button-primary_7dkt1_69",
+  "button-secondary": "_button-secondary_7dkt1_82",
+  "button-tertiary": "_button-tertiary_7dkt1_96",
+  "button-ghost": "_button-ghost_7dkt1_110",
+  "button-text": "_button-text_7dkt1_123",
+  "button-text-selected": "_button-text-selected_7dkt1_135",
+  "button-error": "_button-error_7dkt1_141",
+  "button-size-xl": "_button-size-xl_7dkt1_154",
+  "button-size-l": "_button-size-l_7dkt1_159",
+  "button-size-m": "_button-size-m_7dkt1_164",
+  "button-size-s": "_button-size-s_7dkt1_169",
+  flexHorizontalCenter: x
+}, f = ({
+  mode: r = "primary",
   color: t,
-  colorMode: r,
-  size: n = "m",
-  error: i,
-  children: u,
-  onClick: e
+  colorMode: n,
+  size: e = "m",
+  error: u,
+  selected: i,
+  round: a,
+  disabled: _,
+  children: b,
+  onClick: s
 }) => {
-  const s = () => i ? "error" : a;
-  c(() => {
-    r && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
+  const d = () => u ? "error" : r;
+  y(() => {
+    n && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
   }, [t]);
-  const b = [
+  const l = [
     o.button,
-    o[`button-${s()}`],
-    o[`button-size-${n}`],
-    "flexHorizontalCenter"
-  ].join(" "), m = {
-    "--dynamic-color-text": t ? r === "dark" ? "var(--primary-color-900)" : "var(--color-light-100)" : "var(--btn-primary-color-text)",
-    "--dynamic-color": t ? `var(--color-${t}-${r === "dark" ? "200" : "900"})` : "var(--btn-primary-color)",
-    "--dynamic-color-hover": t ? `var(--color-${t}-${r === "dark" ? "100" : "800"})` : "var(--btn-primary-color-hover)",
-    "--dynamic-color-activated": t ? `var(--color-${t}-${r === "dark" ? "50" : "700"})` : "var(--btn-primary-color-activated)",
-    "--dynamic-color-disabled": t ? r === "dark" ? "var(--color-dark-10)" : `var(--color-${t}-50)` : "var(--btn-primary-color-disabled)"
+    o[`button-${d()}`],
+    a && o["button-round"],
+    o[`button-size-${e}`],
+    i && r === "icon" && o["button-text-selected"],
+    o.flexHorizontalCenter
+  ].join(" "), c = {
+    "--dynamic-color-text": t ? n === "dark" ? "var(--primary-color-900)" : "var(--color-light-100)" : "var(--btn-primary-color-text)",
+    "--dynamic-color": t ? `var(--color-${t}-${n === "dark" ? "200" : "900"})` : "var(--btn-primary-color)",
+    "--dynamic-color-hover": t ? `var(--color-${t}-${n === "dark" ? "100" : "800"})` : "var(--btn-primary-color-hover)",
+    "--dynamic-color-activated": t ? `var(--color-${t}-${n === "dark" ? "50" : "700"})` : "var(--btn-primary-color-activated)"
   };
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ m(
     "button",
     {
-      className: b,
-      style: a === "primary" ? m : void 0,
-      onClick: e,
-      children: u
+      className: l,
+      style: c,
+      onClick: s,
+      disabled: _,
+      children: b
     }
   );
 };
 export {
-  v as IconButton
+  f as IconButton
 };

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

@@ -1,16 +1,19 @@
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { FC, InputHTMLAttributes, ReactNode } from 'react';
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     sizeStyle?: 's' | 'm' | 'l' | 'xl'; /** How large should the input be? */
-    label: string; /** input contents **/
-    labelUnit?: string;
+    label: string; /** The label or placeholder text for the input field */
+    labelUnit?: string; /** Optional unit or additional label to display next to the input */
+    dark?: boolean; /** Toggle for dark mode styling */
     color?: string; /** red, green, blue, pink **/
+    classNames?: string; /** class names for parent div due to general input props (input elem takes every other props in <Input/> component) **/
+    focusBackground?: boolean; /** Whether to change the background color when the input is focused */
     status?: 'default' | 'error' | 'success' | 'ternary'; /** input status style **/
-    ghost?: boolean;
-    children?: ReactNode; /** Additional content inside the input */
-    childrenPosition?: 'left' | 'right' | 'both'; /** Position of the children relative to the label */
-    defaultValue?: string;
-    disabled?: boolean;
+    ghost?: boolean; /** Whether to apply a ghost style (transparent background) */
+    round?: boolean; /** If true, the input will have rounded corners */
+    iconLeft?: ReactNode; /** Icon or element to display on the left side of the input */
+    iconRight?: ReactNode; /** Icon or element to display on the right side of the input */
+    defaultValue?: string; /** Default value for the input field */
+    disabled?: boolean; /** Disable the input field */
 }
-export declare const Input: ({ sizeStyle, label, labelUnit, color, status, ghost, children, childrenPosition, disabled, defaultValue, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Input: FC<InputProps>;

package/dist/components/input/Input.js

@@ -1,132 +1,110 @@
-import { jsxs as f, jsx as t, Fragment as O } from "react/jsx-runtime";
-import { useState as x, useRef as y, useEffect as q } from "react";
-import '../../styles/Input.css';const A = "_hideBorder_1in9x_466", e = {
-  "input-style": "_input-style_1in9x_333",
-  "input-style-ghost": "_input-style-ghost_1in9x_341",
-  "input-style-disabled": "_input-style-disabled_1in9x_346",
-  "input-style-focused": "_input-style-focused_1in9x_355",
-  "input-container": "_input-container_1in9x_360",
-  "floating-input": "_floating-input_1in9x_360",
-  "floating-label": "_floating-label_1in9x_360",
-  "input-style-error": "_input-style-error_1in9x_363",
-  "input-style-error-focused": "_input-style-error-focused_1in9x_370",
-  "input-style-error-disabled": "_input-style-error-disabled_1in9x_373",
-  "input-style-success": "_input-style-success_1in9x_381",
-  "input-style-success-focused": "_input-style-success-focused_1in9x_388",
-  "input-style-success-disabled": "_input-style-success-disabled_1in9x_391",
-  "floating-label-size-xl": "_floating-label-size-xl_1in9x_416",
-  "floating-label-size-l": "_floating-label-size-l_1in9x_419",
-  "floating-label-size-m": "_floating-label-size-m_1in9x_422",
-  "floating-label-size-s": "_floating-label-size-s_1in9x_425",
-  "floating-input-size-xl": "_floating-input-size-xl_1in9x_434",
-  "floating-input-size-l": "_floating-input-size-l_1in9x_438",
-  "floating-input-size-m": "_floating-input-size-m_1in9x_442",
-  "floating-input-size-s": "_floating-input-size-s_1in9x_446",
-  hideBorder: A,
-  "hideBorder-error": "_hideBorder-error_1in9x_476",
-  "hideBorder-success": "_hideBorder-success_1in9x_479",
-  "input-style-size-xl": "_input-style-size-xl_1in9x_482",
-  "input-style-size-l": "_input-style-size-l_1in9x_488",
-  "input-style-size-m": "_input-style-size-m_1in9x_494",
-  "input-style-size-s": "_input-style-size-s_1in9x_500"
+import { jsxs as _, jsx as s, Fragment as R } from "react/jsx-runtime";
+import { useState as y, useRef as q } from "react";
+import '../../styles/Input.css';const A = "_flexHorizontalBetween_dkt9v_197", E = "_flexHorizontal_dkt9v_197", t = {
+  "input-style": "_input-style_dkt9v_65",
+  "input-style-ghost": "_input-style-ghost_dkt9v_76",
+  "input-style-disabled": "_input-style-disabled_dkt9v_81",
+  "input-style-focused": "_input-style-focused_dkt9v_90",
+  "input-style-error": "_input-style-error_dkt9v_95",
+  "input-style-error-focused": "_input-style-error-focused_dkt9v_102",
+  "input-style-error-focus-background": "_input-style-error-focus-background_dkt9v_108",
+  "input-style-error-disabled": "_input-style-error-disabled_dkt9v_111",
+  "input-style-success": "_input-style-success_dkt9v_119",
+  "input-style-success-focused": "_input-style-success-focused_dkt9v_126",
+  "input-style-success-focus-background": "_input-style-success-focus-background_dkt9v_132",
+  "input-style-success-disabled": "_input-style-success-disabled_dkt9v_135",
+  "input-container": "_input-container_dkt9v_143",
+  "floating-input": "_floating-input_dkt9v_147",
+  "floating-input-size-xl": "_floating-input-size-xl_dkt9v_153",
+  "floating-input-size-l": "_floating-input-size-l_dkt9v_157",
+  "floating-input-size-m": "_floating-input-size-m_dkt9v_161",
+  "floating-input-size-s": "_floating-input-size-s_dkt9v_165",
+  "input-style-size-xl": "_input-style-size-xl_dkt9v_169",
+  "input-style-size-l": "_input-style-size-l_dkt9v_175",
+  "input-style-size-m": "_input-style-size-m_dkt9v_181",
+  "input-style-size-s": "_input-style-size-s_dkt9v_187",
+  "input-style-radius": "_input-style-radius_dkt9v_193",
+  flexHorizontalBetween: A,
+  flexHorizontal: E
 }, K = ({
-  sizeStyle: c = "m",
-  label: b,
-  labelUnit: m,
+  sizeStyle: u = "m",
+  label: f,
+  labelUnit: o,
   color: n,
-  status: i = "default",
-  ghost: h = !1,
-  children: l,
-  childrenPosition: o = "left",
-  disabled: _,
-  defaultValue: z,
-  ...B
+  dark: r,
+  focusBackground: l,
+  status: a = "default",
+  ghost: v = !1,
+  iconLeft: c,
+  iconRight: p,
+  round: k,
+  classNames: g,
+  disabled: i,
+  defaultValue: m,
+  ...z
 }) => {
-  const [d, g] = x(!1), [r, $] = x(z || ""), s = y(null), u = y(null), a = y(null), C = () => g(!0), N = () => g(!1), j = (p) => {
-    $(p.target.value);
-  }, R = [
-    e["input-style"],
-    e[`input-style-size-${c}`],
-    e[`input-style-gap-${i}`],
-    "flexHorizontalCenter gap4",
-    h && e["input-style-ghost"]
-  ].filter(Boolean).join(" "), v = [
-    d && e["input-style-focused"],
-    _ && e["input-style-disabled"]
-  ].filter(Boolean).join(" "), S = [
-    e["input-style-error"],
-    _ && e["input-style-error-disabled"],
-    d && e["input-style-error-focused"]
-  ].filter(Boolean).join(" "), F = [
-    e["input-style-success"],
-    _ && e["input-style-success-disabled"],
-    d && e["input-style-success-focused"]
-  ].filter(Boolean).join(" "), H = () => {
-    switch (i) {
+  const [e, d] = y(!1), [b, h] = y(m || ""), x = q(null), $ = () => d(!0), H = () => d(!1), S = (D) => {
+    h(D.target.value);
+  }, j = [
+    t["input-style"],
+    t[`input-style-size-${u}`],
+    t[`input-style-gap-${a}`],
+    k && t["input-style-radius"],
+    t.flexHorizontalBetween,
+    "gap4",
+    v && t["input-style-ghost"]
+  ].filter(Boolean).join(" "), B = [
+    e && t["input-style-focused"],
+    i && t["input-style-disabled"]
+  ].filter(Boolean).join(" "), N = [
+    t["input-style-error"],
+    i && t["input-style-error-disabled"],
+    e && t["input-style-error-focused"],
+    e && l && t["input-style-error-focus-background"]
+  ].filter(Boolean).join(" "), C = [
+    t["input-style-success"],
+    i && t["input-style-success-disabled"],
+    e && t["input-style-success-focused"],
+    e && l && t["input-style-success-focus-background"]
+  ].filter(Boolean).join(" "), w = () => {
+    switch (a) {
       case "error":
-        return S;
+        return N;
       case "success":
-        return F;
+        return C;
       default:
-        return v;
+        return B;
     }
-  }, I = [
-    e["floating-label"],
-    e[`floating-label-size-${c}`]
-  ].join(" "), k = [
-    e["floating-input"],
-    e[`floating-input-size-${c}`]
-  ].join(" "), w = {
-    "--dynamic-color": `${n}`,
-    "--dynamic-color-border": `$color-${n}-300`,
-    "--dynamic-background-color": `$color-${n}-50`
+  }, F = [
+    t["floating-input"],
+    t[`floating-input-size-${u}`]
+  ].join(" "), I = {
+    "--dynamic-color": `var(--color-${n}-${r ? "800" : "300"})`,
+    "--dynamic-color-border": `var(--color-${n}-${r ? "800" : "300"})`,
+    "--dynamic-background-color": `${l ? `var(--color-${n}-50)` : "transparent"}`
   }, V = {
-    "--dynamic-color": "var(--primary-color-blue)",
-    "--dynamic-color-border": "$color-blue-grey-300",
-    "--dynamic-background-color": "$color-blue-situaction-50"
-  }, W = [
-    e.hideBorder,
-    i === "success" && e["hideBorder-success"],
-    i === "error" && e["hideBorder-error"]
-  ].filter(Boolean).join(" ");
-  return q(() => {
-    if (r && s.current && u.current && a.current) {
-      const p = s.current.offsetWidth + 6;
-      u.current.style.width = `${p}px`;
-      const D = s.current.getBoundingClientRect(), E = a.current.getBoundingClientRect(), L = D.left - E.left;
-      u.current.style.left = `${L - 3}px`;
-    }
-  }, [s, r, a]), /* @__PURE__ */ f(
-    "div",
-    {
-      ref: a,
-      className: `input-style ${R} ${H()}`,
-      onFocus: C,
-      onBlur: N,
-      style: n ? w : V,
-      children: [
-        r && /* @__PURE__ */ t("div", { className: W, ref: u }),
-        l && (o === "left" || o === "both") && /* @__PURE__ */ t("span", { className: "flexHorizontal", children: l }),
-        /* @__PURE__ */ f("div", { className: e["input-container"], children: [
-          /* @__PURE__ */ t(
-            "input",
-            {
-              className: k,
-              placeholder: " ",
-              value: r,
-              onChange: j,
-              ...B
-            }
-          ),
-          /* @__PURE__ */ t("label", { className: I, ref: s, children: b })
-        ] }),
-        l && (o === "right" || o === "both") && /* @__PURE__ */ f(O, { children: [
-          /* @__PURE__ */ t("div", { children: m }),
-          /* @__PURE__ */ t("span", { className: "flexHorizontal", children: l })
-        ] })
-      ]
-    }
-  );
+    "--dynamic-color": "var(--color-blue-situaction-800)",
+    "--dynamic-color-border": "var(--color-blue-situaction-800)",
+    "--dynamic-background-color": `${l ? "var(--color-blue-situaction-50)" : "transparent"}`
+  };
+  return /* @__PURE__ */ _("div", { ref: x, className: `input-style ${j} ${g} ${w()} gap-xs-2`, onFocus: $, onBlur: H, style: n ? I : V, children: [
+    c && /* @__PURE__ */ s("span", { className: "", children: c }),
+    /* @__PURE__ */ s("div", { className: t["input-container"], children: /* @__PURE__ */ s(
+      "input",
+      {
+        autoCorrect: "false",
+        className: F,
+        placeholder: f,
+        value: b,
+        onChange: S,
+        ...z
+      }
+    ) }),
+    /* @__PURE__ */ _(R, { children: [
+      o && /* @__PURE__ */ s("div", { children: o }),
+      p && /* @__PURE__ */ s("span", { className: t.flexHorizontal, children: p })
+    ] })
+  ] });
 };
 export {
   K as Input

package/dist/components/tabs/Tabs.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 
-interface TabsProps {
-    listItems: string[];
-    onTabSelect: (selectedItem: string) => void;
+export interface TabsProps {
+    listItems: string[]; /** Array of strings representing the labels of the tabs */
+    defaultActiveTab?: number; /** Index of the tab that should be active by default */
+    onTabSelect: (selectedItem: string) => void; /** Callback function to handle tab selection, receiving the selected tab's label */
 }
 export declare const Tabs: FC<TabsProps>;
-export {};