tharaday 0.1.1

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import { useId } from 'react';
+
+import styles from './Textarea.module.css';
+import type { TextareaProps } from './Textarea.types.ts';
+
+export const Textarea = ({
+  size = 'md',
+  error,
+  label,
+  helperText,
+  className,
+  id,
+  rows = 4,
+  ...props
+}: TextareaProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-textarea-${baseId}`;
+  const helperId = helperText ? `${componentId}-help` : undefined;
+
+  return (
+    <div className={clsx(styles.wrapper, className)}>
+      {label && (
+        <label htmlFor={componentId} className={styles.label}>
+          {label}
+        </label>
+      )}
+      <textarea
+        id={componentId}
+        rows={rows}
+        className={clsx(styles.textareaRoot, 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/Textarea/Textarea.types.ts

@@ -0,0 +1,11 @@
+import type { TextareaHTMLAttributes } from 'react';
+
+export type TextareaSize = 'sm' | 'md' | 'lg';
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  size?: TextareaSize;
+  error?: boolean;
+  label?: string;
+  helperText?: string;
+  rows?: number;
+}

package/src/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,125 @@
+.root {
+  position: relative;
+  display: inline-block;
+}
+
+.trigger {
+  display: inline-block;
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 1000;
+  padding: var(--ds-space-2) var(--ds-space-3);
+  font-size: var(--ds-font-size-xs);
+  border-radius: var(--ds-radius-sm);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.dark {
+  background-color: var(--neutral-900);
+  color: var(--neutral-0);
+}
+
+.light {
+  background-color: var(--ds-surface-0);
+  color: var(--ds-text-1);
+  border: 1px solid var(--ds-border-1);
+  box-shadow: var(--ds-shadow-md);
+}
+
+.visible {
+  opacity: 1;
+}
+
+/* Positions */
+.top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(calc(-1 * var(--ds-space-2)));
+}
+
+.bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(var(--ds-space-2));
+}
+
+.left {
+  top: 50%;
+  right: 100%;
+  transform: translateY(-50%) translateX(calc(-1 * var(--ds-space-2)));
+}
+
+.right {
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%) translateX(var(--ds-space-2));
+}
+
+/* Arrow (optional, simple version) */
+.tooltip::after {
+  content: '';
+  position: absolute;
+  border-width: 0.3125rem;
+  border-style: solid;
+}
+
+.top::after {
+  top: 100%;
+  left: 50%;
+  margin-left: -0.3125rem;
+}
+
+.top.dark::after {
+  border-color: var(--neutral-900) transparent transparent transparent;
+}
+
+.top.light::after {
+  border-color: var(--ds-border-1) transparent transparent transparent;
+}
+
+.bottom::after {
+  bottom: 100%;
+  left: 50%;
+  margin-left: -0.3125rem;
+}
+
+.bottom.dark::after {
+  border-color: transparent transparent var(--neutral-900) transparent;
+}
+
+.bottom.light::after {
+  border-color: transparent transparent var(--ds-border-1) transparent;
+}
+
+.left::after {
+  left: 100%;
+  top: 50%;
+  margin-top: -0.3125rem;
+}
+
+.left.dark::after {
+  border-color: transparent transparent transparent var(--neutral-900);
+}
+
+.left.light::after {
+  border-color: transparent transparent transparent var(--ds-border-1);
+}
+
+.right::after {
+  right: 100%;
+  top: 50%;
+  margin-top: -0.3125rem;
+}
+
+.right.dark::after {
+  border-color: transparent var(--neutral-900) transparent transparent;
+}
+
+.right.light::after {
+  border-color: transparent var(--ds-border-1) transparent transparent;
+}

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Tooltip } from './Tooltip.tsx';
+import { Button } from '../Button/Button.tsx';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '200px',
+          width: '100%',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Top: Story = {
+  args: {
+    content: 'Tooltip content',
+    children: <Button>Hover me</Button>,
+    position: 'top',
+  },
+};
+
+export const Bottom: Story = {
+  args: {
+    content: 'Tooltip content',
+    children: <Button>Hover me</Button>,
+    position: 'bottom',
+  },
+};
+
+export const Left: Story = {
+  args: {
+    content: 'Tooltip content',
+    children: <Button>Hover me</Button>,
+    position: 'left',
+  },
+};
+
+export const Right: Story = {
+  args: {
+    content: 'Tooltip content',
+    children: <Button>Hover me</Button>,
+    position: 'right',
+  },
+};
+
+export const LightVariant: Story = {
+  args: {
+    content: 'Light Tooltip',
+    children: <Button variant="subtle">Hover me (Light)</Button>,
+    variant: 'light',
+  },
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,87 @@
+import clsx from 'clsx';
+import {
+  useState,
+  useRef,
+  useId,
+  isValidElement,
+  cloneElement,
+  type KeyboardEvent,
+  type ReactElement,
+} from 'react';
+
+import styles from './Tooltip.module.css';
+import type { TooltipProps } from './Tooltip.types.ts';
+
+export const Tooltip = ({
+  content,
+  children,
+  position = 'top',
+  variant = 'dark',
+  delay = 200,
+  className,
+  id,
+}: TooltipProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const timeoutRef = useRef<number | null>(null);
+  const baseId = useId();
+  const componentId = id ?? `ds-tooltip-${baseId}`;
+  const tooltipId = `${componentId}-content`;
+
+  const showTooltip = () => {
+    timeoutRef.current = window.setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+
+  const hideTooltip = () => {
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      hideTooltip();
+    }
+  };
+
+  const trigger = isValidElement(children)
+    ? (() => {
+        const child = children as ReactElement<{ 'aria-describedby'?: string }>;
+        return cloneElement(child, {
+          'aria-describedby': [child.props['aria-describedby'], tooltipId]
+            .filter(Boolean)
+            .join(' '),
+        });
+      })()
+    : children;
+
+  return (
+    <div
+      id={componentId}
+      className={clsx(styles.root, className)}
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      onFocus={showTooltip}
+      onBlur={hideTooltip}
+      onKeyDown={handleKeyDown}
+    >
+      <div className={styles.trigger}>{trigger}</div>
+      {isVisible && (
+        <div
+          className={clsx(
+            styles.tooltip,
+            styles[position],
+            styles[variant],
+            isVisible && styles.visible
+          )}
+          id={tooltipId}
+          role="tooltip"
+        >
+          {content}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipVariant = 'dark' | 'light';
+
+export interface TooltipProps {
+  id?: string;
+  content: ReactNode;
+  children: ReactNode;
+  position?: TooltipPosition;
+  variant?: TooltipVariant;
+  delay?: number;
+  className?: string;
+}

package/src/index.ts

@@ -0,0 +1,132 @@
+// styles
+import './styles/ds.css';
+
+// components
+export { Accordion } from './components/Accordion/Accordion.tsx';
+export type { AccordionProps, AccordionItem } from './components/Accordion/Accordion.types.ts';
+export { Avatar } from './components/Avatar/Avatar.tsx';
+export type { AvatarProps, AvatarSize } from './components/Avatar/Avatar.types.ts';
+export { Badge } from './components/Badge/Badge.tsx';
+export type {
+  BadgeProps,
+  BadgeSize,
+  BadgeIntent,
+  BadgeVariant,
+} from './components/Badge/Badge.types.ts';
+export { Box } from './components/Box/Box.tsx';
+export type {
+  BoxProps,
+  BoxPadding,
+  BoxGap,
+  BoxDisplay,
+  BoxFlexDirection,
+  BoxAlignItems,
+  BoxJustifyContent,
+} from './components/Box/Box.types.ts';
+export { Breadcrumbs, BreadcrumbItem } from './components/Breadcrumbs/Breadcrumbs.tsx';
+export type {
+  BreadcrumbsProps,
+  BreadcrumbItemProps,
+} from './components/Breadcrumbs/Breadcrumbs.types.ts';
+export { Button } from './components/Button/Button.tsx';
+export type {
+  ButtonProps,
+  ButtonSize,
+  ButtonVariant,
+  ButtonIntent,
+} from './components/Button/Button.types.ts';
+export { Card, CardContent, CardFooter, CardHeader } from './components/Card/Card.tsx';
+export type {
+  CardProps,
+  CardContentProps,
+  CardFooterProps,
+  CardHeaderProps,
+} from './components/Card/Card.types.ts';
+export { Checkbox } from './components/Checkbox/Checkbox.tsx';
+export type { CheckboxProps } from './components/Checkbox/Checkbox.types.ts';
+export { Dropdown } from './components/Dropdown/Dropdown.tsx';
+export type {
+  DropdownProps,
+  DropdownOption,
+  DropdownSize,
+} from './components/Dropdown/Dropdown.types.ts';
+export { Header } from './components/Header/Header.tsx';
+export type { HeaderProps } from './components/Header/Header.types.ts';
+export { NavBar } from './components/NavBar/NavBar.tsx';
+export type { NavBarProps, NavBarItem } from './components/NavBar/NavBar.types.ts';
+export { Input } from './components/Input/Input.tsx';
+export type { InputProps } from './components/Input/Input.types.ts';
+export { Loader } from './components/Loader/Loader.tsx';
+export type { LoaderProps, LoaderSize } from './components/Loader/Loader.types.ts';
+export { Modal } from './components/Modal/Modal.tsx';
+export type { ModalProps } from './components/Modal/Modal.types.ts';
+export { Notification } from './components/Notification/Notification.tsx';
+export type { NotificationProps } from './components/Notification/Notification.types.ts';
+export { Pagination } from './components/Pagination/Pagination.tsx';
+export type {
+  PaginationProps,
+  PaginationLabels,
+} from './components/Pagination/Pagination.types.ts';
+export { ProgressBar } from './components/ProgressBar/ProgressBar.tsx';
+export type {
+  ProgressBarProps,
+  ProgressBarSize,
+  ProgressBarIntent,
+} from './components/ProgressBar/ProgressBar.types.ts';
+export { RadioButton } from './components/RadioButton/RadioButton.tsx';
+export type { RadioButtonProps } from './components/RadioButton/RadioButton.types.ts';
+export { Skeleton } from './components/Skeleton/Skeleton.tsx';
+export type { SkeletonProps } from './components/Skeleton/Skeleton.types.ts';
+export { Stepper } from './components/Stepper/Stepper.tsx';
+export type {
+  StepperProps,
+  StepperOrientation,
+  StepperSize,
+} from './components/Stepper/Stepper.types.ts';
+export type { StepOptions, StepperStatus } from './components/Stepper/Step.types.ts';
+export { Select } from './components/Select/Select.tsx';
+export type { SelectProps, SelectOption, SelectSize } from './components/Select/Select.types.ts';
+export { Switch } from './components/Switch/Switch.tsx';
+export type { SwitchProps } from './components/Switch/Switch.types.ts';
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './components/Table/Table.tsx';
+export type {
+  TableProps,
+  TableBodyProps,
+  TableCellProps,
+  TableFooterProps,
+  TableHeadProps,
+  TableRowProps,
+  TableHeaderProps,
+} from './components/Table/Table.types.ts';
+export { Tabs } from './components/Tabs/Tabs.tsx';
+export type { TabsProps, TabItem } from './components/Tabs/Tabs.types.ts';
+export { Text } from './components/Text/Text.tsx';
+export type {
+  TextProps,
+  TextAlign,
+  TextColor,
+  TextVariant,
+  FontWeight,
+} from './components/Text/Text.types.ts';
+export { Textarea } from './components/Textarea/Textarea.tsx';
+export type { TextareaProps, TextareaSize } from './components/Textarea/Textarea.types.ts';
+export { Tooltip } from './components/Tooltip/Tooltip.tsx';
+export type { TooltipProps, TooltipPosition } from './components/Tooltip/Tooltip.types.ts';
+
+// layouts
+export { AppLayout } from './layouts/AppLayout/AppLayout.tsx';
+export type { AppLayoutProps } from './layouts/AppLayout/AppLayout.types.ts';
+export { AuthLayout } from './layouts/AuthLayout/AuthLayout.tsx';
+export type { AuthLayoutProps } from './layouts/AuthLayout/AuthLayout.types.tsx';
+export { DashboardLayout } from './layouts/DashboardLayout/DashboardLayout.tsx';
+export type { DashboardLayoutProps } from './layouts/DashboardLayout/DashboardLayout.types.tsx';
+export { SettingsLayout } from './layouts/SettingsLayout/SettingsLayout.tsx';
+export type { SettingsLayoutProps } from './layouts/SettingsLayout/SettingsLayout.types.tsx';

package/src/layouts/AppLayout/AppLayout.module.css

@@ -0,0 +1,17 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: var(--ds-surface-1);
+}
+
+.main {
+  flex: 1;
+  padding: var(--ds-space-6) 0;
+}
+
+.container {
+  max-width: 75rem;
+  margin: 0 auto;
+  padding: 0 var(--ds-space-4);
+}

package/src/layouts/AppLayout/AppLayout.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { AppLayout } from './AppLayout.tsx';
+import { Box } from '../../components/Box/Box.tsx';
+import { Button } from '../../components/Button/Button.tsx';
+import { Card, CardHeader, CardContent } from '../../components/Card/Card.tsx';
+import { Text } from '../../components/Text/Text.tsx';
+
+const meta = {
+  title: 'Layouts/AppLayout',
+  component: AppLayout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    headerTitle: 'Tharaday',
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+    onNavItemClick: fn(),
+  },
+} satisfies Meta<typeof AppLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const logo = (
+  <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+        fill="#3b82f6"
+      />
+      <path d="M16 8l8 12H8l8-12z" fill="#FFF" />
+    </g>
+  </svg>
+);
+
+const navItems = [
+  { id: 'dashboard', label: 'Dashboard' },
+  { id: 'components', label: 'Components' },
+  { id: 'tokens', label: 'Design Tokens' },
+  { id: 'settings', label: 'Settings' },
+];
+
+export const Default: Story = {
+  args: {
+    headerLogo: logo,
+    user: { name: 'John Doe' },
+    navItems,
+    activeNavId: 'dashboard',
+    navActions: (
+      <Button size="sm" variant="outline">
+        Feedback
+      </Button>
+    ),
+    children: (
+      <Box display="flex" flexDirection="column" gap={6}>
+        <Box>
+          <Text variant="h2">Dashboard Overview</Text>
+          <Text variant="body-lg" color="subtle">
+            Welcome to the demonstration of combined Header and NavBar.
+          </Text>
+        </Box>
+
+        <Box display="grid" gridTemplateColumns="1fr 1fr" gap={6}>
+          <Card bordered>
+            <CardHeader title="Role: Header" />
+            <CardContent>
+              <Text variant="body-md">
+                The top bar is the <strong>Header</strong>. It handles:
+              </Text>
+              <ul>
+                <li>Global Branding (Logo & Title)</li>
+                <li>User Identity (Welcome message)</li>
+                <li>Session State (Log out button)</li>
+              </ul>
+            </CardContent>
+          </Card>
+
+          <Card bordered>
+            <CardHeader title="Role: NavBar" />
+            <CardContent>
+              <Text variant="body-md">
+                The second bar is the <strong>NavBar</strong>. It handles:
+              </Text>
+              <ul>
+                <li>Information Architecture (Main sections)</li>
+                <li>Active State (Current location)</li>
+                <li>Contextual Actions (Feedback button)</li>
+              </ul>
+            </CardContent>
+          </Card>
+        </Box>
+
+        <Card bordered>
+          <CardHeader title="Why use both?" />
+          <CardContent>
+            <Text variant="body-md">
+              Using both components allows you to separate <strong>who</strong> the user is (Header)
+              from <strong>where</strong> the user is going (NavBar). This separation of concerns
+              keeps your UI clean and intuitive as the application grows in complexity.
+            </Text>
+          </CardContent>
+        </Card>
+      </Box>
+    ),
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    ...Default.args,
+    user: undefined,
+    navItems: [
+      { id: 'home', label: 'Home' },
+      { id: 'features', label: 'Features' },
+      { id: 'pricing', label: 'Pricing' },
+      { id: 'docs', label: 'Documentation' },
+    ],
+    activeNavId: 'home',
+  },
+};

package/src/layouts/AppLayout/AppLayout.tsx

@@ -0,0 +1,46 @@
+import styles from './AppLayout.module.css';
+import type { AppLayoutProps } from './AppLayout.types.ts';
+import { Header } from '../../components/Header/Header.tsx';
+import { NavBar } from '../../components/NavBar/NavBar.tsx';
+
+/**
+ * AppLayout provides a standard layout structure that includes both
+ * a Header (for branding and user state) and a NavBar (for navigation).
+ *
+ * This component demonstrates the distinct roles of Header and NavBar.
+ */
+export const AppLayout = ({
+  headerLogo,
+  headerTitle = 'Tharaday',
+  user,
+  navItems,
+  activeNavId,
+  navActions,
+  children,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+  onNavItemClick,
+}: AppLayoutProps) => {
+  return (
+    <div className={styles.root}>
+      <Header
+        logo={headerLogo}
+        title={headerTitle}
+        user={user}
+        onLogin={onLogin}
+        onLogout={onLogout}
+        onCreateAccount={onCreateAccount}
+      />
+      <NavBar
+        items={navItems}
+        activeId={activeNavId}
+        actions={navActions}
+        onItemClick={onNavItemClick}
+      />
+      <main className={styles.main}>
+        <div className={styles.container}>{children}</div>
+      </main>
+    </div>
+  );
+};