@popgrids/ui 0.0.29 → 0.0.31

package/dist/section-header.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var icons = require('@untitledui/icons');
-var react = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var tooltip = require('@base-ui/react/tooltip');
@@ -39,20 +38,20 @@ function TooltipContent({
         {
           "data-slot": "tooltip-content",
           className: cn(
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs",
+            "data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=delayed-open]:animate-in data-closed:animate-out data-open:animate-in",
             className
           ),
           ...props,
           children: [
             children,
-            /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "flex data-[side=bottom]:-top-[6px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:rotate-180", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipArrow, {}) })
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "flex data-[side=bottom]:-top-[6px] data-[side=left]:right-[-13px] data-[side=top]:-bottom-[6px] data-[side=right]:left-[-13px] data-[side=bottom]:rotate-0 data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipArrow, {}) })
           ]
         }
       )
     }
   ) });
 }
-var TooltipArrow = (props) => {
+var TooltipArrow = (_props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
@@ -74,43 +73,34 @@ var TooltipArrow = (props) => {
     }
   );
 };
+function computeLabelText(required, numberChecked, min, max) {
+  if (required) {
+    if (numberChecked === 0) {
+      return `${min}\u2013${max} Required`;
+    }
+    return `${numberChecked} selected of ${max}`;
+  }
+  if (max === 0 && min === 0) {
+    return "1 Optional";
+  }
+  if (numberChecked === 0) {
+    return `Up to ${max}`;
+  }
+  return `${numberChecked} selected of ${max}`;
+}
 function SectionHeader({
   className = void 0,
   flourish = void 0,
   heading = void 0,
   icon = void 0,
-  label = void 0,
+  label: _label = void 0,
   min = void 0,
   max = void 0,
   required = false,
   description = void 0,
   numberChecked = 0
 }) {
-  const [labelText, setLabelText] = react.useState("");
-  const updateLabel = react.useCallback(() => {
-    if (required) {
-      if (numberChecked === 0) {
-        setLabelText(`${min}\u2013${max} Required`);
-      }
-      if (numberChecked > 0) {
-        setLabelText(`${numberChecked} selected of ${max}`);
-      }
-    } else {
-      if (max === 0 && min === 0) {
-        setLabelText("1 Optional");
-      } else {
-        if (numberChecked === 0) {
-          setLabelText(`Up to ${max}`);
-        }
-        if (numberChecked > 0) {
-          setLabelText(`${numberChecked} selected of ${max}`);
-        }
-      }
-    }
-  }, [required, numberChecked, min, max]);
-  react.useEffect(() => {
-    updateLabel();
-  }, [updateLabel]);
+  const labelText = computeLabelText(required, numberChecked, min, max);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -123,24 +113,17 @@ function SectionHeader({
         },
         className
       ),
-      children: flourish ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-normal", children: flourish }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 text-sm font-semibold uppercase", children: heading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: icon }),
+      children: flourish ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-normal text-xl", children: flourish }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 font-semibold text-sm uppercase", children: heading != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          icon != null && icon,
           heading
         ] }) }),
-        min && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-normal", children: labelText }),
-          required && numberChecked >= min || !required && numberChecked > 0 ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: description && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        min != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-normal text-sm", children: labelText }),
+          required && numberChecked >= min || !required && numberChecked > 0 ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { className: "size-5" }) : description && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxRuntime.jsx(icons.InfoCircle, { className: "size-5" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              TooltipContent,
-              {
-                sideOffset: 2,
-                alignOffset: 5,
-                children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: description })
-              }
-            )
-          ] }) })
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { sideOffset: 2, alignOffset: 5, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: description }) })
+          ] })
         ] })
       ] })
     }

