@ds-mo/ui 0.1.0

package/src/components/Field/Field.module.css

@@ -0,0 +1,5 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dimension-space-050);
+}

package/src/components/Field/Field.stories.tsx

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Field } from './Field';
+import { Input } from '@/components/Input';
+import { Slider } from '@/components/Slider';
+
+const meta: Meta<typeof Field> = {
+  title: 'Primitives/Field',
+  component: Field,
+  args: {
+    label: 'Label',
+  },
+  argTypes: {
+    label: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Field>;
+
+export const Playground: Story = {
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <div style={{ width: 280 }}>
+        <Field {...args}>
+          <Input id={args.id} value={value} onChange={(e) => setValue(e.target.value)} placeholder="Enter value…" />
+        </Field>
+      </div>
+    );
+  },
+};
+
+// ─── Matrix ───────────────────────────────────────────────────────────────────
+
+const col: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 20 };
+const section = (text: string) => (
+  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#555' }}>
+    {text}
+  </div>
+);
+const divider = <hr style={{ border: 'none', borderTop: '1px solid #e0e0e0', margin: '4px 0 20px' }} />;
+
+export const Matrix: Story = {
+  parameters: { layout: 'padded' },
+  render: () => {
+    const [textVal, setTextVal] = useState('');
+    const [emailVal, setEmailVal] = useState('');
+    const [searchVal, setSearchVal] = useState('');
+    const [sliderVal, setSliderVal] = useState(50);
+    const [opacityVal, setOpacityVal] = useState(0.8);
+
+    return (
+      <div style={{ ...col, fontFamily: 'sans-serif', maxWidth: 320 }}>
+
+        {section('With Input')}
+        {divider}
+        <Field label="Full name" id="name">
+          <Input id="name" value={textVal} onChange={(e) => setTextVal(e.target.value)} placeholder="e.g. Jane Smith" />
+        </Field>
+        <Field label="Email address" id="email">
+          <Input id="email" type="email" value={emailVal} onChange={(e) => setEmailVal(e.target.value)} placeholder="user@example.com" />
+        </Field>
+        <Field label="Search" id="search">
+          <Input id="search" type="search" value={searchVal} onChange={(e) => setSearchVal(e.target.value)} placeholder="Search…" />
+        </Field>
+        <Field label="Disabled field" id="disabled">
+          <Input id="disabled" value="Read-only value" disabled onChange={() => {}} />
+        </Field>
+
+        {section('With Slider')}
+        {divider}
+        <Field label="Volume">
+          <Slider label="Volume" value={sliderVal} onChange={setSliderVal} />
+        </Field>
+        <Field label="Opacity">
+          <Slider label="Opacity" value={opacityVal} onChange={setOpacityVal} min={0} max={1} step={0.05} />
+        </Field>
+
+      </div>
+    );
+  },
+};
+
+// ─── Individual stories ───────────────────────────────────────────────────────
+
+export const WithInput: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <div style={{ width: 280 }}>
+        <Field label="Name" id="name-field">
+          <Input id="name-field" value={value} onChange={(e) => setValue(e.target.value)} placeholder="Enter your name" />
+        </Field>
+      </div>
+    );
+  },
+};
+
+export const WithSlider: Story = {
+  render: () => {
+    const [value, setValue] = useState(50);
+    return (
+      <div style={{ width: 280 }}>
+        <Field label="Volume">
+          <Slider label="Volume" value={value} onChange={setValue} />
+        </Field>
+      </div>
+    );
+  },
+};

package/src/components/Field/Field.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import { Text } from '@/components/Text';
+import styles from './Field.module.css';
+
+export interface FieldProps {
+  label: string;
+  children: React.ReactNode;
+  id?: string;
+  className?: string;
+}
+
+export const Field = forwardRef<HTMLDivElement, FieldProps>(
+  ({ label, children, id, className }, ref) => (
+    <div ref={ref} className={cn(styles.field, className)}>
+      <Text variant="text-body-small-emphasis" as="label" htmlFor={id}>{label}</Text>
+      {children}
+    </div>
+  )
+);
+
+Field.displayName = 'Field';

package/src/components/Field/index.ts

@@ -0,0 +1,2 @@
+export { Field } from './Field';
+export type { FieldProps } from './Field';

package/src/components/Header/Header.module.css

