summaryrefslogtreecommitdiffhomepage
path: root/packages/ui/src/components/inline-input.stories.tsx
blob: e364c896315fbedabb0e3d8344e4c85fbc6dedef (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// @ts-nocheck
import * as mod from "./inline-input"
import { create } from "../storybook/scaffold"

const docs = `### Overview
Compact inline input for short values.

Use inside text or table rows for quick edits.

### API
- Optional: \`width\` to set a fixed width.
- Accepts standard input props.

### Variants and states
- No built-in variants; style via class or width.

### Behavior
- Uses inline width when provided.

### Accessibility
- Provide a label or aria-label when used standalone.

### Theming/tokens
- Uses \`data-component="inline-input"\`.

`

const story = create({ title: "UI/InlineInput", mod, args: { placeholder: "Type...", value: "Inline" } })
export default {
  title: "UI/InlineInput",
  id: "components-inline-input",
  component: story.meta.component,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component: docs,
      },
    },
  },
}

export const Basic = story.Basic

export const FixedWidth = {
  args: {
    value: "80px",
    width: "80px",
  },
}