@ztwoint/z-ui 0.1.110 → 0.1.112

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

@@ -1,4 +1,5 @@
-declare function Z2RadioCard({ primaryText, supportText, value, id, disabled, className, itemClassName, }: {
+import * as React from 'react';
+interface Z2RadioCardProps {
     primaryText: string;
     supportText: string;
     value: string;
@@ -6,5 +7,7 @@ declare function Z2RadioCard({ primaryText, supportText, value, id, disabled, cl
     disabled?: boolean;
     className?: string;
     itemClassName?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export default Z2RadioCard;
+    endIcon?: React.ReactNode;
+}
+declare function Z2RadioCard({ primaryText, supportText, value, id, disabled, className, itemClassName, endIcon, }: Z2RadioCardProps): import("react/jsx-runtime").JSX.Element;
+export { Z2RadioCard, Z2RadioCardProps };

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

@@ -0,0 +1,68 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import * as h from "react";
+import { cn as s } from "../../lib/utils.js";
+import { Z2RadioGroupItem as b, Z2RadioGroupIndicator as p } from "../radio/z2-radio.js";
+import { CheckIcon as k } from "lucide-react";
+import { Z2TextPreset as x } from "../text-preset/text-preset.js";
+function v({ primaryText: t, supportText: o }) {
+  return /* @__PURE__ */ e(
+    x,
+    {
+      type: "L",
+      multiline: !0,
+      primaryFirst: !0,
+      primaryText: t,
+      supportText: o,
+      className: "flex-1 min-w-0 min-h-0"
+    }
+  );
+}
+function j({
+  primaryText: t,
+  supportText: o,
+  value: n,
+  id: c,
+  disabled: i,
+  className: l,
+  itemClassName: d,
+  endIcon: a
+}) {
+  const r = h.useRef(null);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      onClick: (f) => {
+        if (i) return;
+        const u = f.target;
+        r.current && !r.current.contains(u) && r.current.click();
+      },
+      className: s(
+        "group relative flex items-start justify-start cursor-pointer p-3.5 gap-3 border border-stroke-solid-light rounded-xl transition-colors overflow-hidden",
+        "hover:border-stroke-solid-hover",
+        // Left accent when checked (pseudo element)
+        'before:content-[""] before:absolute before:inset-y-0 before:left-0 before:w-1 before:rounded-l-xl before:bg-stroke-solid-active before:hidden has-[&[data-state=checked]]:before:block',
+        // When the nested radio is checked, style the card
+        "has-[&[data-state=checked]]:border-stroke-solid-active has-[&[data-state=checked]]:bg-surface-accent-default/10",
+        l
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          b,
+          {
+            ref: r,
+            value: n,
+            id: c,
+            disabled: i,
+            className: s(d),
+            children: /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(k, { className: "size-2.5 text-surface-neutral-default" }) })
+          }
+        ),
+        /* @__PURE__ */ e(v, { primaryText: t, supportText: o }),
+        a ? /* @__PURE__ */ e("div", { className: "ml-auto flex-shrink-0 pointer-events-none", children: a }) : null
+      ]
+    }
+  );
+}
+export {
+  j as Z2RadioCard
+};

package/dist/index.js

@@ -110,10 +110,11 @@ import { Z2Table as Za, Z2TableBase as ca, Z2TableBody as sa, Z2TableBodyRow as
 import { Z2TableContainer as Aa, Z2TableProvider as ya, Z2TableRoot as ka, useZ2Table as Ha } from "./components/dynamic-table/z2-table-context.js";
 import { Z2TablePagination as Na } from "./components/dynamic-table/z2-table-pagination.js";
 import { Z2TableColumnHeader as Ga } from "./components/dynamic-table/z2-column-header.js";
-import { cn as _a } from "./lib/utils.js";
+import { Z2RadioCard as _a } from "./components/radio-card/radio-card.js";
 import { useTheme as Ua } from "./lib/theme.hook.js";
-import { Z2PopoverTrigger as Xa } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
-import { Z2PopoverContent as Ja } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
+import { cn as Xa } from "./lib/utils.js";
+import { Z2PopoverTrigger as Ja } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
+import { Z2PopoverContent as Ya } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
 export {
   p as Alert,
   m as AlertCirclesIcon,
@@ -252,8 +253,9 @@ export {
   Do as Z2DropdownSubTrigger,
   Gt as Z2Icon,
   y as Z2Popover,
-  Ja as Z2PopoverContent,
-  Xa as Z2PopoverTrigger,
+  Ya as Z2PopoverContent,
+  Ja as Z2PopoverTrigger,
+  _a as Z2RadioCard,
   Gr as Z2RadioGroup,
   Wr as Z2RadioGroupIndicator,
   _r as Z2RadioGroupItem,
@@ -309,7 +311,7 @@ export {
   cr as Z2Tooltip,
   Sr as badgeVariants,
   i as buttonVariants,
-  _a as cn,
+  Xa as cn,
   Ce as extractCellValue,
   Le as useTableContext,
   Ua as useTheme,

package/dist/types/components/radio-card/radio-card.d.ts

@@ -1,4 +1,5 @@
-declare function Z2RadioCard({ primaryText, supportText, value, id, disabled, className, itemClassName, }: {
+import * as React from 'react';
+interface Z2RadioCardProps {
     primaryText: string;
     supportText: string;
     value: string;
@@ -6,5 +7,7 @@ declare function Z2RadioCard({ primaryText, supportText, value, id, disabled, cl
     disabled?: boolean;
     className?: string;
     itemClassName?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export default Z2RadioCard;
+    endIcon?: React.ReactNode;
+}
+declare function Z2RadioCard({ primaryText, supportText, value, id, disabled, className, itemClassName, endIcon, }: Z2RadioCardProps): import("react/jsx-runtime").JSX.Element;
+export { Z2RadioCard, Z2RadioCardProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.110",
+  "version": "0.1.112",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",