diff --git a/.changeset/fine-ties-think.md b/.changeset/fine-ties-think.md new file mode 100644 index 0000000..d7f638b --- /dev/null +++ b/.changeset/fine-ties-think.md @@ -0,0 +1,5 @@ +--- +"@badrap/libapp": patch +--- + +Add TextBlock component diff --git a/src/ui/experimental/TextBlock.ts b/src/ui/experimental/TextBlock.ts new file mode 100644 index 0000000..b670b0c --- /dev/null +++ b/src/ui/experimental/TextBlock.ts @@ -0,0 +1,29 @@ +import { type Responsive, type UiNode, element } from "../internal.ts"; + +type TextBlockProps = { + /** + * Horizontal text alignment. Can be responsive. + * Inherited from surrounding context if not explicitly set. + */ + align?: Responsive<"left" | "center" | "right">; + /** + * Maximum number of lines to display before truncating. Can be responsive. + */ + maxLines?: Responsive; + /** + * When true, reduces the text emphasis by applying a lower-intensity color variant. + */ + muted?: boolean; + /** + * The content to be displayed. Can be a string or more complex UI elements. + */ + children?: UiNode; +}; + +/** + * A component for rendering block-level text content. + * Color is inherited from the surrounding context. + */ +export function TextBlock(props: TextBlockProps): UiNode { + return element("ui-text-block", props); +} diff --git a/src/ui/experimental/index.ts b/src/ui/experimental/index.ts index 498090f..9746a69 100644 --- a/src/ui/experimental/index.ts +++ b/src/ui/experimental/index.ts @@ -21,5 +21,6 @@ export { RelativeTime } from "./RelativeTime.ts"; export { Select } from "./Select.ts"; export { Switch } from "./Switch.ts"; export { Text } from "./Text.ts"; +export { TextBlock } from "./TextBlock.ts"; export { TextField } from "./TextField.ts"; export { UploadButton } from "./UploadButton.ts";