CSS Art art-components implemented 2 demos

ArtGeminiInput

ArtGeminiInput renders the ArtGeminiInput CSS-art scene as a reusable React component.

Import @duskmoon-dev/art-components

1 API sections

17 documented props

1 behavior scenarios

Key API

sizestylevaluedefaultValueonChangeplaceholder

Usage

When to use

Use it when a page needs a reusable DuskMoon visual asset rendered from CSS rather than an image.
Keep it decorative unless the illustration carries information that must be announced.

Implementation notes

Stylesheet Import @duskmoon-dev/art-components/styles.css once before rendering art components.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Sizing Use the size prop and CSS custom properties to adapt the scene without replacing markup.

Features

CSS-art wrapper

Renders the matching @duskmoon-dev/css-art scene through a typed React component.

Accessible decoration

Defaults to decorative output while allowing aria labels and roles when the scene carries meaning.

Primary API surface

ArtGeminiInput is most often configured through `size`, `style`, `value`, `defaultValue`.

Covered behavior

Renders textarea controls and action buttons

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import ArtGeminiInput and the art component stylesheet before rendering the CSS art scene.

Source

import "@duskmoon-dev/art-components/styles.css";
import { ArtGeminiInput } from "@duskmoon-dev/art-components";

export function Example() {
  return (<ArtGeminiInput
  size="lg"
  placeholder="Ask DuskMoon"
  defaultValue="Pure CSS art"
  rows={2}
/>);
}

Preview

Accessible art

authored

Use ArtGeminiInput as decorative output by default, or pass accessible labeling when the scene is meaningful.

Source

import "@duskmoon-dev/art-components/styles.css";
import { ArtGeminiInput } from "@duskmoon-dev/art-components";

export function AccessibleArt() {
  return (<ArtGeminiInput
  size="lg"
  placeholder="Ask DuskMoon"
  defaultValue="Pure CSS art"
  rows={2}
  decorative={false}
  aria-label="Art Gemini Input illustration"
/>);
}

API

The API reference below lists every parsed exported type or interface for ArtGeminiInput. Start with `size`, `style`, `value`, `defaultValue` for common usage.

Types: packages/art-components/src/index.tsx Scenarios: packages/art-components/tests/art-components.test.tsx

ArtGeminiInputProps interface extends Omit< BaseArtProps, "children" | "onChange" | "defaultValue" | "style" >

Prop	Type	Required	Description
`size`	`ArtSize`	No	size configures ArtGeminiInput.
`style`	`ArtStyle`	No	style configures ArtGeminiInput.
`value`	`ComponentProps<"textarea">["value"]`	No	value configures ArtGeminiInput.
`defaultValue`	`ComponentProps<"textarea">["defaultValue"]`	No	defaultValue configures ArtGeminiInput.
`onChange`	`ComponentProps<"textarea">["onChange"]`	No	onChange configures ArtGeminiInput.
`placeholder`	`string`	No	placeholder configures ArtGeminiInput.
`name`	`string`	No	name configures ArtGeminiInput.
`rows`	`number`	No	rows configures ArtGeminiInput.
`disabled`	`boolean`	No	disabled configures ArtGeminiInput.
`readOnly`	`boolean`	No	readOnly configures ArtGeminiInput.
`required`	`boolean`	No	required configures ArtGeminiInput.
`fieldClassName`	`string`	No	fieldClassName configures ArtGeminiInput.
`textareaProps`	`Omit<`	No	textareaProps configures ArtGeminiInput.
`before`	`ReactNode`	No	before configures ArtGeminiInput.
`after`	`ReactNode`	No	after configures ArtGeminiInput.
`beforeButtonProps`	`GeminiButtonProps`	No	beforeButtonProps configures ArtGeminiInput.
`afterButtonProps`	`GeminiButtonProps`	No	afterButtonProps configures ArtGeminiInput.