tharaday 0.1.1

package/src/components/Card/Card.module.css

@@ -0,0 +1,112 @@
+.root {
+  background-color: var(--ds-surface-0);
+  border-radius: var(--ds-radius-lg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.bordered {
+  border: 1px solid var(--ds-border-1);
+}
+
+/* Shadows */
+.shadowNone {
+  box-shadow: none;
+}
+.shadowSm {
+  box-shadow: var(--ds-shadow-sm);
+}
+.shadowMd {
+  box-shadow: var(--ds-shadow-md);
+}
+
+/* Border Colors */
+.borderColor-main {
+  border-color: var(--ds-border-1);
+}
+.borderColor-subtle {
+  border-color: var(--ds-border-2);
+}
+.borderColor-danger {
+  border-color: var(--ds-danger);
+}
+.borderColor-success {
+  border-color: var(--ds-success);
+}
+.borderColor-info {
+  border-color: var(--ds-info);
+}
+.borderColor-warning {
+  border-color: var(--ds-warning);
+}
+
+/* Background Color */
+.backgroundColor-none {
+  background-color: transparent;
+}
+.backgroundColor-subtle {
+  background-color: var(--ds-surface-1);
+}
+.backgroundColor-danger-subtle {
+  background-color: var(--ds-danger-subtle);
+}
+.backgroundColor-success-subtle {
+  background-color: var(--ds-success-subtle);
+}
+.backgroundColor-warning-subtle {
+  background-color: var(--ds-warning-subtle);
+}
+.backgroundColor-info-subtle {
+  background-color: var(--ds-info-subtle);
+}
+
+/* Paddings */
+.pNone {
+  padding: 0;
+}
+.pSm {
+  padding: var(--ds-space-4);
+}
+.pMd {
+  padding: var(--ds-space-6);
+}
+.pLg {
+  padding: var(--ds-space-8);
+}
+
+/* Subcomponents */
+.header {
+  padding-bottom: var(--ds-space-4);
+  border-bottom: 1px solid var(--ds-border-2);
+  margin-bottom: var(--ds-space-4);
+}
+
+.title {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-lg);
+  font-weight: var(--ds-font-weight-bold);
+  color: var(--ds-text-1);
+  margin: 0;
+}
+
+.subtitle {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  color: var(--ds-text-2);
+  margin: var(--ds-space-1) 0 0 0;
+}
+
+.content {
+  flex: 1;
+}
+
+.footer {
+  padding-top: var(--ds-space-4);
+  border-top: 1px solid var(--ds-border-2);
+  margin-top: var(--ds-space-4);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ds-space-3);
+}

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Card, CardHeader, CardContent, CardFooter } from './Card.tsx';
+import { Button } from '../Button/Button.tsx';
+import { Text } from '../Text/Text.tsx';
+
+const meta = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    padding: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg'],
+    },
+    shadow: {
+      control: 'select',
+      options: ['none', 'sm', 'md'],
+    },
+    bordered: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Card {...args} className="w-[400px]">
+      <CardHeader title="Card Title" subtitle="This is a card subtitle providing more context." />
+      <CardContent>
+        <Text>
+          This is the main content area of the card. You can put any components or text here.
+        </Text>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" size="sm">
+          Cancel
+        </Button>
+        <Button variant="solid" size="sm" intent="info">
+          Confirm
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const Simple: Story = {
+  render: (args) => (
+    <Card {...args} className="w-[300px]">
+      <CardContent>
+        <Text>A simple card with only content and no border.</Text>
+      </CardContent>
+    </Card>
+  ),
+  args: {
+    bordered: false,
+    shadow: 'md',
+  },
+};
+
+export const BackgroundColor: Story = {
+  render: (args) => (
+    <Card {...args} className="w-[400px]" backgroundColor="subtle">
+      <CardHeader title="Card Title" subtitle="This is a card subtitle providing more context." />
+      <CardContent>
+        <Text>
+          This is the main content area of the card. You can put any components or text here.
+        </Text>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" size="sm">
+          Cancel
+        </Button>
+        <Button variant="solid" size="sm" intent="info">
+          Confirm
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};

package/src/components/Card/Card.tsx

@@ -0,0 +1,70 @@
+import clsx from 'clsx';
+
+import styles from './Card.module.css';
+import type {
+  CardProps,
+  CardHeaderProps,
+  CardContentProps,
+  CardFooterProps,
+} from './Card.types.ts';
+
+export const Card = ({
+  padding = 'md',
+  shadow = 'sm',
+  bordered = true,
+  borderColor,
+  backgroundColor,
+  className,
+  children,
+  ...props
+}: CardProps) => {
+  const paddingClass = {
+    none: styles.pNone,
+    sm: styles.pSm,
+    md: styles.pMd,
+    lg: styles.pLg,
+  }[padding];
+
+  const shadowClass = {
+    none: styles.shadowNone,
+    sm: styles.shadowSm,
+    md: styles.shadowMd,
+  }[shadow];
+
+  return (
+    <div
+      className={clsx(
+        styles.root,
+        paddingClass,
+        shadowClass,
+        bordered && styles.bordered,
+        borderColor && styles[`borderColor-${borderColor}`],
+        backgroundColor && styles[`backgroundColor-${backgroundColor}`],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const CardHeader = ({ title, subtitle, className, children, ...props }: CardHeaderProps) => (
+  <div className={clsx(styles.header, className)} {...props}>
+    {title && <h3 className={styles.title}>{title}</h3>}
+    {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+    {children}
+  </div>
+);
+
+export const CardContent = ({ className, children, ...props }: CardContentProps) => (
+  <div className={clsx(styles.content, className)} {...props}>
+    {children}
+  </div>
+);
+
+export const CardFooter = ({ className, children, ...props }: CardFooterProps) => (
+  <div className={clsx(styles.footer, className)} {...props}>
+    {children}
+  </div>
+);

package/src/components/Card/Card.types.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+import type { BoxBackgroundColor, BoxBorderColor } from '../Box/Box.types.ts';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  shadow?: 'none' | 'sm' | 'md';
+  bordered?: boolean;
+  borderColor?: BoxBorderColor;
+  backgroundColor?: BoxBackgroundColor;
+}
+
+export interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+}
+
+export type CardContentProps = HTMLAttributes<HTMLDivElement>;
+
+export type CardFooterProps = HTMLAttributes<HTMLDivElement>;

package/src/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,88 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+}
+
+.container {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ds-space-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.container.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.control {
+  flex-shrink: 0;
+  height: 1.125rem;
+  width: 1.125rem;
+  background-color: var(--ds-surface-0);
+  border: 0.125rem solid var(--ds-border-1);
+  border-radius: var(--ds-radius-sm);
+  transition: all var(--ds-transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.125rem;
+}
+
+.input:checked ~ .control {
+  background-color: var(--ds-info);
+  border-color: var(--ds-info);
+}
+
+.input:focus-visible ~ .control {
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+
+.container:hover .input:not(:checked):not(:disabled) ~ .control {
+  border-color: var(--ds-neutral-hover);
+}
+
+.checkmark {
+  color: var(--ds-text-on-brand);
+  width: 0.75rem;
+  height: 0.75rem;
+  display: none;
+}
+
+.input:checked ~ .control .checkmark {
+  display: block;
+}
+
+.label {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  color: var(--ds-text-1);
+  line-height: var(--ds-line-height-base);
+}
+
+.error .control {
+  border-color: var(--ds-danger);
+}
+
+.helperText {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-xs);
+  color: var(--ds-text-2);
+  margin-left: calc(1.125rem + var(--ds-space-2));
+}
+
+.errorText {
+  color: var(--ds-danger);
+}

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Checkbox } from './Checkbox.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'I agree to the terms and conditions',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    label: 'Remember me',
+    defaultChecked: true,
+  },
+};
+
+export const WithHelperText: Story = {
+  args: {
+    label: 'Notifications',
+    helperText: 'Receive email notifications about your account activity.',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    label: 'Required agreement',
+    error: true,
+    helperText: 'You must agree to continue.',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled option',
+    disabled: true,
+  },
+};
+
+export const All: Story = {
+  name: 'Gallery',
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={6}>
+      <Checkbox label="Default" />
+      <Checkbox label="Checked" defaultChecked />
+      <Checkbox label="With Helper Text" helperText="Additional information here" />
+      <Checkbox label="Error State" error helperText="This field is required" />
+      <Checkbox label="Disabled" disabled />
+      <Checkbox label="Disabled Checked" disabled defaultChecked />
+    </Box>
+  ),
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import { useId } from 'react';
+
+import styles from './Checkbox.module.css';
+import type { CheckboxProps } from './Checkbox.types.ts';
+
+export const Checkbox = ({
+  label,
+  error,
+  helperText,
+  className,
+  disabled,
+  id,
+  ...props
+}: CheckboxProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-checkbox-${baseId}`;
+  const helperId = helperText ? `${componentId}-help` : undefined;
+
+  return (
+    <div className={clsx(styles.wrapper, className)}>
+      <label
+        htmlFor={componentId}
+        className={clsx(styles.container, disabled && styles.disabled, error && styles.error)}
+      >
+        <input
+          type="checkbox"
+          id={componentId}
+          disabled={disabled}
+          className={styles.input}
+          aria-describedby={helperId}
+          aria-invalid={error || undefined}
+          {...props}
+        />
+        <span className={styles.control}>
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={styles.checkmark}
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </span>
+        {label && <span className={styles.label}>{label}</span>}
+      </label>
+      {helperText && (
+        <span id={helperId} className={clsx(styles.helperText, error && styles.errorText)}>
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,7 @@
+import type { InputHTMLAttributes } from 'react';
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label?: string;
+  error?: boolean;
+  helperText?: string;
+}

package/src/components/Dropdown/Dropdown.module.css

@@ -0,0 +1,140 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+  font-family: var(--ds-font-family-base);
+  width: fit-content;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.label {
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-1);
+}
+
+.container {
+  position: relative;
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--ds-space-2) var(--ds-space-3);
+  background-color: var(--ds-surface-0);
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-md);
+  font-size: var(--ds-font-size-base);
+  color: var(--ds-text-1);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+}
+
+.trigger:focus-visible {
+  outline: none;
+  border-color: var(--ds-info);
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+
+.trigger:disabled {
+  background-color: var(--ds-surface-disabled);
+  color: var(--ds-text-disabled);
+  border-color: var(--ds-border-disabled);
+  cursor: not-allowed;
+}
+
+.error .trigger {
+  border-color: var(--ds-danger);
+}
+
+.sm .trigger {
+  padding: var(--ds-space-1) var(--ds-space-2);
+  font-size: var(--ds-font-size-xs);
+}
+
+.lg .trigger {
+  padding: var(--ds-space-3) var(--ds-space-4);
+  font-size: var(--ds-font-size-lg);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  transition: transform 0.2s ease;
+}
+
+.isOpen .icon {
+  transform: rotate(180deg);
+}
+
+.menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  margin-top: var(--ds-space-1);
+  background-color: var(--ds-surface-0);
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-md);
+  box-shadow: var(--ds-shadow-lg);
+  max-height: 300px;
+  overflow-y: auto;
+  padding: var(--ds-space-1) 0;
+  list-style: none;
+}
+
+.option {
+  display: flex;
+  flex-direction: column;
+  padding: var(--ds-space-2) var(--ds-space-3);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  outline: none;
+}
+
+.optionFocused {
+  background-color: var(--ds-neutral-subtle);
+}
+
+.optionSelected {
+  background-color: var(--ds-info-subtle);
+  color: var(--ds-info);
+}
+
+.optionSelected.optionFocused {
+  background-color: var(--ds-info-subtle);
+  box-shadow: inset 0 0 0 1px var(--ds-info);
+}
+
+.optionDisabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.optionLabel {
+  font-weight: var(--ds-font-weight-medium);
+}
+
+.optionDescription {
+  font-size: var(--ds-font-size-xs);
+  color: var(--ds-text-2);
+}
+
+.helperText {
+  font-size: var(--ds-font-size-xs);
+  color: var(--ds-text-2);
+}
+
+.errorText {
+  color: var(--ds-danger);
+}