@tcn/ui 0.0.1

package/src/typography/headline/headline.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Headline } from './headline.js';
+
+const meta: Meta<typeof Headline> = {
+  title: 'Typography/Headline',
+  component: Headline,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    emphasis: {
+      control: { type: 'select' },
+      options: ['faint', 'normal', 'strong'],
+    },
+    hierarchy: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'tertiary'],
+    },
+    selectable: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Headline Text',
+    size: 'md',
+    emphasis: 'normal',
+    hierarchy: 'primary',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: 'Large Headline',
+    size: 'lg',
+    emphasis: 'normal',
+    hierarchy: 'primary',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: 'Small Headline',
+    size: 'sm',
+    emphasis: 'normal',
+    hierarchy: 'primary',
+  },
+};
+
+export const Strong: Story = {
+  args: {
+    children: 'Strong Headline',
+    size: 'md',
+    emphasis: 'strong',
+    hierarchy: 'primary',
+  },
+};
+
+export const Light: Story = {
+  args: {
+    children: 'Light Headline',
+    size: 'md',
+    emphasis: 'faint',
+    hierarchy: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Headline',
+    size: 'md',
+    emphasis: 'normal',
+    hierarchy: 'secondary',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    children: 'Tertiary Headline',
+    size: 'md',
+    emphasis: 'normal',
+    hierarchy: 'tertiary',
+  },
+};

package/src/typography/headline/headline.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
+import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
+import styles from './headline.module.css';
+
+export interface HeadlineOwnProps {
+  children?: string;
+  size?: Size;
+  emphasis?: Emphasis;
+  hierarchy?: Hierarchy;
+  color?: string;
+  pad?: string;
+  padStart?: string;
+  padEnd?: string;
+  padTop?: string;
+  padBottom?: string;
+  selectable?: boolean;
+}
+
+export type HeadlineProps = WithDetailedHTMLProps<HeadlineOwnProps, 'h1' | 'h2' | 'h3'>;
+
+export function Headline({
+  size = 'md',
+  emphasis = 'normal',
+  hierarchy = 'primary',
+  color,
+  children,
+  className,
+  style = {},
+  padStart,
+  padEnd,
+  padBottom,
+  padTop,
+  pad,
+  selectable = true,
+}: HeadlineProps) {
+  let As: React.ElementType;
+
+  if (size === 'lg') {
+    As = 'h1';
+  } else if (size === 'md') {
+    As = 'h2';
+  } else {
+    As = 'h3';
+  }
+
+  if (pad) {
+    style.padding = pad;
+  }
+
+  if (padStart) {
+    style.paddingInlineStart = padStart;
+  }
+
+  if (padEnd) {
+    style.paddingInlineEnd = padEnd;
+  }
+
+  if (padTop) {
+    style.paddingTop = padTop;
+  }
+
+  if (padBottom) {
+    style.paddingBottom = padBottom;
+  }
+
+  if (color) {
+    style.color = color;
+  }
+
+  return (
+    <As
+      data-hierarchy={hierarchy}
+      data-emphasis={emphasis}
+      data-selectable={selectable}
+      className={classnames(styles['headline'], 'headline', className)}
+      style={style}
+      data-size={size}
+    >
+      {children}
+    </As>
+  );
+}

package/src/typography/index.ts

@@ -0,0 +1,7 @@
+export * from './body_text/body_text.js';
+export * from './callout/callout.js';
+export * from './caption/caption.js';
+export * from './footnote/footnote.js';
+export * from './headline/headline.js';
+export * from './subheadline/subheadline.js';
+export * from './title/title.js';

package/src/typography/subheadline/subheadline.module.css

