@tcn/ui 0.9.0 → 0.11.0

package/src/inputs/input_group/input_group.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+
+export type InputGroupProps = HStackProps;
+
+export const InputGroup = React.forwardRef<HTMLElement, InputGroupProps>(
+  function InputGroup(
+    { children, as = 'div', className, ...props }: InputGroupProps,
+    ref
+  ) {
+    const clonedChildren = React.Children.map(children, child =>
+      React.isValidElement(child)
+        ? React.cloneElement(child, {
+            ...child.props,
+            className: clsx(child.props.className, 'tcn-input-group-slot'),
+          })
+        : child
+    );
+    return (
+      <HStack ref={ref} as={as} className={clsx(className, 'tcn-input-group')} {...props}>
+        {clonedChildren}
+      </HStack>
+    );
+  }
+);