tcce-design-system-test 0.3.3 → 0.3.5

package/dist/tcce-design-system-components.d.ts

@@ -14,6 +14,8 @@ import { RefAttributes } from 'react';
 import { RemixiconComponentType } from '@remixicon/react';
 import { RuleSet } from 'styled-components';
 import { Substitute } from 'styled-components/dist/types';
+import { toast } from 'sonner';
+import { ToasterProps } from 'sonner';
 
 /**
  * Valid input types supported by the FormField component
@@ -138,6 +140,8 @@ export declare interface CheckboxSpecificProps {
 
 declare type ColorKey = 'primary' | 'orange' | 'white' | 'gray';
 
+declare type ColorKey_2 = 'primary' | 'orange' | 'white' | 'gray';
+
 /**
  * Helper to create field configurations for common patterns
  */
@@ -515,7 +519,7 @@ declare interface IconProps {
     iconProps?: Record<string, unknown>;
 }
 
-declare type IconSizes = 'tn' | 'sm' | 'md' | 'lg';
+export declare type IconSizes = 'tn' | 'sm' | 'md' | 'lg';
 
 export declare const IconWrapperStyles: RuleSet<object>;
 
@@ -563,6 +567,11 @@ export declare interface InputWithIconsProps extends WithIconsProps {
     hasRightIcon?: boolean;
 }
 
+/**
+ * Type guard to check if a string is a valid AllowedInputType
+ */
+export declare const isAllowedInputType: (t: string) => t is AllowedInputType;
+
 export declare const Label: default_2.FC<BaseLabelProps>;
 
 export declare type LabelSize = 'sm' | 'md' | 'lg';
@@ -667,7 +676,9 @@ export declare interface NavigationItem {
  * @param fields - Array of field configurations
  * @returns Normalized field configurations with valid types
  */
-export declare const normalizeFieldTypes: (fields: Partial<FieldConfig>[]) => FieldConfig[];
+export declare const normalizeFieldTypes: (fields: Array<Partial<FieldConfig> & {
+    type?: string;
+}>) => FieldConfig[];
 
 /**
  * Transforms select options to the expected format
@@ -1022,7 +1033,7 @@ export declare interface TextAreaSpecificProps {
     rows?: number;
 }
 
-export declare const toast: unknown;
+export { toast }
 
 /**
  * ToastProvider component for displaying toast notifications.
@@ -1032,7 +1043,11 @@ export declare const toast: unknown;
  *
  * @returns The rendered ToastProvider component.
  */
-export declare const ToastProvider: () => JSX.Element;
+export declare const ToastProvider: ({ spinnerColor, ...props }: ToastProviderProps) => JSX.Element;
+
+declare type ToastProviderProps = ToasterProps & {
+    spinnerColor?: ColorKey_2;
+};
 
 /**
  * Validates if a complete code meets certain criteria

package/dist/tcce-design-system-components.js

@@ -6695,7 +6695,7 @@ const vt = new tg(), eg = (t, e) => {
     ...e,
     id: n
   }), n;
-}, ng = (t) => t && typeof t == "object" && "ok" in t && typeof t.ok == "boolean" && "status" in t && typeof t.status == "number", rg = eg, ig = () => vt.toasts, og = () => vt.getActiveToasts(), sg = Object.assign(rg, {
+}, ng = (t) => t && typeof t == "object" && "ok" in t && typeof t.ok == "boolean" && "status" in t && typeof t.status == "number", rg = eg, ig = () => vt.toasts, og = () => vt.getActiveToasts(), Qy = Object.assign(rg, {
   success: vt.success,
   info: vt.info,
   warning: vt.warning,
@@ -6713,15 +6713,15 @@ Up("[data-sonner-toaster][dir=ltr],html[dir=ltr]{--toast-icon-margin-start:-3px;
 function Tn(t) {
   return t.label !== void 0;
 }
-const ag = 3, lg = "24px", cg = "16px", Os = 4e3, ug = 356, dg = 14, hg = 45, fg = 200;
+const sg = 3, ag = "24px", lg = "16px", Os = 4e3, cg = 356, ug = 14, dg = 45, hg = 200;
 function Lt(...t) {
   return t.filter(Boolean).join(" ");
 }
-function mg(t) {
+function fg(t) {
   const [e, n] = t.split("-"), r = [];
   return e && r.push(e), n && r.push(n), r;
 }
-const pg = (t) => {
+const mg = (t) => {
   var e, n, r, i, s, o, a, l, u;
   const { invert: d, toast: c, unstyled: h, interacting: f, setHeights: m, visibleToasts: y, heights: b, index: g, toasts: w, expanded: v, removeToast: A, defaultRichColors: T, closeButton: S, style: C, cancelButtonStyle: E, actionButtonStyle: M, className: _ = "", descriptionClassName: D = "", duration: K, position: U, gap: Tt, expandByDefault: et, classNames: O, icons: V, closeButtonAriaLabel: F = "Close toast" } = t, [I, j] = x.useState(null), [nt, rt] = x.useState(null), [B, G] = x.useState(!1), [Y, st] = x.useState(!1), [$t, H] = x.useState(!1), [yt, qt] = x.useState(!1), [_t, pt] = x.useState(!1), [Sc, nr] = x.useState(0), [Tc, Ki] = x.useState(0), Ke = x.useRef(c.duration || K || Os), Yi = x.useRef(null), Ht = x.useRef(null), Cc = g === 0, kc = g + 1 <= y, wt = c.type, ve = c.dismissible !== !1, Pc = c.className || "", Ac = c.descriptionClassName || "", hn = x.useMemo(() => b.findIndex((N) => N.toastId === c.id) || 0, [
     b,
@@ -6793,7 +6793,7 @@ const pg = (t) => {
   const Zt = x.useCallback(() => {
     st(!0), nr(be.current), m((N) => N.filter((at) => at.toastId !== c.id)), setTimeout(() => {
       A(c);
-    }, fg);
+    }, hg);
   }, [
     c,
     A,
@@ -6890,7 +6890,7 @@ const pg = (t) => {
       if (yt || !ve) return;
       xe.current = null;
       const St = Number(((N = Ht.current) == null ? void 0 : N.style.getPropertyValue("--swipe-amount-x").replace("px", "")) || 0), fn = Number(((at = Ht.current) == null ? void 0 : at.style.getPropertyValue("--swipe-amount-y").replace("px", "")) || 0), ut = (/* @__PURE__ */ new Date()).getTime() - ((ht = Yi.current) == null ? void 0 : ht.getTime()), Ct = I === "x" ? St : fn, mn = Math.abs(Ct) / ut;
