@douglasneuroinformatics/libui 6.2.1 → 6.3.1

package/dist/components/InputGroup/InputGroupButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { Button } from '../Button/Button.tsx';
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "sm" | "xs" | "icon-sm" | "icon-xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const InputGroupButton: ({ className, size, type, variant, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>) => import("react/jsx-runtime").JSX.Element;
+export { InputGroupButton };
+//# sourceMappingURL=InputGroupButton.d.ts.map

package/dist/components/InputGroup/InputGroupButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupButton.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroupButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,QAAA,MAAM,wBAAwB;;8EAY5B,CAAC;AASH,QAAA,MAAM,gBAAgB,GAAI,8CAMvB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,4CAWnG,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/InputGroup/InputGroupButton.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '#utils';
+import { Button } from "../Button/Button.js";
+const inputGroupButtonVariants = cva('gap-2 text-sm flex items-center shadow-none', {
+    defaultVariants: {
+        size: 'xs'
+    },
+    variants: {
+        size: {
+            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+            'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+            sm: '',
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5"
+        }
+    }
+});
+const buttonSizeMap = {
+    'icon-sm': 'icon',
+    'icon-xs': 'icon',
+    sm: 'sm',
+    xs: 'sm'
+};
+const InputGroupButton = ({ className, size = 'xs', type = 'button', variant = 'ghost', ...props }) => {
+    return (_jsx(Button, { className: cn(inputGroupButtonVariants({ size }), className), "data-size": size, size: buttonSizeMap[size ?? 'xs'], type: type, variant: variant, ...props }));
+};
+export { InputGroupButton };
+//# sourceMappingURL=InputGroupButton.js.map

package/dist/components/InputGroup/InputGroupButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupButton.js","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroupButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAG/C,OAAO,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAC;AAE9C,MAAM,wBAAwB,GAAG,GAAG,CAAC,6CAA6C,EAAE;IAClF,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,SAAS,EAAE,2BAA2B;YACtC,SAAS,EAAE,6DAA6D;YACxE,EAAE,EAAE,EAAE;YACN,EAAE,EAAE,2FAA2F;SAChG;KACF;CACF,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG;IACpB,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,MAAM;IACjB,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACA,CAAC;AAEX,MAAM,gBAAgB,GAAG,CAAC,EACxB,SAAS,EACT,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,OAAO,EACjB,GAAG,KAAK,EAC0F,EAAE,EAAE;IACtG,OAAO,CACL,KAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,wBAAwB,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,eACjD,IAAI,EACf,IAAI,EAAE,aAAa,CAAC,IAAI,IAAI,IAAI,CAAC,EACjC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,KACZ,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/InputGroup/InputGroupInput.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare const InputGroupInput: ({ className, ...props }: React.ComponentProps<"input">) => import("react/jsx-runtime").JSX.Element;
+export { InputGroupInput };
+//# sourceMappingURL=InputGroupInput.d.ts.map

package/dist/components/InputGroup/InputGroupInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupInput.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroupInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,QAAA,MAAM,eAAe,GAAI,yBAAyB,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,4CAW9E,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/InputGroup/InputGroupInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '#utils';
+import { Input } from "../Input/Input.js";
+const InputGroupInput = ({ className, ...props }) => {
+    return (_jsx(Input, { className: cn('flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent', className), "data-slot": "input-group-control", ...props }));
+};
+export { InputGroupInput };
+//# sourceMappingURL=InputGroupInput.js.map

