@ropav/styles 0.4.0 → 0.6.0

package/dist/components/drawer.css

@@ -9,10 +9,6 @@
 .drawer__trigger {
   @apply inline-block cursor-(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     background-color 150ms var(--ease-smooth),
@@ -155,15 +151,15 @@
   &[data-placement="bottom"] {
     @apply w-full;
     @apply max-h-[85vh];
-    border-start-start-radius: min(32px, var(--radius-2xl));
-    border-start-end-radius: min(32px, var(--radius-2xl));
+    border-start-start-radius: min(32px, var(--component-radius));
+    border-start-end-radius: min(32px, var(--component-radius));
   }
 
   &[data-placement="top"] {
     @apply w-full;
     @apply max-h-[85vh];
-    border-end-start-radius: min(32px, var(--radius-2xl));
-    border-end-end-radius: min(32px, var(--radius-2xl));
+    border-end-start-radius: min(32px, var(--component-radius));
+    border-end-end-radius: min(32px, var(--component-radius));
   }
 
   /* Left/right placement: auto width, full height */

package/dist/components/drop-zone/drop-zone.styles.d.ts

@@ -0,0 +1,34 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const dropZoneVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {
+    [x: string]: {
+        [x: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    base: string;
+    trigger: string;
+}>>;
+export type DropZoneVariants = VariantProps<typeof dropZoneVariants>;
+//# sourceMappingURL=drop-zone.styles.d.ts.map

package/dist/components/drop-zone/drop-zone.styles.d.ts.map

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

package/dist/components/drop-zone/drop-zone.styles.js

@@ -0,0 +1,8 @@
+import { tv } from "tailwind-variants";
+//#region src/components/drop-zone/drop-zone.styles.ts
+const dropZoneVariants = tv({ slots: {
+	base: "drop-zone",
+	trigger: "drop-zone__trigger"
+} });
+//#endregion
+export { dropZoneVariants };

package/dist/components/drop-zone/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./drop-zone.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/drop-zone/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drop-zone/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/drop-zone/index.js

@@ -0,0 +1,2 @@
+import { dropZoneVariants } from "./drop-zone.styles.js";
+export { dropZoneVariants };

package/dist/components/drop-zone.css

@@ -0,0 +1,78 @@
+/* Drop zone component styles */
+
+.drop-zone {
+  @apply relative flex w-full flex-col items-center justify-center gap-2 rounded-component p-6 text-center text-sm outline-none;
+
+  /* The dashed edge is this component's whole affordance, so it is painted from `--border`
+   * rather than `--field-border`: the default theme sets that to `transparent` with a width of
+   * `0`, which is right for an input sitting on a filled background and wrong for a region
+   * whose only boundary is the line itself. */
+  --drop-zone-border: var(--border);
+  --drop-zone-bg: transparent;
+  --drop-zone-fg: var(--muted);
+
+  border: var(--border-width) dashed var(--drop-zone-border);
+  background-color: var(--drop-zone-bg);
+  color: var(--drop-zone-fg);
+
+  transition:
+    background-color 150ms var(--ease-smooth),
+    border-color 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      --drop-zone-border: var(--field-border-hover);
+    }
+  }
+
+  /* The ring is painted for the hidden file input inside, which is what a keyboard focuses. */
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* A drag the zone would take. Both the line and the fill move, because the fill alone is a
+   * ~15% tint that a light theme barely separates from the page. */
+  &[data-drop-target="true"] {
+    --drop-zone-border: var(--accent);
+    --drop-zone-bg: var(--accent-soft);
+    --drop-zone-fg: var(--foreground);
+  }
+
+  /* A drag carrying a type `accept` rules out.
+   *
+   * Accept takes `--accent` to match the one drop state the library already had
+   * (`--table-cell-bg-drop-target`), which leaves the two verdicts a hue apart in most themes
+   * but nearly together in one whose accent is itself red — measured at hue 28 for both under
+   * `netflix`, separated only by lightness. That is a collision only the theme can settle, and
+   * the properties above are how: repoint `--drop-zone-border` and `--drop-zone-bg`. */
+  &[data-status="reject"] {
+    --drop-zone-border: var(--danger);
+    --drop-zone-bg: var(--danger-soft);
+    --drop-zone-fg: var(--foreground);
+  }
+
+  /* Forced Colors Mode forces every colour to a system keyword, so the accent and danger fills
+   * above flatten onto the page and the three states become one dashed box. The border is the
+   * only channel left that the platform still lets a rule choose, hence the keywords. */
+  @media (forced-colors: active) {
+    &[data-drop-target="true"] {
+      border-color: Highlight;
+    }
+
+    &[data-status="reject"] {
+      border-color: LinkText;
+    }
+  }
+
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.drop-zone__trigger {
+  @apply rounded-field underline underline-offset-2 outline-none;
+
+  cursor: var(--cursor-interactive);
+}

package/dist/components/dropdown.css

@@ -22,10 +22,6 @@
       outline-offset: -1px;
     }
   }
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     background-color 150ms var(--ease-smooth),
@@ -62,7 +58,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/error-message.css

@@ -2,10 +2,6 @@
 .error-message {
   @apply h-auto text-xs wrap-break-word text-danger;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     opacity 150ms var(--ease-out),
     height 350ms var(--ease-smooth);

package/dist/components/field-error.css

@@ -2,10 +2,6 @@
 .field-error {
   @apply h-0 px-1 text-xs wrap-break-word text-danger opacity-0 data-visible:h-auto data-visible:opacity-100;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     opacity 150ms var(--ease-out),
     height 350ms var(--ease-smooth);

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";
@@ -96,6 +98,7 @@
  * ------------------------------------------------------------------------------------------------ */
 @import "./checkbox-group.css";
 @import "./checkbox.css";
+@import "./drop-zone.css";
 @import "./fieldset.css";
 @import "./input-otp.css";
 @import "./input.css";
@@ -125,6 +128,7 @@
 @import "./card.css";
 @import "./header.css";
 @import "./separator.css";
+@import "./splitter.css";
 @import "./surface.css";
 
 /* ------------------------------------------------------------------------------------------------
@@ -158,3 +162,4 @@
  * Utilities
  * ------------------------------------------------------------------------------------------------ */
 @import "./scroll-shadow.css";
+@import "./virtualizer.css";

package/dist/components/index.d.ts

@@ -31,6 +31,7 @@ export * from "./description";
 export * from "./drawer";
 export * from "./disclosure";
 export * from "./disclosure-group";
+export * from "./drop-zone";
 export * from "./dropdown";
 export * from "./empty-state";
 export * from "./error-message";
@@ -60,11 +61,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 +85,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,aAAa,CAAC;AAC5B,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

@@ -1,6 +1,13 @@
 /* Input group styles */
 .input-group {
-  @apply inline-flex min-h-9 items-center rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  @apply inline-flex min-h-9 items-center rounded-field border text-sm text-field-foreground shadow-field outline-none;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --input-group-bg: var(--field-background, var(--default));
+  --input-group-bg-hover: var(--field-hover);
+  --input-group-bg-focus: var(--field-focus);
+
+  background-color: var(--input-group-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
@@ -19,10 +26,6 @@
     height: auto;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth),
@@ -33,7 +36,7 @@
   @media (hover: hover) {
     &:hover:not(:focus-within),
     &[data-hovered="true"]:not([data-focus-within="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--input-group-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -43,13 +46,13 @@
   &:has([data-slot="input-group-textarea"]:focus) {
     @apply status-focused-field;
     border-color: var(--field-border-focus);
-    background-color: var(--field-focus);
+    background-color: var(--input-group-bg-focus);
   }
 
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--input-group-bg-focus);
     border-color: var(--color-field-border-invalid);
   }
 
@@ -70,13 +73,13 @@
    */
   &:has([data-slot="input-group-input"]:-webkit-autofill),
   &:has([data-slot="input-group-input"]:autofill) {
-    background-color: var(--field-focus);
+    background-color: var(--input-group-bg-focus);
     border-color: var(--field-border-focus);
   }
 }
 
 .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"]) & {
@@ -136,10 +139,6 @@
     padding-top: 0.5rem;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth);
@@ -162,10 +161,6 @@
     padding-top: 0.5rem;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth);
@@ -179,31 +174,11 @@
 
 .input-group--secondary {
   @apply shadow-none;
-  background-color: var(--input-group-bg);
 
   --input-group-bg: var(--default);
   --input-group-bg-hover: var(--default-hover);
   --input-group-bg-focus: var(--default);
 
-  @media (hover: hover) {
-    &:hover:not(:focus-within),
-    &[data-hovered="true"]:not([data-focus-within="true"]) {
-      background-color: var(--input-group-bg-hover);
-    }
-  }
-
-  &:has([data-slot="input-group-input"]:focus),
-  &:has([data-slot="input-group-textarea"]:focus) {
-    background-color: var(--input-group-bg-focus);
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    border-color: var(--color-field-border-invalid);
-    background-color: var(--input-group-bg-focus);
-  }
-
   [data-slot="input-group-input"],
   [data-slot="input-group-textarea"] {
     @apply bg-transparent;
@@ -214,3 +189,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-otp.css

@@ -15,16 +15,19 @@
 /* Individual slot box - fully rounded, standalone */
 .input-otp__slot {
   @apply relative flex h-10 w-9.5 min-w-0 flex-1 items-center justify-center;
-  @apply border bg-field text-field-foreground shadow-field;
+  @apply border text-field-foreground shadow-field;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --input-otp-slot-bg: var(--field-background, var(--default));
+  --input-otp-slot-bg-hover: var(--field-hover);
+  --input-otp-slot-bg-focus: var(--field-focus);
+
+  background-color: var(--input-otp-slot-bg);
   @apply rounded-field text-sm font-semibold outline-none;
 
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth),
@@ -35,19 +38,21 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-field-hover;
+      background-color: var(--input-otp-slot-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
 
   /* Active/Focus */
   &[data-active="true"] {
-    @apply z-10 bg-field-focus status-focused-field;
+    @apply z-10 status-focused-field;
+
+    background-color: var(--input-otp-slot-bg-focus);
   }
 
   /* Filled */
   &[data-filled="true"] {
-    @apply bg-field-focus;
+    background-color: var(--input-otp-slot-bg-focus);
   }
 
   /* Disabled */
@@ -58,7 +63,7 @@
   /* Invalid */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--input-otp-slot-bg-focus);
   }
 }
 
@@ -66,10 +71,6 @@
 .input-otp__slot-value {
   @apply text-lg leading-6 tracking-[-0.27px];
 
-  /**
-   * Animations
-   * CRITICAL: motion-reduce must be AFTER animation for correct override specificity
-   */
   animation: slot-value-in 250ms var(--ease-smooth) both;
   transform-origin: bottom center;
   @apply motion-reduce:animate-none;
@@ -92,23 +93,10 @@
 
 .input-otp--secondary .input-otp__slot {
   @apply shadow-none;
-  background-color: var(--input-otp-slot-bg);
 
   --input-otp-slot-bg: var(--default);
   --input-otp-slot-bg-hover: var(--default-hover);
   --input-otp-slot-bg-focus: var(--default);
-
-  @media (hover: hover) {
-    &:hover,
-    &[data-hovered="true"] {
-      background-color: var(--input-otp-slot-bg-hover);
-    }
-  }
-
-  &[data-active="true"],
-  &[data-filled="true"] {
-    background-color: var(--input-otp-slot-bg-focus);
-  }
 }
 
 /* Animations */