@lglab/compose-ui 0.20.0 → 0.21.0

package/dist/slider.d.ts

@@ -0,0 +1,47 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { Slider } from '@base-ui/react/slider';
+
+export declare const SliderControl: {
+    ({ className, ...props }: SliderControlProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SliderControlProps = React_2.ComponentProps<typeof Slider.Control>;
+
+export declare const SliderIndicator: {
+    ({ className, ...props }: SliderIndicatorProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SliderIndicatorProps = React_2.ComponentProps<typeof Slider.Indicator>;
+
+export declare const SliderRoot: {
+    ({ className, ...props }: SliderRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SliderRootProps = React_2.ComponentProps<typeof Slider.Root>;
+
+export declare const SliderThumb: {
+    ({ className, ...props }: SliderThumbProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SliderThumbProps = React_2.ComponentProps<typeof Slider.Thumb>;
+
+export declare const SliderTrack: {
+    ({ className, ...props }: SliderTrackProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SliderTrackProps = React_2.ComponentProps<typeof Slider.Track>;
+
+export declare const SliderValue: {
+    ({ className, ...props }: SliderValueProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SliderValueProps = React_2.ComponentProps<typeof Slider.Value>;
+
+export { }

package/dist/slider.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { Slider as o } from "@base-ui/react/slider";
+import { c as a } from "./utils-B6yFEsav.js";
+const i = ({ className: e, ...r }) => /* @__PURE__ */ l(o.Root, { className: a("w-full", e), ...r });
+i.displayName = "SliderRoot";
+const t = ({ className: e, ...r }) => /* @__PURE__ */ l(
+  o.Value,
+  {
+    className: a("text-sm font-medium text-foreground", e),
+    ...r
+  }
+);
+t.displayName = "SliderValue";
+const n = ({ className: e, ...r }) => /* @__PURE__ */ l(
+  o.Control,
+  {
+    className: a("flex w-full touch-none items-center py-2 select-none", e),
+    ...r
+  }
+);
+n.displayName = "SliderControl";
+const s = ({ className: e, ...r }) => /* @__PURE__ */ l(
+  o.Track,
+  {
+    className: a("relative h-1.5 w-full rounded-full bg-primary/20", e),
+    ...r
+  }
+);
+s.displayName = "SliderTrack";
+const d = ({ className: e, ...r }) => /* @__PURE__ */ l(
+  o.Indicator,
+  {
+    className: a("rounded-full bg-primary", e),
+    ...r
+  }
+);
+d.displayName = "SliderIndicator";
+const u = ({ className: e, ...r }) => /* @__PURE__ */ l(
+  o.Thumb,
+  {
+    className: a(
+      "size-4 rounded-full bg-background",
+      "outline",
+      "shadow-sm",
+      "transition-[box-shadow,outline-color] duration-150",
+      "hover:outline-primary/50",
+      "focus-visible:outline-2 focus-visible:outline-primary",
+      "data-dragging:outline-2 data-dragging:outline-primary",
+      e
+    ),
+    ...r
+  }
+);
+u.displayName = "SliderThumb";
+export {
+  n as SliderControl,
+  d as SliderIndicator,
+  i as SliderRoot,
+  u as SliderThumb,
+  s as SliderTrack,
+  t as SliderValue
+};

package/dist/switch.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { Switch } from '@base-ui/react/switch';
+
+export declare const SwitchRoot: {
+    ({ className, ...props }: SwitchRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SwitchRootProps = React_2.ComponentProps<typeof Switch.Root>;
+
+export declare const SwitchThumb: {
+    ({ className, ...props }: SwitchThumbProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SwitchThumbProps = React_2.ComponentProps<typeof Switch.Thumb>;
+
+export { }

package/dist/switch.js

@@ -0,0 +1,40 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Switch as t } from "@base-ui/react/switch";
+import { c as e } from "./utils-B6yFEsav.js";
+const d = ({ className: o, ...a }) => /* @__PURE__ */ r(
+  t.Root,
+  {
+    className: e(
+      "relative flex h-6 w-10 rounded-full",
+      "bg-linear-to-r from-primary from-35% to-muted to-65% bg-size-[6.5rem_100%] bg-position-[100%_0%] bg-no-repeat",
+      "p-px",
+      "shadow-[inset_0_1.5px_2px] shadow-muted-foreground/20",
+      "transition-[background-position,box-shadow] duration-125 ease-[cubic-bezier(0.26,0.75,0.38,0.45)]",
+      "data-checked:bg-position-[0%_0%]",
+      "dark:from-primary/50 dark:shadow-none",
+      o
+    ),
+    ...a
+  }
+);
+d.displayName = "SwitchRoot";
+const i = ({ className: o, ...a }) => /* @__PURE__ */ r(
+  t.Thumb,
+  {
+    className: e(
+      "aspect-square h-full rounded-full bg-background",
+      "shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-muted-foreground/20",
+      "transition-all duration-200",
+      "data-checked:translate-x-4",
+      "dark:shadow-black/25 dark:bg-foreground dark:data-checked:bg-background",
+      "data-disabled:opacity-100",
+      o
+    ),
+    ...a
+  }
+);
+i.displayName = "SwitchThumb";
+export {
+  d as SwitchRoot,
+  i as SwitchThumb
+};

package/dist/tabs.d.ts

@@ -0,0 +1,49 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { Tabs } from '@base-ui/react/tabs';
+
+export declare const TabsIndicator: {
+    ({ className, orientation, ...props }: TabsIndicatorProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TabsIndicatorProps = React_2.ComponentProps<typeof Tabs.Indicator> & {
+    /** Orientation of the indicator (should match the tabs list orientation) */
+    orientation?: 'horizontal' | 'vertical';
+};
+
+export declare const TabsList: {
+    ({ className, orientation, ...props }: TabsListProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TabsListProps = React_2.ComponentProps<typeof Tabs.List> & {
+    /** Orientation of the tabs list */
+    orientation?: 'horizontal' | 'vertical';
+};
+
+export declare const TabsPanel: {
+    ({ className, ...props }: TabsPanelProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TabsPanelProps = React_2.ComponentProps<typeof Tabs.Panel>;
+
+export declare const TabsRoot: {
+    ({ className, ...props }: TabsRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TabsRootProps = React_2.ComponentProps<typeof Tabs.Root>;
+
+export declare const TabsTab: {
+    ({ className, size, ...props }: TabsTabProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TabsTabProps = React_2.ComponentProps<typeof Tabs.Tab> & {
+    /** Size of the tab */
+    size?: 'sm' | 'default' | 'lg';
+};
+
+export { }

package/dist/tabs.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { Tabs as r } from "@base-ui/react/tabs";
+import { cva as s } from "class-variance-authority";
+import { c as i } from "./utils-B6yFEsav.js";
+const n = ({ className: t, ...a }) => /* @__PURE__ */ o(r.Root, { className: i("flex flex-col", t), ...a });
+n.displayName = "TabsRoot";
+const l = s(
+  ["relative inline-flex w-fit items-center gap-1", "rounded-lg bg-muted p-1"],
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+), c = ({ className: t, orientation: a = "horizontal", ...e }) => /* @__PURE__ */ o(
+  r.List,
+  {
+    className: i(l({ orientation: a }), t),
+    ...e
+  }
+);
+c.displayName = "TabsList";
+const d = s(
+  [
+    "relative z-10 inline-flex items-center justify-center whitespace-nowrap",
+    "rounded-md px-3 py-1.5 text-sm font-medium",
+    "transition-all duration-200",
+    "text-foreground/80",
+    "data-[active]:text-foreground",
+    "hover:text-foreground"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-1 text-xs",
+        default: "px-3 py-1.5 text-sm",
+        lg: "px-4 py-2 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), m = ({ className: t, size: a, ...e }) => /* @__PURE__ */ o(r.Tab, { className: i(d({ size: a }), t), ...e });
+m.displayName = "TabsTab";
+const b = s(
+  ["absolute rounded-md bg-background shadow-sm", "transition-all duration-200 ease-out"],
+  {
+    variants: {
+      orientation: {
+        horizontal: "bottom-1 top-1 left-[var(--active-tab-left)] w-[var(--active-tab-width)]",
+        vertical: "left-1 right-1 top-[var(--active-tab-top)] h-[var(--active-tab-height)]"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+), f = ({
+  className: t,
+  orientation: a = "horizontal",
+  ...e
+}) => /* @__PURE__ */ o(
+  r.Indicator,
+  {
+    className: i(b({ orientation: a }), t),
+    ...e
+  }
+);
+f.displayName = "TabsIndicator";
+const u = ({ className: t, ...a }) => /* @__PURE__ */ o(r.Panel, { className: i("mt-2 ring-offset-background", t), ...a });
+u.displayName = "TabsPanel";
+export {
+  f as TabsIndicator,
+  c as TabsList,
+  u as TabsPanel,
+  n as TabsRoot,
+  m as TabsTab
+};

package/dist/toggle-group.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+
+declare type ControlSize = 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+
+declare type ControlVariant = 'default' | 'ghost';
+
+export declare const ToggleGroupItem: {
+    ({ className, variant, size, ...props }: ToggleGroupItemProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToggleGroupItemProps = React_2.ComponentProps<typeof Toggle> & {
+    /** Visual style of the toggle item */
+    variant?: ControlVariant;
+    /** Size of the toggle item */
+    size?: ControlSize;
+};
+
+export declare const ToggleGroupRoot: {
+    ({ className, orientation, ...props }: ToggleGroupRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToggleGroupRootProps = React_2.ComponentProps<typeof ToggleGroup>;
+
+export { }

package/dist/toggle-group.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { Toggle as u } from "@base-ui/react/toggle";
+import { ToggleGroup as p } from "@base-ui/react/toggle-group";
+import { c as m } from "./control-variants-Bwep4n0y.js";
+import { c as n } from "./utils-B6yFEsav.js";
+const f = ({ className: t, orientation: o, ...e }) => /* @__PURE__ */ r(
+  p,
+  {
+    orientation: o,
+    className: n(
+      "inline-flex",
+      o === "vertical" && "flex-col",
+      // Connected items: collapse borders, round only outer corners
+      "[&>button]:rounded-none [&>button:not(:first-of-type)]:-ml-px",
+      "[&>button:first-of-type]:rounded-l-md [&>button:last-of-type]:rounded-r-md",
+      // Vertical orientation adjustments
+      o === "vertical" && "[&>button:not(:first-of-type)]:ml-0 [&>button:not(:first-of-type)]:-mt-px [&>button:first-of-type]:rounded-bl-none [&>button:last-of-type]:rounded-r-none [&>button:first-of-type]:rounded-t-md [&>button:last-of-type]:rounded-b-md",
+      t
+    ),
+    ...e
+  }
+);
+f.displayName = "ToggleGroupRoot";
+const s = ({
+  className: t,
+  variant: o,
+  size: e,
+  ...l
+}) => /* @__PURE__ */ r(u, { className: n(m({ variant: o, size: e }), t), ...l });
+s.displayName = "ToggleGroupItem";
+export {
+  s as ToggleGroupItem,
+  f as ToggleGroupRoot
+};

package/dist/toggle.d.ts

@@ -0,0 +1,21 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { Toggle as Toggle_2 } from '@base-ui/react/toggle';
+
+declare type ControlSize = 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+
+declare type ControlVariant = 'default' | 'ghost';
+
+export declare const Toggle: {
+    ({ className, variant, size, ...props }: ToggleProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToggleProps = React_2.ComponentProps<typeof Toggle_2> & {
+    /** Visual style of the toggle */
+    variant?: ControlVariant;
+    /** Size of the toggle */
+    size?: ControlSize;
+};
+
+export { }

package/dist/toggle.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { Toggle as t } from "@base-ui/react/toggle";
+import { c as a } from "./control-variants-Bwep4n0y.js";
+import { c as g } from "./utils-B6yFEsav.js";
+const l = ({ className: o, variant: r, size: e, ...m }) => /* @__PURE__ */ s(
+  t,
+  {
+    className: g(a({ variant: r, size: e }), o),
+    ...m
+  }
+);
+l.displayName = "Toggle";
+export {
+  l as Toggle
+};

package/dist/tooltip.d.ts

@@ -0,0 +1,62 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { Tooltip } from '@base-ui/react/tooltip';
+
+export declare const TooltipArrow: {
+    ({ className, variant, ...props }: TooltipArrowProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TooltipArrowProps = React_2.ComponentProps<typeof Tooltip.Arrow> & {
+    variant?: TooltipVariant;
+};
+
+export declare const TooltipPopup: {
+    ({ className, variant, ...props }: TooltipPopupProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TooltipPopupProps = React_2.ComponentProps<typeof Tooltip.Popup> & {
+    variant?: TooltipVariant;
+};
+
+export declare const TooltipPortal: {
+    (props: TooltipPortalProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TooltipPortalProps = React_2.ComponentProps<typeof Tooltip.Portal>;
+
+export declare const TooltipPositioner: {
+    ({ className, ...props }: TooltipPositionerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TooltipPositionerProps = React_2.ComponentProps<typeof Tooltip.Positioner>;
+
+export declare const TooltipProvider: {
+    (props: TooltipProviderProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TooltipProviderProps = React_2.ComponentProps<typeof Tooltip.Provider>;
+
+export declare const TooltipRoot: {
+    ({ variant, ...props }: TooltipRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TooltipRootProps = React_2.ComponentProps<typeof Tooltip.Root> & {
+    variant?: TooltipVariant;
+};
+
+export declare const TooltipTrigger: {
+    ({ className, ...props }: TooltipTriggerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type TooltipTriggerProps = React_2.ComponentProps<typeof Tooltip.Trigger>;
+
+declare type TooltipVariant = 'default' | 'secondary' | 'outline';
+
+export { }

package/dist/tooltip.js

@@ -0,0 +1,93 @@
+"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
+    }
+  );
+};
+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 })
+    }
+  );
+};
+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
+};

package/dist/utils-B6yFEsav.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lglab/compose-ui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "A collection of components built with Base UI & Tailwind CSS",
   "author": "LGLab",
   "license": "MIT",
@@ -19,13 +19,101 @@
   ],
   "type": "module",
   "types": "./dist/index.d.ts",
-  "main": "./dist/index.es.js",
-  "module": "./dist/index.es.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
+      "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./accordion": {
+      "import": "./dist/accordion.js",
+      "types": "./dist/accordion.d.ts"
+    },
+    "./alert-dialog": {
+      "import": "./dist/alert-dialog.js",
+      "types": "./dist/alert-dialog.d.ts"
+    },
+    "./avatar": {
+      "import": "./dist/avatar.js",
+      "types": "./dist/avatar.d.ts"
+    },
+    "./button": {
+      "import": "./dist/button.js",
+      "types": "./dist/button.d.ts"
+    },
+    "./card": {
+      "import": "./dist/card.js",
+      "types": "./dist/card.d.ts"
+    },
+    "./collapsible": {
+      "import": "./dist/collapsible.js",
+      "types": "./dist/collapsible.d.ts"
+    },
+    "./context-menu": {
+      "import": "./dist/context-menu.js",
+      "types": "./dist/context-menu.d.ts"
+    },
+    "./dialog": {
+      "import": "./dist/dialog.js",
+      "types": "./dist/dialog.d.ts"
+    },
+    "./drawer": {
+      "import": "./dist/drawer.js",
+      "types": "./dist/drawer.d.ts"
+    },
+    "./menu": {
+      "import": "./dist/menu.js",
+      "types": "./dist/menu.d.ts"
+    },
+    "./menubar": {
+      "import": "./dist/menubar.js",
+      "types": "./dist/menubar.d.ts"
+    },
+    "./meter": {
+      "import": "./dist/meter.js",
+      "types": "./dist/meter.d.ts"
+    },
+    "./popover": {
+      "import": "./dist/popover.js",
+      "types": "./dist/popover.d.ts"
+    },
+    "./progress": {
+      "import": "./dist/progress.js",
+      "types": "./dist/progress.d.ts"
+    },
+    "./scroll-area": {
+      "import": "./dist/scroll-area.js",
+      "types": "./dist/scroll-area.d.ts"
+    },
+    "./separator": {
+      "import": "./dist/separator.js",
+      "types": "./dist/separator.d.ts"
+    },
+    "./slider": {
+      "import": "./dist/slider.js",
+      "types": "./dist/slider.d.ts"
+    },
+    "./switch": {
+      "import": "./dist/switch.js",
+      "types": "./dist/switch.d.ts"
+    },
+    "./tabs": {
+      "import": "./dist/tabs.js",
+      "types": "./dist/tabs.d.ts"
+    },
+    "./toggle": {
+      "import": "./dist/toggle.js",
+      "types": "./dist/toggle.d.ts"
+    },
+    "./toggle-group": {
+      "import": "./dist/toggle-group.js",
+      "types": "./dist/toggle-group.d.ts"
+    },
+    "./tooltip": {
+      "import": "./dist/tooltip.js",
+      "types": "./dist/tooltip.d.ts"
+    },
     "./styles/*": "./dist/styles/*"
   },
   "files": [