@hanzogui/text 2.0.0

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@hanzogui/text",
+  "version": "2.0.0",
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
+  "source": "src/index.tsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "hanzo-gui-build",
+    "watch": "hanzo-gui-build --watch",
+    "clean": "hanzo-gui-build clean",
+    "clean:build": "hanzo-gui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/get-font-sized": "2.0.0-rc.29",
+    "@hanzogui/helpers": "2.0.0-rc.29",
+    "@hanzogui/web": "2.0.0-rc.29"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "2.0.0-rc.29",
+    "react": ">=19"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "module:jsx": "dist/jsx"
+}

package/src/Emphasis.tsx

@@ -0,0 +1,15 @@
+import { styled, Text } from '@hanzogui/web'
+
+export const Strong = styled(Text, {
+  render: 'strong',
+  fontWeight: 'bold',
+})
+
+export const Span = styled(Text, {
+  render: 'span',
+})
+
+export const Em = styled(Text, {
+  render: 'em',
+  fontStyle: 'italic',
+})

package/src/Headings.tsx

@@ -0,0 +1,117 @@
+import type { GetProps } from '@hanzogui/web'
+import { styled } from '@hanzogui/web'
+
+import { Paragraph } from './Paragraph'
+
+export const Heading = styled(Paragraph, {
+  render: 'span',
+  name: 'Heading',
+  role: 'heading',
+  fontFamily: '$heading',
+  size: '$8',
+  margin: 0,
+})
+
+export type HeadingProps = GetProps<typeof Heading>
+
+export const H1 = styled(Heading, {
+  name: 'H1',
+  render: 'h1',
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$10',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1' ? true : false,
+  },
+})
+
+export const H2 = styled(Heading, {
+  name: 'H2',
+  render: 'h2',
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$9',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1' ? true : false,
+  },
+})
+
+export const H3 = styled(Heading, {
+  name: 'H3',
+  render: 'h3',
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$8',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1' ? true : false,
+  },
+})
+
+export const H4 = styled(Heading, {
+  name: 'H4',
+  render: 'h4',
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$7',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1' ? true : false,
+  },
+})
+
+export const H5 = styled(Heading, {
+  name: 'H5',
+  render: 'h5',
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$6',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1' ? true : false,
+  },
+})
+
+export const H6 = styled(Heading, {
+  name: 'H6',
+  render: 'h6',
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$5',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1' ? true : false,
+  },
+})

package/src/Paragraph.tsx

@@ -0,0 +1,15 @@
+import type { GetProps } from '@hanzogui/web'
+import { styled } from '@hanzogui/web'
+
+import { SizableText } from './SizableText'
+
+export const Paragraph = styled(SizableText, {
+  name: 'Paragraph',
+  render: 'p',
+  userSelect: 'auto',
+  color: '$color',
+  size: '$true',
+  whiteSpace: 'normal',
+})
+
+export type ParagraphProps = GetProps<typeof Paragraph>

package/src/SizableText.tsx

@@ -0,0 +1,44 @@
+import { getFontSized } from '@hanzogui/get-font-sized'
+import type { GetProps } from '@hanzogui/web'
+import { Text, styled } from '@hanzogui/web'
+
+export const SizableText = styled(Text, {
+  name: 'SizableText',
+  fontFamily: '$body',
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$true',
+        color: '$color',
+      },
+    },
+
+    size: getFontSized,
+  },
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+// we are doing weird stuff to avoid bad types
+// TODO make this just work
+SizableText.staticConfig.variants!.fontFamily = {
+  '...': (val, extras) => {
+    // pass through inherit directly without font variant expansion
+    if (val === 'inherit') {
+      return { fontFamily: 'inherit' }
+    }
+
+    const sizeProp = extras.props['size']
+    const fontSizeProp = extras.props['fontSize']
+    const size =
+      sizeProp === '$true' && fontSizeProp
+        ? fontSizeProp
+        : extras.props['size'] || '$true'
+    return getFontSized(size, extras)
+  },
+}
+
+export type SizableTextProps = GetProps<typeof SizableText>

package/src/index.tsx

@@ -0,0 +1,6 @@
+export * from './Emphasis'
+export * from './SizableText'
+export * from './Paragraph'
+export * from './Headings'
+export * from './wrapChildrenInText'
+export * from './types'

package/src/types.ts

@@ -0,0 +1,19 @@
+import type { SizableTextProps } from './SizableText'
+
+export type TextContextStyles = {
+  color?: SizableTextProps['color']
+  fontWeight?: SizableTextProps['fontWeight']
+  fontSize?: SizableTextProps['fontSize']
+  fontFamily?: SizableTextProps['fontFamily']
+  fontStyle?: SizableTextProps['fontStyle']
+  letterSpacing?: SizableTextProps['letterSpacing']
+  textAlign?: SizableTextProps['textAlign']
+  ellipsis?: SizableTextProps['ellipsis']
+  maxFontSizeMultiplier?: number
+}
+
+export type TextParentStyles = TextContextStyles & {
+  // all the other text controls
+  textProps?: Partial<SizableTextProps>
+  noTextWrap?: boolean
+}