@@ -0,0 +1,56 @@
+.subheadline {
+  margin: 0;
+  padding: 0;
+  line-height: 1.3;
+  letter-spacing: 0.005em;
+}
+
+.subheadline[data-selectable="true"] {
+  user-select: auto;
+}
+
+.subheadline[data-selectable="false"] {
+  user-select: none;
+}
+
+/* Sizes */
+.subheadline[data-size="sm"] {
+  font-size: calc(12px * var(--scalar, 1));
+  line-height: 1.4;
+}
+
+.subheadline[data-size="md"] {
+  font-size: calc(14px * var(--scalar, 1));
+  line-height: 1.3;
+}
+
+.subheadline[data-size="lg"] {
+  font-size: calc(18px * var(--scalar, 1));
+  line-height: 1.25;
+}
+
+/* Hierarchy */
+.subheadline[data-hierarchy="primary"] {
+  opacity: 1;
+}
+
+.subheadline[data-hierarchy="secondary"] {
+  opacity: 0.85;
+}
+
+.subheadline[data-hierarchy="tertiary"] {
+  opacity: 0.7;
+}
+
+/* Emphasis */
+.subheadline[data-emphasis="strong"] {
+  font-weight: 600;
+}
+
+.subheadline[data-emphasis="normal"] {
+  font-weight: 500;
+}
+
+.subheadline[data-emphasis="light"] {
+  font-weight: 400;
+}

package/src/typography/subheadline/subheadline.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Subheadline } from './subheadline.js';
+
+const meta: Meta<typeof Subheadline> = {
+  title: 'Typography/Subheadline',
+  component: Subheadline,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    emphasis: {
+      control: { type: 'select' },
+      options: ['faint', 'normal', 'strong'],
+    },
+    hierarchy: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'tertiary'],
+    },
+    selectable: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Subheadline Text',
+    size: 'md',
+    emphasis: 'normal',
+    hierarchy: 'primary',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: 'Large Subheadline',
+    size: 'lg',
+    emphasis: 'normal',
+    hierarchy: 'primary',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: 'Small Subheadline',
+    size: 'sm',
+    emphasis: 'normal',
+    hierarchy: 'primary',
+  },
+};
+
+export const Strong: Story = {
+  args: {
+    children: 'Strong Subheadline',
+    size: 'md',
+    emphasis: 'strong',
+    hierarchy: 'primary',
+  },
+};
+
+export const Light: Story = {
+  args: {
+    children: 'Light Subheadline',
+    size: 'md',
+    emphasis: 'faint',
+    hierarchy: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Subheadline',
+    size: 'md',
+    emphasis: 'normal',
+    hierarchy: 'secondary',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    children: 'Tertiary Subheadline',
+    size: 'md',
+    emphasis: 'normal',
+    hierarchy: 'tertiary',
+  },
+};

package/src/typography/subheadline/subheadline.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
+import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
+import styles from './subheadline.module.css';
+
+export interface SubheadlineOwnProps {
+  children?: string;
+  size?: Size;
+  emphasis?: Emphasis;
+  hierarchy?: Hierarchy;
+  color?: string;
+  pad?: string;
+  padStart?: string;
+  padEnd?: string;
+  padTop?: string;
+  padBottom?: string;
+  selectable?: boolean;
+}
+
+export type SubheadlineProps = WithDetailedHTMLProps<
+  SubheadlineOwnProps,
+  'h3' | 'h4' | 'h5'
+>;
+
+export function Subheadline({
+  size = 'md',
+  emphasis = 'normal',
+  hierarchy = 'primary',
+  color,
+  children,
+  className,
+  style = {},
+  padStart,
+  padEnd,
+  padBottom,
+  padTop,
+  pad,
+  selectable = true,
+}: SubheadlineProps) {
+  let As: React.ElementType;
+
+  if (size === 'lg') {
+    As = 'h3';
+  } else if (size === 'md') {
+    As = 'h4';
+  } else {
+    As = 'h5';
+  }
+
+  if (pad) {
+    style.padding = pad;
+  }
+
+  if (padStart) {
+    style.paddingInlineStart = padStart;
+  }
+
+  if (padEnd) {
+    style.paddingInlineEnd = padEnd;
+  }
+
+  if (padTop) {
+    style.paddingTop = padTop;
+  }
+
+  if (padBottom) {
+    style.paddingBottom = padBottom;
+  }
+
+  if (color) {
+    style.color = color;
+  }
+
+  return (
+    <As
+      data-hierarchy={hierarchy}
+      data-emphasis={emphasis}
+      data-selectable={selectable}
+      className={classnames(styles['subheadline'], 'subheadline', className)}
+      style={style}
+      data-size={size}
+    >
+      {children}
+    </As>
+  );
+}

