@popgrids/ui 0.0.9 → 0.0.11

package/dist/tooltip.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+var tooltip = require('@base-ui/react/tooltip');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function TooltipProvider({ delay = 0, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Provider, { "data-slot": "tooltip-provider", delay, ...props });
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  children,
+  positionerProps,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Positioner, { ...positionerProps, className: "isolate z-50", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    tooltip.Tooltip.Popup,
+    {
+      "data-slot": "tooltip-content",
+      className: cn(
+        "bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-[8px] px-3 py-2 text-xs font-medium",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.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", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipArrow, {}) }),
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.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" })
+      ]
+    }
+  ) }) });
+}
+var TooltipArrow = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "6",
+      viewBox: "382.134 241.548 20 6",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Tooltip Arrow" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: "fill-foreground",
+            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"
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.Tooltip = Tooltip;
+exports.TooltipArrow = TooltipArrow;
+exports.TooltipContent = TooltipContent;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipTrigger = TooltipTrigger;
+//# sourceMappingURL=tooltip.cjs.map
+//# sourceMappingURL=tooltip.cjs.map

package/dist/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx"],"names":["twMerge","clsx","jsx","TooltipPrimitive","jsxs"],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,SAAS,gBAAgB,EAAE,KAAA,GAAQ,CAAA,EAAG,GAAG,OAAM,EAAoC;AACjF,EAAA,uBAAOC,cAAA,CAACC,gBAAiB,QAAA,EAAjB,EAA0B,aAAU,kBAAA,EAAmB,KAAA,EAAe,GAAG,KAAA,EAAO,CAAA;AAC1F;AAEA,SAAS,OAAA,CAAQ,EAAE,GAAG,KAAA,EAAM,EAAgC;AAC1D,EAAA,uBACED,cAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAACC,eAAA,CAAiB,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA,EACxD,CAAA;AAEJ;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,QAAA;AAAA,EACA,eAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEG;AACD,EAAA,uBACED,cAAA,CAACC,eAAA,CAAiB,MAAA,EAAjB,EACC,QAAA,kBAAAD,cAAA,CAACC,eAAA,CAAiB,UAAA,EAAjB,EAA6B,GAAG,eAAA,EAAiB,SAAA,EAAU,cAAA,EAC1D,QAAA,kBAAAC,eAAA;AAAA,IAACD,eAAA,CAAiB,KAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,2HAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAACC,gBAAiB,KAAA,EAAjB,EAAuB,WAAU,yXAAA,EAChC,QAAA,kBAAAD,cAAA,CAAC,gBAAa,CAAA,EAChB,CAAA;AAAA,QACC,QAAA;AAAA,wBACDA,cAAA,CAACC,eAAA,CAAiB,KAAA,EAAjB,EAAuB,WAAU,wRAAA,EAAyR;AAAA;AAAA;AAAA,KAE/T,CAAA,EACF,CAAA;AAEJ;AAEA,IAAM,YAAA,GAAe,CAAC,KAAA,KAAuC;AAC3D,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,wBAAAF,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","file":"tooltip.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"]}

package/dist/tooltip.d.cts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+
+declare function TooltipProvider({ delay, ...props }: Tooltip$1.Provider.Props): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ ...props }: Tooltip$1.Root.Props): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ ...props }: Tooltip$1.Trigger.Props): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, children, positionerProps, ...props }: Tooltip$1.Popup.Props & {
+    positionerProps?: Omit<React.ComponentProps<typeof Tooltip$1.Positioner>, "children">;
+}): react_jsx_runtime.JSX.Element;
+declare const TooltipArrow: (props: React.ComponentProps<"svg">) => react_jsx_runtime.JSX.Element;
+
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+
+declare function TooltipProvider({ delay, ...props }: Tooltip$1.Provider.Props): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ ...props }: Tooltip$1.Root.Props): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ ...props }: Tooltip$1.Trigger.Props): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, children, positionerProps, ...props }: Tooltip$1.Popup.Props & {
+    positionerProps?: Omit<React.ComponentProps<typeof Tooltip$1.Positioner>, "children">;
+}): react_jsx_runtime.JSX.Element;
+declare const TooltipArrow: (props: React.ComponentProps<"svg">) => react_jsx_runtime.JSX.Element;
+
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip.js

