@ztwoint/z-ui 0.1.137 → 0.1.139

package/README.md

@@ -23,3 +23,30 @@ yarn add @ztwoint/z-ui
 > Note: To use this package on a remote server, you need to set up an SSH key with access to this repository.
 
 This package will be published to npm registry later.
+
+## Setup
+
+### Import Styles
+
+In your application's main entry file (e.g., `main.tsx` or `App.tsx`), import the CSS:
+
+```javascript
+import '@ztwoint/z-ui/css/tailwind.css';
+```
+
+### Fonts (Optional)
+
+The library uses the Inter Variable font. You can either:
+
+**Option 1: Use the bundled fonts**
+```javascript
+import '@ztwoint/z-ui/css/fonts.css';
+```
+
+**Option 2: Use your own font setup**
+- Self-hosted fonts
+- Google Fonts
+- Custom font provider
+- System fonts
+
+See [src/styles/README.md](./src/styles/README.md) for more details.

package/dist/components/kpi-card/index.d.ts

@@ -0,0 +1,2 @@
+export { KpiCard, kpiCardVariants } from './kpi-card';
+export type { KpiCardProps } from './kpi-card';

package/dist/components/kpi-card/kpi-card.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare const kpiCardVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export interface KpiCardProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+    titleText?: string;
+    subtitleText?: string;
+    bottomText?: string;
+    /** Whether the card is in an active/selected state */
+    active?: boolean;
+    /** React node to render in the top-right corner (e.g., action buttons) */
+    topRightActions?: React.ReactNode;
+    /** React node to render in the bottom-right corner (e.g., an icon) */
+    bottomRightIcon?: React.ReactNode;
+}
+declare const KpiCard: React.ForwardRefExoticComponent<KpiCardProps & React.RefAttributes<HTMLButtonElement>>;
+export { KpiCard, kpiCardVariants };

package/dist/components/kpi-card/kpi-card.js

@@ -0,0 +1,63 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import * as m from "react";
+import { cva as p } from "class-variance-authority";
+import { cn as f } from "../../lib/utils.js";
+const x = p(
+  [
+    "flex flex-col gap-2 items-start overflow-clip text-left",
+    "px-3.5 py-3.5 rounded-xl border border-stroke-solid-high",
+    "bg-background-neutral-default w-full",
+    "transition-all",
+    "hover:border-stroke-solid-hover hover:shadow-md",
+    "active:!border-stroke-solid-active",
+    "focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring-default"
+  ],
+  {
+    variants: {
+      active: {
+        true: "!border-stroke-solid-active"
+      }
+    },
+    defaultVariants: {
+      active: !1
+    }
+  }
+), u = m.forwardRef(
+  ({
+    className: t,
+    titleText: i = "Title Text",
+    subtitleText: s,
+    bottomText: o = "100",
+    active: a,
+    topRightActions: l,
+    bottomRightIcon: n,
+    ...d
+  }, c) => /* @__PURE__ */ r(
+    "button",
+    {
+      ref: c,
+      type: "button",
+      className: f(x({ active: a }), t),
+      "aria-pressed": a,
+      ...d,
+      children: [
+        /* @__PURE__ */ r("div", { className: "flex gap-2 items-start w-full", children: [
+          /* @__PURE__ */ r("div", { className: "flex flex-1 flex-col gap-0 items-start min-w-px min-h-px", children: [
+            /* @__PURE__ */ e("p", { className: "leading-normal-medium-sm text-text-body-short w-full whitespace-pre-wrap", children: i }),
+            /* @__PURE__ */ e("p", { className: "leading-normal-regular-xs text-text-neutral-secondary w-full whitespace-pre-wrap", children: s || " " })
+          ] }),
+          l && /* @__PURE__ */ e("div", { className: "flex gap-1 items-center justify-end shrink-0", children: l })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex gap-2 items-center w-full", children: [
+          /* @__PURE__ */ e("div", { className: "flex flex-1 gap-px items-center min-w-px min-h-px", children: /* @__PURE__ */ e("p", { className: "leading-normal-bold-lg text-text-neutral-primary whitespace-nowrap", children: o }) }),
+          n
+        ] })
+      ]
+    }
+  )
+);
+u.displayName = "KpiCard";
+export {
+  u as KpiCard,
+  x as kpiCardVariants
+};

package/dist/components/primitives/table-card/table-card.js

