@ds-mo/ui 0.3.0 → 0.4.1

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

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

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

@@ -1,111 +0,0 @@
-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

@@ -1,35 +0,0 @@
-import React, { forwardRef, useId, isValidElement, cloneElement } 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) => {
-    const generatedId = useId();
-    const fieldId = id ?? generatedId;
-
-    let content = children;
-    if (isValidElement(children)) {
-      const childProps = children.props as { id?: string };
-      if (childProps.id === undefined) {
-        content = cloneElement(children as React.ReactElement<{ id?: string }>, { id: fieldId });
-      }
-    }
-
-    return (
-      <div ref={ref} className={cn(styles.field, className)}>
-        <Text variant="text-body-small-emphasis" as="label" htmlFor={fieldId}>{label}</Text>
-        {content}
-      </div>
-    );
-  }
-);
-
-Field.displayName = 'Field';

package/src/components/Field/index.ts

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

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

@@ -1,33 +0,0 @@
-.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

@@ -1,52 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

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

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

@@ -1,92 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dimension-space-050);
-  width: 100%;
-}
-
-.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);
-}
-
-.wrapperError {
-  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);
-}
-
-.wrapperError:focus-within {
-  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);
-}
-
-.errorText {
-  font-size: var(--typography-fontsize-sm);
-  line-height: var(--typography-lineheight-sm);
-  color: var(--color-foreground-bold-negative);
-}
-
-.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

@@ -1,135 +0,0 @@
-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

@@ -1,117 +0,0 @@
-import React, { forwardRef, useEffect, useId } 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;
-  'aria-labelledby'?: string;
-  'aria-describedby'?: string;
-  /** Marks the input as invalid; sets `aria-invalid` and applies error styling. */
-  error?: boolean;
-  /** Message rendered below the input when `error` is true; auto-linked via `aria-describedby`. */
-  errorMessage?: string;
-}
-
-const isDevEnv = (): boolean => {
-  const meta = import.meta as { env?: { DEV?: boolean } };
-  return Boolean(meta.env?.DEV);
-};
-
-export const Input = forwardRef<HTMLDivElement, InputProps>(
-  (
-    {
-      value,
-      onChange,
-      id,
-      placeholder,
-      autoFocus = false,
-      className,
-      type = 'text',
-      inactive = false,
-      onKeyDown,
-      suffix,
-      clearIcon: ClearIcon,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      'aria-describedby': ariaDescribedBy,
-      error = false,
-      errorMessage,
-    },
-    ref
-  ) => {
-    const reactId = useId();
-    const errorId = `${reactId}-error`;
-    const showClear = type === 'search' && value.length > 0 && !inactive;
-    const showErrorMessage = error && Boolean(errorMessage);
-
-    const describedBy =
-      [ariaDescribedBy, showErrorMessage ? errorId : undefined].filter(Boolean).join(' ') ||
-      undefined;
-
-    useEffect(() => {
-      if (!isDevEnv()) return;
-      if (!id && !ariaLabel && !ariaLabelledBy) {
-        console.warn(
-          '[@ds-mo/ui] <Input> is missing an accessible name. Provide one of: `id` (paired with a <label htmlFor>), `aria-label`, or `aria-labelledby`.'
-        );
-      }
-    }, [id, ariaLabel, ariaLabelledBy]);
-
-    const handleClear = () => {
-      onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
-    };
-
-    return (
-      <div className={styles.container}>
-        <div ref={ref} className={cn(styles.wrapper, error && styles.wrapperError, 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}
-              aria-labelledby={ariaLabelledBy}
-              aria-describedby={describedBy}
-              aria-invalid={error || undefined}
-            />
-            {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>
-        {showErrorMessage && (
-          <div id={errorId} role="alert" className={styles.errorText}>
-            {errorMessage}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-Input.displayName = 'Input';

package/src/components/Input/index.ts

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

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

@@ -1,34 +0,0 @@
-/* ==========================================================================
-   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;
-}