package/dist/section-header.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx","../src/components/section-header/section-header.tsx"],"names":["twMerge","clsx","TooltipPrimitive","jsx","jsxs","useState","useCallback","useEffect","Fragment","Check","InfoCircle"],"mappings":";;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACcA,SAAS,OAAA,CAAQ,EAAE,GAAG,KAAA,EAAM,EAAgC;AAC1D,EAAA,sCAAQC,eAAA,CAAiB,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/D;AAEA,SAAS,cAAA,CAAe,EAAE,GAAG,KAAA,EAAM,EAAmC;AACpE,EAAA,sCAAQA,eAAA,CAAiB,OAAA,EAAjB,EAAyB,WAAA,EAAU,iBAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AAC1E;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,CAAA;AAAA,EACb,KAAA,GAAQ,QAAA;AAAA,EACR,WAAA,GAAc,CAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAIK;AACH,EAAA,uBACEC,cAAA,CAACD,eAAA,CAAiB,MAAA,EAAjB,EACC,QAAA,kBAAAC,cAAA;AAAA,IAACD,eAAA,CAAiB,UAAA;AAAA,IAAjB;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAU,cAAA;AAAA,MAEV,QAAA,kBAAAE,eAAA;AAAA,QAACF,eAAA,CAAiB,KAAA;AAAA,QAAjB;AAAA,UACC,WAAA,EAAU,iBAAA;AAAA,UACV,SAAA,EAAW,EAAA;AAAA,YACT,wlBAAA;AAAA,YACA;AAAA,WACF;AAAA,UACC,GAAG,KAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,4BACDC,cAAA,CAACD,gBAAiB,KAAA,EAAjB,EAAuB,WAAU,+OAAA,EAChC,QAAA,kBAAAC,cAAA,CAAC,gBAAa,CAAA,EAChB;AAAA;AAAA;AAAA;AACF;AAAA,GACF,EACF,CAAA;AAEJ;AAEO,IAAM,YAAA,GAAe,CAAC,KAAA,KAAuC;AAClE,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,IAAA;AAAA,MACN,MAAA,EAAO,GAAA;AAAA,MACP,OAAA,EAAQ,sBAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,WAAM,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,wBACpBA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,iBAAA;AAAA,YACV,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA;AAAA,GACF;AAEJ,CAAA;AC3EO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA,GAAY,MAAA;AAAA,EACZ,QAAA,GAAW,MAAA;AAAA,EACX,OAAA,GAAU,MAAA;AAAA,EACV,IAAA,GAAO,MAAA;AAAA,EACP,KAAA,GAAQ,MAAA;AAAA,EACR,GAAA,GAAM,MAAA;AAAA,EACN,GAAA,GAAM,MAAA;AAAA,EACN,QAAA,GAAW,KAAA;AAAA,EACX,WAAA,GAAc,MAAA;AAAA,EACd,aAAA,GAAgB;AAClB,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIE,eAAS,EAAE,CAAA;AAE7C,EAAA,MAAM,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAA,IAAI,QAAA,EAAU;AAEZ,MAAA,IAAI,kBAAkB,CAAA,EAAG;AACvB,QAAA,YAAA,CAAa,CAAA,EAAG,GAAG,CAAA,MAAA,EAAI,GAAG,CAAA,SAAA,CAAW,CAAA;AAAA,MACvC;AACA,MAAA,IAAI,gBAAgB,CAAA,EAAG;AACrB,QAAA,YAAA,CAAa,CAAA,EAAG,aAAa,CAAA,aAAA,EAAgB,GAAG,CAAA,CAAE,CAAA;AAAA,MACpD;AAAA,IACF,CAAA,MAAO;AAEL,MAAA,IAAI,GAAA,KAAQ,CAAA,IAAK,GAAA,KAAQ,CAAA,EAAG;AAC1B,QAAA,YAAA,CAAa,YAAY,CAAA;AAAA,MAC3B,CAAA,MAAO;AACL,QAAA,IAAI,kBAAkB,CAAA,EAAG;AACvB,UAAA,YAAA,CAAa,CAAA,MAAA,EAAS,GAAG,CAAA,CAAE,CAAA;AAAA,QAC7B;AACA,QAAA,IAAI,gBAAgB,CAAA,EAAG;AACrB,UAAA,YAAA,CAAa,CAAA,EAAG,aAAa,CAAA,aAAA,EAAgB,GAAG,CAAA,CAAE,CAAA;AAAA,QACpD;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAA,EAAU,aAAA,EAAe,GAAA,EAAK,GAAG,CAAC,CAAA;AAEtC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,WAAA,EAAY;AAAA,EACd,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,uBACEJ,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,0BAAA;AAAA,QACA;AAAA,UACE,qBAAA,EAAuB,QAAA;AAAA,UACvB,6EAA6E,CAAC,QAAA;AAAA,UAC9E,sCAAsC,CAAC;AAAA,SACzC;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,QAAA,mBACCA,cAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAuB,QAAA,EAAA,QAAA,EAAS,CAAA,mBAEhDC,eAAAA,CAAAI,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAL,eAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2DACZ,QAAA,EAAA,OAAA,oBACCC,gBAAAI,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQL,cAAAA,CAAAK,mBAAA,EAAA,EAAG,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,UAChB;AAAA,SAAA,EACH,CAAA,EAEJ,CAAA;AAAA,QACC,GAAA,oBACCJ,eAAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACb,QAAA,EAAA;AAAA,0BAAAD,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,UAC9C,YAAY,aAAA,IAAiB,GAAA,IAAS,CAAC,QAAA,IAAY,aAAA,GAAgB,oBACnEA,cAAAA,CAACM,eAAM,SAAA,EAAU,QAAA,EAAS,oBAE1BN,cAAAA,CAAAK,uBACG,QAAA,EAAA,WAAA,oBACCJ,gBAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAAD,cAAAA,CAAC,kBAAe,MAAA,kBAAQA,eAACO,gBAAA,EAAA,EAAW,SAAA,EAAU,UAAS,CAAA,EAAI,CAAA;AAAA,4BAC3DP,cAAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,UAAA,EAAY,CAAA;AAAA,gBACZ,WAAA,EAAa,CAAA;AAAA,gBAEb,QAAA,kBAAAA,cAAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA,WAAA,EAAY;AAAA;AAAA;AAClB,WAAA,EACF,CAAA,EAEJ;AAAA,SAAA,EAEJ;AAAA,OAAA,EAEJ;AAAA;AAAA,GAEJ;AAEJ","file":"section-header.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:rotate-180\">\n            <TooltipArrow />\n          </TooltipPrimitive.Arrow>\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport const TooltipArrow = (props: React.ComponentProps<\"svg\">) => {\n  return (\n    <svg\n      width=\"20\"\n      height=\"6\"\n      viewBox=\"382.134 241.548 20 6\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Tooltip Arrow</title>\n      <path\n        className=\"fill-foreground\"\n        d=\"M 382.134 247.548 C 390.116 247.548 389.506 241.548 392.134 241.548 C 394.762 241.548 394.152 247.548 402.134 247.548\"\n      />\n    </svg>\n  );\n};\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n","\"use client\";\n\nimport { Check, InfoCircle } from \"@untitledui/icons\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../tooltip/tooltip\";\nimport { SectionHeaderProps } from \"./types\";\n\nexport function SectionHeader({\n  className = undefined,\n  flourish = undefined,\n  heading = undefined,\n  icon = undefined,\n  label = undefined,\n  min = undefined,\n  max = undefined,\n  required = false,\n  description = undefined,\n  numberChecked = 0,\n}: SectionHeaderProps) {\n  const [labelText, setLabelText] = useState(\"\");\n\n  const updateLabel = useCallback(() => {\n    if (required) {\n      // Required\n      if (numberChecked === 0) {\n        setLabelText(`${min}–${max} Required`);\n      }\n      if (numberChecked > 0) {\n        setLabelText(`${numberChecked} selected of ${max}`);\n      }\n    } else {\n      // Optional\n      if (max === 0 && min === 0) {\n        setLabelText(\"1 Optional\");\n      } else {\n        if (numberChecked === 0) {\n          setLabelText(`Up to ${max}`);\n        }\n        if (numberChecked > 0) {\n          setLabelText(`${numberChecked} selected of ${max}`);\n        }\n      }\n    }\n  }, [required, numberChecked, min, max]);\n\n  useEffect(() => {\n    updateLabel();\n  }, [updateLabel]);\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-center\",\n        {\n          \"justify-center py-8\": flourish,\n          \"h-[30px] shrink-0 flex-wrap content-center justify-between gap-y-3 pb-1.5\": !flourish,\n          \"border-foreground border-b-[0.3px]\": !flourish,\n        },\n        className,\n      )}\n    >\n      {flourish ? (\n        <span className=\"text-xl font-normal\">{flourish}</span>\n      ) : (\n        <>\n          <div className=\"flex items-center gap-1 text-sm font-semibold uppercase\">\n            {heading && (\n              <>\n                {icon && <>{icon}</>}\n                {heading}\n              </>\n            )}\n          </div>\n          {min && (\n            <div className=\"flex items-center gap-1.5\">\n              <div className=\"text-sm font-normal\">{labelText}</div>\n              {(required && numberChecked >= min) || (!required && numberChecked > 0) ? (\n                <Check className=\"size-5\" />\n              ) : (\n                <>\n                  {description && (\n                    <Tooltip>\n                      <TooltipTrigger render={<InfoCircle className=\"size-5\" />} />\n                      <TooltipContent\n                        sideOffset={2}\n                        alignOffset={5}\n                      >\n                        <p>{description}</p>\n                      </TooltipContent>\n                    </Tooltip>\n                  )}\n                </>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx","../src/components/section-header/section-header.tsx"],"names":["twMerge","clsx","TooltipPrimitive","jsx","jsxs","Fragment","Check","InfoCircle"],"mappings":"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","file":"section-header.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delay={delay} {...props} />;\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<TooltipPrimitive.Positioner.Props, \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\">) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=delayed-open]:animate-in data-closed:animate-out data-open:animate-in\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=left]:right-[-13px] data-[side=top]:-bottom-[6px] data-[side=right]:left-[-13px] data-[side=bottom]:rotate-0 data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n            <TooltipArrow />\n          </TooltipPrimitive.Arrow>\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport const TooltipArrow = (_props: React.ComponentProps<\"svg\">) => {\n  return (\n    <svg\n      width=\"20\"\n      height=\"6\"\n      viewBox=\"382.134 241.548 20 6\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Tooltip Arrow</title>\n      <path\n        className=\"fill-foreground\"\n        d=\"M 382.134 247.548 C 390.116 247.548 389.506 241.548 392.134 241.548 C 394.762 241.548 394.152 247.548 402.134 247.548\"\n      />\n    </svg>\n  );\n};\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n","\"use client\";\n\nimport { Check, InfoCircle } from \"@untitledui/icons\";\nimport { cn } from \"../../lib/utils\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../tooltip/tooltip\";\nimport type { SectionHeaderProps } from \"./types\";\n\nfunction computeLabelText(\n  required: boolean,\n  numberChecked: number,\n  min: number | undefined,\n  max: number | undefined,\n): string {\n  if (required) {\n    if (numberChecked === 0) {\n      return `${min}–${max} Required`;\n    }\n    return `${numberChecked} selected of ${max}`;\n  }\n  if (max === 0 && min === 0) {\n    return \"1 Optional\";\n  }\n  if (numberChecked === 0) {\n    return `Up to ${max}`;\n  }\n  return `${numberChecked} selected of ${max}`;\n}\n\nexport function SectionHeader({\n  className = undefined,\n  flourish = undefined,\n  heading = undefined,\n  icon = undefined,\n  label: _label = undefined,\n  min = undefined,\n  max = undefined,\n  required = false,\n  description = undefined,\n  numberChecked = 0,\n}: SectionHeaderProps) {\n  const labelText = computeLabelText(required, numberChecked, min, max);\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-center\",\n        {\n          \"justify-center py-8\": flourish,\n          \"h-[30px] shrink-0 flex-wrap content-center justify-between gap-y-3 pb-1.5\": !flourish,\n          \"border-foreground border-b-[0.3px]\": !flourish,\n        },\n        className,\n      )}\n    >\n      {flourish ? (\n        <span className=\"font-normal text-xl\">{flourish}</span>\n      ) : (\n        <>\n          <div className=\"flex items-center gap-1 font-semibold text-sm uppercase\">\n            {heading != null && (\n              <>\n                {icon != null && icon}\n                {heading}\n              </>\n            )}\n          </div>\n          {min != null && (\n            <div className=\"flex items-center gap-1.5\">\n              <div className=\"font-normal text-sm\">{labelText}</div>\n              {(required && numberChecked >= min) || (!required && numberChecked > 0) ? (\n                <Check className=\"size-5\" />\n              ) : (\n                description && (\n                  <Tooltip>\n                    <TooltipTrigger render={<InfoCircle className=\"size-5\" />} />\n                    <TooltipContent sideOffset={2} alignOffset={5}>\n                      <p>{description}</p>\n                    </TooltipContent>\n                  </Tooltip>\n                )\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/section-header.d.cts

