@popgrids/ui 0.0.12 → 0.0.13

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.12",
+  "version": "0.0.13",
   "scripts": {
     "analyze": "pnpm tsup && pnpm dlx esbuild-visualizer --metadata ./dist/metafile-esm.json --open",
     "build": "tsup",