@sanity/ui 5.0.0-alpha.15 → 5.0.0-alpha.16

package/src/components/text-area/TextArea.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type TextAreaProps, textAreaProps} from './textArea.props'
+
+const textAreaClassName = suffixClassName('sui-TextArea')
+
+/** @public */
+export function TextArea({
+  autoResize,
+  density = 'regular',
+  hasError,
+  rows = 5,
+  ...props
+}: TextAreaProps) {
+  const {className, style, ...rest} = getProps({autoResize, density, rows, ...props}, textAreaProps)
+
+  const textAreaClasses = clsx(textAreaClassName, 'sui-radius2', 'sui-width-full', className)
+
+  return (
+    <textarea
+      className={textAreaClasses}
+      style={style}
+      data-ui="TextArea"
+      {...rest}
+      aria-invalid={hasError || undefined}
+    />
+  )
+}
+
+export type {TextAreaProps}

package/src/components/text-area/text-area.css

@@ -0,0 +1,56 @@
+.sui-TextArea {
+  --background-color: var(--backdrop);
+  --border-color: var(--separator-high);
+  --color: var(--foreground-high);
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  font: var(--form-element-text);
+  color: var(--color);
+  resize: none;
+}
+
+.sui-TextArea::placeholder {
+  color: oklch(from var(--color) l c h / var(--placeholder-opacity));
+}
+
+/**
+  * Error
+  */
+.sui-TextArea[aria-invalid="true"] {
+  --border-color: var(--error-separator);
+  --color: var(--error-foreground);
+}
+
+/**
+  * Hover - uses relative border/background colours to darken/lighten in both normal & error state
+  */
+.sui-TextArea:hover {
+  border-color: light-dark(
+    oklch(from var(--border-color) calc(l - var(--hover-lightness-delta)) c h),
+    oklch(from var(--border-color) calc(l + var(--hover-lightness-delta)) c h)
+  );
+}
+
+/**
+  * Disabled, read-only
+  */
+.sui-TextArea:is(:disabled, :read-only) {
+  --background-color: var(--inert-background);
+  --border-color: var(--separator-low);
+}
+
+/**
+  * Disabled
+  */
+.sui-TextArea:disabled {
+  --color: var(--inert-foreground);
+  pointer-events: none;
+}
+
+/**
+  * Focus
+  */
+.sui-TextArea:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset);
+}

package/src/components/text-area/textArea.props.ts

@@ -0,0 +1,35 @@
+import {formElementDensityProps, type FormElementDensityProps} from '../../props/formElement'
+import {type HeightProps, heightProps} from '../../props/height'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export interface TextAreaProps
+  extends
+    React.ComponentProps<'textarea'>,
+    FormElementDensityProps,
+    Pick<HeightProps, 'maxHeight'> {
+  /**
+   * Sizes the textarea to its content via the CSS `field-sizing` property.
+   */
+  autoResize?: boolean
+  /**
+   * Used to trigger styling for invalid states.
+   */
+  hasError?: boolean
+  /**
+   * The html `rows` attribute. Defaults to 5.
+   */
+  rows?: number
+}
+
+export const textAreaProps: Record<string, PropDef> = {
+  autoResize: {
+    type: 'boolean',
+    className: 'field-sizing-content',
+  },
+  hasError: {
+    type: 'boolean',
+  },
+  maxHeight: heightProps['maxHeight'] as PropDef,
+  ...formElementDensityProps,
+}

package/src/components/text-input/TextInput.tsx

@@ -9,7 +9,7 @@ const textInputClassName = suffixClassName('sui-TextInput')
 /** @public */
 export function TextInput({
   density = 'regular',
-  hasError = false,
+  hasError,
   type = 'text',
   ...props
 }: TextInputProps) {

package/src/components/text-input/text-input.css

@@ -31,15 +31,21 @@
 }
 
 /**
-  * Disabled
+  * Disabled, read-only
   */