package/src/wrapChildrenInText.tsx

@@ -0,0 +1,62 @@
+import type { SizeTokens } from '@hanzogui/web'
+import React from 'react'
+
+import type { TextParentStyles } from './types'
+
+type Props = TextParentStyles & {
+  children?: React.ReactNode
+  size?: SizeTokens
+}
+
+export function wrapChildrenInText(
+  TextComponent: any,
+  propsIn: Props & {
+    unstyled?: boolean
+  },
+  extraProps?: Record<string, any>
+) {
+  const {
+    children,
+    textProps,
+    size,
+    noTextWrap,
+    color,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    textAlign,
+    fontStyle,
+    maxFontSizeMultiplier,
+  } = propsIn
+
+  if (noTextWrap || !children) {
+    return [children]
+  }
+
+  const props = {
+    ...extraProps,
+  }
+
+  // to avoid setting undefined
+  if (color) props.color = color
+  if (fontFamily) props.fontFamily = fontFamily
+  if (fontSize) props.fontSize = fontSize
+  if (fontWeight) props.fontWeight = fontWeight
+  if (letterSpacing) props.letterSpacing = letterSpacing
+  if (textAlign) props.textAlign = textAlign
+  if (size) props.size = size
+  if (fontStyle) props.fontStyle = fontStyle
+  if (maxFontSizeMultiplier) props.maxFontSizeMultiplier = maxFontSizeMultiplier
+
+  return React.Children.toArray(children).map((child, index) => {
+    return typeof child === 'string' ? (
+      // so "data-disable-theme" is a hack to fix themeInverse, don't ask me why
+      <TextComponent key={index} {...props} {...textProps}>
+        {child}
+      </TextComponent>
+    ) : (
+      child
+    )
+  })
+}

package/types/Emphasis.d.ts

@@ -0,0 +1,4 @@
+export declare const Strong: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {}, import("@gui/web").StaticConfigPublic>;
+export declare const Span: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {}, import("@gui/web").StaticConfigPublic>;
+export declare const Em: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {}, import("@gui/web").StaticConfigPublic>;
+//# sourceMappingURL=Emphasis.d.ts.map

package/types/Headings.d.ts

@@ -0,0 +1,31 @@
+import type { GetProps } from '@gui/web';
+export declare const Heading: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@gui/web").FontSizeTokens | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export type HeadingProps = GetProps<typeof Heading>;
+export declare const H1: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@gui/web").FontSizeTokens | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export declare const H2: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@gui/web").FontSizeTokens | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export declare const H3: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@gui/web").FontSizeTokens | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export declare const H4: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@gui/web").FontSizeTokens | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export declare const H5: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@gui/web").FontSizeTokens | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export declare const H6: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@gui/web").FontSizeTokens | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+//# sourceMappingURL=Headings.d.ts.map

package/types/Paragraph.d.ts

@@ -0,0 +1,7 @@
+import type { GetProps } from '@gui/web';
+export declare const Paragraph: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@gui/web").FontSizeTokens | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export type ParagraphProps = GetProps<typeof Paragraph>;
+//# sourceMappingURL=Paragraph.d.ts.map

package/types/SizableText.d.ts

@@ -0,0 +1,7 @@
+import type { GetProps } from '@gui/web';
+export declare const SizableText: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiTextElement, import("@gui/web").TextNonStyleProps, import("@gui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@gui/web").FontSizeTokens | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export type SizableTextProps = GetProps<typeof SizableText>;
+//# sourceMappingURL=SizableText.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Emphasis';
+export * from './SizableText';
+export * from './Paragraph';
+export * from './Headings';
+export * from './wrapChildrenInText';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/types/types.d.ts

@@ -0,0 +1,17 @@
+import type { SizableTextProps } from './SizableText';
+export type TextContextStyles = {
+    color?: SizableTextProps['color'];
+    fontWeight?: SizableTextProps['fontWeight'];
+    fontSize?: SizableTextProps['fontSize'];
+    fontFamily?: SizableTextProps['fontFamily'];
+    fontStyle?: SizableTextProps['fontStyle'];
+    letterSpacing?: SizableTextProps['letterSpacing'];
+    textAlign?: SizableTextProps['textAlign'];
+    ellipsis?: SizableTextProps['ellipsis'];
+    maxFontSizeMultiplier?: number;
+};
+export type TextParentStyles = TextContextStyles & {
+    textProps?: Partial<SizableTextProps>;
+    noTextWrap?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/types/wrapChildrenInText.d.ts

@@ -0,0 +1,12 @@
+import type { SizeTokens } from '@gui/web';
+import React from 'react';
+import type { TextParentStyles } from './types';
+type Props = TextParentStyles & {
+    children?: React.ReactNode;
+    size?: SizeTokens;
+};
+export declare function wrapChildrenInText(TextComponent: any, propsIn: Props & {
+    unstyled?: boolean;
+}, extraProps?: Record<string, any>): React.ReactNode[] | (number | bigint | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element)[];
+export {};
+//# sourceMappingURL=wrapChildrenInText.d.ts.map