@salt-ds/core 1.27.1 → 1.28.1
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/css/salt-core.css +87 -44
- package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +4 -1
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/checkbox/Checkbox.css.js +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-cjs/dialog/Dialog.css.js +1 -1
- package/dist-cjs/dialog/DialogContent.css.js +1 -1
- package/dist-cjs/form-field/FormField.js +0 -2
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/index.js +4 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
- package/dist-cjs/pill-input/PillInput.css.js +1 -1
- package/dist-cjs/radio-button/RadioButton.css.js +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +34 -10
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.css.js +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.css.js +1 -1
- package/dist-cjs/text/Code.js +1 -1
- package/dist-cjs/text/Code.js.map +1 -1
- package/dist-cjs/text/Display.js +3 -3
- package/dist-cjs/text/Display.js.map +1 -1
- package/dist-cjs/text/Text.css.js +1 -1
- package/dist-cjs/text/Text.js +39 -41
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/text/TextAction.js +1 -1
- package/dist-cjs/text/TextAction.js.map +1 -1
- package/dist-cjs/text/TextNotation.js +1 -1
- package/dist-cjs/text/TextNotation.js.map +1 -1
- package/dist-cjs/theme/Accent.js +8 -0
- package/dist-cjs/theme/Accent.js.map +1 -0
- package/dist-cjs/theme/HeadingFont.js +8 -0
- package/dist-cjs/theme/HeadingFont.js.map +1 -0
- package/dist-cjs/toast/Toast.css.js +1 -1
- package/dist-cjs/toast/Toast.js +7 -3
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
- package/dist-es/accordion/AccordionHeader.css.js +1 -1
- package/dist-es/accordion/AccordionHeader.js +4 -1
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/checkbox/Checkbox.css.js +1 -1
- package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-es/dialog/Dialog.css.js +1 -1
- package/dist-es/dialog/DialogContent.css.js +1 -1
- package/dist-es/form-field/FormField.js +0 -2
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/index.js +2 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +1 -1
- package/dist-es/pill-input/PillInput.css.js +1 -1
- package/dist-es/radio-button/RadioButton.css.js +1 -1
- package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-es/salt-provider/SaltProvider.js +34 -10
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js +1 -1
- package/dist-es/status-adornment/StatusAdornment.css.js +1 -1
- package/dist-es/status-indicator/StatusIndicator.css.js +1 -1
- package/dist-es/text/Code.js +1 -1
- package/dist-es/text/Code.js.map +1 -1
- package/dist-es/text/Display.js +3 -3
- package/dist-es/text/Display.js.map +1 -1
- package/dist-es/text/Text.css.js +1 -1
- package/dist-es/text/Text.js +39 -41
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/text/TextAction.js +1 -1
- package/dist-es/text/TextAction.js.map +1 -1
- package/dist-es/text/TextNotation.js +1 -1
- package/dist-es/text/TextNotation.js.map +1 -1
- package/dist-es/theme/Accent.js +4 -0
- package/dist-es/theme/Accent.js.map +1 -0
- package/dist-es/theme/HeadingFont.js +4 -0
- package/dist-es/theme/HeadingFont.js.map +1 -0
- package/dist-es/toast/Toast.css.js +1 -1
- package/dist-es/toast/Toast.js +7 -3
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.css.js +1 -1
- package/dist-types/aria-announcer/AriaAnnouncerProvider.d.ts +1 -1
- package/dist-types/breakpoints/BreakpointProvider.d.ts +1 -1
- package/dist-types/dialog/Dialog.d.ts +1 -1
- package/dist-types/form-field/FormFieldHelperText.d.ts +1 -1
- package/dist-types/form-field/FormFieldLabel.d.ts +1 -1
- package/dist-types/menu/Menu.d.ts +1 -1
- package/dist-types/menu/MenuBase.d.ts +1 -1
- package/dist-types/menu/MenuTrigger.d.ts +1 -1
- package/dist-types/navigation-item/ConditionalWrapper.d.ts +1 -1
- package/dist-types/navigation-item/ExpansionIcon.d.ts +1 -1
- package/dist-types/overlay/Overlay.d.ts +1 -1
- package/dist-types/overlay/OverlayTrigger.d.ts +1 -1
- package/dist-types/pagination/PageRanges.d.ts +1 -1
- package/dist-types/radio-button/RadioButtonIcon.d.ts +1 -1
- package/dist-types/salt-provider/SaltProvider.d.ts +8 -2
- package/dist-types/spinner/svgSpinners/SpinnerSVG.d.ts +1 -1
- package/dist-types/text/Text.d.ts +2 -1
- package/dist-types/theme/Accent.d.ts +2 -0
- package/dist-types/theme/HeadingFont.d.ts +2 -0
- package/dist-types/theme/index.d.ts +2 -0
- package/dist-types/tooltip/TooltipBase.d.ts +1 -1
- package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +2 -2
- package/dist-types/viewport/ViewportProvider.d.ts +1 -1
- package/package.json +2 -2
|
@@ -109,12 +109,16 @@ const DEFAULT_THEME_NAME = "salt-theme";
|
|
|
109
109
|
const UNSTABLE_ADDITIONAL_THEME_NAME = "salt-theme-next";
|
|
110
110
|
const DEFAULT_MODE = "light";
|
|
111
111
|
const DEFAULT_CORNER = "sharp";
|
|
112
|
+
const DEFAULT_HEADING_FONT = "Open Sans";
|
|
113
|
+
const DEFAULT_ACCENT = "blue";
|
|
112
114
|
const DensityContext = createContext(DEFAULT_DENSITY);
|
|
113
115
|
const ThemeContext = createContext({
|
|
114
116
|
theme: "",
|
|
115
117
|
mode: DEFAULT_MODE,
|
|
116
118
|
themeNext: false,
|
|
117
|
-
UNSTABLE_corner: DEFAULT_CORNER
|
|
119
|
+
UNSTABLE_corner: DEFAULT_CORNER,
|
|
120
|
+
UNSTABLE_headingFont: DEFAULT_HEADING_FONT,
|
|
121
|
+
UNSTABLE_accent: DEFAULT_ACCENT
|
|
118
122
|
});
|
|
119
123
|
const BreakpointContext = createContext(DEFAULT_BREAKPOINTS);
|
|
120
124
|
const getThemeNames = (themeName, themeNext) => {
|
|
@@ -133,12 +137,16 @@ const createThemedChildren = ({
|
|
|
133
137
|
mode,
|
|
134
138
|
applyClassesTo,
|
|
135
139
|
themeNext,
|
|
136
|
-
corner
|
|
140
|
+
corner,
|
|
141
|
+
headingFont,
|
|
142
|
+
accent
|
|
137
143
|
}) => {
|
|
138
144
|
var _a;
|
|
139
145
|
const themeNames = getThemeNames(themeName, themeNext);
|
|
140
146
|
const themeNextProps = {
|
|
141
|
-
"data-corner": corner
|
|
147
|
+
"data-corner": corner,
|
|
148
|
+
"data-heading-font": headingFont,
|
|
149
|
+
"data-accent": accent
|
|
142
150
|
};
|
|
143
151
|
if (applyClassesTo === "root") {
|
|
144
152
|
return children;
|
|
@@ -183,15 +191,19 @@ function InternalSaltProvider({
|
|
|
183
191
|
mode: modeProp,
|
|
184
192
|
breakpoints: breakpointsProp,
|
|
185
193
|
themeNext,
|
|
186
|
-
corner: cornerProp
|
|
194
|
+
corner: cornerProp,
|
|
195
|
+
headingFont: headingFontProp,
|
|
196
|
+
accent: accentProp
|
|
187
197
|
}) {
|
|
188
|
-
var _a, _b;
|
|
198
|
+
var _a, _b, _c, _d;
|
|
189
199
|
const inheritedDensity = useContext(DensityContext);
|
|
190
200
|
const {
|
|
191
201
|
theme: inheritedTheme,
|
|
192
202
|
mode: inheritedMode,
|
|
193
203
|
window: inheritedWindow,
|
|
194
|
-
UNSTABLE_corner: inheritedCorner
|
|
204
|
+
UNSTABLE_corner: inheritedCorner,
|
|
205
|
+
UNSTABLE_headingFont: inheritedHeadingFont,
|
|
206
|
+
UNSTABLE_accent: inheritedAccent
|
|
195
207
|
} = useContext(ThemeContext);
|
|
196
208
|
const isRootProvider = inheritedTheme === void 0 || inheritedTheme === "";
|
|
197
209
|
const density = (_a = densityProp != null ? densityProp : inheritedDensity) != null ? _a : DEFAULT_DENSITY;
|
|
@@ -199,6 +211,8 @@ function InternalSaltProvider({
|
|
|
199
211
|
const mode = modeProp != null ? modeProp : inheritedMode;
|
|
200
212
|
const breakpoints = breakpointsProp != null ? breakpointsProp : DEFAULT_BREAKPOINTS;
|
|
201
213
|
const corner = (_b = cornerProp != null ? cornerProp : inheritedCorner) != null ? _b : DEFAULT_CORNER;
|
|
214
|
+
const headingFont = (_c = headingFontProp != null ? headingFontProp : inheritedHeadingFont) != null ? _c : DEFAULT_HEADING_FONT;
|
|
215
|
+
const accent = (_d = accentProp != null ? accentProp : inheritedAccent) != null ? _d : DEFAULT_ACCENT;
|
|
202
216
|
const applyClassesTo = applyClassesToProp != null ? applyClassesToProp : isRootProvider ? "root" : "scope";
|
|
203
217
|
const targetWindow = useWindow();
|
|
204
218
|
useComponentCssInjection({
|
|
@@ -212,9 +226,11 @@ function InternalSaltProvider({
|
|
|
212
226
|
mode,
|
|
213
227
|
window: targetWindow,
|
|
214
228
|
themeNext: Boolean(themeNext),
|
|
215
|
-
UNSTABLE_corner: corner
|
|
229
|
+
UNSTABLE_corner: corner,
|
|
230
|
+
UNSTABLE_headingFont: headingFont,
|
|
231
|
+
UNSTABLE_accent: accent
|
|
216
232
|
}),
|
|
217
|
-
[themeName, mode, targetWindow, themeNext, corner]
|
|
233
|
+
[themeName, mode, targetWindow, themeNext, corner, headingFont, accent]
|
|
218
234
|
);
|
|
219
235
|
const themedChildren = createThemedChildren({
|
|
220
236
|
children,
|
|
@@ -223,7 +239,9 @@ function InternalSaltProvider({
|
|
|
223
239
|
mode,
|
|
224
240
|
applyClassesTo,
|
|
225
241
|
themeNext,
|
|
226
|
-
corner
|
|
242
|
+
corner,
|
|
243
|
+
headingFont,
|
|
244
|
+
accent
|
|
227
245
|
});
|
|
228
246
|
useIsomorphicLayoutEffect(() => {
|
|
229
247
|
const themeNames = getThemeNames(themeName, themeNext);
|
|
@@ -236,6 +254,8 @@ function InternalSaltProvider({
|
|
|
236
254
|
targetWindow.document.documentElement.dataset.mode = mode;
|
|
237
255
|
if (themeNext) {
|
|
238
256
|
targetWindow.document.documentElement.dataset.corner = corner;
|
|
257
|
+
targetWindow.document.documentElement.dataset.headingFont = headingFont;
|
|
258
|
+
targetWindow.document.documentElement.dataset.accent = accent;
|
|
239
259
|
}
|
|
240
260
|
} else {
|
|
241
261
|
console.warn(
|
|
@@ -252,6 +272,8 @@ function InternalSaltProvider({
|
|
|
252
272
|
targetWindow.document.documentElement.dataset.mode = void 0;
|
|
253
273
|
if (themeNext) {
|
|
254
274
|
delete targetWindow.document.documentElement.dataset.corner;
|
|
275
|
+
delete targetWindow.document.documentElement.dataset.headingFont;
|
|
276
|
+
delete targetWindow.document.documentElement.dataset.accent;
|
|
255
277
|
}
|
|
256
278
|
}
|
|
257
279
|
};
|
|
@@ -263,7 +285,9 @@ function InternalSaltProvider({
|
|
|
263
285
|
targetWindow,
|
|
264
286
|
inheritedWindow,
|
|
265
287
|
themeNext,
|
|
266
|
-
corner
|
|
288
|
+
corner,
|
|
289
|
+
headingFont,
|
|
290
|
+
accent
|
|
267
291
|
]);
|
|
268
292
|
const matchedBreakpoints = useMatchedBreakpoints(breakpoints);
|
|
269
293
|
const saltProvider = /* @__PURE__ */ jsx(DensityContext.Provider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n Breakpoints,\n DEFAULT_BREAKPOINTS,\n BreakpointProvider,\n useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow, WindowContextType } from \"@salt-ds/window\";\nimport {\n useComponentCssInjection,\n StyleInjectionProvider,\n} from \"@salt-ds/styles\";\nimport { UNSTABLE_Corner } from \"../theme/Corner\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst UNSTABLE_ADDITIONAL_THEME_NAME = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: UNSTABLE_Corner = \"sharp\";\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n window?: WindowContextType;\n /** Only available when using SaltProviderNext. */\n themeNext: boolean;\n UNSTABLE_corner: UNSTABLE_Corner;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n themeNext: false,\n UNSTABLE_corner: DEFAULT_CORNER,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (themeName: ThemeName, themeNext?: boolean) => {\n if (themeNext) {\n return themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME]\n : [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME, themeName];\n } else {\n {\n return themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n }\n }\n};\n\ninterface ThemeNextProps {\n themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner,\n}: {\n children: ReactNode;\n themeName: ThemeName;\n density: Density;\n mode: Mode;\n applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n UNSTABLE_SaltProviderNextAdditionalProps) => {\n const themeNames = getThemeNames(themeName, themeNext);\n const themeNextProps = {\n \"data-corner\": corner,\n };\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: clsx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n \"data-mode\": mode,\n ...(themeNext ? themeNextProps : {}),\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={clsx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n {...(themeNext ? themeNextProps : {})}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n themeNext,\n corner: cornerProp,\n}: Omit<\n SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps,\n \"enableStyleInjection\"\n>) {\n const inheritedDensity = useContext(DensityContext);\n const {\n theme: inheritedTheme,\n mode: inheritedMode,\n window: inheritedWindow,\n UNSTABLE_corner: inheritedCorner,\n } = useContext(ThemeContext);\n\n const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n\n const applyClassesTo =\n applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-provider\",\n css: saltProviderCss,\n window: targetWindow,\n });\n\n const themeContextValue = useMemo(\n () => ({\n theme: themeName,\n mode,\n window: targetWindow,\n themeNext: Boolean(themeNext),\n UNSTABLE_corner: corner,\n }),\n [themeName, mode, targetWindow, themeNext, corner]\n );\n\n const themedChildren = createThemedChildren({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner: corner,\n });\n\n useIsomorphicLayoutEffect(() => {\n const themeNames = getThemeNames(themeName, themeNext);\n\n if (applyClassesTo === \"root\" && targetWindow) {\n if (inheritedWindow != targetWindow) {\n // add the styles we want to apply\n targetWindow.document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = mode;\n if (themeNext) {\n targetWindow.document.documentElement.dataset.corner = corner;\n }\n } else {\n console.warn(\n \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\" && targetWindow) {\n // When unmounting/remounting, remove the applied styles from the root\n targetWindow.document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = undefined;\n if (themeNext) {\n delete targetWindow.document.documentElement.dataset.corner;\n }\n }\n };\n }, [\n applyClassesTo,\n density,\n mode,\n themeName,\n targetWindow,\n inheritedWindow,\n themeNext,\n corner,\n ]);\n\n const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </BreakpointProvider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRootProvider) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport function SaltProvider({\n enableStyleInjection,\n ...restProps\n}: SaltProviderProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n <InternalSaltProvider {...restProps} />\n </StyleInjectionProvider>\n );\n}\n\ninterface UNSTABLE_SaltProviderNextAdditionalProps {\n corner?: UNSTABLE_Corner;\n}\n\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderProps &\n UNSTABLE_SaltProviderNextAdditionalProps;\n\nexport function UNSTABLE_SaltProviderNext({\n enableStyleInjection,\n ...restProps\n}: UNSTABLE_SaltProviderNextProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n <InternalSaltProvider {...restProps} themeNext={true} />\n </StyleInjectionProvider>\n );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["React","saltProviderCss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n Breakpoints,\n DEFAULT_BREAKPOINTS,\n BreakpointProvider,\n useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow, WindowContextType } from \"@salt-ds/window\";\nimport {\n useComponentCssInjection,\n StyleInjectionProvider,\n} from \"@salt-ds/styles\";\nimport { UNSTABLE_Corner } from \"../theme/Corner\";\nimport { UNSTABLE_HeadingFont } from \"../theme/HeadingFont\";\nimport { UNSTABLE_Accent } from \"../theme/Accent\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst UNSTABLE_ADDITIONAL_THEME_NAME = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: UNSTABLE_Corner = \"sharp\";\nconst DEFAULT_HEADING_FONT: UNSTABLE_HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: UNSTABLE_Accent = \"blue\";\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n window?: WindowContextType;\n /** Only available when using SaltProviderNext. */\n themeNext: boolean;\n UNSTABLE_corner: UNSTABLE_Corner;\n UNSTABLE_headingFont: UNSTABLE_HeadingFont;\n UNSTABLE_accent: UNSTABLE_Accent;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n themeNext: false,\n UNSTABLE_corner: DEFAULT_CORNER,\n UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n UNSTABLE_accent: DEFAULT_ACCENT,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (themeName: ThemeName, themeNext?: boolean) => {\n if (themeNext) {\n return themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME]\n : [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME, themeName];\n } else {\n {\n return themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n }\n }\n};\n\ninterface ThemeNextProps {\n themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner,\n headingFont,\n accent,\n}: {\n children: ReactNode;\n themeName: ThemeName;\n density: Density;\n mode: Mode;\n applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n UNSTABLE_SaltProviderNextAdditionalProps) => {\n const themeNames = getThemeNames(themeName, themeNext);\n const themeNextProps = {\n \"data-corner\": corner,\n \"data-heading-font\": headingFont,\n \"data-accent\": accent,\n };\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: clsx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n \"data-mode\": mode,\n ...(themeNext ? themeNextProps : {}),\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={clsx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n {...(themeNext ? themeNextProps : {})}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n themeNext,\n corner: cornerProp,\n headingFont: headingFontProp,\n accent: accentProp,\n}: Omit<\n SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps,\n \"enableStyleInjection\"\n>) {\n const inheritedDensity = useContext(DensityContext);\n const {\n theme: inheritedTheme,\n mode: inheritedMode,\n window: inheritedWindow,\n UNSTABLE_corner: inheritedCorner,\n UNSTABLE_headingFont: inheritedHeadingFont,\n UNSTABLE_accent: inheritedAccent,\n } = useContext(ThemeContext);\n\n const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n const headingFont =\n headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n\n const applyClassesTo =\n applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-provider\",\n css: saltProviderCss,\n window: targetWindow,\n });\n\n const themeContextValue = useMemo(\n () => ({\n theme: themeName,\n mode,\n window: targetWindow,\n themeNext: Boolean(themeNext),\n UNSTABLE_corner: corner,\n UNSTABLE_headingFont: headingFont,\n UNSTABLE_accent: accent,\n }),\n [themeName, mode, targetWindow, themeNext, corner, headingFont, accent]\n );\n\n const themedChildren = createThemedChildren({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner: corner,\n headingFont,\n accent,\n });\n\n useIsomorphicLayoutEffect(() => {\n const themeNames = getThemeNames(themeName, themeNext);\n\n if (applyClassesTo === \"root\" && targetWindow) {\n if (inheritedWindow != targetWindow) {\n // add the styles we want to apply\n targetWindow.document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = mode;\n if (themeNext) {\n targetWindow.document.documentElement.dataset.corner = corner;\n targetWindow.document.documentElement.dataset.headingFont =\n headingFont;\n targetWindow.document.documentElement.dataset.accent = accent;\n }\n } else {\n console.warn(\n \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\" && targetWindow) {\n // When unmounting/remounting, remove the applied styles from the root\n targetWindow.document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = undefined;\n if (themeNext) {\n delete targetWindow.document.documentElement.dataset.corner;\n delete targetWindow.document.documentElement.dataset.headingFont;\n delete targetWindow.document.documentElement.dataset.accent;\n }\n }\n };\n }, [\n applyClassesTo,\n density,\n mode,\n themeName,\n targetWindow,\n inheritedWindow,\n themeNext,\n corner,\n headingFont,\n accent,\n ]);\n\n const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </BreakpointProvider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRootProvider) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport function SaltProvider({\n enableStyleInjection,\n ...restProps\n}: SaltProviderProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n <InternalSaltProvider {...restProps} />\n </StyleInjectionProvider>\n );\n}\n\ninterface UNSTABLE_SaltProviderNextAdditionalProps {\n corner?: UNSTABLE_Corner;\n headingFont?: UNSTABLE_HeadingFont;\n accent?: UNSTABLE_Accent;\n}\n\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderProps &\n UNSTABLE_SaltProviderNextAdditionalProps;\n\nexport function UNSTABLE_SaltProviderNext({\n enableStyleInjection,\n ...restProps\n}: UNSTABLE_SaltProviderNextProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n <InternalSaltProvider {...restProps} themeNext={true} />\n </StyleInjectionProvider>\n );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["React","saltProviderCss"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltSegmentedButtonGroup {\n display: flex;\n flex-direction: row;\n background: var(--button-background);\n gap: var(--salt-size-border);\n}\n\n.saltSegmentedButtonGroup > .saltButton:not(:last-of-type)::after {\n content: \"\";\n width: var(--salt-size-border);\n position: absolute;\n background: var(--button-background);\n right: calc(var(--salt-size-border) * -1);\n
|
|
1
|
+
var css_248z = ".saltSegmentedButtonGroup {\n display: flex;\n flex-direction: row;\n background: var(--button-background);\n gap: var(--salt-size-border);\n}\n\n.saltSegmentedButtonGroup > .saltButton:not(:last-of-type)::after {\n content: \"\";\n width: var(--salt-size-border);\n position: absolute;\n background: var(--button-background);\n /* Accomodate button border */\n right: calc(var(--salt-size-border) * -2);\n top: calc(var(--salt-size-border) * -1);\n bottom: calc(var(--salt-size-border) * -1);\n}\n\n.saltSegmentedButtonGroup > .saltButton:not(:first-of-type)::before {\n content: \"\";\n width: var(--salt-size-border);\n position: absolute;\n background: var(--salt-separable-primary-borderColor);\n /* Accomodate button border */\n left: calc(var(--salt-size-border) * -2);\n top: calc(var(--salt-size-border) * -1);\n bottom: calc(var(--salt-size-border) * -1);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=SegmentedButtonGroup.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltStatusAdornment {\n align-self: center;\n display: inline-block;\n fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n height: var(--salt-size-adornment);\n min-height: var(--salt-size-adornment);\n padding-left: var(--salt-spacing-100);\n position: relative;\n}\n\n.saltStatusAdornment-error {\n --statusAdornment-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusAdornment-warning {\n --statusAdornment-color: var(--salt-status-warning-foreground);\n}\n\n.saltStatusAdornment-success {\n --statusAdornment-color: var(--salt-status-success-foreground);\n}\n";
|
|
1
|
+
var css_248z = ".saltStatusAdornment {\n align-self: center;\n display: inline-block;\n fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n height: var(--salt-size-adornment);\n min-height: var(--salt-size-adornment);\n padding-left: var(--salt-spacing-100);\n position: relative;\n}\n\n.saltStatusAdornment-error {\n --statusAdornment-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltStatusAdornment-warning {\n --statusAdornment-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltStatusAdornment-success {\n --statusAdornment-color: var(--salt-status-success-foreground-decorative);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=StatusAdornment.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltStatusIndicator {\n --statusIndicator-warning-color: var(--salt-status-warning-foreground);\n --statusIndicator-info-color: var(--salt-status-info-foreground);\n --statusIndicator-success-color: var(--salt-status-success-foreground);\n --statusIndicator-error-color: var(--salt-status-error-foreground);\n color: var(--saltStatusIndicator-color, var(--statusIndicator-Color));\n}\n\n.saltStatusIndicator-error {\n --statusIndicator-Color: var(--statusIndicator-error-color);\n}\n\n.saltStatusIndicator-warning {\n --statusIndicator-Color: var(--statusIndicator-warning-color);\n}\n\n.saltStatusIndicator-success {\n --statusIndicator-Color: var(--statusIndicator-success-color);\n}\n\n.saltStatusIndicator-info {\n --statusIndicator-Color: var(--statusIndicator-info-color);\n}\n";
|
|
1
|
+
var css_248z = ".saltStatusIndicator {\n --statusIndicator-warning-color: var(--salt-status-warning-foreground-decorative);\n --statusIndicator-info-color: var(--salt-status-info-foreground-decorative);\n --statusIndicator-success-color: var(--salt-status-success-foreground-decorative);\n --statusIndicator-error-color: var(--salt-status-error-foreground-decorative);\n color: var(--saltStatusIndicator-color, var(--statusIndicator-Color));\n}\n\n.saltStatusIndicator-error {\n --statusIndicator-Color: var(--statusIndicator-error-color);\n}\n\n.saltStatusIndicator-warning {\n --statusIndicator-Color: var(--statusIndicator-warning-color);\n}\n\n.saltStatusIndicator-success {\n --statusIndicator-Color: var(--statusIndicator-success-color);\n}\n\n.saltStatusIndicator-info {\n --statusIndicator-Color: var(--statusIndicator-info-color);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=StatusIndicator.css.js.map
|
package/dist-es/text/Code.js
CHANGED
|
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { Text } from './Text.js';
|
|
4
4
|
|
|
5
5
|
const Code = forwardRef(
|
|
6
|
-
function TextAction({ children,
|
|
6
|
+
function TextAction({ children, ...rest }, ref) {
|
|
7
7
|
return /* @__PURE__ */ jsx(Text, {
|
|
8
8
|
as: "code",
|
|
9
9
|
ref,
|
package/dist-es/text/Code.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Code.js","sources":["../src/text/Code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const Code = forwardRef<HTMLSpanElement, Omit<TextProps<\"code\">, \"as\">>(\n function TextAction({ children,
|
|
1
|
+
{"version":3,"file":"Code.js","sources":["../src/text/Code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const Code = forwardRef<HTMLSpanElement, Omit<TextProps<\"code\">, \"as\">>(\n function TextAction({ children, ...rest }, ref) {\n return (\n <Text as=\"code\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n }\n);\n"],"names":[],"mappings":";;;;AAGO,MAAM,IAAO,GAAA,UAAA;AAAA,EAClB,SAAS,UAAW,CAAA,EAAE,QAAa,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AAC9C,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MAAK,EAAG,EAAA,MAAA;AAAA,MAAO,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC3B,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
package/dist-es/text/Display.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { Text } from './Text.js';
|
|
4
4
|
|
|
5
|
-
const Display1 = forwardRef(function Display12({ children,
|
|
5
|
+
const Display1 = forwardRef(function Display12({ children, styleAs = "display1", ...rest }, ref) {
|
|
6
6
|
return /* @__PURE__ */ jsx(Text, {
|
|
7
7
|
as: "span",
|
|
8
8
|
styleAs,
|
|
@@ -11,7 +11,7 @@ const Display1 = forwardRef(function Display12({ children, className, styleAs =
|
|
|
11
11
|
children
|
|
12
12
|
});
|
|
13
13
|
});
|
|
14
|
-
const Display2 = forwardRef(function Display22({ children,
|
|
14
|
+
const Display2 = forwardRef(function Display22({ children, styleAs = "display2", ...rest }, ref) {
|
|
15
15
|
return /* @__PURE__ */ jsx(Text, {
|
|
16
16
|
as: "span",
|
|
17
17
|
styleAs,
|
|
@@ -20,7 +20,7 @@ const Display2 = forwardRef(function Display22({ children, className, styleAs =
|
|
|
20
20
|
children
|
|
21
21
|
});
|
|
22
22
|
});
|
|
23
|
-
const Display3 = forwardRef(function Display32({ children,
|
|
23
|
+
const Display3 = forwardRef(function Display32({ children, styleAs = "display3", ...rest }, ref) {
|
|
24
24
|
return /* @__PURE__ */ jsx(Text, {
|
|
25
25
|
as: "span",
|
|
26
26
|
styleAs,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Display.js","sources":["../src/text/Display.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const Display1 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display1(
|
|
1
|
+
{"version":3,"file":"Display.js","sources":["../src/text/Display.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const Display1 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display1({ children, styleAs = \"display1\", ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n\nexport const Display2 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display2({ children, styleAs = \"display2\", ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n\nexport const Display3 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display3({ children, styleAs = \"display3\", ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n"],"names":["Display1","Display2","Display3"],"mappings":";;;;AAGa,MAAA,QAAA,GAAW,UAGtB,CAAA,SAASA,SAAS,CAAA,EAAE,UAAU,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EAAG,GAAK,EAAA;AACpE,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAW,UAGtB,CAAA,SAASC,SAAS,CAAA,EAAE,UAAU,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EAAG,GAAK,EAAA;AACpE,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAW,UAGtB,CAAA,SAASC,SAAS,CAAA,EAAE,UAAU,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EAAG,GAAK,EAAA;AACpE,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
package/dist-es/text/Text.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltText {\n --text-color: currentColor;\n}\n\n/* Main css class. Style for body text */\n.saltText {\n color: var(--saltText-color, var(--text-color));\n font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n}\n\n.saltText::selection {\n background: var(--saltText-highlight, var(--salt-content-foreground-highlight));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--text-max-rows, 0);\n overflow: hidden;\n word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Body emphasis small */\n.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n font-family: var(--salt-text-notation-fontFamily);\n font-size: var(--salt-text-notation-fontSize);\n line-height: var(--salt-text-notation-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Notation emphasis strong */\n.saltText-notation.saltText strong {\n font-weight: var(--salt-text-notation-fontWeight-strong);\n}\n\n/* Notation emphasis small */\n.saltText-notation.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-notation-fontWeight-small);\n}\n\n/* Action */\n.saltText-action.saltText {\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n text-align: var(--salt-text-action-textAlign);\n font-weight: var(--salt-text-action-fontWeight);\n}\n\n/* Code */\ncode.saltText,\n.saltText-code.saltText {\n font-family: var(--salt-text-code-fontFamily);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n font-family: var(--salt-text-display1-fontFamily);\n font-size: var(--salt-text-display1-fontSize);\n font-weight: var(--salt-text-display1-fontWeight);\n line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n font-family: var(--salt-text-display2-fontFamily);\n font-size: var(--salt-text-display2-fontSize);\n font-weight: var(--salt-text-display2-fontWeight);\n line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n font-family: var(--salt-text-display3-fontFamily);\n font-size: var(--salt-text-display3-fontSize);\n font-weight: var(--salt-text-display3-fontWeight);\n line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n font-family: var(--salt-text-h1-fontFamily);\n font-size: var(--salt-text-h1-fontSize);\n font-weight: var(--salt-text-h1-fontWeight);\n line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n font-family: var(--salt-text-h2-fontFamily);\n font-size: var(--salt-text-h2-fontSize);\n font-weight: var(--salt-text-h2-fontWeight);\n line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n font-family: var(--salt-text-h3-fontFamily);\n font-size: var(--salt-text-h3-fontSize);\n font-weight: var(--salt-text-h3-fontWeight);\n line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n font-family: var(--salt-text-h4-fontFamily);\n font-size: var(--salt-text-h4-fontSize);\n font-weight: var(--salt-text-h4-fontWeight);\n line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n font-family: var(--salt-text-label-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
|
|
1
|
+
var css_248z = ".saltText {\n --text-color: currentColor;\n}\n\n/* Main css class. Style for body text */\n.saltText {\n color: var(--saltText-color, var(--text-color));\n font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n}\n\n.saltText::selection {\n background: var(--saltText-highlight, var(--salt-content-foreground-highlight));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--text-max-rows, 0);\n overflow: hidden;\n word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Info color */\n.saltText-info {\n --text-color: var(--salt-status-info-foreground-informative);\n}\n\n/* Error color */\n.saltText-error {\n --text-color: var(--salt-status-error-foreground-informative);\n}\n\n/* Warning color */\n.saltText-warning {\n --text-color: var(--salt-status-warning-foreground-informative);\n}\n\n/* Success color */\n.saltText-success {\n --text-color: var(--salt-status-success-foreground-informative);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Body emphasis small */\n.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n font-family: var(--salt-text-notation-fontFamily);\n font-size: var(--salt-text-notation-fontSize);\n line-height: var(--salt-text-notation-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Notation emphasis strong */\n.saltText-notation.saltText strong {\n font-weight: var(--salt-text-notation-fontWeight-strong);\n}\n\n/* Notation emphasis small */\n.saltText-notation.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-notation-fontWeight-small);\n}\n\n/* Action */\n.saltText-action.saltText {\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n text-align: var(--salt-text-action-textAlign);\n font-weight: var(--salt-text-action-fontWeight);\n}\n\n/* Code */\ncode.saltText,\n.saltText-code.saltText {\n font-family: var(--salt-text-code-fontFamily);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n font-family: var(--salt-text-display1-fontFamily);\n font-size: var(--salt-text-display1-fontSize);\n font-weight: var(--salt-text-display1-fontWeight);\n line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n font-family: var(--salt-text-display2-fontFamily);\n font-size: var(--salt-text-display2-fontSize);\n font-weight: var(--salt-text-display2-fontWeight);\n line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n font-family: var(--salt-text-display3-fontFamily);\n font-size: var(--salt-text-display3-fontSize);\n font-weight: var(--salt-text-display3-fontWeight);\n line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n font-family: var(--salt-text-h1-fontFamily);\n font-size: var(--salt-text-h1-fontSize);\n font-weight: var(--salt-text-h1-fontWeight);\n line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n font-family: var(--salt-text-h2-fontFamily);\n font-size: var(--salt-text-h2-fontSize);\n font-weight: var(--salt-text-h2-fontWeight);\n line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n font-family: var(--salt-text-h3-fontFamily);\n font-size: var(--salt-text-h3-fontSize);\n font-weight: var(--salt-text-h3-fontWeight);\n line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n font-family: var(--salt-text-h4-fontFamily);\n font-size: var(--salt-text-h4-fontSize);\n font-weight: var(--salt-text-h4-fontWeight);\n line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n font-family: var(--salt-text-label-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Text.css.js.map
|
package/dist-es/text/Text.js
CHANGED
|
@@ -103,47 +103,45 @@ import '../tooltip/Tooltip.js';
|
|
|
103
103
|
import css_248z from './Text.css.js';
|
|
104
104
|
|
|
105
105
|
const withBaseName = makePrefixer("saltText");
|
|
106
|
-
const Text = forwardRef(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
146
|
-
);
|
|
106
|
+
const Text = forwardRef(function Text2({
|
|
107
|
+
as,
|
|
108
|
+
children,
|
|
109
|
+
className,
|
|
110
|
+
disabled = false,
|
|
111
|
+
maxRows,
|
|
112
|
+
style,
|
|
113
|
+
styleAs,
|
|
114
|
+
variant,
|
|
115
|
+
color: colorProp,
|
|
116
|
+
...restProps
|
|
117
|
+
}, ref) {
|
|
118
|
+
var _a;
|
|
119
|
+
const targetWindow = useWindow();
|
|
120
|
+
useComponentCssInjection({
|
|
121
|
+
testId: "salt-text",
|
|
122
|
+
css: css_248z,
|
|
123
|
+
window: targetWindow
|
|
124
|
+
});
|
|
125
|
+
const Component = as != null ? as : "div";
|
|
126
|
+
const textStyles = { "--text-max-rows": maxRows, ...style };
|
|
127
|
+
const color = (_a = variant != null ? variant : colorProp) != null ? _a : "primary";
|
|
128
|
+
return /* @__PURE__ */ jsx(Component, {
|
|
129
|
+
className: clsx(
|
|
130
|
+
withBaseName(),
|
|
131
|
+
{
|
|
132
|
+
[withBaseName("disabled")]: disabled,
|
|
133
|
+
[withBaseName("lineClamp")]: maxRows,
|
|
134
|
+
[withBaseName(styleAs)]: styleAs,
|
|
135
|
+
[withBaseName(color)]: color !== "inherit"
|
|
136
|
+
},
|
|
137
|
+
className
|
|
138
|
+
),
|
|
139
|
+
...restProps,
|
|
140
|
+
ref,
|
|
141
|
+
style: textStyles,
|
|
142
|
+
children
|
|
143
|
+
});
|
|
144
|
+
});
|
|
147
145
|
|
|
148
146
|
export { Text };
|
|
149
147
|
//# sourceMappingURL=Text.js.map
|
package/dist-es/text/Text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport textCss from \"./Text.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Applies disabled styling when true\n */\n disabled?: boolean;\n /**\n * Apply text truncation by mentioning number of rows to be displayed\n */\n maxRows?: number;\n /**\n * Match styling to another text component's style\n */\n styleAs?:\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"label\"\n | \"display1\"\n | \"display2\"\n | \"display3\"\n | \"notation\"\n | \"action\"\n | \"code\";\n /**\n * Change text color palette\n * @deprecated Use `color` instead\n */\n variant?: \"primary\" | \"secondary\";\n /*\n * The color of the text. Defaults to \"primary\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\";\n }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n props: TextProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport textCss from \"./Text.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { ValidationStatus } from \"../status-indicator\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Applies disabled styling when true\n */\n disabled?: boolean;\n /**\n * Apply text truncation by mentioning number of rows to be displayed\n */\n maxRows?: number;\n /**\n * Match styling to another text component's style\n */\n styleAs?:\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"label\"\n | \"display1\"\n | \"display2\"\n | \"display3\"\n | \"notation\"\n | \"action\"\n | \"code\";\n /**\n * Change text color palette\n * @deprecated Use `color` instead\n */\n variant?: \"primary\" | \"secondary\";\n /*\n * The color of the text. Defaults to \"primary\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n props: TextProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n T extends ElementType = \"div\"\n>(\n {\n as,\n children,\n className,\n disabled = false,\n maxRows,\n style,\n styleAs,\n variant,\n color: colorProp,\n ...restProps\n }: TextProps<T>,\n ref?: PolymorphicRef<T>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-text\",\n css: textCss,\n window: targetWindow,\n });\n\n const Component = as ?? \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n const color = variant ?? colorProp ?? \"primary\";\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs as string)]: styleAs,\n [withBaseName(color)]: color !== \"inherit\",\n },\n className\n )}\n {...restProps}\n ref={ref}\n style={textStyles}\n >\n {children}\n </Component>\n );\n});\n"],"names":["Text","textCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAE/B,MAAA,IAAA,GAAsB,UAAW,CAAA,SAASA,KAGrD,CAAA;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACJ,GAAA,SAAA;AACL,CAAA,EACA,GACA,EAAA;AAzEF,EAAA,IAAA,EAAA,CAAA;AA0EE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,YAAY,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,KAAA,CAAA;AAExB,EAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,EAAM,MAAA,KAAA,GAAA,CAAQ,EAAW,GAAA,OAAA,IAAA,IAAA,GAAA,OAAA,GAAA,SAAA,KAAX,IAAwB,GAAA,EAAA,GAAA,SAAA,CAAA;AAEtC,EAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,OAAiB,CAAI,GAAA,OAAA;AAAA,QACnC,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,SAAA;AAAA,OACnC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,SAAA;AAAA,IACJ,GAAA;AAAA,IACA,KAAO,EAAA,UAAA;AAAA,IAEN,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { Text } from './Text.js';
|
|
4
4
|
|
|
5
|
-
const TextAction = forwardRef(function TextAction2({ children,
|
|
5
|
+
const TextAction = forwardRef(function TextAction2({ children, ...rest }, ref) {
|
|
6
6
|
return /* @__PURE__ */ jsx(Text, {
|
|
7
7
|
as: "span",
|
|
8
8
|
styleAs: "action",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextAction.js","sources":["../src/text/TextAction.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const TextAction = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function TextAction({ children,
|
|
1
|
+
{"version":3,"file":"TextAction.js","sources":["../src/text/TextAction.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const TextAction = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function TextAction({ children, ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs=\"action\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n"],"names":["TextAction"],"mappings":";;;;AAGa,MAAA,UAAA,GAAa,WAGxB,SAASA,WAAAA,CAAW,EAAE,QAAa,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AAChD,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAQ,EAAA,QAAA;AAAA,IAAS,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC5C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { Text } from './Text.js';
|
|
4
4
|
|
|
5
|
-
const TextNotation = forwardRef(function TextNotation2({ children,
|
|
5
|
+
const TextNotation = forwardRef(function TextNotation2({ children, ...rest }, ref) {
|
|
6
6
|
return /* @__PURE__ */ jsx(Text, {
|
|
7
7
|
as: "span",
|
|
8
8
|
styleAs: "notation",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextNotation.js","sources":["../src/text/TextNotation.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const TextNotation = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function TextNotation({ children,
|
|
1
|
+
{"version":3,"file":"TextNotation.js","sources":["../src/text/TextNotation.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const TextNotation = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function TextNotation({ children, ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs=\"notation\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n"],"names":["TextNotation"],"mappings":";;;;AAGa,MAAA,YAAA,GAAe,WAG1B,SAASA,aAAAA,CAAa,EAAE,QAAa,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AAClD,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAQ,EAAA,UAAA;AAAA,IAAW,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC9C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accent.js","sources":["../src/theme/Accent.ts"],"sourcesContent":["export const UNSTABLE_AccentValues = [\"blue\", \"teal\"] as const;\n\nexport type UNSTABLE_Accent = (typeof UNSTABLE_AccentValues)[number];\n"],"names":[],"mappings":"AAAa,MAAA,qBAAA,GAAwB,CAAC,MAAA,EAAQ,MAAM;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeadingFont.js","sources":["../src/theme/HeadingFont.ts"],"sourcesContent":["export const UNSTABLE_HeadingFontValues = [\"Open Sans\", \"Amplitude\"] as const;\n\nexport type UNSTABLE_HeadingFont = (typeof UNSTABLE_HeadingFontValues)[number];\n"],"names":[],"mappings":"AAAa,MAAA,0BAAA,GAA6B,CAAC,WAAA,EAAa,WAAW;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n --toast-background: var(--salt-container-primary-background);\n\n background: var(--saltToast-background, var(--toast-background));\n border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n border-width: var(--saltToast-borderWidth, var(--salt-size-border));\n border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));\n border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n box-sizing: border-box;\n box-shadow: var(--salt-overlayable-shadow-popout);\n display: flex;\n gap: var(--salt-spacing-75);\n padding: var(--saltToast-padding, var(--salt-spacing-100));\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-icon.saltIcon {\n margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;\n}\n.salt-density-high.saltToast-icon.saltIcon {\n margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0;\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n --toast-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n --toast-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n --toast-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n --toast-borderColor: var(--salt-status-success-borderColor);\n}\n";
|
|
1
|
+
var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n --toast-background: var(--salt-container-primary-background);\n --toast-borderColor: var(--salt-container-primary-borderColor);\n\n background: var(--saltToast-background, var(--toast-background));\n border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n border-width: var(--saltToast-borderWidth, var(--salt-size-border));\n border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));\n border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n box-sizing: border-box;\n box-shadow: var(--salt-overlayable-shadow-popout);\n display: flex;\n gap: var(--salt-spacing-75);\n padding: var(--saltToast-padding, var(--salt-spacing-100));\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-icon.saltIcon {\n margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;\n}\n\n.salt-density-high.saltToast-icon.saltIcon {\n margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0;\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n --toast-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n --toast-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n --toast-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n --toast-borderColor: var(--salt-status-success-borderColor);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Toast.css.js.map
|
package/dist-es/toast/Toast.js
CHANGED
|
@@ -104,7 +104,7 @@ import css_248z from './Toast.css.js';
|
|
|
104
104
|
|
|
105
105
|
const withBaseName = makePrefixer("saltToast");
|
|
106
106
|
const Toast = forwardRef(function Toast2(props, ref) {
|
|
107
|
-
const { children, className, status
|
|
107
|
+
const { children, className, status, ...rest } = props;
|
|
108
108
|
const targetWindow = useWindow();
|
|
109
109
|
useComponentCssInjection({
|
|
110
110
|
testId: "salt-toast",
|
|
@@ -112,12 +112,16 @@ const Toast = forwardRef(function Toast2(props, ref) {
|
|
|
112
112
|
window: targetWindow
|
|
113
113
|
});
|
|
114
114
|
return /* @__PURE__ */ jsxs("div", {
|
|
115
|
-
className: clsx(
|
|
115
|
+
className: clsx(
|
|
116
|
+
withBaseName(),
|
|
117
|
+
{ [withBaseName(status != null ? status : "")]: status },
|
|
118
|
+
className
|
|
119
|
+
),
|
|
116
120
|
role: "alert",
|
|
117
121
|
...rest,
|
|
118
122
|
ref,
|
|
119
123
|
children: [
|
|
120
|
-
/* @__PURE__ */ jsx(StatusIndicator, {
|
|
124
|
+
status && /* @__PURE__ */ jsx(StatusIndicator, {
|
|
121
125
|
status,
|
|
122
126
|
className: withBaseName("icon")
|
|
123
127
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * A string to determine the current state of the Toast.\n */\n status?: ValidationStatus;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n props,\n ref\n) {\n const { children, className, status
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * A string to determine the current state of the Toast.\n */\n status?: ValidationStatus;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n props,\n ref\n) {\n const { children, className, status, ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast\",\n css: toastCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className\n )}\n role=\"alert\"\n {...rest}\n ref={ref}\n >\n {status && (\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n )}\n {children}\n </div>\n );\n});\n"],"names":["Toast","toastCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAStC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,MAAA,EAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AACjD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,MACvC,SAAA;AAAA,KACF;AAAA,IACA,IAAK,EAAA,OAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,MAAA,oBACE,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MAEnE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border:
|
|
1
|
+
var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border-color: var(--salt-actionable-secondary-borderColor, transparent);\n border-style: solid;\n border-width: var(--salt-actionable-borderWidth, 0);\n border-radius: var(--salt-palette-corner-weaker, 0);\n height: var(--salt-size-base);\n color: var(--salt-actionable-secondary-foreground);\n text-transform: var(--salt-text-action-textTransform);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-fontFamily);\n text-align: var(--salt-text-action-textAlign);\n letter-spacing: var(--salt-text-action-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n gap: var(--salt-spacing-50);\n}\n\n.saltToggleButton:hover {\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton:focus-visible {\n outline: var(--salt-focused-outline);\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible,\n.saltToggleButton[aria-pressed=\"true\"]:focus-visible {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n border-color: var(--salt-actionable-secondary-borderColor-active, transparent);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n border-color: var(--salt-actionable-secondary-borderColor-active, transparent);\n}\n\n.saltToggleButton:disabled {\n background: var(--salt-actionable-secondary-background-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=ToggleButton.css.js.map
|
|
@@ -7,4 +7,4 @@ export interface AriaAnnouncerProviderProps {
|
|
|
7
7
|
*/
|
|
8
8
|
style?: CSSProperties;
|
|
9
9
|
}
|
|
10
|
-
export declare function AriaAnnouncerProvider({ children, style, }: AriaAnnouncerProviderProps):
|
|
10
|
+
export declare function AriaAnnouncerProvider({ children, style, }: AriaAnnouncerProviderProps): JSX.Element;
|
|
@@ -8,7 +8,7 @@ interface BreakpointProviderProps {
|
|
|
8
8
|
children?: ReactNode;
|
|
9
9
|
matchedBreakpoints: Breakpoint[];
|
|
10
10
|
}
|
|
11
|
-
export declare function BreakpointProvider(props: BreakpointProviderProps):
|
|
11
|
+
export declare function BreakpointProvider(props: BreakpointProviderProps): JSX.Element;
|
|
12
12
|
export declare function useMatchedBreakpoints(breakpoints: Breakpoints): Breakpoint[];
|
|
13
13
|
export declare function useBreakpoint(): BreakpointContext & {
|
|
14
14
|
breakpoint: Breakpoint | null;
|
|
@@ -5,7 +5,7 @@ interface ConditionalScrimWrapperProps {
|
|
|
5
5
|
children?: ReactNode;
|
|
6
6
|
condition: boolean;
|
|
7
7
|
}
|
|
8
|
-
export declare const ConditionalScrimWrapper: ({ condition, children, }: ConditionalScrimWrapperProps) =>
|
|
8
|
+
export declare const ConditionalScrimWrapper: ({ condition, children, }: ConditionalScrimWrapperProps) => JSX.Element;
|
|
9
9
|
export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
|
|
10
10
|
/**
|
|
11
11
|
* Display or hide the component.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { TextProps } from "../text";
|
|
2
|
-
export declare const FormFieldHelperText: ({ className, children, ...restProps }: Omit<TextProps<"label">, "variant" | "styleAs">) =>
|
|
2
|
+
export declare const FormFieldHelperText: ({ className, children, ...restProps }: Omit<TextProps<"label">, "variant" | "styleAs">) => JSX.Element;
|