tharaday 0.1.1

package/src/components/ProgressBar/ProgressBar.module.css

@@ -0,0 +1,67 @@
+.wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+}
+
+.labelWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.label {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-1);
+}
+
+.percentage {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-xs);
+  color: var(--ds-text-2);
+}
+
+.progressRoot {
+  width: 100%;
+  background-color: var(--ds-surface-1);
+  border-radius: var(--ds-radius-full);
+  overflow: hidden;
+}
+
+.indicator {
+  height: 100%;
+  transition: width var(--ds-transition-base);
+}
+
+/* Sizes */
+.sm .progressRoot {
+  height: var(--ds-space-1);
+}
+
+.md .progressRoot {
+  height: var(--ds-space-2);
+}
+
+.lg .progressRoot {
+  height: var(--ds-space-3);
+}
+
+/* Intents */
+.info .indicator {
+  background-color: var(--ds-info);
+}
+
+.success .indicator {
+  background-color: var(--ds-success);
+}
+
+.warning .indicator {
+  background-color: var(--ds-warning);
+}
+
+.danger .indicator {
+  background-color: var(--ds-danger);
+}

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ProgressBar } from './ProgressBar.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100 },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    intent: {
+      control: 'select',
+      options: ['info', 'success', 'warning', 'danger'],
+    },
+  },
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 40,
+    showLabel: true,
+    label: 'Loading files...',
+  },
+};
+
+export const Intents: Story = {
+  args: {
+    value: 50,
+  },
+  render: (args) => (
+    <Box display="flex" flexDirection="column" gap={4} width="300px">
+      <ProgressBar {...args} intent="info" label="Info" value={25} showLabel />
+      <ProgressBar {...args} intent="success" label="Success" value={50} showLabel />
+      <ProgressBar {...args} intent="warning" label="Warning" value={75} showLabel />
+      <ProgressBar {...args} intent="danger" label="Danger" value={100} showLabel />
+    </Box>
+  ),
+};
+
+export const Sizes: Story = {
+  args: {
+    value: 50,
+  },
+  render: (args) => (
+    <Box display="flex" flexDirection="column" gap={4} width="300px">
+      <ProgressBar {...args} size="sm" label="Small" value={40} />
+      <ProgressBar {...args} size="md" label="Medium" value={60} />
+      <ProgressBar {...args} size="lg" label="Large" value={80} />
+    </Box>
+  ),
+};
+
+export const All: Story = {
+  args: {
+    value: 60,
+  },
+  render: (args) => (
+    <Box display="flex" flexDirection="column" gap={8} width="400px">
+      {(['sm', 'md', 'lg'] as const).map((size) => (
+        <Box key={size} display="flex" flexDirection="column" gap={4}>
+          <Box as="h3" m={0} style={{ textTransform: 'capitalize' }}>
+            Size: {size}
+          </Box>
+          {(['info', 'success', 'warning', 'danger'] as const).map((intent) => (
+            <ProgressBar
+              key={intent}
+              {...args}
+              size={size}
+              intent={intent}
+              label={intent}
+              showLabel
+            />
+          ))}
+        </Box>
+      ))}
+    </Box>
+  ),
+};

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import { useId } from 'react';
+
+import styles from './ProgressBar.module.css';
+import type { ProgressBarProps } from './ProgressBar.types.ts';
+
+export const ProgressBar = ({
+  value,
+  max = 100,
+  size = 'md',
+  intent = 'info',
+  showLabel = false,
+  label,
+  className,
+  id,
+}: ProgressBarProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-progressbar-${baseId}`;
+  const safeMax = max > 0 ? max : 0;
+  const clampedValue = Math.min(Math.max(0, value), safeMax);
+  const percentage = safeMax > 0 ? Math.min(Math.max(0, (clampedValue / safeMax) * 100), 100) : 0;
+  const labelId = label ? `${componentId}-label` : undefined;
+
+  return (
+    <div id={componentId} className={clsx(styles.wrapper, styles[size], styles[intent], className)}>
+      {(label || showLabel) && (
+        <div className={styles.labelWrapper}>
+          {label && (
+            <span id={labelId} className={styles.label}>
+              {label}
+            </span>
+          )}
+          {showLabel && <span className={styles.percentage}>{Math.round(percentage)}%</span>}
+        </div>
+      )}
+      <div
+        className={styles.progressRoot}
+        role="progressbar"
+        aria-valuenow={clampedValue}
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-labelledby={labelId}
+        aria-label={label ? undefined : 'Progress'}
+      >
+        <div className={styles.indicator} style={{ width: `${percentage}%` }} />
+      </div>
+    </div>
+  );
+};

package/src/components/ProgressBar/ProgressBar.types.ts

@@ -0,0 +1,13 @@
+export type ProgressBarSize = 'sm' | 'md' | 'lg';
+export type ProgressBarIntent = 'info' | 'success' | 'warning' | 'danger';
+
+export interface ProgressBarProps {
+  id?: string;
+  value: number;
+  max?: number;
+  size?: ProgressBarSize;
+  intent?: ProgressBarIntent;
+  showLabel?: boolean;
+  label?: string;
+  className?: string;
+}

package/src/components/RadioButton/RadioButton.module.css

@@ -0,0 +1,162 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+}
+
+.label {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--ds-space-2);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--ds-font-family-base);
+  color: var(--ds-text-1);
+}
+
+.label.sm {
+  font-size: var(--ds-font-size-xs);
+}
+.label.md {
+  font-size: var(--ds-font-size-sm);
+}
+.label.lg {
+  font-size: var(--ds-font-size-base);
+}
+
+.inputWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.radioRoot {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  margin: 0;
+  z-index: 1;
+}
+
+.checkmark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-surface-0);
+  transition: all var(--ds-transition-fast);
+}
+
+/* Sizes */
+.sm .checkmark {
+  width: var(--ds-space-4);
+  height: var(--ds-space-4);
+}
+
+.md .checkmark {
+  width: calc(var(--ds-space-5, 1.25rem));
+  height: calc(var(--ds-space-5, 1.25rem));
+}
+
+.lg .checkmark {
+  width: var(--ds-space-6);
+  height: var(--ds-space-6);
+}
+
+/* Inner circle for checked state */
+.checkmark::after {
+  content: '';
+  display: block;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-surface-0);
+  transform: scale(0);
+  transition: transform var(--ds-transition-fast);
+}
+
+.sm .checkmark::after {
+  width: var(--ds-space-2);
+  height: var(--ds-space-2);
+}
+.md .checkmark::after {
+  width: var(--ds-space-2);
+  height: var(--ds-space-2);
+}
+.lg .checkmark::after {
+  width: var(--ds-space-3);
+  height: var(--ds-space-3);
+}
+
+/* Checked State */
+.radioRoot:checked ~ .checkmark {
+  background-color: var(--ds-info);
+  border-color: var(--ds-info);
+}
+
+.radioRoot:checked ~ .checkmark::after {
+  transform: scale(1);
+}
+
+/* Focus State */
+.radioRoot:focus-visible ~ .checkmark {
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+  border-color: var(--ds-ring);
+}
+
+/* Hover State */
+.label:hover .radioRoot:not(:disabled):not(:checked) ~ .checkmark {
+  border-color: var(--ds-info);
+}
+
+/* Disabled State */
+.radioRoot:disabled {
+  cursor: not-allowed;
+}
+
+.radioRoot:disabled ~ .checkmark {
+  background-color: var(--ds-surface-1);
+  border-color: var(--ds-border-2);
+  opacity: 0.7;
+}
+
+.radioRoot:disabled ~ .labelText {
+  color: var(--ds-text-2);
+  cursor: not-allowed;
+}
+
+/* Error State */
+.radioRoot.error ~ .checkmark {
+  border-color: var(--ds-danger);
+}
+
+.radioRoot.error:checked ~ .checkmark {
+  background-color: var(--ds-danger);
+  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);
+  padding-left: calc(var(--ds-space-5, 1.25rem) + var(--ds-space-2));
+}
+
+.sm ~ .helperText {
+  padding-left: calc(var(--ds-space-4) + var(--ds-space-2));
+}
+.lg ~ .helperText {
+  padding-left: calc(var(--ds-space-6) + var(--ds-space-2));
+}
+
+.helperText.errorText {
+  color: var(--ds-danger);
+}
+
+.labelText {
+  line-height: var(--ds-line-height-base);
+}

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { RadioButton } from './RadioButton.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/RadioButton',
+  component: RadioButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    error: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof RadioButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Radio Option',
+    name: 'default',
+  },
+};
+
+export const Group: Story = {
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={3}>
+      <RadioButton name="group" label="Option 1" defaultChecked />
+      <RadioButton name="group" label="Option 2" />
+      <RadioButton name="group" label="Option 3" />
+    </Box>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={4}>
+      <RadioButton size="sm" name="sizes" label="Small Radio" />
+      <RadioButton size="md" name="sizes" label="Medium Radio" defaultChecked />
+      <RadioButton size="lg" name="sizes" label="Large Radio" />
+    </Box>
+  ),
+};
+
+export const WithHelperText: Story = {
+  args: {
+    label: 'Radio with helper',
+    helperText: 'This is some useful information.',
+    name: 'helper',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    label: 'Radio with error',
+    error: true,
+    helperText: 'Something went wrong.',
+    name: 'error',
+    defaultChecked: true,
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={3}>
+      <RadioButton name="disabled" label="Disabled unchecked" disabled />
+      <RadioButton name="disabled" label="Disabled checked" disabled defaultChecked />
+    </Box>
+  ),
+};
+
+export const Gallery: Story = {
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={8}>
+      {(['sm', 'md', 'lg'] as const).map((size) => (
+        <Box key={size} display="flex" flexDirection="column" gap={4}>
+          <Box as="h3" m={0} style={{ textTransform: 'capitalize' }}>
+            Size: {size}
+          </Box>
+          <Box display="flex" gap={4}>
+            <RadioButton size={size} name={`radio-${size}`} label="Default" />
+            <RadioButton size={size} name={`radio-${size}`} label="Checked" defaultChecked />
+            <RadioButton
+              size={size}
+              name={`radio-helper-${size}`}
+              label="With helper"
+              helperText="Help text"
+            />
+            <RadioButton
+              size={size}
+              name={`radio-error-${size}`}
+              label="Error"
+              error
+              helperText="Error text"
+            />
+            <RadioButton size={size} name={`radio-disabled-${size}`} label="Disabled" disabled />
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  ),
+};

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import { useId } from 'react';
+
+import styles from './RadioButton.module.css';
+import type { RadioButtonProps } from './RadioButton.types.ts';
+
+export const RadioButton = ({
+  size = 'md',
+  label,
+  helperText,
+  error,
+  className,
+  id,
+  ...props
+}: RadioButtonProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-radio-${baseId}`;
+  const helperId = helperText ? `${componentId}-help` : undefined;
+
+  return (
+    <div className={clsx(styles.wrapper, className)}>
+      <label htmlFor={componentId} className={clsx(styles.label, styles[size])}>
+        <div className={styles.inputWrapper}>
+          <input
+            type="radio"
+            id={componentId}
+            className={clsx(styles.radioRoot, styles[size], error && styles.error)}
+            aria-describedby={helperId}
+            aria-invalid={error || undefined}
+            {...props}
+          />
+          <span className={styles.checkmark} />
+        </div>
+        {label && <span className={styles.labelText}>{label}</span>}
+      </label>
+      {helperText && (
+        <span id={helperId} className={clsx(styles.helperText, error && styles.errorText)}>
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/components/RadioButton/RadioButton.types.ts

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes } from 'react';
+
+export type RadioButtonSize = 'sm' | 'md' | 'lg';
+
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: RadioButtonSize;
+  label?: string;
+  helperText?: string;
+  error?: boolean;
+}

package/src/components/Select/Select.module.css

@@ -0,0 +1,88 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+  width: 100%;
+}
+
+.label {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-1);
+}
+
+.selectRoot {
+  box-sizing: border-box;
+  width: 100%;
+  font-family: var(--ds-font-family-base);
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-md);
+  background-color: var(--ds-surface-0);
+  color: var(--ds-text-1);
+  transition:
+    border-color var(--ds-transition-fast),
+    box-shadow var(--ds-transition-fast);
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--ds-space-3) center;
+  background-size: 1.25rem;
+}
+
+.selectRoot:focus {
+  outline: none;
+  border-color: var(--ds-ring);
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+
+.selectRoot:disabled {
+  background-color: var(--ds-surface-1);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* Sizes */
+.sm {
+  height: var(--ds-space-8);
+  padding: 0 var(--ds-space-8) 0 var(--ds-space-3);
+  font-size: var(--ds-font-size-xs);
+  background-position: right var(--ds-space-2) center;
+}
+
+.md {
+  height: calc(var(--ds-space-4) * 2.5);
+  padding: 0 var(--ds-space-10) 0 var(--ds-space-4);
+  font-size: var(--ds-font-size-sm);
+  background-position: right var(--ds-space-3) center;
+}
+
+.lg {
+  height: var(--ds-space-12);
+  padding: 0 var(--ds-space-12) 0 var(--ds-space-5);
+  font-size: var(--ds-font-size-base);
+  background-position: right var(--ds-space-4) center;
+}
+
+/* Error state */
+.error {
+  border-color: var(--ds-danger);
+}
+
+.error:focus {
+  border-color: var(--ds-danger);
+  box-shadow: 0 0 0 0.125rem var(--ds-danger-subtle);
+}
+
+.helperText {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-xs);
+  color: var(--ds-text-2);
+}
+
+.helperText.errorText {
+  color: var(--ds-danger);
+}