@trycompai/design-system 1.0.35 → 1.0.37

package/package.json

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

package/src/components/molecules/input-group.tsx

@@ -22,22 +22,28 @@ 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 (
@@ -45,7 +51,7 @@ function InputGroupAddon({
       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;

package/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} />

package/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"

package/src/components/organisms/organization-selector.tsx

@@ -228,6 +228,8 @@ function OrganizationSelector({
   const [searchQuery, setSearchQuery] = React.useState('');
   const [open, setOpen] = React.useState(false);
   const [sort, setSort] = React.useState<OrganizationSort>(defaultSort);
+  const [dropdownOpen, setDropdownOpen] = React.useState(false);
+  const [sortOpen, setSortOpen] = React.useState(false);
   const triggerRef = React.useRef<HTMLButtonElement>(null);
 
   const selectedValue = value ?? internalValue;
@@ -291,6 +293,7 @@ function OrganizationSelector({
       setSearchQuery(''); // Clear search on selection
       if (closeOnSelect) {
         setOpen(false); // Close modal on selection
+        setDropdownOpen(false); // Close dropdown on selection
       }
     },
     [value, onValueChange, closeOnSelect]
@@ -362,7 +365,7 @@ function OrganizationSelector({
               >
                 {/* Sort Menu */}
                 {enableSorting && (
-                  <div data-slot="organization-selector-sort" className="p-1 pb-0">
+                  <div data-slot="organization-selector-sort" className="border-b border-border p-2">
                     <Select
                       value={`${sort.key}:${sort.direction}`}
                       onValueChange={(value) => value && setSort(parseSortValue(value))}
@@ -382,7 +385,7 @@ function OrganizationSelector({
                 )}
 
                 {/* Search Input */}
-                <div data-slot="command-input-wrapper" className="p-1 pb-0">
+                <div data-slot="command-input-wrapper" className="border-b border-border p-2">
                   <div
                     data-slot="input-group"
                     role="group"
@@ -406,7 +409,7 @@ function OrganizationSelector({
                 {/* Organization List */}
                 <CommandPrimitive.List
                   data-slot="command-list"
-                  className="no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto"
+                  className="no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto pt-2"
                 >
                   {loading ? (
                     <EmptyState icon={<LoadingSpinner />} text={loadingText} />
@@ -468,7 +471,15 @@ function OrganizationSelector({
 
   // Dropdown mode (default): inline combobox
   return (
-    <ComboboxPrimitive.Root value={selectedValue} onValueChange={handleValueChange}>
+    <ComboboxPrimitive.Root
+      value={selectedValue}
+      onValueChange={handleValueChange}
+      open={dropdownOpen}
+      onOpenChange={(nextOpen) => {
+        if (sortOpen && !nextOpen) return;
+        setDropdownOpen(nextOpen);
+      }}
+    >
       <ComboboxPrimitive.Trigger
         ref={triggerRef}
         data-slot="organization-selector-trigger"
@@ -501,11 +512,12 @@ function OrganizationSelector({
                 <Select
                   value={`${sort.key}:${sort.direction}`}
                   onValueChange={(value) => value && setSort(parseSortValue(value))}
+                  onOpenChange={setSortOpen}
                 >
                 <SelectTrigger size="sm">
                   <span>{getSortLabel(sort)}</span>
                 </SelectTrigger>
-                  <SelectContent align="start" portal={false} position="absolute">
+                  <SelectContent align="start">
                     {sortOptions.map((option) => (
                       <SelectItem key={option.value} value={option.value}>
                         {option.label}
@@ -533,7 +545,7 @@ function OrganizationSelector({
             {/* Organization List */}
             <ComboboxPrimitive.List
               data-slot="organization-selector-list"
-              className="no-scrollbar max-h-64 scroll-py-1 overflow-y-auto p-1 overscroll-contain"
+              className="no-scrollbar max-h-64 scroll-py-1 overflow-y-auto px-1 pb-1 pt-2 overscroll-contain"
             >
               {loading ? (
                 <EmptyState icon={<LoadingSpinner />} text={loadingText} />