@frosted-ui/react-native 0.0.1-canary.91 → 0.0.1-canary.93
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/README.md +59 -14
- package/dist/components/accordion.js +2 -2
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/alert-dialog.js +2 -2
- package/dist/components/alert-dialog.js.map +1 -1
- package/dist/components/avatar.d.ts.map +1 -1
- package/dist/components/avatar.js +4 -20
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/badge.d.ts +2 -4
- package/dist/components/badge.d.ts.map +1 -1
- package/dist/components/badge.js +6 -22
- package/dist/components/badge.js.map +1 -1
- package/dist/components/button.d.ts +1 -1
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +13 -17
- package/dist/components/button.js.map +1 -1
- package/dist/components/callout.d.ts +2 -4
- package/dist/components/callout.d.ts.map +1 -1
- package/dist/components/callout.js +6 -24
- package/dist/components/callout.js.map +1 -1
- package/dist/components/card.d.ts +1 -2
- package/dist/components/card.d.ts.map +1 -1
- package/dist/components/card.js +2 -3
- package/dist/components/card.js.map +1 -1
- package/dist/components/checkbox.d.ts +1 -2
- package/dist/components/checkbox.d.ts.map +1 -1
- package/dist/components/checkbox.js +5 -21
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/code.d.ts +6 -8
- package/dist/components/code.d.ts.map +1 -1
- package/dist/components/code.js +7 -7
- package/dist/components/code.js.map +1 -1
- package/dist/components/context-menu.js +9 -9
- package/dist/components/context-menu.js.map +1 -1
- package/dist/components/dialog.js +2 -2
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/dropdown-menu.js +9 -9
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/heading.d.ts +4 -4
- package/dist/components/heading.d.ts.map +1 -1
- package/dist/components/heading.js +2 -2
- package/dist/components/heading.js.map +1 -1
- package/dist/components/hover-card.js +2 -2
- package/dist/components/hover-card.js.map +1 -1
- package/dist/components/icon-button.d.ts +2 -2
- package/dist/components/icon-button.d.ts.map +1 -1
- package/dist/components/icon-button.js +13 -17
- package/dist/components/icon-button.js.map +1 -1
- package/dist/components/icon.d.ts +6 -7
- package/dist/components/icon.d.ts.map +1 -1
- package/dist/components/icon.js +9 -24
- package/dist/components/icon.js.map +1 -1
- package/dist/components/label.js +2 -2
- package/dist/components/label.js.map +1 -1
- package/dist/components/native-only-animated-view.d.ts +0 -4
- package/dist/components/native-only-animated-view.d.ts.map +1 -1
- package/dist/components/popover.js +2 -2
- package/dist/components/popover.js.map +1 -1
- package/dist/components/progress.d.ts +1 -2
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js +5 -21
- package/dist/components/progress.js.map +1 -1
- package/dist/components/radio-group.d.ts +1 -2
- package/dist/components/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group.js +7 -23
- package/dist/components/radio-group.js.map +1 -1
- package/dist/components/segmented-control.js +3 -3
- package/dist/components/segmented-control.js.map +1 -1
- package/dist/components/select.d.ts.map +1 -1
- package/dist/components/select.js +10 -12
- package/dist/components/select.js.map +1 -1
- package/dist/components/separator.d.ts +1 -1
- package/dist/components/separator.d.ts.map +1 -1
- package/dist/components/separator.js +4 -20
- package/dist/components/separator.js.map +1 -1
- package/dist/components/skeleton.d.ts.map +1 -1
- package/dist/components/skeleton.js +10 -26
- package/dist/components/skeleton.js.map +1 -1
- package/dist/components/spinner.js +2 -2
- package/dist/components/spinner.js.map +1 -1
- package/dist/components/switch.d.ts +1 -2
- package/dist/components/switch.d.ts.map +1 -1
- package/dist/components/switch.js +5 -21
- package/dist/components/switch.js.map +1 -1
- package/dist/components/tabs.d.ts +4 -3
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +10 -9
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/text-area.d.ts.map +1 -1
- package/dist/components/text-area.js +13 -9
- package/dist/components/text-area.js.map +1 -1
- package/dist/components/text-field.d.ts.map +1 -1
- package/dist/components/text-field.js +22 -16
- package/dist/components/text-field.js.map +1 -1
- package/dist/components/text.d.ts +4 -4
- package/dist/components/text.d.ts.map +1 -1
- package/dist/components/text.js +12 -10
- package/dist/components/text.js.map +1 -1
- package/dist/components/tooltip.js +2 -2
- package/dist/components/tooltip.js.map +1 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +11 -1
- package/dist/index.js.map +1 -1
- package/dist/lib/button-styles.d.ts +6 -6
- package/dist/lib/button-styles.d.ts.map +1 -1
- package/dist/lib/button-styles.js +1 -17
- package/dist/lib/button-styles.js.map +1 -1
- package/dist/lib/color-utils.d.ts +19 -14
- package/dist/lib/color-utils.d.ts.map +1 -1
- package/dist/lib/color-utils.js +37 -73
- package/dist/lib/color-utils.js.map +1 -1
- package/dist/lib/full-window-overlay.d.ts +11 -0
- package/dist/lib/full-window-overlay.d.ts.map +1 -0
- package/dist/lib/full-window-overlay.js +16 -0
- package/dist/lib/full-window-overlay.js.map +1 -0
- package/dist/lib/text-input-styles.d.ts +9 -8
- package/dist/lib/text-input-styles.d.ts.map +1 -1
- package/dist/lib/text-input-styles.js +4 -23
- package/dist/lib/text-input-styles.js.map +1 -1
- package/dist/lib/theme-context.d.ts +80 -0
- package/dist/lib/theme-context.d.ts.map +1 -0
- package/dist/lib/theme-context.js +97 -0
- package/dist/lib/theme-context.js.map +1 -0
- package/dist/lib/{theme-vars.d.ts → theme-tokens.d.ts} +2 -2
- package/dist/lib/theme-tokens.d.ts.map +1 -0
- package/dist/lib/{theme-vars.js → theme-tokens.js} +4 -19
- package/dist/lib/theme-tokens.js.map +1 -0
- package/dist/lib/theme.d.ts +14 -54
- package/dist/lib/theme.d.ts.map +1 -1
- package/dist/lib/theme.js +98 -66
- package/dist/lib/theme.js.map +1 -1
- package/dist/lib/types.d.ts +6 -2
- package/dist/lib/types.d.ts.map +1 -1
- package/dist/lib/use-theme-tokens.d.ts +593 -0
- package/dist/lib/use-theme-tokens.d.ts.map +1 -0
- package/dist/lib/use-theme-tokens.js +44 -0
- package/dist/lib/use-theme-tokens.js.map +1 -0
- package/package.json +10 -23
- package/dist/lib/native-colors.d.ts +0 -8
- package/dist/lib/native-colors.d.ts.map +0 -1
- package/dist/lib/native-colors.js +0 -67
- package/dist/lib/native-colors.js.map +0 -1
- package/dist/lib/theme-vars.d.ts.map +0 -1
- package/dist/lib/theme-vars.js.map +0 -1
- package/dist/lib/use-theme-vars.d.ts +0 -325
- package/dist/lib/use-theme-vars.d.ts.map +0 -1
- package/dist/lib/use-theme-vars.js +0 -17
- package/dist/lib/use-theme-vars.js.map +0 -1
- package/dist/lib/utils.d.ts +0 -3
- package/dist/lib/utils.d.ts.map +0 -1
- package/dist/lib/utils.js +0 -17
- package/dist/lib/utils.js.map +0 -1
- package/global.css +0 -1813
- package/tailwind-preset.js +0 -310
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { getDisabledSoftStyle, getDisabledSurfaceStyle, getSoftVariantStyle, getSurfaceVariantStyle, getTextInputColors,
|
|
2
|
-
import {
|
|
1
|
+
import { getDisabledSoftStyle, getDisabledSurfaceStyle, getSoftVariantStyle, getSurfaceVariantStyle, getTextInputColors, } from '../lib/text-input-styles';
|
|
2
|
+
import { useThemeTokens } from '../lib/use-theme-tokens';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { Platform, TextInput, View, } from 'react-native';
|
|
5
5
|
// ============================================================================
|
|
@@ -45,16 +45,20 @@ function getTextAreaSizeStyle(size) {
|
|
|
45
45
|
};
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
-
function TextArea({ size = '2', variant = 'surface', color
|
|
49
|
-
const { colors } =
|
|
50
|
-
const
|
|
48
|
+
function TextArea({ size = '2', variant = 'surface', color, style, editable, ...props }) {
|
|
49
|
+
const { colors } = useThemeTokens();
|
|
50
|
+
const gray = colors.palettes.gray;
|
|
51
|
+
// For soft variant background/text, use gray as default
|
|
52
|
+
const paletteKey = color ?? 'gray';
|
|
53
|
+
// For focus outline, use accent as default
|
|
54
|
+
const focusPalette = colors.palettes[color ?? 'accent'] ?? gray;
|
|
51
55
|
const sizeStyle = getTextAreaSizeStyle(size);
|
|
52
56
|
const disabled = editable === false;
|
|
53
57
|
const [focused, setFocused] = React.useState(false);
|
|
54
58
|
// Variant styles
|
|
55
59
|
let variantStyle = variant === 'surface'
|
|
56
60
|
? getSurfaceVariantStyle(colors)
|
|
57
|
-
: getSoftVariantStyle(colors,
|
|
61
|
+
: getSoftVariantStyle(colors, paletteKey);
|
|
58
62
|
// Apply disabled styles (surface keeps border, soft replaces background)
|
|
59
63
|
if (disabled) {
|
|
60
64
|
if (variant === 'surface') {
|
|
@@ -69,15 +73,15 @@ function TextArea({ size = '2', variant = 'surface', color = 'gray', style, edit
|
|
|
69
73
|
variantStyle = getDisabledSoftStyle(colors);
|
|
70
74
|
}
|
|
71
75
|
}
|
|
72
|
-
// Focus outline (web only)
|
|
76
|
+
// Focus outline (web only) - uses accent color by default
|
|
73
77
|
const focusStyle = focused && !disabled && Platform.OS === 'web'
|
|
74
78
|
? {
|
|
75
|
-
outline: `2px solid ${
|
|
79
|
+
outline: `2px solid ${focusPalette.a8}`,
|
|
76
80
|
outlineOffset: -1,
|
|
77
81
|
}
|
|
78
82
|
: undefined;
|
|
79
83
|
// Text and placeholder colors
|
|
80
|
-
const { textColor, placeholderColor } = getTextInputColors(variant, colors,
|
|
84
|
+
const { textColor, placeholderColor } = getTextInputColors(variant, colors, paletteKey, disabled);
|
|
81
85
|
const rootStyle = {
|
|
82
86
|
flexDirection: 'column',
|
|
83
87
|
minHeight: sizeStyle.minHeight,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../src/components/text-area.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,sBAAsB,EACtB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../src/components/text-area.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/components/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/components/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,SAAS,EAGT,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAMtB,KAAK,aAAa,GAAG,aAAa,CAAC;AACnC,KAAK,gBAAgB,GAAG,gBAAgB,CAAC;AA2DzC,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,iBAAS,aAAa,CAAC,EACrB,IAAU,EACV,OAAmB,EACnB,KAAK,EACL,QAAgB,EAChB,OAAO,EAAE,WAAW,EACpB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,qBA4IpB;AAMD,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,4BAiC9E;AAMD,UAAU,mBAAoB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IACjE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,uFAyHnB,CAAC;AAOF,QAAA,MAAM,SAAS;;;;CAId,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC;AACnE,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EAClB,gBAAgB,GACjB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { getDisabledSoftStyle, getDisabledSurfaceStyle, getSoftVariantStyle, getSurfaceVariantStyle, getTextInputColors, hexToRgba,
|
|
2
|
-
import {
|
|
1
|
+
import { getDisabledSoftStyle, getDisabledSurfaceStyle, getSoftVariantStyle, getSurfaceVariantStyle, getTextInputColors, hexToRgba, } from '../lib/text-input-styles';
|
|
2
|
+
import { useThemeTokens } from '../lib/use-theme-tokens';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { Platform, TextInput, View, } from 'react-native';
|
|
5
5
|
const TextFieldContext = React.createContext(undefined);
|
|
@@ -29,9 +29,13 @@ function getSlotPadding(size) {
|
|
|
29
29
|
return 12;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
-
function TextFieldRoot({ size = '2', variant = 'surface', color
|
|
33
|
-
const { colors } =
|
|
34
|
-
const
|
|
32
|
+
function TextFieldRoot({ size = '2', variant = 'surface', color, disabled = false, focused: focusedProp, style, children, ...props }) {
|
|
33
|
+
const { colors } = useThemeTokens();
|
|
34
|
+
const gray = colors.palettes.gray;
|
|
35
|
+
// For soft variant background/text, use gray as default
|
|
36
|
+
const paletteKey = color ?? 'gray';
|
|
37
|
+
// For focus outline, use accent as default
|
|
38
|
+
const focusPalette = colors.palettes[color ?? 'accent'] ?? gray;
|
|
35
39
|
const [internalFocused, setInternalFocused] = React.useState(false);
|
|
36
40
|
const focused = focusedProp !== undefined ? focusedProp : internalFocused;
|
|
37
41
|
const inputRef = React.useRef(null);
|
|
@@ -39,7 +43,7 @@ function TextFieldRoot({ size = '2', variant = 'surface', color = 'gray', disabl
|
|
|
39
43
|
// Background and border based on variant
|
|
40
44
|
let variantStyle = variant === 'surface'
|
|
41
45
|
? getSurfaceVariantStyle(colors)
|
|
42
|
-
: getSoftVariantStyle(colors,
|
|
46
|
+
: getSoftVariantStyle(colors, paletteKey);
|
|
43
47
|
// Apply disabled styles (surface keeps border, soft replaces background)
|
|
44
48
|
if (disabled) {
|
|
45
49
|
if (variant === 'surface') {
|
|
@@ -54,10 +58,10 @@ function TextFieldRoot({ size = '2', variant = 'surface', color = 'gray', disabl
|
|
|
54
58
|
variantStyle = getDisabledSoftStyle(colors);
|
|
55
59
|
}
|
|
56
60
|
}
|
|
57
|
-
// Focus outline (web only)
|
|
61
|
+
// Focus outline (web only) - uses accent color by default
|
|
58
62
|
const focusStyle = focused && !disabled && Platform.OS === 'web'
|
|
59
63
|
? {
|
|
60
|
-
outline: `2px solid ${
|
|
64
|
+
outline: `2px solid ${focusPalette.a8}`,
|
|
61
65
|
outlineOffset: -1,
|
|
62
66
|
}
|
|
63
67
|
: undefined;
|
|
@@ -123,7 +127,7 @@ function TextFieldRoot({ size = '2', variant = 'surface', color = 'gray', disabl
|
|
|
123
127
|
return (<TextFieldContext.Provider value={{
|
|
124
128
|
size,
|
|
125
129
|
variant,
|
|
126
|
-
color:
|
|
130
|
+
color: paletteKey,
|
|
127
131
|
disabled,
|
|
128
132
|
inputRef,
|
|
129
133
|
onFocus: () => setInternalFocused(true),
|
|
@@ -138,9 +142,8 @@ function TextFieldRoot({ size = '2', variant = 'surface', color = 'gray', disabl
|
|
|
138
142
|
}
|
|
139
143
|
function TextFieldSlot({ color, style, children, ...props }) {
|
|
140
144
|
const context = React.useContext(TextFieldContext);
|
|
141
|
-
const { colors } =
|
|
142
|
-
const
|
|
143
|
-
const slotColor = accentColor ? colors.palettes[accentColor].a11 : colors.palettes.gray.a11;
|
|
145
|
+
const { colors } = useThemeTokens();
|
|
146
|
+
const slotColor = color ? colors.palettes[color].a11 : colors.palettes.gray.a11;
|
|
144
147
|
const padding = getSlotPadding(context?.size ?? '2');
|
|
145
148
|
const slotStyle = {
|
|
146
149
|
flexShrink: 0,
|
|
@@ -167,10 +170,12 @@ function TextFieldSlot({ color, style, children, ...props }) {
|
|
|
167
170
|
}
|
|
168
171
|
const TextFieldInput = React.forwardRef(({ size: sizeProp, variant: variantProp, color: colorProp, style, editable, ...props }, forwardedRef) => {
|
|
169
172
|
const context = React.useContext(TextFieldContext);
|
|
170
|
-
const { colors } =
|
|
173
|
+
const { colors } = useThemeTokens();
|
|
171
174
|
const size = sizeProp ?? context?.size ?? '2';
|
|
172
175
|
const variant = variantProp ?? context?.variant ?? 'surface';
|
|
173
|
-
|
|
176
|
+
// Keep color undefined if not explicitly set, so TextFieldRoot uses accent for focus
|
|
177
|
+
const color = colorProp ?? context?.color;
|
|
178
|
+
const colorForStyles = color ?? 'gray';
|
|
174
179
|
const disabled = editable === false || context?.disabled;
|
|
175
180
|
// Create a callback ref that sets all necessary refs
|
|
176
181
|
const setRefs = React.useCallback((instance) => {
|
|
@@ -191,9 +196,9 @@ const TextFieldInput = React.forwardRef(({ size: sizeProp, variant: variantProp,
|
|
|
191
196
|
const sizeStyle = getSizeStyle(size);
|
|
192
197
|
// Text and placeholder colors based on variant and disabled state
|
|
193
198
|
// TextField uses 0.6 opacity for soft variant placeholder (TextArea uses 0.65)
|
|
194
|
-
const { textColor, placeholderColor: basePlaceholderColor } = getTextInputColors(variant, colors,
|
|
199
|
+
const { textColor, placeholderColor: basePlaceholderColor } = getTextInputColors(variant, colors, colorForStyles, disabled);
|
|
195
200
|
const placeholderColor = variant === 'soft' && !disabled
|
|
196
|
-
? hexToRgba(colors.palettes[
|
|
201
|
+
? hexToRgba(colors.palettes[colorForStyles]['12'], 0.6)
|
|
197
202
|
: basePlaceholderColor;
|
|
198
203
|
// Account for border height: surface variant has 1px border top and bottom (2px total)
|
|
199
204
|
const inputHeight = variant === 'surface' ? sizeStyle.height - 2 : sizeStyle.height;
|
|
@@ -239,6 +244,7 @@ const TextFieldInput = React.forwardRef(({ size: sizeProp, variant: variantProp,
|
|
|
239
244
|
return input;
|
|
240
245
|
}
|
|
241
246
|
// When no root, create one with focus state management
|
|
247
|
+
// Pass color only if explicitly set, so TextFieldRoot uses accent for focus by default
|
|
242
248
|
return (<TextFieldRoot size={size} variant={variant} color={color} disabled={disabled} focused={localFocused}>
|
|
243
249
|
{input}
|
|
244
250
|
</TextFieldRoot>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/components/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,sBAAsB,EACtB,kBAAkB,EAClB,SAAS,
|
|
1
|
+
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/components/text-field.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { themeTokens } from '../lib/theme-tokens';
|
|
2
2
|
import type { AccentColor } from '../lib/types';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { Text as RNText } from 'react-native';
|
|
5
|
-
type TextSize = keyof typeof
|
|
6
|
-
type TextWeight = keyof typeof
|
|
5
|
+
type TextSize = keyof typeof themeTokens.typography;
|
|
6
|
+
type TextWeight = keyof typeof themeTokens.fontWeights;
|
|
7
7
|
type TextProps = Omit<React.ComponentProps<typeof RNText>, 'size' | 'weight' | 'color'> & {
|
|
8
8
|
asChild?: boolean;
|
|
9
9
|
size?: TextSize;
|
|
@@ -17,7 +17,7 @@ type TextStyleContextValue = {
|
|
|
17
17
|
color?: string;
|
|
18
18
|
};
|
|
19
19
|
declare const TextStyleContext: React.Context<TextStyleContextValue | undefined>;
|
|
20
|
-
declare function Text({
|
|
20
|
+
declare function Text({ asChild, size, weight, color, role, style, ...props }: TextProps): React.JSX.Element;
|
|
21
21
|
export { Text, TextClassContext, TextStyleContext };
|
|
22
22
|
export type { TextProps, TextSize };
|
|
23
23
|
//# sourceMappingURL=text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAE9C,KAAK,QAAQ,GAAG,MAAM,OAAO,WAAW,CAAC,UAAU,CAAC;AACpD,KAAK,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC,WAAW,CAAC;AAEvD,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,gBAAgB,mCAAqD,CAAC;AAC5E,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,gBAAgB,kDAAoE,CAAC;AAE3F,iBAAS,IAAI,CAAC,EAAE,OAAe,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAkCvF;AAED,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AACpD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC"}
|
package/dist/components/text.js
CHANGED
|
@@ -1,21 +1,23 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { cn } from '../lib/utils';
|
|
1
|
+
import { useThemeTokens } from '../lib/use-theme-tokens';
|
|
3
2
|
import * as Slot from '@rn-primitives/slot';
|
|
4
3
|
import * as React from 'react';
|
|
5
4
|
import { Text as RNText } from 'react-native';
|
|
6
5
|
const TextClassContext = React.createContext(undefined);
|
|
7
6
|
const TextStyleContext = React.createContext(undefined);
|
|
8
|
-
function Text({
|
|
9
|
-
const { colors, typography, fontWeights } =
|
|
7
|
+
function Text({ asChild = false, size, weight, color, role, style, ...props }) {
|
|
8
|
+
const { colors, typography, fontWeights } = useThemeTokens();
|
|
10
9
|
const textStyleContext = React.useContext(TextStyleContext);
|
|
11
10
|
const Component = asChild ? Slot.Text : RNText;
|
|
12
11
|
const effectiveSize = size ?? textStyleContext?.size;
|
|
13
12
|
const effectiveWeight = weight ?? textStyleContext?.weight;
|
|
14
|
-
//
|
|
15
|
-
//
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
// Resolve text color:
|
|
14
|
+
// 1. If color prop is set, use that palette's shade 11
|
|
15
|
+
// 2. If context provides a color, use that
|
|
16
|
+
// 3. Otherwise, use default foreground color (gray-12)
|
|
17
|
+
const gray = colors.palettes.gray;
|
|
18
|
+
const resolvedColor = color
|
|
19
|
+
? (colors.palettes[color] ?? gray)['11']
|
|
20
|
+
: (textStyleContext?.color ?? gray['12']);
|
|
19
21
|
const typo = effectiveSize ? typography[effectiveSize] : undefined;
|
|
20
22
|
const fontWeightValue = effectiveWeight ? fontWeights[effectiveWeight] : undefined;
|
|
21
23
|
const typographyStyle = typo
|
|
@@ -27,7 +29,7 @@ function Text({ className, asChild = false, size, weight, color, role, style, ..
|
|
|
27
29
|
: undefined;
|
|
28
30
|
const colorStyle = { color: resolvedColor };
|
|
29
31
|
const weightStyle = fontWeightValue ? { fontWeight: fontWeightValue } : undefined;
|
|
30
|
-
return (<Component
|
|
32
|
+
return (<Component style={[typographyStyle, weightStyle, colorStyle, style]} role={role} {...props}/>);
|
|
31
33
|
}
|
|
32
34
|
export { Text, TextClassContext, TextStyleContext };
|
|
33
35
|
//# sourceMappingURL=text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,IAAI,MAAM,qBAAqB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAY9C,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAqB,SAAS,CAAC,CAAC;AAO5E,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAoC,SAAS,CAAC,CAAC;AAE3F,SAAS,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAa;IACtF,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IAC7D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAE/C,MAAM,aAAa,GAAG,IAAI,IAAI,gBAAgB,EAAE,IAAI,CAAC;IACrD,MAAM,eAAe,GAAG,MAAM,IAAI,gBAAgB,EAAE,MAAM,CAAC;IAE3D,sBAAsB;IACtB,uDAAuD;IACvD,2CAA2C;IAC3C,uDAAuD;IACvD,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;IAClC,MAAM,aAAa,GAAG,KAAK;QACzB,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;QACxC,CAAC,CAAC,CAAC,gBAAgB,EAAE,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAE5C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACnE,MAAM,eAAe,GAAG,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnF,MAAM,eAAe,GAAG,IAAI;QAC1B,CAAC,CAAC;YACE,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;IAC5C,MAAM,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAElF,OAAO,CACL,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAC/F,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NativeOnlyAnimatedView } from '../components/native-only-animated-view';
|
|
2
2
|
import { Text } from '../components/text';
|
|
3
|
-
import {
|
|
3
|
+
import { useThemeTokens } from '../lib/use-theme-tokens';
|
|
4
4
|
import * as TooltipPrimitive from '@rn-primitives/tooltip';
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import { Platform, StyleSheet, View } from 'react-native';
|
|
@@ -12,7 +12,7 @@ const FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fr
|
|
|
12
12
|
* Uses reversed theme appearance (light mode shows dark tooltip, dark mode shows light tooltip).
|
|
13
13
|
*/
|
|
14
14
|
function Tooltip({ children, content, delayDuration = 400, sideOffset = 4, side = 'top', portalHost, ...rootProps }) {
|
|
15
|
-
const { invertedColors } =
|
|
15
|
+
const { invertedColors } = useThemeTokens();
|
|
16
16
|
// Use inverted theme colors - tooltip shows opposite of current theme
|
|
17
17
|
const backgroundColor = invertedColors.background;
|
|
18
18
|
const textColor = invertedColors.palettes.gray['12'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
export * from './components';
|
|
2
|
+
export { isSemanticColor, resolveAccentFromColor } from './lib/color-utils';
|
|
2
3
|
export * from './lib/types';
|
|
3
|
-
export * from './lib/use-theme-
|
|
4
|
+
export * from './lib/use-theme-tokens';
|
|
5
|
+
export { defaultSemanticColors, ThemeProvider, useTheme } from './lib/theme-context';
|
|
6
|
+
export type { ColorScheme, DangerColor, InfoColor, SemanticColorConfig, SuccessColor, ThemeContextValue, ThemeProviderProps, WarningColor, } from './lib/theme-context';
|
|
7
|
+
export { NAV_THEME, useNavTheme } from './lib/theme';
|
|
8
|
+
export { PortalHost } from '@rn-primitives/portal';
|
|
4
9
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,cAAc,CAAC;AAI7B,cAAc,aAAa,CAAC;AAC5B,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,cAAc,CAAC;AAI7B,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AAIvC,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACrF,YAAY,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,YAAY,GACb,MAAM,qBAAqB,CAAC;AAI7B,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAIrD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
export * from './components';
|
|
4
4
|
// UTILITIES
|
|
5
5
|
//------------------------------------------------------------------------------
|
|
6
|
+
export { isSemanticColor, resolveAccentFromColor } from './lib/color-utils';
|
|
6
7
|
export * from './lib/types';
|
|
7
|
-
export * from './lib/use-theme-
|
|
8
|
+
export * from './lib/use-theme-tokens';
|
|
9
|
+
// THEME
|
|
10
|
+
//------------------------------------------------------------------------------
|
|
11
|
+
export { defaultSemanticColors, ThemeProvider, useTheme } from './lib/theme-context';
|
|
12
|
+
// NAVIGATION
|
|
13
|
+
//------------------------------------------------------------------------------
|
|
14
|
+
export { NAV_THEME, useNavTheme } from './lib/theme';
|
|
15
|
+
// PORTAL
|
|
16
|
+
//------------------------------------------------------------------------------
|
|
17
|
+
export { PortalHost } from '@rn-primitives/portal';
|
|
8
18
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,gFAAgF;AAChF,cAAc,cAAc,CAAC;AAE7B,YAAY;AACZ,gFAAgF;AAChF,cAAc,aAAa,CAAC;AAC5B,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,gFAAgF;AAChF,cAAc,cAAc,CAAC;AAE7B,YAAY;AACZ,gFAAgF;AAChF,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AAEvC,QAAQ;AACR,gFAAgF;AAChF,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAYrF,aAAa;AACb,gFAAgF;AAChF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAErD,SAAS;AACT,gFAAgF;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useThemeVars } from '../lib/use-theme-vars';
|
|
1
|
+
import { useThemeTokens } from '../lib/use-theme-tokens';
|
|
3
2
|
import type { ViewStyle } from 'react-native';
|
|
4
3
|
export type ButtonSize = '1' | '2' | '3' | '4';
|
|
5
4
|
export type ButtonVariant = 'solid' | 'soft' | 'surface' | 'ghost';
|
|
6
|
-
|
|
5
|
+
type Palette = ReturnType<typeof useThemeTokens>['colors']['palettes']['gray'];
|
|
7
6
|
export declare function getButtonSizeStyle(size: ButtonSize, isIconButton?: boolean): ViewStyle;
|
|
8
|
-
export declare function getButtonVariantStyle(variant: ButtonVariant, colors: ReturnType<typeof
|
|
7
|
+
export declare function getButtonVariantStyle(variant: ButtonVariant, colors: ReturnType<typeof useThemeTokens>['colors'], palette: Palette, gray: Palette, disabled: boolean, pressed: boolean, hovered: boolean): ViewStyle;
|
|
9
8
|
export declare function getButtonShadowStyle(variant: ButtonVariant, disabled: boolean, pressed: boolean): ViewStyle | undefined;
|
|
10
|
-
export declare function getButtonFocusStyle(palette:
|
|
9
|
+
export declare function getButtonFocusStyle(palette: Palette, focused: boolean, disabled: boolean): ViewStyle | undefined;
|
|
11
10
|
export declare function getButtonPressedFilter(variant: ButtonVariant, pressed: boolean, disabled: boolean): ViewStyle | undefined;
|
|
12
|
-
export declare function getButtonTextColor(variant: ButtonVariant, palette:
|
|
11
|
+
export declare function getButtonTextColor(variant: ButtonVariant, palette: Palette, gray: Palette, disabled: boolean): string;
|
|
12
|
+
export {};
|
|
13
13
|
//# sourceMappingURL=button-styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../../src/lib/button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../../src/lib/button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAC/C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAGnE,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/E,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,UAAQ,GAAG,SAAS,CA+BpF;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,EACnD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,GACf,SAAS,CA+CX;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,OAAO,GACf,SAAS,GAAG,SAAS,CAWvB;AAED,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,GAChB,SAAS,GAAG,SAAS,CAUvB;AAED,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,GAChB,SAAS,GAAG,SAAS,CAKvB;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,OAAO,GAChB,MAAM,CAQR"}
|
|
@@ -1,20 +1,4 @@
|
|
|
1
1
|
import { Platform } from 'react-native';
|
|
2
|
-
export function resolveAccentFromColor(color) {
|
|
3
|
-
if (!color)
|
|
4
|
-
return 'blue';
|
|
5
|
-
switch (color) {
|
|
6
|
-
case 'danger':
|
|
7
|
-
return 'red';
|
|
8
|
-
case 'warning':
|
|
9
|
-
return 'amber';
|
|
10
|
-
case 'success':
|
|
11
|
-
return 'green';
|
|
12
|
-
case 'info':
|
|
13
|
-
return 'blue';
|
|
14
|
-
default:
|
|
15
|
-
return color;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
2
|
export function getButtonSizeStyle(size, isIconButton = false) {
|
|
19
3
|
// Based on web CSS:
|
|
20
4
|
// Size 1: height=space-5(24), gap=space-1(4), padding=space-2(8), radius=6
|
|
@@ -75,7 +59,7 @@ export function getButtonVariantStyle(variant, colors, palette, gray, disabled,
|
|
|
75
59
|
// Default: panelSolid bg, gray-a5 border (stroke), outer shadow
|
|
76
60
|
// Hover: same bg, gray-a7 border, outer shadow
|
|
77
61
|
// Pressed: gray-a3 bg, gray-a6 border, no outer shadow
|
|
78
|
-
backgroundColor = pressed ? gray
|
|
62
|
+
backgroundColor = pressed ? gray['3'] : colors.panelSolid;
|
|
79
63
|
borderColor = pressed ? gray.a6 : hovered ? gray.a7 : gray.a5;
|
|
80
64
|
borderWidth = 1;
|
|
81
65
|
break;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-styles.js","sourceRoot":"","sources":["../../src/lib/button-styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"button-styles.js","sourceRoot":"","sources":["../../src/lib/button-styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,21 +1,26 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import type { AccentColor } from './types';
|
|
1
|
+
import { type SemanticColorConfig } from './theme-context';
|
|
2
|
+
import type { AccentColor, Color, SemanticColor } from './types';
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
4
|
+
* Resolves a Color (which can be an AccentColor or SemanticColor) to an AccentColor.
|
|
5
|
+
* Semantic colors are resolved using the provided semantic color configuration.
|
|
6
|
+
*
|
|
7
|
+
* @param color - The color to resolve (can be 'danger', 'warning', 'success', 'info', or any AccentColor)
|
|
8
|
+
* @param semanticColors - The semantic color configuration from ThemeProvider (optional, uses defaults if not provided)
|
|
9
|
+
* @param defaultColor - The default color to return if no color is provided (defaults to 'blue')
|
|
10
|
+
* @returns The resolved AccentColor
|
|
11
|
+
*/
|
|
12
|
+
export declare function resolveAccentFromColor(color: Color | undefined, semanticColors?: SemanticColorConfig, defaultColor?: AccentColor): AccentColor;
|
|
13
|
+
/**
|
|
14
|
+
* Checks if a color is a semantic color.
|
|
8
15
|
*/
|
|
9
|
-
export declare
|
|
16
|
+
export declare function isSemanticColor(color: Color): color is SemanticColor;
|
|
10
17
|
/**
|
|
11
|
-
*
|
|
12
|
-
*
|
|
18
|
+
* Hook that returns a function to resolve colors using the current theme's semantic color configuration.
|
|
19
|
+
* Use this in components to properly respect ThemeProvider's color settings.
|
|
13
20
|
*
|
|
14
21
|
* @example
|
|
15
|
-
* const
|
|
16
|
-
*
|
|
17
|
-
* <Text className="text-accent-11">This will be yellow-11</Text>
|
|
18
|
-
* </View>
|
|
22
|
+
* const resolveColor = useResolveColor();
|
|
23
|
+
* const accentColor = resolveColor(props.color); // Respects ThemeProvider config
|
|
19
24
|
*/
|
|
20
|
-
export declare function
|
|
25
|
+
export declare function useResolveColor(): (color: Color | undefined, defaultColor?: AccentColor) => AccentColor;
|
|
21
26
|
//# sourceMappingURL=color-utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../src/lib/color-utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../src/lib/color-utils.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEjE;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,GAAG,SAAS,EACxB,cAAc,GAAE,mBAA2C,EAC3D,YAAY,GAAE,WAAoB,GACjC,WAAW,CAiBb;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,IAAI,aAAa,CAEpE;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,YAKjB,KAAK,GAAG,SAAS,iBAAgB,WAAW,KAAY,WAAW,CAIhF"}
|