pixelize-design-library 2.4.2-beta.55 → 2.4.2-beta.56

package/CHANGELOG.md

@@ -89,6 +89,10 @@ next major.
   `Common/sizeScaleOwnership.test.ts` so they can't silently merge again. `OPTION_ROW_SIZES`
   (dropdown/select/menu row heights) is reverted to xs 24 · sm 30 · md 34 · lg 40; `OrgSwitcher`/
   `AppSwitcher` are back on their own hardcoded literal sizes, not a shared token.
+- **`CONTROL_SIZES.xs` (fields only) raised 24px → 32px.** `TextInput`, `Select`, `MultiSelect`,
+  `SearchSelect`, `SelectSearch`, `SelectV2`, `NumberInput`, `PinInput`, `Search` and the
+  `DatePicker` family at `size="xs"` are now 32px tall. `BUTTON_SIZES.xs` (`Button`,
+  `SegmentedControl`, `Tabs`, `TableToggle`, `Dropdown`'s trigger) is untouched, still 24px.
 - **`SideBar`'s nav scrollbar thumb was the brand `primary` color.** Every other scrollbar in the
   library reads a neutral chrome token; the sidebar's hand-rolled CSS (`Constants/Sidebar.ts`) was
   the one place still reaching for `primary[500]`/`primary[700]`. It now reads

package/COMPONENT-GOTCHAS.md

@@ -312,7 +312,7 @@ not enough when the overlay sits inside a transition wrapper — the wrapper kee
 
 | Component | beta.43 → beta.44 | Restore the old look |
 | --- | --- | --- |
-| Fields, selects, buttons (`Button`, `TextInput`, `InputTextArea`, `NumberInput`, DatePicker family, `Select`, `SelectV2`, `SearchSelect`, `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl`) | Default size `md` → `sm` (38px). One scale for all: xs 24 / sm 38 / md 40 / lg 48 — the same height in every field, select and button. `TimePicker` has no `size` (fixed `sm`); `SegmentedControl` has no `xs`. **Since decoupled** — fields/selects now read `CONTROL_SIZES` (unchanged: xs 24 / sm 38 / md 40 / lg 48), `Button`/`SegmentedControl`/`Tabs`/`TableToggle`/`Dropdown`'s trigger read the separate `BUTTON_SIZES` (xs 24 / sm 32 / md 40 / lg 48, back to pre-regression) — see the gotcha below | `size="md"` |
+| Fields, selects, buttons (`Button`, `TextInput`, `InputTextArea`, `NumberInput`, DatePicker family, `Select`, `SelectV2`, `SearchSelect`, `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl`) | Default size `md` → `sm` (38px). One scale for all: xs 24 / sm 38 / md 40 / lg 48 — the same height in every field, select and button. `TimePicker` has no `size` (fixed `sm`); `SegmentedControl` has no `xs`. **Since decoupled** — fields/selects now read `CONTROL_SIZES` (xs 24 / sm 38 / md 40 / lg 48 at the time of the split; xs later raised to 32px), `Button`/`SegmentedControl`/`Tabs`/`TableToggle`/`Dropdown`'s trigger read the separate `BUTTON_SIZES` (xs 24 / sm 32 / md 40 / lg 48, back to pre-regression) — see the gotcha below | `size="md"` |
 | `Button` | Text one step smaller (sm 14→13px, md 16→14, lg 18→16). Busy = spinner only, width kept (was "Loading" + spinner). Outline: 1px border, hover is a tint, not a fill | `loadingText="Loading"` |
 | `Tag` | `solid`/`md` → `subtle`/`sm`. Hover + pointer only with `onTagClick`; `maxW` truncates with the full text as a title. Exact heights 20/24/28/32, weight 500, 1px inset ring (never adds height); subtle is a light tint with ink ≥ 6.5:1 | `variant="solid" size="md"` |
 | `resolveSoftTone` | `bg`/`border` are now translucent (alpha hex) — composite onto the surface before `contrastRatio`; optional 3rd `surface` arg; adds `hoverBg`/`activeBg`. Badge/Alert/Toaster/EmptyState follow | — |
@@ -391,7 +391,7 @@ library's own themed component rather than the Chakra passthrough.
 ### `CONTROL_SIZES` (fields) and `BUTTON_SIZES` (buttons) are separate scales — changing one never changes the other
 
 Fields/selects (`TextInput`, `Select`, `MultiSelect`, `SearchSelect`, `NumberInput`, `PinInput`, the
-`DatePicker` family, …) read `CONTROL_SIZES` — xs 24 · sm 38 · md 40 · lg 48. `Button` and every
+`DatePicker` family, …) read `CONTROL_SIZES` — xs 32 · sm 38 · md 40 · lg 48. `Button` and every
 button-like trigger (`SegmentedControl`, `Tabs`, `TableToggle`, `Dropdown`'s trigger) read the
 separate `BUTTON_SIZES` — xs 24 · sm 32 · md 40 · lg 48. They used to share one token, which is what
 let a field-only size bump leak into buttons — the split is now gate-tested

package/DESIGN-GUIDE.md

@@ -90,7 +90,7 @@ don't lean on that pair to distinguish two categories; reach for a utility schem
 ## 5. Controls — two scales, `sm` by default
 
 Fields (`TextInput`, `InputTextArea`, `NumberInput`, `Select`, `Search`, `RangeSlider`, the
-`DatePicker` family) sit on `CONTROL_SIZES` — `xs` 24px · `sm` 38px · `md` 40px · `lg` 48px.
+`DatePicker` family) sit on `CONTROL_SIZES` — `xs` 32px · `sm` 38px · `md` 40px · `lg` 48px.
 `Button` and every button-like trigger (`SegmentedControl`, `Tabs`, `TableToggle`, `Dropdown`)
 sit on the separate `BUTTON_SIZES` scale — `xs` 24px · `sm` 32px · `md` 40px · `lg` 48px. Both
 **default to `sm`**, so on a desktop page **don't pass `size`**. They line up at `md`/`lg`; at

