@salt-ds/core 1.2.0 → 1.4.0

package/dist-es/packages/core/src/stack-layout/StackLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport {\n  FlexLayout,\n  FlexLayoutProps,\n  LayoutDirection,\n  LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n  ResponsiveProp,\n  useResponsiveProp,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>\n) => ReactElement | null;\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      children,\n      className,\n      direction = \"column\",\n      gap,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const flexGap = useResponsiveProp(gap, 3);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = useResponsiveProp(direction, \"column\");\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap-multiplier\": flexGap,\n    };\n    return (\n      <FlexLayout\n        className={clsx(\n          className,\n          withBaseName(),\n          withBaseName(flexDirection),\n          {\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          }\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AA6B5C,MAAM,WAAoC,GAAA,UAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,SAAA,EAAW,QAAQ,CAAA,CAAA;AAC3D,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,8BAAgC,EAAA,OAAA;AAAA,KAClC,CAAA;AACA,IAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,SAAA;AAAA,QACA,YAAa,EAAA;AAAA,QACb,aAAa,aAAa,CAAA;AAAA,QAC1B;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,CAAC,CAAC,kBAAA;AAAA,UAC/B,CAAC,kBACG,GAAA,YAAA,CAAa,CAAa,UAAA,EAAA,kBAAA,CAAA,CAAoB,IAC9C,EAAK,GAAA,kBAAA;AAAA,SACX;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAO,EAAA,iBAAA;AAAA,MACP,IAAM,EAAA,KAAA;AAAA,MACN,GAAK,EAAA,OAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport {\n  FlexLayout,\n  FlexLayoutProps,\n  LayoutDirection,\n  LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n  ResponsiveProp,\n  useResponsiveProp,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>\n) => ReactElement | null;\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      children,\n      className,\n      direction = \"column\",\n      gap,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const flexGap = useResponsiveProp(gap, 3);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = useResponsiveProp(direction, \"column\");\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap-multiplier\": flexGap,\n    };\n    return (\n      <FlexLayout\n        className={clsx(\n          withBaseName(),\n          withBaseName(flexDirection),\n          {\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          },\n          className\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AA6B5C,MAAM,WAAoC,GAAA,UAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,SAAA,EAAW,QAAQ,CAAA,CAAA;AAC3D,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,8BAAgC,EAAA,OAAA;AAAA,KAClC,CAAA;AACA,IAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,aAAa,CAAA;AAAA,QAC1B;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,CAAC,CAAC,kBAAA;AAAA,UAC/B,CAAC,kBACG,GAAA,YAAA,CAAa,CAAa,UAAA,EAAA,kBAAA,CAAA,CAAoB,IAC9C,EAAK,GAAA,kBAAA;AAAA,SACX;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAO,EAAA,iBAAA;AAAA,MACP,IAAM,EAAA,KAAA;AAAA,MACN,GAAK,EAAA,OAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -24,12 +24,16 @@ const Text = forwardRef(
     const Component = as || "div";
     const textStyles = { "--text-max-rows": maxRows, ...style };
     return /* @__PURE__ */ jsx(Component, {
-      className: clsx(withBaseName(), className, {
-        [withBaseName("disabled")]: disabled,
-        [withBaseName("lineClamp")]: maxRows,
-        [withBaseName(styleAs || "")]: styleAs,
-        [withBaseName(variant)]: variant
-      }),
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("lineClamp")]: maxRows,
+          [withBaseName(styleAs || "")]: styleAs,
+          [withBaseName(variant)]: variant
+        },
+        className
+      ),
       ...restProps,
       ref,
       style: textStyles,

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

@@ -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 \"./Text.css\";\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    /**\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      as,\n      children,\n      className,\n      disabled = false,\n      maxRows,\n      style,\n      styleAs,\n      variant = \"primary\",\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(\"disabled\")]: disabled,\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":";;;;;;;;;;AA4CA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAA,UAAA;AAAA,EACjC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,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,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,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;;;;"}
+{"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     * 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    /**\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      as,\n      children,\n      className,\n      disabled = false,\n      maxRows,\n      style,\n      styleAs,\n      variant = \"primary\",\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(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"lineClamp\")]: maxRows,\n            [withBaseName(styleAs || \"\")]: styleAs,\n            [withBaseName(variant)]: variant,\n          },\n          className\n        )}\n        {...restProps}\n        ref={ref}\n        style={textStyles}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AA4CA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAA,UAAA;AAAA,EACjC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,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;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAW,IAAA,EAAE,CAAI,GAAA,OAAA;AAAA,UAC/B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,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

@@ -1 +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;;;;"}
+{"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n  | \"accent\"\n  | \"actionable\"\n  | \"container\"\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  | \"differential\" /* **deprecated** */;\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-types/avatar/Avatar.d.ts

@@ -0,0 +1,27 @@
+import { HTMLAttributes, ReactNode } from "react";
+import "./Avatar.css";
+export declare type NameToInitials = (name?: string) => string;
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The name that Avatar represents.
+     */
+    name?: string;
+    /**
+     * Defines the function that gets initials. Default is capital first letter of each separate word in name.
+     * If a function is not passed or returns undefined, Avatar will default to Icon.
+     */
+    nameToInitials?: NameToInitials;
+    /**
+     * Image src of Avatar.
+     */
+    src?: string;
+    /**
+     * Multiplier for the base avatar.
+     */
+    size?: number;
+    /**
+     * Icon to be used as a default item. Defaults to `UserIcon`
+     */
+    fallbackIcon?: ReactNode;
+}
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/avatar/index.d.ts

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

package/dist-types/avatar/internal/useLoaded.d.ts

@@ -0,0 +1,2 @@
+import { ImgHTMLAttributes } from "react";
+export declare function useLoaded({ src }: ImgHTMLAttributes<HTMLImageElement>): false | "error" | "loaded";

package/dist-types/flex-item/FlexItem.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, ReactElement } from "react";
+import { ElementType, ReactElement, CSSProperties } from "react";
 import { ResponsiveProp, PolymorphicComponentPropWithRef } from "../utils";
 import "./FlexItem.css";
 export declare const FLEX_ITEM_ALIGNMENTS: readonly ["start", "end", "center", "stretch"];
@@ -9,14 +9,17 @@ export declare type FlexItemProps<T extends ElementType> = PolymorphicComponentP
      */
     align?: flexItemAlignment;
     /**
- * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.
-
- */
+     * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.
+     */
     shrink?: ResponsiveProp<number>;
     /**
      * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.
      */
     grow?: ResponsiveProp<number>;
+    /**
+     * Sets the initial main size of a flex item, default is "auto".
+     */
+    basis?: ResponsiveProp<CSSProperties["flexBasis"]>;
 }>;
 declare type FlexItemComponent = <T extends ElementType = "div">(props: FlexItemProps<T>) => ReactElement | null;
 export declare const FlexItem: FlexItemComponent;

package/dist-types/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./aria-announcer";
+export * from "./avatar";
 export * from "./border-item";
 export * from "./border-layout";
 export * from "./breakpoints";

package/dist-types/spinner/svgSpinners/SpinnerSVG.d.ts

@@ -1,5 +1,5 @@
 import { SVGAttributes } from "react";
 export declare const SpinnerSVG: (props: {
-    id: string;
+    id?: string;
     rest?: Omit<SVGAttributes<SVGSVGElement>, "id">;
 }) => JSX.Element;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "main": "dist-cjs/packages/core/src/index.js",
   "sideEffects": [
@@ -23,7 +23,7 @@
   "module": "dist-es/packages/core/src/index.js",
   "typings": "dist-types/index.d.ts",
   "dependencies": {
-    "@floating-ui/react": "^0.19.0",
+    "@floating-ui/react": "^0.20.0",
     "clsx": "^1.2.1",
     "@salt-ds/icons": "1.1.0"
   },