@newtonedev/components 0.1.6 → 0.1.8
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.
- package/dist/composites/actions/Button/Button.d.ts.map +1 -1
- package/dist/composites/form-controls/Select/Select.styles.d.ts.map +1 -1
- package/dist/composites/form-controls/TextInput/TextInput.styles.d.ts.map +1 -1
- package/dist/composites/form-controls/Toggle/Toggle.styles.d.ts.map +1 -1
- package/dist/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.styles.d.ts.map +1 -1
- package/dist/composites/range-inputs/HueSlider/HueSlider.styles.d.ts.map +1 -1
- package/dist/composites/range-inputs/Slider/Slider.styles.d.ts.map +1 -1
- package/dist/fonts/GoogleFontLoader.d.ts +5 -4
- package/dist/fonts/GoogleFontLoader.d.ts.map +1 -1
- package/dist/fonts/SelfHostedFontLoader.d.ts +14 -0
- package/dist/fonts/SelfHostedFontLoader.d.ts.map +1 -0
- package/dist/fonts/buildGoogleFontsUrl.d.ts +1 -16
- package/dist/fonts/buildGoogleFontsUrl.d.ts.map +1 -1
- package/dist/fonts/measureFont.d.ts +18 -0
- package/dist/fonts/measureFont.d.ts.map +1 -0
- package/dist/fonts/reportQueue.d.ts +7 -0
- package/dist/fonts/reportQueue.d.ts.map +1 -0
- package/dist/fonts/useLocalCalibration.d.ts +19 -0
- package/dist/fonts/useLocalCalibration.d.ts.map +1 -0
- package/dist/fonts/useTypographyCalibrations.d.ts +11 -0
- package/dist/fonts/useTypographyCalibrations.d.ts.map +1 -0
- package/dist/index.cjs +863 -437
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +9 -8
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +801 -391
- package/dist/index.js.map +1 -1
- package/dist/primitives/Icon/Icon.d.ts +1 -1
- package/dist/primitives/Icon/Icon.d.ts.map +1 -1
- package/dist/primitives/Icon/Icon.types.d.ts +8 -13
- package/dist/primitives/Icon/Icon.types.d.ts.map +1 -1
- package/dist/primitives/Text/Text.d.ts +33 -8
- package/dist/primitives/Text/Text.d.ts.map +1 -1
- package/dist/primitives/Text/Text.spans.d.ts +22 -0
- package/dist/primitives/Text/Text.spans.d.ts.map +1 -0
- package/dist/primitives/Text/Text.types.d.ts +75 -27
- package/dist/primitives/Text/Text.types.d.ts.map +1 -1
- package/dist/primitives/Text/index.d.ts +23 -2
- package/dist/primitives/Text/index.d.ts.map +1 -1
- package/dist/primitives/index.d.ts +1 -1
- package/dist/primitives/index.d.ts.map +1 -1
- package/dist/registry/codegen.d.ts.map +1 -1
- package/dist/registry/icons.d.ts +7 -0
- package/dist/registry/icons.d.ts.map +1 -0
- package/dist/registry/index.d.ts +2 -0
- package/dist/registry/index.d.ts.map +1 -1
- package/dist/registry/registry.d.ts.map +1 -1
- package/dist/registry/types.d.ts +3 -1
- package/dist/registry/types.d.ts.map +1 -1
- package/dist/theme/NewtoneProvider.d.ts +9 -1
- package/dist/theme/NewtoneProvider.d.ts.map +1 -1
- package/dist/theme/defaults.d.ts +1 -0
- package/dist/theme/defaults.d.ts.map +1 -1
- package/dist/theme/types.d.ts +48 -32
- package/dist/theme/types.d.ts.map +1 -1
- package/dist/theme/useBreakpoint.d.ts +9 -0
- package/dist/theme/useBreakpoint.d.ts.map +1 -0
- package/dist/tokens/computeTokens.d.ts +9 -22
- package/dist/tokens/computeTokens.d.ts.map +1 -1
- package/dist/tokens/types.d.ts +40 -22
- package/dist/tokens/types.d.ts.map +1 -1
- package/package.json +2 -1
- package/src/composites/actions/Button/Button.styles.ts +3 -3
- package/src/composites/actions/Button/Button.tsx +3 -2
- package/src/composites/form-controls/Select/Select.styles.ts +8 -8
- package/src/composites/form-controls/Select/Select.tsx +1 -1
- package/src/composites/form-controls/Select/SelectOption.tsx +3 -3
- package/src/composites/form-controls/TextInput/TextInput.styles.ts +5 -5
- package/src/composites/form-controls/Toggle/Toggle.styles.ts +3 -3
- package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.styles.ts +6 -6
- package/src/composites/range-inputs/HueSlider/HueSlider.styles.ts +9 -9
- package/src/composites/range-inputs/Slider/Slider.styles.ts +9 -9
- package/src/fonts/GoogleFontLoader.tsx +25 -10
- package/src/fonts/SelfHostedFontLoader.tsx +44 -0
- package/src/fonts/buildGoogleFontsUrl.ts +2 -31
- package/src/fonts/measureFont.ts +42 -0
- package/src/fonts/reportQueue.ts +54 -0
- package/src/fonts/useLocalCalibration.ts +97 -0
- package/src/fonts/useTypographyCalibrations.ts +15 -0
- package/src/index.ts +18 -7
- package/src/primitives/Frame/Frame.tsx +3 -3
- package/src/primitives/Icon/Icon.tsx +5 -7
- package/src/primitives/Icon/Icon.types.ts +8 -15
- package/src/primitives/Text/Text.spans.ts +57 -0
- package/src/primitives/Text/Text.tsx +205 -53
- package/src/primitives/Text/Text.types.ts +80 -27
- package/src/primitives/Text/index.ts +27 -3
- package/src/primitives/index.ts +3 -2
- package/src/registry/codegen.ts +1 -0
- package/src/registry/icons.ts +111 -0
- package/src/registry/index.ts +3 -0
- package/src/registry/registry.ts +67 -70
- package/src/registry/types.ts +3 -1
- package/src/theme/NewtoneProvider.tsx +18 -2
- package/src/theme/defaults.ts +8 -28
- package/src/theme/types.ts +63 -33
- package/src/theme/useBreakpoint.ts +14 -0
- package/src/tokens/computeTokens.ts +23 -19
- package/src/tokens/types.ts +10 -24
- package/dist/fonts/googleFonts.d.ts +0 -20
- package/dist/fonts/googleFonts.d.ts.map +0 -1
- package/src/fonts/googleFonts.ts +0 -87
|
@@ -13,5 +13,5 @@ import type { IconProps } from './Icon.types';
|
|
|
13
13
|
* <Icon name="check" color="#00ff00" />
|
|
14
14
|
* ```
|
|
15
15
|
*/
|
|
16
|
-
export declare function Icon({ name, size, opticalSize, fill, color,
|
|
16
|
+
export declare function Icon({ name, size, opticalSize, fill, color, style, accessibilityLabel, testID, nativeID, ref, }: IconProps): React.JSX.Element;
|
|
17
17
|
//# sourceMappingURL=Icon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,IAAQ,EACR,KAAK,EACL,
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,IAAQ,EACR,KAAK,EACL,KAAK,EAEL,kBAAkB,EAElB,MAAM,EACN,QAAQ,EACR,GAAG,GACJ,EAAE,SAAS,qBAqEX"}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import type { Text as RNText, TextStyle } from 'react-native';
|
|
2
|
-
import type { ElevationLevel } from '../../theme/types';
|
|
3
2
|
/**
|
|
4
3
|
* Props for Icon — Material Symbols icon with variable font support.
|
|
5
4
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
5
|
+
* Icon is a pure presentation primitive. It inherits elevation from the
|
|
6
|
+
* nearest parent Frame via FrameContext. For interactive icons, wrap in
|
|
7
|
+
* `<Button icon="..." />` instead.
|
|
8
8
|
*
|
|
9
9
|
* @example
|
|
10
10
|
* ```tsx
|
|
11
11
|
* <Icon name="home" />
|
|
12
12
|
* <Icon name="settings" size={24} fill={1} />
|
|
13
13
|
* <Icon name="check" color="#00ff00" />
|
|
14
|
-
* <Icon name="delete" size={20} onPress={() => handleDelete()} />
|
|
15
14
|
* ```
|
|
16
15
|
*
|
|
17
16
|
* @see {@link https://fonts.google.com/icons Material Symbols icon reference}
|
|
@@ -24,25 +23,21 @@ export interface IconProps {
|
|
|
24
23
|
* @see {@link https://fonts.google.com/icons Browse all icons}
|
|
25
24
|
*/
|
|
26
25
|
readonly name: string;
|
|
27
|
-
/** Font size in pixels. @default tokens.typography.
|
|
26
|
+
/** Font size in pixels. @default tokens.typography.fontSizes['05'] (16px) */
|
|
28
27
|
readonly size?: number;
|
|
29
28
|
/** Optical size for variable font axis. Adjusts stroke weight for readability at small sizes. @default same as size */
|
|
30
29
|
readonly opticalSize?: number;
|
|
31
30
|
/**
|
|
32
31
|
* Fill state for the icon.
|
|
33
32
|
*
|
|
34
|
-
* - `0` — Outlined (default)
|
|
35
|
-
* - `1` — Filled (solid)
|
|
33
|
+
* - `false` / `0` — Outlined (default)
|
|
34
|
+
* - `true` / `1` — Filled (solid)
|
|
36
35
|
*/
|
|
37
|
-
readonly fill?: 0 | 1;
|
|
36
|
+
readonly fill?: boolean | 0 | 1;
|
|
38
37
|
/** Icon color as hex string. @default tokens.textPrimary */
|
|
39
38
|
readonly color?: string;
|
|
40
|
-
/**
|
|
41
|
-
readonly elevation?: ElevationLevel;
|
|
42
|
-
/** Additional styles applied to the icon Text element. */
|
|
39
|
+
/** Additional styles applied to the icon Text element (positioning, transforms). */
|
|
43
40
|
readonly style?: TextStyle;
|
|
44
|
-
/** Press handler — makes the icon tappable. */
|
|
45
|
-
readonly onPress?: () => void;
|
|
46
41
|
/** Label read by screen readers. When omitted, the icon is treated as decorative (hidden from assistive technology). */
|
|
47
42
|
readonly accessibilityLabel?: string;
|
|
48
43
|
/** Test identifier — maps to `data-testid` on web. Used by testing libraries. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Icon.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,SAAS;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,6EAA6E;IAC7E,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEvB,uHAAuH;IACvH,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAE9B;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC;IAEhC,4DAA4D;IAC5D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAExB,oFAAoF;IACpF,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAI3B,wHAAwH;IACxH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAIrC,iFAAiF;IACjF,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,0CAA0C;IAC1C,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;CAClC"}
|
|
@@ -1,17 +1,42 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { UseTokensResult } from '../../tokens/useTokens';
|
|
3
|
+
import type { TextProps, TextColor } from './Text.types';
|
|
3
4
|
/**
|
|
4
|
-
*
|
|
5
|
+
* Context to pass the active scope's weight map to span sub-components.
|
|
6
|
+
* Spans inherit font family from the parent RN Text, but need the scope's
|
|
7
|
+
* weight mapping to resolve semantic weight tokens (regular/medium/bold)
|
|
8
|
+
* to numeric CSS values.
|
|
9
|
+
*/
|
|
10
|
+
export declare const TextScopeContext: React.Context<{
|
|
11
|
+
readonly weights: {
|
|
12
|
+
readonly regular: number;
|
|
13
|
+
readonly medium: number;
|
|
14
|
+
readonly bold: number;
|
|
15
|
+
};
|
|
16
|
+
} | null>;
|
|
17
|
+
/**
|
|
18
|
+
* Resolve a semantic text color to a hex string from the current tokens.
|
|
19
|
+
* Neutral text colors are top-level; palette colors use nested PaletteTokens.fill.
|
|
20
|
+
*/
|
|
21
|
+
export declare function resolveTextColor(color: TextColor, tokens: UseTokensResult): string;
|
|
22
|
+
/**
|
|
23
|
+
* Token-aware text primitive with semantic scope + role API.
|
|
5
24
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
25
|
+
* - `scope` selects the font family (main, display, mono, currency)
|
|
26
|
+
* - `role` sets default weight; fontSize and lineHeight resolved from config's role mapping
|
|
27
|
+
* - `size` selects within the role's 3-step scale (sm, md, lg)
|
|
28
|
+
* - `responsive` enables container-width-aware font sizing for adaptive roles
|
|
8
29
|
*
|
|
9
30
|
* @example
|
|
10
31
|
* ```tsx
|
|
11
|
-
* <Text>Body text</Text>
|
|
12
|
-
* <Text
|
|
13
|
-
* <Text
|
|
32
|
+
* <Text>Body text (default)</Text>
|
|
33
|
+
* <Text role="headline" scope="display">Hero title</Text>
|
|
34
|
+
* <Text role="label">Form label</Text>
|
|
35
|
+
* <Text scope="mono" role="caption">const x = 42;</Text>
|
|
36
|
+
* <Text role="body">Regular <Text.Bold>bold</Text.Bold> text</Text>
|
|
37
|
+
* <Text role="headline" responsive>Responsive headline</Text>
|
|
14
38
|
* ```
|
|
15
39
|
*/
|
|
16
|
-
|
|
40
|
+
declare function TextBase({ children, scope, role, color, size: sizeOverride, align, numberOfLines, elevation, style, accessibilityRole: accessibilityRoleOverride, testID, nativeID, ref, responsive, centerVertically, features, }: TextProps): React.JSX.Element;
|
|
41
|
+
export { TextBase };
|
|
17
42
|
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/primitives/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/primitives/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAO3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;sBACT;QAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;KAAE;SACjF,CAAC;AAEhB;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,eAAe,GAAG,MAAM,CAWlF;AA0BD;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,KAAc,EACd,IAAa,EACb,KAAiB,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EACL,aAAa,EACb,SAAa,EACb,KAAK,EACL,iBAAiB,EAAE,yBAAyB,EAC5C,MAAM,EACN,QAAQ,EACR,GAAG,EACH,UAAkB,EAClB,gBAAwB,EACxB,QAAQ,GACT,EAAE,SAAS,qBAqJX;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Text as RNText } from 'react-native';
|
|
3
|
+
import type { TextSpanProps } from './Text.types';
|
|
4
|
+
/**
|
|
5
|
+
* Generic inline span — constrained sub-component for inline text formatting.
|
|
6
|
+
* Inherits font family, size, and line height from the parent Text.
|
|
7
|
+
* Only inline formatting properties (color, weight, italic, underline, highlight) are exposed.
|
|
8
|
+
*/
|
|
9
|
+
export declare function TextSpan({ children, color, weight, italic, underline, highlight, style }: TextSpanProps): React.CElement<import("react-native").TextProps, RNText>;
|
|
10
|
+
/** Bold span — applies bold weight inline. */
|
|
11
|
+
export declare function TextBold(props: Omit<TextSpanProps, 'weight'>): React.FunctionComponentElement<TextSpanProps>;
|
|
12
|
+
/** Medium-weight span — applies medium weight inline. */
|
|
13
|
+
export declare function TextMedium(props: Omit<TextSpanProps, 'weight'>): React.FunctionComponentElement<TextSpanProps>;
|
|
14
|
+
/** Italic span — applies italic style inline. */
|
|
15
|
+
export declare function TextItalic(props: Omit<TextSpanProps, 'italic'>): React.FunctionComponentElement<TextSpanProps>;
|
|
16
|
+
/** Underline span — applies underline decoration inline. */
|
|
17
|
+
export declare function TextUnderline(props: Omit<TextSpanProps, 'underline'>): React.FunctionComponentElement<TextSpanProps>;
|
|
18
|
+
/** Highlight span — applies background highlight using a semantic color token. */
|
|
19
|
+
export declare function TextHighlight(props: Omit<TextSpanProps, 'highlight'> & {
|
|
20
|
+
readonly highlight: TextSpanProps['highlight'];
|
|
21
|
+
}): React.FunctionComponentElement<TextSpanProps>;
|
|
22
|
+
//# sourceMappingURL=Text.spans.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Text.spans.d.ts","sourceRoot":"","sources":["../../../src/primitives/Text/Text.spans.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,cAAc,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,aAAa,4DAmBvG;AAED,8CAA8C;AAC9C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,iDAE5D;AAED,yDAAyD;AACzD,wBAAgB,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,iDAE9D;AAED,iDAAiD;AACjD,wBAAgB,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,iDAE9D;AAED,4DAA4D;AAC5D,wBAAgB,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,iDAEpE;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,GAAG;IAAE,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;CAAE,iDAEzH"}
|
|
@@ -1,50 +1,54 @@
|
|
|
1
1
|
import type { Text as RNText, TextStyle } from 'react-native';
|
|
2
2
|
import type { ElevationLevel } from '../../theme/types';
|
|
3
|
-
/** Typography size
|
|
4
|
-
export type TextSize = '
|
|
5
|
-
/**
|
|
6
|
-
export type TextWeight = 'regular' | 'medium' | '
|
|
3
|
+
/** Typography size step — selects within the current role's 3-step scale. @default 'md' */
|
|
4
|
+
export type TextSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
/** Font weight slots — maps to per-scope `tokens.typography.fonts[scope].weights.*` values. */
|
|
6
|
+
export type TextWeight = 'regular' | 'medium' | 'bold';
|
|
7
7
|
/** Semantic text color tokens — resolved from the current theme's token palette. */
|
|
8
8
|
export type TextColor = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'accent' | 'success' | 'warning' | 'error';
|
|
9
|
-
/** Font
|
|
10
|
-
export type
|
|
11
|
-
/**
|
|
12
|
-
|
|
9
|
+
/** Font scope — selects which font family slot to use. @default 'main' */
|
|
10
|
+
export type TextScope = 'main' | 'display' | 'mono' | 'currency';
|
|
11
|
+
/**
|
|
12
|
+
* Semantic text role — determines default size, weight, and line height.
|
|
13
|
+
* Provides purpose-driven typography presets. Individual size/weight/lineHeight
|
|
14
|
+
* props can override the role's defaults when needed (e.g., in composites).
|
|
15
|
+
* @default 'body'
|
|
16
|
+
*/
|
|
17
|
+
export type TextRole = 'headline' | 'title' | 'heading' | 'subheading' | 'body' | 'label' | 'caption';
|
|
13
18
|
/** Text alignment. */
|
|
14
19
|
export type TextAlign = 'left' | 'center' | 'right';
|
|
15
20
|
/**
|
|
16
21
|
* Props for Text — themed typography component.
|
|
17
22
|
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* tokens rather than raw values for consistency.
|
|
23
|
+
* Primary API surface: `scope` (font family) + `role` (semantic preset) + `color`.
|
|
24
|
+
* Individual size/weight/lineHeight props are available as overrides for composites.
|
|
21
25
|
*
|
|
22
26
|
* @example
|
|
23
27
|
* ```tsx
|
|
24
28
|
* <Text>Default body text</Text>
|
|
25
|
-
* <Text
|
|
26
|
-
* <Text
|
|
27
|
-
* <Text
|
|
28
|
-
* <Text
|
|
29
|
+
* <Text role="headline" scope="display">Hero title</Text>
|
|
30
|
+
* <Text role="label">Form label</Text>
|
|
31
|
+
* <Text scope="mono" role="caption">const x = 42;</Text>
|
|
32
|
+
* <Text role="body">Regular text with <Text.Bold>bold emphasis</Text.Bold></Text>
|
|
29
33
|
* ```
|
|
30
34
|
*/
|
|
31
35
|
export interface TextProps {
|
|
32
36
|
/**
|
|
33
|
-
* Text content. Accepts strings, numbers, and
|
|
34
|
-
* for inline formatting (e.g.,
|
|
37
|
+
* Text content. Accepts strings, numbers, and span sub-components
|
|
38
|
+
* for inline formatting (e.g., `<Text.Bold>`, `<Text.Italic>`).
|
|
35
39
|
*
|
|
36
40
|
* @example
|
|
37
41
|
* ```tsx
|
|
38
42
|
* <Text>Plain string</Text>
|
|
39
43
|
* <Text>Count: {42}</Text>
|
|
40
|
-
* <Text>Normal <Text
|
|
44
|
+
* <Text role="body">Normal <Text.Bold>bold</Text.Bold> normal</Text>
|
|
41
45
|
* ```
|
|
42
46
|
*/
|
|
43
47
|
readonly children: React.ReactNode;
|
|
44
|
-
/**
|
|
45
|
-
readonly
|
|
46
|
-
/**
|
|
47
|
-
readonly
|
|
48
|
+
/** Font scope — selects which font family to use. @default 'main' */
|
|
49
|
+
readonly scope?: TextScope;
|
|
50
|
+
/** Semantic role — sets default size/weight/lineHeight. @default 'body' */
|
|
51
|
+
readonly role?: TextRole;
|
|
48
52
|
/**
|
|
49
53
|
* Semantic color token.
|
|
50
54
|
*
|
|
@@ -60,10 +64,8 @@ export interface TextProps {
|
|
|
60
64
|
* @default 'primary'
|
|
61
65
|
*/
|
|
62
66
|
readonly color?: TextColor;
|
|
63
|
-
/**
|
|
64
|
-
readonly
|
|
65
|
-
/** Line height multiplier token. @default 'normal' */
|
|
66
|
-
readonly lineHeight?: TextLineHeight;
|
|
67
|
+
/** Override the role's default size. */
|
|
68
|
+
readonly size?: TextSize;
|
|
67
69
|
/** Text alignment. */
|
|
68
70
|
readonly align?: TextAlign;
|
|
69
71
|
/** Maximum number of lines before truncation with ellipsis. When omitted, text wraps freely. */
|
|
@@ -73,7 +75,8 @@ export interface TextProps {
|
|
|
73
75
|
/** Style overrides (applied last). Supports a single style or an array of styles. */
|
|
74
76
|
readonly style?: TextStyle | readonly TextStyle[];
|
|
75
77
|
/**
|
|
76
|
-
* Semantic role for screen readers.
|
|
78
|
+
* Semantic role for screen readers. Auto-inferred from typography role
|
|
79
|
+
* (headline/title/heading → 'header') unless explicitly set.
|
|
77
80
|
*
|
|
78
81
|
* - `'header'` — Marks this as a heading (e.g. page title, section header)
|
|
79
82
|
* - `'text'` — Default text role (usually omitted)
|
|
@@ -86,5 +89,50 @@ export interface TextProps {
|
|
|
86
89
|
readonly nativeID?: string;
|
|
87
90
|
/** Ref to the underlying React Native Text element. */
|
|
88
91
|
readonly ref?: React.Ref<RNText>;
|
|
92
|
+
/**
|
|
93
|
+
* Enable responsive font sizing for adaptive roles (headline, title, heading, subheading).
|
|
94
|
+
* When true, the Text component measures its container width and uses `resolveResponsiveSize`
|
|
95
|
+
* to pick the best fontSize within the role's natural size, improving line-break quality.
|
|
96
|
+
* Requires the text to be wrapped in a container that defines a width.
|
|
97
|
+
* No-op for non-adaptive roles (body, label, caption).
|
|
98
|
+
* @default false
|
|
99
|
+
*/
|
|
100
|
+
readonly responsive?: boolean;
|
|
101
|
+
/**
|
|
102
|
+
* Apply vertical centering correction to compensate for font metrics.
|
|
103
|
+
* Shifts text down by the font's verticalCenterOffset so that cap-height
|
|
104
|
+
* text appears visually centered within flex containers (buttons, chips).
|
|
105
|
+
* No-op for multi-line body text — only enable in single-line centering contexts.
|
|
106
|
+
* Requires fontMetrics in the theme config; ignored when metrics are unavailable.
|
|
107
|
+
* @default false
|
|
108
|
+
*/
|
|
109
|
+
readonly centerVertically?: boolean;
|
|
110
|
+
/**
|
|
111
|
+
* OpenType feature tags to enable (e.g., `['tnum', 'kern']`).
|
|
112
|
+
* When fontMetrics are available, requested tags are filtered against the font's
|
|
113
|
+
* supported features. When metrics are unavailable, all tags are applied optimistically.
|
|
114
|
+
* Maps to the CSS `font-feature-settings` property via react-native-web.
|
|
115
|
+
*/
|
|
116
|
+
readonly features?: readonly string[];
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* Constrained props for inline span sub-components (Text.Bold, Text.Italic, etc.).
|
|
120
|
+
* Spans inherit font family, size, and line height from the parent Text.
|
|
121
|
+
* Only inline formatting properties are exposed.
|
|
122
|
+
*/
|
|
123
|
+
export interface TextSpanProps {
|
|
124
|
+
readonly children: React.ReactNode;
|
|
125
|
+
/** Override text color within the span. */
|
|
126
|
+
readonly color?: TextColor;
|
|
127
|
+
/** Override font weight within the span. */
|
|
128
|
+
readonly weight?: TextWeight;
|
|
129
|
+
/** Apply italic style. */
|
|
130
|
+
readonly italic?: boolean;
|
|
131
|
+
/** Apply underline decoration. */
|
|
132
|
+
readonly underline?: boolean;
|
|
133
|
+
/** Apply background highlight using a semantic color token. */
|
|
134
|
+
readonly highlight?: TextColor;
|
|
135
|
+
/** Style overrides (applied last). */
|
|
136
|
+
readonly style?: TextStyle | readonly TextStyle[];
|
|
89
137
|
}
|
|
90
138
|
//# sourceMappingURL=Text.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Text/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,
|
|
1
|
+
{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Text/Text.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { TextBase } from './Text';
|
|
2
|
+
import { TextSpan, TextBold, TextMedium, TextItalic, TextUnderline, TextHighlight } from './Text.spans';
|
|
3
|
+
/**
|
|
4
|
+
* Token-aware text primitive with span sub-components.
|
|
5
|
+
*
|
|
6
|
+
* Primary API: `scope` (font family) + `role` (semantic preset) + `color`.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* <Text role="headline" scope="display">Hero</Text>
|
|
11
|
+
* <Text role="body">Regular <Text.Bold>bold</Text.Bold> text</Text>
|
|
12
|
+
* <Text role="label" color="secondary">Field label</Text>
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export declare const Text: typeof TextBase & {
|
|
16
|
+
Span: typeof TextSpan;
|
|
17
|
+
Bold: typeof TextBold;
|
|
18
|
+
Medium: typeof TextMedium;
|
|
19
|
+
Italic: typeof TextItalic;
|
|
20
|
+
Underline: typeof TextUnderline;
|
|
21
|
+
Highlight: typeof TextHighlight;
|
|
22
|
+
};
|
|
23
|
+
export type { TextProps, TextSize, TextWeight, TextColor, TextScope, TextRole, TextAlign, TextSpanProps, } from './Text.types';
|
|
3
24
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAExG;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI;;;;;;;CAOf,CAAC;AAEH,YAAY,EACV,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,aAAa,GACd,MAAM,cAAc,CAAC"}
|
|
@@ -8,5 +8,5 @@ export type { IconProps } from './Icon';
|
|
|
8
8
|
export { Wrapper } from './Wrapper';
|
|
9
9
|
export type { WrapperProps } from './Wrapper';
|
|
10
10
|
export { Text } from './Text';
|
|
11
|
-
export type { TextProps, TextSize, TextWeight, TextColor,
|
|
11
|
+
export type { TextProps, TextSize, TextWeight, TextColor, TextScope, TextRole, TextSpanProps, TextAlign, } from './Text';
|
|
12
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,aAAa,EACb,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EACV,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,QAAQ,EACR,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,aAAa,EACb,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EACV,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,GACV,MAAM,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"codegen.d.ts","sourceRoot":"","sources":["../../src/registry/codegen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"codegen.d.ts","sourceRoot":"","sources":["../../src/registry/codegen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAyB7C;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,aAAa,EACxB,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACrC,MAAM,CAmFR"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/registry/icons.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;CACnC;AAED,eAAO,MAAM,YAAY,EAAE,SAAS,mBAAmB,EAwGtD,CAAC"}
|
package/dist/registry/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export type { CategoryMeta, VariantMeta, EditableProp, EditablePropOption, ComponentMeta, } from './types';
|
|
2
2
|
export { CATEGORIES, COMPONENTS, getComponent, getCategory, getComponentsByCategory, } from './registry';
|
|
3
3
|
export { generateComponentCode } from './codegen';
|
|
4
|
+
export type { IconCatalogCategory } from './icons';
|
|
5
|
+
export { ICON_CATALOG } from './icons';
|
|
4
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/registry/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,uBAAuB,GACxB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/registry/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,uBAAuB,GACxB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAElD,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/registry/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,UAAU,EAAE,SAAS,YAAY,
|
|
1
|
+
{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/registry/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,UAAU,EAAE,SAAS,YAAY,EAM7C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAAS,aAAa,EAimB9C,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAElE;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAEhE;AAED,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,aAAa,EAAE,CAEpF"}
|
package/dist/registry/types.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export interface CategoryMeta {
|
|
|
2
2
|
readonly id: string;
|
|
3
3
|
readonly name: string;
|
|
4
4
|
readonly description: string;
|
|
5
|
+
readonly icon?: string;
|
|
5
6
|
}
|
|
6
7
|
export interface VariantMeta {
|
|
7
8
|
readonly id: string;
|
|
@@ -15,7 +16,7 @@ export interface EditablePropOption {
|
|
|
15
16
|
export interface EditableProp {
|
|
16
17
|
readonly name: string;
|
|
17
18
|
readonly label: string;
|
|
18
|
-
readonly control: 'select' | 'text' | 'toggle' | 'number';
|
|
19
|
+
readonly control: 'select' | 'text' | 'toggle' | 'number' | 'discrete-slider';
|
|
19
20
|
readonly options?: readonly EditablePropOption[];
|
|
20
21
|
readonly defaultValue: string | number | boolean;
|
|
21
22
|
}
|
|
@@ -26,6 +27,7 @@ export interface ComponentMeta {
|
|
|
26
27
|
readonly categoryId: string;
|
|
27
28
|
readonly description: string;
|
|
28
29
|
readonly hasChildren: boolean;
|
|
30
|
+
readonly previewLayout?: 'grid' | 'list';
|
|
29
31
|
readonly variants: readonly VariantMeta[];
|
|
30
32
|
readonly editableProps: readonly EditableProp[];
|
|
31
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/registry/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/registry/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC3C;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,iBAAiB,CAAC;IAC9E,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACjD,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAClD;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzC,QAAQ,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAC;IAC1C,QAAQ,CAAC,aAAa,EAAE,SAAS,YAAY,EAAE,CAAC;CACjD"}
|
|
@@ -4,6 +4,14 @@ export interface NewtoneProviderProps {
|
|
|
4
4
|
readonly config?: NewtoneThemeConfig;
|
|
5
5
|
readonly initialMode?: ColorMode;
|
|
6
6
|
readonly children: React.ReactNode;
|
|
7
|
+
/** Optional URL for typography telemetry. When set, adaptive Text instances report observations. */
|
|
8
|
+
readonly reportingEndpoint?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Self-hosted @font-face CSS from the theme API.
|
|
11
|
+
* When provided, injects this CSS instead of loading from Google CDN.
|
|
12
|
+
* Falls back to Google CDN when absent or null.
|
|
13
|
+
*/
|
|
14
|
+
readonly fontFaceCss?: string | null;
|
|
7
15
|
}
|
|
8
16
|
/**
|
|
9
17
|
* NewtoneProvider - Provides theme context to all Newtone components
|
|
@@ -17,7 +25,7 @@ export interface NewtoneProviderProps {
|
|
|
17
25
|
* </NewtoneProvider>
|
|
18
26
|
* ```
|
|
19
27
|
*/
|
|
20
|
-
export declare function NewtoneProvider({ config, initialMode, children, }: NewtoneProviderProps): React.JSX.Element;
|
|
28
|
+
export declare function NewtoneProvider({ config, initialMode, children, reportingEndpoint, fontFaceCss, }: NewtoneProviderProps): React.JSX.Element;
|
|
21
29
|
/**
|
|
22
30
|
* useNewtoneTheme - Hook to access theme context
|
|
23
31
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NewtoneProvider.d.ts","sourceRoot":"","sources":["../../src/theme/NewtoneProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"NewtoneProvider.d.ts","sourceRoot":"","sources":["../../src/theme/NewtoneProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAQlF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,oGAAoG;IACpG,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAA6B,EAC7B,WAAqB,EACrB,QAAQ,EACR,iBAAiB,EACjB,WAAW,GACZ,EAAE,oBAAoB,qBAwBtB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,IAAI,mBAAmB,CAMrD"}
|
package/dist/theme/defaults.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { NewtoneThemeConfig } from './types';
|
|
2
|
+
export { DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES } from '@newtonedev/fonts';
|
|
2
3
|
/**
|
|
3
4
|
* Default theme configuration matching playground defaults.
|
|
4
5
|
* Palettes: [0] Neutral, [1] Accent, [2] Success, [3] Warning, [4] Error
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/theme/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/theme/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAgBlD,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAElG;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,kBAgDlC,CAAC"}
|
package/dist/theme/types.d.ts
CHANGED
|
@@ -1,17 +1,10 @@
|
|
|
1
1
|
import type { DynamicRange, PaletteConfig } from 'newtone';
|
|
2
|
+
export type { FontConfig, FontWeights, FontSlot, FontSizeScale, LineHeightScale, RoleSizeStep, RoleScale, RoleScales, BreakpointKey, Breakpoints, BreakpointRoleScales, FontRuntimeMetrics, } from '@newtonedev/fonts';
|
|
3
|
+
import type { FontSlot, FontSizeScale, LineHeightScale, RoleScales, BreakpointRoleScales, FontRuntimeMetrics, TextRole } from '@newtonedev/fonts';
|
|
2
4
|
/**
|
|
3
5
|
* Color mode: light or dark
|
|
4
6
|
*/
|
|
5
7
|
export type ColorMode = 'light' | 'dark';
|
|
6
|
-
/**
|
|
7
|
-
* Font configuration for a single font slot
|
|
8
|
-
*/
|
|
9
|
-
export interface FontConfig {
|
|
10
|
-
readonly type: 'system' | 'google' | 'custom';
|
|
11
|
-
readonly family: string;
|
|
12
|
-
readonly customUrl?: string;
|
|
13
|
-
readonly fallback: string;
|
|
14
|
-
}
|
|
15
8
|
/**
|
|
16
9
|
* Elevation levels for surfaces (internal)
|
|
17
10
|
* 0 = sunken, 1 = default, 2 = elevated
|
|
@@ -97,30 +90,46 @@ export interface NewtoneThemeConfig {
|
|
|
97
90
|
};
|
|
98
91
|
readonly typography: {
|
|
99
92
|
readonly fonts: {
|
|
100
|
-
readonly
|
|
101
|
-
readonly display:
|
|
102
|
-
readonly
|
|
103
|
-
|
|
104
|
-
readonly scale: {
|
|
105
|
-
readonly xs: number;
|
|
106
|
-
readonly sm: number;
|
|
107
|
-
readonly base: number;
|
|
108
|
-
readonly md: number;
|
|
109
|
-
readonly lg: number;
|
|
110
|
-
readonly xl: number;
|
|
111
|
-
readonly xxl: number;
|
|
112
|
-
};
|
|
113
|
-
readonly lineHeight: {
|
|
114
|
-
readonly tight: number;
|
|
115
|
-
readonly normal: number;
|
|
116
|
-
readonly relaxed: number;
|
|
117
|
-
};
|
|
118
|
-
readonly fontWeight: {
|
|
119
|
-
readonly regular: number;
|
|
120
|
-
readonly medium: number;
|
|
121
|
-
readonly semibold: number;
|
|
122
|
-
readonly bold: number;
|
|
93
|
+
readonly main: FontSlot;
|
|
94
|
+
readonly display: FontSlot;
|
|
95
|
+
readonly mono: FontSlot;
|
|
96
|
+
readonly currency: FontSlot;
|
|
123
97
|
};
|
|
98
|
+
/** Primitive font size scale — numbered tokens ('01'-'16'), values in px. */
|
|
99
|
+
readonly fontSizes: FontSizeScale;
|
|
100
|
+
/** Primitive line height scale — numbered tokens ('01'-'16'), values in px. */
|
|
101
|
+
readonly lineHeights: LineHeightScale;
|
|
102
|
+
/** Role mapping — pairs fontSizes and lineHeights for each role x size combination. */
|
|
103
|
+
readonly roles: RoleScales;
|
|
104
|
+
/**
|
|
105
|
+
* Per-font avgCharWidth ratios, keyed by font family name.
|
|
106
|
+
* Measured with canvas at editor publish time (Layer 1 calibration).
|
|
107
|
+
* Used by resolveResponsiveSize to improve line break estimation accuracy.
|
|
108
|
+
* Falls back to 0.55 when absent.
|
|
109
|
+
*/
|
|
110
|
+
readonly calibrations?: Record<string, number>;
|
|
111
|
+
/**
|
|
112
|
+
* Pre-computed role scales for each viewport breakpoint (sm/md/lg).
|
|
113
|
+
* Enables CSS-only consumers to generate @media rules from the theme JSON
|
|
114
|
+
* without importing newtone-fonts. Runtime components use useBreakpoint
|
|
115
|
+
* instead and compute scaling on the fly.
|
|
116
|
+
*/
|
|
117
|
+
readonly breakpointRoles?: BreakpointRoleScales;
|
|
118
|
+
/**
|
|
119
|
+
* Per-font OpenType-derived metrics, keyed by font family name.
|
|
120
|
+
* Extracted from font binaries at upload time, looked up at publish time.
|
|
121
|
+
* Used by Text for line height correction (adjustLineHeight),
|
|
122
|
+
* vertical centering (verticalCenterOffset), and font feature validation.
|
|
123
|
+
* Falls back to Inter-equivalent defaults when absent.
|
|
124
|
+
*/
|
|
125
|
+
readonly fontMetrics?: Readonly<Record<string, FontRuntimeMetrics>>;
|
|
126
|
+
/**
|
|
127
|
+
* Per-role font weight (CSS font-weight 100–900).
|
|
128
|
+
* Primary weight path — the Text component uses these values directly.
|
|
129
|
+
* When populated via toThemeConfig, defaults are merged with user overrides.
|
|
130
|
+
* Per-instance weight prop still takes priority.
|
|
131
|
+
*/
|
|
132
|
+
readonly roleWeights?: Partial<Record<TextRole, number>>;
|
|
124
133
|
};
|
|
125
134
|
readonly icons: {
|
|
126
135
|
readonly variant: 'outlined' | 'rounded' | 'sharp';
|
|
@@ -136,5 +145,12 @@ export interface NewtoneThemeContext {
|
|
|
136
145
|
readonly config: NewtoneThemeConfig;
|
|
137
146
|
readonly mode: ColorMode;
|
|
138
147
|
readonly setMode: (mode: ColorMode) => void;
|
|
148
|
+
/**
|
|
149
|
+
* Optional URL for the typography telemetry reporting endpoint.
|
|
150
|
+
* When set, the Text component (in responsive mode) will batch and POST
|
|
151
|
+
* ObserverPayload observations to this URL for cross-site aggregation.
|
|
152
|
+
* When absent, no telemetry is sent (opt-in).
|
|
153
|
+
*/
|
|
154
|
+
readonly reportingEndpoint?: string;
|
|
139
155
|
}
|
|
140
156
|
//# sourceMappingURL=types.d.ts.map
|