{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea",
  "title": "Textarea",
  "description": "A multi-line text box that grows with its content and links to its Field.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/textarea.tsx",
      "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport {\n  colors,\n  durations,\n  fontSizes,\n  lineHeights,\n  media,\n  opacities,\n  radii,\n  shadows,\n  sizes,\n  space,\n  strokes,\n} from \"@/lib/constella/tokens.stylex\";\n\nconst textareaSizes = [\"sm\", \"default\", \"lg\"] as const;\n\ntype TextareaSize = (typeof textareaSizes)[number];\n\ntype TextareaProps = Omit<ComponentProps<\"textarea\">, \"className\" | \"style\"> & {\n  size?: TextareaSize;\n  sx?: Sx;\n};\n\nconst invalid = \":is([aria-invalid='true'], [data-invalid])\";\nconst disabled = \":is(:disabled, [data-disabled])\";\n\n// A growing textarea can't scale `fontSizes.touch` down the way Input does: its layout\n// height would stay at 16px's.\n\nconst styles = stylex.create({\n  textarea: {\n    backgroundClip: \"padding-box\",\n    backgroundColor: colors.background,\n    borderBlockColor: {\n      default: colors.border,\n      [invalid]: colors.dangerBorder,\n    },\n    borderInlineColor: {\n      default: colors.border,\n      [invalid]: colors.dangerBorder,\n    },\n    borderStartStartRadius: radii.md,\n    borderStartEndRadius: radii.md,\n    borderEndStartRadius: radii.md,\n    borderEndEndRadius: radii.md,\n    borderBlockStyle: \"solid\",\n    borderInlineStyle: \"solid\",\n    borderBlockWidth: strokes.border,\n    borderInlineWidth: strokes.border,\n    boxShadow: { default: shadows.default, [invalid]: shadows.defaultInvalid },\n    caretColor: colors.accentSolid,\n    color: colors.textPrimary,\n    cursor: { default: null, [disabled]: \"not-allowed\" },\n    display: \"block\",\n    fieldSizing: \"content\",\n    fontSize: { default: fontSizes.textSm, [media.coarse]: fontSizes.touch },\n    lineHeight: {\n      default: lineHeights.textSm,\n      [media.coarse]: lineHeights.touch,\n    },\n    marginBlock: 0,\n    marginInline: 0,\n    minHeight: `calc(${sizes.controlMd} * 2)`,\n    minWidth: 0,\n    opacity: { default: 1, [disabled]: opacities.disabled },\n    paddingBlock: space.xs,\n    paddingInline: space.popup,\n    resize: { default: \"vertical\", [disabled]: \"none\" },\n    transitionDuration: durations.hover,\n    transitionProperty: \"border-color, box-shadow\",\n    transitionTimingFunction: \"ease\",\n    width: \"100%\",\n    \"::placeholder\": { color: colors.textMuted },\n  },\n  sm: {\n    fontSize: { default: fontSizes.captionLg, [media.coarse]: fontSizes.touch },\n    lineHeight: {\n      default: lineHeights.captionLg,\n      [media.coarse]: lineHeights.touch,\n    },\n    minHeight: `calc(${sizes.controlSm} * 2)`,\n    paddingBlock: space.row,\n  },\n  lg: {\n    minHeight: `calc(${sizes.controlLg} * 2)`,\n    paddingBlock: space.popup,\n  },\n});\n\nconst sizeStyles = {\n  default: null,\n  lg: styles.lg,\n  sm: styles.sm,\n} satisfies Record<TextareaSize, stylex.StyleXStyles | null>;\n\n/** A textarea's styles for another element, like a third-party autosizing textarea. */\nfunction textareaStyles({\n  size = \"default\",\n}: Pick<TextareaProps, \"size\"> = {}) {\n  return [styles.textarea, sizeStyles[size]];\n}\n\nfunction Textarea({ size = \"default\", sx, ...props }: TextareaProps) {\n  return (\n    <FieldPrimitive.Control\n      render={(controlProps) => (\n        <textarea\n          data-size={size}\n          data-slot=\"textarea\"\n          {...mergeProps<\"textarea\">(controlProps, props)}\n          {...stylex.props(textareaStyles({ size }), sx)}\n        />\n      )}\n    />\n  );\n}\n\nexport { Textarea, textareaSizes, textareaStyles };\nexport type { TextareaProps, TextareaSize };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/textarea/index.md",
  "type": "registry:ui"
}