tharaday 0.1.1

package/src/components/Accordion/Accordion.module.css

@@ -0,0 +1,158 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Variants */
+.default {
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-md);
+  overflow: hidden;
+}
+
+.bordered .item {
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-md);
+  margin-bottom: var(--ds-space-2);
+}
+
+.bordered .item:last-child {
+  margin-bottom: 0;
+}
+
+.separated .item {
+  background-color: var(--ds-surface-1);
+  border-radius: var(--ds-radius-md);
+  margin-bottom: var(--ds-space-3);
+}
+
+.separated .item:last-child {
+  margin-bottom: 0;
+}
+
+.ghost .header {
+  background-color: transparent;
+}
+
+.ghost .item {
+  border-bottom: 1px solid var(--ds-border-2);
+}
+
+/* Items */
+.default .item {
+  border-bottom: 1px solid var(--ds-border-1);
+}
+
+.default .item:last-child {
+  border-bottom: none;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background-color: var(--ds-surface-0);
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font-weight: var(--ds-font-weight-medium);
+  transition: background-color 0.2s;
+}
+
+/* Sizes */
+.sm .header {
+  padding: var(--ds-space-2) var(--ds-space-3);
+  font-size: var(--ds-font-size-xs);
+}
+
+.md .header {
+  padding: var(--ds-space-4) var(--ds-space-5);
+  font-size: var(--ds-font-size-sm);
+}
+
+.lg .header {
+  padding: var(--ds-space-5) var(--ds-space-6);
+  font-size: var(--ds-font-size-base);
+}
+
+.header:hover:not(:disabled) {
+  background-color: var(--ds-surface-1);
+}
+
+.header:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 0 0 2px var(--ds-ring-offset),
+    inset 0 0 0 4px var(--ds-ring);
+  z-index: 1;
+}
+
+.header:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.icon {
+  transition: transform 0.2s;
+  font-size: 0.8em;
+}
+
+.iconExpanded {
+  transform: rotate(180deg);
+}
+
+.contentWrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
+  overflow: hidden;
+}
+
+.contentExpanded {
+  grid-template-rows: 1fr;
+}
+
+.content {
+  min-height: 0;
+}
+
+.contentBody {
+  background-color: var(--ds-surface-0);
+  border-top: 1px solid var(--ds-border-2);
+  color: var(--ds-text-2);
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition:
+    opacity 0.35s ease 0.05s,
+    transform 0.45s ease 0.05s;
+  will-change: opacity, transform;
+}
+
+.contentBodyExpanded {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sm .contentBody {
+  padding: var(--ds-space-2) var(--ds-space-3);
+  font-size: var(--ds-font-size-xs);
+}
+
+.md .contentBody {
+  padding: var(--ds-space-4) var(--ds-space-5);
+  font-size: var(--ds-font-size-sm);
+}
+
+.lg .contentBody {
+  padding: var(--ds-space-5) var(--ds-space-6);
+  font-size: var(--ds-font-size-base);
+}
+
+.separated .contentBody,
+.ghost .contentBody {
+  background-color: transparent;
+  border-top: none;
+}

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Accordion } from './Accordion.tsx';
+import { Badge } from '../Badge/Badge.tsx';
+import { Button } from '../Button/Button.tsx';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+const items = [
+  {
+    id: '1',
+    title: 'Section 1',
+    content: 'This is the content of section 1. It can contain any elements.',
+  },
+  {
+    id: '2',
+    title: 'Section 2',
+    content: 'This is the content of section 2. It is also very interesting.',
+  },
+  {
+    id: '3',
+    title: 'Disabled Section',
+    content: 'You should not see this.',
+    isDisabled: true,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items,
+    variant: 'default',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    items,
+    variant: 'ghost',
+  },
+};
+
+export const Bordered: Story = {
+  args: {
+    items,
+    variant: 'bordered',
+  },
+};
+
+export const Separated: Story = {
+  args: {
+    items,
+    variant: 'separated',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    items,
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    items,
+    size: 'lg',
+  },
+};
+
+export const AllowMultiple: Story = {
+  args: {
+    items,
+    allowMultiple: true,
+  },
+};
+
+export const DefaultExpanded: Story = {
+  args: {
+    items,
+    defaultExpanded: ['1'],
+  },
+};
+
+export const ComplexContent: Story = {
+  args: {
+    items: [
+      {
+        id: '1',
+        title: 'Mixed Content',
+        content: (
+          <div>
+            <p style={{ marginBottom: '16px' }}>
+              This section contains various elements to demonstrate flexibility.
+            </p>
+            <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
+              <Badge intent="success">Active</Badge>
+              <Badge intent="info">New</Badge>
+            </div>
+            <p style={{ marginBottom: '16px' }}>
+              You can nest buttons, images, or even other components here.
+            </p>
+            <Button size="sm">Action Item</Button>
+          </div>
+        ),
+      },
+      {
+        id: '2',
+        title: 'Long Text',
+        content: (
+          <div>
+            <p style={{ marginBottom: '12px' }}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <p>
+              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+        ),
+      },
+    ],
+  },
+};

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,68 @@
+import clsx from 'clsx';
+import { useState, useId } from 'react';
+
+import styles from './Accordion.module.css';
+import type { AccordionProps } from './Accordion.types.ts';
+
+export const Accordion = ({
+  items,
+  allowMultiple = false,
+  defaultExpanded = [],
+  variant = 'default',
+  size = 'md',
+  className,
+  id,
+}: AccordionProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-accordion-${baseId}`;
+  const [expandedItems, setExpandedItems] = useState<string[]>(defaultExpanded);
+
+  const toggleItem = (id: string) => {
+    setExpandedItems((prev) => {
+      if (prev.includes(id)) {
+        return prev.filter((item) => item !== id);
+      }
+      if (allowMultiple) {
+        return [...prev, id];
+      }
+      return [id];
+    });
+  };
+
+  return (
+    <div id={componentId} className={clsx(styles.root, styles[variant], styles[size], className)}>
+      {items.map((item) => {
+        const isExpanded = expandedItems.includes(item.id);
+
+        return (
+          <div key={item.id} className={styles.item}>
+            <button
+              type="button"
+              id={`${componentId}-header-${item.id}`}
+              className={styles.header}
+              onClick={() => toggleItem(item.id)}
+              disabled={item.isDisabled}
+              aria-expanded={isExpanded}
+              aria-controls={`${componentId}-content-${item.id}`}
+            >
+              <span>{item.title}</span>
+              <span className={clsx(styles.icon, isExpanded && styles.iconExpanded)}>▼</span>
+            </button>
+            <div
+              id={`${componentId}-content-${item.id}`}
+              role="region"
+              aria-labelledby={`${componentId}-header-${item.id}`}
+              className={clsx(styles.contentWrapper, isExpanded && styles.contentExpanded)}
+            >
+              <div className={styles.content}>
+                <div className={clsx(styles.contentBody, isExpanded && styles.contentBodyExpanded)}>
+                  {item.content}
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/Accordion/Accordion.types.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export interface AccordionItem {
+  id: string;
+  title: ReactNode;
+  content: ReactNode;
+  isDisabled?: boolean;
+}
+
+export type AccordionVariant = 'default' | 'ghost' | 'separated' | 'bordered';
+export type AccordionSize = 'sm' | 'md' | 'lg';
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  allowMultiple?: boolean;
+  defaultExpanded?: string[];
+  variant?: AccordionVariant;
+  size?: AccordionSize;
+  className?: string;
+  id?: string;
+}

package/src/components/Avatar/Avatar.module.css

@@ -0,0 +1,58 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-surface-1);
+  color: var(--ds-text-2);
+  font-family: var(--ds-font-family-base);
+  font-weight: var(--ds-font-weight-medium);
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.defaultIcon {
+  padding: 20%;
+}
+
+.fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-transform: uppercase;
+}
+
+/* Sizes */
+.xs {
+  width: var(--ds-space-6);
+  height: var(--ds-space-6);
+  font-size: 0.625rem;
+}
+.sm {
+  width: var(--ds-space-8);
+  height: var(--ds-space-8);
+  font-size: var(--ds-font-size-xs);
+}
+.md {
+  width: var(--ds-space-10, 2.5rem);
+  height: var(--ds-space-10, 2.5rem);
+  font-size: var(--ds-font-size-sm);
+}
+.lg {
+  width: var(--ds-space-12);
+  height: var(--ds-space-12);
+  font-size: var(--ds-font-size-base);
+}
+.xl {
+  width: var(--ds-space-16, 4rem);
+  height: var(--ds-space-16, 4rem);
+  font-size: var(--ds-font-size-lg);
+}

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Avatar } from './Avatar.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: 'Jane Doe',
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=128&q=80',
+    name: 'Jane Doe',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <Box display="flex" alignItems="center" gap={4}>
+      <Avatar size="xs" name="John Doe" />
+      <Avatar size="sm" name="John Doe" />
+      <Avatar size="md" name="John Doe" />
+      <Avatar size="lg" name="John Doe" />
+      <Avatar size="xl" name="John Doe" />
+    </Box>
+  ),
+};

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+
+import styles from './Avatar.module.css';
+import type { AvatarProps } from './Avatar.types.ts';
+
+export const Avatar = ({
+  src,
+  alt,
+  name,
+  size = 'md',
+  fallback,
+  className,
+  ...props
+}: AvatarProps) => {
+  const [hasError, setHasError] = useState(false);
+  const accessibleLabel = alt ?? name;
+
+  const getInitials = (name: string) => {
+    return name
+      .split(' ')
+      .map((n) => n[0])
+      .slice(0, 2)
+      .join('');
+  };
+
+  const renderContent = () => {
+    if (src && !hasError) {
+      return (
+        <img
+          src={src}
+          alt={accessibleLabel || ''}
+          className={styles.image}
+          onError={() => setHasError(true)}
+        />
+      );
+    }
+
+    if (fallback) {
+      return <span className={styles.fallback}>{fallback}</span>;
+    }
+    if (name) {
+      return <span className={styles.fallback}>{getInitials(name)}</span>;
+    }
+
+    return (
+      <svg
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className={clsx(styles.image, styles.defaultIcon)}
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+      </svg>
+    );
+  };
+
+  return (
+    <div className={clsx(styles.root, styles[size], className)} {...props}>
+      {renderContent()}
+    </div>
+  );
+};

package/src/components/Avatar/Avatar.types.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'react';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  src?: string;
+  alt?: string;
+  name?: string;
+  size?: AvatarSize;
+  fallback?: string;
+  className?: string;
+}

package/src/components/Badge/Badge.module.css

@@ -0,0 +1,98 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--ds-font-family-base);
+  font-weight: var(--ds-font-weight-medium);
+  border-radius: var(--ds-radius-full);
+  white-space: nowrap;
+}
+
+/* Sizes */
+.sm {
+  height: var(--ds-space-5, 1.25rem);
+  padding: 0 var(--ds-space-2);
+  font-size: 0.625rem;
+}
+
+.md {
+  height: var(--ds-space-6);
+  padding: 0 var(--ds-space-3);
+  font-size: var(--ds-font-size-xs);
+}
+
+.lg {
+  height: var(--ds-space-8);
+  padding: 0 var(--ds-space-4);
+  font-size: var(--ds-font-size-sm);
+}
+
+/* Solid Variant */
+.solid.neutral {
+  background-color: var(--ds-neutral);
+  color: var(--ds-text-on-brand);
+}
+.solid.success {
+  background-color: var(--ds-success);
+  color: var(--ds-text-on-brand);
+}
+.solid.warning {
+  background-color: var(--ds-warning);
+  color: var(--ds-text-on-brand);
+}
+.solid.danger {
+  background-color: var(--ds-danger);
+  color: var(--ds-text-on-brand);
+}
+.solid.info {
+  background-color: var(--ds-info);
+  color: var(--ds-text-on-brand);
+}
+
+/* Subtle Variant */
+.subtle.neutral {
+  background-color: var(--ds-surface-1);
+  color: var(--ds-neutral-active);
+}
+.subtle.success {
+  background-color: var(--ds-success-subtle);
+  color: var(--ds-success-active);
+}
+.subtle.warning {
+  background-color: var(--ds-warning-subtle);
+  color: var(--ds-warning-active);
+}
+.subtle.danger {
+  background-color: var(--ds-danger-subtle);
+  color: var(--ds-danger-active);
+}
+.subtle.info {
+  background-color: var(--ds-info-subtle);
+  color: var(--ds-info-active);
+}
+
+/* Outline Variant */
+.outline {
+  background-color: transparent;
+  border: 1px solid currentColor;
+}
+.outline.neutral {
+  color: var(--ds-neutral);
+  border-color: var(--ds-border-1);
+}
+.outline.success {
+  color: var(--ds-success);
+  border-color: var(--ds-success);
+}
+.outline.warning {
+  color: var(--ds-warning);
+  border-color: var(--ds-warning);
+}
+.outline.danger {
+  color: var(--ds-danger);
+  border-color: var(--ds-danger);
+}
+.outline.info {
+  color: var(--ds-info);
+  border-color: var(--ds-info);
+}