-.sui-TextInput:disabled {
+.sui-TextInput:is(:disabled, :read-only) {
   --background-color: var(--inert-background);
   --border-color: var(--separator-low);
-  --color: var(--inert-foreground);
   pointer-events: none;
 }
 
+/**
+  * Disabled
+  */
+.sui-TextInput:disabled {
+  --color: var(--inert-foreground);
+}
+
 /**
   * Focus
   */

package/src/components/text-input/textInput.props.ts

@@ -25,6 +25,7 @@ export interface TextInputProps
   extends Omit<React.ComponentProps<'input'>, 'type'>, FormElementDensityProps {
   /**
    * Used to trigger styling for invalid states.
+   * @remarks Use when form validation fails. Pair with a visible error message.
    */
   hasError?: boolean
   /**

package/src/css/classes/dynamic/height.css

@@ -2,4 +2,6 @@
   .sui-height { height: var(--height); }
   .sui-min-height { min-height: var(--min-height); }
   .sui-max-height { max-height: var(--max-height); }
+  .sui-height-full { height: 100%; }
+  .sui-height-auto { height: auto; }
 }

package/src/css/classes/local/field-sizing.css

@@ -0,0 +1,3 @@
+.sui-field-sizing-content {
+  field-sizing: content;
+}

package/src/css/classes/local/index.css

@@ -1,5 +1,6 @@
 @import './animation.css';
 @import './border.css';
+@import './field-sizing.css';
 @import './text-overflow.css';
 @import './text-trim.css';
 @import './tone.css';

package/src/index.ts

@@ -1,5 +1,8 @@
 'use client'
 
+export * from './components/avatar/Avatar'
+export * from './components/avatar-counter/AvatarCounter'
+export * from './components/avatar-stack/AvatarStack'
 export * from './components/badge/Badge'
 export * from './components/box/Box'
 export * from './components/button/Button'
@@ -14,11 +17,13 @@ export * from './components/flex/Flex'
 export * from './components/grid/Grid'
 export * from './components/h-stack/HStack'
 export * from './components/heading/Heading'
+export * from './components/hotkeys/Hotkeys'
 export * from './components/icon/Icon'
 export * from './components/icon-button/IconButton'
 export * from './components/indicator/Indicator'
 export * from './components/indicator-stack/IndicatorStack'
 export * from './components/inline/Inline'
+export * from './components/kbd/KBD'
 export * from './components/label/Label'
 export * from './components/link/Link'
 export * from './components/list/List'
@@ -30,6 +35,7 @@ export * from './components/skip-to-content/SkipToContent'
 export * from './components/spinner/Spinner'
 export * from './components/switch/Switch'
 export * from './components/text/Text'
+export * from './components/text-area/TextArea'
 export * from './components/text-input/TextInput'
 export * from './components/tooltip/Tooltip'
 export * from './components/tooltip-group/TooltipGroup'
@@ -53,6 +59,7 @@ export type {Density} from './types/Density'
 export type {DisplayBlock, DisplayFlex, DisplayGrid} from './types/Display'
 export type {EyebrowSize} from './types/Eyebrow'
 export type {AlignItems, FlexDirection, FlexWrap, JustifyContent} from './types/Flex'
+export type {FontWeight} from './types/FontWeight'
 export type {GridAutoFlow} from './types/Grid'
 export type {HeadingSize} from './types/Heading'
 export type {IconSize} from './types/Icon'
@@ -65,5 +72,4 @@ export type {Shadow} from './types/Shadow'
 export type {Space, SpaceAuto, SpaceAutoNegative, SpaceInherit} from './types/Space'
 export type {TextSize} from './types/Text'
 export type {TextAlign} from './types/TextAlign'
-export type {FontWeight} from './types/FontWeight'
 export type {Tone} from './types/Tone'

package/src/types/Avatar.ts

@@ -0,0 +1,14 @@
+export const AVATAR_SIZE = [0, 1, 2] as const
+export type AvatarSize = (typeof AVATAR_SIZE)[number]
+
+export const AVATAR_COLOR = [
+  'gray',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+] as const
+export type AvatarColor = (typeof AVATAR_COLOR)[number]

package/src/types/Eyebrow.ts

@@ -1,3 +1,3 @@
-export const EYEBROW_SIZE = [0, 1, 2, 3, 4] as const
+export const EYEBROW_SIZE = [0, 1, 2, 3, 4, 5] as const
 /** @public */
 export type EyebrowSize = (typeof EYEBROW_SIZE)[number]

package/src/version.ts

@@ -1,3 +1,3 @@
 // This file is generated by scripts/write-version.js. Do not edit.
-export const VERSION = '500alpha15'
-export const HASH = '29dcdf'
+export const VERSION = '500alpha16'
+export const HASH = 'd73bbc'