tharaday 0.1.1

package/src/components/Input/Input.tsx

@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+import { useId } from 'react';
+
+import styles from './Input.module.css';
+import type { InputProps } from './Input.types.ts';
+
+export const Input = ({
+  size = 'md',
+  error,
+  label,
+  helperText,
+  className,
+  id,
+  ...props
+}: InputProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-input-${baseId}`;
+  const helperId = helperText ? `${componentId}-help` : undefined;
+
+  return (
+    <div className={clsx(styles.wrapper, className)}>
+      {label && (
+        <label htmlFor={componentId} className={styles.label}>
+          {label}
+        </label>
+      )}
+      <input
+        id={componentId}
+        className={clsx(styles.inputRoot, styles[size], error && styles.error)}
+        aria-describedby={helperId}
+        aria-invalid={error || undefined}
+        {...props}
+      />
+      {helperText && (
+        <span id={helperId} className={clsx(styles.helperText, error && styles.errorText)}>
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/components/Input/Input.types.ts

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes } from 'react';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: InputSize;
+  error?: boolean;
+  label?: string;
+  helperText?: string;
+}

package/src/components/Loader/Loader.module.css

@@ -0,0 +1,49 @@
+.loader {
+  display: inline-block;
+  border-radius: var(--ds-radius-full);
+  border: 0.125rem solid var(--ds-surface-1);
+  border-top-color: var(--ds-info);
+  animation: spin 0.8s linear infinite;
+}
+
+/* Intents */
+.neutral {
+  border-top-color: var(--ds-neutral);
+}
+.info {
+  border-top-color: var(--ds-info);
+}
+.success {
+  border-top-color: var(--ds-success);
+}
+.warning {
+  border-top-color: var(--ds-warning);
+}
+.danger {
+  border-top-color: var(--ds-danger);
+}
+
+/* Sizes */
+.sm {
+  width: var(--ds-space-4);
+  height: var(--ds-space-4);
+  border-width: 0.125rem;
+}
+
+.md {
+  width: var(--ds-space-8);
+  height: var(--ds-space-8);
+  border-width: 0.1875rem;
+}
+
+.lg {
+  width: var(--ds-space-12);
+  height: var(--ds-space-12);
+  border-width: 0.25rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Loader } from './Loader.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Loader',
+  component: Loader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    intent: {
+      control: 'select',
+      options: ['neutral', 'info', 'success', 'warning', 'danger'],
+    },
+  },
+} satisfies Meta<typeof Loader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+    intent: 'info',
+  },
+};
+
+export const Intents: Story = {
+  render: () => (
+    <Box display="flex" gap={6} alignItems="center">
+      <Loader intent="neutral" />
+      <Loader intent="info" />
+      <Loader intent="success" />
+      <Loader intent="warning" />
+      <Loader intent="danger" />
+    </Box>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <Box display="flex" gap={6} alignItems="center">
+      <Loader size="sm" />
+      <Loader size="md" />
+      <Loader size="lg" />
+    </Box>
+  ),
+};
+
+export const All: Story = {
+  name: 'Gallery',
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={8}>
+      {(['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>
+          <Box display="flex" gap={6} alignItems="center">
+            {(['neutral', 'info', 'success', 'warning', 'danger'] as const).map((intent) => (
+              <Loader key={intent} size={size} intent={intent} />
+            ))}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  ),
+};

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+
+import styles from './Loader.module.css';
+import type { LoaderProps } from './Loader.types.ts';
+
+export const Loader = ({ id, size = 'md', intent = 'neutral', className }: LoaderProps) => {
+  return (
+    <div
+      id={id}
+      className={clsx(styles.loader, styles[size], styles[intent], className)}
+      role="status"
+      aria-label="Loading"
+    />
+  );
+};

package/src/components/Loader/Loader.types.ts

@@ -0,0 +1,9 @@
+export type LoaderSize = 'sm' | 'md' | 'lg';
+export type LoaderIntent = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+
+export interface LoaderProps {
+  id?: string;
+  size?: LoaderSize;
+  intent?: LoaderIntent;
+  className?: string;
+}

package/src/components/Modal/Modal.module.css

@@ -0,0 +1,88 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: var(--ds-space-4);
+}
+
+.modal {
+  background-color: var(--ds-surface-0);
+  border-radius: var(--ds-radius-lg);
+  box-shadow: var(--ds-shadow-md);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-family: var(--ds-font-family-base);
+}
+
+.header {
+  padding: var(--ds-space-4);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--ds-border-2);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--ds-font-size-lg);
+  font-weight: var(--ds-font-weight-bold);
+  color: var(--ds-text-1);
+}
+
+.closeButton {
+  margin: 0;
+  padding: 0 !important;
+  width: var(--ds-space-8) !important;
+  height: var(--ds-space-8) !important;
+  min-width: unset !important;
+}
+
+.content {
+  padding: var(--ds-space-6);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.footer {
+  padding: var(--ds-space-4);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ds-space-3);
+  border-top: 1px solid var(--ds-border-2);
+  background-color: var(--ds-surface-1);
+}
+
+/* Sizes */
+.sm {
+  max-width: 25rem;
+}
+.md {
+  max-width: 37.5rem;
+}
+.lg {
+  max-width: 50rem;
+}
+.xl {
+  max-width: 62.5rem;
+}
+.full {
+  max-width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+
+.loading {
+  opacity: 0.7;
+  pointer-events: none;
+}

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { fn } from 'storybook/test';
+
+import { Modal } from './Modal.tsx';
+import { Box } from '../Box/Box.tsx';
+import { Button } from '../Button/Button.tsx';
+import { Text } from '../Text/Text.tsx';
+
+const meta = {
+  title: 'Components/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', 'full'],
+    },
+  },
+  args: {
+    onClose: fn(),
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isOpen: false,
+  },
+  render: function Render(args) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+        <Modal
+          {...args}
+          isOpen={isOpen}
+          onClose={() => {
+            setIsOpen(false);
+            args.onClose();
+          }}
+          title="Modal Title"
+          footer={
+            <Box display="flex" gap={2} justifyContent="flex-end" fullWidth>
+              <Button variant="outline" onClick={() => setIsOpen(false)}>
+                Cancel
+              </Button>
+              <Button variant="solid" intent="info" onClick={() => setIsOpen(false)}>
+                Save Changes
+              </Button>
+            </Box>
+          }
+        >
+          <Text>This is the modal content. You can put any React components here.</Text>
+        </Modal>
+      </>
+    );
+  },
+};
+
+export const Large: Story = {
+  args: {
+    isOpen: false,
+    size: 'lg',
+    title: 'Large Modal',
+  },
+  render: function Render(args) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Large Modal</Button>
+        <Modal
+          {...args}
+          isOpen={isOpen}
+          onClose={() => {
+            setIsOpen(false);
+            args.onClose();
+          }}
+        >
+          <Box height="1000px" padding={4} backgroundColor="info-subtle" borderRadius="md">
+            <Text>This is a large modal with scrolling content.</Text>
+          </Box>
+        </Modal>
+      </>
+    );
+  },
+};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,115 @@
+import clsx from 'clsx';
+import { useEffect, useRef, useId } from 'react';
+import { createPortal } from 'react-dom';
+
+import styles from './Modal.module.css';
+import type { ModalProps } from './Modal.types.ts';
+import { Button } from '../Button/Button.tsx';
+
+export const Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  size = 'md',
+  isLoading = false,
+  className,
+  id,
+}: ModalProps) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const previousFocus = useRef<HTMLElement | null>(null);
+  const baseId = useId();
+  const componentId = id ?? `ds-modal-${baseId}`;
+  const titleId = `${componentId}-title`;
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !isLoading) {
+        onClose();
+        return;
+      }
+
+      if (event.key === 'Tab' && modalRef.current) {
+        const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+
+        if (event.shiftKey) {
+          if (document.activeElement === firstElement) {
+            lastElement.focus();
+            event.preventDefault();
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            firstElement.focus();
+            event.preventDefault();
+          }
+        }
+      }
+    };
+
+    if (isOpen) {
+      previousFocus.current = document.activeElement as HTMLElement;
+      document.body.style.overflow = 'hidden';
+      window.addEventListener('keydown', handleKeyDown);
+
+      // Focus the first element or the close button after a small delay to ensure it's rendered
+      setTimeout(() => {
+        const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusableElements && focusableElements.length > 0) {
+          focusableElements[0].focus();
+        }
+      }, 0);
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset';
+      window.removeEventListener('keydown', handleKeyDown);
+      previousFocus.current?.focus();
+    };
+  }, [isOpen, onClose, isLoading]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return createPortal(
+    <div className={styles.overlay} onClick={() => !isLoading && onClose()}>
+      <div
+        id={componentId}
+        className={clsx(styles.modal, styles[size], isLoading && styles.loading, className)}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        ref={modalRef}
+      >
+        <div className={styles.header}>
+          {title && (
+            <h2 id={titleId} className={styles.title}>
+              {title}
+            </h2>
+          )}
+          <Button
+            variant="subtle"
+            size="sm"
+            onClick={onClose}
+            className={styles.closeButton}
+            aria-label="Close modal"
+            disabled={isLoading}
+          >
+            ✕
+          </Button>
+        </div>
+        <div className={styles.content}>{children}</div>
+        {footer && <div className={styles.footer}>{footer}</div>}
+      </div>
+    </div>,
+    document.body
+  );
+};

package/src/components/Modal/Modal.types.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+export interface ModalProps {
+  id?: string;
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children?: ReactNode;
+  footer?: ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  isLoading?: boolean;
+  className?: string;
+}

package/src/components/NavBar/NavBar.module.css

@@ -0,0 +1,77 @@
+.root {
+  background-color: var(--ds-surface-0);
+  border-bottom: 1px solid var(--ds-border-1);
+  width: 100%;
+}
+
+.container {
+  max-width: 75rem;
+  margin: 0 auto;
+  padding: 0 var(--ds-space-4);
+  display: flex;
+  align-items: stretch;
+  height: 4rem;
+}
+
+.leftSection {
+  display: flex;
+  align-items: center;
+  margin-right: var(--ds-space-8);
+}
+
+.nav {
+  display: flex;
+  align-items: stretch;
+  flex: 1;
+}
+
+.navList {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--ds-space-4);
+}
+
+.navItem {
+  display: flex;
+  align-items: center;
+}
+
+.navLink {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 var(--ds-space-2);
+  color: var(--ds-text-2);
+  text-decoration: none;
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-medium);
+  border-bottom: 0.125rem solid transparent;
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.navLink:hover:not(.disabled) {
+  color: var(--ds-text-1);
+}
+
+.active {
+  color: var(--ds-info-1);
+  border-bottom-color: var(--ds-info-1);
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.rightSection {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-4);
+}

package/src/components/NavBar/NavBar.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NavBar } from './NavBar.tsx';
+import { Button } from '../Button/Button.tsx';
+
+const meta: Meta<typeof NavBar> = {
+  title: 'Components/NavBar',
+  component: NavBar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof NavBar>;
+
+const defaultItems = [
+  { id: 'home', label: 'Home' },
+  { id: 'products', label: 'Products' },
+  { id: 'services', label: 'Services' },
+  { id: 'about', label: 'About' },
+  { id: 'contact', label: 'Contact', disabled: true },
+];
+
+export const Default: Story = {
+  args: {
+    items: defaultItems,
+    activeId: 'home',
+    logo: (
+      <div style={{ fontWeight: 'bold', fontSize: '1.2rem', color: 'var(--ds-info-1)' }}>Logo</div>
+    ),
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    ...Default.args,
+    actions: (
+      <>
+        <Button size="sm" variant="outline">
+          Log in
+        </Button>
+        <Button size="sm">Get Started</Button>
+      </>
+    ),
+  },
+};
+
+export const Simple: Story = {
+  args: {
+    items: defaultItems,
+    activeId: 'services',
+  },
+};

package/src/components/NavBar/NavBar.tsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+
+import styles from './NavBar.module.css';
+import type { NavBarProps } from './NavBar.types.ts';
+
+/**
+ * NavBar is a navigation component typically used for application-wide navigation.
+ * It differs from Header as it focuses on navigational links rather than just branding and user actions.
+ */
+export const NavBar = ({
+  id,
+  items,
+  activeId,
+  logo,
+  actions,
+  onItemClick,
+  className,
+}: NavBarProps) => {
+  return (
+    <nav id={id} className={clsx(styles.root, className)}>
+      <div className={styles.container}>
+        {logo && <div className={styles.leftSection}>{logo}</div>}
+
+        <div className={styles.nav}>
+          <ul className={styles.navList}>
+            {items.map((item) => (
+              <li key={item.id} className={styles.navItem}>
+                <button
+                  type="button"
+                  className={clsx(
+                    styles.navLink,
+                    activeId === item.id && styles.active,
+                    item.disabled && styles.disabled
+                  )}
+                  onClick={() => !item.disabled && onItemClick?.(item.id)}
+                  disabled={item.disabled}
+                  aria-current={activeId === item.id ? 'page' : undefined}
+                >
+                  {item.label}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {actions && <div className={styles.rightSection}>{actions}</div>}
+      </div>
+    </nav>
+  );
+};