@douglasneuroinformatics/libui 6.2.0 → 6.3.0

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