zaravand-ui 4.2.3 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +45 -45
  2. package/dist/components/shared/responsiveScale.d.ts +31 -27
  3. package/dist/index.cjs +13 -13
  4. package/dist/index.css +1 -1
  5. package/dist/index.d.ts +2 -0
  6. package/dist/index.js +4292 -4285
  7. package/dist/shared/scale.d.ts +23 -0
  8. package/package.json +1 -1
  9. package/dist/components/Select/Select.filter.d.ts +0 -8
package/README.md CHANGED
@@ -1,45 +1,45 @@
1
- # zaravand-ui
2
-
3
- Reusable React UI library with centralized theme tokens.
4
-
5
- ## Install
6
-
7
- ```bash
8
- npm i zaravand-ui
9
- ```
10
-
11
- ## Usage
12
-
13
- ```tsx
14
- import "zaravand-ui/styles.css"
15
- import { Button, applyTheme } from "zaravand-ui"
16
-
17
- applyTheme({
18
- primary: "#2563EB",
19
- secondary: "#0891B2",
20
- text: "#F8FAFC",
21
- success: "#16A34A",
22
- warning: "#EAB308",
23
- danger: "#DC2626",
24
- border: "#334155",
25
- surface: "#0F172A",
26
- mutedSurface: "#1E293B",
27
- tooltipSurface: "#0B1120",
28
- })
29
-
30
- export function Example() {
31
- return <Button label="Save" />
32
- }
33
- ```
34
-
35
- ## Scripts
36
-
37
- - `npm run build`
38
- - `npm run docs:dev`
39
- - `npm run docs:build`
40
- - `npm run docs:preview`
41
-
42
- ## Documentation
43
-
44
- - Developer docs (VitePress): `docs/`
45
- - Full integration guide: `ZARAVAND_UI_INTEGRATION_GUIDE.md`
1
+ # zaravand-ui
2
+
3
+ Reusable React UI library with centralized theme tokens.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm i zaravand-ui
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```tsx
14
+ import "zaravand-ui/styles.css"
15
+ import { Button, applyTheme } from "zaravand-ui"
16
+
17
+ applyTheme({
18
+ primary: "#2563EB",
19
+ secondary: "#0891B2",
20
+ text: "#F8FAFC",
21
+ success: "#16A34A",
22
+ warning: "#EAB308",
23
+ danger: "#DC2626",
24
+ border: "#334155",
25
+ surface: "#0F172A",
26
+ mutedSurface: "#1E293B",
27
+ tooltipSurface: "#0B1120",
28
+ })
29
+
30
+ export function Example() {
31
+ return <Button label="Save" />
32
+ }
33
+ ```
34
+
35
+ ## Scripts
36
+
37
+ - `npm run build`
38
+ - `npm run docs:dev`
39
+ - `npm run docs:build`
40
+ - `npm run docs:preview`
41
+
42
+ ## Documentation
43
+
44
+ - Developer docs (VitePress): `docs/`
45
+ - Full integration guide: `ZARAVAND_UI_INTEGRATION_GUIDE.md`
package/dist/components/shared/responsiveScale.d.ts CHANGED
@@ -1,33 +1,37 @@
1
1
  /**
2
- * Fixed desktop-sized tokens for the whole library. Responsiveness across
3
- * viewport widths is owned by the consuming app's root `html { font-size }`
4
- * scaling, so every rem value here is the static desktop/design value with
5
- * no clamp()/vw-based fluid sizing left in the library itself.
2
+ * Fixed desktop-sized tokens for the whole library, expressed as `px`
3
+ * multiplied by the `--zui-scale` CSS custom property (see src/index.css)
4
+ * instead of `rem`. `--zui-scale` defaults to 1 — the desktop/Full-HD
5
+ * design size, identical to this library's previous fixed-rem behavior —
6
+ * when a consuming app doesn't set it, and is intentionally independent
7
+ * of the host app's own root `font-size`/`rem` scaling, which this
8
+ * library no longer reads (`rem` always resolves against the document's
9
+ * <html> element, so it can't be scoped to just this library's
10
+ * components).
6
11
  *
7
- * Every value is written against a 1rem = 10px root (the consuming app's
8
- * root font-size base), i.e. 1.6x the old 1rem = 16px numbers, so the
9
- * rendered pixel size matches the original design once the consumer's
10
- * root font-size scaling is applied.
12
+ * Every value below is the same desktop pixel size this token held before
13
+ * (its old `rem` value × 10, since those were authored against a
14
+ * 1rem = 10px baseline), just re-expressed against `--zui-scale` instead.
11
15
  */