-      if (Math.abs(Ct) >= hg || mn > 0.11) {
+      if (Math.abs(Ct) >= dg || mn > 0.11) {
         nr(be.current), c.onDismiss == null || c.onDismiss.call(c, c), rt(I === "x" ? St > 0 ? "right" : "left" : fn > 0 ? "down" : "up"), Zt(), qt(!0);
         return;
       } else {
@@ -6904,7 +6904,7 @@ const pg = (t) => {
       if (!xe.current || !ve || ((at = window.getSelection()) == null ? void 0 : at.toString().length) > 0) return;
       const ut = N.clientY - xe.current.y, Ct = N.clientX - xe.current.x;
       var mn;
-      const Mt = (mn = t.swipeDirections) != null ? mn : mg(U);
+      const Mt = (mn = t.swipeDirections) != null ? mn : fg(U);
       !I && (Math.abs(Ct) > 1 || Math.abs(ut) > 1) && j(Math.abs(Ct) > Math.abs(ut) ? "x" : "y");
       let Vt = {
         x: 0,
@@ -6972,13 +6972,13 @@ function js() {
   const t = document.documentElement.getAttribute("dir");
   return t === "auto" || !t ? window.getComputedStyle(document.documentElement).direction : t;
 }
-function gg(t, e) {
+function pg(t, e) {
   const n = {};
   return [
     t,
     e
   ].forEach((r, i) => {
-    const s = i === 1, o = s ? "--mobile-offset" : "--offset", a = s ? cg : lg;
+    const s = i === 1, o = s ? "--mobile-offset" : "--offset", a = s ? lg : ag;
     function l(u) {
       [
         "top",
@@ -6999,11 +6999,11 @@ function gg(t, e) {
     }) : l(a);
   }), n;
 }
-const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
+const gg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   const { id: r, invert: i, position: s = "bottom-right", hotkey: o = [
     "altKey",
     "KeyT"
-  ], expand: a, closeButton: l, className: u, offset: d, mobileOffset: c, theme: h = "light", richColors: f, duration: m, style: y, visibleToasts: b = ag, toastOptions: g, dir: w = js(), gap: v = dg, icons: A, containerAriaLabel: T = "Notifications" } = e, [S, C] = x.useState([]), E = x.useMemo(() => r ? S.filter((B) => B.toasterId === r) : S.filter((B) => !B.toasterId), [
+  ], expand: a, closeButton: l, className: u, offset: d, mobileOffset: c, theme: h = "light", richColors: f, duration: m, style: y, visibleToasts: b = sg, toastOptions: g, dir: w = js(), gap: v = ug, icons: A, containerAriaLabel: T = "Notifications" } = e, [S, C] = x.useState([]), E = x.useMemo(() => r ? S.filter((B) => B.toasterId === r) : S.filter((B) => !B.toasterId), [
     S,
     r
   ]), M = x.useMemo(() => Array.from(new Set([
@@ -7118,10 +7118,10 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
       "data-x-position": $t,
       style: {
         "--front-toast-height": `${((Y = _[0]) == null ? void 0 : Y.height) || 0}px`,
-        "--width": `${ug}px`,
+        "--width": `${cg}px`,
         "--gap": `${v}px`,
         ...y,
-        ...gg(d, c)
+        ...pg(d, c)
       },
       onBlur: (H) => {
         nt.current && !H.currentTarget.contains(H.relatedTarget) && (nt.current = !1, j.current && (j.current.focus({
@@ -7143,7 +7143,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
       onPointerUp: () => et(!1)
     }, E.filter((H) => !H.position && G === 0 || H.position === B).map((H, yt) => {
       var qt, _t;
-      return /* @__PURE__ */ x.createElement(pg, {
+      return /* @__PURE__ */ x.createElement(mg, {
         key: H.id,
         icons: A,
         index: yt,
@@ -7174,8 +7174,8 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
       });
     })) : null;
   }));
-}), Qy = () => /* @__PURE__ */ p(
-  yg,
+}), tv = ({ spinnerColor: t = "orange", ...e }) => /* @__PURE__ */ p(
+  gg,
   {
     position: "bottom-center",
     theme: "light",
@@ -7188,10 +7188,11 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
       className: "my-toast"
     },
     icons: {
-      loading: /* @__PURE__ */ p(jp, { color: "orange" })
-    }
+      loading: /* @__PURE__ */ p(jp, { color: t })
+    },
+    ...e
   }
-), tv = sg, vg = {
+), yg = {
   elevated: P`
         background-color: var(--color-main-white);
         box-shadow: var(--shadow-black-card);
@@ -7222,7 +7223,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
             border: none;
         }
     `
-}, bg = {
+}, vg = {
   sm: P`
         padding: 0.75rem;
         gap: 0.5rem;
@@ -7235,7 +7236,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
         padding: 1.25rem;
         gap: 0.5rem;
     `
-}, xg = P`
+}, bg = P`
     transition:
         box-shadow 0.3s ease-out,
         background-color 0.3s ease-out,
@@ -7255,7 +7256,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     &:focus-visible {
         outline-color: var(--color-main-blue-primary);
     }
-`, wg = P`
+`, xg = P`
     opacity: 0.6;
     cursor: not-allowed;
     pointer-events: none;
@@ -7264,7 +7265,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
         transform: none;
         box-shadow: inherit;
     }
-`, Sg = k.div`
+`, wg = k.div`
     display: flex;
     flex-direction: column;
     border-radius: var(--border-radius-card);
@@ -7272,10 +7273,10 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     height: 100%;
     outline: 2px solid transparent;
     outline-offset: -1px;
-    ${({ $variant: t }) => vg[t]}
-    ${({ $clickable: t }) => t && xg}
-    ${({ $disabled: t }) => t && wg}
-    ${({ $size: t }) => bg[t]}
+    ${({ $variant: t }) => yg[t]}
+    ${({ $clickable: t }) => t && bg}
+    ${({ $disabled: t }) => t && xg}
+    ${({ $size: t }) => vg[t]}
 `, ev = ({
   variant: t = "elevated",
   size: e = "md",
@@ -7288,7 +7289,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
     n || r && r(a);
   };
   return /* @__PURE__ */ p(
-    Sg,
+    wg,
     {
       $variant: t,
       $size: e,
@@ -7304,7 +7305,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
       children: i
     }
   );
-}, Tg = k.div`
+}, Sg = k.div`
     display: flex;
     align-items: center;
     align-self: stretch;
@@ -7312,14 +7313,14 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
 `, nv = ({
   children: t,
   ...e
-}) => /* @__PURE__ */ p(Tg, { ...e, children: t }), Cg = k.div`
+}) => /* @__PURE__ */ p(Sg, { ...e, children: t }), Tg = k.div`
     flex: 1;
     display: flex;
     flex-direction: column;
 `, rv = ({
   children: t,
   ...e
-}) => /* @__PURE__ */ p(Cg, { ...e, children: t }), kg = k.div`
+}) => /* @__PURE__ */ p(Tg, { ...e, children: t }), Cg = k.div`
     display: flex;
     align-items: center;
     align-self: stretch;
@@ -7327,7 +7328,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
 `, iv = ({
   children: t,
   ...e
-}) => /* @__PURE__ */ p(kg, { ...e, children: t }), Pg = {
+}) => /* @__PURE__ */ p(Cg, { ...e, children: t }), kg = {
   sm: P`
         ${z[12]}
     `,
@@ -7337,9 +7338,9 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   lg: P`
         ${z[18]}
     `
-}, Ag = k.div`
+}, Pg = k.div`
     color: var(--color-main-warning-state);
-    ${({ $size: t }) => Pg[t]}
+    ${({ $size: t }) => kg[t]}
     font-weight: 400;
     margin-top: 0.25rem;
     display: flex;
@@ -7350,7 +7351,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   className: e,
   size: n = "md",
   ...r
-}) => /* @__PURE__ */ p(Ag, { className: e, $size: n, ...r, children: t }), Eg = {
+}) => /* @__PURE__ */ p(Pg, { className: e, $size: n, ...r, children: t }), Ag = {
   sm: P`
         ${z[16]}
     `,
@@ -7360,12 +7361,12 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   lg: P`
         ${z[30]}
     `
-}, Dg = k.label`
+}, Eg = k.label`
     color: var(--color-main-blue-primary);
