@douglasneuroinformatics/libui 6.2.1 → 6.3.0

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.0",
   "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/InputGroup/InputGroup.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchIcon } from 'lucide-react';
+
+import { InputGroup } from './InputGroup.tsx';
+import { InputGroupAddon } from './InputGroupAddon.tsx';
+import { InputGroupInput } from './InputGroupInput.tsx';
+
+type Story = StoryObj<typeof InputGroup>;
+
+export default {
+  args: {
+    children: (
+      <>
+        <InputGroup>
+          <InputGroupInput placeholder="Search..." />
+          <InputGroupAddon>
+            <SearchIcon />
+          </InputGroupAddon>
+        </InputGroup>
+      </>
+    )
+  },
+  component: InputGroup,
+  tags: ['autodocs']
+} as Meta<typeof InputGroup>;
+
+export const Default: Story = {};

package/src/components/InputGroup/InputGroup.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { cn } from '#utils';
+
+const InputGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {
+  return (
+    <div
+      className={cn(
+        'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+        className
+      )}
+      data-slot="input-group"
+      role="group"
+      {...props}
+    />
+  );
+};
+
+export { InputGroup };

package/src/components/InputGroup/InputGroupAddon.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cn } from '#utils';
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    defaultVariants: {
+      align: 'inline-start'
+    },
+    variants: {
+      align: {
+        'block-end': 'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+        'block-start':
+          'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+        'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
+        'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first'
+      }
+    }
+  }
+);
+
+//ensure that Group encapsulates the input and the addon
+const InputGroupAddon = ({
+  align = 'inline-start',
+  className,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) => {
+  return (
+    <div
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      data-align={align}
+      data-slot="input-group-addon"
+      {...props}
+    />
+  );
+};
+
+export { InputGroupAddon };

package/src/components/InputGroup/InputGroupButton.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cn } from '#utils';
+
+import { Button } from '../Button/Button.tsx';
+
+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'
+} as const;
+
+const InputGroupButton = ({
+  className,
+  size = 'xs',
+  type = 'button',
+  variant = 'ghost',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>) => {
+  return (
+    <Button
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      data-size={size}
+      size={buttonSizeMap[size ?? 'xs']}
+      type={type}
+      variant={variant}
+      {...props}
+    />
+  );
+};
+
+export { InputGroupButton };

package/src/components/InputGroup/InputGroupInput.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import { cn } from '#utils';
+
+import { Input } from '../Input/Input.tsx';
+
+const InputGroupInput = ({ className, ...props }: React.ComponentProps<'input'>) => {
+  return (
+    <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 };