@signal9/era-ui 4.7.2 → 4.9.0

package/dist/ui/input/variants.d.ts

@@ -24,7 +24,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
+        false: "bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
         true: "bg-transparent shadow-none";
     };
     /**
@@ -42,21 +42,44 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
         true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
         false: "";
     };
-    /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+    /**
+     * The field's TIER — height, radius and side padding travel together,
+     * because they are one decision. Split them and a field ends up md-tall
+     * with xxs corners, which is how the ladder stops being a ladder.
+     *
+     * - `md` (default) — THE field, and the pairing an md bar's md content
+     *   expects. Its --era-field-px is glyph-advance derived: the padding a
+     *   STRING of text wants, not a single centred glyph.
+     * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+     *   SMALLEST tier that can hold body text at all: its inset is
+     *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
+     *   below (h-xs) IS the text size and has none left. For compact chrome —
+     *   a filter that sits level with an xxs icon button, a title bar that
+     *   shouldn't outweigh the document under it. Side padding is
+     *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+     *   on this tier read as one family.
+     */
+    size: {
+        md: "h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)";
+        xxs: "h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)";
+    };
+    /**
+     * Height OVERRIDES, for the fields that are not their tier's height. No
+     * default: the tier sets the height, and these take it back.
+     */
     height: {
-        md: "h-(--era-h-md)";
         full: "h-full";
-        auto: "min-h-(--era-h-md)";
+        auto: "h-auto min-h-(--era-h-md)";
     };
     /**
-     * Side padding. `trailing` is for a field that holds a control at its end
-     * (the date picker's calendar trigger): the leading edge keeps the shared
-     * text inset so the text still lines up with every other field, and the
-     * trailing edge becomes the concentric inset for that sm-tier control, so
-     * its gap to the field edge equals its gap above and below.
+     * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
+     * control at its end (the date picker's calendar trigger): the leading edge
+     * keeps the shared text inset so the text still lines up with every other
+     * field, and the trailing edge becomes the concentric inset for that
+     * sm-tier control, so its gap to the field edge equals its gap above and
+     * below.
      */
     pad: {
-        even: "px-(--era-field-px)";
         trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
         none: "px-0";
     };
@@ -69,7 +92,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
+        false: "bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
         true: "bg-transparent shadow-none";
     };
     /**
@@ -87,21 +110,44 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
         true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
         false: "";
     };
-    /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+    /**
+     * The field's TIER — height, radius and side padding travel together,
+     * because they are one decision. Split them and a field ends up md-tall
+     * with xxs corners, which is how the ladder stops being a ladder.
+     *
+     * - `md` (default) — THE field, and the pairing an md bar's md content
+     *   expects. Its --era-field-px is glyph-advance derived: the padding a
+     *   STRING of text wants, not a single centred glyph.
+     * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+     *   SMALLEST tier that can hold body text at all: its inset is
+     *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
+     *   below (h-xs) IS the text size and has none left. For compact chrome —
+     *   a filter that sits level with an xxs icon button, a title bar that
+     *   shouldn't outweigh the document under it. Side padding is
+     *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+     *   on this tier read as one family.
+     */
+    size: {
+        md: "h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)";
+        xxs: "h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)";
+    };
+    /**
+     * Height OVERRIDES, for the fields that are not their tier's height. No
+     * default: the tier sets the height, and these take it back.
+     */
     height: {
-        md: "h-(--era-h-md)";
         full: "h-full";
-        auto: "min-h-(--era-h-md)";
+        auto: "h-auto min-h-(--era-h-md)";
     };
     /**
-     * Side padding. `trailing` is for a field that holds a control at its end
-     * (the date picker's calendar trigger): the leading edge keeps the shared
-     * text inset so the text still lines up with every other field, and the
-     * trailing edge becomes the concentric inset for that sm-tier control, so
-     * its gap to the field edge equals its gap above and below.
+     * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
+     * control at its end (the date picker's calendar trigger): the leading edge
+     * keeps the shared text inset so the text still lines up with every other
+     * field, and the trailing edge becomes the concentric inset for that
+     * sm-tier control, so its gap to the field edge equals its gap above and
+     * below.
      */
     pad: {
-        even: "px-(--era-field-px)";
         trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
         none: "px-0";
     };
