Add InputGroup and InputAddon components

src/components/InputAddon/InputAddon.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+
+import clsx from 'clsx';
+
+export interface InputAddonProps {
+  /**
+   * The label attached to the label
+   */
+  children?: ReactNode;
+  /**
+   * Custom classes for the label
+   */
+  className?: string;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const InputAddon = ({
+  className,
+  children,
+  ...props
+}: InputAddonProps) => {
+  return (
+    <span className={clsx('input-addon', className)} {...props}>
+      {children}
+    </span>
+  );
+};
+
+export default InputAddon;

src/components/InputAddon/index.ts

@@ -0,0 +1,2 @@
+export { default } from './InputAddon';
+export type { InputAddonProps } from './InputAddon';

src/components/InputGroup/InputGroup.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+
+import clsx from 'clsx';
+
+export interface InputGroupProps {
+  /**
+   * The label attached to the label
+   */
+  children?: ReactNode;
+  /**
+   * Custom classes for the label
+   */
+  className?: string;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const InputGroup = ({
+  className,
+  children,
+  ...props
+}: InputGroupProps) => {
+  return (
+    <div className={clsx('input-group', className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default InputGroup;

src/components/InputGroup/index.ts

@@ -0,0 +1,2 @@
+export { default } from './InputGroup';
+export type { InputGroupProps } from './InputGroup';

src/components/index.ts

@@ -61,9 +61,15 @@ export type { DialogBodyProps } from '@components/DialogBody';
 export { default as DialogHeader } from '@components/DialogHeader';
 export type { DialogHeaderProps } from '@components/DialogHeader';
 
+export { default as InputAddon } from '@components/InputAddon';
+export type { InputAddonProps } from '@components/InputAddon';
+
 export { default as InputControl } from '@components/InputControl';
 export type { InputControlProps } from '@components/InputControl';
 
+export { default as InputGroup } from '@components/InputGroup';
+export type { InputGroupProps } from '@components/InputGroup';
+
 export { default as Grid } from '@components/Grid';
 export type { GridProps } from '@components/Grid';
 

src/docs/App.tsx

@@ -16,6 +16,7 @@ import DialogDemo from './pages/Components/DialogDemo';
 import FormControlDemo from './pages/Forms/FormControlDemo';
 import GridDemo from './pages/Layout/GridDemo';
 import InputDemo from './pages/Forms/InputDemo';
+import InputGroupDemo from './pages/Forms/InputGroupDemo';
 import InputLabelDemo from './pages/Forms/InputLabelDemo';
 import Installation from './pages/GetStarted/Installation';
 import LabelDemo from './pages/Components/LabelDemo';
@@ -46,6 +47,7 @@ function App() {
         <Route path="/formcontrol" element={<FormControlDemo />} />
         <Route path="/grid" element={<GridDemo />} />
         <Route path="/input" element={<InputDemo />} />
+        <Route path="/inputgroup" element={<InputGroupDemo />} />
         <Route path="/inputlabel" element={<InputLabelDemo />} />
         <Route path="/installation" element={<Installation />} />
         <Route path="/label" element={<LabelDemo />} />

src/docs/components/Layout.tsx

@@ -34,6 +34,7 @@ export default function Layout({ children }) {
             <p className="h6 mb-2 mt-3 ms-3">Forms</p>
             <ListItem primary="Checkbox" onClick={() => navigate('/checkbox')} />
             <ListItem primary="Input" onClick={() => navigate('/input')} />
+            <ListItem primary="Input Group" onClick={() => navigate('/inputgroup')} />
             <ListItem primary="Input Label" onClick={() => navigate('/inputlabel')} />
             <ListItem primary="Radio" onClick={() => navigate('/radio')} />
             <ListItem primary="Range" onClick={() => navigate('/range')} />

src/docs/pages/Forms/FormControlDemo.tsx

@@ -13,7 +13,7 @@ export default function FormControlDemo() {
 
       <h3>Input Control</h3>
       <DemoBox>
-        <Grid xs={{ grid: 1, gap: 3 }}>
+        <Grid>
           <InputControl name="default" label="Default" placeholder="Default" helper="A default text field." />
           <InputControl name="email" type="email" label="Email" placeholder="Email" />
           <InputControl name="password" type="password" label="Password" placeholder="Password" />

src/docs/pages/Forms/InputDemo.tsx

@@ -7,7 +7,7 @@ export default function InputDemo() {
     <>
       <h2>Input</h2>
       <DemoBox>
-        <Grid xs={{ grid: 1, gap: 3 }}>
+        <Grid>
           <Input placeholder="Default" />
           <Input type="email" placeholder="Email" />
           <Input type="password" placeholder="Password" />

src/docs/pages/Forms/InputGroupDemo.tsx

@@ -0,0 +1,45 @@
+import DemoBox from "@docs/components/DemoBox";
+
+import { Button, Grid, Input, InputAddon, InputGroup } from "@components";
+import ValkyrieIcon, { viMagnifyingGlass } from "@sippy-platform/valkyrie";
+
+export default function InputGroupDemo() {
+  return (
+    <>
+      <h2>Input Group</h2>
+      <h3>Input Addon</h3>
+      <p>The input group allows you to add input addons to an input. These are small text labels.</p>
+      <DemoBox>
+        <Grid>
+          <InputGroup>
+            <InputAddon>Prefix</InputAddon>
+            <Input placeholder="Default" />
+          </InputGroup>
+          <InputGroup>
+            <Input type="email" placeholder="Email" />
+            <InputAddon>Suffix</InputAddon>
+          </InputGroup>
+          <InputGroup>
+            <Input type="password" placeholder="Password" />
+            <InputAddon>Infix</InputAddon>
+            <Input type="password" placeholder="Confirm Password" />
+          </InputGroup>
+          <InputGroup>
+            <InputAddon><ValkyrieIcon icon={viMagnifyingGlass} /></InputAddon>
+            <Input type="search" placeholder="Search" />
+          </InputGroup>
+        </Grid>
+      </DemoBox>
+      <h3>Buttons</h3>
+      <p>You can also use it to add Buttons</p>
+      <DemoBox>
+        <Grid>
+          <InputGroup>
+            <Button>Default</Button>
+            <Input placeholder="Default" />
+          </InputGroup>
+        </Grid>
+      </DemoBox>
+    </>
+  );
+}

src/index.ts

@@ -61,9 +61,15 @@ export type { DialogBodyProps } from '@components/DialogBody';
 export { default as DialogHeader } from '@components/DialogHeader';
 export type { DialogHeaderProps } from '@components/DialogHeader';
 
+export { default as InputAddon } from '@components/InputAddon';
+export type { InputAddonProps } from '@components/InputAddon';
+
 export { default as InputControl } from '@components/InputControl';
 export type { InputControlProps } from '@components/InputControl';
 
+export { default as InputGroup } from '@components/InputGroup';
+export type { InputGroupProps } from '@components/InputGroup';
+
 export { default as Grid } from '@components/Grid';
 export type { GridProps } from '@components/Grid';