tharaday 0.1.1

package/src/components/Box/Box.tsx

@@ -0,0 +1,95 @@
+import clsx from 'clsx';
+
+import styles from './Box.module.css';
+import type { BoxProps } from './Box.types.ts';
+
+export const Box = ({
+  children,
+  as: Component = 'div',
+  display,
+  padding,
+  paddingX,
+  paddingY,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  m,
+  mx,
+  my,
+  mt,
+  mb,
+  ml,
+  mr,
+  gap,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  flexWrap,
+  flexGrow,
+  flexShrink,
+  flex,
+  fullWidth,
+  textAlign,
+  width,
+  height,
+  gridTemplateColumns,
+  backgroundColor,
+  border,
+  borderBottom,
+  borderColor,
+  borderRadius,
+  className,
+  style,
+  ...props
+}: BoxProps) => {
+  const boxStyles = {
+    ...style,
+    flexGrow,
+    flexShrink,
+    flex,
+    width,
+    height,
+    gridTemplateColumns,
+  };
+
+  return (
+    <Component
+      className={clsx(
+        styles.box,
+        display && styles[`display-${display}`],
+        textAlign && styles[`textAlign-${textAlign}`],
+        padding !== undefined && styles[`p-${padding}`],
+        paddingX !== undefined && styles[`px-${paddingX}`],
+        paddingY !== undefined && styles[`py-${paddingY}`],
+        paddingTop !== undefined && styles[`pt-${paddingTop}`],
+        paddingBottom !== undefined && styles[`pb-${paddingBottom}`],
+        paddingLeft !== undefined && styles[`pl-${paddingLeft}`],
+        paddingRight !== undefined && styles[`pr-${paddingRight}`],
+        m !== undefined && styles[`m-${m}`],
+        mx !== undefined && styles[`mx-${mx}`],
+        my !== undefined && styles[`my-${my}`],
+        mt !== undefined && styles[`mt-${mt}`],
+        mb !== undefined && styles[`mb-${mb}`],
+        ml !== undefined && styles[`ml-${ml}`],
+        mr !== undefined && styles[`mr-${mr}`],
+        gap !== undefined && styles[`gap-${gap}`],
+        flexDirection && styles[`flexDirection-${flexDirection}`],
+        alignItems && styles[`alignItems-${alignItems}`],
+        justifyContent && styles[`justifyContent-${justifyContent}`],
+        flexWrap && styles[`flexWrap-${flexWrap}`],
+        backgroundColor && styles[`bg-${backgroundColor}`],
+        border && styles.border,
+        borderBottom && styles.borderBottom,
+        borderColor && styles[`borderColor-${borderColor}`],
+        borderRadius && styles[`borderRadius-${borderRadius}`],
+        fullWidth && styles.fullWidth,
+        className
+      )}
+      style={boxStyles}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/Box/Box.types.ts

@@ -0,0 +1,65 @@
+import type { HTMLAttributes, ReactNode, ElementType } from 'react';
+
+export type BoxPadding = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 14;
+export type BoxMargin = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 14;
+export type BoxGap = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 14;
+export type BoxDisplay = 'block' | 'flex' | 'inline-flex' | 'grid' | 'inline-block' | 'none';
+export type BoxFlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type BoxAlignItems = 'stretch' | 'flex-start' | 'center' | 'flex-end' | 'baseline';
+export type BoxJustifyContent =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+
+export type BoxBackgroundColor =
+  | 'none'
+  | 'main'
+  | 'subtle'
+  | 'info-subtle'
+  | 'success-subtle'
+  | 'warning-subtle'
+  | 'danger-subtle';
+export type BoxBorderColor = 'main' | 'subtle' | 'danger' | 'warning' | 'success' | 'info';
+export type BoxBorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
+
+export interface BoxProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  as?: ElementType;
+  display?: BoxDisplay;
+  padding?: BoxPadding;
+  paddingX?: BoxPadding;
+  paddingY?: BoxPadding;
+  paddingTop?: BoxPadding;
+  paddingBottom?: BoxPadding;
+  paddingLeft?: BoxPadding;
+  paddingRight?: BoxPadding;
+  m?: BoxMargin;
+  mx?: BoxMargin;
+  my?: BoxMargin;
+  mt?: BoxMargin;
+  mb?: BoxMargin;
+  ml?: BoxMargin;
+  mr?: BoxMargin;
+  gap?: BoxGap;
+  flexDirection?: BoxFlexDirection;
+  alignItems?: BoxAlignItems;
+  justifyContent?: BoxJustifyContent;
+  className?: string;
+  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+  flexGrow?: number | string;
+  flexShrink?: number | string;
+  flex?: number | string;
+  fullWidth?: boolean;
+  textAlign?: 'left' | 'center' | 'right' | 'justify';
+  width?: string | number;
+  height?: string | number;
+  gridTemplateColumns?: string;
+  backgroundColor?: BoxBackgroundColor;
+  border?: boolean;
+  borderBottom?: boolean;
+  borderColor?: BoxBorderColor;
+  borderRadius?: BoxBorderRadius;
+}

package/src/components/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,41 @@
+.root {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+}
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  gap: var(--ds-space-2);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+}
+
+.link {
+  color: var(--ds-text-2);
+  text-decoration: none;
+  transition: color var(--ds-transition-fast);
+}
+
+.link:hover:not(.current) {
+  color: var(--ds-info);
+  text-decoration: underline;
+}
+
+.current {
+  color: var(--ds-text-1);
+  font-weight: var(--ds-font-weight-medium);
+  cursor: default;
+}
+
+.separator {
+  color: var(--ds-text-2);
+  user-select: none;
+}

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs.tsx';
+
+const meta = {
+  title: 'Components/Breadcrumbs',
+  component: Breadcrumbs,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Breadcrumbs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <Breadcrumbs {...args}>
+      <BreadcrumbItem href="/">Home</BreadcrumbItem>
+      <BreadcrumbItem href="/components">Components</BreadcrumbItem>
+      <BreadcrumbItem isCurrent>Breadcrumbs</BreadcrumbItem>
+    </Breadcrumbs>
+  ),
+};
+
+export const CustomSeparator: Story = {
+  args: {
+    separator: '>',
+  },
+  render: (args) => (
+    <Breadcrumbs {...args}>
+      <BreadcrumbItem href="/">Home</BreadcrumbItem>
+      <BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
+      <BreadcrumbItem href="/projects/123">Project Details</BreadcrumbItem>
+      <BreadcrumbItem isCurrent>Settings</BreadcrumbItem>
+    </Breadcrumbs>
+  ),
+};

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,54 @@
+import clsx from 'clsx';
+import { Children, Fragment } from 'react';
+
+import styles from './Breadcrumbs.module.css';
+import type { BreadcrumbsProps, BreadcrumbItemProps } from './Breadcrumbs.types.ts';
+
+export const BreadcrumbItem = ({
+  href,
+  isCurrent,
+  children,
+  className,
+  ...props
+}: BreadcrumbItemProps) => {
+  const Component = href && !isCurrent ? 'a' : 'span';
+
+  return (
+    <li className={styles.item}>
+      <Component
+        href={href}
+        className={clsx(styles.link, isCurrent && styles.current, className)}
+        aria-current={isCurrent ? 'page' : undefined}
+        {...props}
+      >
+        {children}
+      </Component>
+    </li>
+  );
+};
+
+export const Breadcrumbs = ({
+  children,
+  separator = '/',
+  className,
+  ...props
+}: BreadcrumbsProps) => {
+  const items = Children.toArray(children);
+
+  return (
+    <nav aria-label="Breadcrumbs" className={clsx(styles.root, className)} {...props}>
+      <ol className={styles.list}>
+        {items.map((item, index) => (
+          <Fragment key={index}>
+            {item}
+            {index < items.length - 1 && (
+              <li className={styles.separator} aria-hidden="true">
+                {separator}
+              </li>
+            )}
+          </Fragment>
+        ))}
+      </ol>
+    </nav>
+  );
+};

