@popgrids/ui 0.0.11 → 0.0.13

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","jsx","TooltipPrimitive","jsxs","useState","useCallback","useEffect","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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  children,\n  positionerProps,\n  ...props\n}: TooltipPrimitive.Popup.Props & {\n  positionerProps?: Omit<React.ComponentProps<typeof TooltipPrimitive.Positioner>, \"children\">;\n}) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner {...positionerProps} className=\"isolate z-50\">\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-[8px] px-3 py-2 text-xs font-medium\",\n            className,\n          )}\n          {...props}\n        >\n          <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:-translate-y-1/2 data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-translate-y-1/2 data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:-translate-x-1/2 data-[side=top]:rotate-180\">\n            <TooltipArrow />\n          </TooltipPrimitive.Arrow>\n          {children}\n          <TooltipPrimitive.Arrow className=\"cn-tooltip-arrow bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nconst 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, TooltipArrow, 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                        positionerProps={{\n                          sideOffset: 2,\n                          alignOffset: 5,\n                          collisionAvoidance: {\n                            side: \"shift\",\n                            align: \"shift\",\n                            fallbackAxisSide: \"none\",\n                          },\n                          collisionPadding: 16,\n                        }}\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","jsx","TooltipPrimitive","jsxs","useState","useCallback","useEffect","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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  children,\n  positionerProps,\n  ...props\n}: TooltipPrimitive.Popup.Props & {\n  positionerProps?: Omit<React.ComponentProps<typeof TooltipPrimitive.Positioner>, \"children\">;\n}) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner {...positionerProps} className=\"isolate z-50\">\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-[8px] px-3 py-2 text-xs font-medium\",\n            className,\n          )}\n          {...props}\n        >\n          <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:-translate-y-1/2 data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-translate-y-1/2 data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:-translate-x-1/2 data-[side=top]:rotate-180\">\n            <TooltipArrow />\n          </TooltipPrimitive.Arrow>\n          {children}\n          <TooltipPrimitive.Arrow className=\"cn-tooltip-arrow bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nconst 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, TooltipArrow, 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                        positionerProps={{\n                          sideOffset: 2,\n                          alignOffset: 5,\n                          collisionAvoidance: {\n                            side: \"shift\",\n                            align: \"shift\",\n                            fallbackAxisSide: \"none\",\n                          },\n                          collisionPadding: 16,\n                        }}\n                      >\n                        <p>{description}</p>\n                      </TooltipContent>\n                    </Tooltip>\n                  )}\n                </>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/section-header.d.cts

@@ -1,2 +1,18 @@
-import 'react/jsx-runtime';
-export { S as SectionHeader } from './section-header-BWd0FD9Q.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SectionHeaderProps {
+  flourish?: React.ReactNode;
+  heading?: React.ReactNode;
+  icon?: React.ReactNode;
+  className?: string;
+  label?: string;
+  min?: number;
+  max?: number;
+  required?: boolean;
+  description?: string;
+  numberChecked?: number;
+}
+
+declare function SectionHeader({ className, flourish, heading, icon, label, min, max, required, description, numberChecked, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { SectionHeader, type SectionHeaderProps };

package/dist/section-header.d.ts

@@ -1,2 +1,18 @@
-import 'react/jsx-runtime';
-export { S as SectionHeader } from './section-header-BWd0FD9Q.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SectionHeaderProps {
+  flourish?: React.ReactNode;
+  heading?: React.ReactNode;
+  icon?: React.ReactNode;
+  className?: string;
+  label?: string;
+  min?: number;
+  max?: number;
+  required?: boolean;
+  description?: string;
+  numberChecked?: number;
+}
+
+declare function SectionHeader({ className, flourish, heading, icon, label, min, max, required, description, numberChecked, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { SectionHeader, type SectionHeaderProps };

package/dist/section-header.js

@@ -5,6 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+// src/components/section-header/section-header.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }

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({ 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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  children,\n  positionerProps,\n  ...props\n}: TooltipPrimitive.Popup.Props & {\n  positionerProps?: Omit<React.ComponentProps<typeof TooltipPrimitive.Positioner>, \"children\">;\n}) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner {...positionerProps} className=\"isolate z-50\">\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-[8px] px-3 py-2 text-xs font-medium\",\n            className,\n          )}\n          {...props}\n        >\n          <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:-translate-y-1/2 data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-translate-y-1/2 data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:-translate-x-1/2 data-[side=top]:rotate-180\">\n            <TooltipArrow />\n          </TooltipPrimitive.Arrow>\n          {children}\n          <TooltipPrimitive.Arrow className=\"cn-tooltip-arrow bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nconst 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, TooltipArrow, 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                        positionerProps={{\n                          sideOffset: 2,\n                          alignOffset: 5,\n                          collisionAvoidance: {\n                            side: \"shift\",\n                            align: \"shift\",\n                            fallbackAxisSide: \"none\",\n                          },\n                          collisionPadding: 16,\n                        }}\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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  children,\n  positionerProps,\n  ...props\n}: TooltipPrimitive.Popup.Props & {\n  positionerProps?: Omit<React.ComponentProps<typeof TooltipPrimitive.Positioner>, \"children\">;\n}) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner {...positionerProps} className=\"isolate z-50\">\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-[8px] px-3 py-2 text-xs font-medium\",\n            className,\n          )}\n          {...props}\n        >\n          <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:-translate-y-1/2 data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-translate-y-1/2 data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:-translate-x-1/2 data-[side=top]:rotate-180\">\n            <TooltipArrow />\n          </TooltipPrimitive.Arrow>\n          {children}\n          <TooltipPrimitive.Arrow className=\"cn-tooltip-arrow bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nconst 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, TooltipArrow, 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                        positionerProps={{\n                          sideOffset: 2,\n                          alignOffset: 5,\n                          collisionAvoidance: {\n                            side: \"shift\",\n                            align: \"shift\",\n                            fallbackAxisSide: \"none\",\n                          },\n                          collisionPadding: 16,\n                        }}\n                      >\n                        <p>{description}</p>\n                      </TooltipContent>\n                    </Tooltip>\n                  )}\n                </>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/tag.cjs

@@ -0,0 +1,141 @@
+'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/tag/tag.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var tagVariants = classVarianceAuthority.cva(
+  // Base styles
+  "inline-flex items-center justify-center rounded-full box-border relative transition-all duration-150 ease-in-out font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[rgba(21,94,239,0.6)] focus-visible:ring-offset-0",
+  {
+    variants: {
+      selected: {
+        false: "bg-background 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 focus-visible:bg-primary-foreground focus-visible:text-white"
+      },
+      interactive: {
+        false: null,
+        true: "cursor-pointer"
+      },
+      size: {
+        md: null,
+        lg: null
+      },
+      collapsed: {
+        false: null,
+        true: null
+      }
+    },
+    defaultVariants: {
+      selected: true,
+      interactive: false,
+      size: "md",
+      collapsed: false
+    },
+    compoundVariants: [
+      // Interactive hover states
+      {
+        interactive: true,
+        selected: false,
+        class: "hover:ring-2 hover:ring-primary-foreground"
+      },
+      {
+        interactive: true,
+        selected: true,
+        class: "hover:bg-primary-foreground/90"
+      },
+      // Interactive active states
+      {
+        interactive: true,
+        selected: false,
+        class: "active:ring active:ring-primary-foreground"
+      },
+      {
+        interactive: true,
+        selected: true,
+        class: "active:bg-primary-foreground"
+      },
+      // Size variants (non-collapsed)
+      {
+        size: "md",
+        collapsed: false,
+        class: "px-2 py-1.5 gap-0.5"
+      },
+      {
+        size: "lg",
+        collapsed: false,
+        class: "px-3 py-2.5 gap-1"
+      },
+      // Collapsed size adjustments
+      {
+        size: "md",
+        collapsed: true,
+        class: "p-1.5 w-8 h-8"
+      },
+      {
+        size: "lg",
+        collapsed: true,
+        class: "p-2.5 w-10 h-10"
+      }
+    ]
+  }
+);
+function Tag({
+  size = "md",
+  selected = true,
+  collapsed = false,
+  children,
+  leading,
+  trailing,
+  onClick,
+  className = ""
+}) {
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (onClick && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onClick();
+    }
+  };
+  const showLeading = leading && !collapsed;
+  const showTrailing = trailing && !collapsed;
+  const TagElement = onClick ? "button" : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TagElement,
+    {
+      className: cn(
+        tagVariants({
+          size,
+          selected,
+          collapsed,
+          interactive: !!onClick
+        }),
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      type: onClick ? "button" : void 0,
+      children: [
+        !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          showLeading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit", children: leading }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center px-1 first:pl-0 last:pr-0", children }),
+          showTrailing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit", children: trailing })
+        ] }),
+        collapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit", children: leading || trailing })
+      ]
+    }
+  );
+}
+
+exports.Tag = Tag;
+//# sourceMappingURL=tag.cjs.map
+//# sourceMappingURL=tag.cjs.map