@@ -0,0 +1,33 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--dimension-size-600, 48px);
+  padding: 0 var(--dimension-space-100);
+  flex-shrink: 0;
+  gap: var(--dimension-space-100);
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: var(--dimension-space-100);
+  flex-shrink: 0;
+  min-width: 0;
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dimension-space-050);
+  flex: 1;
+  min-width: 0;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  gap: var(--dimension-space-050);
+  flex-shrink: 0;
+}

package/src/components/Header/Header.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Header } from './Header';
+import { Button } from '../Button';
+
+const meta: Meta<typeof Header> = {
+  title: 'Layout/Header',
+  component: Header,
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const Default: Story = {
+  args: {
+    title: 'Page Title',
+  },
+};
+
+export const WithSlots: Story = {
+  render: () => (
+    <Header
+      title="Dashboard"
+      left={<Button variant="tertiary" label="Back" size="sm" />}
+      right={
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Button variant="secondary" label="Export" size="sm" />
+          <Button variant="primary" label="New" size="sm" />
+        </div>
+      }
+    />
+  ),
+};
+
+export const CenterContent: Story = {
+  render: () => (
+    <Header
+      left={<Button variant="tertiary" label="Menu" size="sm" />}
+      center={<span style={{ fontWeight: 600 }}>App Name</span>}
+      right={<Button variant="tertiary" label="Settings" size="sm" />}
+    />
+  ),
+};
+
+export const Backgrounds: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {(['primary', 'secondary', 'transparent', 'translucent'] as const).map(bg => (
+        <Header key={bg} title={`${bg} background`} background={bg} />
+      ))}
+    </div>
+  ),
+};

package/src/components/Header/Header.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import { Surface } from '@/components/Surface';
+import { Text } from '@/components/Text';
+import styles from './Header.module.css';
+
+export type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
+
+export interface HeaderProps {
+  title?: string;
+  left?: React.ReactNode;
+  center?: React.ReactNode;
+  right?: React.ReactNode;
+  background?: HeaderBackground;
+  className?: string;
+}
+
+export const Header = forwardRef<HTMLElement, HeaderProps>(
+  ({ title, left, center, right, background = 'secondary', className }, ref) => (
+    <Surface
+      ref={ref}
+      as="header"
+      background={background}
+      elevation="none"
+      edge="bottom"
+      className={cn(styles.header, className)}
+    >
+      <div className={styles.left}>
+        {left}
+        {title && !center && (
+          <Text variant="text-title-small" as="h1" lineTruncation={1}>
+            {title}
+          </Text>
+        )}
+      </div>
+      {center && <div className={styles.center}>{center}</div>}
+      <div className={styles.right}>{right}</div>
+    </Surface>
+  )
+);
+
+Header.displayName = 'Header';

package/src/components/Header/index.ts

@@ -0,0 +1,2 @@
+export { Header } from './Header';
+export type { HeaderProps, HeaderBackground } from './Header';

package/src/components/Input/Input.module.css