12
- declare const CONTROL_HEIGHT_SM = "zui:h-[4.608rem]";
13
- declare const CONTROL_HEIGHT_DEFAULT = "zui:h-[5.184rem]";
14
- declare const CONTROL_HEIGHT_LG = "zui:h-[5.76rem]";
16
+ declare const CONTROL_HEIGHT_SM = "zui:h-[calc(var(--zui-scale,1)*46.08px)]";
17
+ declare const CONTROL_HEIGHT_DEFAULT = "zui:h-[calc(var(--zui-scale,1)*51.84px)]";
18
+ declare const CONTROL_HEIGHT_LG = "zui:h-[calc(var(--zui-scale,1)*57.6px)]";
15
19
  declare const controlHeightBySize: {
16
- readonly sm: "zui:h-[4.608rem]";
17
- readonly default: "zui:h-[5.184rem]";
18
- readonly lg: "zui:h-[5.76rem]";
20
+ readonly sm: "zui:h-[calc(var(--zui-scale,1)*46.08px)]";
21
+ readonly default: "zui:h-[calc(var(--zui-scale,1)*51.84px)]";
22
+ readonly lg: "zui:h-[calc(var(--zui-scale,1)*57.6px)]";
19
23
  };
20
- declare const CONTROL_PADDING_X = "zui:px-[1.2rem]";
21
- declare const CONTROL_PADDING_Y = "zui:py-[1.2rem]";
22
- declare const BUTTON_PADDING_X = "zui:px-[1.6rem]";
23
- declare const TEXTAREA_MIN_HEIGHT = "zui:min-h-[7.68rem]";
24
- declare const TABLE_HEADER_HEIGHT = "zui:h-[5.6rem]";
25
- declare const TABLE_TEXT_SIZE = "zui:text-[1.4rem]";
26
- declare const DATEPICKER_DAY_SIZE = "zui:size-[3.2rem]";
27
- declare const DATEPICKER_NAV_SIZE = "zui:size-[2.8rem]";
28
- declare const DATEPICKER_CONTROL_HEIGHT = "zui:h-[3.2rem]";
29
- declare const OVERLAY_PANEL_PADDING = "zui:p-[2.4rem]";
30
- declare const TOAST_PADDING = "zui:p-[1.6rem]";
31
- declare const DATEPICKER_MANUAL_SEGMENT_WIDTH = "zui:w-[10.4rem]";
32
- declare const SQUARE_ICON_BUTTON_SIZE_IMPORTANT = "zui:[&>button]:!h-[4.608rem] zui:[&>button]:!w-[4.608rem]";
24
+ declare const CONTROL_PADDING_X = "zui:px-[calc(var(--zui-scale,1)*12px)]";
25
+ declare const CONTROL_PADDING_Y = "zui:py-[calc(var(--zui-scale,1)*12px)]";
26
+ declare const BUTTON_PADDING_X = "zui:px-[calc(var(--zui-scale,1)*16px)]";
27
+ declare const TEXTAREA_MIN_HEIGHT = "zui:min-h-[calc(var(--zui-scale,1)*76.8px)]";
28
+ declare const TABLE_HEADER_HEIGHT = "zui:h-[calc(var(--zui-scale,1)*56px)]";
29
+ declare const TABLE_TEXT_SIZE = "zui:text-[calc(var(--zui-scale,1)*14px)]";
30
+ declare const DATEPICKER_DAY_SIZE = "zui:size-[calc(var(--zui-scale,1)*32px)]";
31
+ declare const DATEPICKER_NAV_SIZE = "zui:size-[calc(var(--zui-scale,1)*28px)]";
32
+ declare const DATEPICKER_CONTROL_HEIGHT = "zui:h-[calc(var(--zui-scale,1)*32px)]";
33
+ declare const OVERLAY_PANEL_PADDING = "zui:p-[calc(var(--zui-scale,1)*24px)]";
34
+ declare const TOAST_PADDING = "zui:p-[calc(var(--zui-scale,1)*16px)]";
35
+ declare const DATEPICKER_MANUAL_SEGMENT_WIDTH = "zui:w-[calc(var(--zui-scale,1)*104px)]";
36
+ declare const SQUARE_ICON_BUTTON_SIZE_IMPORTANT = "zui:[&>button]:!h-[calc(var(--zui-scale,1)*46.08px)] zui:[&>button]:!w-[calc(var(--zui-scale,1)*46.08px)]";
33
37
  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, };