All components
Editable
Inline text that swaps between a hover preview and a focused input on click.
Q3 launch plan
1234567891011121314import { Editable } from "#components/ui/ark-ui/editable.tsx";
export function Example() { return ( // the size resolves once on Root; Preview and Input inherit it via // context and the machine swaps them on activation <Editable.Root defaultValue="Q3 launch plan" activationMode="click" size="md"> <Editable.Area> <Editable.Input /> <Editable.Preview /> </Editable.Area> </Editable.Root> );}Sizes
Q3 launch plan
Q3 launch plan
Q3 launch plan
Install
1npx stylexblocks add editableSource
components/ui/ark-ui/editable.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173import * as stylex from "@stylexjs/stylex";import { Editable as ArkEditable } from "@ark-ui/react/editable";import { createSlotRecipeContext } from "#lib/ark-ui/create-slot-recipe-context.tsx";import { defineSlotRecipe } from "#lib/recipe-props.ts";import { colorPalette } from '@stylexblocks/ui/color-palette.stylex.ts'import { durations } from '@stylexblocks/ui/tokens/durations.stylex.ts'import { fontSizes } from '@stylexblocks/ui/tokens/font-sizes.stylex.ts'import { lineHeights } from '@stylexblocks/ui/tokens/line-heights.stylex.ts'import { semanticColors } from '@stylexblocks/ui/semantic-tokens/colors.stylex.ts'import { semanticRadii } from '@stylexblocks/ui/semantic-tokens/radii.stylex.ts'import { sizes } from '@stylexblocks/ui/tokens/sizes.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const editableRoot = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', position: 'relative', gap: spacing._1_5, width: sizes.full, },})
const editableRootSizes = stylex.create({ sm: { fontSize: fontSizes.sm, lineHeight: lineHeights.sm, }, md: { fontSize: fontSizes.sm, lineHeight: lineHeights.sm, }, lg: { fontSize: fontSizes.md, lineHeight: lineHeights.md, },})
const editablePreview = stylex.create({ base: { fontSize: 'inherit', fontWeight: 'inherit', textAlign: 'inherit', backgroundColor: { default: 'transparent', ':hover': semanticColors.bgMuted, }, borderRadius: semanticRadii.control, paddingBlock: spacing._1, paddingInline: spacing._1, display: 'inline-flex', alignItems: 'center', transitionProperty: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', transitionDuration: durations.moderate, cursor: 'text', userSelect: { default: null, ':is(:disabled, [disabled], [data-disabled])': 'none', }, },})
const editablePreviewSizes = stylex.create({ sm: { minHeight: sizes._8, }, md: { minHeight: sizes._9, }, lg: { minHeight: sizes._10, },})
const editableInput = stylex.create({ base: { fontSize: 'inherit', fontWeight: 'inherit', textAlign: 'inherit', backgroundColor: 'transparent', borderRadius: semanticRadii.control, outline: 'none', paddingBlock: spacing._1, paddingInline: spacing._1, transitionProperty: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', transitionDuration: durations.moderate, width: sizes.full, outlineWidth: { default: null, ':is(:focus-visible, [data-focus])': 'var(--focus-ring-width, 1px)', }, outlineOffset: { default: null, ':is(:focus-visible, [data-focus])': '0px', }, outlineStyle: { default: null, ':is(:focus-visible, [data-focus])': 'solid', }, outlineColor: { default: null, ':is(:focus-visible, [data-focus])': colorPalette.focusRing, }, '::placeholder': { opacity: 0.6, }, '--focus-color': colorPalette.focusRing, '--error-color': semanticColors.borderError, '--focus-ring-color': { default: null, ':is([data-invalid], [aria-invalid="true"])': 'var(--error-color)', }, borderColor: { default: null, ':is([data-invalid], [aria-invalid="true"])': 'var(--error-color)', }, },})
const editableInputSizes = stylex.create({ sm: { minHeight: sizes._8, }, md: { minHeight: sizes._9, }, lg: { minHeight: sizes._10, },})
const editableControl = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', gap: spacing._1_5, },})
export type EditableSize = keyof typeof editableRootSizes
const editableRecipe = defineSlotRecipe({ slots: { root: { styles: editableRoot, sizes: editableRootSizes }, preview: { styles: editablePreview, sizes: editablePreviewSizes }, input: { styles: editableInput, sizes: editableInputSizes }, control: { styles: editableControl }, }, defaultVariants: { size: "md" },});
const { withProvider, withContext } = createSlotRecipeContext(editableRecipe);
/** * Editable — Ark UI's editable machine parts styled with the StyleX slot * recipe. `<Editable.Root size>` resolves the recipe once; Preview and Input * inherit it through context and the machine swaps them on activation. */export const Editable = { Root: withProvider(ArkEditable.Root, "root", "EditableRoot"), Area: ArkEditable.Area, Label: ArkEditable.Label, Input: withContext(ArkEditable.Input, "input", "EditableInput"), Preview: withContext(ArkEditable.Preview, "preview", "EditablePreview"), Control: withContext(ArkEditable.Control, "control", "EditableControl"), EditTrigger: ArkEditable.EditTrigger, SubmitTrigger: ArkEditable.SubmitTrigger, CancelTrigger: ArkEditable.CancelTrigger, Context: ArkEditable.Context,};