zaravand-ui 1.11.0 → 3.0.0

package/dist/components/shared/responsiveScale.d.ts

@@ -1,46 +1,33 @@
 /**
- * One shared fluid-sizing contract for the whole library: every dimension listed
- * below scales linearly with the viewport between 320px and 768px, shrinking down
- * to exactly 80% of its desktop value at 320px and staying at 100% from 768px up.
- * Ship this in the compiled CSS so any app importing zaravand-ui gets the same
- * shrink/grow behavior automatically, with no per-app configuration.
+ * Fixed desktop-sized tokens for the whole library. Responsiveness across
+ * viewport widths is owned by the consuming app's root `html { font-size }`
+ * scaling, so every rem value here is the static desktop/design value with
+ * no clamp()/vw-based fluid sizing left in the library itself.
  *
- * clamp(MIN, MIN + DIFFrem*((100vw-320px)/448px), MAX) — 448 = 768-320.
- * Both the range (448px) and the multiplier (DIFFrem = MAX-MIN) must carry
- * explicit units: `(100vw-320px)/448px` is a length divided by a length, which
- * CSS calc() resolves to a plain unitless ratio (0 at 320px, 1 at 768px) — only
- * then is it safe to multiply by `DIFFrem` and get a length back out. Writing
- * the multiplier or divisor as a bare number (e.g. `0.648` instead of
- * `0.648rem`, or `/448` instead of `/448px`) silently breaks this: the ratio
- * stays a *length* instead of becoming unitless, so multiplying it by another
- * bare number produces a value on the order of a single pixel instead of a
- * fraction of a rem — the token ends up pinned within a fraction of a pixel of
- * MIN across the entire viewport range and never visibly reaches MAX.
+ * Every value is written against a 1rem = 10px root (the consuming app's
+ * root font-size base), i.e. 1.6x the old 1rem = 16px numbers, so the
+ * rendered pixel size matches the original design once the consumer's
+ * root font-size scaling is applied.
  */
-declare const CONTROL_HEIGHT_SM = "zui:h-[clamp(2.304rem,calc(2.304rem_+_0.576rem*((100vw_-_320px)/448px)),2.88rem)]";
-declare const CONTROL_HEIGHT_DEFAULT = "zui:h-[clamp(2.592rem,calc(2.592rem_+_0.648rem*((100vw_-_320px)/448px)),3.24rem)]";
-declare const CONTROL_HEIGHT_LG = "zui:h-[clamp(2.88rem,calc(2.88rem_+_0.72rem*((100vw_-_320px)/448px)),3.6rem)]";
+declare const CONTROL_HEIGHT_SM = "zui:h-[4.608rem]";
+declare const CONTROL_HEIGHT_DEFAULT = "zui:h-[5.184rem]";
+declare const CONTROL_HEIGHT_LG = "zui:h-[5.76rem]";
 declare const controlHeightBySize: {
-    readonly sm: "zui:h-[clamp(2.304rem,calc(2.304rem_+_0.576rem*((100vw_-_320px)/448px)),2.88rem)]";
-    readonly default: "zui:h-[clamp(2.592rem,calc(2.592rem_+_0.648rem*((100vw_-_320px)/448px)),3.24rem)]";
-    readonly lg: "zui:h-[clamp(2.88rem,calc(2.88rem_+_0.72rem*((100vw_-_320px)/448px)),3.6rem)]";
+    readonly sm: "zui:h-[4.608rem]";
+    readonly default: "zui:h-[5.184rem]";
+    readonly lg: "zui:h-[5.76rem]";
 };
