@lglab/compose-ui 0.23.0 → 0.25.0

package/dist/navigation-menu.js

@@ -0,0 +1,176 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { NavigationMenu as o } from "@base-ui/react/navigation-menu";
+import { A as c } from "./arrow-svg-C6zQTvgS.js";
+import { c as n } from "./utils-B6yFEsav.js";
+const i = [
+  "inline-flex items-center justify-center rounded-md text-sm font-medium outline-none select-none",
+  "h-9 px-4 py-2",
+  "transition-colors",
+  "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+  "focus:bg-accent focus:text-accent-foreground"
+], r = [
+  "group-data-content/content:block group-data-content/content:h-auto group-data-content/content:w-auto group-data-content/content:p-2",
+  "group-data-content/content:hover:bg-accent group-data-content/content:hover:text-accent-foreground"
+], l = ({ className: t, ...a }) => /* @__PURE__ */ e(o.Root, { className: n("min-w-max", t), ...a });
+l.displayName = "NavigationMenuRoot";
+const u = ({ className: t, ...a }) => /* @__PURE__ */ e(
+  o.List,
+  {
+    className: n("flex items-center gap-1 relative", t),
+    ...a
+  }
+);
+u.displayName = "NavigationMenuList";
+const g = ({ className: t, ...a }) => /* @__PURE__ */ e(o.Item, { className: n(t), ...a });
+g.displayName = "NavigationMenuItem";
+const p = ({ className: t, ...a }) => /* @__PURE__ */ e(
+  o.Trigger,
+  {
+    className: n(
+      i,
+      r,
+      "group gap-1",
+      "group-data-content/content:inline-flex group-data-content/content:w-full group-data-content/content:justify-between",
+      t
+    ),
+    ...a
+  }
+);
+p.displayName = "NavigationMenuTrigger";
+const m = ({ className: t, ...a }) => /* @__PURE__ */ e(
+  o.Icon,
+  {
+    className: n(
+      "transition-transform duration-200 ease-in-out",
+      "group-data-popup-open:rotate-180",
+      t
+    ),
+    ...a
+  }
+);
+m.displayName = "NavigationMenuIcon";
+const f = ({ className: t, ...a }) => /* @__PURE__ */ e(
+  o.Content,
+  {
+    "data-content": !0,
+    className: n(
+      "group/content",
+      "w-[calc(100vw-40px)] h-full p-2 xs:w-max xs:min-w-[400px] xs:w-max",
+      "transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]",
+      "data-starting-style:opacity-0 data-ending-style:opacity-0",
+      "data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%]",
+      "data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%]",
+      t
+    ),
+    ...a
+  }
+);
+f.displayName = "NavigationMenuContent";
+const b = ({ className: t, ...a }) => /* @__PURE__ */ e(
+  o.Link,
+  {
+    className: n(
+      i,
+      r,
+      "data-active:bg-accent data-active:text-accent-foreground",
+      t
+    ),
+    ...a
+  }
+);
+b.displayName = "NavigationMenuLink";
+const N = (t) => /* @__PURE__ */ e(o.Portal, { ...t });
+N.displayName = "NavigationMenuPortal";
+const v = ({
+  className: t,
+  sideOffset: a = 10,
+  collisionPadding: s = { top: 5, bottom: 5, left: 20, right: 20 },
+  ...d
+}) => /* @__PURE__ */ e(
+  o.Positioner,
+  {
+    className: n(
+      "z-50 box-border",
+      "h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)",
+      "transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]",
+      "data-instant:transition-none",
+      // Gap element to maintain hover when moving to popup
+      "before:absolute before:content-['']",
+      "data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5",
+      "data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5",
+      "data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5",
+      "data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5",
+      t
+    ),
+    sideOffset: a,
+    collisionPadding: s,
+    ...d
+  }
+);
+v.displayName = "NavigationMenuPositioner";
+const h = ({ className: t, ...a }) => /* @__PURE__ */ e(
+  o.Popup,
+  {
+    className: n(
+      "relative rounded-lg border border-border bg-background shadow-lg",
+      "h-(--popup-height) w-(--popup-width)",
+      "origin-(--transform-origin)",
+      "transition-[opacity,transform,width,height,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]",
+      "data-starting-style:scale-90 data-starting-style:opacity-0",
+      "data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150",
+      t
+    ),
+    ...a
+  }
+);
+h.displayName = "NavigationMenuPopup";
+const y = ({ className: t, ...a }) => /* @__PURE__ */ e(
+  o.Viewport,
+  {
+    className: n("relative h-full w-full overflow-hidden", t),
+    ...a
+  }
+);
+y.displayName = "NavigationMenuViewport";
+const x = ({ className: t, ...a }) => /* @__PURE__ */ e(
+  o.Arrow,
+  {
+    className: n(
+      "flex transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]",
+      "data-[side=bottom]:top-[-9px] data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-9px] data-[side=top]:rotate-180",
+      t
+    ),
+    ...a,
+    children: /* @__PURE__ */ e(c, {})
+  }
+);
+x.displayName = "NavigationMenuArrow";
+const w = ({ className: t, ...a }) => /* @__PURE__ */ e(
+  o.Backdrop,
+  {
+    className: n(
+      "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm",
+      "transition-opacity duration-200",
+      "data-starting-style:opacity-0 data-ending-style:opacity-0",
+      t
+    ),
+    ...a
+  }
+);
+w.displayName = "NavigationMenuBackdrop";
+export {
+  x as NavigationMenuArrow,
+  w as NavigationMenuBackdrop,
+  f as NavigationMenuContent,
+  m as NavigationMenuIcon,
+  g as NavigationMenuItem,
+  b as NavigationMenuLink,
+  u as NavigationMenuList,
+  h as NavigationMenuPopup,
+  N as NavigationMenuPortal,
+  v as NavigationMenuPositioner,
+  l as NavigationMenuRoot,
+  p as NavigationMenuTrigger,
+  y as NavigationMenuViewport
+};