@@ -114,7 +160,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
+        false: "bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
         true: "bg-transparent shadow-none";
     };
     /**
@@ -132,21 +178,44 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
         true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
         false: "";
     };
-    /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+    /**
+     * The field's TIER — height, radius and side padding travel together,
+     * because they are one decision. Split them and a field ends up md-tall
+     * with xxs corners, which is how the ladder stops being a ladder.
+     *
+     * - `md` (default) — THE field, and the pairing an md bar's md content
+     *   expects. Its --era-field-px is glyph-advance derived: the padding a
+     *   STRING of text wants, not a single centred glyph.
+     * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+     *   SMALLEST tier that can hold body text at all: its inset is
+     *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
+     *   below (h-xs) IS the text size and has none left. For compact chrome —
+     *   a filter that sits level with an xxs icon button, a title bar that
+     *   shouldn't outweigh the document under it. Side padding is
+     *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+     *   on this tier read as one family.
+     */
+    size: {
+        md: "h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)";
+        xxs: "h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)";
+    };
+    /**
+     * Height OVERRIDES, for the fields that are not their tier's height. No
+     * default: the tier sets the height, and these take it back.
+     */
     height: {
-        md: "h-(--era-h-md)";
         full: "h-full";
-        auto: "min-h-(--era-h-md)";
+        auto: "h-auto min-h-(--era-h-md)";
     };
     /**
-     * Side padding. `trailing` is for a field that holds a control at its end
-     * (the date picker's calendar trigger): the leading edge keeps the shared
-     * text inset so the text still lines up with every other field, and the
-     * trailing edge becomes the concentric inset for that sm-tier control, so
-     * its gap to the field edge equals its gap above and below.
+     * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
+     * control at its end (the date picker's calendar trigger): the leading edge
+     * keeps the shared text inset so the text still lines up with every other
+     * field, and the trailing edge becomes the concentric inset for that
+     * sm-tier control, so its gap to the field edge equals its gap above and
+     * below.
      */
     pad: {
-        even: "px-(--era-field-px)";
         trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
         none: "px-0";
     };

package/dist/ui/input/variants.js

@@ -27,7 +27,7 @@ export const inputVariants = tv({
          * edge to edge so the two have no gap between them.
          */
         bare: {
-            false: 'rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)',
+            false: 'bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)',
             true: 'bg-transparent shadow-none'
         },
         /**
@@ -45,34 +45,60 @@ export const inputVariants = tv({
             true: 'bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)',
             false: ''
         },
-        /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+        /**
+         * The field's TIER — height, radius and side padding travel together,
+         * because they are one decision. Split them and a field ends up md-tall
+         * with xxs corners, which is how the ladder stops being a ladder.
+         *
+         * - `md` (default) — THE field, and the pairing an md bar's md content
+         *   expects. Its --era-field-px is glyph-advance derived: the padding a
+         *   STRING of text wants, not a single centred glyph.
+         * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+         *   SMALLEST tier that can hold body text at all: its inset is
+         *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
+         *   below (h-xs) IS the text size and has none left. For compact chrome —
+         *   a filter that sits level with an xxs icon button, a title bar that
+         *   shouldn't outweigh the document under it. Side padding is
+         *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+         *   on this tier read as one family.
+         */
+        size: {
+            md: 'h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)',
+            xxs: 'h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)'
+        },
+        /**
+         * Height OVERRIDES, for the fields that are not their tier's height. No
+         * default: the tier sets the height, and these take it back.
+         */
         height: {
-            md: 'h-(--era-h-md)',
-            // h-full, NOT the md tier: a bare input's container IS the field, so it
-            // takes that container's height. Keeping h-md here made a bare input
-            // inside an h-md Bar overflow it by the bar's border — a −0.5px gap,
-            // which is the even-gap law failing by a hair rather than obviously.
+            // h-full, NOT a tier height: a bare input's container IS the field, so it
+            // takes that container's height. Keeping a tier height here made a bare
+            // input inside an h-md Bar overflow it by the bar's border — a −0.5px
+            // gap, which is the even-gap law failing by a hair rather than obviously.
             full: 'h-full',
-            auto: 'min-h-(--era-h-md)'
+            // h-auto is load-bearing — it is what outranks the tier's own height so
+            // the field can grow with its content (Textarea).
+            auto: 'h-auto min-h-(--era-h-md)'
         },
         /**
-         * Side padding. `trailing` is for a field that holds a control at its end
-         * (the date picker's calendar trigger): the leading edge keeps the shared
-         * text inset so the text still lines up with every other field, and the
-         * trailing edge becomes the concentric inset for that sm-tier control, so
-         * its gap to the field edge equals its gap above and below.
+         * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
+         * control at its end (the date picker's calendar trigger): the leading edge
+         * keeps the shared text inset so the text still lines up with every other
+         * field, and the trailing edge becomes the concentric inset for that
+         * sm-tier control, so its gap to the field edge equals its gap above and
+         * below.
          */
         pad: {
-            even: 'px-(--era-field-px)',
             trailing: 'ps-(--era-field-px) pe-(--era-sm-inset-md)',
             none: 'px-0'
         }
     },
     compoundVariants: [
-        // Chrome and padding travel together: a field with no chrome has no box to
-        // pad. Spelling this as a compound rather than leaving it to the caller is
-        // what stops `bare` from becoming a second, differently-padded field.
-        { bare: true, class: 'h-full px-0' }
+        // Chrome, padding and corners travel together: a field with no chrome has
+        // no box to pad and no corners to round. Spelling this as a compound rather
+        // than leaving it to the caller is what stops `bare` from becoming a
+        // second, differently-padded field.
+        { bare: true, class: 'h-full rounded-none px-0' }
     ],
-    defaultVariants: { bare: false, reveal: false, height: 'md', pad: 'even' }
+    defaultVariants: { bare: false, reveal: false, size: 'md' }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "4.7.2",
+	"version": "4.9.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",