inline-input.stories.tsx 1018 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. // @ts-nocheck
  2. import * as mod from "./inline-input"
  3. import { create } from "../storybook/scaffold"
  4. const docs = `### Overview
  5. Compact inline input for short values.
  6. Use inside text or table rows for quick edits.
  7. ### API
  8. - Optional: \`width\` to set a fixed width.
  9. - Accepts standard input props.
  10. ### Variants and states
  11. - No built-in variants; style via class or width.
  12. ### Behavior
  13. - Uses inline width when provided.
  14. ### Accessibility
  15. - Provide a label or aria-label when used standalone.
  16. ### Theming/tokens
  17. - Uses \`data-component="inline-input"\`.
  18. `
  19. const story = create({ title: "UI/InlineInput", mod, args: { placeholder: "Type...", value: "Inline" } })
  20. export default {
  21. title: "UI/InlineInput",
  22. id: "components-inline-input",
  23. component: story.meta.component,
  24. tags: ["autodocs"],
  25. parameters: {
  26. docs: {
  27. description: {
  28. component: docs,
  29. },
  30. },
  31. },
  32. }
  33. export const Basic = story.Basic
  34. export const FixedWidth = {
  35. args: {
  36. value: "80px",
  37. width: "80px",
  38. },
  39. }