package/dist/tag.cjs.map

@@ -0,0 +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","import { 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 transition-all duration-150 ease-in-out font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[rgba(21,94,239,0.6)] focus-visible:ring-offset-0\",\n  {\n    variants: {\n      selected: {\n        false:\n          \"bg-background 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 focus-visible:bg-primary-foreground focus-visible:text-white\",\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: true,\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\",\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 = true,\n  collapsed = false,\n  children,\n  leading,\n  trailing,\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  // Use button for interactive tags, div for non-interactive\n  const TagElement = onClick ? \"button\" : \"div\";\n\n  return (\n    <TagElement\n      className={cn(\n        tagVariants({\n          size,\n          selected,\n          collapsed,\n          interactive: !!onClick,\n        }),\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      type={onClick ? \"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.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TagProps {
+  size?: "md" | "lg";
+  selected?: boolean;
+  collapsed?: boolean;
+  children: React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+}
+
+declare function Tag({ size, selected, collapsed, children, leading, trailing, onClick, className, }: TagProps): react_jsx_runtime.JSX.Element;
+
+export { Tag, type TagProps };

package/dist/tag.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TagProps {
+  size?: "md" | "lg";
+  selected?: boolean;
+  collapsed?: boolean;
+  children: React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+}
+
+declare function Tag({ size, selected, collapsed, children, leading, trailing, onClick, className, }: TagProps): react_jsx_runtime.JSX.Element;
+
+export { Tag, type TagProps };