@@ -13,6 +13,6 @@ interface SectionHeaderProps {
   numberChecked?: number;
 }
 
-declare function SectionHeader({ className, flourish, heading, icon, label, min, max, required, description, numberChecked, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SectionHeader({ className, flourish, heading, icon, label: _label, min, max, required, description, numberChecked, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
 
 export { SectionHeader, type SectionHeaderProps };

package/dist/section-header.d.ts

@@ -13,6 +13,6 @@ interface SectionHeaderProps {
   numberChecked?: number;
 }
 
-declare function SectionHeader({ className, flourish, heading, icon, label, min, max, required, description, numberChecked, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SectionHeader({ className, flourish, heading, icon, label: _label, min, max, required, description, numberChecked, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
 
 export { SectionHeader, type SectionHeaderProps };

package/dist/section-header.js

@@ -1,5 +1,4 @@
 import { Check, InfoCircle } from '@untitledui/icons';
-import { useState, useCallback, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
@@ -37,20 +36,20 @@ function TooltipContent({
         {
           "data-slot": "tooltip-content",
           className: cn(
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs",
+            "data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=delayed-open]:animate-in data-closed:animate-out data-open:animate-in",
             className
           ),
           ...props,
           children: [
             children,
-            /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "flex data-[side=bottom]:-top-[6px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:rotate-180", children: /* @__PURE__ */ jsx(TooltipArrow, {}) })
+            /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "flex data-[side=bottom]:-top-[6px] data-[side=left]:right-[-13px] data-[side=top]:-bottom-[6px] data-[side=right]:left-[-13px] data-[side=bottom]:rotate-0 data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180", children: /* @__PURE__ */ jsx(TooltipArrow, {}) })
           ]
         }
       )
     }
   ) });
 }
-var TooltipArrow = (props) => {
+var TooltipArrow = (_props) => {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -72,43 +71,34 @@ var TooltipArrow = (props) => {
     }
   );
 };
+function computeLabelText(required, numberChecked, min, max) {
+  if (required) {
+    if (numberChecked === 0) {
+      return `${min}\u2013${max} Required`;
+    }
+    return `${numberChecked} selected of ${max}`;
+  }
+  if (max === 0 && min === 0) {
+    return "1 Optional";
+  }
+  if (numberChecked === 0) {
+    return `Up to ${max}`;
+  }
+  return `${numberChecked} selected of ${max}`;
+}
 function SectionHeader({
   className = void 0,
   flourish = void 0,
   heading = void 0,
   icon = void 0,
-  label = void 0,
+  label: _label = void 0,
   min = void 0,
   max = void 0,
   required = false,
   description = void 0,
   numberChecked = 0
 }) {
-  const [labelText, setLabelText] = useState("");
-  const updateLabel = useCallback(() => {
-    if (required) {
-      if (numberChecked === 0) {
-        setLabelText(`${min}\u2013${max} Required`);
-      }
-      if (numberChecked > 0) {
-        setLabelText(`${numberChecked} selected of ${max}`);
-      }
-    } else {
-      if (max === 0 && min === 0) {
-        setLabelText("1 Optional");
-      } else {
-        if (numberChecked === 0) {
-          setLabelText(`Up to ${max}`);
-        }
-        if (numberChecked > 0) {
-          setLabelText(`${numberChecked} selected of ${max}`);
-        }
-      }
-    }
-  }, [required, numberChecked, min, max]);
-  useEffect(() => {
-    updateLabel();
-  }, [updateLabel]);
+  const labelText = computeLabelText(required, numberChecked, min, max);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -121,24 +111,17 @@ function SectionHeader({
         },
         className
       ),
-      children: flourish ? /* @__PURE__ */ jsx("span", { className: "text-xl font-normal", children: flourish }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 text-sm font-semibold uppercase", children: heading && /* @__PURE__ */ jsxs(Fragment, { children: [
-          icon && /* @__PURE__ */ jsx(Fragment, { children: icon }),
+      children: flourish ? /* @__PURE__ */ jsx("span", { className: "font-normal text-xl", children: flourish }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 font-semibold text-sm uppercase", children: heading != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon != null && icon,
           heading
         ] }) }),
