@lglab/compose-ui 0.28.0 → 0.29.0

package/dist/tooltip.js

@@ -1,93 +1,68 @@
-"use client";
-import { jsx as r } from "react/jsx-runtime";
-import { Tooltip as a } from "@base-ui/react/tooltip";
-import * as l from "react";
-import { A as c } from "./arrow-svg-C6zQTvgS.js";
-import { cva as f } from "class-variance-authority";
-import { c as e } from "./utils-B6yFEsav.js";
-const u = f(
-  [
-    "rounded-md px-2 py-1 text-sm",
-    "origin-(--transform-origin)",
-    "transition-[transform,scale,opacity]",
-    "data-starting-style:scale-90 data-starting-style:opacity-0",
-    "data-ending-style:scale-90 data-ending-style:opacity-0",
-    "data-instant:duration-0"
-  ],
-  {
-    variants: {
-      variant: {
-        default: "bg-foreground text-background",
-        secondary: "bg-secondary text-secondary-foreground",
-        outline: "bg-background text-foreground border border-border shadow-xs"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-), m = {
-  default: {
-    fill: "fill-foreground",
-    stroke: "fill-foreground"
-  },
-  secondary: {
-    fill: "fill-secondary",
-    stroke: "fill-secondary"
-  },
-  outline: {
-    fill: "fill-background",
-    stroke: "fill-border"
-  }
-}, n = l.createContext("default"), g = (t) => /* @__PURE__ */ r(a.Provider, { ...t });
-g.displayName = "TooltipProvider";
-const y = ({ variant: t = "default", ...o }) => /* @__PURE__ */ r(n.Provider, { value: t, children: /* @__PURE__ */ r(a.Root, { ...o }) });
-y.displayName = "TooltipRoot";
-const x = ({ className: t, ...o }) => /* @__PURE__ */ r(a.Trigger, { className: e(t), delay: 200, ...o });
-x.displayName = "TooltipTrigger";
-const T = (t) => /* @__PURE__ */ r(a.Portal, { ...t });
-T.displayName = "TooltipPortal";
-const v = ({ className: t, ...o }) => /* @__PURE__ */ r(
-  a.Positioner,
-  {
-    className: e("z-50 outline-none", t),
-    sideOffset: 8,
-    ...o
-  }
-);
-v.displayName = "TooltipPositioner";
-const P = ({ className: t, variant: o, ...i }) => {
-  const s = l.useContext(n), d = o ?? s;
-  return /* @__PURE__ */ r(
-    a.Popup,
-    {
-      className: e(u({ variant: d }), t),
-      ...i
-    }
-  );
+'use client';
+
+import { cn } from "./lib/utils.js";
+import { ArrowSvg } from "./lib/arrow-svg.js";
+import { tooltipArrowVariants, tooltipPopupVariants } from "./lib/tooltip-variants.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+
+//#region src/components/tooltip.tsx
+const TooltipVariantContext = React.createContext("default");
+const TooltipProvider = (props) => {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, { ...props });
 };
-P.displayName = "TooltipPopup";
-const N = ({ className: t, variant: o, ...i }) => {
-  const s = l.useContext(n), p = m[o ?? s];
-  return /* @__PURE__ */ r(
-    a.Arrow,
-    {
-      className: e(
-        "flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
-        t
-      ),
-      ...i,
-      children: /* @__PURE__ */ r(c, { fillClassName: p.fill, strokeClassName: p.stroke })
-    }
-  );
+TooltipProvider.displayName = "TooltipProvider";
+const TooltipRoot = ({ variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(TooltipVariantContext.Provider, {
+		value: variant,
+		children: /* @__PURE__ */ jsx(Tooltip.Root, { ...props })
+	});
 };
-N.displayName = "TooltipArrow";
-export {
-  N as TooltipArrow,
-  P as TooltipPopup,
-  T as TooltipPortal,
-  v as TooltipPositioner,
-  g as TooltipProvider,
-  y as TooltipRoot,
-  x as TooltipTrigger
+TooltipRoot.displayName = "TooltipRoot";
+const TooltipTrigger = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		className: cn(className),
+		delay: 200,
+		...props
+	});
 };
+TooltipTrigger.displayName = "TooltipTrigger";
+const TooltipPortal = (props) => {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { ...props });
+};
+TooltipPortal.displayName = "TooltipPortal";
+const TooltipPositioner = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		className: cn("z-50 outline-none", className),
+		sideOffset: 8,
+		...props
+	});
+};
+TooltipPositioner.displayName = "TooltipPositioner";
+const TooltipPopup = ({ className, variant, ...props }) => {
+	const contextVariant = React.useContext(TooltipVariantContext);
+	const resolvedVariant = variant ?? contextVariant;
+	return /* @__PURE__ */ jsx(Tooltip.Popup, {
+		className: cn(tooltipPopupVariants({ variant: resolvedVariant }), className),
+		...props
+	});
+};
+TooltipPopup.displayName = "TooltipPopup";
+const TooltipArrow = ({ className, variant, ...props }) => {
+	const contextVariant = React.useContext(TooltipVariantContext);
+	const arrowColors = tooltipArrowVariants[variant ?? contextVariant];
+	return /* @__PURE__ */ jsx(Tooltip.Arrow, {
+		className: cn("flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ArrowSvg, {
+			fillClassName: arrowColors.fill,
+			strokeClassName: arrowColors.stroke
+		})
+	});
+};
+TooltipArrow.displayName = "TooltipArrow";
+
+//#endregion
+export { TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger };
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":["BaseTooltip"],"sources":["../src/components/tooltip.tsx"],"sourcesContent":["'use client'\n\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'\nimport * as React from 'react'\n\nimport { ArrowSvg } from '../lib/arrow-svg'\nimport {\n  type TooltipVariant,\n  tooltipArrowVariants,\n  tooltipPopupVariants,\n} from '../lib/tooltip-variants'\nimport { cn } from '../lib/utils'\n\n// ============================================================================\n// TooltipVariantContext\n// ============================================================================\n\nconst TooltipVariantContext = React.createContext<TooltipVariant>('default')\n\n// ============================================================================\n// TooltipProvider\n// ============================================================================\n\ntype TooltipProviderProps = React.ComponentProps<typeof BaseTooltip.Provider>\n\nconst TooltipProvider = (props: TooltipProviderProps) => {\n  return <BaseTooltip.Provider {...props} />\n}\n\nTooltipProvider.displayName = 'TooltipProvider'\n\n// ============================================================================\n// TooltipRoot\n// ============================================================================\n\ntype TooltipRootProps = React.ComponentProps<typeof BaseTooltip.Root> & {\n  variant?: TooltipVariant\n}\n\nconst TooltipRoot = ({ variant = 'default', ...props }: TooltipRootProps) => {\n  return (\n    <TooltipVariantContext.Provider value={variant}>\n      <BaseTooltip.Root {...props} />\n    </TooltipVariantContext.Provider>\n  )\n}\n\nTooltipRoot.displayName = 'TooltipRoot'\n\n// ============================================================================\n// TooltipTrigger\n// ============================================================================\n\ntype TooltipTriggerProps = React.ComponentProps<typeof BaseTooltip.Trigger>\n\nconst TooltipTrigger = ({ className, ...props }: TooltipTriggerProps) => {\n  return <BaseTooltip.Trigger className={cn(className)} delay={200} {...props} />\n}\n\nTooltipTrigger.displayName = 'TooltipTrigger'\n\n// ============================================================================\n// TooltipPortal\n// ============================================================================\n\ntype TooltipPortalProps = React.ComponentProps<typeof BaseTooltip.Portal>\n\nconst TooltipPortal = (props: TooltipPortalProps) => {\n  return <BaseTooltip.Portal {...props} />\n}\n\nTooltipPortal.displayName = 'TooltipPortal'\n\n// ============================================================================\n// TooltipPositioner\n// ============================================================================\n\ntype TooltipPositionerProps = React.ComponentProps<typeof BaseTooltip.Positioner>\n\nconst TooltipPositioner = ({ className, ...props }: TooltipPositionerProps) => {\n  return (\n    <BaseTooltip.Positioner\n      className={cn('z-50 outline-none', className)}\n      sideOffset={8}\n      {...props}\n    />\n  )\n}\n\nTooltipPositioner.displayName = 'TooltipPositioner'\n\n// ============================================================================\n// TooltipPopup\n// ============================================================================\n\ntype TooltipPopupProps = React.ComponentProps<typeof BaseTooltip.Popup> & {\n  variant?: TooltipVariant\n}\n\nconst TooltipPopup = ({ className, variant, ...props }: TooltipPopupProps) => {\n  const contextVariant = React.useContext(TooltipVariantContext)\n  const resolvedVariant = variant ?? contextVariant\n\n  return (\n    <BaseTooltip.Popup\n      className={cn(tooltipPopupVariants({ variant: resolvedVariant }), className)}\n      {...props}\n    />\n  )\n}\n\nTooltipPopup.displayName = 'TooltipPopup'\n\n// ============================================================================\n// TooltipArrow\n// ============================================================================\n\ntype TooltipArrowProps = React.ComponentProps<typeof BaseTooltip.Arrow> & {\n  variant?: TooltipVariant\n}\n\nconst TooltipArrow = ({ className, variant, ...props }: TooltipArrowProps) => {\n  const contextVariant = React.useContext(TooltipVariantContext)\n  const resolvedVariant = variant ?? contextVariant\n  const arrowColors = tooltipArrowVariants[resolvedVariant]\n\n  return (\n    <BaseTooltip.Arrow\n      className={cn(\n        'flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n        className,\n      )}\n      {...props}\n    >\n      <ArrowSvg fillClassName={arrowColors.fill} strokeClassName={arrowColors.stroke} />\n    </BaseTooltip.Arrow>\n  )\n}\n\nTooltipArrow.displayName = 'TooltipArrow'\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n  TooltipProvider,\n  TooltipRoot,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipPositioner,\n  TooltipPopup,\n  TooltipArrow,\n}\n\nexport type {\n  TooltipProviderProps,\n  TooltipRootProps,\n  TooltipTriggerProps,\n  TooltipPortalProps,\n  TooltipPositionerProps,\n  TooltipPopupProps,\n  TooltipArrowProps,\n}\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,wBAAwB,MAAM,cAA8B,UAAU;AAQ5E,MAAM,mBAAmB,UAAgC;AACvD,QAAO,oBAACA,QAAY,YAAS,GAAI,QAAS;;AAG5C,gBAAgB,cAAc;AAU9B,MAAM,eAAe,EAAE,UAAU,WAAW,GAAG,YAA8B;AAC3E,QACE,oBAAC,sBAAsB;EAAS,OAAO;YACrC,oBAACA,QAAY,QAAK,GAAI,QAAS;GACA;;AAIrC,YAAY,cAAc;AAQ1B,MAAM,kBAAkB,EAAE,WAAW,GAAG,YAAiC;AACvE,QAAO,oBAACA,QAAY;EAAQ,WAAW,GAAG,UAAU;EAAE,OAAO;EAAK,GAAI;GAAS;;AAGjF,eAAe,cAAc;AAQ7B,MAAM,iBAAiB,UAA8B;AACnD,QAAO,oBAACA,QAAY,UAAO,GAAI,QAAS;;AAG1C,cAAc,cAAc;AAQ5B,MAAM,qBAAqB,EAAE,WAAW,GAAG,YAAoC;AAC7E,QACE,oBAACA,QAAY;EACX,WAAW,GAAG,qBAAqB,UAAU;EAC7C,YAAY;EACZ,GAAI;GACJ;;AAIN,kBAAkB,cAAc;AAUhC,MAAM,gBAAgB,EAAE,WAAW,SAAS,GAAG,YAA+B;CAC5E,MAAM,iBAAiB,MAAM,WAAW,sBAAsB;CAC9D,MAAM,kBAAkB,WAAW;AAEnC,QACE,oBAACA,QAAY;EACX,WAAW,GAAG,qBAAqB,EAAE,SAAS,iBAAiB,CAAC,EAAE,UAAU;EAC5E,GAAI;GACJ;;AAIN,aAAa,cAAc;AAU3B,MAAM,gBAAgB,EAAE,WAAW,SAAS,GAAG,YAA+B;CAC5E,MAAM,iBAAiB,MAAM,WAAW,sBAAsB;CAE9D,MAAM,cAAc,qBADI,WAAW;AAGnC,QACE,oBAACA,QAAY;EACX,WAAW,GACT,qNACA,UACD;EACD,GAAI;YAEJ,oBAAC;GAAS,eAAe,YAAY;GAAM,iBAAiB,YAAY;IAAU;GAChE;;AAIxB,aAAa,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lglab/compose-ui",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "A collection of components built with Base UI & Tailwind CSS",
   "author": "LGLab",
   "license": "MIT",