package/dist/textarea.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+export declare const Textarea: {
+    ({ className, ...props }: TextareaProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TextareaProps = React_2.ComponentProps<'textarea'>;
+
+export { }

package/dist/textarea.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { i as r } from "./form-variants-D4ge0qav.js";
+import { c as s } from "./utils-B6yFEsav.js";
+const m = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  "textarea",
+  {
+    className: s(r, "h-auto min-h-20 py-2", a),
+    ...e
+  }
+);
+m.displayName = "Textarea";
+export {
+  m as Textarea
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lglab/compose-ui",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "A collection of components built with Base UI & Tailwind CSS",
   "author": "LGLab",
   "license": "MIT",
@@ -46,6 +46,14 @@
       "import": "./dist/card.js",
       "types": "./dist/card.d.ts"
     },
+    "./checkbox": {
+      "import": "./dist/checkbox.js",
+      "types": "./dist/checkbox.d.ts"
+    },
+    "./checkbox-group": {
+      "import": "./dist/checkbox-group.js",
+      "types": "./dist/checkbox-group.d.ts"
+    },
     "./collapsible": {
       "import": "./dist/collapsible.js",
       "types": "./dist/collapsible.d.ts"
@@ -62,6 +70,22 @@
       "import": "./dist/drawer.js",
       "types": "./dist/drawer.d.ts"
     },
+    "./field": {
+      "import": "./dist/field.js",
+      "types": "./dist/field.d.ts"
+    },
+    "./fieldset": {
+      "import": "./dist/fieldset.js",
+      "types": "./dist/fieldset.d.ts"
+    },
+    "./form": {
+      "import": "./dist/form.js",
+      "types": "./dist/form.d.ts"
+    },
+    "./input": {
+      "import": "./dist/input.js",
+      "types": "./dist/input.d.ts"
+    },
     "./menu": {
       "import": "./dist/menu.js",
       "types": "./dist/menu.d.ts"
@@ -74,6 +98,10 @@
       "import": "./dist/meter.js",
       "types": "./dist/meter.d.ts"
     },
+    "./navigation-menu": {
+      "import": "./dist/navigation-menu.js",
+      "types": "./dist/navigation-menu.d.ts"
+    },
     "./popover": {
       "import": "./dist/popover.js",
       "types": "./dist/popover.d.ts"
@@ -106,6 +134,10 @@
       "import": "./dist/tabs.js",
       "types": "./dist/tabs.d.ts"
     },
+    "./textarea": {
+      "import": "./dist/textarea.js",
+      "types": "./dist/textarea.d.ts"
+    },
     "./toast": {
       "import": "./dist/toast.js",
       "types": "./dist/toast.d.ts"