@@ -0,0 +1,66 @@
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function TooltipProvider({ delay = 0, ...props }) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { "data-slot": "tooltip-provider", delay, ...props });
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  children,
+  positionerProps,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { ...positionerProps, className: "isolate z-50", children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Popup,
+    {
+      "data-slot": "tooltip-content",
+      className: cn(
+        "bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-[8px] px-3 py-2 text-xs font-medium",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Tooltip$1.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", children: /* @__PURE__ */ jsx(TooltipArrow, {}) }),
+        children,
+        /* @__PURE__ */ jsx(Tooltip$1.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" })
+      ]
+    }
+  ) }) });
+}
+var TooltipArrow = (props) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "6",
+      viewBox: "382.134 241.548 20 6",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Tooltip Arrow" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "fill-foreground",
+            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"
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=tooltip.js.map
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx"],"names":["TooltipPrimitive"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,SAAS,gBAAgB,EAAE,KAAA,GAAQ,CAAA,EAAG,GAAG,OAAM,EAAoC;AACjF,EAAA,uBAAO,GAAA,CAACA,UAAiB,QAAA,EAAjB,EAA0B,aAAU,kBAAA,EAAmB,KAAA,EAAe,GAAG,KAAA,EAAO,CAAA;AAC1F;AAEA,SAAS,OAAA,CAAQ,EAAE,GAAG,KAAA,EAAM,EAAgC;AAC1D,EAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAACA,SAAA,CAAiB,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA,EACxD,CAAA;AAEJ;AAEA,SAAS,cAAA,CAAe,EAAE,GAAG,KAAA,EAAM,EAAmC;AACpE,EAAA,2BAAQA,SAAA,CAAiB,OAAA,EAAjB,EAAyB,WAAA,EAAU,iBAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AAC1E;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEG;AACD,EAAA,uBACE,GAAA,CAACA,SAAA,CAAiB,MAAA,EAAjB,EACC,QAAA,kBAAA,GAAA,CAACA,SAAA,CAAiB,UAAA,EAAjB,EAA6B,GAAG,eAAA,EAAiB,SAAA,EAAU,cAAA,EAC1D,QAAA,kBAAA,IAAA;AAAA,IAACA,SAAA,CAAiB,KAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,2HAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAACA,UAAiB,KAAA,EAAjB,EAAuB,WAAU,yXAAA,EAChC,QAAA,kBAAA,GAAA,CAAC,gBAAa,CAAA,EAChB,CAAA;AAAA,QACC,QAAA;AAAA,wBACD,GAAA,CAACA,SAAA,CAAiB,KAAA,EAAjB,EAAuB,WAAU,wRAAA,EAAyR;AAAA;AAAA;AAAA,KAE/T,CAAA,EACF,CAAA;AAEJ;AAEA,IAAM,YAAA,GAAe,CAAC,KAAA,KAAuC;AAC3D,EAAA,uBACE,IAAA;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,wBAAA,GAAA,CAAC,WAAM,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,wBACpB,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,iBAAA;AAAA,YACV,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA;AAAA,GACF;AAEJ","file":"tooltip.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"]}

package/package.json

@@ -1,28 +1,29 @@
 {
   "author": "PopGrids",
   "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "@untitledui/icons": "^0.0.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0"
   },
-  "description": "A modern, production-ready React UI component library based on shadcn/ui principles, built with Radix UI primitives and optimized for tree-shaking.",
+  "description": "A modern, production-ready React UI component library based on shadcn/ui principles, built with Base UI primitives and optimized for tree-shaking.",
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource/poppins": "^5.2.7",
     "@size-limit/preset-small-lib": "^12.0.0",
     "@size-limit/time": "^12.0.0",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/builder-vite": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^25.0.3",
     "@types/react": "^18.2.0 || ^19.0.0",
     "@types/react-dom": "^18.2.0 || ^19.0.0",
-    "@untitledui/icons": "^0.0.19",
+    "esbuild-visualizer": "^0.7.0",
     "fast-glob": "^3.3.3",
     "prettier": "^3.7.4",
     "prettier-plugin-tailwindcss": "^0.7.2",
@@ -30,9 +31,11 @@
     "react-dom": "^19.0.0",
     "shadcn": "^3.6.2",
     "size-limit": "^12.0.0",
+    "storybook": "^10.1.10",
     "tailwindcss": "^4.0.0",
     "tsup": "^8.3.5",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "vite": "^7.3.0"
   },
   "exports": {
     ".": {
@@ -115,6 +118,26 @@
         "default": "./dist/label.cjs"
       }
     },
+    "./loader": {
+      "import": {
+        "types": "./dist/loader.d.ts",
+        "default": "./dist/loader.js"
+      },
+      "require": {
+        "types": "./dist/loader.d.cts",
+        "default": "./dist/loader.cjs"
+      }
+    },
+    "./notification-badge": {
+      "import": {
+        "types": "./dist/notification-badge.d.ts",
+        "default": "./dist/notification-badge.js"
+      },
+      "require": {
+        "types": "./dist/notification-badge.d.cts",
+        "default": "./dist/notification-badge.cjs"
+      }
+    },
     "./section-flourish": {
       "import": {
         "types": "./dist/section-flourish.d.ts",
@@ -125,6 +148,26 @@
         "default": "./dist/section-flourish.cjs"
       }
     },
+    "./section-header": {
+      "import": {
+        "types": "./dist/section-header.d.ts",
+        "default": "./dist/section-header.js"
+      },
+      "require": {
+        "types": "./dist/section-header.d.cts",
+        "default": "./dist/section-header.cjs"
+      }
+    },
+    "./tooltip": {
+      "import": {
+        "types": "./dist/tooltip.d.ts",
+        "default": "./dist/tooltip.js"
+      },
+      "require": {
+        "types": "./dist/tooltip.d.cts",
+        "default": "./dist/tooltip.cjs"
+      }
+    },
     "./theme.css": "./dist/theme.css"
   },
   "files": [
@@ -134,35 +177,38 @@
     "react",
     "ui",
     "components",
+    "popgrids",
     "tailwind",
     "tailwindcss",
-    "shadcn",
-    "radix-ui",
     "tree-shakeable",
     "typescript"
   ],
-  "license": "UNLICENSED",
+  "license": "MIT",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "name": "@popgrids/ui",
   "peerDependencies": {
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-visually-hidden": "^1.2.4",
-    "@untitledui/icons": "^0.0.19",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource/poppins": "^5.2.7",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
+    "@fontsource-variable/inter": {
+      "optional": false
+    },
+    "@fontsource/poppins": {
+      "optional": false
+    },
     "tailwindcss": {
       "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    },
+    "react": {
+      "optional": false
     }
   },
   "private": false,
@@ -173,19 +219,24 @@
     "type": "git",
     "url": "git+https://github.com/popgrids/popgrids-ui.git"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "size-limit": [
     {
-      "limit": "40 KB",
+      "limit": "100 KB",
       "path": "dist/index.js",
       "running": false
     }
   ],
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "scripts": {
+    "analyze": "pnpm tsup && pnpm dlx esbuild-visualizer --metadata ./dist/metafile-esm.json --open",
     "build": "tsup",
-    "size": "size-limit"
+    "size": "size-limit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }