@spark-web/text 1.2.0 → 2.0.0-rc.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @spark-web/text
 
+## 2.0.0-rc.1
+
+### Major Changes
+
+- rc
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.1
+  - @spark-web/utils@2.0.0-rc.1
+  - @spark-web/box@2.0.0-rc.1
+
+## 2.0.0-rc.0
+
+### Major Changes
+
+- rc versio
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.0
+  - @spark-web/box@2.0.0-rc.0
+  - @spark-web/utils@2.0.0-rc.0
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/declarations/src/context.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const TextContext: import("react").Context<{
     size: "small" | "xsmall" | "standard" | "large";
-    tone: "link" | "placeholder" | "disabled" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
+    tone: "link" | "disabled" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
     weight: "regular" | "semibold";
 } | undefined>;
 export declare function useTextContext(): {
     size: "small" | "xsmall" | "standard" | "large";
-    tone: "link" | "placeholder" | "disabled" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
+    tone: "link" | "disabled" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
     weight: "regular" | "semibold";
 } | undefined;

package/dist/declarations/src/default-text-props.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { UseTextProps } from './use-text';
+import type { UseTextProps } from "./use-text.js";
 declare type DefaultTextProps = {
     size?: NonNullable<UseTextProps['size']>;
     tone?: NonNullable<UseTextProps['tone']>;
@@ -7,10 +7,10 @@ declare type DefaultTextProps = {
 };
 export declare function DefaultTextPropsProvider({ children, size, tone, weight, }: DefaultTextProps & {
     children: ReactNode;
-}): JSX.Element;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const useDefaultTextProps: ({ size: sizeProp, tone: toneProp, weight: weightProp, }: DefaultTextProps) => {
     size: "small" | "xsmall" | "standard" | "large";
-    tone: "link" | "placeholder" | "disabled" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
+    tone: "link" | "disabled" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
     weight: "regular" | "semibold";
 };
 export {};

package/dist/declarations/src/index.d.ts

@@ -1,11 +1,11 @@
-export { useTextContext } from './context';
-export { DefaultTextPropsProvider, useDefaultTextProps, } from './default-text-props';
-export { Strong } from './strong';
-export { Text } from './text';
-export { useForegroundTone } from './use-foreground-tone';
-export { useOverflowStrategy } from './use-overflow-strategy';
-export { createTextStyles, useText } from './use-text';
-export type { StrongProps } from './strong';
-export type { TextProps } from './text';
-export type { ForegroundTone } from './use-foreground-tone';
-export type { TextOverflowStrategy } from './use-overflow-strategy';
+export { useTextContext } from "./context.js";
+export { DefaultTextPropsProvider, useDefaultTextProps, } from "./default-text-props.js";
+export { Strong } from "./strong.js";
+export { Text } from "./text.js";
+export { useForegroundTone } from "./use-foreground-tone.js";
+export { useOverflowStrategy } from "./use-overflow-strategy.js";
+export { createTextStyles, useText } from "./use-text.js";
+export type { StrongProps } from "./strong.js";
+export type { TextProps } from "./text.js";
+export type { ForegroundTone } from "./use-foreground-tone.js";
+export type { TextOverflowStrategy } from "./use-overflow-strategy.js";

package/dist/declarations/src/strong.d.ts

@@ -2,4 +2,4 @@ import type { ReactNode } from 'react';
 export declare type StrongProps = {
     children: ReactNode;
 };
-export declare const Strong: ({ children }: StrongProps) => JSX.Element;
+export declare const Strong: ({ children }: StrongProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/declarations/src/text.d.ts

@@ -1,8 +1,8 @@
 import type { BoxProps } from '@spark-web/box';
 import type { DataAttributeMap } from '@spark-web/utils/internal';
 import type { CSSProperties, ReactNode } from 'react';
-import type { TextOverflowStrategy } from './use-overflow-strategy';
-import type { UseTextProps } from './use-text';
+import type { TextOverflowStrategy } from "./use-overflow-strategy.js";
+import type { UseTextProps } from "./use-text.js";
 declare type InlineProps = {
     align?: never;
     /** Display as an inline element. */
@@ -28,8 +28,8 @@ export declare type TextProps = Partial<UseTextProps> & {
     /** Transform the text casing. */
     transform?: CSSProperties['textTransform'];
 } & (InlineProps | BlockProps);
-export declare const Text: <Comp extends import("react").ElementType<any> = "div">(props: {
+export declare const Text: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
     as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+    ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
 } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & TextProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/declarations/src/use-text.d.ts

@@ -1,5 +1,5 @@
 import type { BrighteTextDefinition, BrighteTheme } from '@spark-web/theme';
-import type { ForegroundTone } from './use-foreground-tone';
+import type { ForegroundTone } from "./use-foreground-tone.js";
 export declare type UseTextProps = {
     /** Apply leading-trim styles. */
     baseline?: boolean;
@@ -10,7 +10,7 @@ export declare type UseTextProps = {
     /** The weight of the text. */
     weight: keyof BrighteTheme['typography']['fontWeight'];
 };
-export declare function useText({ baseline, size, tone, weight }: UseTextProps): (import("@emotion/serialize").CSSObject | undefined)[];
+export declare function useText({ baseline, size, tone, weight }: UseTextProps): any[];
 export declare function createTextStyles({ fontSize, lineHeight, trims }: BrighteTextDefinition, { includeTrims }?: {
     includeTrims?: boolean | undefined;
 }): {

package/dist/spark-web-text.cjs.d.ts

@@ -1 +1,2 @@
 export * from "./declarations/src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXRleHQuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/dist/spark-web-text.cjs.dev.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var css = require('@emotion/css');
+var react$1 = require('@emotion/react');
 var theme = require('@spark-web/theme');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -61,7 +61,7 @@ var Strong = function Strong(_ref) {
     fontWeight: theme$1.typography.fontWeight.semibold
   };
   return /*#__PURE__*/jsxRuntime.jsx("strong", {
-    className: css.css(styles),
+    css: react$1.css(styles),
     children: children
   });
 };
@@ -212,14 +212,14 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      className: css.css(styles),
+      css: react$1.css(styles),
       children: children
     }));
   }
 
   // prepare block variant
   var content = overflowStrategy ? /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: css.css(overflowStyles),
+    css: react$1.css(overflowStyles),
     children: children
   }) : children;
   var textContextValue = react.useMemo(function () {
@@ -236,7 +236,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      className: css.css(styles),
+      css: react$1.css(styles),
       children: content
     }))
   });

