tharaday 0.1.1

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Tabs } from './Tabs.tsx';
+
+const meta = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items = [
+  { id: 'account', label: 'Account', content: 'Account settings and information.' },
+  { id: 'password', label: 'Password', content: 'Change your password and security settings.' },
+  {
+    id: 'notifications',
+    label: 'Notifications',
+    content: 'Manage your email and push notifications.',
+  },
+];
+
+export const Line: Story = {
+  args: {
+    variant: 'line',
+    items,
+  },
+};
+
+export const Pill: Story = {
+  args: {
+    variant: 'pill',
+    items,
+  },
+};
+
+export const WithDisabled: Story = {
+  args: {
+    items: [
+      ...items,
+      { id: 'billing', label: 'Billing', content: 'Billing history and methods.', disabled: true },
+    ],
+  },
+};

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,113 @@
+import clsx from 'clsx';
+import { useId, useState, useRef, type KeyboardEvent } from 'react';
+
+import styles from './Tabs.module.css';
+import type { TabsProps } from './Tabs.types.ts';
+
+export const Tabs = ({
+  items,
+  defaultActiveId,
+  activeId: controlledActiveId,
+  onChange,
+  className,
+  variant = 'line',
+  id,
+}: TabsProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-tabs-${baseId}`;
+  const [uncontrolledActiveId, setUncontrolledActiveId] = useState(
+    defaultActiveId || (items.length > 0 ? items[0].id : '')
+  );
+
+  const activeId = controlledActiveId !== undefined ? controlledActiveId : uncontrolledActiveId;
+  const tabListRef = useRef<HTMLDivElement>(null);
+
+  const handleTabClick = (id: string, disabled?: boolean) => {
+    if (disabled) {
+      return;
+    }
+    if (controlledActiveId === undefined) {
+      setUncontrolledActiveId(id);
+    }
+    onChange?.(id);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const enabledTabs = items.filter((item) => !item.disabled);
+    const currentIndex = enabledTabs.findIndex((item) => item.id === activeId);
+
+    let nextIndex = -1;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      nextIndex = (currentIndex + 1) % enabledTabs.length;
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      nextIndex = (currentIndex - 1 + enabledTabs.length) % enabledTabs.length;
+    } else if (e.key === 'Home') {
+      nextIndex = 0;
+    } else if (e.key === 'End') {
+      nextIndex = enabledTabs.length - 1;
+    }
+
+    if (nextIndex !== -1) {
+      e.preventDefault();
+      const nextId = enabledTabs[nextIndex].id;
+      handleTabClick(nextId);
+
+      // Focus the new tab
+      const tabElements = tabListRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]');
+      const nextTabElement = Array.from(tabElements || []).find(
+        (el) => el.getAttribute('data-id') === nextId
+      );
+      nextTabElement?.focus();
+    }
+  };
+
+  const activeTab = items.find((item) => item.id === activeId);
+
+  return (
+    <div id={componentId} className={clsx(styles.root, className)}>
+      <div
+        role="tablist"
+        ref={tabListRef}
+        className={clsx(styles.tabList, variant === 'pill' && styles.pillList)}
+        onKeyDown={handleKeyDown}
+      >
+        {items.map((item) => {
+          const isSelected = item.id === activeId;
+          const isDisabled = Boolean(item.disabled);
+          const tabIndex = isDisabled ? -1 : isSelected ? 0 : -1;
+          return (
+            <button
+              key={item.id}
+              role="tab"
+              id={`${componentId}-tab-${item.id}`}
+              aria-selected={isSelected}
+              aria-controls={`${componentId}-panel-${item.id}`}
+              aria-disabled={isDisabled}
+              tabIndex={tabIndex}
+              disabled={isDisabled}
+              data-id={item.id}
+              className={clsx(
+                styles.tabItem,
+                variant === 'pill' && styles.pillItem,
+                isSelected && styles.active,
+                isDisabled && styles.disabled
+              )}
+              onClick={() => handleTabClick(item.id, isDisabled)}
+            >
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+      <div
+        role="tabpanel"
+        id={`${componentId}-panel-${activeId}`}
+        aria-labelledby={`${componentId}-tab-${activeId}`}
+        className={styles.tabPanel}
+        tabIndex={0}
+      >
+        {activeTab?.content}
+      </div>
+    </div>
+  );
+};

package/src/components/Tabs/Tabs.types.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+export interface TabItem {
+  id: string;
+  label: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  id?: string;
+  items: TabItem[];
+  defaultActiveId?: string;
+  activeId?: string;
+  onChange?: (id: string) => void;
+  className?: string;
+  variant?: 'line' | 'pill';
+}

package/src/components/Text/Text.module.css

@@ -0,0 +1,126 @@
+.root {
+  margin: 0;
+  font-family: var(--ds-font-family-base);
+  line-height: var(--ds-line-height-base);
+  color: inherit;
+}
+
+/* Variants */
+.h1 {
+  font-size: var(--ds-font-size-2xl);
+  font-weight: var(--ds-font-weight-bold);
+  line-height: var(--ds-line-height-tight);
+}
+
+.h2 {
+  font-size: var(--ds-font-size-xl);
+  font-weight: var(--ds-font-weight-bold);
+  line-height: var(--ds-line-height-tight);
+}
+
+.h3 {
+  font-size: var(--ds-font-size-lg);
+  font-weight: var(--ds-font-weight-bold);
+  line-height: var(--ds-line-height-tight);
+}
+
+.h4 {
+  font-size: var(--ds-font-size-base);
+  font-weight: var(--ds-font-weight-bold);
+}
+
+.h5 {
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-bold);
+}
+
+.h6 {
+  font-size: var(--ds-font-size-xs);
+  font-weight: var(--ds-font-weight-bold);
+}
+
+.body-lg {
+  font-size: var(--ds-font-size-lg);
+}
+
+.body-md {
+  font-size: var(--ds-font-size-base);
+}
+
+.body-sm {
+  font-size: var(--ds-font-size-sm);
+}
+
+.label {
+  font-size: var(--ds-font-size-xs);
+  font-weight: var(--ds-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.code {
+  font-family: var(--ds-font-family-mono);
+  font-size: 0.9em;
+  background-color: var(--ds-surface-1);
+  padding: 0.2em 0.4em;
+  border-radius: var(--ds-radius-sm);
+}
+
+/* Alignments */
+.left {
+  text-align: left;
+}
+.center {
+  text-align: center;
+}
+.right {
+  text-align: right;
+}
+.justify {
+  text-align: justify;
+}
+
+/* Weights */
+.regular {
+  font-weight: var(--ds-font-weight-regular);
+}
+.medium {
+  font-weight: var(--ds-font-weight-medium);
+}
+.bold {
+  font-weight: var(--ds-font-weight-bold);
+}
+
+/* Colors */
+.color-main {
+  color: var(--ds-text-1);
+}
+.color-subtle {
+  color: var(--ds-text-2);
+}
+.color-subtle {
+  color: var(--ds-text-2);
+}
+.color-on-brand {
+  color: var(--ds-text-on-brand);
+}
+.color-danger {
+  color: var(--ds-danger);
+}
+.color-success {
+  color: var(--ds-success);
+}
+.color-warning {
+  color: var(--ds-warning);
+}
+.color-info {
+  color: var(--ds-info);
+}
+
+/* Utils */
+.noWrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Text } from './Text.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Text',
+  component: Text,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'body-lg',
+        'body-md',
+        'body-sm',
+        'label',
+        'code',
+      ],
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right', 'justify'],
+    },
+    weight: {
+      control: 'select',
+      options: ['regular', 'medium', 'bold'],
+    },
+    color: {
+      control: 'select',
+      options: ['main', 'subtle', 'subtle', 'on-brand', 'danger', 'success', 'warning', 'info'],
+    },
+    as: {
+      control: 'text',
+    },
+  },
+} satisfies Meta<typeof Text>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Tharaday Typography',
+    variant: 'body-md',
+  },
+};
+
+export const Headings: Story = {
+  args: {
+    children: '',
+  },
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={4}>
+      <Text variant="h1">Heading 1</Text>
+      <Text variant="h2">Heading 2</Text>
+      <Text variant="h3">Heading 3</Text>
+      <Text variant="h4">Heading 4</Text>
+      <Text variant="h5">Heading 5</Text>
+      <Text variant="h6">Heading 6</Text>
+    </Box>
+  ),
+};
+
+export const Body: Story = {
+  args: {
+    children: '',
+  },
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={4}>
+      <Text variant="body-lg">Body Large: The quick brown fox jumps over the lazy dog.</Text>
+      <Text variant="body-md">
+        Body Medium (Default): The quick brown fox jumps over the lazy dog.
+      </Text>
+      <Text variant="body-sm">Body Small: The quick brown fox jumps over the lazy dog.</Text>
+    </Box>
+  ),
+};
+
+export const Other: Story = {
+  args: {
+    children: '',
+  },
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={4}>
+      <Text variant="label">Label / Overline Text</Text>
+      <Text variant="code">const typography = 'awesome';</Text>
+    </Box>
+  ),
+};
+
+export const Colors: Story = {
+  args: {
+    children: '',
+  },
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={2}>
+      <Text color="main">Main Text Color</Text>
+      <Text color="subtle">Subtle Text Color</Text>
+      <Text color="info">Info Text Color</Text>
+      <Text color="success">Success Text Color</Text>
+      <Text color="warning">Warning Text Color</Text>
+      <Text color="danger">Danger Text Color</Text>
+      <Box padding={2} backgroundColor="main" borderRadius="sm">
+        <Text color="on-brand">On Brand Text Color</Text>
+      </Box>
+    </Box>
+  ),
+};
+
+export const NoWrap: Story = {
+  args: {
+    children:
+      'This is a very long text that should be truncated when the container is small. It will show ellipsis at the end.',
+    noWrap: true,
+  },
+  render: (args) => (
+    <Box width="200px" border padding={2}>
+      <Text {...args} />
+    </Box>
+  ),
+};

package/src/components/Text/Text.tsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+import type { ElementType } from 'react';
+
+import styles from './Text.module.css';
+import type { TextProps, TextVariant } from './Text.types.ts';
+
+const variantElementMap: Record<TextVariant, ElementType> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  'body-lg': 'p',
+  'body-md': 'p',
+  'body-sm': 'p',
+  label: 'span',
+  code: 'code',
+};
+
+export const Text = ({
+  children,
+  variant = 'body-md',
+  as,
+  align,
+  weight,
+  color,
+  noWrap,
+  className,
+  ...props
+}: TextProps) => {
+  const Component = as || variantElementMap[variant] || 'span';
+
+  return (
+    <Component
+      className={clsx(
+        styles.root,
+        styles[variant],
+        align && styles[align],
+        weight && styles[weight],
+        color && styles[`color-${color}`],
+        noWrap && styles.noWrap,
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/Text/Text.types.ts

@@ -0,0 +1,43 @@
+import type { ReactNode, ElementType, HTMLAttributes } from 'react';
+
+export type TextVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'body-lg'
+  | 'body-md'
+  | 'body-sm'
+  | 'label'
+  | 'code';
+
+export type TextAlign = 'left' | 'center' | 'right' | 'justify';
+export type FontWeight = 'regular' | 'medium' | 'bold';
+export type TextColor =
+  | 'main'
+  | 'subtle'
+  | 'subtle'
+  | 'on-brand'
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'info';
+
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  /** The content to display */
+  children: ReactNode;
+  /** The typographic style to apply */
+  variant?: TextVariant;
+  /** The semantic HTML element to render */
+  as?: ElementType;
+  /** Text alignment */
+  align?: TextAlign;
+  /** Font weight override */
+  weight?: FontWeight;
+  /** Text color based on semantic tokens */
+  color?: TextColor;
+  /** If true, the text will not wrap and show ellipsis */
+  noWrap?: boolean;
+}

package/src/components/Textarea/Textarea.module.css

@@ -0,0 +1,82 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+  width: 100%;
+}
+
+.label {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-1);
+}
+
+.textareaRoot {
+  box-sizing: border-box;
+  width: 100%;
+  font-family: var(--ds-font-family-base);
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-md);
+  background-color: var(--ds-surface-0);
+  color: var(--ds-text-1);
+  padding: var(--ds-space-2) var(--ds-space-3);
+  transition:
+    border-color var(--ds-transition-fast),
+    box-shadow var(--ds-transition-fast);
+  resize: vertical;
+}
+
+.textareaRoot:focus {
+  outline: none;
+  border-color: var(--ds-ring);
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+
+.textareaRoot::placeholder {
+  color: var(--ds-text-2);
+}
+
+.textareaRoot:disabled {
+  background-color: var(--ds-surface-1);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* Sizes */
+.sm {
+  font-size: var(--ds-font-size-xs);
+  padding: var(--ds-space-1) var(--ds-space-2);
+}
+
+.md {
+  font-size: var(--ds-font-size-sm);
+  padding: var(--ds-space-2) var(--ds-space-3);
+}
+
+.lg {
+  font-size: var(--ds-font-size-base);
+  padding: var(--ds-space-3) var(--ds-space-4);
+}
+
+/* Error state */
+.error {
+  border-color: var(--ds-danger);
+}
+
+.error:focus {
+  border-color: var(--ds-danger);
+  box-shadow: 0 0 0 0.125rem var(--ds-danger-subtle);
+}
+
+.helperText {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-xs);
+  color: var(--ds-text-2);
+}
+
+.helperText.errorText {
+  color: var(--ds-danger);
+}

package/src/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Textarea } from './Textarea.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    error: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Bio',
+    placeholder: 'Tell us about yourself',
+    helperText: 'Brief description for your profile.',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Comments',
+    placeholder: 'Enter your comments',
+    error: true,
+    helperText: 'This field is required.',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Notes',
+    placeholder: 'Read-only notes',
+    disabled: true,
+    defaultValue: 'This note cannot be edited.',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    label: 'Small Textarea',
+    placeholder: 'Small textarea',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    label: 'Large Textarea',
+    placeholder: 'Large textarea',
+  },
+};
+
+export const Gallery: Story = {
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={8} width="400px">
+      {(['sm', 'md', 'lg'] as const).map((size) => (
+        <Box key={size} display="flex" flexDirection="column" gap={4}>
+          <Box as="h3" m={0} style={{ textTransform: 'capitalize' }}>
+            Size: {size}
+          </Box>
+          <Textarea size={size} label="Default" placeholder="Default placeholder" />
+          <Textarea
+            size={size}
+            label="With Error"
+            placeholder="Error placeholder"
+            error
+            helperText="This field is required"
+          />
+          <Textarea
+            size={size}
+            label="Disabled"
+            placeholder="Disabled placeholder"
+            disabled
+            defaultValue="Some value"
+          />
+        </Box>
+      ))}
+    </Box>
+  ),
+};