tawuniya 0.7.0 → 0.7.2

package/dist/components/compound/card-button.d.ts

@@ -1,15 +1,16 @@
-import { HTMLAttributeAnchorTarget, ReactNode } from 'react';
+import { HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from 'react';
 type FeatureItem = {
     key: string;
     text: string;
 };
 interface CardButtonProps {
     title: string;
-    icon: ReactNode;
+    icon: ReactNode | string;
     active?: boolean;
     features?: FeatureItem[];
     subText?: ReactNode;
-    href: string;
+    href?: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
     target?: HTMLAttributeAnchorTarget | undefined;
     badgeText?: string;
     classNames?: {
@@ -29,5 +30,5 @@ interface CardButtonProps {
         };
     };
 }
-declare const CardButton: ({ title, icon, active, features, subText, href, target, badgeText, classNames, }: CardButtonProps) => import("react").JSX.Element;
+declare const CardButton: ({ title, icon, active, features, subText, href, onClick, target, badgeText, classNames, }: CardButtonProps) => import("react").JSX.Element;
 export default CardButton;

package/dist/components/compound/card-button.js

@@ -1,131 +1,125 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as c, Fragment as N, jsx as r } from "react/jsx-runtime";
+import { isValidElement as k } from "react";
 import { cn as o } from "../../lib/utils.js";