@@ -0,0 +1,71 @@
+.wrapper {
+  width: 100%;
+  height: var(--dimension-size-400);
+  display: flex;
+  align-items: center;
+  background-color: var(--color-background-primary);
+  border-radius: var(--dimension-radius-075);
+  box-shadow: var(--effect-elevation-depressed-sm);
+  box-sizing: border-box;
+}
+
+.wrapper:focus-within {
+  box-shadow: inset 0 0 0 1.25px var(--color-foreground-bold-brand);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  gap: var(--dimension-space-050);
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--dimension-space-100);
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: var(--typography-fontsize-md);
+  line-height: var(--typography-lineheight-md);
+  color: var(--color-foreground-primary);
+  border-radius: var(--dimension-radius-075);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.input:disabled { opacity: 0.5; cursor: not-allowed; }
+.input::placeholder { color: var(--color-foreground-secondary); }
+.input:focus::placeholder { color: var(--color-foreground-tertiary); }
+
+/* Hide native search clear */
+.input[type="search"]::-webkit-search-cancel-button,
+.input[type="search"]::-webkit-search-decoration { display: none; }
+
+.clearButton {
+  flex-shrink: 0;
+  margin-right: var(--dimension-space-050);
+  padding: var(--dimension-space-050);
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--color-foreground-secondary);
+  border-radius: var(--dimension-radius-050);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clearButton:hover { background-color: var(--color-interaction-hover); }
+
+.suffix {
+  display: flex;
+  align-items: center;
+  gap: var(--dimension-space-050);
+  flex-shrink: 0;
+  margin-right: var(--dimension-space-050);
+}

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Input } from './Input';
+import type { InputType } from './Input';
+
+const meta: Meta<typeof Input> = {
+  title: 'Primitives/Input',
+  component: Input,
+  args: {
+    placeholder: 'Enter text…',
+    inactive: false,
+    type: 'text',
+  },
+  argTypes: {
+    type: { control: 'select', options: ['text', 'email', 'tel', 'url', 'search', 'password'] },
+    inactive: { control: 'boolean' },
+    placeholder: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+const Controlled = (props: Omit<React.ComponentProps<typeof Input>, 'value' | 'onChange'> & { initialValue?: string }) => {
+  const [value, setValue] = useState(props.initialValue ?? '');
+  return <Input {...props} value={value} onChange={(e) => setValue(e.target.value)} />;
+};
+
+export const Playground: Story = {
+  render: (args) => <Controlled {...args} />,
+};
+
+// ─── Matrix ───────────────────────────────────────────────────────────────────
+
+const TYPES: InputType[] = ['text', 'email', 'search', 'password'];
+
+const col: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 10 };
+const row: React.CSSProperties = { display: 'flex', gap: 16, alignItems: 'center' };
+const labelStyle: React.CSSProperties = { fontSize: 10, fontFamily: 'monospace', color: '#888', minWidth: 72, flexShrink: 0 };
+const inputCell: React.CSSProperties = { width: 200, flexShrink: 0 };
+const section = (text: string) => (
+  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#555', marginTop: 8 }}>
+    {text}
+  </div>
+);
+const divider = <hr style={{ border: 'none', borderTop: '1px solid #e0e0e0', margin: '16px 0' }} />;
+
+export const Matrix: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div style={{ ...col, fontFamily: 'sans-serif', gap: 0 }}>
+
+      {section('Types × Empty / Filled')}
+      <div style={{ ...col, marginTop: 12 }}>
+        <div style={row}>
+          <span style={labelStyle}></span>
+          <span style={{ ...inputCell, fontSize: 10, fontFamily: 'monospace', color: '#888', textAlign: 'center' }}>empty</span>
+          <span style={{ ...inputCell, fontSize: 10, fontFamily: 'monospace', color: '#888', textAlign: 'center' }}>filled</span>
+        </div>
+        {TYPES.map(type => (
+          <div key={type} style={row}>
+            <span style={labelStyle}>{type}</span>
+            <div style={inputCell}>
+              <Controlled type={type} placeholder={`${type}…`} />
+            </div>
+            <div style={inputCell}>
+              <Controlled type={type} initialValue={type === 'email' ? 'user@example.com' : type === 'password' ? 'secret123' : 'Hello, world'} />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {divider}
+
+      {section('States')}
+      <div style={{ ...col, marginTop: 12 }}>
+        <div style={row}>
+          <span style={labelStyle}>default</span>
+          <div style={inputCell}><Controlled placeholder="Enter text…" /></div>
+        </div>
+        <div style={row}>
+          <span style={labelStyle}>with value</span>
+          <div style={inputCell}><Controlled initialValue="Some value" /></div>
+        </div>
+        <div style={row}>
+          <span style={labelStyle}>Inactive</span>
+          <div style={inputCell}><Input value="Disabled value" inactive onChange={() => {}} /></div>
+        </div>
+        <div style={row}>
+          <span style={labelStyle}>Inactive empty</span>
+          <div style={inputCell}><Input value="" placeholder="Disabled…" inactive onChange={() => {}} /></div>
+        </div>
+      </div>
+
+    </div>
+  ),
+};
+
+// ─── Individual stories ───────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: () => <Controlled placeholder="Enter text…" style={{ width: 260 }} />,
+};
+
+export const Search: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 260 }}>
+      <Controlled type="search" placeholder="Search…" />
+      <Controlled type="search" placeholder="Search…" initialValue="Some query" />
+    </div>
+  ),
+};
+
+export const Password: Story = {
+  render: () => <Controlled type="password" placeholder="Enter password…" style={{ width: 260 }} />,
+};
+
+export const Inactive: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 260 }}>
+      <Input value="" placeholder="Disabled empty" inactive onChange={() => {}} />
+      <Input value="Disabled with value" inactive onChange={() => {}} />
+    </div>
+  ),
+};
+
+export const WithSuffix: Story = {
+  render: () => (
+    <Controlled
+      placeholder="Enter amount…"
+      suffix={<span style={{ fontSize: 12, color: '#888', paddingRight: 4 }}>USD</span>}
+      style={{ width: 260 }}
+    />
+  ),
+};