package/dist/tag.js

@@ -0,0 +1,139 @@
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/tag/tag.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var tagVariants = cva(
+  // Base styles
+  "inline-flex items-center justify-center rounded-full box-border relative transition-all duration-150 ease-in-out font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[rgba(21,94,239,0.6)] focus-visible:ring-offset-0",
+  {
+    variants: {
+      selected: {
+        false: "bg-background 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 focus-visible:bg-primary-foreground focus-visible:text-white"
+      },
+      interactive: {
+        false: null,
+        true: "cursor-pointer"
+      },
+      size: {
+        md: null,
+        lg: null
+      },
+      collapsed: {
+        false: null,
+        true: null
+      }
+    },
+    defaultVariants: {
+      selected: true,
+      interactive: false,
+      size: "md",
+      collapsed: false
+    },
+    compoundVariants: [
+      // Interactive hover states
+      {
+        interactive: true,
+        selected: false,
+        class: "hover:ring-2 hover:ring-primary-foreground"
+      },
+      {
+        interactive: true,
+        selected: true,
+        class: "hover:bg-primary-foreground/90"
+      },
+      // Interactive active states
+      {
+        interactive: true,
+        selected: false,
+        class: "active:ring active:ring-primary-foreground"
+      },
+      {
+        interactive: true,
+        selected: true,
+        class: "active:bg-primary-foreground"
+      },
+      // Size variants (non-collapsed)
+      {
+        size: "md",
+        collapsed: false,
+        class: "px-2 py-1.5 gap-0.5"
+      },
+      {
+        size: "lg",
+        collapsed: false,
+        class: "px-3 py-2.5 gap-1"
+      },
+      // Collapsed size adjustments
+      {
+        size: "md",
+        collapsed: true,
+        class: "p-1.5 w-8 h-8"
+      },
+      {
+        size: "lg",
+        collapsed: true,
+        class: "p-2.5 w-10 h-10"
+      }
+    ]
+  }
+);
+function Tag({
+  size = "md",
+  selected = true,
+  collapsed = false,
+  children,
+  leading,
+  trailing,
+  onClick,
+  className = ""
+}) {
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (onClick && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onClick();
+    }
+  };
+  const showLeading = leading && !collapsed;
+  const showTrailing = trailing && !collapsed;
+  const TagElement = onClick ? "button" : "div";
+  return /* @__PURE__ */ jsxs(
+    TagElement,
+    {
+      className: cn(
+        tagVariants({
+          size,
+          selected,
+          collapsed,
+          interactive: !!onClick
+        }),
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      type: onClick ? "button" : void 0,
+      children: [
+        !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+          showLeading && /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit", children: leading }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center px-1 first:pl-0 last:pr-0", children }),
+          showTrailing && /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit", children: trailing })
+        ] }),
+        collapsed && /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit", children: leading || trailing })
+      ]
+    }
+  );
+}
+
+export { Tag };
+//# sourceMappingURL=tag.js.map
+//# sourceMappingURL=tag.js.map

