npm - @salt-ds/core - Versions diffs - 1.0.0 → 1.1.0 - Mend

@salt-ds/core 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/dist-es/packages/core/src/text/Text.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = "/* Main css class. Style for body text */\n.saltText {\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  color: var(--saltText-color, var(--text-color));\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-text-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\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-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-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-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/* 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-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/* 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-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/* 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-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/* 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-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-fontWeight-strong);\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";
+var css_248z = "/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\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-text-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\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-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-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-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/* 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-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/* 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-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/* 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-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/* 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-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-fontWeight-strong);\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";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/core/src/text/Text.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import './Text.css.js';
 const withBaseName = makePrefixer("saltText");
@@ -22,7 +22,7 @@ const Text = forwardRef(
     const Component = as || "div";
     const textStyles = { "--text-max-rows": maxRows, ...style };
     return /* @__PURE__ */ jsx(Component, {
-      className: cx(withBaseName(), className, {
+      className: clsx(withBaseName(), className, {
         [withBaseName("lineClamp")]: maxRows,
         [withBaseName(styleAs || "")]: styleAs,
         [withBaseName(variant)]: variant

package/dist-es/packages/core/src/text/Text.js.map CHANGED Viewed

	@@ -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 cx from \"~~classnames~~\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\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 /\n Change text color palette\n */\n variant?: \"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(\n <T extends ElementType = \"div\">(\n {\n children,\n className,\n as,\n maxRows,\n styleAs,\n variant = \"primary\",\n style,\n ...restProps\n }: TextProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as \|\| \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n return (\n <Component\n className={cx(withBaseName(), className, {\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs \|\| \"\")]: styleAs,\n [withBaseName(variant)]: variant,\n })}\n {...restProps}\n ref={ref}\n style={textStyles}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAA,UAAA;AAAA,EACjC,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,EAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,KAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,~~EAAA~~,~~CAAG~~,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,~~QACvC~~,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,QAC7B,CAAC,YAAA,CAAa,OAAW,IAAA,EAAE,CAAI,GAAA,OAAA;AAAA,QAC/B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,OAC1B,CAAA;AAAA,MACA,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
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 \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\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 /\n Change text color palette\n */\n variant?: \"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(\n <T extends ElementType = \"div\">(\n {\n children,\n className,\n as,\n maxRows,\n styleAs,\n variant = \"primary\",\n style,\n ...restProps\n }: TextProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as \|\| \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n return (\n <Component\n className={clsx(withBaseName(), className, {\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs \|\| \"\")]: styleAs,\n [withBaseName(variant)]: variant,\n })}\n {...restProps}\n ref={ref}\n style={textStyles}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAA,UAAA;AAAA,EACjC,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,EAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,KAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,QACzC,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,QAC7B,CAAC,YAAA,CAAa,OAAW,IAAA,EAAE,CAAI,GAAA,OAAA;AAAA,QAC/B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,OAC1B,CAAA;AAAA,MACA,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/core/src/theme/Theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n \| \"accent\"\n \| \"actionable\"\n \| \"container\"\n \| \"~~delay~~\"\n \| \"~~disabled\"\n \| \"~~draggable\"\n \| \"~~target\"\n \| \"~~editable\"\n \| \"focused\"\n \| \"measured\"\n \| \"navigable\"\n \| \"overlayable\"\n \| \"selectable\"\n \| \"separable\"\n \| \"~~taggable\"\n \| \"text\"\n \| \"~~status\"\n ~~// The next 4 are foundations, should they really be here?\n~~ \| \"~~icon~~\"\n \| \"~~shadow~~\"\n \| \"~~size~~\"~~\n \| \"spacing\"~~;\n\nexport type ThemeName = string;\n\nexport const getCharacteristicValue = (\n themeName: ThemeName,\n characteristicName: characteristic,\n variant: string,\n scopeElement?: HTMLElement\n): string \| null => {\n const cssVariableName = `--salt-${characteristicName}-${variant}`;\n const scopeTarget =\n scopeElement \|\| document.body.querySelector(`.${themeName}`);\n if (scopeTarget) {\n const style = getComputedStyle(scopeTarget);\n const variableValue = style.getPropertyValue(cssVariableName);\n if (variableValue) {\n return variableValue;\n }\n }\n return null;\n};\n"],"names":[],"mappings":"~~AA0BO~~,MAAM,sBAAyB,GAAA,CACpC,SACA,EAAA,kBAAA,EACA,SACA,YACkB,KAAA;AAClB,EAAM,MAAA,eAAA,GAAkB,UAAU,kBAAsB,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA,CAAA;AACxD,EAAA,MAAM,cACJ,YAAgB,IAAA,QAAA,CAAS,IAAK,CAAA,aAAA,CAAc,IAAI,SAAW,CAAA,CAAA,CAAA,CAAA;AAC7D,EAAA,IAAI,WAAa,EAAA;AACf,IAAM,MAAA,KAAA,GAAQ,iBAAiB,WAAW,CAAA,CAAA;AAC1C,IAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,gBAAA,CAAiB,eAAe,CAAA,CAAA;AAC5D,IAAA,IAAI,aAAe,EAAA;AACjB,MAAO,OAAA,aAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}
1	+ {"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n \| \"accent\"\n \| \"actionable\"\n \| \"container\"\n \| \"differential\"\n \| \"draggable\"\n \| \"editable\"\n \| \"focused\"\n \| \"measured\"\n \| \"navigable\"\n \| \"overlayable\"\n \| \"selectable\"\n \| \"separable\"\n \| \"status\"\n \| \"taggable\"\n \| \"target\"\n \| \"text\";\n\nexport type ThemeName = string;\n\nexport const getCharacteristicValue = (\n themeName: ThemeName,\n characteristicName: characteristic,\n variant: string,\n scopeElement?: HTMLElement\n): string \| null => {\n const cssVariableName = `--salt-${characteristicName}-${variant}`;\n const scopeTarget =\n scopeElement \|\| document.body.querySelector(`.${themeName}`);\n if (scopeTarget) {\n const style = getComputedStyle(scopeTarget);\n const variableValue = style.getPropertyValue(cssVariableName);\n if (variableValue) {\n return variableValue;\n }\n }\n return null;\n};\n"],"names":[],"mappings":"AAoBO,MAAM,sBAAyB,GAAA,CACpC,SACA,EAAA,kBAAA,EACA,SACA,YACkB,KAAA;AAClB,EAAM,MAAA,eAAA,GAAkB,UAAU,kBAAsB,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA,CAAA;AACxD,EAAA,MAAM,cACJ,YAAgB,IAAA,QAAA,CAAS,IAAK,CAAA,aAAA,CAAc,IAAI,SAAW,CAAA,CAAA,CAAA,CAAA;AAC7D,EAAA,IAAI,WAAa,EAAA;AACf,IAAM,MAAA,KAAA,GAAQ,iBAAiB,WAAW,CAAA,CAAA;AAC1C,IAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,gBAAA,CAAiB,eAAe,CAAA,CAAA;AAC5D,IAAA,IAAI,aAAe,EAAA;AACjB,MAAO,OAAA,aAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist-es/packages/core/src/viewport/ViewportProvider.js CHANGED Viewed

@@ -1,5 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useLayoutEffect } from 'react';
+import { createContext, useContext, useState } from 'react';
+import '../utils/useId.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
+import '../salt-provider/SaltProvider.js';
 const ViewportContext = createContext(null);
 const ViewportProvider = ({ children }) => {
@@ -7,7 +10,7 @@ const ViewportProvider = ({ children }) => {
   const [viewport, setViewport] = useState(existingViewport);
   const noExistingViewport = existingViewport === null;
   const viewportValue = existingViewport || viewport || 0;
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     let observer = null;
     if (noExistingViewport) {
       observer = new ResizeObserver(

package/dist-es/packages/core/src/viewport/ViewportProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import {\n createContext~~,\n useLayoutEffect,\n~~ useState~~,\n~~ useContext~~,\n~~ ReactNode~~,\n~~} from \"react\";\n\nconst ViewportContext = createContext<number \| null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport \|\| viewport \|\| 0;\n\n ~~useLayoutEffect~~(() => {\n let observer: ResizeObserver \| null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":[],"mappings":"~~;;;AAQM~~,MAAA,eAAA,GAAkB,cAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmB,WAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAA,~~eAAA~~,~~CAAgB~~,MAAM;~~AACpB~~,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;"}
1	+ {"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number \| null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport \|\| viewport \|\| 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver \| null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":[],"mappings":";;;;;;AAGM,MAAA,eAAA,GAAkB,cAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmB,WAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;"}

package/dist-types/card/Card.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef } from "react";
+import "./Card.css";
+export interface CardProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * If `true`, the card will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content
+     * on the page.
+     */
+    interactable?: boolean;
+}
+/**
+ * Card component is a sheet if material that serves as an entry point to more detailed information.
+ * Cards display content composed of different elements whose size or supported actions vary.
+ */
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/card/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./Card";

package/dist-types/flex-layout/FlexLayout.d.ts CHANGED Viewed

@@ -25,6 +25,8 @@ export declare type FlexLayoutProps<T extends ElementType> = PolymorphicComponen
      */
     justify?: FlexContentAlignment;
     /**
+     * **Deprecated:** For separators see `StackLayout` component instead.
+     *
      * Adds a separator between elements if wrap is not active, default is false.
      */
     separators?: LayoutSeparator | true;

package/dist-types/flow-layout/FlowLayout.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
-import { ElementType, HTMLAttributes } from "react";
+import { ElementType, ReactElement } from "react";
 import { FlexLayoutProps } from "../flex-layout";
-export interface FlowLayoutProps extends HTMLAttributes<HTMLDivElement> {
+import { PolymorphicComponentPropWithRef } from "../utils";
+export declare type FlowLayoutProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
     /**
      * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is "stretch".
      */
@@ -13,5 +14,7 @@ export interface FlowLayoutProps extends HTMLAttributes<HTMLDivElement> {
      * Defines the alignment along the main axis, default is "start"
      */
     justify?: FlexLayoutProps<ElementType>["justify"];
-}
-export declare const FlowLayout: import("react").ForwardRefExoticComponent<FlowLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+}>;
+declare type FlowLayoutComponent = <T extends ElementType = "div">(props: FlowLayoutProps<T>) => ReactElement | null;
+export declare const FlowLayout: FlowLayoutComponent;
+export {};

package/dist-types/index.d.ts CHANGED Viewed

@@ -3,12 +3,14 @@ export * from "./border-item";
 export * from "./border-layout";
 export * from "./breakpoints";
 export * from "./button";
+export * from "./card";
 export * from "./flex-item";
 export * from "./flex-layout";
 export * from "./flow-layout";
 export * from "./grid-item";
 export * from "./grid-layout";
 export * from "./link";
+export * from "./panel";
 export * from "./stack-layout";
 export * from "./status-indicator";
 export * from "./text";

package/dist-types/panel/Panel.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from "react";
+import "./Panel.css";
+/**
+ * Panel component that acts as wrapper around a node
+ *
+ * @example
+ * const PanelExample = () => (
+ *   <Panel>
+ *     <p>This is a panel around some text.</p>
+ *   </Panel>
+ * );
+ *
+ */
+export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Styling variant; defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
+}
+export declare const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/panel/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./Panel";

package/dist-types/stack-layout/StackLayout.d.ts CHANGED Viewed

@@ -1,10 +1,16 @@
-import { ElementType, HTMLAttributes } from "react";
-import { FlexLayoutProps } from "../flex-layout";
-export interface StackLayoutProps extends HTMLAttributes<HTMLDivElement> {
+import { ElementType, ReactElement } from "react";
+import { FlexLayoutProps, LayoutDirection, LayoutSeparator } from "../flex-layout";
+import { PolymorphicComponentPropWithRef, ResponsiveProp } from "../utils";
+import "./StackLayout.css";
+export declare type StackLayoutProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
     /**
      * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is "stretch".
      */
     align?: FlexLayoutProps<ElementType>["align"];
+    /**
+     * Establishes the main-axis, defining the direction children are placed. Default is "column".
+     */
+    direction?: ResponsiveProp<LayoutDirection>;
     /**
      * Controls the space between items, default is 3.
      */
@@ -12,6 +18,8 @@ export interface StackLayoutProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Adds a separator between elements, default is false.
      */
-    separators?: FlexLayoutProps<ElementType>["separators"];
-}
-export declare const StackLayout: import("react").ForwardRefExoticComponent<StackLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+    separators?: LayoutSeparator | boolean;
+}>;
+declare type StackLayoutComponent = <T extends ElementType = "div">(props: StackLayoutProps<T>) => ReactElement | null;
+export declare const StackLayout: StackLayoutComponent;
+export {};

package/dist-types/theme/Theme.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export declare type characteristic = "accent" | "actionable" | "container" | "delay" | "disabled" | "draggable" | "target" | "editable" | "focused" | "measured" | "navigable" | "overlayable" | "selectable" | "separable" | "taggable" | "text" | "status" | "icon" | "shadow" | "size" | "spacing";
+export declare type characteristic = "accent" | "actionable" | "container" | "differential" | "draggable" | "editable" | "focused" | "measured" | "navigable" | "overlayable" | "selectable" | "separable" | "status" | "taggable" | "target" | "text";
 export declare type ThemeName = string;
 export declare const getCharacteristicValue: (themeName: ThemeName, characteristicName: characteristic, variant: string, scopeElement?: HTMLElement | undefined) => string | null;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "main": "dist-cjs/packages/core/src/index.js",
   "sideEffects": [
@@ -23,8 +23,8 @@
   "module": "dist-es/packages/core/src/index.js",
   "typings": "dist-types/index.d.ts",
   "dependencies": {
-    "classnames": "^2.2.6",
-    "@salt-ds/icons": "1.0.0"
+    "clsx": "^1.2.1",
+    "@salt-ds/icons": "1.1.0"
   },
   "files": [
     "dist-cjs",