@empoweredvote/ev-ui 0.2.3 → 0.3.0

package/dist/index.mjs

@@ -4034,28 +4034,99 @@ var styles = {
 
 // src/TopicTierBadge.jsx
 import React18 from "react";
-var TIER_LABELS = {
-  federal: { full: "Federal", compact: "F" },
-  state: { full: "State", compact: "S" },
-  local: { full: "Local", compact: "L" }
+function LandmarkIcon({ size = 14 }) {
+  return /* @__PURE__ */ React18.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React18.createElement("path", { d: "M10 18v-7" }),
+    /* @__PURE__ */ React18.createElement("path", { d: "M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z" }),
+    /* @__PURE__ */ React18.createElement("path", { d: "M14 18v-7" }),
+    /* @__PURE__ */ React18.createElement("path", { d: "M18 18v-7" }),
+    /* @__PURE__ */ React18.createElement("path", { d: "M3 22h18" }),
+    /* @__PURE__ */ React18.createElement("path", { d: "M6 18v-7" })
+  );
+}
+function Building2Icon({ size = 14 }) {
+  return /* @__PURE__ */ React18.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React18.createElement("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
+    /* @__PURE__ */ React18.createElement("path", { d: "M6 12H4a2 2 0 0 0-2 2v8h4" }),
+    /* @__PURE__ */ React18.createElement("path", { d: "M18 9h2a2 2 0 0 1 2 2v11h-4" }),
+    /* @__PURE__ */ React18.createElement("path", { d: "M10 6h4" }),
+    /* @__PURE__ */ React18.createElement("path", { d: "M10 10h4" }),
+    /* @__PURE__ */ React18.createElement("path", { d: "M10 14h4" }),
+    /* @__PURE__ */ React18.createElement("path", { d: "M10 18h4" })
+  );
+}
+function HomeIcon({ size = 14 }) {
+  return /* @__PURE__ */ React18.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React18.createElement("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+    /* @__PURE__ */ React18.createElement("polyline", { points: "9 22 9 12 15 12 15 22" })
+  );
+}
+var TIER_INFO = {
+  federal: { label: "Federal", Icon: LandmarkIcon },
+  state: { label: "State", Icon: Building2Icon },
+  local: { label: "Local", Icon: HomeIcon }
 };
 var SIZE_STYLES = {
   xs: {
+    iconSize: 12,
     fontSize: fontSizes.xs,
-    padding: `${spacing[1]} ${spacing[2]}`,
-    gap: spacing[1]
+    pillPadding: `${spacing[1]} ${spacing[2]}`,
+    gap: spacing[1],
+    iconGap: "3px"
   },
   sm: {
+    iconSize: 14,
     fontSize: fontSizes.xs,
-    padding: `${spacing[1]} ${spacing[2]}`,
-    gap: spacing[1]
+    pillPadding: `${spacing[1]} ${spacing[2]}`,
+    gap: spacing[2],
+    iconGap: "4px"
   }
 };
 function TopicTierBadge({
   topic,
   tiers,
   size = "sm",
-  layout = "full",
+  iconOnly = false,
+  variant = "tinted",
   style = {}
 }) {
   const effectiveTiers = tiers != null ? tiers : topic ? [
@@ -4072,29 +4143,32 @@ function TopicTierBadge({
     flexWrap: "wrap",
     ...style
   };
-  const pillStyle = (tier) => ({
-    display: "inline-flex",
-    alignItems: "center",
-    padding: sizeStyle.padding,
-    borderRadius: borderRadius.full,
-    fontFamily: fonts.primary,
-    fontWeight: fontWeights.medium,
-    fontSize: sizeStyle.fontSize,
-    backgroundColor: tierColors[tier].bg,
-    color: tierColors[tier].text,
-    border: `1px solid ${tierColors[tier].text}`,
-    lineHeight: 1,
-    userSelect: "none"
-  });
+  const itemStyle = (tier) => {
+    const color = variant === "muted" ? "#6B7280" : tierColors[tier].text;
+    return {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: sizeStyle.iconGap,
+      fontFamily: fonts.primary,
+      fontWeight: fontWeights.medium,
+      fontSize: sizeStyle.fontSize,
+      color,
+      lineHeight: 1,
+      userSelect: "none"
+    };
+  };
   return /* @__PURE__ */ React18.createElement(
     "span",
     {
       className: "ev-topic-tier-badge",
       style: containerStyle2,
       role: "group",
-      "aria-label": `Applies at: ${effectiveTiers.map((t) => TIER_LABELS[t].full).join(", ")}`
+      "aria-label": `Applies at: ${effectiveTiers.map((t) => TIER_INFO[t].label).join(", ")}`
     },
-    effectiveTiers.map((tier) => /* @__PURE__ */ React18.createElement("span", { key: tier, style: pillStyle(tier) }, TIER_LABELS[tier][layout]))
+    effectiveTiers.map((tier) => {
+      const { label, Icon } = TIER_INFO[tier];
+      return /* @__PURE__ */ React18.createElement("span", { key: tier, style: itemStyle(tier) }, /* @__PURE__ */ React18.createElement(Icon, { size: sizeStyle.iconSize }), !iconOnly && /* @__PURE__ */ React18.createElement("span", null, label));
+    })
   );
 }