@lglab/compose-ui 0.24.0 → 0.26.0

package/dist/number-field.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { NumberField as o } from "@base-ui/react/number-field";
+import { f as s } from "./form-variants-D4ge0qav.js";
+import { c as n } from "./utils-B6yFEsav.js";
+const u = ({ className: e, ...r }) => /* @__PURE__ */ t(o.Root, { className: n(s, e), ...r });
+u.displayName = "NumberFieldRoot";
+const m = ({ className: e, ...r }) => /* @__PURE__ */ t(
+  o.ScrubArea,
+  {
+    className: n("cursor-ew-resize select-none", e),
+    ...r
+  }
+);
+m.displayName = "NumberFieldScrubArea";
+const d = ({
+  className: e,
+  ...r
+}) => /* @__PURE__ */ t(
+  o.ScrubAreaCursor,
+  {
+    className: n("drop-shadow-[0_1px_1px_rgba(0,0,0,0.5)] filter", e),
+    ...r
+  }
+);
+d.displayName = "NumberFieldScrubAreaCursor";
+const a = ({ className: e, ...r }) => /* @__PURE__ */ t(o.Group, { className: n("flex", e), ...r });
+a.displayName = "NumberFieldGroup";
+const b = ({ className: e, ...r }) => /* @__PURE__ */ t(
+  o.Input,
+  {
+    className: n(
+      "h-9 w-24 border-t border-b border-border bg-transparent text-center text-base text-foreground tabular-nums outline-none",
+      e
+    ),
+    ...r
+  }
+);
+b.displayName = "NumberFieldInput";
+const c = ({ className: e, ...r }) => /* @__PURE__ */ t(
+  o.Decrement,
+  {
+    className: n(
+      "flex size-9 items-center justify-center rounded-l-md border border-border bg-background text-foreground select-none transition-colors hover:bg-muted active:bg-muted",
+      e
+    ),
+    ...r
+  }
+);
+c.displayName = "NumberFieldDecrement";
+const l = ({ className: e, ...r }) => /* @__PURE__ */ t(
+  o.Increment,
+  {
+    className: n(
+      "flex size-9 items-center justify-center rounded-r-md border border-border bg-background text-foreground select-none transition-colors hover:bg-muted active:bg-muted",
+      e
+    ),
+    ...r
+  }
+);
+l.displayName = "NumberFieldIncrement";
+export {
+  c as NumberFieldDecrement,
+  a as NumberFieldGroup,
+  l as NumberFieldIncrement,
+  b as NumberFieldInput,
+  u as NumberFieldRoot,
+  m as NumberFieldScrubArea,
+  d as NumberFieldScrubAreaCursor
+};