package/src/components/Breadcrumbs/Breadcrumbs.types.ts

@@ -0,0 +1,13 @@
+import type { ReactNode, AnchorHTMLAttributes, HTMLAttributes } from 'react';
+
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  separator?: ReactNode;
+  className?: string;
+}
+
+export interface BreadcrumbItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href?: string;
+  isCurrent?: boolean;
+  children: ReactNode;
+}

package/src/components/Button/Button.module.css

@@ -0,0 +1,247 @@
+.root {
+  /* 1. Base Reset & Layout */
+  all: unset; /* Remove default browser styling */
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  gap: var(--ds-space-2);
+
+  /* 2. Typography & Shape */
+  font-family: var(--ds-font-family-base);
+  font-weight: var(--ds-font-weight-medium);
+  border-radius: var(--ds-radius-md);
+  text-align: center;
+  white-space: nowrap;
+
+  /* 3. Global Transitions */
+  transition:
+    background-color var(--ds-transition-fast),
+    color var(--ds-transition-fast),
+    border-color var(--ds-transition-fast),
+    box-shadow var(--ds-transition-fast),
+    transform var(--ds-transition-fast);
+}
+
+/* Size Mapping - 5 Size Scale */
+
+/* Extra Small: For tight UI like compact headers or tables */
+.xs {
+  height: var(--ds-space-6); /* 24px */
+  padding: 0 var(--ds-space-2);
+  font-size: var(--ds-font-size-xs);
+  gap: var(--ds-space-1);
+}
+
+/* Small: Standard secondary action size */
+.sm {
+  height: var(--ds-space-8); /* 32px */
+  padding: 0 var(--ds-space-3);
+  font-size: var(--ds-font-size-xs);
+}
+
+/* Medium: The default size for most UI */
+.md {
+  height: calc(var(--ds-space-4) * 2.5); /* 40px */
+  padding: 0 var(--ds-space-4);
+  font-size: var(--ds-font-size-sm);
+}
+
+/* Large: Primary page actions */
+.lg {
+  height: var(--ds-space-12); /* 48px */
+  padding: 0 var(--ds-space-6);
+  font-size: var(--ds-font-size-base);
+}
+
+/* Extra Large: Large hero sections or mobile-first primary buttons */
+.xl {
+  height: var(--ds-space-14); /* 56px */
+  padding: 0 var(--ds-space-8);
+  font-size: var(--ds-font-size-lg);
+  font-weight: var(--ds-font-weight-bold);
+}
+
+/* Variant Mapping ... */
+
+/* Solid: The main call to action */
+.solid {
+  background-color: var(--ds-neutral);
+  color: var(--ds-text-on-brand);
+}
+.solid:hover:not(:disabled) {
+  background-color: var(--ds-neutral-hover);
+}
+.solid:active:not(:disabled) {
+  background-color: var(--ds-neutral-active);
+  transform: translateY(0.0625rem);
+}
+
+.solid.success {
+  background-color: var(--ds-success);
+}
+.solid.success:hover:not(:disabled) {
+  background-color: var(--ds-success-hover);
+}
+.solid.success:active:not(:disabled) {
+  background-color: var(--ds-success-active);
+}
+
+.solid.warning {
+  background-color: var(--ds-warning);
+}
+.solid.warning:hover:not(:disabled) {
+  background-color: var(--ds-warning-hover);
+}
+.solid.warning:active:not(:disabled) {
+  background-color: var(--ds-warning-active);
+}
+
+.solid.danger {
+  background-color: var(--ds-danger);
+}
+.solid.danger:hover:not(:disabled) {
+  background-color: var(--ds-danger-hover);
+}
+.solid.danger:active:not(:disabled) {
+  background-color: var(--ds-danger-active);
+}
+
+.solid.info {
+  background-color: var(--ds-info);
+}
+.solid.info:hover:not(:disabled) {
+  background-color: var(--ds-info-hover);
+}
+.solid.info:active:not(:disabled) {
+  background-color: var(--ds-info-active);
+}
+
+/* Outline: Outline or subtle background */
+.outline {
+  background-color: transparent;
+  color: var(--ds-neutral);
+  border: 1px solid var(--ds-neutral);
+}
+.outline:hover:not(:disabled) {
+  background-color: var(--ds-neutral-hover);
+  color: var(--ds-text-on-brand);
+  border-color: var(--ds-neutral-hover);
+}
+.outline:active:not(:disabled) {
+  background-color: var(--ds-neutral-active);
+  color: var(--ds-text-on-brand);
+  border-color: var(--ds-neutral-active);
+}
+
+.outline.success {
+  color: var(--ds-success);
+  border-color: var(--ds-success);
+}
+.outline.success:hover:not(:disabled) {
+  background-color: var(--ds-success-hover);
+  border-color: var(--ds-success-hover);
+}
+.outline.success:active:not(:disabled) {
+  background-color: var(--ds-success-active);
+  border-color: var(--ds-success-active);
+}
+
+.outline.warning {
+  color: var(--ds-warning);
+  border-color: var(--ds-warning);
+}
+.outline.warning:hover:not(:disabled) {
+  background-color: var(--ds-warning-hover);
+  border-color: var(--ds-warning-hover);
+}
+.outline.warning:active:not(:disabled) {
+  background-color: var(--ds-warning-active);
+  border-color: var(--ds-warning-active);
+}
+
+.outline.danger {
+  color: var(--ds-danger);
+  border-color: var(--ds-danger);
+}
+.outline.danger:hover:not(:disabled) {
+  background-color: var(--ds-danger-hover);
+  border-color: var(--ds-danger-hover);
+}
+.outline.danger:active:not(:disabled) {
+  background-color: var(--ds-danger-active);
+  border-color: var(--ds-danger-active);
+}
+
+.outline.info {
+  color: var(--ds-info);
+  border-color: var(--ds-info);
+}
+.outline.info:hover:not(:disabled) {
+  background-color: var(--ds-info-hover);
+  border-color: var(--ds-info-hover);
+}
+.outline.info:active:not(:disabled) {
+  background-color: var(--ds-info-active);
+  border-color: var(--ds-info-active);
+}
+
+/* Subtle: Minimalist, used in toolbars */
+.subtle {
+  background-color: transparent;
+  color: var(--ds-neutral);
+}
+.subtle:hover:not(:disabled) {
+  background-color: var(--ds-surface-1);
+}
+.subtle:active:not(:disabled) {
+  background-color: var(--ds-surface-1);
+}
+
+.subtle.success {
+  color: var(--ds-success);
+}
+.subtle.success:hover:not(:disabled) {
+  background-color: var(--ds-success-subtle);
+}
+
+.subtle.warning {
+  color: var(--ds-warning);
+}
+.subtle.warning:hover:not(:disabled) {
+  background-color: var(--ds-warning-subtle);
+}
+
+.subtle.danger {
+  color: var(--ds-danger);
+}
+.subtle.danger:hover:not(:disabled) {
+  background-color: var(--ds-danger-subtle);
+}
+
+.subtle.info {
+  color: var(--ds-info);
+}
+.subtle.info:hover:not(:disabled) {
+  background-color: var(--ds-info-subtle);
+}
+
+/* --- Global States --- */
+.root:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+
+.root:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  filter: grayscale(0.8);
+}
+
+.fullWidth {
+  width: 100%;
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { Button } from './Button.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Solid: Story = {
+  args: {
+    variant: 'solid',
+    children: 'Button',
+  },
+};
+
+export const Subtle: Story = {
+  args: {
+    variant: 'subtle',
+    children: 'Button',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    children: 'Button',
+  },
+};
+
+export const ExtraSmall: Story = {
+  args: {
+    size: 'xs',
+    children: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    children: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    children: 'Button',
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    size: 'xl',
+    children: 'Button',
+  },
+};
+
+export const All: Story = {
+  name: 'Gallery',
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={8}>
+      {(['solid', 'subtle', 'outline'] as const).map((variant) => (
+        <Box key={variant} display="flex" flexDirection="column" gap={4}>
+          <Box as="h3" m={0} style={{ textTransform: 'capitalize' }}>
+            {variant}
+          </Box>
+          <Box display="flex" flexWrap="wrap" gap={4}>
+            {(['neutral', 'success', 'warning', 'danger', 'info'] as const).map((intent) => (
+              <Box key={intent} display="flex" gap={2} alignItems="center">
+                {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
+                  <Button key={size} variant={variant} intent={intent} size={size}>
+                    Button
+                  </Button>
+                ))}
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  ),
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+
+import styles from './Button.module.css';
+import type { ButtonProps } from './Button.types.ts';
+
+export const Button = ({
+  size = 'md',
+  variant = 'outline',
+  intent = 'neutral',
+  fullWidth = false,
+  className,
+  children,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      type="button"
+      className={clsx(
+        styles.root,
+        styles[size],
+        styles[variant],
+        styles[intent],
+        fullWidth && styles.fullWidth,
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

package/src/components/Button/Button.types.ts

@@ -0,0 +1,14 @@
+import type { ButtonHTMLAttributes } from 'react';
+
+export type ButtonVariant = 'solid' | 'subtle' | 'outline';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonIntent = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  intent?: ButtonIntent;
+  isLoading?: boolean;
+  fullWidth?: boolean;
+  className?: string;
+}