-    ${({ $size: t }) => Eg[t]}
-    ${({ $disabled: t }) => t && $g}
+    ${({ $size: t }) => Ag[t]}
+    ${({ $disabled: t }) => t && Dg}
     cursor: ${({ $disabled: t, $htmlFor: e }) => t || !e ? "default" : "pointer"};
-`, $g = P`
+`, Dg = P`
     cursor: not-allowed;
     opacity: 0.6;
 `, Hi = ({
@@ -7377,7 +7378,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   size: s = "md",
   ...o
 }) => /* @__PURE__ */ R(
-  Dg,
+  Eg,
   {
     className: n,
     htmlFor: e,
@@ -7390,7 +7391,7 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
       r && /* @__PURE__ */ p("span", { style: { color: "var(--color-main-warning-state)" }, children: "*" })
     ]
   }
-), Mg = [
+), $g = [
   "text",
   "email",
   "password",
@@ -7406,10 +7407,10 @@ const yg = /* @__PURE__ */ x.forwardRef(function(e, n) {
   "checkbox",
   "radio",
   "pin"
-], ov = (t) => t.map((e) => ({
+], Mg = (t) => $g.includes(t), ov = (t) => t.map((e) => ({
   name: e.name || "",
   label: e.label || "",
-  type: Mg.includes(e.type) ? e.type : "text",
+  type: e.type && Mg(e.type) ? e.type : "text",
   placeholder: e.placeholder,
   required: e.required || !1,
   disabled: e.disabled || !1,
@@ -10412,7 +10413,7 @@ const zy = k.div`
   /* @__PURE__ */ p(_y, { className: u, children: t })
 ] }), hv = (t) => /* @__PURE__ */ p(Y0, { children: /* @__PURE__ */ p(Hy, { ...t }) });
 export {
-  Mg as ALLOWED_INPUT_TYPES,
+  $g as ALLOWED_INPUT_TYPES,
   nc as BaseInput,
   Bs as Button,
   jp as ButtonSpinner,
@@ -10457,7 +10458,7 @@ export {
   dv as TermsAndConditions,
   ai as Text,
   oc as TextAreaInput,
-  Qy as ToastProvider,
+  tv as ToastProvider,
   yc as baseContentTableStyles,
   Ue as baseFieldStyles,
   Ui as baseInputStyles,
@@ -10475,6 +10476,7 @@ export {
   Us as hasPermission,
   Sa as headingBoldStyles,
   Yu as headingRegularStyles,
+  Mg as isAllowedInputType,
   ov as normalizeFieldTypes,
   sv as normalizeSelectOptions,
   tr as sizeStyles,
@@ -10482,6 +10484,6 @@ export {
   vc as tableIconContainerStyles,
   gy as tableResponsiveMixin,
   my as tableVariants,
-  tv as toast,
+  Qy as toast,
   cv as validateCode
 };