-declare const CONTROL_PADDING_X = "zui:px-[clamp(0.6rem,calc(0.6rem_+_0.15rem*((100vw_-_320px)/448px)),0.75rem)]";
-declare const CONTROL_PADDING_Y = "zui:py-[clamp(0.6rem,calc(0.6rem_+_0.15rem*((100vw_-_320px)/448px)),0.75rem)]";
-declare const BUTTON_PADDING_X = "zui:px-[clamp(0.8rem,calc(0.8rem_+_0.2rem*((100vw_-_320px)/448px)),1rem)]";
-declare const TEXTAREA_MIN_HEIGHT = "zui:min-h-[clamp(3.84rem,calc(3.84rem_+_0.96rem*((100vw_-_320px)/448px)),4.8rem)]";
-declare const TABLE_HEADER_HEIGHT = "zui:h-[clamp(2.8rem,calc(2.8rem_+_0.7rem*((100vw_-_320px)/448px)),3.5rem)]";
-/**
- * Table body/header text size — same 320px->768px fluid contract as every
- * other token here, shrinking to 80% (0.7rem) at 320px and reaching the
- * static `text-sm` value (0.875rem) at 768px and up.
- */
-declare const TABLE_TEXT_SIZE = "zui:text-[clamp(0.7rem,calc(0.7rem_+_0.175rem*((100vw_-_320px)/448px)),0.875rem)]";
-declare const DATEPICKER_DAY_SIZE = "zui:size-[clamp(1.6rem,calc(1.6rem_+_0.4rem*((100vw_-_320px)/448px)),2rem)]";
-declare const DATEPICKER_NAV_SIZE = "zui:size-[clamp(1.4rem,calc(1.4rem_+_0.35rem*((100vw_-_320px)/448px)),1.75rem)]";
-declare const DATEPICKER_CONTROL_HEIGHT = "zui:h-[clamp(1.6rem,calc(1.6rem_+_0.4rem*((100vw_-_320px)/448px)),2rem)]";
-declare const OVERLAY_PANEL_PADDING = "zui:p-[clamp(1.2rem,calc(1.2rem_+_0.3rem*((100vw_-_320px)/448px)),1.5rem)]";
-declare const TOAST_PADDING = "zui:p-[clamp(0.8rem,calc(0.8rem_+_0.2rem*((100vw_-_320px)/448px)),1rem)]";
-declare const DATEPICKER_MANUAL_SEGMENT_WIDTH = "zui:w-[clamp(5.2rem,calc(5.2rem_+_1.3rem*((100vw_-_320px)/448px)),6.5rem)]";
-declare const SQUARE_ICON_BUTTON_SIZE_IMPORTANT = "zui:[&>button]:!h-[clamp(2.304rem,calc(2.304rem_+_0.576rem*((100vw_-_320px)/448px)),2.88rem)] zui:[&>button]:!w-[clamp(2.304rem,calc(2.304rem_+_0.576rem*((100vw_-_320px)/448px)),2.88rem)]";
+declare const CONTROL_PADDING_X = "zui:px-[1.2rem]";
+declare const CONTROL_PADDING_Y = "zui:py-[1.2rem]";
+declare const BUTTON_PADDING_X = "zui:px-[1.6rem]";
+declare const TEXTAREA_MIN_HEIGHT = "zui:min-h-[7.68rem]";
+declare const TABLE_HEADER_HEIGHT = "zui:h-[5.6rem]";
+declare const TABLE_TEXT_SIZE = "zui:text-[1.4rem]";
+declare const DATEPICKER_DAY_SIZE = "zui:size-[3.2rem]";
+declare const DATEPICKER_NAV_SIZE = "zui:size-[2.8rem]";
+declare const DATEPICKER_CONTROL_HEIGHT = "zui:h-[3.2rem]";
+declare const OVERLAY_PANEL_PADDING = "zui:p-[2.4rem]";
+declare const TOAST_PADDING = "zui:p-[1.6rem]";
+declare const DATEPICKER_MANUAL_SEGMENT_WIDTH = "zui:w-[10.4rem]";
+declare const SQUARE_ICON_BUTTON_SIZE_IMPORTANT = "zui:[&>button]:!h-[4.608rem] zui:[&>button]:!w-[4.608rem]";
 export { controlHeightBySize, CONTROL_HEIGHT_SM, CONTROL_HEIGHT_DEFAULT, CONTROL_HEIGHT_LG, CONTROL_PADDING_X, CONTROL_PADDING_Y, BUTTON_PADDING_X, TEXTAREA_MIN_HEIGHT, TABLE_HEADER_HEIGHT, TABLE_TEXT_SIZE, DATEPICKER_DAY_SIZE, DATEPICKER_NAV_SIZE, DATEPICKER_CONTROL_HEIGHT, OVERLAY_PANEL_PADDING, TOAST_PADDING, DATEPICKER_MANUAL_SEGMENT_WIDTH, SQUARE_ICON_BUTTON_SIZE_IMPORTANT, };