package/dist/radio-group.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'react/jsx-runtime';
+import { RadioGroup } from '@base-ui/react/radio-group';
+import * as React_2 from 'react';
+
+export declare const RadioGroupRoot: {
+    ({ className, ...props }: RadioGroupRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type RadioGroupRootProps = React_2.ComponentProps<typeof RadioGroup>;
+
+export { }

package/dist/radio-group.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { RadioGroup as a } from "@base-ui/react/radio-group";
+import { c as e } from "./utils-B6yFEsav.js";
+const i = ({ className: o, ...r }) => /* @__PURE__ */ t(
+  a,
+  {
+    className: e("flex flex-col items-start gap-2", o),
+    ...r
+  }
+);
+i.displayName = "RadioGroupRoot";
+export {
+  i as RadioGroupRoot
+};

package/dist/radio.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'react/jsx-runtime';
+import { Radio } from '@base-ui/react/radio';
+import * as React_2 from 'react';
+
+export declare const RadioIndicator: {
+    ({ className, ...props }: RadioIndicatorProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type RadioIndicatorProps = React_2.ComponentProps<typeof Radio.Indicator>;
+
+export declare const RadioRoot: {
+    ({ className, ...props }: RadioRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type RadioRootProps = React_2.ComponentProps<typeof Radio.Root>;
+
+export { }

package/dist/radio.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { Radio as i } from "@base-ui/react/radio";
+import { c as a } from "./utils-B6yFEsav.js";
+const t = ({ className: o, ...e }) => /* @__PURE__ */ r(
+  i.Root,
+  {
+    className: a(
+      "flex size-5 items-center justify-center rounded-full border border-input bg-transparent",
+      "transition-colors duration-150",
+      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+      "data-checked:border-primary data-checked:bg-primary",
+      "data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      o
+    ),
+    ...e
+  }
+);
+t.displayName = "RadioRoot";
+const d = ({ className: o, ...e }) => /* @__PURE__ */ r(
+  i.Indicator,
+  {
+    className: a(
+      "size-2 rounded-full bg-primary-foreground",
+      "data-unchecked:hidden",
+      o
+    ),
+    ...e
+  }
+);
+d.displayName = "RadioIndicator";
+export {
+  d as RadioIndicator,
+  t as RadioRoot
+};

package/dist/select.d.ts

@@ -0,0 +1,133 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { Select } from '@base-ui/react/select';
+import { SelectRootProps as SelectRootProps_2 } from '@base-ui/react/select';
+
+export declare const SelectArrow: {
+    ({ className, ...props }: SelectArrowProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectArrowProps = React_2.ComponentProps<typeof Select.Arrow>;
+
+export declare const SelectBackdrop: {
+    ({ className, ...props }: SelectBackdropProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectBackdropProps = React_2.ComponentProps<typeof Select.Backdrop>;
+
+export declare const SelectGroup: {
+    ({ className, ...props }: SelectGroupProps): JSX.Element;
+    displayName: string;
+};
+
+export declare const SelectGroupLabel: {
+    ({ className, ...props }: SelectGroupLabelProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectGroupLabelProps = React_2.ComponentProps<typeof Select.GroupLabel>;
+
+export declare type SelectGroupProps = React_2.ComponentProps<typeof Select.Group>;
+
+export declare const SelectIcon: {
+    ({ className, ...props }: SelectIconProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectIconProps = React_2.ComponentProps<typeof Select.Icon>;
+
+export declare const SelectItem: {
+    ({ className, ...props }: SelectItemProps): JSX.Element;
+    displayName: string;
+};
+
+export declare const SelectItemIndicator: {
+    ({ className, ...props }: SelectItemIndicatorProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectItemIndicatorProps = React_2.ComponentProps<typeof Select.ItemIndicator>;
+
+export declare type SelectItemProps = React_2.ComponentProps<typeof Select.Item>;
+
+export declare const SelectItemText: {
+    ({ className, ...props }: SelectItemTextProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectItemTextProps = React_2.ComponentProps<typeof Select.ItemText>;
+
+export declare const SelectList: {
+    ({ className, ...props }: SelectListProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectListProps = React_2.ComponentProps<typeof Select.List>;
+
+export declare const SelectPopup: {
+    ({ className, ...props }: SelectPopupProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectPopupProps = React_2.ComponentProps<typeof Select.Popup>;
+
+export declare const SelectPortal: {
+    (props: SelectPortalProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectPortalProps = React_2.ComponentProps<typeof Select.Portal>;
+
+export declare const SelectPositioner: {
+    ({ className, ...props }: SelectPositionerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectPositionerProps = React_2.ComponentProps<typeof Select.Positioner>;
+
+export declare function SelectRoot<Value, Multiple extends boolean | undefined = false>(props: SelectRootProps_2<Value, Multiple>): JSX.Element;
+
+export declare namespace SelectRoot {
+    var displayName: string;
+}
+
+export declare type SelectRootProps<Value, Multiple extends boolean | undefined = false> = SelectRootProps_2<Value, Multiple>;
+
+export declare const SelectScrollDownArrow: {
+    ({ className, ...props }: SelectScrollDownArrowProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectScrollDownArrowProps = React_2.ComponentProps<typeof Select.ScrollDownArrow>;
+
+export declare const SelectScrollUpArrow: {
+    ({ className, ...props }: SelectScrollUpArrowProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectScrollUpArrowProps = React_2.ComponentProps<typeof Select.ScrollUpArrow>;
+
+export declare const SelectSeparator: {
+    ({ className, ...props }: SelectSeparatorProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectSeparatorProps = React_2.ComponentProps<typeof Select.Separator>;
+
+export declare const SelectTrigger: {
+    ({ className, ...props }: SelectTriggerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectTriggerProps = React_2.ComponentProps<typeof Select.Trigger>;
+
+export declare const SelectValue: {
+    ({ className, ...props }: SelectValueProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SelectValueProps = React_2.ComponentProps<typeof Select.Value>;
+
+export { }

package/dist/select.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { Select as r } from "@base-ui/react/select";
+import { A as l } from "./arrow-svg-C6zQTvgS.js";
+import { c as o } from "./utils-B6yFEsav.js";
+function s(e) {
+  return /* @__PURE__ */ a(r.Root, { ...e });
+}
+s.displayName = "SelectRoot";
+const n = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.Trigger,
+  {
+    className: o(
+      "flex min-h-9 min-w-40 items-center justify-between gap-3 rounded-md border border-border bg-background px-3.5 pr-3 text-base text-foreground select-none hover:bg-muted data-popup-open:bg-muted",
+      e
+    ),
+    ...t
+  }
+);
+n.displayName = "SelectTrigger";
+const d = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.Value,
+  {
+    className: o("data-placeholder:text-muted-foreground text-sm", e),
+    ...t
+  }
+);
+d.displayName = "SelectValue";
+const i = ({ className: e, ...t }) => /* @__PURE__ */ a(r.Icon, { className: o("flex", e), ...t });
+i.displayName = "SelectIcon";
+const c = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.Backdrop,
+  {
+    className: o(
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
+      "transition-opacity duration-200",
+      "data-starting-style:opacity-0 data-ending-style:opacity-0",
+      e
+    ),
+    ...t
+  }
+);
+c.displayName = "SelectBackdrop";
+const p = (e) => /* @__PURE__ */ a(r.Portal, { ...e });
+p.displayName = "SelectPortal";
+const m = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.Positioner,
+  {
+    className: o("outline-none select-none z-50", e),
+    sideOffset: 8,
+    ...t
+  }
+);
+m.displayName = "SelectPositioner";
+const u = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.Popup,
+  {
+    className: o(
+      "group min-w-(--anchor-width) origin-(--transform-origin) bg-clip-padding rounded-md bg-background text-foreground shadow-lg shadow-gray-200 border border-border transition-[transform,scale,opacity]",
+      "data-ending-style:scale-90 data-ending-style:opacity-0",
+      "data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-ending-style:transition-none",
+      "data-starting-style:scale-90 data-starting-style:opacity-0",
+      "data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:data-starting-style:transition-none",
+      "dark:shadow-none",
+      e
+    ),
+    ...t
+  }
+);
+u.displayName = "SelectPopup";
+const g = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.List,
+  {
+    className: o(
+      "relative py-1 scroll-py-6 overflow-y-auto max-h-(--available-height)",
+      e
+    ),
+    ...t
+  }
+);
+g.displayName = "SelectList";
+const b = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.Arrow,
+  {
+    className: o(
+      "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",
+      e
+    ),
+    ...t,
+    children: /* @__PURE__ */ a(l, {})
+  }
+);
+b.displayName = "SelectArrow";
+const f = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.Item,
+  {
+    className: o(
+      "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none",
+      "group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4",
+      "data-highlighted:relative data-highlighted:z-0 data-highlighted:text-background",
+      "data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm data-highlighted:before:bg-foreground",
+      "pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]",
+      e
+    ),
+    ...t
+  }
+);
+f.displayName = "SelectItem";
+const h = ({ className: e, ...t }) => /* @__PURE__ */ a(r.ItemText, { className: o("col-start-2 text-sm", e), ...t });
+h.displayName = "SelectItemText";
+const y = ({ className: e, ...t }) => /* @__PURE__ */ a(r.ItemIndicator, { className: o("col-start-1", e), ...t });
+y.displayName = "SelectItemIndicator";
+const S = ({ className: e, ...t }) => /* @__PURE__ */ a(r.Group, { className: o(e), ...t });
+S.displayName = "SelectGroup";
+const x = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.GroupLabel,
+  {
+    className: o("px-3 py-1.5 text-sm font-semibold", e),
+    ...t
+  }
+);
+x.displayName = "SelectGroupLabel";
+const N = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.ScrollUpArrow,
+  {
+    className: o(
+      'top-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-md bg-background text-center text-xs before:absolute data-[side=none]:before:-top-full before:left-0 before:h-full before:w-full before:content-[""]',
+      e
+    ),
+    ...t
+  }
+);
+N.displayName = "SelectScrollUpArrow";
+const w = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.ScrollDownArrow,
+  {
+    className: o(
+      'bottom-0 z-1 flex h-4 w-full cursor-default items-center justify-center rounded-md bg-background text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[""] bottom-0 data-[side=none]:before:-bottom-full',
+      e
+    ),
+    ...t
+  }
+);
+w.displayName = "SelectScrollDownArrow";
+const I = ({ className: e, ...t }) => /* @__PURE__ */ a(
+  r.Separator,
+  {
+    className: o("-mx-1 my-1 h-px bg-border", e),
+    ...t
+  }
+);
+I.displayName = "SelectSeparator";
+export {
+  b as SelectArrow,
+  c as SelectBackdrop,
+  S as SelectGroup,
+  x as SelectGroupLabel,
+  i as SelectIcon,
+  f as SelectItem,
+  y as SelectItemIndicator,
+  h as SelectItemText,
+  g as SelectList,
+  u as SelectPopup,
+  p as SelectPortal,
+  m as SelectPositioner,
+  s as SelectRoot,
+  w as SelectScrollDownArrow,
+  N as SelectScrollUpArrow,
+  I as SelectSeparator,
+  n as SelectTrigger,
+  d as SelectValue
+};

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.24.0",
+  "version": "0.26.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"
@@ -78,6 +102,10 @@
       "import": "./dist/navigation-menu.js",
       "types": "./dist/navigation-menu.d.ts"
     },
+    "./number-field": {
+      "import": "./dist/number-field.js",
+      "types": "./dist/number-field.d.ts"
+    },
     "./popover": {
       "import": "./dist/popover.js",
       "types": "./dist/popover.d.ts"
@@ -90,10 +118,22 @@
       "import": "./dist/progress.js",
       "types": "./dist/progress.d.ts"
     },
+    "./radio": {
+      "import": "./dist/radio.js",
+      "types": "./dist/radio.d.ts"
+    },
+    "./radio-group": {
+      "import": "./dist/radio-group.js",
+      "types": "./dist/radio-group.d.ts"
+    },
     "./scroll-area": {
       "import": "./dist/scroll-area.js",
       "types": "./dist/scroll-area.d.ts"
     },
+    "./select": {
+      "import": "./dist/select.js",
+      "types": "./dist/select.d.ts"
+    },
     "./separator": {
       "import": "./dist/separator.js",
       "types": "./dist/separator.d.ts"
@@ -110,6 +150,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"
@@ -155,10 +199,10 @@
     "react-dom": "^19.2.3",
     "rollup-preserve-directives": "^1.1.3",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.53.0",
+    "typescript-eslint": "^8.53.1",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-static-copy": "^3.1.4"
+    "vite-plugin-static-copy": "^3.1.5"
   },
   "scripts": {
     "build": "tsc -b && vite build"