package/dist/components/InputGroup/InputGroupInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupInput.js","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroupInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAoB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiC,EAAE,EAAE;IACjF,OAAO,CACL,KAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CACX,kLAAkL,EAClL,SAAS,CACV,eACS,qBAAqB,KAC3B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/InputGroup/InputGroupText.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare const InputGroupText: ({ className, ...props }: React.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+export { InputGroupText };
+//# sourceMappingURL=InputGroupText.d.ts.map

package/dist/components/InputGroup/InputGroupText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupText.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroupText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,cAAc,GAAI,yBAAyB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,4CAU5E,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/InputGroup/InputGroupText.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '#utils';
+const InputGroupText = ({ className, ...props }) => {
+    return (_jsx("span", { className: cn("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+};
+export { InputGroupText };
+//# sourceMappingURL=InputGroupText.js.map

package/dist/components/InputGroup/InputGroupText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupText.js","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroupText.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE5B,MAAM,cAAc,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgC,EAAE,EAAE;IAC/E,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,wHAAwH,EACxH,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/InputGroup/InputGroupTextArea.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare const InputGroupTextArea: ({ className, ...props }: React.ComponentProps<"textarea">) => import("react/jsx-runtime").JSX.Element;
+export { InputGroupTextArea };
+//# sourceMappingURL=InputGroupTextArea.d.ts.map

package/dist/components/InputGroup/InputGroupTextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroupTextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,QAAA,MAAM,kBAAkB,GAAI,yBAAyB,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,4CAWpF,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/InputGroup/InputGroupTextArea.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '#utils';
+import { TextArea } from "../TextArea/TextArea.js";
+const InputGroupTextArea = ({ className, ...props }) => {
+    return (_jsx(TextArea, { className: cn('flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent', className), "data-slot": "input-group-control", ...props }));
+};
+export { InputGroupTextArea };
+//# sourceMappingURL=InputGroupTextArea.js.map

package/dist/components/InputGroup/InputGroupTextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupTextArea.js","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroupTextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAA0B,CAAC;AAEpD,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoC,EAAE,EAAE;IACvF,OAAO,CACL,KAAC,QAAQ,IACP,SAAS,EAAE,EAAE,CACX,mMAAmM,EACnM,SAAS,CACV,eACS,qBAAqB,KAC3B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "6.2.1",
+  "version": "6.3.1",
   "packageManager": "pnpm@10.7.1",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
@@ -97,6 +97,7 @@
     "zod": "^3.25.x"
   },
   "dependencies": {
+    "@base-ui/react": "^1.2.0",
     "@douglasneuroinformatics/libjs": "^3.0.2",
     "@douglasneuroinformatics/libui-form-types": "^0.11.0",
     "@radix-ui/react-accordion": "^1.2.3",

package/src/components/ComboBox/ComboBox.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ComboBox } from './ComboBox.tsx';
+
+type Story = StoryObj<typeof ComboBox>;
+
+const frameworks: string[] = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'];
+
+export default {
+  args: {
+    children: (
+      <ComboBox items={frameworks}>
+        <ComboBox.Input placeholder="Select a framework" />
+        <ComboBox.Content>
+          <ComboBox.Empty>No items found.</ComboBox.Empty>
+          <ComboBox.List>
+            {(item: string) => (
+              <ComboBox.Item key={item} value={item}>
+                {item}
+              </ComboBox.Item>
+            )}
+          </ComboBox.List>
+        </ComboBox.Content>
+      </ComboBox>
+    )
+  },
+  component: ComboBox,
+  tags: ['autodocs']
+} as Meta<typeof ComboBox>;
+
+export const Default: Story = {};

package/src/components/ComboBox/ComboBox.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+import { ComboboxChip, ComboboxChips, ComboboxChipsInput } from './ComboBoxChips.tsx';
+import { ComboboxClear } from './ComboBoxClear.tsx';
+import { ComboboxCollection } from './ComboBoxCollection.tsx';
+import { ComboboxContent } from './ComboBoxContent.tsx';
+import { ComboboxEmpty } from './ComboBoxEmpty.tsx';
+import { ComboboxGroup } from './ComboBoxGroup.tsx';
+import { ComboboxInput } from './ComboBoxInput.tsx';
+import { ComboboxItem } from './ComboBoxItem.tsx';
+import { ComboboxLabel } from './ComboBoxLabel.tsx';
+import { ComboboxList } from './ComboBoxList.tsx';
+import { ComboboxSeparator } from './ComboBoxSeparator.tsx';
+import { ComboboxTrigger } from './ComboBoxTrigger.tsx';
+import { ComboboxValue } from './ComboBoxValue.tsx';
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null);
+}
+
+export { useComboboxAnchor };
+
+export const ComboBox = Object.assign(ComboboxPrimitive.Root.bind(null), {
+  Chip: ComboboxChip,
+  Chips: ComboboxChips,
+  ChipsInput: ComboboxChipsInput,
+  Clear: ComboboxClear,
+  Collection: ComboboxCollection,
+  Content: ComboboxContent,
+  Empty: ComboboxEmpty,
+  Group: ComboboxGroup,
+  Input: ComboboxInput,
+  Item: ComboboxItem,
+  Label: ComboboxLabel,
+  List: ComboboxList,
+  Separator: ComboboxSeparator,
+  Trigger: ComboboxTrigger,
+  Value: ComboboxValue
+});

package/src/components/ComboBox/ComboBoxChips.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '#utils';
+
+import { Button } from '../Button/Button.tsx';
+
+const ComboboxChips = ({
+  className,
+  ...props
+}: ComboboxPrimitive.Chips.Props & React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips>) => {
+  return (
+    <ComboboxPrimitive.Chips
+      className={cn(
+        'dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1',
+        className
+      )}
+      data-slot="combobox-chips"
+      {...props}
+    />
+  );
+};
+
+const ComboboxChip = ({
+  children,
+  className,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean;
+}) => {
+  return (
+    <ComboboxPrimitive.Chip
+      className={cn(
+        'bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
+        className
+      )}
+      data-slot="combobox-chip"
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+          render={
+            <Button size="sm" variant="ghost">
+              <XIcon className="pointer-events-none" />
+            </Button>
+          }
+        />
+      )}
+    </ComboboxPrimitive.Chip>
+  );
+};
+
+const ComboboxChipsInput = ({ className, ...props }: ComboboxPrimitive.Input.Props) => {
+  return (
+    <ComboboxPrimitive.Input
+      className={cn('min-w-16 flex-1 outline-none', className)}
+      data-slot="combobox-chip-input"
+      {...props}
+    />
+  );
+};
+
+export { ComboboxChip, ComboboxChips, ComboboxChipsInput };

package/src/components/ComboBox/ComboBoxClear.tsx

@@ -0,0 +1,23 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '#utils';
+
+import { InputGroupButton } from '../InputGroup/InputGroupButton.tsx';
+
+const ComboboxClear = ({ className, ...props }: ComboboxPrimitive.Clear.Props) => {
+  return (
+    <ComboboxPrimitive.Clear
+      className={cn(className)}
+      data-slot="combobox-clear"
+      {...props}
+      render={
+        <InputGroupButton size="icon-xs" variant="ghost">
+          <XIcon className="pointer-events-none" />
+        </InputGroupButton>
+      }
+    />
+  );
+};
+
+export { ComboboxClear };

package/src/components/ComboBox/ComboBoxCollection.tsx

@@ -0,0 +1,7 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+const ComboboxCollection = ({ ...props }: ComboboxPrimitive.Collection.Props) => {
+  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
+};
+
+export { ComboboxCollection };

package/src/components/ComboBox/ComboBoxContent.tsx

@@ -0,0 +1,39 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+import { cn } from '#utils';
+
+const ComboboxContent = ({
+  align = 'start',
+  alignOffset = 0,
+  anchor,
+  className,
+  side = 'bottom',
+  sideOffset = 6,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<ComboboxPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'anchor' | 'side' | 'sideOffset'>) => {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ComboboxPrimitive.Popup
+          className={cn(
+            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none',
+            className
+          )}
+          data-chips={!!anchor}
+          data-slot="combobox-content"
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+};
+
+export { ComboboxContent };

package/src/components/ComboBox/ComboBoxEmpty.tsx

@@ -0,0 +1,18 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+import { cn } from '#utils';
+
+const ComboboxEmpty = ({ className, ...props }: ComboboxPrimitive.Empty.Props) => {
+  return (
+    <ComboboxPrimitive.Empty
+      className={cn(
+        'text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex',
+        className
+      )}
+      data-slot="combobox-empty"
+      {...props}
+    />
+  );
+};
+
+export { ComboboxEmpty };

package/src/components/ComboBox/ComboBoxGroup.tsx

@@ -0,0 +1,9 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+import { cn } from '#utils';
+
+const ComboboxGroup = ({ className, ...props }: ComboboxPrimitive.Group.Props) => {
+  return <ComboboxPrimitive.Group className={cn(className)} data-slot="combobox-group" {...props} />;
+};
+
+export { ComboboxGroup };

package/src/components/ComboBox/ComboBoxInput.tsx

@@ -0,0 +1,51 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '#utils';
+
+import { InputGroup } from '../InputGroup/InputGroup.tsx';
+import { InputGroupAddon } from '../InputGroup/InputGroupAddon.tsx';
+import { InputGroupButton } from '../InputGroup/InputGroupButton.tsx';
+import { InputGroupInput } from '../InputGroup/InputGroupInput.tsx';
+import { ComboboxClear } from './ComboBoxClear.tsx';
+import { ComboboxTrigger } from './ComboBoxTrigger.tsx';
+
+const ComboboxInput = ({
+  children,
+  className,
+  disabled = false,
+  showClear = false,
+  showTrigger = true,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showClear?: boolean;
+  showTrigger?: boolean;
+}) => {
+  return (
+    <InputGroup className={cn('w-auto', className)}>
+      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <ComboboxTrigger
+            disabled={disabled}
+            /* Now this works because ComboboxTrigger is expecting 'render' */
+            render={
+              <InputGroupButton
+                className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+                data-slot="input-group-button"
+                size="icon-xs"
+                variant="ghost"
+              >
+                <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+              </InputGroupButton>
+            }
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  );
+};
+
+export { ComboboxInput };

package/src/components/ComboBox/ComboBoxItem.tsx

@@ -0,0 +1,28 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { CheckIcon } from 'lucide-react';
+
+import { cn } from '#utils';
+
+const ComboboxItem = ({ children, className, ...props }: ComboboxPrimitive.Item.Props) => {
+  return (
+    <ComboboxPrimitive.Item
+      className={cn(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      data-slot="combobox-item"
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+            <CheckIcon className="pointer-events-none" />
+          </span>
+        }
+      />
+    </ComboboxPrimitive.Item>
+  );
+};
+
+export { ComboboxItem };

package/src/components/ComboBox/ComboBoxLabel.tsx

@@ -0,0 +1,15 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+import { cn } from '#utils';
+
+const ComboboxLabel = ({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) => {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      data-slot="combobox-label"
+      {...props}
+    />
+  );
+};
+
+export { ComboboxLabel };

package/src/components/ComboBox/ComboBoxList.tsx

@@ -0,0 +1,18 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+import { cn } from '#utils';
+
+const ComboboxList = ({ className, ...props }: ComboboxPrimitive.List.Props) => {
+  return (
+    <ComboboxPrimitive.List
+      className={cn(
+        'no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0',
+        className
+      )}
+      data-slot="combobox-list"
+      {...props}
+    />
+  );
+};
+
+export { ComboboxList };

package/src/components/ComboBox/ComboBoxSeparator.tsx

@@ -0,0 +1,15 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+import { cn } from '#utils';
+
+const ComboboxSeparator = ({ className, ...props }: ComboboxPrimitive.Separator.Props) => {
+  return (
+    <ComboboxPrimitive.Separator
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      data-slot="combobox-separator"
+      {...props}
+    />
+  );
+};
+
+export { ComboboxSeparator };

package/src/components/ComboBox/ComboBoxTrigger.tsx

@@ -0,0 +1,23 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '#utils';
+
+const ComboboxTrigger = ({ children, className, render, ...props }: ComboboxPrimitive.Trigger.Props) => {
+  return (
+    <ComboboxPrimitive.Trigger
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      data-slot="combobox-trigger"
+      render={render} // This allows it to "become" the InputGroupButton
+      {...props}
+    >
+      {children}
+      {/* We move the icon here so it's always included, 
+         unless you prefer passing it as children manually. 
+      */}
+      {!render && <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />}
+    </ComboboxPrimitive.Trigger>
+  );
+};
+
+export { ComboboxTrigger };

package/src/components/ComboBox/ComboBoxValue.tsx

@@ -0,0 +1,7 @@
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+const ComboboxValue = ({ ...props }: ComboboxPrimitive.Value.Props) => {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+};
+
+export { ComboboxValue };

package/src/components/DataTable/DataTable.stories.tsx

@@ -228,6 +228,7 @@ export const Grouped: Story = {
             header: 'Status'
           }
         ],
+        enableResizing: false,
         header: 'Internal'
       },
       {
@@ -241,15 +242,32 @@ export const Grouped: Story = {
             header: 'Amount'
           }
         ],
+        enableResizing: false,
         header: 'Details'
       }
     ],