package/src/typography/title/title.module.css

@@ -0,0 +1,53 @@
+.title {
+  margin: 0;
+  padding: 0;
+  line-height: 1.1;
+  color: rgb(57, 85, 120);
+}
+
+.title[data-selectable="true"] {
+  user-select: auto;
+}
+
+.title[data-selectable="false"] {
+  user-select: none;
+}
+
+/* Sizes */
+.title[data-size="sm"] {
+  font-size: calc(16px * var(--scalar, 1));
+}
+
+.title[data-size="md"] {
+  font-size: calc(18px * var(--scalar, 1));
+}
+
+.title[data-size="lg"] {
+  font-size: calc(21px * var(--scalar, 1));
+}
+
+/* Hierarchy */
+.title[data-hierarchy="primary"] {
+  opacity: 1;
+}
+
+.title[data-hierarchy="secondary"] {
+  opacity: 0.85;
+}
+
+.title[data-hierarchy="tertiary"] {
+  opacity: 0.7;
+}
+
+/* Emphasis */
+.title[data-emphasis="strong"] {
+  font-weight: 700;
+}
+
+.title[data-emphasis="normal"] {
+  font-weight: 400;
+}
+
+.title[data-emphasis="light"] {
+  font-weight: 200;
+}

package/src/typography/title/title.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Title } from './title.js';
+import type { Size, Emphasis, Hierarchy } from '../../utils/index.js';
+import { VStack } from '../../stacks/v_stack.js';
+
+interface SBTitleProps {
+  size: Size;
+  emphasis: Emphasis;
+  hierarchy: Hierarchy;
+}
+
+export default {
+  title: 'Typography/Title',
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      defaultValue: 'md',
+    },
+    emphasis: {
+      control: 'select',
+      options: ['faint', 'normal', 'strong'],
+      defaultValue: 'normal',
+    },
+    hierarchy: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+      defaultValue: 'primary',
+    },
+  },
+  args: {
+    size: 'md',
+    emphasis: 'normal',
+    hierarchy: 'primary',
+  },
+};
+
+export function Baseline({ size, emphasis, hierarchy }: SBTitleProps) {
+  return (
+    <VStack gap="16px" hAlign="start">
+      <Title size={size} emphasis={emphasis} hierarchy={hierarchy}>
+        Title Text
+      </Title>
+    </VStack>
+  );
+}

package/src/typography/title/title.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
+import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
+import styles from './title.module.css';
+
+export interface TitleOwnProps {
+  children?: string;
+  size?: Size;
+  emphasis?: Emphasis;
+  hierarchy?: Hierarchy;
+  color?: string;
+  pad?: string;
+  padStart?: string;
+  padEnd?: string;
+  padTop?: string;
+  padBottom?: string;
+  selectable?: boolean;
+  as?: string;
+}
+
+export type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;
+
+export function Title({
+  size = 'md',
+  emphasis = 'normal',
+  hierarchy = 'primary',
+  color,
+  children,
+  className,
+  style = {},
+  padStart,
+  padEnd,
+  padBottom,
+  padTop,
+  pad,
+  selectable = true,
+  as,
+}: TitleProps) {
+  let As: React.ElementType = as as React.ElementType;
+
+  if (as == null) {
+    if (size === 'lg') {
+      As = 'h1';
+    } else if (size === 'md') {
+      As = 'h2';
+    } else {
+      As = 'h3';
+    }
+  }
+
+  if (pad) {
+    style.padding = pad;
+  }
+
+  if (padStart) {
+    style.paddingInlineStart = padStart;
+  }
+
+  if (padEnd) {
+    style.paddingInlineEnd = padEnd;
+  }
+
+  if (padTop) {
+    style.paddingTop = padTop;
+  }
+
+  if (padBottom) {
+    style.paddingBottom = padBottom;
+  }
+
+  if (color) {
+    style.color = color;
+  }
+
+  return (
+    <As
+      data-hierarchy={hierarchy}
+      data-emphasis={emphasis}
+      data-selectable={selectable}
+      className={classnames(styles['title'], 'title', className)}
+      style={style}
+      data-size={size}
+    >
+      {children}
+    </As>
+  );
+}