@klu_dev/ui-klu-green 1.2.28 → 1.2.29

package/dist/index.css

@@ -136,8 +136,8 @@
     --uiklu-orange-300: 36 95% 66%;
     --uiklu-accent: 45 100% 50%;
     --uiklu-accent-foreground: 0 0% 0%;
-    --uiklu-muted: 210 40% 96%;
-    --uiklu-muted-foreground: 215 20% 40%;
+    --uiklu-muted: 240 5% 96%;
+    --uiklu-muted-foreground: 240 4% 46%;
     --uiklu-destructive: 0 72% 51%;
     --uiklu-destructive-foreground: 0 0% 100%;
     --uiklu-border: 214.3 31.8% 91.4%;
@@ -518,6 +518,10 @@ button,
 .uiklu-hidden{
     display: none;
 
+}
+.uiklu-aspect-square{
+    aspect-ratio: 1 / 1;
+
 }
 .uiklu-h-10{
     height: 2.5rem;
@@ -558,6 +562,10 @@ button,
 .uiklu-h-8{
     height: 2rem;
 
+}
+.uiklu-h-\[100\%\]{
+    height: 100%;
+
 }
 .uiklu-h-\[100px\]{
     height: 100px;
@@ -594,6 +602,10 @@ button,
 .uiklu-h-\[30px\]{
     height: 30px;
 
+}
+.uiklu-h-\[32px\]{
+    height: 32px;
+
 }
 .uiklu-h-\[34px\]{
     height: 34px;
@@ -634,6 +646,10 @@ button,
 .uiklu-h-\[60px\]{
     height: 60px;
 
+}
+.uiklu-h-\[62\%\]{
+    height: 62%;
+
 }
 .uiklu-h-\[6px\]{
     height: 6px;
@@ -746,6 +762,10 @@ button,
 .uiklu-w-9{
     width: 2.25rem;
 
+}
+.uiklu-w-\[100\%\]{
+    width: 100%;
+
 }
 .uiklu-w-\[100px\]{
     width: 100px;
@@ -814,6 +834,10 @@ button,
 .uiklu-w-\[317px\]{
     width: 317px;
 
+}
+.uiklu-w-\[32px\]{
+    width: 32px;
+
 }
 .uiklu-w-\[350px\]{
     width: 350px;
@@ -862,6 +886,10 @@ button,
 .uiklu-w-\[600px\]{
     width: 600px;
 
+}
+.uiklu-w-\[62\%\]{
+    width: 62%;
+
 }
 .uiklu-w-\[70px\]{
     width: 70px;
@@ -1688,6 +1716,11 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-muted{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-muted) / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-orange500{
     --tw-bg-opacity: 1;
@@ -1825,6 +1858,10 @@ button,
 .uiklu-bg-origin-border{
     background-origin: border-box;
 
+}
+.uiklu-fill-mutedForeground{
+    fill: hsl(var(--uiklu-muted-foreground) / 1);
+
 }
 .uiklu-object-contain{
     -o-object-fit: contain;
@@ -2826,6 +2863,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.hover\:uiklu-bg-muted:hover{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-muted) / var(--tw-bg-opacity, 1));
+
+}
+
 .hover\:uiklu-bg-orange500\/90:hover{
     background-color: hsl(var(--uiklu-orange-500) / 0.9);
 

package/dist/index.d.ts

@@ -163,6 +163,7 @@ declare const Icons: {
     ARROW_DOWN: react_jsx_runtime.JSX.Element;
     KLU: react_jsx_runtime.JSX.Element;
     KLUWHITE: react_jsx_runtime.JSX.Element;
+    KLUDARK: react_jsx_runtime.JSX.Element;
     DESIGNEDFREEDOM: react_jsx_runtime.JSX.Element;
     GRAPHIC_TOP: react_jsx_runtime.JSX.Element;
     HOME: react_jsx_runtime.JSX.Element;
@@ -406,4 +407,14 @@ interface SecureModalProps {
 }
 declare const SecureModal: ({ open, onOpenChange, title, icon, message, mainActionButtonText, onMainAction, }: SecureModalProps) => react_jsx_runtime.JSX.Element;
 
-export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, CorporateCard, DetailCard, type DetailCardItem, type DetailCardProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PhoneField, type PhoneFieldProps, PlasticCard, PromoBanner, SearchSelect, SearchSelectField, type SearchSelectFieldProps, SecureModal, Select, SelectContent, SelectField, type SelectFieldProps, SelectGroup, SelectItem, SelectValue, SidebarTabs, StatusCard, type StatusCardProps, type StatusCardSummaryItem, Switch, TextField, type TextFieldProps, ToastAction, Toaster, Typography, useToast };
+type BankAvatarSize = 'sm' | 'md' | 'lg' | 'responsive';
+interface BankAvatarProps {
+    bankName: string;
+    /**
+     * @default 'responsive'
+     */
+    size?: BankAvatarSize;
+}
+declare const BankAvatar: React.FC<BankAvatarProps>;
+
+export { BackButton, BalanceInfo, BankAvatar, type BankAvatarProps, Button, Checkbox, type CheckboxProps, CorporateCard, DetailCard, type DetailCardItem, type DetailCardProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PhoneField, type PhoneFieldProps, PlasticCard, PromoBanner, SearchSelect, SearchSelectField, type SearchSelectFieldProps, SecureModal, Select, SelectContent, SelectField, type SelectFieldProps, SelectGroup, SelectItem, SelectValue, SidebarTabs, StatusCard, type StatusCardProps, type StatusCardSummaryItem, Switch, TextField, type TextFieldProps, ToastAction, Toaster, Typography, useToast };

package/dist/index.js

@@ -166,6 +166,18 @@ var KluWhite = ({ className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://w
   /* @__PURE__ */ jsx("path", { d: "M10.1804 11.6049L6.01451 5.60153C7.70118 4.00699 9.19091 2.1234 10.1804 0H7.86794C6.52274 2.35369 4.51843 4.46915 2.2346 5.95093V0H0V13.2375H2.23619V8.35544C2.96358 7.94886 3.66398 7.49623 4.32943 7.00231L8.53816 13.2391H11.3127L10.1788 11.6065L10.1804 11.6049Z", fill: "white" }),
   /* @__PURE__ */ jsx("path", { d: "M27.5089 13.2204C28.3325 13.2204 29.0002 12.5527 29.0002 11.7291C29.0002 10.9055 28.3325 10.2378 27.5089 10.2378C26.6853 10.2378 26.0176 10.9055 26.0176 11.7291C26.0176 12.5527 26.6853 13.2204 27.5089 13.2204Z", fill: "#FDA400" })
 ] });
+var KluDark = ({ className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M15.4494 6.22902C15.4494 7.1874 14.7352 7.88838 13.8261 7.88838C12.9937 7.88838 12.2029 7.31335 12.2029 6.31335V2.43164H10.8064V6.46012C10.8064 7.47327 11.3716 8.35498 12.2029 8.80733C12.5797 9.01215 13.0003 9.12935 13.4713 9.12935C14.1405 9.12935 14.962 8.79309 15.4494 8.25969V9.12935H16.8459V2.43164H15.4494V6.22792V6.22902Z", fill: "#0B3C36" }),
+  /* @__PURE__ */ jsx("path", { d: "M8.21997 9.12925H9.61648V0H8.21997V9.12925Z", fill: "#0B3C36" }),
+  /* @__PURE__ */ jsx("path", { d: "M7.02089 8.00329L4.14791 3.86309C5.31112 2.76342 6.33851 1.4644 7.02089 0H5.42613C4.4984 1.62322 3.11613 3.08215 1.54109 4.10406V0H0V9.12925H1.54219V5.76233C2.04383 5.48193 2.52686 5.16978 2.98579 4.82914L5.88834 9.13035H7.80184L7.01979 8.00439L7.02089 8.00329Z", fill: "#0B3C36" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M18.9716 9.1175C19.5396 9.1175 20.0001 8.65704 20.0001 8.08903C20.0001 7.52101 19.5396 7.06055 18.9716 7.06055C18.4036 7.06055 17.9431 7.52101 17.9431 8.08903C17.9431 8.65704 18.4036 9.1175 18.9716 9.1175Z",
+      fill: "#FDA400"
+    }
+  )
+] });
 var MasterCard = ({ className }) => /* @__PURE__ */ jsxs(
   "svg",
   {
@@ -1106,6 +1118,7 @@ var Icons = {
   ARROW_DOWN: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
   KLU: /* @__PURE__ */ jsx(KluIcon, {}),
   KLUWHITE: /* @__PURE__ */ jsx(KluWhite, {}),
+  KLUDARK: /* @__PURE__ */ jsx(KluDark, {}),
   DESIGNEDFREEDOM: /* @__PURE__ */ jsx(DesignedFreedom, {}),
   GRAPHIC_TOP: /* @__PURE__ */ jsx(GraphicTop, {}),
   HOME: /* @__PURE__ */ jsx(HomeIcon, {}),
@@ -1512,7 +1525,7 @@ var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-// src/components/ui/typography/typography.tsx
+// src/components/ui/stories/Foundations/typography/typography.tsx
 import * as React5 from "react";
 import { cva as cva3 } from "class-variance-authority";
 import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -4036,9 +4049,71 @@ var SecureModal = ({
     ] })
   ] });
 };
+
+// src/components/ui/bankAvatar/bankAvatar.tsx
+import * as React20 from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var sizeMap2 = {
+  sm: {
+    container: "uiklu-w-[24px] uiklu-h-[24px]",
+    logoClass: "uiklu-w-[14px] uiklu-h-[14px]"
+  },
+  md: {
+    container: "uiklu-w-[32px] uiklu-h-[32px]",
+    logoClass: "uiklu-w-[20px] uiklu-h-[20px]"
+  },
+  lg: {
+    container: "uiklu-w-[40px] uiklu-h-[40px]",
+    logoClass: "uiklu-w-[26px] uiklu-h-[26px]"
+  },
+  responsive: {
+    container: "uiklu-w-full uiklu-h-full uiklu-aspect-square",
+    logoClass: "uiklu-w-[62%] uiklu-h-[62%]"
+  }
+};
+var BankAvatar = ({
+  bankName,
+  size = "responsive"
+}) => {
+  const currentSize = sizeMap2[size];
+  const cleanName = bankName.trim().toUpperCase();
+  const isKlu = cleanName === "KLU";
+  const getInitials = (name) => {
+    if (!name) return "";
+    return name.replace(/\s+/g, "").substring(0, 2).toUpperCase();
+  };
+  return /* @__PURE__ */ jsx34("div", { className: `uiklu-flex uiklu-items-center uiklu-justify-center uiklu-rounded-full 
+        uiklu-bg-appearance-muted uiklu-bg-muted uiklu-leading-none 
+        uiklu-select-none uiklu-overflow-hidden ${currentSize.container}`, children: isKlu ? React20.cloneElement(Icons.KLUDARK, {
+    className: `uiklu-block uiklu-object-contain ${Icons.KLU.props.className || ""} ${currentSize.logoClass}`.trim()
+  }) : /* @__PURE__ */ jsx34(
+    "svg",
+    {
+      viewBox: "0 0 100 100",
+      className: "uiklu-w-[100%] uiklu-h-[100%] uiklu-block",
+      children: /* @__PURE__ */ jsx34(
+        "text",
+        {
+          x: "50%",
+          y: "52%",
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          fontSize: "45",
+          fontWeight: "400",
+          fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+          className: "uiklu-fill-mutedForeground",
+          fill: "currentColor",
+          style: { color: "var(--muted-foreground, #71717A)" },
+          children: getInitials(bankName)
+        }
+      )
+    }
+  ) });
+};
 export {
   BackButton,
   BalanceInfo,
+  BankAvatar,
   Button,
   Checkbox,
   CorporateCard,