@douglasneuroinformatics/libui 6.2.1 → 6.3.1

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 };

package/src/components/InputGroup/InputGroupText.tsx

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

package/src/components/InputGroup/InputGroupTextArea.tsx

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