@trycompai/design-system 1.0.36 → 1.0.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trycompai/design-system",
3
- "version": "1.0.36",
3
+ "version": "1.0.37",
4
4
  "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
@@ -22,22 +22,28 @@ const inputGroupAddonVariants = cva(
22
22
  {
23
23
  variants: {
24
24
  align: {
25
- 'inline-start': 'pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first',
26
- 'inline-end': 'pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last',
25
+ 'inline-start': 'px-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first',
26
+ 'inline-end': 'px-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last',
27
27
  'block-start':
28
28
  'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
29
29
  'block-end':
30
30
  'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
31
31
  },
32
+ variant: {
33
+ default: 'bg-muted/50',
34
+ icon: 'bg-transparent',
35
+ },
32
36
  },
33
37
  defaultVariants: {
34
38
  align: 'inline-start',
39
+ variant: 'default',
35
40
  },
36
41
  },
37
42
  );
38
43
 
39
44
  function InputGroupAddon({
40
45
  align = 'inline-start',
46
+ variant = 'default',
41
47
  ...props
42
48
  }: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof inputGroupAddonVariants>) {
43
49
  return (
@@ -45,7 +51,7 @@ function InputGroupAddon({
45
51
  role="group"
46
52
  data-slot="input-group-addon"
47
53
  data-align={align}
48
- className={inputGroupAddonVariants({ align })}
54
+ className={inputGroupAddonVariants({ align, variant })}
49
55
  onClick={(e) => {
50
56
  if ((e.target as HTMLElement).closest('button')) {
51
57
  return;
@@ -643,7 +643,7 @@ function AppShellSearch({
643
643
  return (
644
644
  <div className={appShellSearchVariants({ searchWidth })}>
645
645
  <InputGroup>
646
- <InputGroupAddon align="inline-start">
646
+ <InputGroupAddon align="inline-start" variant="icon">
647
647
  <Search />
648
648
  </InputGroupAddon>
649
649
  <InputGroupInput placeholder={placeholder} {...props} />
@@ -54,7 +54,7 @@ function ComboboxInput({
54
54
  return (
55
55
  <InputGroup>
56
56
  <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
57
- <InputGroupAddon align="inline-end">
57
+ <InputGroupAddon align="inline-end" variant="icon">
58
58
  {showTrigger && (
59
59
  <InputGroupButton
60
60
  size="icon-xs"