package/dist/tag.js.map

@@ -0,0 +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","import { 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 transition-all duration-150 ease-in-out font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[rgba(21,94,239,0.6)] focus-visible:ring-offset-0\",\n  {\n    variants: {\n      selected: {\n        false:\n          \"bg-background 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 focus-visible:bg-primary-foreground focus-visible:text-white\",\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: true,\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\",\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 = true,\n  collapsed = false,\n  children,\n  leading,\n  trailing,\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  // Use button for interactive tags, div for non-interactive\n  const TagElement = onClick ? \"button\" : \"div\";\n\n  return (\n    <TagElement\n      className={cn(\n        tagVariants({\n          size,\n          selected,\n          collapsed,\n          interactive: !!onClick,\n        }),\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      type={onClick ? \"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/package.json

@@ -158,6 +158,16 @@
         "default": "./dist/section-header.cjs"
       }
     },
+    "./tag": {
+      "import": {
+        "types": "./dist/tag.d.ts",
+        "default": "./dist/tag.js"
+      },
+      "require": {
+        "types": "./dist/tag.d.cts",
+        "default": "./dist/tag.cjs"
+      }
+    },
     "./tooltip": {
       "import": {
         "types": "./dist/tooltip.d.ts",
@@ -231,7 +241,7 @@
   ],
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "scripts": {
     "analyze": "pnpm tsup && pnpm dlx esbuild-visualizer --metadata ./dist/metafile-esm.json --open",
     "build": "tsup",

package/dist/button-D4TdCwoe.d.cts

@@ -1,21 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { useRender } from '@base-ui/react/use-render';
-
-interface ButtonProps extends useRender.ComponentProps<"button"> {
-  className?: string;
-  collapsed?: boolean;
-  variant?: "default" | "outline" | "primary" | "secondary" | "tertiary";
-  align?: "left" | "center" | "right";
-  outline?: boolean;
-  pill?: boolean;
-  size?: "default" | "lg";
-  theme?: "base" | "brand" | "error";
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  nativeButton?: boolean;
-  focusableWhenDisabled?: boolean;
-}
-
-declare function Button({ className, children, collapsed, variant, align, outline, pill, size, theme, leading, trailing, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-export { Button as B, type ButtonProps as a };

package/dist/button-D4TdCwoe.d.ts

@@ -1,21 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { useRender } from '@base-ui/react/use-render';
-
-interface ButtonProps extends useRender.ComponentProps<"button"> {
-  className?: string;
-  collapsed?: boolean;
-  variant?: "default" | "outline" | "primary" | "secondary" | "tertiary";
-  align?: "left" | "center" | "right";
-  outline?: boolean;
-  pill?: boolean;
-  size?: "default" | "lg";
-  theme?: "base" | "brand" | "error";
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  nativeButton?: boolean;
-  focusableWhenDisabled?: boolean;
-}
-
-declare function Button({ className, children, collapsed, variant, align, outline, pill, size, theme, leading, trailing, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-export { Button as B, type ButtonProps as a };

package/dist/loader-xdvZkRei.d.cts

@@ -1,20 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface LoaderProps extends React.ComponentProps<"div"> {
-  /**
-   * Controls the color scheme. Options: 'default', 'reversed', 'black', 'white'.
-   */
-  theme?: "default" | "reversed" | "black" | "white";
-  /**
-   * Determines the loading animation style. Options: 'spinner', 'loader'.
-   */
-  variant?: "spinner" | "loader";
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-}
-
-declare function Loader({ theme, variant, className, style, ...props }: LoaderProps): react_jsx_runtime.JSX.Element;
-
-export { Loader as L, type LoaderProps as a };

package/dist/loader-xdvZkRei.d.ts

@@ -1,20 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface LoaderProps extends React.ComponentProps<"div"> {
-  /**
-   * Controls the color scheme. Options: 'default', 'reversed', 'black', 'white'.
-   */
-  theme?: "default" | "reversed" | "black" | "white";
-  /**
-   * Determines the loading animation style. Options: 'spinner', 'loader'.
-   */
-  variant?: "spinner" | "loader";
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-}
-
-declare function Loader({ theme, variant, className, style, ...props }: LoaderProps): react_jsx_runtime.JSX.Element;
-
-export { Loader as L, type LoaderProps as a };