-import y from "../icons/index.js";
-import v from "../ui/icon-text.js";
-import x from "../ui/typography.js";
-import b from "../ui/badge.js";
-const C = ({
-  title: p,
-  icon: s,
-  active: i = !1,
-  features: t = [],
-  subText: a,
-  href: d,
-  target: c = "_blank",
-  badgeText: n,
+import m from "../icons/index.js";
+import z from "../ui/icon-text.js";
+import C from "../ui/typography.js";
+import j from "../ui/badge.js";
+const R = ({
+  title: f,
+  icon: i,
+  active: t = !1,
+  features: a = [],
+  subText: n,
+  href: s,
+  onClick: u,
+  target: g = "_blank",
+  badgeText: l,
   classNames: e
 }) => {
-  const f = t.length > 0, m = i ? "[&_svg>path]:fill-primary [&_svg>path]:stroke-primary" : "[&_svg>path]:fill-foreground [&_svg>path]:stroke-foreground", u = i ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0 group-hover:grid-rows-[1fr] group-hover:opacity-100";
-  return /* @__PURE__ */ l(
-    "a",
-    {
-      href: d,
-      target: c,
-      className: o(
-        "tawn group relative flex max-w-48 flex-col justify-center gap-y-2 rounded-2xl border-2 bg-muted p-4 cursor-pointer",
-        i ? "border-primary" : "border-transparent",
-        e?.mainWrapper
-      ),
-      children: [
-        n && /* @__PURE__ */ r(
-          "div",
+  const h = a.length > 0, x = !!s, y = k(i), v = t ? "[&_svg>path]:fill-primary [&_svg>path]:stroke-primary" : "[&_svg>path]:fill-foreground [&_svg>path]:stroke-foreground", b = t ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0 group-hover:grid-rows-[1fr] group-hover:opacity-100", p = /* @__PURE__ */ c(N, { children: [
+    l && /* @__PURE__ */ r(
+      "div",
+      {
+        className: o(
+          "absolute inset-x-0 -top-4 flex justify-center",
+          e?.badge?.wrapper
+        ),
+        children: /* @__PURE__ */ r(
+          j,
           {
+            variant: "default",
+            size: "sm",
             className: o(
-              "absolute inset-x-0 -top-4 flex justify-center",
-              e?.badge?.wrapper
+              "bg-primary text-primary-foreground",
+              e?.badge?.badgeItem
             ),
-            children: /* @__PURE__ */ r(
-              b,
-              {
-                variant: "default",
-                size: "sm",
-                className: o(
-                  "bg-primary text-primary-foreground",
-                  e?.badge?.badgeItem
-                ),
-                children: n
-              }
-            )
+            children: l
           }
+        )
+      }
+    ),
+    t && /* @__PURE__ */ r("div", { className: "absolute top-4 inset-e-4 size-2 rounded-full bg-primary" }),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: o(
+          "flex flex-col items-center gap-y-2",
+          e?.contentWrapper
         ),
-        i && /* @__PURE__ */ r("div", { className: "absolute top-4 inset-e-4 size-2 rounded-full bg-primary" }),
-        /* @__PURE__ */ l(
-          "div",
-          {
-            className: o(
-              "flex flex-col items-center gap-y-2",
-              e?.contentWrapper
-            ),
-            children: [
-              /* @__PURE__ */ r(
-                "span",
-                {
-                  className: o(
-                    "flex items-center justify-center",
-                    "[&_svg]:size-7 [&_svg>*]:duration-300",
-                    "group-hover:[&_svg>path]:fill-primary",
-                    "group-hover:[&_svg>path]:stroke-primary",
-                    m,
-                    e?.iconWrapper
-                  ),
-                  children: s
-                }
+        children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              className: o(
+                "flex items-center justify-center",
+                "[&_svg]:size-7 [&_svg>*]:duration-300",
+                "group-hover:[&_svg>path]:fill-primary",
+                "group-hover:[&_svg>path]:stroke-primary",
+                v,
+                e?.iconWrapper
               ),
-              /* @__PURE__ */ r(
-                x,
-                {
-                  as: "h3",
-                  size: "sm",
-                  weight: "bold",
-                  color: i ? "primary" : "default",
-                  className: o(
-                    "capitalize duration-300 group-hover:text-primary",
-                    e?.title
-                  ),
-                  children: p
-                }
+              children: y ? i : /* @__PURE__ */ r(m, { name: i })
+            }
+          ),
+          /* @__PURE__ */ r(
+            C,
+            {
+              as: "h3",
+              size: "sm",
+              weight: "bold",
+              color: t ? "primary" : "default",
+              className: o(
+                "capitalize duration-300 group-hover:text-primary",
+                e?.title
               ),
-              !i && a && /* @__PURE__ */ r("div", { className: "grid grid-rows-[1fr] transition-all duration-300 ease-in-out group-hover:grid-rows-[0fr]", children: /* @__PURE__ */ r("div", { className: "overflow-hidden", children: /* @__PURE__ */ r("div", { className: "transition-opacity duration-300 group-hover:opacity-0", children: a }) }) }),
-              f && /* @__PURE__ */ r(
-                "div",
+              children: f
+            }
+          ),
+          !t && n && /* @__PURE__ */ r("div", { className: "grid grid-rows-[1fr] transition-all duration-300 ease-in-out group-hover:grid-rows-[0fr]", children: /* @__PURE__ */ r("div", { className: "overflow-hidden", children: /* @__PURE__ */ r("div", { className: "transition-opacity duration-300 group-hover:opacity-0", children: n }) }) }),
+          h && /* @__PURE__ */ r(
+            "div",
+            {
+              className: o(
+                "grid transition-all duration-300 ease-in-out",
+                b,
+                e?.featuresWrapper
+              ),
+              children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-y-1 overflow-hidden", children: a.map(({ key: w, text: _ }) => /* @__PURE__ */ r(
+                z,
                 {
-                  className: o(
-                    "grid transition-all duration-300 ease-in-out",
-                    u,
-                    e?.featuresWrapper
-                  ),
-                  children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-y-1 overflow-hidden", children: t.map(({ key: g, text: h }) => /* @__PURE__ */ r(
-                    v,
+                  text: _,
+                  iconSize: "xs",
+                  icon: /* @__PURE__ */ r(
+                    m,
                     {
-                      text: h,
-                      iconSize: "xs",
-                      icon: /* @__PURE__ */ r(
-                        y,
-                        {
-                          name: "checkbox-circle-fill",
-                          className: "fill-primary"
-                        }
-                      ),
-                      classNames: {
-                        container: e?.feature?.wrapper,
-                        icon: e?.feature?.icon,
-                        text: o(
-                          "font-medium text-muted-foreground",
-                          e?.feature?.text
-                        )
-                      }
-                    },
-                    g
-                  )) })
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
+                      name: "checkbox-circle-fill",
+                      className: "fill-primary"
+                    }
+                  ),
+                  classNames: {
+                    container: e?.feature?.wrapper,
+                    icon: e?.feature?.icon,
+                    text: o(
+                      "font-medium text-muted-foreground",
+                      e?.feature?.text
+                    )
+                  }
+                },
+                w
+              )) })
+            }
+          )
+        ]
+      }
+    )
+  ] }), d = o(
+    "tawn tawn-card-button m-w-[120px]! max-w-[186px]! h-[188px] max-h-[188px] group relative flex max-w-48 flex-col justify-center gap-y-2 rounded-2xl border-2 bg-muted p-4 cursor-pointer",
+    t ? "border-primary" : "border-transparent",
+    e?.mainWrapper
   );
+  return x ? /* @__PURE__ */ r("a", { href: s, target: g, className: d, children: p }) : /* @__PURE__ */ r("button", { type: "button", onClick: u, className: d, children: p });
 };
 export {
-  C as default
+  R as default
 };

package/dist/components/compound/policy-card.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from '../../lib/variants';
+type ActionVariant = VariantProps<typeof buttonVariants>["variant"];
+interface PolicyCardClassNames {
+    root?: string;
+    wrapper?: string;
+    contentWrapper?: string;
+    title?: string;
+    description?: string;
+    imageWrapper?: string;
+    badgeWrapper?: string;
+    badge?: string;
+    footerWrapper?: string;
+    actionWrapper?: string;
+    icon?: string;
+}
+interface PolicyCardProps {
+    title: ReactNode;
+    icon?: ReactNode | string;
+    description?: ReactNode;
+    image?: ReactNode;
+    badgeText?: ReactNode;
+    hideAction?: boolean;
+    actionVariant?: ActionVariant;
+    actionContent?: ReactNode;
+    actionHref?: string;
+    actionTarget?: HTMLAttributeAnchorTarget;
+    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    classNames?: PolicyCardClassNames;
+    children?: ReactNode;
+}
+declare const PolicyCard: ({ title, description, icon, image, badgeText, hideAction, actionContent, actionHref, actionTarget, onClick, actionVariant, classNames, children, }: PolicyCardProps) => import("react").JSX.Element;
+export default PolicyCard;

package/dist/components/compound/policy-card.js

@@ -0,0 +1,162 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { isValidElement as W } from "react";
+import { cn as t } from "../../lib/utils.js";
+import "../../lib/variants.js";
+import m from "../ui/typography.js";
+import j from "../ui/badge.js";
+import h from "../ui/button.js";
+import z from "../icons/index.js";
+const H = ({
+  title: y,
+  description: l,
+  icon: a,
+  image: c,
+  badgeText: p,
+  hideAction: g = !1,
+  actionContent: n,
+  actionHref: s,
+  actionTarget: u = "_self",
+  onClick: i,
+  actionVariant: f = "smooth",
+  classNames: e,
+  children: v
+}) => {
+  const o = !!s, x = o ? s : "#", b = o || !i && !o, w = W(a);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: t("tawn tawn-policy-card relative", e?.root),
+      "data-testid": "policy-card",
+      children: [
+        p && /* @__PURE__ */ r(
+          "div",
+          {
+            className: t(
+              "absolute -top-3.5 inset-e-6 z-10",
+              e?.badgeWrapper
+            ),
+            "data-testid": "policy-card-badge-wrapper",
+            children: /* @__PURE__ */ r(
+              j,
+              {
+                className: t(
+                  "bg-primary text-primary-foreground",
+                  e?.badge
+                ),
+                "data-testid": "policy-card-badge",
+                children: p
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            className: t(
+              "flex flex-col gap-2 relative rounded-3xl border-2 border-muted bg-background overflow-hidden",
+              e?.wrapper
+            ),
+            "data-testid": "policy-card-wrapper",
+            children: [
+              /* @__PURE__ */ d(
+                "div",
+                {
+                  className: t(
+                    "flex flex-col gap-y-4 px-6 pt-6",
+                    e?.contentWrapper
+                  ),
+                  "data-testid": "policy-card-content-wrapper",
+                  children: [
+                    a && /* @__PURE__ */ r("div", { "data-testid": "policy-card-icon", children: w ? a : /* @__PURE__ */ r(
+                      z,
+                      {
+                        name: a,
+                        className: t("size-7", e?.icon)
+                      }
+                    ) }),
+                    /* @__PURE__ */ d("div", { className: "flex flex-col gap-y-2", children: [
+                      /* @__PURE__ */ r(
+                        m,
+                        {
+                          as: "h3",
+                          size: "md",
+                          weight: "bold",
+                          className: e?.title,
+                          "data-testid": "policy-card-title",
+                          children: y
+                        }
+                      ),
+                      l && /* @__PURE__ */ r(
+                        m,
+                        {
+                          size: "sm",
+                          color: "muted_foreground",
+                          className: e?.description,
+                          "data-testid": "policy-card-description",
+                          children: l
+                        }
+                      ),
+                      v
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ d(
+                "div",
+                {
+                  className: t(
+                    "w-full flex items-end justify-between pl-6 rtl:pr-6 rtl:pl-0",
+                    e?.footerWrapper
+                  ),
+                  "data-testid": "policy-card-footer",
+                  children: [
+                    !g && /* @__PURE__ */ r(
+                      "div",
+                      {
+                        className: t("pb-6", e?.actionWrapper),
+                        "data-testid": "policy-card-action-wrapper",
+                        children: b ? /* @__PURE__ */ r(h, { variant: f, asChild: !0, children: /* @__PURE__ */ r(
+                          "a",
+                          {
+                            href: x,
+                            target: u,
+                            onClick: i,
+                            "data-testid": "policy-card-action",
+                            children: n
+                          }
+                        ) }) : /* @__PURE__ */ r(
+                          h,
+                          {
+                            type: "button",
+                            variant: f,
+                            onClick: i,
+                            "data-testid": "policy-card-action",
+                            children: n
+                          }
+                        )
+                      }
+                    ),
+                    c && /* @__PURE__ */ r(
+                      "div",
+                      {
+                        className: t(
+                          "flex-1 shrink-0 flex justify-end",
+                          e?.imageWrapper
+                        ),
+                        "data-testid": "policy-card-image-wrapper",
+                        children: c
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  H as default
+};

package/dist/components/compound/stats-card.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+interface StatsCardClassNames {
+    wrapper?: string;
+    title?: string;
+    subTitle?: string;
+    description?: string;
+    icon?: string;
+}
+interface StatsCardPops {
+    icon?: ReactNode | string;
+    title: string;
+    subTitle?: ReactNode;
+    description?: ReactNode;
+    classNames?: StatsCardClassNames;
+}
+declare const StatsCard: ({ icon, title, subTitle, description, classNames, }: StatsCardPops) => import("react").JSX.Element;
+export default StatsCard;

package/dist/components/compound/stats-card.js

@@ -0,0 +1,67 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { isValidElement as n } from "react";
+import { cn as d } from "../../lib/utils.js";
+import s from "../ui/typography.js";
+import m from "../icons/index.js";
+const b = ({
+  icon: e,
+  title: r,
+  subTitle: i,
+  description: o,
+  classNames: t
+}) => {
+  const c = n(e);
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: d(
+        "tawn tawn-stats-card flex flex-col gap-y-1.5 p-4 rounded-xl bg-background",
+        t?.wrapper
+      ),
+      "data-testid": "stats-card",
+      children: [
+        e && /* @__PURE__ */ a("div", { "data-testid": "stats-card-icon", className: "mb-1", children: c ? e : /* @__PURE__ */ a(
+          m,
+          {
+            name: e,
+            className: d("size-6", t?.icon)
+          }
+        ) }),
+        /* @__PURE__ */ a(
+          s,
+          {
+            as: "h3",
+            weight: "bold",
+            className: t?.title,
+            "data-testid": "stats-card-title",
+            children: r
+          }
+        ),
+        /* @__PURE__ */ a(
+          s,
+          {
+            as: "h4",
+            size: "xs",
+            weight: "bold",
+            className: t?.subTitle,
+            "data-testid": "stats-card-subTitle",
+            children: i
+          }
+        ),
+        /* @__PURE__ */ a(
+          s,
+          {
+            size: "xs",
+            color: "muted_foreground",
+            className: t?.description,
+            "data-testid": "stats-card-description",
+            children: o
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  b as default
+};