tharaday 0.1.1

package/src/components/NavBar/NavBar.types.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+
+export interface NavBarItem {
+  id: string;
+  label: ReactNode;
+  href?: string;
+  disabled?: boolean;
+}
+
+export interface NavBarProps {
+  id?: string;
+  /**
+   * The list of navigation items
+   */
+  items: NavBarItem[];
+  /**
+   * The ID of the currently active item
+   */
+  activeId?: string;
+  /**
+   * Optional logo or branding element
+   */
+  logo?: ReactNode;
+  /**
+   * Optional elements to show on the right side (e.g., user menu, search)
+   */
+  actions?: ReactNode;
+  /**
+   * Callback fired when an item is clicked
+   */
+  onItemClick?: (id: string) => void;
+  /**
+   * Additional class names
+   */
+  className?: string;
+}

package/src/components/Notification/Notification.module.css

@@ -0,0 +1,72 @@
+.root {
+  display: flex;
+  position: relative;
+  padding: var(--ds-space-3) var(--ds-space-4);
+  border-radius: var(--ds-radius-md);
+  border-left: 0.25rem solid;
+  font-family: var(--ds-font-family-base);
+  gap: var(--ds-space-3);
+  box-shadow: var(--ds-shadow-sm);
+  max-width: 25rem;
+}
+
+.content {
+  flex: 1;
+}
+
+.title {
+  font-weight: var(--ds-font-weight-bold);
+  font-size: var(--ds-font-size-sm);
+  margin-bottom: var(--ds-space-1);
+}
+
+.message {
+  font-size: var(--ds-font-size-sm);
+  line-height: var(--ds-line-height-base);
+}
+
+.closeButton {
+  flex-shrink: 0;
+  margin-top: calc(var(--ds-space-1) * -1);
+  margin-right: calc(var(--ds-space-2) * -1);
+  padding: 0 !important;
+  width: var(--ds-space-6) !important;
+  height: var(--ds-space-6) !important;
+  min-width: unset !important;
+  opacity: 0.6;
+}
+
+.closeButton:hover {
+  opacity: 1;
+}
+
+/* Intents */
+.neutral {
+  background-color: var(--ds-surface-1);
+  border-color: var(--ds-neutral);
+  color: var(--ds-text-1);
+}
+
+.info {
+  background-color: var(--ds-info-subtle);
+  border-color: var(--ds-info);
+  color: var(--ds-info-active);
+}
+
+.success {
+  background-color: var(--ds-success-subtle);
+  border-color: var(--ds-success);
+  color: var(--ds-success-active);
+}
+
+.warning {
+  background-color: var(--ds-warning-subtle);
+  border-color: var(--ds-warning);
+  color: var(--ds-warning-active);
+}
+
+.danger {
+  background-color: var(--ds-danger-subtle);
+  border-color: var(--ds-danger);
+  color: var(--ds-danger-active);
+}

package/src/components/Notification/Notification.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { Notification } from './Notification.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Notification',
+  component: Notification,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    intent: {
+      control: 'select',
+      options: ['neutral', 'success', 'warning', 'danger', 'info'],
+    },
+  },
+  args: {
+    onClose: fn(),
+  },
+} satisfies Meta<typeof Notification>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    intent: 'info',
+    title: 'Update Available',
+    children: 'A new version of the software is available for download.',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    intent: 'success',
+    title: 'Success!',
+    children: 'Your profile has been updated successfully.',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    intent: 'warning',
+    title: 'Storage almost full',
+    children: 'You have used 90% of your available storage space.',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    intent: 'danger',
+    title: 'Error',
+    children: 'An error occurred while saving your changes. Please try again.',
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    intent: 'neutral',
+    children: 'This is a simple notification message without a title.',
+  },
+};
+
+export const All: Story = {
+  args: {
+    children: '',
+  },
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={4} width="500px">
+      {(['neutral', 'success', 'warning', 'danger', 'info'] as const).map((intent) => (
+        <Notification key={intent} intent={intent} title={intent.toUpperCase()}>
+          This is a {intent} notification with title and description.
+        </Notification>
+      ))}
+      <Notification intent="info">This is a notification without a title.</Notification>
+    </Box>
+  ),
+};

