@ropav/styles 0.4.0 → 0.5.0

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

@@ -67,7 +67,7 @@
 }
 
 .date-input-group__input {
-  @apply flex flex-1 cursor-text items-center gap-px rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm;
+  @apply flex flex-1 cursor-text items-center gap-px rounded-none border-0 bg-transparent px-3 field-line-md shadow-none outline-none;
 
   /* Remove border radius on left side when prefix is present */
   .date-input-group:has([data-slot="date-input-group-prefix"]) & {
@@ -189,3 +189,23 @@
 .date-input-group--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.date-input-group--sm {
+  @apply h-8;
+
+  .date-input-group__input {
+    @apply field-line-sm;
+  }
+}
+
+.date-input-group--lg {
+  @apply h-10;
+
+  .date-input-group__input {
+    @apply field-line-lg;
+  }
+}

package/dist/components/dropdown.css

@@ -62,7 +62,7 @@
 /* Similar to select popover styles */
 .dropdown__popover {
   @apply max-w-[48svw] origin-(--trigger-anchor-point) scroll-py-1 scrollbar overflow-y-auto overscroll-contain bg-overlay p-0 text-sm will-change-transform md:min-w-55;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
 
   /* Focus state */

package/dist/components/index.css

@@ -30,6 +30,7 @@
 @import "./disclosure.css";
 @import "./link.css";
 @import "./pagination.css";
+@import "./sidebar.css";
 @import "./tabs.css";
 
 /* ------------------------------------------------------------------------------------------------
@@ -68,6 +69,7 @@
 /* ------------------------------------------------------------------------------------------------
  * Controls
  * ------------------------------------------------------------------------------------------------ */
+@import "./segmented-control.css";
 @import "./slider.css";
 @import "./switch.css";
 @import "./switch-group.css";
@@ -125,6 +127,7 @@
 @import "./card.css";
 @import "./header.css";
 @import "./separator.css";
+@import "./splitter.css";
 @import "./surface.css";
 
 /* ------------------------------------------------------------------------------------------------
@@ -158,3 +161,4 @@
  * Utilities
  * ------------------------------------------------------------------------------------------------ */
 @import "./scroll-shadow.css";
+@import "./virtualizer.css";

package/dist/components/index.d.ts

@@ -60,11 +60,14 @@ export * from "./radio";
 export * from "./radio-group";
 export * from "./scroll-shadow";
 export * from "./search-field";
+export * from "./segmented-control";
 export * from "./select";
 export * from "./separator";
+export * from "./sidebar";
 export * from "./skeleton";
 export * from "./slider";
 export * from "./spinner";
+export * from "./splitter";
 export * from "./surface";
 export * from "./switch";
 export * from "./switch-group";
@@ -81,4 +84,5 @@ export * from "./toggle-button";
 export * from "./toggle-button-group";
 export * from "./toolbar";
 export * from "./tooltip";
+export * from "./virtualizer";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}

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

@@ -4,6 +4,11 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
         false: "";
         true: "input--full-width";
     };
+    size: {
+        lg: "input--lg";
+        md: "";
+        sm: "input--sm";
+    };
     variant: {
         primary: "input--primary";
         secondary: "input--secondary";
@@ -13,6 +18,11 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
         false: "";
         true: "input--full-width";
     };
+    size: {
+        lg: "input--lg";
+        md: "";
+        sm: "input--sm";
+    };
     variant: {
         primary: "input--primary";
         secondary: "input--secondary";
@@ -22,6 +32,11 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
         false: "";
         true: "input--full-width";
     };
+    size: {
+        lg: "input--lg";
+        md: "";
+        sm: "input--sm";
+    };
     variant: {
         primary: "input--primary";
         secondary: "input--secondary";

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

@@ -1 +1 @@
-{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgBxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
+{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsBxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/input/input.styles.js

@@ -4,6 +4,7 @@ const inputVariants = tv({
 	base: "input",
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	variants: {
@@ -11,6 +12,11 @@ const inputVariants = tv({
 			false: "",
 			true: "input--full-width"
 		},
+		size: {
+			lg: "input--lg",
+			md: "",
+			sm: "input--sm"
+		},
 		variant: {
 			primary: "input--primary",
 			secondary: "input--secondary"

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,kBAAkB;;QAazB,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,kBAAkB;;QAczB,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,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

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

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

package/dist/components/input-group.css

@@ -76,7 +76,7 @@
 }
 
 .input-group__input {
-  @apply flex-1 rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none placeholder:text-field-placeholder sm:text-sm;
+  @apply flex-1 rounded-none border-0 bg-transparent px-3 field-line-md shadow-none outline-none placeholder:text-field-placeholder;
 
   /* Remove border radius on left side when prefix is present */
   .input-group:has([data-slot="input-group-prefix"]) & {
@@ -214,3 +214,25 @@
 .input-group--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* The shell states the floor and the control inside carries the metrics, which is the same split
+ * the base makes - the group may grow around a textarea, so it cannot state a height. */
+.input-group--sm {
+  @apply min-h-8;
+
+  .input-group__input {
+    @apply field-line-sm;
+  }
+}
+
+.input-group--lg {
+  @apply min-h-10;
+
+  .input-group__input {
+    @apply field-line-lg;
+  }
+}

package/dist/components/input.css

@@ -1,5 +1,5 @@
 .input {
-  @apply rounded-field border bg-field px-3 py-2 text-base text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm;
+  @apply rounded-field border bg-field px-3 field-line-md text-field-foreground shadow-field outline-none placeholder:text-field-placeholder;
 
   border-width: var(--border-width-field);
   border-color: var(--field-border);
@@ -100,3 +100,15 @@
 .input--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.input--sm {
+  @apply field-line-sm;
+}
+
+.input--lg {
+  @apply field-line-lg;
+}

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

@@ -1,15 +1,30 @@
 import type { VariantProps } from "tailwind-variants";
 export declare const listboxVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: "list-box--lg";
+        md: "";
+        sm: "list-box--sm";
+    };
     variant: {
         danger: "list-box--danger";
         default: "list-box--default";
     };
 }, undefined, "list-box", {
+    size: {
+        lg: "list-box--lg";
+        md: "";
+        sm: "list-box--sm";
+    };
     variant: {
         danger: "list-box--danger";
         default: "list-box--default";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        lg: "list-box--lg";
+        md: "";
+        sm: "list-box--sm";
+    };
     variant: {
         danger: "list-box--danger";
         default: "list-box--default";

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

@@ -1 +1 @@
-{"version":3,"file":"list-box.styles.d.ts","sourceRoot":"","sources":["../../../src/components/list-box/list-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;cAW1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"list-box.styles.d.ts","sourceRoot":"","sources":["../../../src/components/list-box/list-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiB1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

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

@@ -2,11 +2,21 @@ import { tv } from "tailwind-variants";
 //#region src/components/list-box/list-box.styles.ts
 const listboxVariants = tv({
 	base: "list-box",
-	defaultVariants: { variant: "default" },
-	variants: { variant: {
-		danger: "list-box--danger",
-		default: "list-box--default"
-	} }
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			lg: "list-box--lg",
+			md: "",
+			sm: "list-box--sm"
+		},
+		variant: {
+			danger: "list-box--danger",
+			default: "list-box--default"
+		}
+	}
 });
 //#endregion
 export { listboxVariants };

package/dist/components/list-box-item.css

@@ -26,8 +26,10 @@
     @apply pointer-events-none text-wrap select-none;
   }
 
-  /* Add inline-end padding when indicator is present */
-  &:has(.list-box-item__indicator) {
+  /* Room for the checkmark, only while it is drawn. The repeated attribute is what outranks the
+   * `px` the picker popovers reset on this same item. */
+  &[data-slot="list-box-item"][aria-selected="true"]:has(.list-box-item__indicator),
+  &[data-slot="list-box-item"][data-selected="true"]:has(.list-box-item__indicator) {
     @apply pe-7;
   }
 

package/dist/components/list-box.css

@@ -23,3 +23,22 @@
     @apply ms-[3%] w-[94%];
   }
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* A row is as tall as a field of the same size, so a collection standing beside one lines up. */
+.list-box--sm {
+  [data-slot="list-box-item"] {
+    @apply min-h-8 py-1;
+  }
+}
+
+.list-box--lg {
+  @apply text-base;
+
+  [data-slot="list-box-item"] {
+    @apply min-h-10 py-2;
+  }
+}

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

@@ -1,4 +1,22 @@
 import type { VariantProps } from "tailwind-variants";
-export declare const menuVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "menu", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const menuVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: "menu--lg";
+        md: "";
+        sm: "menu--sm";
+    };
+}, undefined, "menu", {
+    size: {
+        lg: "menu--lg";
+        md: "";
+        sm: "menu--sm";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        lg: "menu--lg";
+        md: "";
+        sm: "menu--sm";
+    };
+}, undefined>>;
 export type MenuVariants = VariantProps<typeof menuVariants>;
 //# sourceMappingURL=menu.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.styles.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,YAAY,iKAEvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"menu.styles.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;cAYvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dist/components/menu/menu.styles.js

@@ -1,5 +1,13 @@
 import { tv } from "tailwind-variants";
 //#region src/components/menu/menu.styles.ts
-const menuVariants = tv({ base: "menu" });
+const menuVariants = tv({
+	base: "menu",
+	defaultVariants: { size: "md" },
+	variants: { size: {
+		lg: "menu--lg",
+		md: "",
+		sm: "menu--sm"
+	} }
+});
 //#endregion
 export { menuVariants };

package/dist/components/menu.css

@@ -16,3 +16,22 @@
     @apply ms-[3%] w-[94%];
   }
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* A row is as tall as a field of the same size, so a collection standing beside one lines up. */
+.menu--sm {
+  [data-slot="menu-item"] {
+    @apply min-h-8 py-1;
+  }
+}
+
+.menu--lg {
+  @apply text-base;
+
+  [data-slot="menu-item"] {
+    @apply min-h-10 py-2;
+  }
+}

package/dist/components/modal.css

@@ -177,7 +177,7 @@
   @apply relative;
   @apply flex w-full flex-col;
   @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 pointer-events-auto;
 

package/dist/components/number-field/number-field.styles.d.ts

@@ -7,6 +7,15 @@ export declare const numberFieldVariants: import("tailwind-variants").TVReturnTy
             group: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -29,6 +38,15 @@ export declare const numberFieldVariants: import("tailwind-variants").TVReturnTy
             group: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -51,6 +69,15 @@ export declare const numberFieldVariants: import("tailwind-variants").TVReturnTy
             group: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;

package/dist/components/number-field/number-field.styles.d.ts.map

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

package/dist/components/number-field/number-field.styles.js

@@ -3,6 +3,7 @@ import { tv } from "tailwind-variants";
 const numberFieldVariants = tv({
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	slots: {
@@ -20,6 +21,11 @@ const numberFieldVariants = tv({
 				group: "number-field__group--full-width"
 			}
 		},
+		size: {
+			lg: { base: "number-field--lg" },
+			md: {},
+			sm: { base: "number-field--sm" }
+		},
 		variant: {
 			primary: { base: "number-field--primary" },
 			secondary: { base: "number-field--secondary" }

package/dist/components/number-field.css

@@ -97,7 +97,7 @@
 }
 
 .number-field__input {
-  @apply min-w-0 rounded-none border-0 bg-transparent px-3 py-2 text-base tabular-nums shadow-none outline-none sm:text-sm;
+  @apply min-w-0 rounded-none border-0 bg-transparent px-3 field-line-md tabular-nums shadow-none outline-none;
 
   /* Remove border radius on left side when decrement button is present */
   .number-field__group:has([slot="decrement"]) & {
@@ -238,3 +238,62 @@
 .number-field__group--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* The stepper column stays 4px wider than the field is tall, as it is at `md`. */
+.number-field--sm {
+  .number-field__group {
+    @apply h-8;
+
+    &:has([slot="decrement"]) {
+      grid-template-columns: 36px 1fr;
+    }
+
+    &:has([slot="increment"]) {
+      grid-template-columns: 1fr 36px;
+    }
+
+    &:has([slot="decrement"]):has([slot="increment"]) {
+      grid-template-columns: 36px 1fr 36px;
+    }
+  }
+
+  .number-field__input {
+    @apply field-line-sm;
+  }
+
+  .number-field__increment-button,
+  .number-field__decrement-button {
+    @apply w-9;
+  }
+}
+
+.number-field--lg {
+  .number-field__group {
+    @apply h-10;
+
+    &:has([slot="decrement"]) {
+      grid-template-columns: 44px 1fr;
+    }
+
+    &:has([slot="increment"]) {
+      grid-template-columns: 1fr 44px;
+    }
+
+    &:has([slot="decrement"]):has([slot="increment"]) {
+      grid-template-columns: 44px 1fr 44px;
+    }
+  }
+
+  .number-field__input {
+    @apply field-line-lg;
+  }
+
+  .number-field__increment-button,
+  .number-field__decrement-button {
+    @apply w-11;
+  }
+}