package/dist/spark-web-text.cjs.prod.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var css = require('@emotion/css');
+var react$1 = require('@emotion/react');
 var theme = require('@spark-web/theme');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -61,7 +61,7 @@ var Strong = function Strong(_ref) {
     fontWeight: theme$1.typography.fontWeight.semibold
   };
   return /*#__PURE__*/jsxRuntime.jsx("strong", {
-    className: css.css(styles),
+    css: react$1.css(styles),
     children: children
   });
 };
@@ -212,14 +212,14 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      className: css.css(styles),
+      css: react$1.css(styles),
       children: children
     }));
   }
 
   // prepare block variant
   var content = overflowStrategy ? /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: css.css(overflowStyles),
+    css: react$1.css(overflowStyles),
     children: children
   }) : children;
   var textContextValue = react.useMemo(function () {
@@ -236,7 +236,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      className: css.css(styles),
+      css: react$1.css(styles),
       children: content
     }))
   });

package/dist/spark-web-text.esm.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import { useTheme } from '@spark-web/theme';
 import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -57,7 +57,7 @@ var Strong = function Strong(_ref) {
     fontWeight: theme.typography.fontWeight.semibold
   };
   return /*#__PURE__*/jsx("strong", {
-    className: css(styles),
+    css: css(styles),
     children: children
   });
 };
@@ -208,14 +208,14 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      className: css(styles),
+      css: css(styles),
       children: children
     }));
   }
 
   // prepare block variant
   var content = overflowStrategy ? /*#__PURE__*/jsx("span", {
-    className: css(overflowStyles),
+    css: css(overflowStyles),
     children: children
   }) : children;
   var textContextValue = useMemo(function () {
@@ -232,7 +232,7 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      className: css(styles),
+      css: css(styles),
       children: content
     }))
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text",
-  "version": "1.2.0",
+  "version": "2.0.0-rc.1",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -15,11 +15,11 @@
     "README.md"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.19.0",
-    "@emotion/css": "^11.9.0",
-    "@spark-web/box": "^1.2.0",
-    "@spark-web/theme": "^3.2.0",
-    "@spark-web/utils": "^1.3.0"
+    "@babel/runtime": "^7.25.0",
+    "@emotion/react": "^11.13.5",
+    "@spark-web/box": "^2.0.0-rc.1",
+    "@spark-web/theme": "^4.0.0-rc.1",
+    "@spark-web/utils": "^2.0.0-rc.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",