package/src/components/Notification/Notification.tsx

@@ -0,0 +1,34 @@
+import clsx from 'clsx';
+
+import styles from './Notification.module.css';
+import type { NotificationProps } from './Notification.types.ts';
+import { Button } from '../Button/Button.tsx';
+
+export const Notification = ({
+  intent = 'neutral',
+  title,
+  children,
+  onClose,
+  className,
+  ...props
+}: NotificationProps) => {
+  return (
+    <div className={clsx(styles.root, styles[intent], className)} role="alert" {...props}>
+      <div className={styles.content}>
+        {title && <div className={styles.title}>{title}</div>}
+        <div className={styles.message}>{children}</div>
+      </div>
+      {onClose && (
+        <Button
+          variant="subtle"
+          size="xs"
+          onClick={onClose}
+          className={styles.closeButton}
+          aria-label="Close notification"
+        >
+          ✕
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/components/Notification/Notification.types.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type NotificationIntent = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+
+export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
+  intent?: NotificationIntent;
+  title?: string;
+  children: ReactNode;
+  onClose?: () => void;
+}

package/src/components/Pagination/Pagination.module.css

@@ -0,0 +1,31 @@
+.root {
+  display: flex;
+  align-items: center;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  display: flex;
+}
+
+.ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--ds-space-8);
+  height: var(--ds-space-8);
+  color: var(--ds-text-2);
+  font-size: var(--ds-font-size-sm);
+}
+
+.pageButton {
+  min-width: var(--ds-space-8);
+}

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { Pagination } from './Pagination.tsx';
+
+const meta = {
+  title: 'Components/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    count: 24,
+    page: 6,
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    count: 12,
+    page: 5,
+    siblingCount: 0,
+    boundaryCount: 1,
+    showEllipsis: true,
+    size: 'xs',
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    count: 10,
+    page: 4,
+    showFirstLast: false,
+    showPrevNext: false,
+    showEllipsis: false,
+  },
+};
+
+export const WithEllipsis: Story = {
+  args: {
+    count: 40,
+    page: 20,
+    siblingCount: 1,
+    boundaryCount: 2,
+    showEllipsis: true,
+  },
+};
+
+export const FirstPage: Story = {
+  args: {
+    count: 12,
+    page: 1,
+  },
+};
+
+export const LastPage: Story = {
+  args: {
+    count: 12,
+    page: 12,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    count: 18,
+    page: 7,
+    disabled: true,
+  },
+};
+
+export const CustomLabels: Story = {
+  args: {
+    count: 16,
+    page: 8,
+    labels: {
+      first: '<<',
+      prev: '<',
+      next: '>',
+      last: '>>',
+    },
+  },
+};
+
+export const VariantIntent: Story = {
+  args: {
+    count: 20,
+    page: 9,
+    variant: 'subtle',
+    intent: 'info',
+    activeVariant: 'solid',
+    activeIntent: 'info',
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    count: 24,
+    page: 6,
+  },
+  render: () => <WithActionsStory />,
+};
+
+const WithActionsStory = () => {
+  const [page, setPage] = useState(3);
+
+  return (
+    <Pagination
+      count={18}
+      page={page}
+      onPageChange={(nextPage) => {
+        setPage(nextPage);
+        console.log('onPageChange', nextPage);
+      }}
+      onFirstClick={(nextPage) => console.log('onFirstClick', nextPage)}
+      onPrevClick={(nextPage) => console.log('onPrevClick', nextPage)}
+      onNextClick={(nextPage) => console.log('onNextClick', nextPage)}
+      onLastClick={(nextPage) => console.log('onLastClick', nextPage)}
+      labels={{ first: 'First', prev: 'Previous', next: 'Next', last: 'Last' }}
+    />
+  );
+};

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,245 @@
+import clsx from 'clsx';
+import { useId, useMemo, useState } from 'react';
+
+import styles from './Pagination.module.css';
+import type { PaginationProps } from './Pagination.types.ts';
+import { Button } from '../Button/Button.tsx';
+
+type PageItem = number | 'ellipsis';
+
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
+const range = (start: number, end: number) => {
+  const items: number[] = [];
+  for (let i = start; i <= end; i += 1) {
+    items.push(i);
+  }
+  return items;
+};
+
+const getPageItems = (
+  count: number,
+  page: number,
+  siblingCount: number,
+  boundaryCount: number,
+  showEllipsis: boolean
+): PageItem[] => {
+  if (count <= 0) {
+    return [];
+  }
+
+  if (!showEllipsis) {
+    return range(1, count);
+  }
+
+  const totalNumbers = siblingCount * 2 + 1;
+  const totalBlocks = totalNumbers + boundaryCount * 2 + 2;
+
+  if (count <= totalBlocks) {
+    return range(1, count);
+  }
+
+  const startPages = range(1, Math.min(boundaryCount, count));
+  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+
+  const leftSiblingIndex = Math.max(page - siblingCount, boundaryCount + 2);
+  const rightSiblingIndex = Math.min(page + siblingCount, count - boundaryCount - 1);
+
+  const showLeftEllipsis = leftSiblingIndex > boundaryCount + 2;
+  const showRightEllipsis = rightSiblingIndex < count - boundaryCount - 1;
+
+  const items: PageItem[] = [...startPages];
+
+  const middleStart = showLeftEllipsis ? leftSiblingIndex : boundaryCount + 1;
+  const middleEnd = showRightEllipsis ? rightSiblingIndex : count - boundaryCount;
+
+  if (showLeftEllipsis) {
+    items.push('ellipsis');
+  }
+
+  if (middleStart <= middleEnd) {
+    items.push(...range(middleStart, middleEnd));
+  }
+
+  if (showRightEllipsis) {
+    items.push('ellipsis');
+  }
+
+  items.push(...endPages);
+
+  return items;
+};
+
+export const Pagination = ({
+  id,
+  count,
+  page,
+  defaultPage = 1,
+  onPageChange,
+  onFirstClick,
+  onLastClick,
+  onNextClick,
+  onPrevClick,
+  siblingCount = 1,
+  boundaryCount = 1,
+  showFirstLast = true,
+  showPrevNext = true,
+  showEllipsis = true,
+  disabled = false,
+  size = 'sm',
+  variant = 'outline',
+  intent = 'neutral',
+  activeVariant = 'solid',
+  activeIntent,
+  labels,
+  ariaLabel = 'Pagination',
+  getPageLabel,
+  className,
+}: PaginationProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-pagination-${baseId}`;
+  const [internalPage, setInternalPage] = useState(defaultPage);
+
+  const safeCount = Math.max(0, count);
+  const currentPage = clamp(page ?? internalPage, 1, Math.max(1, safeCount));
+
+  const pageItems = useMemo(
+    () => getPageItems(safeCount, currentPage, siblingCount, boundaryCount, showEllipsis),
+    [safeCount, currentPage, siblingCount, boundaryCount, showEllipsis]
+  );
+
+  const handlePageChange = (nextPage: number) => {
+    if (disabled || nextPage === currentPage) {
+      return;
+    }
+    if (page === undefined) {
+      setInternalPage(nextPage);
+    }
+    onPageChange?.(nextPage);
+  };
+
+  const handleFirst = () => {
+    const target = 1;
+    handlePageChange(target);
+    onFirstClick?.(target);
+  };
+
+  const handleLast = () => {
+    const target = safeCount;
+    handlePageChange(target);
+    onLastClick?.(target);
+  };
+
+  const handlePrev = () => {
+    const target = Math.max(1, currentPage - 1);
+    handlePageChange(target);
+    onPrevClick?.(target);
+  };
+
+  const handleNext = () => {
+    const target = Math.min(safeCount, currentPage + 1);
+    handlePageChange(target);
+    onNextClick?.(target);
+  };
+
+  if (safeCount <= 0) {
+    return null;
+  }
+
+  return (
+    <nav id={componentId} aria-label={ariaLabel} className={clsx(styles.root, className)}>
+      <ul className={styles.list}>
+        {showFirstLast && (
+          <li className={styles.item}>
+            <Button
+              size={size}
+              variant={variant}
+              intent={intent}
+              className={styles.pageButton}
+              onClick={handleFirst}
+              disabled={disabled || currentPage === 1}
+              aria-label="Go to first page"
+            >
+              {labels?.first ?? 'First'}
+            </Button>
+          </li>
+        )}
+        {showPrevNext && (
+          <li className={styles.item}>
+            <Button
+              size={size}
+              variant={variant}
+              intent={intent}
+              className={styles.pageButton}
+              onClick={handlePrev}
+              disabled={disabled || currentPage === 1}
+              aria-label="Go to previous page"
+            >
+              {labels?.prev ?? 'Prev'}
+            </Button>
+          </li>
+        )}
+        {pageItems.map((item, index) => {
+          if (item === 'ellipsis') {
+            return (
+              <li key={`ellipsis-${index}`} className={styles.item} aria-hidden="true">
+                <span className={styles.ellipsis}>…</span>
+              </li>
+            );
+          }
+
+          const isCurrent = item === currentPage;
+          const ariaLabelText =
+            getPageLabel?.(item, isCurrent) ?? `Page ${item}${isCurrent ? ', current page' : ''}`;
+
+          return (
+            <li key={item} className={styles.item}>
+              <Button
+                size={size}
+                variant={isCurrent ? activeVariant : variant}
+                intent={isCurrent ? (activeIntent ?? intent) : intent}
+                className={styles.pageButton}
+                onClick={() => handlePageChange(item)}
+                disabled={disabled}
+                aria-current={isCurrent ? 'page' : undefined}
+                aria-label={ariaLabelText}
+              >
+                {item}
+              </Button>
+            </li>
+          );
+        })}
+        {showPrevNext && (
+          <li className={styles.item}>
+            <Button
+              size={size}
+              variant={variant}
+              intent={intent}
+              className={styles.pageButton}
+              onClick={handleNext}
+              disabled={disabled || currentPage === safeCount}
+              aria-label="Go to next page"
+            >
+              {labels?.next ?? 'Next'}
+            </Button>
+          </li>
+        )}
+        {showFirstLast && (
+          <li className={styles.item}>
+            <Button
+              size={size}
+              variant={variant}
+              intent={intent}
+              className={styles.pageButton}
+              onClick={handleLast}
+              disabled={disabled || currentPage === safeCount}
+              aria-label="Go to last page"
+            >
+              {labels?.last ?? 'Last'}
+            </Button>
+          </li>
+        )}
+      </ul>
+    </nav>
+  );
+};

package/src/components/Pagination/Pagination.types.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import type { ButtonIntent, ButtonSize, ButtonVariant } from '../Button/Button.types.ts';
+
+export interface PaginationLabels {
+  first?: ReactNode;
+  last?: ReactNode;
+  next?: ReactNode;
+  prev?: ReactNode;
+}
+
+export interface PaginationProps {
+  id?: string;
+  count: number;
+  page?: number;
+  defaultPage?: number;
+  onPageChange?: (page: number) => void;
+  onFirstClick?: (page: number) => void;
+  onLastClick?: (page: number) => void;
+  onNextClick?: (page: number) => void;
+  onPrevClick?: (page: number) => void;
+  siblingCount?: number;
+  boundaryCount?: number;
+  showFirstLast?: boolean;
+  showPrevNext?: boolean;
+  showEllipsis?: boolean;
+  disabled?: boolean;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  intent?: ButtonIntent;
+  activeVariant?: ButtonVariant;
+  activeIntent?: ButtonIntent;
+  labels?: PaginationLabels;
+  ariaLabel?: string;
+  getPageLabel?: (page: number, isCurrent: boolean) => string;
+  className?: string;
+}