feat: update InputGroupAddon to support icon variant and bump design system version to 1.0.37

- Enhanced InputGroupAddon to include a new 'variant' prop for icon support, allowing for better styling options.
- Updated stories in Storybook to reflect the new icon variant for InputGroupAddon.
- Bumped version in package.json for @trycompai/design-system to 1.0.37.

Author: Marfuen

apps/storybook/stories/InputGroup.stories.tsx

@@ -25,7 +25,7 @@ export const WithIconLeft: Story = {
   render: () => (
     <div className="w-[300px]">
       <InputGroup>
-        <InputGroupAddon align="inline-start">
+        <InputGroupAddon align="inline-start" variant="icon">
           <Search />
         </InputGroupAddon>
         <InputGroupInput placeholder="Search..." />
@@ -39,7 +39,7 @@ export const WithIconRight: Story = {
     <div className="w-[300px]">
       <InputGroup>
         <InputGroupInput placeholder="Enter email" />
-        <InputGroupAddon align="inline-end">
+        <InputGroupAddon align="inline-end" variant="icon">
           <Mail />
         </InputGroupAddon>
       </InputGroup>
@@ -73,7 +73,7 @@ export const Currency: Story = {
   render: () => (
     <div className="w-[200px]">
       <InputGroup>
-        <InputGroupAddon align="inline-start">
+        <InputGroupAddon align="inline-start" variant="icon">
           <DollarSign />
         </InputGroupAddon>
         <InputGroupInput type="number" placeholder="0.00" />
@@ -104,7 +104,7 @@ export const AllExamples: Story = {
         <Stack gap="2">
           <Label>Search</Label>
           <InputGroup>
-            <InputGroupAddon align="inline-start">
+            <InputGroupAddon align="inline-start" variant="icon">
               <Search />
             </InputGroupAddon>
             <InputGroupInput placeholder="Search..." />

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
   "type": "module",
   "main": "./src/index.ts",

packages/design-system/src/components/molecules/input-group.tsx

@@ -22,30 +22,36 @@ const inputGroupAddonVariants = cva(
   {
     variants: {
       align: {
-        'inline-start': 'pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first',
-        'inline-end': 'pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last',
+        'inline-start': 'px-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first',
+        'inline-end': 'px-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last',
         'block-start':
           'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
         'block-end':
           'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
       },
+      variant: {
+        default: 'bg-muted/50',
+        icon: 'bg-transparent',
+      },
     },
     defaultVariants: {
       align: 'inline-start',
+      variant: 'default',
     },
   },
 );
 
 function InputGroupAddon({
   align = 'inline-start',
+  variant = 'default',
   ...props
 }: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof inputGroupAddonVariants>) {
   return (
     <div
       role="group"
       data-slot="input-group-addon"
       data-align={align}
-      className={inputGroupAddonVariants({ align })}
+      className={inputGroupAddonVariants({ align, variant })}
       onClick={(e) => {
         if ((e.target as HTMLElement).closest('button')) {
           return;

packages/design-system/src/components/organisms/app-shell.tsx

@@ -643,7 +643,7 @@ function AppShellSearch({
   return (
     <div className={appShellSearchVariants({ searchWidth })}>
       <InputGroup>
-        <InputGroupAddon align="inline-start">
+        <InputGroupAddon align="inline-start" variant="icon">
           <Search />
         </InputGroupAddon>
         <InputGroupInput placeholder={placeholder} {...props} />

packages/design-system/src/components/organisms/combobox.tsx

@@ -54,7 +54,7 @@ function ComboboxInput({
   return (
     <InputGroup>
       <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
-      <InputGroupAddon align="inline-end">
+      <InputGroupAddon align="inline-end" variant="icon">
         {showTrigger && (
           <InputGroupButton
             size="icon-xs"