+
     data: createData(100),
     onRowDoubleClick(row) {
       alert(`row with ID ${row.id} double clicked`);
     },
     onSearchChange: () => {
       return;
-    }
+    },
+    rowActions: [
+      {
+        label: 'Modify',
+        onSelect: () => {
+          alert('Modify');
+        }
+      },
+      {
+        destructive: true,
+        label: 'Delete',
+        onSelect: () => {
+          alert('Delete');
+        }
+      }
+    ]
   }
 };

package/src/components/DataTable/DataTableBody.tsx

@@ -63,7 +63,11 @@ export const DataTableBody: React.FC<
               }
               const content = flexRender(cell.column.columnDef.cell, cell.getContext());
               return (
-                <div className="flex items-center border-r px-4 py-2 last:border-r-0" key={cell.id} style={style}>
+                <div
+                  className="flex items-center border-r bg-inherit px-4 py-2 last:border-r-0"
+                  key={cell.id}
+                  style={style}
+                >
                   {content && typeof content === 'object' ? content : <span className="block truncate">{content}</span>}
                 </div>
               );

package/src/components/DataTable/DataTableHead.tsx

@@ -1,3 +1,4 @@
+import { ACTIONS_COLUMN_ID } from './constants.ts';
 import { useDataTableHandle } from './hooks.ts';
 import { flexRender } from './utils.tsx';
 
@@ -24,11 +25,12 @@ export const DataTableHead = () => {
               style.position = 'sticky';
               style.zIndex = 20;
             }
-            // no border with actions on right
-            // TODO - consider resizing toggle in this case
-            if (header.column.getIsLastColumn('center')) {
+
+            const nextHeader = headerGroup.headers[header.index + 1];
+            if (nextHeader?.column.id === ACTIONS_COLUMN_ID) {
               style.borderRight = 'none';
             }
+
             return (
               <div
                 className="group/cell bg-background relative flex items-center border-r border-b px-4 py-2 last:border-r-0"