@@ -56,8 +56,9 @@ import "../../z2map/components/map-pin-content.js";
 import "../../z2map/components/map-controls.js";
 import "../../z2map/components/map-zoom-control.js";
 import "../../z2map/components/map-style-control.js";
+import "../../kpi-card/kpi-card.js";
 import "../../table/table.context.js";
-const Gt = ({
+const It = ({
   dataSource: w,
   schema: B,
   loading: b,
@@ -69,8 +70,8 @@ const Gt = ({
   headerClassName: j,
   search: s,
   filter: e,
-  headerLeftContent: h,
-  headerActions: p,
+  headerLeftContent: p,
+  headerActions: h,
   body: o = {
     cell: { hasBorder: !0 },
     className: "",
@@ -94,7 +95,7 @@ const Gt = ({
         typeof u == "string" && /* @__PURE__ */ t("div", { className: "text-text-warning-secondary text-sm", children: u })
       ] })
     ] }) });
-  const N = a && a.totalPage && a.totalPage >= 2, C = l && l.totalPage && l.totalPage >= 2 || !!i || N, v = s || e || h || p, R = typeof (e == null ? void 0 : e.showFilterButton) > "u" ? !0 : e == null ? void 0 : e.showFilterButton;
+  const N = a && a.totalPage && a.totalPage >= 2, C = l && l.totalPage && l.totalPage >= 2 || !!i || N, v = s || e || p || h, R = typeof (e == null ? void 0 : e.showFilterButton) > "u" ? !0 : e == null ? void 0 : e.showFilterButton;
   return /* @__PURE__ */ m("div", { className: d("flex flex-col overflow-hidden relative", H), children: [
     /* @__PURE__ */ m(r, { dataSource: w, schema: B, emptyMessage: k, children: [
       g && v && /* @__PURE__ */ m(
@@ -108,7 +109,7 @@ const Gt = ({
           ),
           children: [
             /* @__PURE__ */ m(r.HeaderContent, { className: "overflow-x-auto p-[1px]", children: [
-              h && h,
+              p && p,
               s && /* @__PURE__ */ t(
                 r.Search,
                 {
@@ -139,7 +140,7 @@ const Gt = ({
                 }
               )
             ] }),
-            p && /* @__PURE__ */ t(r.HeaderContent, { children: p })
+            h && /* @__PURE__ */ t(r.HeaderContent, { children: h })
           ]
         }
       ),
@@ -213,5 +214,5 @@ const Gt = ({
   ] });
 };
 export {
-  Gt as default
+  It as default
 };

package/dist/components/table/components/cell/avatar-cell.js

@@ -56,7 +56,8 @@ import "../../../z2map/components/map-pin-content.js";
 import "../../../z2map/components/map-controls.js";
 import "../../../z2map/components/map-zoom-control.js";
 import "../../../z2map/components/map-style-control.js";
-const ut = ({
+import "../../../kpi-card/kpi-card.js";
+const ht = ({
   avatar: m,
   value: a,
   rightIcon: o,
@@ -94,5 +95,5 @@ const ut = ({
   }
 );
 export {
-  ut as AvatarCell
+  ht as AvatarCell
 };

package/dist/components/table/table-provider.js

@@ -61,6 +61,7 @@ import "../z2map/components/map-pin-content.js";
 import "../z2map/components/map-controls.js";
 import "../z2map/components/map-zoom-control.js";
 import "../z2map/components/map-style-control.js";
+import "../kpi-card/kpi-card.js";
 import { TableHeaderWrapper as T } from "./components/table-header-wrapper.js";
 import { TableHeaderContent as b } from "./components/table-header-content.js";
 import { TableFooter as s } from "./components/table-footer.js";

package/dist/css/config/config-deprecated.css

@@ -15,8 +15,8 @@
 @import './colors/components/tab.css';
 
 @theme {
-  --font-family-sans: 'Inter Variable', sans-serif;
-  --font-family-display: 'Inter Variable', sans-serif;
+  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
+  --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
 }
 
 /* Base styles to ensure Inter is applied globally */

package/dist/css/config/config.css

@@ -1,6 +1,6 @@
 @theme {
-  --font-family-sans: 'Inter Variable', sans-serif;
-  --font-family-display: 'Inter Variable', sans-serif;
+  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
+  --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
 }
 
 /* Base styles to ensure Inter is applied globally */

package/dist/css/fonts.css

@@ -0,0 +1 @@
+@import '@fontsource-variable/inter';