@@ -150,6 +150,10 @@
       "import": "./dist/separator.js",
       "types": "./dist/separator.d.ts"
     },
+    "./skeleton": {
+      "import": "./dist/skeleton.js",
+      "types": "./dist/skeleton.d.ts"
+    },
     "./slider": {
       "import": "./dist/slider.js",
       "types": "./dist/slider.d.ts"
@@ -209,18 +213,14 @@
     "@types/node": "^25.0.10",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
     "globals": "^17.1.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "rollup-preserve-directives": "^1.1.3",
+    "tsdown": "^0.12.5",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.53.1",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-static-copy": "^3.1.6"
+    "typescript-eslint": "^8.53.1"
   },
   "scripts": {
-    "build": "tsc -b && vite build"
+    "build": "tsdown"
   }
 }

package/dist/arrow-svg-C6zQTvgS.js

@@ -1,40 +0,0 @@
-"use client";
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { c as o } from "./utils-B6yFEsav.js";
-function n({
-  fillClassName: s = "fill-background",
-  strokeClassName: e = "fill-border",
-  className: a,
-  ...i
-}) {
-  return /* @__PURE__ */ l(
-    "svg",
-    {
-      width: "20",
-      height: "10",
-      viewBox: "0 0 20 10",
-      fill: "none",
-      className: o(a),
-      ...i,
-      children: [
-        /* @__PURE__ */ r(
-          "path",
-          {
-            d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-            className: s
-          }
-        ),
-        /* @__PURE__ */ r(
-          "path",
-          {
-            d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
-            className: e
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  n as A
-};

package/dist/button-variants-CbFMPwc8.js

@@ -1,33 +0,0 @@
-import { cva as e } from "class-variance-authority";
-const t = e(
-  [
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all select-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
-  ],
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-export {
-  t as b
-};

package/dist/control-variants-Bwep4n0y.js

@@ -1,37 +0,0 @@
-import { cva as e } from "class-variance-authority";
-const a = e(
-  [
-    "inline-flex items-center justify-center gap-2 rounded-md",
-    "text-sm font-medium",
-    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
-    "select-none transition-colors duration-200",
-    "border border-border bg-background shadow-xs"
-  ],
-  {
-    variants: {
-      variant: {
-        default: [
-          "hover:bg-accent hover:text-accent-foreground",
-          "data-pressed:border-primary data-pressed:bg-primary data-pressed:text-primary-foreground data-pressed:shadow-none",
-          "data-popup-open:border-primary data-popup-open:bg-primary data-popup-open:text-primary-foreground data-popup-open:shadow-none"
-        ],
-        ghost: ["hover:bg-accent"]
-      },
-      size: {
-        sm: "h-8 min-w-8 px-2.5 gap-1.5",
-        default: "h-9 min-w-9 px-3",
-        lg: "h-10 min-w-10 px-3.5",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-export {
-  a as c
-};

package/dist/form-variants-LJ8gIbk0.js

@@ -1,9 +0,0 @@
-const e = "flex w-full rounded-md text-sm h-9 px-3 bg-transparent text-foreground border border-input transition-colors duration-200 placeholder:text-muted-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20", t = "flex items-center gap-2 text-sm font-medium text-foreground data-disabled:opacity-50", r = "text-sm text-muted-foreground", s = "text-sm text-destructive", o = "flex flex-col gap-1.5", a = "flex items-center gap-2";
-export {
-  o as a,
-  r as d,
-  s as e,
-  a as f,
-  e as i,
-  t as l
-};

package/dist/utils-B6yFEsav.js

@@ -1,8 +0,0 @@
-import { clsx as o } from "clsx";
-import { twMerge as t } from "tailwind-merge";
-function m(...r) {
-  return t(o(r));
-}
-export {
-  m as c
-};