@pibit.ai/cure-design-system 0.3.6 → 0.3.7

package/dist/primitives/badge/badge.js

@@ -1,43 +1,297 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import { cva as d } from "class-variance-authority";
-import { cn as m } from "../../utils/cn.js";
-const g = d(
-  "inline-flex items-center gap-1 rounded-md font-medium",
-  {
-    variants: {
-      variant: {
-        default: "bg-gray-100 text-gray-800",
-        primary: "bg-brand-100 text-brand-800",
-        success: "bg-success-100 text-success-800",
-        warning: "bg-warning-100 text-warning-800",
-        error: "bg-error-100 text-error-800",
-        outline: "border border-gray-300 bg-white text-gray-700"
-      },
-      size: {
-        sm: "px-2 py-0.5 text-xs",
-        md: "px-2.5 py-1 text-sm",
-        lg: "px-3 py-1.5 text-sm"
-      }
+import { jsx as d, jsxs as x, Fragment as b } from "react/jsx-runtime";
+import { X as v } from "@untitledui/icons";
+import { Dot as w } from "../../foundations/dot-icon/index.js";
+import { badgeTypes as t } from "./badge-types.js";
+import { cx as u } from "../../utils/cn.js";
+const y = {
+  clear: {
+    root: "bg-primary text-secondary ring-secondary",
+    addon: "text-gray-500",
+    addonButton: "hover:bg-utility-gray-100 text-utility-gray-400 hover:text-utility-gray-500"
+  },
+  gray: {
+    root: "bg-utility-gray-100 text-utility-gray-700 ring-utility-gray-100",
+    addon: "text-utility-gray-500",
+    addonButton: "hover:bg-utility-gray-100 text-utility-gray-400 hover:text-utility-gray-500"
+  },
+  brand: {
+    root: "bg-utility-brand-50 text-utility-brand-600 ring-utility-brand-50",
+    addon: "text-utility-brand-500",
+    addonButton: "hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500"
+  },
+  error: {
+    root: "bg-utility-error-100 text-utility-error-700 ring-utility-error-100",
+    addon: "text-utility-error-500",
+    addonButton: "hover:bg-utility-error-100 text-utility-error-400 hover:text-utility-error-500"
+  },
+  warning: {
+    root: "bg-utility-warning-100 text-utility-warning-700 ring-utility-warning-100",
+    addon: "text-utility-warning-500",
+    addonButton: "hover:bg-utility-warning-100 text-utility-warning-400 hover:text-utility-warning-500"
+  },
+  success: {
+    root: "bg-utility-success-100 text-utility-success-700 ring-utility-success-100",
+    addon: "text-utility-success-500",
+    addonButton: "hover:bg-utility-success-100 text-utility-success-400 hover:text-utility-success-500"
+  },
+  "gray-blue": {
+    root: "bg-utility-gray-blue-100 text-utility-gray-blue-700 ring-utility-gray-blue-100",
+    addon: "text-utility-gray-blue-500",
+    addonButton: "hover:bg-utility-gray-blue-100 text-utility-gray-blue-400 hover:text-utility-gray-blue-500"
+  },
+  "blue-light": {
+    root: "bg-utility-blue-light-100 text-utility-blue-light-700 ring-utility-blue-light-100",
+    addon: "text-utility-blue-light-500",
+    addonButton: "hover:bg-utility-blue-light-100 text-utility-blue-light-400 hover:text-utility-blue-light-500"
+  },
+  blue: {
+    root: "bg-utility-blue-100 text-utility-blue-700 ring-utility-blue-100",
+    addon: "text-utility-blue-500",
+    addonButton: "hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500"
+  },
+  indigo: {
+    root: "bg-utility-indigo-100 text-utility-indigo-700 ring-utility-indigo-100",
+    addon: "text-utility-indigo-500",
+    addonButton: "hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500"
+  },
+  purple: {
+    root: "bg-utility-purple-100 text-utility-purple-700 ring-utility-purple-100",
+    addon: "text-utility-purple-500",
+    addonButton: "hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500"
+  },
+  pink: {
+    root: "bg-utility-pink-100 text-utility-pink-700 ring-utility-pink-100",
+    addon: "text-utility-pink-500",
+    addonButton: "hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500"
+  },
+  orange: {
+    root: "bg-utility-orange-100 text-utility-orange-700 ring-utility-orange-100",
+    addon: "text-utility-orange-500",
+    addonButton: "hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500"
+  }
+}, B = Object.fromEntries(
+  Object.entries(y).map(([i, s]) => [i, { root: "", addon: s.addon }])
+), c = {
+  [t.pillColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset",
+    styles: y
+  },
+  [t.color]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-sm ring-1 ring-inset",
+    styles: y
+  },
+  [t.modern]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-sm ring-1 ring-inset ring-secondary",
+    styles: y
+  }
+}, h = {
+  [t.pillColor]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset",
+    styles: y
+  },
+  [t.color]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-sm ring-1 ring-inset",
+    styles: y
+  },
+  [t.modern]: {
+    common: "size-max flex items-center whitespace-nowrap rounded-sm ring-1 ring-inset bg-primary text-secondary ring-secondary",
+    styles: B
+  }
+}, j = (i) => {
+  const { type: s = "pill-color", size: m = "xs", color: e = "gray", children: p } = i, o = c[s], l = {
+    xs: "py-0.5 px-2 text-xs font-medium",
+    sm: "py-0.5 px-2 text-sm font-medium",
+    md: "py-1 px-3 text-sm font-medium",
+    lg: "py-1 px-3 text-sm font-medium"
+  }, n = {
+    xs: "py-0.5 px-2 text-xs font-medium",
+    sm: "py-0.5 px-2 text-sm font-medium",
+    md: "py-1 px-3 text-sm font-medium",
+    lg: "py-1 px-3 text-sm font-medium rounded-lg"
+  }, r = {
+    [t.pillColor]: l,
+    [t.color]: n,
+    [t.modern]: n
+  };
+  return /* @__PURE__ */ d("span", { className: u(o.common, r[s][m], o.styles[e].root, i.className), children: p });
+}, T = (i) => {
+  const { size: s = "md", color: m = "gray", type: e = "pill-color", className: p, children: o } = i, l = h[e], n = {
+    xs: "gap-0.5 py-0.5 px-1 text-xs font-medium",
+    sm: "gap-1 py-0.5 pl-1.5 pr-2 text-xs font-medium",
+    md: "gap-1.5 py-0.5 pl-2 pr-2.5 text-sm font-medium",
+    lg: "gap-1.5 py-1 pl-2.5 pr-3 text-sm font-medium"
+  }, r = {
+    xs: "gap-0.5 py-0.5 px-1 text-xs font-medium",
+    sm: "gap-1 py-0.5 px-1.5 text-xs font-medium",
+    md: "gap-1.5 py-0.5 px-2 text-sm font-medium",
+    lg: "gap-1.5 py-1 px-2.5 text-sm font-medium rounded-lg"
+  }, a = {
+    [t.pillColor]: n,
+    [t.color]: r,
+    [t.modern]: r
+  }, g = m;
+  return /* @__PURE__ */ x("span", { className: u(l.common, a[e][s], l.styles[g].root, p), children: [
+    /* @__PURE__ */ d(w, { className: l.styles[g].addon, size: "sm" }),
+    o
+  ] });
+}, W = (i) => {
+  const {
+    size: s = "md",
+    color: m = "gray",
+    type: e = "pill-color",
+    iconLeading: p,
+    iconTrailing: o,
+    children: l,
+    className: n
+  } = i, r = h[e], a = p ? "leading" : "trailing", g = {
+    xs: {
+      trailing: "gap-0.5 py-0.5 px-1 text-xs font-medium",
+      leading: "gap-0.5 py-0.5 px-1 text-xs font-medium"
     },
-    defaultVariants: {
-      variant: "default",
-      size: "md"
+    sm: {
+      trailing: "gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-medium",
+      leading: "gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-medium"
+    },
+    md: {
+      trailing: "gap-1 py-0.5 pl-2.5 pr-2 text-sm font-medium",
+      leading: "gap-1 py-0.5 pr-2.5 pl-2 text-sm font-medium"
+    },
+    lg: {
+      trailing: "gap-1 py-1 pl-3 pr-2.5 text-sm font-medium",
+      leading: "gap-1 py-1 pr-3 pl-2.5 text-sm font-medium"
     }
-  }
-);
-function x({
-  variant: r,
-  size: t,
-  className: a,
-  children: s,
-  icon: e
-}) {
-  return /* @__PURE__ */ n("span", { className: m(g({ variant: r, size: t }), a), children: [
-    e && /* @__PURE__ */ i("span", { className: "inline-flex", children: e }),
-    s
+  }, f = {
+    xs: {
+      trailing: "gap-0.5 py-0.5 px-1 text-xs font-medium",
+      leading: "gap-0.5 py-0.5 px-1 text-xs font-medium"
+    },
+    sm: {
+      trailing: "gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-medium",
+      leading: "gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-medium"
+    },
+    md: {
+      trailing: "gap-1 py-0.5 pl-2 pr-1.5 text-sm font-medium",
+      leading: "gap-1 py-0.5 pr-2 pl-1.5 text-sm font-medium"
+    },
+    lg: {
+      trailing: "gap-1 py-1 pl-2.5 pr-2 text-sm font-medium rounded-lg",
+      leading: "gap-1 py-1 pr-2.5 pl-2 text-sm font-medium rounded-lg"
+    }
+  }, z = {
+    [t.pillColor]: g,
+    [t.color]: f,
+    [t.modern]: f
+  };
+  return /* @__PURE__ */ x("span", { className: u(r.common, z[e][s][a], r.styles[m].root, n), children: [
+    p && /* @__PURE__ */ d(b, { children: p }),
+    l,
+    o && /* @__PURE__ */ d(b, { children: o })
+  ] });
+}, L = (i) => {
+  const { size: s = "md", color: m = "gray", flag: e = "AU", type: p = "pill-color", children: o } = i, l = c[p], n = {
+    xs: "gap-0.5 py-0.5 pl-0.75 pr-2 text-xs font-medium",
+    sm: "gap-1 py-0.5 pl-0.75 pr-2 text-xs font-medium",
+    md: "gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-medium",
+    lg: "gap-1.5 py-1 pl-1.5 pr-3 text-sm font-medium"
+  }, r = {
+    xs: "gap-0.5 py-0.5 pl-1 pr-1.5 text-xs font-medium",
+    sm: "gap-1 py-0.5 pl-1 pr-1.5 text-xs font-medium",
+    md: "gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-medium",
+    lg: "gap-1.5 py-1 pl-2 pr-2.5 text-sm font-medium rounded-lg"
+  }, a = {
+    [t.pillColor]: n,
+    [t.color]: r,
+    [t.modern]: r
+  };
+  return /* @__PURE__ */ x("span", { className: u(l.common, a[p][s], l.styles[m].root), children: [
+    /* @__PURE__ */ d(
+      "img",
+      {
+        src: `https://www.untitledui.com/images/flags/${e}.svg`,
+        className: "size-4 max-w-none rounded-full",
+        alt: `${e} flag`
+      }
+    ),
+    o
   ] });
-}
-x.displayName = "Badge";
+}, O = (i) => {
+  const { size: s = "md", color: m = "gray", type: e = "pill-color", imgSrc: p, children: o } = i, l = c[e], n = {
+    xs: "gap-0.5 py-0.5 pl-0.75 pr-2 text-xs font-medium",
+    sm: "gap-1 py-0.5 pl-0.75 pr-2 text-xs font-medium",
+    md: "gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-medium",
+    lg: "gap-1.5 py-1 pl-1.5 pr-3 text-sm font-medium"
+  }, r = {
+    xs: "gap-0.5 py-0.5 pl-1 pr-1.5 text-xs font-medium",
+    sm: "gap-1 py-0.5 pl-1 pr-1.5 text-xs font-medium",
+    md: "gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-medium",
+    lg: "gap-1.5 py-1 pl-2 pr-2.5 text-sm font-medium rounded-lg"
+  }, a = {
+    [t.pillColor]: n,
+    [t.color]: r,
+    [t.modern]: r
+  };
+  return /* @__PURE__ */ x("span", { className: u(l.common, a[e][s], l.styles[m].root), children: [
+    /* @__PURE__ */ d("img", { src: p, className: "size-4 max-w-none rounded-full", alt: "Badge image" }),
+    o
+  ] });
+}, D = (i) => {
+  const { size: s = "md", color: m = "gray", type: e = "pill-color", icon: p = v, buttonLabel: o, children: l } = i, n = c[e], r = {
+    xs: "gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-medium",
+    sm: "gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-medium",
+    md: "gap-0.5 py-0.5 pl-2.5 pr-1 text-sm font-medium",
+    lg: "gap-0.5 py-1 pl-3 pr-1.5 text-sm font-medium"
+  }, a = {
+    xs: "gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-medium",
+    sm: "gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-medium",
+    md: "gap-0.5 py-0.5 pl-2 pr-1 text-sm font-medium",
+    lg: "gap-0.5 py-1 pl-2.5 pr-1.5 text-sm font-medium rounded-lg"
+  }, g = {
+    [t.pillColor]: r,
+    [t.color]: a,
+    [t.modern]: a
+  };
+  return /* @__PURE__ */ x("span", { className: u(n.common, g[e][s], n.styles[m].root), children: [
+    l,
+    /* @__PURE__ */ d(
+      "button",
+      {
+        type: "button",
+        "aria-label": o,
+        onClick: i.onButtonClick,
+        className: u(
+          "flex cursor-pointer items-center justify-center p-0.5 outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2",
+          n.styles[m].addonButton,
+          e === "pill-color" ? "rounded-full" : "rounded-[3px]"
+        ),
+        children: /* @__PURE__ */ d(p, { className: "size-3 stroke-[3px] transition-inherit-all" })
+      }
+    )
+  ] });
+}, F = (i) => {
+  const { size: s = "md", color: m = "gray", type: e = "pill-color", icon: p } = i, o = c[e], l = {
+    xs: "p-1",
+    sm: "p-1.25",
+    md: "p-1.5",
+    lg: "p-2"
+  }, n = {
+    xs: "p-1",
+    sm: "p-1.25",
+    md: "p-1.5",
+    lg: "p-2 rounded-lg"
+  }, r = {
+    [t.pillColor]: l,
+    [t.color]: n,
+    [t.modern]: n
+  };
+  return /* @__PURE__ */ d("span", { className: u(o.common, r[e][s], o.styles[m].root), children: /* @__PURE__ */ d(p, { className: u("size-3 stroke-[3px]", o.styles[m].addon) }) });
+};
 export {
-  x as Badge
+  j as Badge,
+  F as BadgeIcon,
+  D as BadgeWithButton,
+  T as BadgeWithDot,
+  L as BadgeWithFlag,
+  W as BadgeWithIcon,
+  O as BadgeWithImage,
+  y as filledColors
 };

package/dist/primitives/badge/index.d.ts

@@ -1,2 +1,3 @@
-export { Badge, type BadgeProps } from './badge';
+export { Badge, BadgeWithDot, BadgeWithIcon, BadgeWithFlag, BadgeWithImage, BadgeWithButton, BadgeIcon, filledColors, type BadgeColor, type BadgeProps, type BadgeWithDotProps, type BadgeWithIconProps, type BadgeWithFlagProps, type BadgeWithImageProps, type BadgeWithButtonProps, type BadgeIconProps, } from './badge';
+export type { BadgeColors, BadgeTypes, Sizes, FlagTypes, IconComponentType, BadgeTypeToColorMap } from './badge-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/primitives/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,EACL,YAAY,EACZ,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,SAAS,EACT,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,cAAc,GACtB,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC"}

package/dist/primitives/heading/heading.d.ts

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 declare const headingVariants: (props?: ({
     level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
     weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
-    color?: "primary" | "secondary" | "error" | "success" | "brand" | null | undefined;
+    color?: "primary" | "secondary" | "error" | "brand" | "success" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface HeadingProps extends VariantProps<typeof headingVariants> {
     /** Heading content */

package/dist/primitives/text/text.d.ts

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 declare const textVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
-    color?: "primary" | "secondary" | "tertiary" | "error" | "success" | "warning" | "brand" | null | undefined;
+    color?: "primary" | "secondary" | "tertiary" | "error" | "brand" | "warning" | "success" | null | undefined;
     align?: "left" | "right" | "center" | "justify" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TextProps extends VariantProps<typeof textVariants> {