@ropav/styles 0.4.0 → 0.5.0

package/README.md

@@ -126,8 +126,9 @@ did before the other themes existed.
 
 ### Bundled themes
 
-Eleven, ported from HeroUI's theme gallery. The default one is already in `@ropav/styles`; the rest are
-opt-in, one file each:
+The default one, plus a theme per brand ported from HeroUI's gallery — `hero` among them, being
+HeroUI's own palette. The default is already in `@ropav/styles`; the others are opt-in, one file
+each:
 
 ```css
 @import "@ropav/styles";
@@ -136,10 +137,10 @@ opt-in, one file each:
 
 | `data-theme` | | `data-theme` | | `data-theme` |
 | --- | --- | --- | --- | --- |
-| `default` | | `netflix` | | `airbnb` |
+| `default` | | `mint` | | `coinbase` |
+| `hero` | | `netflix` | | `airbnb` |
 | `sky` | | `uber` | | `discord` |
 | `lavender` | | `spotify` | | `rabbit` |
-| `mint` | | `coinbase` | | |
 
 Each carries both a light and a dark palette, so a theme is a brand rather than an appearance. There is
 no `netflix-dark` — it is `data-theme="netflix"` plus `class="dark"`.
@@ -147,11 +148,15 @@ no `netflix-dark` — it is `data-theme="netflix"` plus `class="dark"`.
 `themes/all.css` pulls in all of them at once. That is for docs and playgrounds; an app should import
 only the themes it actually offers, since each is around 10 kB before compression.
 
-The ten non-default themes are **generated** — edit `scripts/themes/presets.ts` and run
+Every theme but `default` and `hero` is **generated** — edit `scripts/themes/presets.ts` and run
 `pnpm generate:themes`, never the CSS. A preset is four numbers (accent lightness, chroma and hue, plus
 the chroma of the neutral ramp), a radius pair, and any exact brand colours that should beat the
 calculated ones.
 
+Those two stay hand-written, each file's header saying what the generator cannot reproduce about it.
+Their presets carry the label and the presentation order; the CSS is the source of truth for their
+tokens.
+
 ### Retheming
 
 Every token is a CSS custom property, so overriding them in your own stylesheet is enough — no rebuild

package/dist/components/accordion.css

@@ -116,7 +116,7 @@
 /* Surface variant */
 .accordion--surface {
   @apply bg-surface;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
    * stops having any shape and its contents sit loose on the page. */
@@ -147,13 +147,13 @@
 
   /* Special rounding for first and last items in surface variant */
   &:first-child [data-slot="accordion-trigger"] {
-    border-start-start-radius: min(32px, var(--radius-3xl));
-    border-start-end-radius: min(32px, var(--radius-3xl));
+    border-start-start-radius: min(32px, var(--component-radius));
+    border-start-end-radius: min(32px, var(--component-radius));
   }
 
   &:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"]))
     [data-slot="accordion-trigger"] {
-    border-end-start-radius: min(32px, var(--radius-3xl));
-    border-end-end-radius: min(32px, var(--radius-3xl));
+    border-end-start-radius: min(32px, var(--component-radius));
+    border-end-end-radius: min(32px, var(--component-radius));
   }
 }

package/dist/components/alert-dialog.css

@@ -145,7 +145,7 @@
   @apply flex min-h-0 w-full flex-col;
   @apply max-h-full;
   @apply bg-overlay shadow-overlay outline-none;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
   @apply p-6;
   @apply overflow-clip;
   @apply pointer-events-auto;

package/dist/components/alert.css

@@ -11,7 +11,7 @@
     outline: 1px solid CanvasText;
     outline-offset: -1px;
   }
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
 }
 
 /* Alert elements */

package/dist/components/autocomplete/autocomplete.styles.d.ts

@@ -7,6 +7,17 @@ export declare const autocompleteVariants: import("tailwind-variants").TVReturnT
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -31,6 +42,17 @@ export declare const autocompleteVariants: import("tailwind-variants").TVReturnT
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -55,6 +77,17 @@ export declare const autocompleteVariants: import("tailwind-variants").TVReturnT
             trigger: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+            popover: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+            popover: string;
+        };
+    };
     variant: {
         primary: {
             base: string;

package/dist/components/autocomplete/autocomplete.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,oBAAoB;;QAgB3B,KAAK;QACL,IAAI;YACF,IAAI;YACJ,OAAO;;;;QAIT,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,oBAAoB;;QAiB3B,KAAK;QACL,IAAI;YACF,IAAI;YACJ,OAAO;;;;QAIT,EAAE;YACA,IAAI;YACJ,OAAO;;QAET,EAAE;QACF,EAAE;YACA,IAAI;YACJ,OAAO;;;;QAIT,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/components/autocomplete/autocomplete.styles.js

@@ -3,6 +3,7 @@ import { tv } from "tailwind-variants";
 const autocompleteVariants = tv({
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	slots: {
@@ -22,6 +23,17 @@ const autocompleteVariants = tv({
 				trigger: "autocomplete__trigger--full-width"
 			}
 		},
+		size: {
+			lg: {
+				base: "autocomplete--lg",
+				popover: "autocomplete__popover--lg"
+			},
+			md: {},
+			sm: {
+				base: "autocomplete--sm",
+				popover: "autocomplete__popover--sm"
+			}
+		},
 		variant: {
 			primary: { base: "autocomplete--primary" },
 			secondary: { base: "autocomplete--secondary" }

package/dist/components/autocomplete.css

@@ -4,7 +4,7 @@
 }
 
 .autocomplete__trigger {
-  @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none select-none no-highlight;
+  @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 field-line-md text-field-foreground shadow-field outline-none select-none no-highlight;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a control
    * with nothing to say it is one. `ButtonBorder` is the keyword the platform uses for a
@@ -109,7 +109,7 @@
 }
 
 .autocomplete__value {
-  @apply flex-1 text-start text-base wrap-break-word text-current sm:text-sm;
+  @apply flex-1 text-start wrap-break-word text-current;
 
   &[data-placeholder="true"] {
     @apply text-field-placeholder;
@@ -139,7 +139,7 @@
 /* Similar to popover content styles */
 .autocomplete__popover {
   @apply flex w-(--trigger-width) max-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 flex-col overflow-hidden overscroll-contain bg-overlay p-0 pt-2 text-sm outline-none;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
 
   &:focus,
@@ -289,3 +289,31 @@
     transform: scale(0.93);
   }
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* The trigger's own metrics, and the option rows in a popover that is portalled out of this tree -
+ * which is why the popover carries its own size class rather than being reached from the base. */
+.autocomplete--sm .autocomplete__trigger {
+  @apply min-h-8 field-line-sm;
+}
+
+.autocomplete--lg .autocomplete__trigger {
+  @apply min-h-10 field-line-lg;
+}
+
+.autocomplete__popover--sm {
+  [data-slot="list-box-item"] {
+    @apply min-h-8 py-1;
+  }
+}
+
+.autocomplete__popover--lg {
+  @apply text-base;
+
+  [data-slot="list-box-item"] {
+    @apply min-h-10 py-2;
+  }
+}

package/dist/components/button-group.css

@@ -26,32 +26,32 @@
 
 /* Apply border radius to first button (start edge) */
 .button-group--horizontal .button:first-child {
-  @apply rounded-s-3xl;
+  @apply rounded-s-component;
 }
 
 /* Apply border radius to last button (end edge) */
 .button-group--horizontal .button:last-child {
-  @apply rounded-e-3xl;
+  @apply rounded-e-component;
 }
 
 /* If only one button, apply both rounded edges */
 .button-group--horizontal .button:first-child:last-child {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 
 /* Apply border radius to first button (top edge) in vertical */
 .button-group--vertical .button:first-child {
-  @apply rounded-t-3xl;
+  @apply rounded-t-component;
 }
 
 /* Apply border radius to last button (bottom edge) in vertical */
 .button-group--vertical .button:last-child {
-  @apply rounded-b-3xl;
+  @apply rounded-b-component;
 }
 
 /* If only one button in vertical, apply all rounded edges */
 .button-group--vertical .button:first-child:last-child {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 
 /* Remove scale transform on active/pressed state for buttons in group */

package/dist/components/button.css

@@ -2,7 +2,7 @@
 
 /* Base button styles */
 .button {
-  @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-3xl px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:h-9;
+  @apply relative isolate inline-flex h-9 w-fit origin-center items-center justify-center gap-2 rounded-component px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
 
   /**
    * Transitions
@@ -69,17 +69,13 @@
 
   /* SVG icon styling - exclude spinner and link-icon svgs */
   & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
-    @apply pointer-events-none -mx-0.5 my-0.5 size-5 shrink-0 self-center sm:my-1 sm:size-4;
+    @apply pointer-events-none -mx-0.5 my-1 size-4 shrink-0 self-center;
   }
 }
 
 /* Size variants */
 .button--sm {
-  @apply h-9 px-3 md:h-8;
-
-  & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
-    @apply size-4;
-  }
+  @apply h-8 px-3;
 
   &:active,
   &[data-pressed="true"] {
@@ -92,7 +88,7 @@
 }
 
 .button--lg {
-  @apply h-11 text-base md:h-10;
+  @apply h-10 text-base;
 
   &:active,
   &[data-pressed="true"] {
@@ -168,15 +164,15 @@
 
 /* Icon-only modifier */
 .button--icon-only {
-  @apply w-10 p-0 md:w-9;
+  @apply w-9 p-0;
 }
 
 .button--icon-only.button--sm {
-  @apply w-9 md:w-8;
+  @apply w-8;
 }
 
 .button--icon-only.button--lg {
-  @apply w-11 md:w-10;
+  @apply w-10;
 }
 
 /* Full width modifier */

package/dist/components/calendar-year-picker.css

@@ -116,7 +116,7 @@
  * Year Cell
  * -------------------------------------------------------------------------- */
 .calendar-year-picker__year-cell {
-  @apply relative inline-flex h-8 items-center justify-center rounded-3xl px-2.5 text-sm font-medium outline-none select-none no-highlight;
+  @apply relative inline-flex h-8 items-center justify-center rounded-component px-2.5 text-sm font-medium outline-none select-none no-highlight;
   touch-action: manipulation;
 
   /**

package/dist/components/card.css

@@ -4,7 +4,7 @@
 .card {
   @apply relative flex flex-col gap-3 overflow-visible p-4;
   @apply shadow-surface;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
 }
 
 /* Element - header */

package/dist/components/color-input-group/color-input-group.styles.d.ts

@@ -6,6 +6,15 @@ export declare const colorInputGroupVariants: import("tailwind-variants").TVRetu
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -26,6 +35,15 @@ export declare const colorInputGroupVariants: import("tailwind-variants").TVRetu
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -46,6 +64,15 @@ export declare const colorInputGroupVariants: import("tailwind-variants").TVRetu
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;

package/dist/components/color-input-group/color-input-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-input-group/color-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,uBAAuB;;QAa9B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"color-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-input-group/color-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,uBAAuB;;QAc9B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;QACF,EAAE;YACA,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC"}

package/dist/components/color-input-group/color-input-group.styles.js

@@ -3,6 +3,7 @@ import { tv } from "tailwind-variants";
 const colorInputGroupVariants = tv({
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	slots: {
@@ -16,6 +17,11 @@ const colorInputGroupVariants = tv({
 			false: {},
 			true: { base: "color-input-group--full-width" }
 		},
+		size: {
+			lg: { base: "color-input-group--lg" },
+			md: {},
+			sm: { base: "color-input-group--sm" }
+		},
 		variant: {
 			primary: { base: "color-input-group--primary" },
 			secondary: { base: "color-input-group--secondary" }

package/dist/components/color-input-group.css

@@ -61,7 +61,7 @@
    ========================================================================== */
 
 .color-input-group__input {
-  @apply flex h-full flex-1 cursor-text items-center rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm;
+  @apply flex h-full flex-1 cursor-text items-center rounded-none border-0 bg-transparent px-3 field-line-md shadow-none outline-none;
 
   /* Placeholder styling */
   &::placeholder {
@@ -142,3 +142,23 @@
 .color-input-group--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.color-input-group--sm {
+  @apply h-8;
+
+  .color-input-group__input {
+    @apply field-line-sm;
+  }
+}
+
+.color-input-group--lg {
+  @apply h-10;
+
+  .color-input-group__input {
+    @apply field-line-lg;
+  }
+}

package/dist/components/combo-box/combo-box.styles.d.ts

@@ -7,6 +7,15 @@ export declare const comboBoxVariants: import("tailwind-variants").TVReturnType<
             inputGroup: string;
         };
     };
+    size: {
+        lg: {
+            popover: string;
+        };
+        md: {};
+        sm: {
+            popover: string;
+        };
+    };
 }, {
     base: string;
     inputGroup: string;
@@ -21,6 +30,15 @@ export declare const comboBoxVariants: import("tailwind-variants").TVReturnType<
             inputGroup: string;
         };
     };
+    size: {
+        lg: {
+            popover: string;
+        };
+        md: {};
+        sm: {
+            popover: string;
+        };
+    };
 }, {
     base: string;
     inputGroup: string;
@@ -35,6 +53,15 @@ export declare const comboBoxVariants: import("tailwind-variants").TVReturnType<
             inputGroup: string;
         };
     };
+    size: {
+        lg: {
+            popover: string;
+        };
+        md: {};
+        sm: {
+            popover: string;
+        };
+    };
 }, {
     base: string;
     inputGroup: string;

package/dist/components/combo-box/combo-box.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.styles.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/combo-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;QAavB,KAAK;QACL,IAAI;YACF,IAAI;YACJ,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIhB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"combo-box.styles.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/combo-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;QAcvB,KAAK;QACL,IAAI;YACF,IAAI;YACJ,UAAU;;;;QAMZ,EAAE;YACA,OAAO;;QAET,EAAE;QACF,EAAE;YACA,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIb,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/combo-box/combo-box.styles.js

@@ -1,7 +1,10 @@
 import { tv } from "tailwind-variants";
 //#region src/components/combo-box/combo-box.styles.ts
 const comboBoxVariants = tv({
-	defaultVariants: { fullWidth: false },
+	defaultVariants: {
+		fullWidth: false,
+		size: "md"
+	},
 	slots: {
 		base: "combo-box",
 		inputGroup: "combo-box__input-group",
@@ -9,13 +12,20 @@ const comboBoxVariants = tv({
 		trigger: "combo-box__trigger",
 		value: "combo-box__value"
 	},
-	variants: { fullWidth: {
-		false: {},
-		true: {
-			base: "combo-box--full-width",
-			inputGroup: "combo-box__input-group--full-width"
+	variants: {
+		fullWidth: {
+			false: {},
+			true: {
+				base: "combo-box--full-width",
+				inputGroup: "combo-box__input-group--full-width"
+			}
+		},
+		size: {
+			lg: { popover: "combo-box__popover--lg" },
+			md: {},
+			sm: { popover: "combo-box__popover--sm" }
 		}
-	} }
+	}
 });
 //#endregion
 export { comboBoxVariants };

package/dist/components/combo-box.css

@@ -100,7 +100,7 @@
 /* Similar to popover content styles */
 .combo-box__popover {
   @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 scrollbar overflow-y-auto overscroll-contain bg-overlay p-0 text-sm;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
 
   /* Focus state */
@@ -174,6 +174,26 @@
   }
 }
 
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* The input inside sizes itself from the context the root provides, so only the option rows are
+ * left - reached from the popover's own class, since it is teleported out of this tree. */
+.combo-box__popover--sm {
+  [data-slot="list-box-item"] {
+    @apply min-h-8 py-1;
+  }
+}
+
+.combo-box__popover--lg {
+  @apply text-base;
+
+  [data-slot="list-box-item"] {
+    @apply min-h-10 py-2;
+  }
+}
+
 /* Full width modifier */
 .combo-box--full-width {
   @apply w-full;

package/dist/components/date-input-group/date-input-group.styles.d.ts

@@ -6,6 +6,15 @@ export declare const dateInputGroupVariants: import("tailwind-variants").TVRetur
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -28,6 +37,15 @@ export declare const dateInputGroupVariants: import("tailwind-variants").TVRetur
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -50,6 +68,15 @@ export declare const dateInputGroupVariants: import("tailwind-variants").TVRetur
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;

package/dist/components/date-input-group/date-input-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/date-input-group/date-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,sBAAsB;;QAe7B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"date-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/date-input-group/date-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,sBAAsB;;QAgB7B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;QACF,EAAE;YACA,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/components/date-input-group/date-input-group.styles.js

@@ -3,6 +3,7 @@ import { tv } from "tailwind-variants";
 const dateInputGroupVariants = tv({
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	slots: {
@@ -18,6 +19,11 @@ const dateInputGroupVariants = tv({
 			false: {},
 			true: { base: "date-input-group--full-width" }
 		},
+		size: {
+			lg: { base: "date-input-group--lg" },
+			md: {},
+			sm: { base: "date-input-group--sm" }
+		},
 		variant: {
 			primary: { base: "date-input-group--primary" },
 			secondary: { base: "date-input-group--secondary" }