-        min && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-normal", children: labelText }),
-          required && numberChecked >= min || !required && numberChecked > 0 ? /* @__PURE__ */ jsx(Check, { className: "size-5" }) : /* @__PURE__ */ jsx(Fragment, { children: description && /* @__PURE__ */ jsxs(Tooltip, { children: [
+        min != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-normal text-sm", children: labelText }),
+          required && numberChecked >= min || !required && numberChecked > 0 ? /* @__PURE__ */ jsx(Check, { className: "size-5" }) : description && /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(InfoCircle, { className: "size-5" }) }),
-            /* @__PURE__ */ jsx(
-              TooltipContent,
-              {
-                sideOffset: 2,
-                alignOffset: 5,
-                children: /* @__PURE__ */ jsx("p", { children: description })
-              }
-            )
-          ] }) })
+            /* @__PURE__ */ jsx(TooltipContent, { sideOffset: 2, alignOffset: 5, children: /* @__PURE__ */ jsx("p", { children: description }) })
+          ] })
         ] })
       ] })
     }

package/dist/section-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx","../src/components/section-header/section-header.tsx"],"names":["TooltipPrimitive","jsx","jsxs"],"mappings":"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","file":"section-header.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:rotate-180\">\n            <TooltipArrow />\n          </TooltipPrimitive.Arrow>\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport const TooltipArrow = (props: React.ComponentProps<\"svg\">) => {\n  return (\n    <svg\n      width=\"20\"\n      height=\"6\"\n      viewBox=\"382.134 241.548 20 6\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Tooltip Arrow</title>\n      <path\n        className=\"fill-foreground\"\n        d=\"M 382.134 247.548 C 390.116 247.548 389.506 241.548 392.134 241.548 C 394.762 241.548 394.152 247.548 402.134 247.548\"\n      />\n    </svg>\n  );\n};\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n","\"use client\";\n\nimport { Check, InfoCircle } from \"@untitledui/icons\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../tooltip/tooltip\";\nimport { SectionHeaderProps } from \"./types\";\n\nexport function SectionHeader({\n  className = undefined,\n  flourish = undefined,\n  heading = undefined,\n  icon = undefined,\n  label = undefined,\n  min = undefined,\n  max = undefined,\n  required = false,\n  description = undefined,\n  numberChecked = 0,\n}: SectionHeaderProps) {\n  const [labelText, setLabelText] = useState(\"\");\n\n  const updateLabel = useCallback(() => {\n    if (required) {\n      // Required\n      if (numberChecked === 0) {\n        setLabelText(`${min}–${max} Required`);\n      }\n      if (numberChecked > 0) {\n        setLabelText(`${numberChecked} selected of ${max}`);\n      }\n    } else {\n      // Optional\n      if (max === 0 && min === 0) {\n        setLabelText(\"1 Optional\");\n      } else {\n        if (numberChecked === 0) {\n          setLabelText(`Up to ${max}`);\n        }\n        if (numberChecked > 0) {\n          setLabelText(`${numberChecked} selected of ${max}`);\n        }\n      }\n    }\n  }, [required, numberChecked, min, max]);\n\n  useEffect(() => {\n    updateLabel();\n  }, [updateLabel]);\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-center\",\n        {\n          \"justify-center py-8\": flourish,\n          \"h-[30px] shrink-0 flex-wrap content-center justify-between gap-y-3 pb-1.5\": !flourish,\n          \"border-foreground border-b-[0.3px]\": !flourish,\n        },\n        className,\n      )}\n    >\n      {flourish ? (\n        <span className=\"text-xl font-normal\">{flourish}</span>\n      ) : (\n        <>\n          <div className=\"flex items-center gap-1 text-sm font-semibold uppercase\">\n            {heading && (\n              <>\n                {icon && <>{icon}</>}\n                {heading}\n              </>\n            )}\n          </div>\n          {min && (\n            <div className=\"flex items-center gap-1.5\">\n              <div className=\"text-sm font-normal\">{labelText}</div>\n              {(required && numberChecked >= min) || (!required && numberChecked > 0) ? (\n                <Check className=\"size-5\" />\n              ) : (\n                <>\n                  {description && (\n                    <Tooltip>\n                      <TooltipTrigger render={<InfoCircle className=\"size-5\" />} />\n                      <TooltipContent\n                        sideOffset={2}\n                        alignOffset={5}\n                      >\n                        <p>{description}</p>\n                      </TooltipContent>\n                    </Tooltip>\n                  )}\n                </>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx","../src/components/section-header/section-header.tsx"],"names":["TooltipPrimitive","jsx","jsxs"],"mappings":"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","file":"section-header.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delay={delay} {...props} />;\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<TooltipPrimitive.Positioner.Props, \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\">) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=delayed-open]:animate-in data-closed:animate-out data-open:animate-in\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=left]:right-[-13px] data-[side=top]:-bottom-[6px] data-[side=right]:left-[-13px] data-[side=bottom]:rotate-0 data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n            <TooltipArrow />\n          </TooltipPrimitive.Arrow>\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport const TooltipArrow = (_props: React.ComponentProps<\"svg\">) => {\n  return (\n    <svg\n      width=\"20\"\n      height=\"6\"\n      viewBox=\"382.134 241.548 20 6\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Tooltip Arrow</title>\n      <path\n        className=\"fill-foreground\"\n        d=\"M 382.134 247.548 C 390.116 247.548 389.506 241.548 392.134 241.548 C 394.762 241.548 394.152 247.548 402.134 247.548\"\n      />\n    </svg>\n  );\n};\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n","\"use client\";\n\nimport { Check, InfoCircle } from \"@untitledui/icons\";\nimport { cn } from \"../../lib/utils\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../tooltip/tooltip\";\nimport type { SectionHeaderProps } from \"./types\";\n\nfunction computeLabelText(\n  required: boolean,\n  numberChecked: number,\n  min: number | undefined,\n  max: number | undefined,\n): string {\n  if (required) {\n    if (numberChecked === 0) {\n      return `${min}–${max} Required`;\n    }\n    return `${numberChecked} selected of ${max}`;\n  }\n  if (max === 0 && min === 0) {\n    return \"1 Optional\";\n  }\n  if (numberChecked === 0) {\n    return `Up to ${max}`;\n  }\n  return `${numberChecked} selected of ${max}`;\n}\n\nexport function SectionHeader({\n  className = undefined,\n  flourish = undefined,\n  heading = undefined,\n  icon = undefined,\n  label: _label = undefined,\n  min = undefined,\n  max = undefined,\n  required = false,\n  description = undefined,\n  numberChecked = 0,\n}: SectionHeaderProps) {\n  const labelText = computeLabelText(required, numberChecked, min, max);\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-center\",\n        {\n          \"justify-center py-8\": flourish,\n          \"h-[30px] shrink-0 flex-wrap content-center justify-between gap-y-3 pb-1.5\": !flourish,\n          \"border-foreground border-b-[0.3px]\": !flourish,\n        },\n        className,\n      )}\n    >\n      {flourish ? (\n        <span className=\"font-normal text-xl\">{flourish}</span>\n      ) : (\n        <>\n          <div className=\"flex items-center gap-1 font-semibold text-sm uppercase\">\n            {heading != null && (\n              <>\n                {icon != null && icon}\n                {heading}\n              </>\n            )}\n          </div>\n          {min != null && (\n            <div className=\"flex items-center gap-1.5\">\n              <div className=\"font-normal text-sm\">{labelText}</div>\n              {(required && numberChecked >= min) || (!required && numberChecked > 0) ? (\n                <Check className=\"size-5\" />\n              ) : (\n                description && (\n                  <Tooltip>\n                    <TooltipTrigger render={<InfoCircle className=\"size-5\" />} />\n                    <TooltipContent sideOffset={2} alignOffset={5}>\n                      <p>{description}</p>\n                    </TooltipContent>\n                  </Tooltip>\n                )\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/tag.cjs