package/src/components/Input/Input.tsx

@@ -0,0 +1,76 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/cn';
+import type { IconComponent } from '@/types/icons';
+import styles from './Input.module.css';
+
+export type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';
+
+export interface InputProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  id?: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  className?: string;
+  type?: InputType;
+  inactive?: boolean;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+  /** Content rendered inside the field on the right. */
+  suffix?: React.ReactNode;
+  /** Icon for clear button (search type). */
+  clearIcon?: IconComponent;
+  'aria-label'?: string;
+}
+
+export const Input = forwardRef<HTMLDivElement, InputProps>(
+  (
+    {
+      value,
+      onChange,
+      id,
+      placeholder,
+      autoFocus = false,
+      className,
+      type = 'text',
+      inactive = false,
+      onKeyDown,
+      suffix,
+      clearIcon: ClearIcon,
+      'aria-label': ariaLabel,
+    },
+    ref
+  ) => {
+    const showClear = type === 'search' && value.length > 0 && !inactive;
+
+    const handleClear = () => {
+      onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
+    };
+
+    return (
+      <div ref={ref} className={cn(styles.wrapper, className)}>
+        <div className={styles.row}>
+          <input
+            type={type}
+            id={id}
+            value={value}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            className={styles.input}
+            autoFocus={autoFocus}
+            disabled={inactive}
+            aria-label={ariaLabel}
+          />
+          {showClear && (
+            <button type="button" className={styles.clearButton} onClick={handleClear} aria-label="Clear">
+              {ClearIcon ? <ClearIcon size={16} /> : <span aria-hidden>&times;</span>}
+            </button>
+          )}
+          {suffix && <div className={styles.suffix}>{suffix}</div>}
+        </div>
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';

package/src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps, InputType } from './Input';

package/src/components/LabelWrap/LabelWrap.module.css

@@ -0,0 +1,34 @@
+/* ==========================================================================
+   LabelWrap — internal utility
+   Kills the inherited line-height strut so the component's fixed height
+   is not inflated by body { line-height: 1.5 }, then adds optical
+   horizontal padding around the text.
+   ========================================================================== */
+
+.labelWrap {
+  line-height: 0;
+  padding: 0 var(--dimension-space-050); /* 4px — body sm / md / lg */
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Small scale: tighter optical padding */
+.sizeSm { padding: 0 var(--dimension-space-025); } /* 2px */
+
+/* Caption scale: tighter optical padding */
+.sizeXs { padding: 0 var(--dimension-space-025); } /* 2px */
+
+/* Truncation mode — used when parent is full-width and label must ellipsize */
+.truncate {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.truncate > span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/components/LabelWrap/LabelWrap.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { cn } from '@/utils/cn';
+import styles from './LabelWrap.module.css';
+
+interface LabelWrapProps {
+  children: React.ReactNode;
+  /**
+   * Maps to typography size — controls optical horizontal padding:
+   *   xs | sm → 2px (tighter scale)
+   *   md | lg → 4px (body scale, default)
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /** Enables truncation with ellipsis — use inside full-width containers. */
+  truncate?: boolean;
+  className?: string;
+}
+
+/**
+ * Internal utility wrapper used inside interactive components (Button, Tag,
+ * Input, Select, MenuItem, etc.) to:
+ *   1. Kill the inherited line-height strut from body { line-height: 1.5 }
+ *   2. Add optical horizontal padding around the text
+ *
+ * Not exported from the public barrel — internal use only.
+ */
+export const LabelWrap = ({ children, size = 'md', truncate = false, className }: LabelWrapProps) => (
+  <span className={cn(styles.labelWrap, size === 'sm' && styles.sizeSm, size === 'xs' && styles.sizeXs, truncate && styles.truncate, className)}>
+    {children}
+  </span>
+);
+
+LabelWrap.displayName = 'LabelWrap';

package/src/components/LabelWrap/index.ts

@@ -0,0 +1 @@
+export { LabelWrap } from './LabelWrap';

package/src/components/Loader/Loader.module.css

@@ -0,0 +1,9 @@
+.loader {
+  flex-shrink: 0;
+  animation: spin 0.75s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}