@tcn/ui 0.0.1

package/src/themes/themes/windows_98/windows_98_theme.ts

@@ -0,0 +1,4 @@
+import css from './windows_98.css?raw';
+
+export const windows98StyleSheet = new CSSStyleSheet();
+windows98StyleSheet.replaceSync(css);

package/src/tokens/badge/badge.module.css

@@ -0,0 +1,14 @@
+.badge-bubble {
+  position: absolute;
+  transform: translate(-50%, -75%);
+}
+
+body[dir="ltr"] .badge-bubble {
+  top: 0;
+  left: 100%;
+}
+
+body[dir="rtl"] .badge-bubble {
+  top: 0;
+  left: 0;
+}

package/src/tokens/badge/badge.stories.tsx

@@ -0,0 +1,25 @@
+import { ZStack } from '../../stacks/z_stack.js';
+import React from 'react';
+import { Badge } from './badge.js';
+import { Button } from '../../actions/index.js';
+
+export default {
+  title: 'src/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+};
+
+export function Default(props: any) {
+  return (
+    <ZStack>
+      <Badge
+        value={10}
+        // backgroundColor="var(--accent-color)"
+        // textColor="white"
+        {...props}
+      >
+        <Button>Hello</Button>
+      </Badge>
+    </ZStack>
+  );
+}

package/src/tokens/badge/badge.tsx

@@ -0,0 +1,56 @@
+import React, { HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { Spacer } from '../../stacks/spacer.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { Bubble } from '../bubble/bubble.js';
+import styles from './badge.module.css';
+
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+  value: React.ReactNode;
+  backgroundColor?: string;
+  textColor?: string;
+}
+
+export const Badge = React.forwardRef(
+  (
+    {
+      value,
+      children,
+      backgroundColor,
+      textColor: color,
+      className,
+      ...props
+    }: BadgeProps,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    return (
+      <ZStack
+        inline
+        width="auto"
+        height="auto"
+        ref={ref}
+        vAlign="end"
+        hAlign="end"
+        zIndex={0}
+        className={classNames('badge', className)}
+        {...props}
+      >
+        <ZStack zIndex={0} inline width="auto" height="auto">
+          {children}
+        </ZStack>
+        <VStack zIndex={1} height="100%" width="auto">
+          <Bubble
+            className={classNames(styles['badge-bubble'], 'badge-bubble')}
+            backgroundColor={backgroundColor}
+            textColor={color}
+            elevate
+          >
+            {value}
+          </Bubble>
+          <Spacer height="100%" />
+        </VStack>
+      </ZStack>
+    );
+  }
+);

package/src/tokens/bubble/bubble.module.css

@@ -0,0 +1,11 @@
+.bubble {
+  color: var(--bubble-text-color, inherit);
+  background-color: var(--bubble-color, transparent);
+  box-sizing: border-box;
+  font-size: calc(11px * var(--scalar, 1));
+  border-radius: calc(10px * var(--scalar, 1));
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
+  min-height: calc(20px * var(--scalar, 1));
+  min-width: calc(20px * var(--scalar, 1));
+  overflow: hidden;
+}

package/src/tokens/bubble/bubble.stories.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { Bubble } from './bubble.js';
+
+export const Base = (args: any) => {
+  return <Bubble {...args}>0</Bubble>;
+};
+
+export const Styled = () => {
+  return (
+    <div>This story needs to be updated.</div>
+    // <FieldSet>
+    //   <FieldRow
+    //     label={'Custom Color'}
+    //     value={
+    //       <Bubble
+    //         elevate
+    //         backgroundColor="red"
+    //         textColor="white"
+    //       >{`+${randomWords.length}`}</Bubble>
+    //     }
+    //   />
+    //   <FieldRow
+    //     label={'Accent Color'}
+    //     value={
+    //       <Bubble
+    //         elevate
+    //         backgroundColor="var(--accent-color)"
+    //         textColor="white"
+    //         title={randomWords.toString()}
+    //       >{`+${randomWords.length}`}</Bubble>
+    //     }
+    //   />
+    //   <FieldRow
+    //     label={'Multiple Children'}
+    //     value={
+    //       <Bubble elevate>
+    //         <Spacer width="4px" />
+    //         <BodyText size="sm">Child1</BodyText>
+    //         <Spacer width="4px" />
+    //         <BodyText size="sm">Child2</BodyText>
+    //         <Spacer width="4px" />
+    //         <BodyText size="sm">Child3</BodyText>
+    //         <Spacer width="4px" />
+    //       </Bubble>
+    //     }
+    //   />
+    //   <FieldRow
+    //     label={'Large text Child'}
+    //     value={
+    //       <Bubble elevate>
+    //         <Spacer width="4px" />
+    //         <BodyText size="lg">Hover to View Items</BodyText>
+    //         <Spacer width="4px" />
+    //       </Bubble>
+    //     }
+    //   />
+    // </FieldSet>
+  );
+};
+
+const _randomWords = [
+  'Zephyr',
+  'Serendipity',
+  'Obsidian',
+  'Quixotic',
+  'Ethereal',
+  'Nocturnal',
+  'Intrepid',
+  'Labyrinth',
+  'Melancholy',
+  'Euphoria',
+  'Mirage',
+  'Elixir',
+  'Equinox',
+  'Enigma',
+  'Zenith',
+  'Abyss',
+  'Nirvana',
+  'Utopia',
+  'Dystopia',
+  'Paradox',
+  'Serene',
+  'Tranquil',
+  'Idyllic',
+  'Blissful',
+  'Euphoric',
+  'Ecstatic',
+  'Joyful',
+  'Happy',
+  'Content',
+  'Satisfied',
+  'Grateful',
+  'Optimistic',
+  'Hopeful',
+  'Enthusiastic',
+  'Excited',
+  'Eager',
+  'Ambitious',
+  'Determined',
+  'Persistent',
+  'Resilient',
+  'Courageous',
+  'Brave',
+  'Strong',
+  'Powerful',
+  'Influential',
+  'Successful',
+  'Wealthy',
+  'Famous',
+  'Renowned',
+  'Legendary',
+  'Iconic',
+  'Timeless',
+  'Eternal',
+  'Infinite',
+  'Boundless',
+  'Limitless',
+  'Endless',
+  'Ceaseless',
+  'Continuous',
+  'Perpetual',
+  'Everlasting',
+  'Unending',
+  'Permanent',
+  'Lasting',
+  'Durable',
+  'Robust',
+  'Sturdy',
+  'Resilient',
+  'Tough',
+  'Hard',
+  'Strong',
+  'Powerful',
+  'Mighty',
+  'Forcible',
+  'Vigorous',
+  'Energetic',
+  'Lively',
+  'Animated',
+  'Spirited',
+  'Enthusiastic',
+  'Passionate',
+  'Fervent',
+  'Ardent',
+  'Zealous',
+  'Avid',
+  'Keen',
+  'Eager',
+  'Desirous',
+  'Yearning',
+  'Longing',
+  'Craving',
+  'Coveting',
+  'Wanting',
+  'Needing',
+  'Requiring',
+  'Demanding',
+  'Insisting',
+  'Persisting',
+  'Enduring',
+  'Lasting',
+];
+
+export default {
+  title: 'src/Bubble',
+  component: Bubble,
+  tags: ['autodocs'],
+};

package/src/tokens/bubble/bubble.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames';
+import React, { HTMLAttributes } from 'react';
+import styles from './bubble.module.css';
+import { theme } from '../../themes/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { Size } from '../../utils/index.js';
+
+export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  backgroundColor?: string;
+  textColor?: string;
+  elevate?: boolean;
+  size?: Size;
+}
+
+export const Bubble = React.forwardRef(function Bubble(
+  {
+    children,
+    className,
+    style: defaultStyle,
+    backgroundColor = theme.accentColor,
+    textColor = '#fff',
+    size = 'md',
+    elevate = false,
+    ...props
+  }: BubbleProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const style = {
+    '--bubble-text-color': textColor,
+    '--bubble-color': backgroundColor,
+    ...defaultStyle,
+  } as React.CSSProperties;
+
+  return (
+    <HStack
+      inline
+      className={classNames(styles.bubble, 'bubble', className)}
+      width="auto"
+      height="auto"
+      ref={ref}
+      style={style}
+      hAlign="center"
+      vAlign="center"
+      data-size={size}
+      data-elevate={elevate}
+      padding="4px"
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

package/src/tokens/chip/chip.module.css

@@ -0,0 +1,13 @@
+.chip {
+  box-sizing: border-box;
+  color: var(--chip-color, inherit);
+  background-color: transparent;
+  width: auto;
+  height: auto;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  padding: calc(2px * var(--scalar, 1)) calc(4px * var(--scalar, 1));
+  border-radius: calc(10px * var(--scalar, 1));
+  border: 1px solid var(--chip-color, inherit);
+}

package/src/tokens/chip/chip.stories.tsx

@@ -0,0 +1,51 @@
+import { HStack } from '../../stacks/h_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import React from 'react';
+import { SlimButton } from '../../actions/index.js';
+import { Chip } from './chip.js';
+import { BodyText } from '../../typography/index.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+
+export default {
+  title: 'src/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+};
+
+export const Default = () => <Chip>Chip</Chip>;
+
+export const Disabled = () => <Chip disabled>Disabled Chip</Chip>;
+
+export const WithIcon = () => (
+  <Chip>
+    <HStack>
+      <BodyText padStart="8px">Hola Mundo</BodyText>
+      <Spacer width="8px" />
+      <SlimButton size="sm" hierarchy="tertiary">
+        <CrossIcon size="sm" />
+      </SlimButton>
+    </HStack>
+  </Chip>
+);
+
+export const AllVariations = () => (
+  <div>This story needs to be updated.</div>
+  // <FieldSet legend="Chip Variations" width="400px">
+  //   <FieldRow label="Default" value={<Chip>Chip</Chip>} />
+  //   <FieldRow label="Disabled" value={<Chip disabled>Disabled Chip</Chip>} />
+  //   <FieldRow
+  //     label="With Icon"
+  //     value={
+  //       <Chip>
+  //         <HStack>
+  //           <BodyText padStart="8px">Hola Mundo</BodyText>
+  //           <Spacer width="8px" />
+  //           <SlimButton size="sm" hierarchy="tertiary">
+  //             <CrossIcon size="sm" />
+  //           </SlimButton>
+  //         </HStack>
+  //       </Chip>
+  //     }
+  //   />
+  // </FieldSet>
+);

package/src/tokens/chip/chip.tsx

@@ -0,0 +1,36 @@
+import { HStack, HStackProps } from '../../stacks/h_stack.js';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './chip.module.css';
+import { theme } from '../../themes/index.js';
+
+export interface ChipProps extends HStackProps {
+  children?: React.ReactNode;
+  color?: string;
+  disabled?: boolean;
+}
+
+export const Chip = React.forwardRef(function Chip(
+  { children, style, className, color = theme.accentColor, ...props }: ChipProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const finalStyle = {
+    '--chip-color': color,
+    ...style,
+  };
+
+  return (
+    <HStack
+      ref={ref}
+      inline
+      width="auto"
+      height="auto"
+      vAlign="center"
+      className={classNames(styles.chip, 'chip', className)}
+      style={finalStyle}
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

package/src/tokens/index.ts

@@ -0,0 +1,3 @@
+export * from './chip/chip.js';
+export * from './badge/badge.js';
+export * from './bubble/bubble.js';

package/src/typography/__tests__/sanity.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, test } from 'vitest';
+
+describe('Sanity', () => {
+  test('Truthy', () => {
+    expect(true).toBeTruthy();
+  });
+});

package/src/typography/body_text/body_text.module.css

@@ -0,0 +1,60 @@
+.body-text {
+  display: inline-block;
+  line-height: 1.5;
+}
+
+.body-text[data-word-break="true"] {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.body-text[data-selectable="true"] {
+  user-select: auto;
+}
+
+.body-text[data-selectable="false"] {
+  user-select: none;
+}
+
+/* Sizes */
+.body-text[data-size="sm"] {
+  font-size: calc(10px * var(--scalar, 1));
+  line-height: 1.7;
+}
+
+.body-text[data-size="md"] {
+  font-size: calc(12px * var(--scalar, 1));
+  line-height: 1.5;
+}
+
+.body-text[data-size="lg"] {
+  font-size: calc(14px * var(--scalar, 1));
+  line-height: 1.3;
+}
+
+/* Hierarchy */
+.body-text[data-hierarchy="primary"] {
+  opacity: 1;
+}
+
+.body-text[data-hierarchy="secondary"] {
+  opacity: 0.85;
+}
+
+.body-text[data-hierarchy="tertiary"] {
+  opacity: 0.7;
+}
+
+/* Emphasis */
+.body-text[data-emphasis="strong"] {
+  font-weight: 700;
+}
+
+.body-text[data-emphasis="normal"] {
+  font-weight: 400;
+}
+
+.body-text[data-emphasis="light"] {
+  font-weight: 200;
+}

package/src/typography/body_text/body_text.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { BodyText } from './body_text.js';
+
+interface SBBodyTextProps {
+  size: Size;
+  emphasis: Emphasis;
+  hierarchy: Hierarchy;
+}
+
+export default {
+  title: 'Typography/Body Text',
+  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 }: SBBodyTextProps) {
+  return (
+    <VStack gap="16px" hAlign="start">
+      <BodyText size={size} emphasis={emphasis} hierarchy={hierarchy}>
+        Body Text
+      </BodyText>
+    </VStack>
+  );
+}

package/src/typography/body_text/body_text.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
+import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
+import classnames from 'classnames';
+import styles from './body_text.module.css';
+
+export interface BodyTextOwnProps {
+  size?: Size;
+  emphasis?: Emphasis;
+  hierarchy?: Hierarchy;
+  color?: string;
+  pad?: string;
+  padStart?: string;
+  padEnd?: string;
+  padTop?: string;
+  padBottom?: string;
+  selectable?: boolean;
+  breakWords?: boolean;
+}
+
+export type BodyTextProps = WithDetailedHTMLProps<BodyTextOwnProps, 'div'>;
+
+export function BodyText({
+  size = 'md',
+  emphasis = 'normal',
+  hierarchy = 'primary',
+  color,
+  children,
+  className,
+  style = {},
+  padStart,
+  padEnd,
+  padBottom,
+  padTop,
+  pad,
+  selectable = true,
+  breakWords = false,
+}: BodyTextProps) {
+  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 (
+    <div
+      data-hierarchy={hierarchy}
+      data-emphasis={emphasis}
+      data-selectable={selectable}
+      className={classnames(styles['body-text'], 'body-text', className)}
+      style={style}
+      data-size={size}
+      data-word-break={breakWords}
+    >
+      {children}
+    </div>
+  );
+}

package/src/typography/callout/callout.module.css

@@ -0,0 +1,55 @@
+.callout {
+  display: inline-block;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+}
+
+.callout[data-selectable="true"] {
+  user-select: auto;
+}
+
+.callout[data-selectable="false"] {
+  user-select: none;
+}
+
+/* Sizes */
+.callout[data-size="sm"] {
+  font-size: calc(13px * var(--scalar, 1));
+  line-height: 1.5;
+}
+
+.callout[data-size="md"] {
+  font-size: calc(15px * var(--scalar, 1));
+  line-height: 1.4;
+}
+
+.callout[data-size="lg"] {
+  font-size: calc(17px * var(--scalar, 1));
+  line-height: 1.35;
+}
+
+/* Hierarchy */
+.callout[data-hierarchy="primary"] {
+  opacity: 1;
+}
+
+.callout[data-hierarchy="secondary"] {
+  opacity: 0.85;
+}
+
+.callout[data-hierarchy="tertiary"] {
+  opacity: 0.7;
+}
+
+/* Emphasis */
+.callout[data-emphasis="strong"] {
+  font-weight: 600;
+}
+
+.callout[data-emphasis="normal"] {
+  font-weight: 400;
+}
+
+.callout[data-emphasis="light"] {
+  font-weight: 300;
+}