@@ -14,8 +14,8 @@ var tagVariants = classVarianceAuthority.cva(
   {
     variants: {
       selected: {
-        false: "text-primary-foreground ring ring-primary-foreground ring-offset-0 focus-visible:bg-background focus-visible:text-primary-foreground",
-        true: "bg-primary-foreground text-white dark:text-primary focus-visible:bg-primary-foreground focus-visible:text-white dark:focus-visible:bg-primary-foreground dark:focus-visible:text-primary"
+        false: "text-primary ring ring-primary ring-offset-0 focus-visible:bg-primary focus-visible:text-primary",
+        true: "bg-primary text-primary-foreground dark:text-primary-foreground focus-visible:bg-primary focus-visible:text-primary-foreground dark:focus-visible:bg-primary dark:focus-visible:text-primary-foreground"
       },
       interactive: {
         false: null,
@@ -41,23 +41,23 @@ var tagVariants = classVarianceAuthority.cva(
       {
         interactive: true,
         selected: false,
-        class: "hover:ring-2 hover:ring-primary-foreground active:ring-1"
+        class: "hover:ring-2 hover:ring-primary active:ring-1"
       },
       {
         interactive: true,
         selected: true,
-        class: "hover:bg-primary-foreground/90"
+        class: "hover:bg-primary/90"
       },
       // Interactive active states
       {
         interactive: true,
         selected: false,
-        class: "active:ring active:ring-primary-foreground"
+        class: "active:ring active:ring-primary"
       },
       {
         interactive: true,
         selected: true,
-        class: "active:bg-primary-foreground"
+        class: "active:bg-primary"
       },
       // Size variants (non-collapsed)
       {

package/dist/tag.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/tag/tag.tsx"],"names":["twMerge","clsx","cva","jsxs","Fragment","jsx"],"mappings":"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","file":"tag.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { KeyboardEvent } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { TagProps } from \"./types\";\n\nconst tagVariants = cva(\n  // Base styles\n  \"inline-flex items-center justify-center rounded-full box-border relative font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/60 focus-visible:ring-offset-0\",\n  {\n    variants: {\n      selected: {\n        false:\n          \"text-primary-foreground ring ring-primary-foreground ring-offset-0 focus-visible:bg-background focus-visible:text-primary-foreground\",\n        true: \"bg-primary-foreground text-white dark:text-primary focus-visible:bg-primary-foreground focus-visible:text-white dark:focus-visible:bg-primary-foreground dark:focus-visible:text-primary\",\n      },\n      interactive: {\n        false: null,\n        true: \"cursor-pointer\",\n      },\n      size: {\n        md: null,\n        lg: null,\n      },\n      collapsed: {\n        false: null,\n        true: null,\n      },\n    },\n    defaultVariants: {\n      selected: false,\n      interactive: false,\n      size: \"md\",\n      collapsed: false,\n    },\n    compoundVariants: [\n      // Interactive hover states\n      {\n        interactive: true,\n        selected: false,\n        class: \"hover:ring-2 hover:ring-primary-foreground active:ring-1\",\n      },\n      {\n        interactive: true,\n        selected: true,\n        class: \"hover:bg-primary-foreground/90\",\n      },\n      // Interactive active states\n      {\n        interactive: true,\n        selected: false,\n        class: \"active:ring active:ring-primary-foreground\",\n      },\n      {\n        interactive: true,\n        selected: true,\n        class: \"active:bg-primary-foreground\",\n      },\n      // Size variants (non-collapsed)\n      {\n        size: \"md\",\n        collapsed: false,\n        class: \"px-2 py-1.5 gap-0.5\",\n      },\n      {\n        size: \"lg\",\n        collapsed: false,\n        class: \"px-3 py-2.5 gap-1\",\n      },\n      // Collapsed size adjustments\n      {\n        size: \"md\",\n        collapsed: true,\n        class: \"p-1.5 w-8 h-8\",\n      },\n      {\n        size: \"lg\",\n        collapsed: true,\n        class: \"p-2.5 w-10 h-10\",\n      },\n    ],\n  },\n);\n\nexport function Tag({\n  size = \"md\",\n  selected = false,\n  collapsed = false,\n  children,\n  leading,\n  trailing,\n  interactive,\n  type,\n  onClick,\n  className = \"\",\n}: TagProps) {\n  const handleClick = () => {\n    if (onClick) {\n      onClick();\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n    if (onClick && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const showLeading = leading && !collapsed;\n  const showTrailing = trailing && !collapsed;\n\n  // Explicit interactive prop takes precedence; otherwise detect from onClick\n  const isInteractive = interactive ?? (typeof onClick === \"function\");\n  const TagElement = isInteractive ? \"button\" : \"div\";\n\n  return (\n    <TagElement\n      className={cn(\n        tagVariants({\n          size,\n          selected,\n          collapsed,\n          interactive: isInteractive,\n        }),\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      type={isInteractive ? (type ?? \"button\") : undefined}\n    >\n      {!collapsed && (\n        <>\n          {showLeading && (\n            <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n              {leading}\n            </div>\n          )}\n          <div className=\"flex items-center justify-center px-1 first:pl-0 last:pr-0\">\n            {children}\n          </div>\n          {showTrailing && (\n            <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n              {trailing}\n            </div>\n          )}\n        </>\n      )}\n\n      {collapsed && (\n        <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n          {leading || trailing}\n        </div>\n      )}\n    </TagElement>\n  );\n}\n"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/tag/tag.tsx"],"names":["twMerge","clsx","cva","jsxs","Fragment","jsx"],"mappings":"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","file":"tag.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { KeyboardEvent } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { TagProps } from \"./types\";\n\nconst tagVariants = cva(\n  // Base styles\n  \"inline-flex items-center justify-center rounded-full box-border relative font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/60 focus-visible:ring-offset-0\",\n  {\n    variants: {\n      selected: {\n        false:\n          \"text-primary ring ring-primary ring-offset-0 focus-visible:bg-primary focus-visible:text-primary\",\n        true: \"bg-primary text-primary-foreground dark:text-primary-foreground focus-visible:bg-primary focus-visible:text-primary-foreground dark:focus-visible:bg-primary dark:focus-visible:text-primary-foreground\",\n      },\n      interactive: {\n        false: null,\n        true: \"cursor-pointer\",\n      },\n      size: {\n        md: null,\n        lg: null,\n      },\n      collapsed: {\n        false: null,\n        true: null,\n      },\n    },\n    defaultVariants: {\n      selected: false,\n      interactive: false,\n      size: \"md\",\n      collapsed: false,\n    },\n    compoundVariants: [\n      // Interactive hover states\n      {\n        interactive: true,\n        selected: false,\n        class: \"hover:ring-2 hover:ring-primary active:ring-1\",\n      },\n      {\n        interactive: true,\n        selected: true,\n        class: \"hover:bg-primary/90\",\n      },\n      // Interactive active states\n      {\n        interactive: true,\n        selected: false,\n        class: \"active:ring active:ring-primary\",\n      },\n      {\n        interactive: true,\n        selected: true,\n        class: \"active:bg-primary\",\n      },\n      // Size variants (non-collapsed)\n      {\n        size: \"md\",\n        collapsed: false,\n        class: \"px-2 py-1.5 gap-0.5\",\n      },\n      {\n        size: \"lg\",\n        collapsed: false,\n        class: \"px-3 py-2.5 gap-1\",\n      },\n      // Collapsed size adjustments\n      {\n        size: \"md\",\n        collapsed: true,\n        class: \"p-1.5 w-8 h-8\",\n      },\n      {\n        size: \"lg\",\n        collapsed: true,\n        class: \"p-2.5 w-10 h-10\",\n      },\n    ],\n  },\n);\n\nexport function Tag({\n  size = \"md\",\n  selected = false,\n  collapsed = false,\n  children,\n  leading,\n  trailing,\n  interactive,\n  type,\n  onClick,\n  className = \"\",\n}: TagProps) {\n  const handleClick = () => {\n    if (onClick) {\n      onClick();\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n    if (onClick && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const showLeading = leading && !collapsed;\n  const showTrailing = trailing && !collapsed;\n\n  // Explicit interactive prop takes precedence; otherwise detect from onClick\n  const isInteractive = interactive ?? typeof onClick === \"function\";\n  const TagElement = isInteractive ? \"button\" : \"div\";\n\n  return (\n    <TagElement\n      className={cn(\n        tagVariants({\n          size,\n          selected,\n          collapsed,\n          interactive: isInteractive,\n        }),\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      type={isInteractive ? (type ?? \"button\") : undefined}\n    >\n      {!collapsed && (\n        <>\n          {showLeading && (\n            <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n              {leading}\n            </div>\n          )}\n          <div className=\"flex items-center justify-center px-1 first:pl-0 last:pr-0\">\n            {children}\n          </div>\n          {showTrailing && (\n            <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n              {trailing}\n            </div>\n          )}\n        </>\n      )}\n\n      {collapsed && (\n        <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n          {leading || trailing}\n        </div>\n      )}\n    </TagElement>\n  );\n}\n"]}

package/dist/tag.js

@@ -12,8 +12,8 @@ var tagVariants = cva(
   {
     variants: {
       selected: {
-        false: "text-primary-foreground ring ring-primary-foreground ring-offset-0 focus-visible:bg-background focus-visible:text-primary-foreground",
-        true: "bg-primary-foreground text-white dark:text-primary focus-visible:bg-primary-foreground focus-visible:text-white dark:focus-visible:bg-primary-foreground dark:focus-visible:text-primary"
+        false: "text-primary ring ring-primary ring-offset-0 focus-visible:bg-primary focus-visible:text-primary",
+        true: "bg-primary text-primary-foreground dark:text-primary-foreground focus-visible:bg-primary focus-visible:text-primary-foreground dark:focus-visible:bg-primary dark:focus-visible:text-primary-foreground"
       },
       interactive: {
         false: null,
@@ -39,23 +39,23 @@ var tagVariants = cva(
       {
         interactive: true,
         selected: false,
-        class: "hover:ring-2 hover:ring-primary-foreground active:ring-1"
+        class: "hover:ring-2 hover:ring-primary active:ring-1"
       },
       {
         interactive: true,
         selected: true,
-        class: "hover:bg-primary-foreground/90"
+        class: "hover:bg-primary/90"
       },
       // Interactive active states
       {
         interactive: true,
         selected: false,
-        class: "active:ring active:ring-primary-foreground"
+        class: "active:ring active:ring-primary"
       },
       {
         interactive: true,
         selected: true,
-        class: "active:bg-primary-foreground"
+        class: "active:bg-primary"
       },
       // Size variants (non-collapsed)
       {

package/dist/tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/tag/tag.tsx"],"names":[],"mappings":"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","file":"tag.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { KeyboardEvent } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { TagProps } from \"./types\";\n\nconst tagVariants = cva(\n  // Base styles\n  \"inline-flex items-center justify-center rounded-full box-border relative font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/60 focus-visible:ring-offset-0\",\n  {\n    variants: {\n      selected: {\n        false:\n          \"text-primary-foreground ring ring-primary-foreground ring-offset-0 focus-visible:bg-background focus-visible:text-primary-foreground\",\n        true: \"bg-primary-foreground text-white dark:text-primary focus-visible:bg-primary-foreground focus-visible:text-white dark:focus-visible:bg-primary-foreground dark:focus-visible:text-primary\",\n      },\n      interactive: {\n        false: null,\n        true: \"cursor-pointer\",\n      },\n      size: {\n        md: null,\n        lg: null,\n      },\n      collapsed: {\n        false: null,\n        true: null,\n      },\n    },\n    defaultVariants: {\n      selected: false,\n      interactive: false,\n      size: \"md\",\n      collapsed: false,\n    },\n    compoundVariants: [\n      // Interactive hover states\n      {\n        interactive: true,\n        selected: false,\n        class: \"hover:ring-2 hover:ring-primary-foreground active:ring-1\",\n      },\n      {\n        interactive: true,\n        selected: true,\n        class: \"hover:bg-primary-foreground/90\",\n      },\n      // Interactive active states\n      {\n        interactive: true,\n        selected: false,\n        class: \"active:ring active:ring-primary-foreground\",\n      },\n      {\n        interactive: true,\n        selected: true,\n        class: \"active:bg-primary-foreground\",\n      },\n      // Size variants (non-collapsed)\n      {\n        size: \"md\",\n        collapsed: false,\n        class: \"px-2 py-1.5 gap-0.5\",\n      },\n      {\n        size: \"lg\",\n        collapsed: false,\n        class: \"px-3 py-2.5 gap-1\",\n      },\n      // Collapsed size adjustments\n      {\n        size: \"md\",\n        collapsed: true,\n        class: \"p-1.5 w-8 h-8\",\n      },\n      {\n        size: \"lg\",\n        collapsed: true,\n        class: \"p-2.5 w-10 h-10\",\n      },\n    ],\n  },\n);\n\nexport function Tag({\n  size = \"md\",\n  selected = false,\n  collapsed = false,\n  children,\n  leading,\n  trailing,\n  interactive,\n  type,\n  onClick,\n  className = \"\",\n}: TagProps) {\n  const handleClick = () => {\n    if (onClick) {\n      onClick();\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n    if (onClick && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const showLeading = leading && !collapsed;\n  const showTrailing = trailing && !collapsed;\n\n  // Explicit interactive prop takes precedence; otherwise detect from onClick\n  const isInteractive = interactive ?? (typeof onClick === \"function\");\n  const TagElement = isInteractive ? \"button\" : \"div\";\n\n  return (\n    <TagElement\n      className={cn(\n        tagVariants({\n          size,\n          selected,\n          collapsed,\n          interactive: isInteractive,\n        }),\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      type={isInteractive ? (type ?? \"button\") : undefined}\n    >\n      {!collapsed && (\n        <>\n          {showLeading && (\n            <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n              {leading}\n            </div>\n          )}\n          <div className=\"flex items-center justify-center px-1 first:pl-0 last:pr-0\">\n            {children}\n          </div>\n          {showTrailing && (\n            <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n              {trailing}\n            </div>\n          )}\n        </>\n      )}\n\n      {collapsed && (\n        <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n          {leading || trailing}\n        </div>\n      )}\n    </TagElement>\n  );\n}\n"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/tag/tag.tsx"],"names":[],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACEA,IAAM,WAAA,GAAc,GAAA;AAAA;AAAA,EAElB,iQAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,QAAA,EAAU;AAAA,QACR,KAAA,EACE,kGAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,WAAA,EAAa;AAAA,QACX,KAAA,EAAO,IAAA;AAAA,QACP,IAAA,EAAM;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,IAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,SAAA,EAAW;AAAA,QACT,KAAA,EAAO,IAAA;AAAA,QACP,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU,KAAA;AAAA,MACV,WAAA,EAAa,KAAA;AAAA,MACb,IAAA,EAAM,IAAA;AAAA,MACN,SAAA,EAAW;AAAA,KACb;AAAA,IACA,gBAAA,EAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,WAAA,EAAa,IAAA;AAAA,QACb,QAAA,EAAU,KAAA;AAAA,QACV,KAAA,EAAO;AAAA,OACT;AAAA,MACA;AAAA,QACE,WAAA,EAAa,IAAA;AAAA,QACb,QAAA,EAAU,IAAA;AAAA,QACV,KAAA,EAAO;AAAA,OACT;AAAA;AAAA,MAEA;AAAA,QACE,WAAA,EAAa,IAAA;AAAA,QACb,QAAA,EAAU,KAAA;AAAA,QACV,KAAA,EAAO;AAAA,OACT;AAAA,MACA;AAAA,QACE,WAAA,EAAa,IAAA;AAAA,QACb,QAAA,EAAU,IAAA;AAAA,QACV,KAAA,EAAO;AAAA,OACT;AAAA;AAAA,MAEA;AAAA,QACE,IAAA,EAAM,IAAA;AAAA,QACN,SAAA,EAAW,KAAA;AAAA,QACX,KAAA,EAAO;AAAA,OACT;AAAA,MACA;AAAA,QACE,IAAA,EAAM,IAAA;AAAA,QACN,SAAA,EAAW,KAAA;AAAA,QACX,KAAA,EAAO;AAAA,OACT;AAAA;AAAA,MAEA;AAAA,QACE,IAAA,EAAM,IAAA;AAAA,QACN,SAAA,EAAW,IAAA;AAAA,QACX,KAAA,EAAO;AAAA,OACT;AAAA,MACA;AAAA,QACE,IAAA,EAAM,IAAA;AAAA,QACN,SAAA,EAAW,IAAA;AAAA,QACX,KAAA,EAAO;AAAA;AACT;AACF;AAEJ,CAAA;AAEO,SAAS,GAAA,CAAI;AAAA,EAClB,IAAA,GAAO,IAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,KAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAa;AACX,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,OAAA,EAAQ;AAAA,IACV;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA6D;AAClF,IAAA,IAAI,YAAY,KAAA,CAAM,GAAA,KAAQ,OAAA,IAAW,KAAA,CAAM,QAAQ,GAAA,CAAA,EAAM;AAC3D,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,OAAA,EAAQ;AAAA,IACV;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,WAAW,CAAC,SAAA;AAChC,EAAA,MAAM,YAAA,GAAe,YAAY,CAAC,SAAA;AAGlC,EAAA,MAAM,aAAA,GAAgB,WAAA,IAAe,OAAO,OAAA,KAAY,UAAA;AACxD,EAAA,MAAM,UAAA,GAAa,gBAAgB,QAAA,GAAW,KAAA;AAE9C,EAAA,uBACE,IAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,WAAA,CAAY;AAAA,UACV,IAAA;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,WAAA,EAAa;AAAA,SACd,CAAA;AAAA,QACD;AAAA,OACF;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,SAAA,EAAW,aAAA;AAAA,MACX,IAAA,EAAM,aAAA,GAAiB,IAAA,IAAQ,QAAA,GAAY,MAAA;AAAA,MAE1C,QAAA,EAAA;AAAA,QAAA,CAAC,6BACA,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,WAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gFAAA,EACZ,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,0BAEF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4DAAA,EACZ,QAAA,EACH,CAAA;AAAA,UACC,YAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kFACZ,QAAA,EAAA,QAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGD,6BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gFAAA,EACZ,qBAAW,QAAA,EACd;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"tag.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { KeyboardEvent } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { TagProps } from \"./types\";\n\nconst tagVariants = cva(\n  // Base styles\n  \"inline-flex items-center justify-center rounded-full box-border relative font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/60 focus-visible:ring-offset-0\",\n  {\n    variants: {\n      selected: {\n        false:\n          \"text-primary ring ring-primary ring-offset-0 focus-visible:bg-primary focus-visible:text-primary\",\n        true: \"bg-primary text-primary-foreground dark:text-primary-foreground focus-visible:bg-primary focus-visible:text-primary-foreground dark:focus-visible:bg-primary dark:focus-visible:text-primary-foreground\",\n      },\n      interactive: {\n        false: null,\n        true: \"cursor-pointer\",\n      },\n      size: {\n        md: null,\n        lg: null,\n      },\n      collapsed: {\n        false: null,\n        true: null,\n      },\n    },\n    defaultVariants: {\n      selected: false,\n      interactive: false,\n      size: \"md\",\n      collapsed: false,\n    },\n    compoundVariants: [\n      // Interactive hover states\n      {\n        interactive: true,\n        selected: false,\n        class: \"hover:ring-2 hover:ring-primary active:ring-1\",\n      },\n      {\n        interactive: true,\n        selected: true,\n        class: \"hover:bg-primary/90\",\n      },\n      // Interactive active states\n      {\n        interactive: true,\n        selected: false,\n        class: \"active:ring active:ring-primary\",\n      },\n      {\n        interactive: true,\n        selected: true,\n        class: \"active:bg-primary\",\n      },\n      // Size variants (non-collapsed)\n      {\n        size: \"md\",\n        collapsed: false,\n        class: \"px-2 py-1.5 gap-0.5\",\n      },\n      {\n        size: \"lg\",\n        collapsed: false,\n        class: \"px-3 py-2.5 gap-1\",\n      },\n      // Collapsed size adjustments\n      {\n        size: \"md\",\n        collapsed: true,\n        class: \"p-1.5 w-8 h-8\",\n      },\n      {\n        size: \"lg\",\n        collapsed: true,\n        class: \"p-2.5 w-10 h-10\",\n      },\n    ],\n  },\n);\n\nexport function Tag({\n  size = \"md\",\n  selected = false,\n  collapsed = false,\n  children,\n  leading,\n  trailing,\n  interactive,\n  type,\n  onClick,\n  className = \"\",\n}: TagProps) {\n  const handleClick = () => {\n    if (onClick) {\n      onClick();\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n    if (onClick && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const showLeading = leading && !collapsed;\n  const showTrailing = trailing && !collapsed;\n\n  // Explicit interactive prop takes precedence; otherwise detect from onClick\n  const isInteractive = interactive ?? typeof onClick === \"function\";\n  const TagElement = isInteractive ? \"button\" : \"div\";\n\n  return (\n    <TagElement\n      className={cn(\n        tagVariants({\n          size,\n          selected,\n          collapsed,\n          interactive: isInteractive,\n        }),\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      type={isInteractive ? (type ?? \"button\") : undefined}\n    >\n      {!collapsed && (\n        <>\n          {showLeading && (\n            <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n              {leading}\n            </div>\n          )}\n          <div className=\"flex items-center justify-center px-1 first:pl-0 last:pr-0\">\n            {children}\n          </div>\n          {showTrailing && (\n            <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n              {trailing}\n            </div>\n          )}\n        </>\n      )}\n\n      {collapsed && (\n        <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n          {leading || trailing}\n        </div>\n      )}\n    </TagElement>\n  );\n}\n"]}

package/dist/template-header.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/template-header/template-header.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var templateHeaderVariants = classVarianceAuthority.cva(
+  "mx-auto flex w-full max-w-2xl flex-col items-center justify-center gap-2.5 py-12"
+);
+function TemplateHeader({ className, image }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      "data-slot": "template-header",
+      className: cn("drop-shadow-3xl drop-shadow-primary/30", templateHeaderVariants(), className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex aspect-146/85 max-h-[596px] max-w-2xl shrink-0 items-center justify-between self-stretch", children: image })
+    }
+  );
+}
+
+exports.TemplateHeader = TemplateHeader;
+//# sourceMappingURL=template-header.cjs.map
+//# sourceMappingURL=template-header.cjs.map

package/dist/template-header.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/template-header/template-header.tsx"],"names":["twMerge","clsx","cva","jsx"],"mappings":";;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACAA,IAAM,sBAAA,GAAyBC,0BAAA;AAAA,EAC7B;AACF,CAAA;AAEO,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,KAAA,EAAM,EAAwB;AACxE,EAAA,uBACEC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,wCAAA,EAA0C,sBAAA,IAA0B,SAAS,CAAA;AAAA,MAE3F,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uGAAA,EACZ,QAAA,EAAA,KAAA,EACH;AAAA;AAAA,GACF;AAEJ","file":"template-header.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { TemplateHeaderProps } from \"./types\";\n\nconst templateHeaderVariants = cva(\n  \"mx-auto flex w-full max-w-2xl flex-col items-center justify-center gap-2.5 py-12\",\n);\n\nexport function TemplateHeader({ className, image }: TemplateHeaderProps) {\n  return (\n    <header\n      data-slot=\"template-header\"\n      className={cn(\"drop-shadow-3xl drop-shadow-primary/30\", templateHeaderVariants(), className)}\n    >\n      <div className=\"mx-auto flex aspect-146/85 max-h-[596px] max-w-2xl shrink-0 items-center justify-between self-stretch\">\n        {image}\n      </div>\n    </header>\n  );\n}\n"]}

package/dist/template-header.d.cts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface TemplateHeaderProps {
+  /** Image of the template */
+  image: React.ReactNode;
+  /** className for consumer overrides */
+  className?: string;
+}
+
+declare function TemplateHeader({ className, image }: TemplateHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { TemplateHeader, type TemplateHeaderProps };

package/dist/template-header.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface TemplateHeaderProps {
+  /** Image of the template */
+  image: React.ReactNode;
+  /** className for consumer overrides */
+  className?: string;
+}
+
+declare function TemplateHeader({ className, image }: TemplateHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { TemplateHeader, type TemplateHeaderProps };