package/dist/Components/DatePicker/DatePickerProps.d.ts

@@ -44,7 +44,7 @@ export type BaseDatePickerProps = {
     width?: string | number;
     /** Blocks today in the calendar and in typed input; the single picker preselects tomorrow instead. */
     disableToday?: boolean;
-    /** Control-scale height: xs 24 · sm 38 · md 40 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
+    /** Control-scale height: xs 32 · sm 38 · md 40 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
     size?: "xs" | "sm" | "md" | "lg";
 };
 /** Single-date variant, Date API (default) — `isRange` must be false or omitted; this is the discriminant the DatePickerProps union switches on. */

package/dist/Components/Input/PhoneNumberInputProps.d.ts

@@ -10,7 +10,7 @@ export type PhoneNumberInputProps = {
     label?: string;
     /** Falls back to an auto-generated id (shared with `inputId` when that's omitted too), so the label is always bound. */
     id?: string;
-    /** Control-scale height: xs 24 · sm 38 · md 40 · lg 48px. Defaults to "sm", like TextInput, so it lines up in a form. */
+    /** Control-scale height: xs 32 · sm 38 · md 40 · lg 48px. Defaults to "sm", like TextInput, so it lines up in a form. */
     size?: string;
     value?: string;
     codeValueReturn?: boolean;

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -18,7 +18,7 @@ export type MultiSelectProps = {
     addOnBlur?: boolean;
     /** Marks the field invalid (`aria-invalid` + error border) and swaps `helperText` for `errorMessage`; a rejected email sets this internally too. */
     error?: boolean;
-    /** Height on the field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: "xs" | "sm" | "md" | "lg";
     inputStyle?: object;
     /** Rendered only while `error` is true; a rejected email's internal "Invalid email address" text wins over this until the input changes. */

package/dist/Components/PinInput/PinInputProps.d.ts

@@ -2,7 +2,7 @@ import { PinInputProps } from "@chakra-ui/react";
 /** The only pin/OTP component exported from the package. */
 export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultValue" | "placeholder" | "manageFocus" | "errorBorderColor" | "focusBorderColor" | "onChange" | "onComplete"> & {
     type?: "alphanumeric" | "number";
-    /** Square cell size, aligned to CONTROL_SIZES heights (xs 24 · sm 38 · md 40 · lg 48). Defaults to "sm". */
+    /** Square cell size, aligned to CONTROL_SIZES heights (xs 32 · sm 38 · md 40 · lg 48). Defaults to "sm". */
     size?: "xs" | "sm" | "md" | "lg";
     variant?: "flushed" | "outline" | "filled" | "unstyled";
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary";

package/dist/Components/Search/SearchProps.d.ts

@@ -15,7 +15,7 @@ export type SearchProps = {
     onClear?: () => void;
     /** @deprecated Use `onClear` — same behaviour, consistent casing. */
     onclose?: () => void;
-    /** Height on the field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     name?: string;
     /** Disables the input and hides the clear button; the hotkey still focuses it. */

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -38,7 +38,7 @@ export type SearchSelectProps = {
     width?: string | number;
     /** Only sets the insideSelect segment's height, not the main field's — that's driven by `size`. */
     height?: string | number;
-    /** Height on the field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: "xs" | "sm" | "md" | "lg";
     /** Blocks opening, typing, chip removal and clearing; renders the shared disabled field look. */
     isDisabled?: boolean;

package/dist/Components/Select/SelectProps.d.ts

@@ -24,7 +24,7 @@ type SelectCommonProps = {
     label?: string;
     /** Native: the built-in placeholder `<option>`. Popup: trigger text when nothing is selected. Defaults to "Select Option". */
     placeholder?: string;
-    /** Height on the field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     /** Applied to the wrapping FormControl. */
     width?: string | number;

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -49,7 +49,7 @@ export type SelectSearchProps = {
     errorMessage?: string | undefined;
     /** Hint under the field; replaced by `errorMessage` while `error` is true. */
     helperText?: string;
-    /** Height on the field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     /** Shows a sticky "Add New"-style footer row in the popup; required for all Bottom* props. */
     isBottomIcon?: boolean | undefined;

package/dist/Components/SelectV2/SelectV2Props.d.ts

@@ -33,7 +33,7 @@ type SelectV2CommonProps = {
     isReadOnly?: boolean;
     /** Label asterisk + `aria-required` only; never blocks an empty submit. */
     isRequired?: boolean;
-    /** Field control scale (xs 24 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
+    /** Field control scale (xs 32 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: ControlSize;
     /** Shows a type-ahead filter input at the top of the popup. Defaults to true. */
     isSearchable?: boolean;

package/dist/Theme/tokens/primitives/controlSizes.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.BUTTON_SIZES = exports.CONTROL_SIZES = void 0;
 /** Height scale for form fields and selects — text inputs, pickers, anything typed or picked into. */
 exports.CONTROL_SIZES = {
-    xs: { height: "1.5rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    xs: { height: "2rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
     sm: { height: "2.375rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
     md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
     lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },

package/dist/esm/Theme/tokens/primitives/controlSizes.js

@@ -1,6 +1,6 @@
 /** Height scale for form fields and selects — text inputs, pickers, anything typed or picked into. */
 export const CONTROL_SIZES = {
-    xs: { height: "1.5rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    xs: { height: "2rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
     sm: { height: "2.375rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
     md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
     lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.55",
+  "version": "2.4.2-beta.56",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",