@sanity/ui 5.0.0-alpha.11 → 5.0.0-alpha.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "5.0.0-alpha.11",
+  "version": "5.0.0-alpha.13",
   "description": "Sanity UI Library",
   "keywords": [
     "components",

package/src/components/icon/Icon.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import {cloneElement, createElement, isValidElement, type ComponentType, type SVGProps} from 'react'
 
 import {getProps} from '../../utils/getProps'
 import {suffixClassName} from '../../utils/suffixClassName'
@@ -7,18 +8,27 @@ import {type IconProps, iconProps} from './icon.props'
 const iconClassName = suffixClassName('sui-Icon')
 
 /** @public */
-export function Icon({size = 2, ...props}: IconProps) {
-  const {className, style, icon: Component, ...rest} = getProps({size, ...props}, iconProps)
+export function Icon({icon, size = 2, ...props}: IconProps) {
+  const {className, style, ...rest} = getProps({size, ...props}, iconProps)
+  const iconElement = isValidElement(icon) ? icon : null
+  const ariaLabel =
+    props['aria-label'] || (iconElement ? iconElement.props['aria-label'] : undefined)
 
-  return (
-    <Component
-      className={clsx(iconClassName, className)}
-      data-ui="Icon"
-      style={style}
-      aria-hidden={props['aria-label'] ? undefined : true}
-      {...rest}
-    />
-  )
+  const svgProps = {
+    'className': clsx(
+      iconClassName,
+      className,
+      iconElement ? iconElement.props.className : undefined,
+    ),
+    'style': iconElement ? {...iconElement.props.style, ...style} : style,
+    'data-ui': 'Icon',
+    'aria-hidden': ariaLabel ? undefined : true,
+    ...rest,
+  }
+
+  return iconElement
+    ? cloneElement(iconElement, svgProps)
+    : createElement(icon as ComponentType<SVGProps<SVGSVGElement>>, svgProps)
 }
 
 export type {IconProps}

package/src/components/icon/icon.props.ts

@@ -13,7 +13,7 @@ export interface IconProps
   /**
    * The icon component to render.
    */
-  icon: React.ComponentType<SVGProps<SVGSVGElement>>
+  icon: React.ComponentType<SVGProps<SVGSVGElement>> | React.ReactElement<SVGProps<SVGSVGElement>>
   /**
    * Sets icon size.
    */

package/src/components/index.css

@@ -25,5 +25,6 @@
 @import './skip-to-content/skip-to-content.css';
 @import './switch/switch.css';
 @import './text/text.css';
+@import './text-input/text-input.css';
 @import './tooltip/tooltip.css';
 @import './visually-hidden/visually-hidden.css';

package/src/components/select/Select.tsx

@@ -16,13 +16,7 @@ export function Select({density = 'regular', hasError = false, ...props}: Select
   const anchorId = useId()
   const anchorName = `--anchor-${anchorId}`
 
-  const selectClasses = clsx(
-    selectClassName,
-    hasError && 'sui-error',
-    'sui-radius2',
-    'sui-width-full',
-    className,
-  )
+  const selectClasses = clsx(selectClassName, 'sui-radius2', 'sui-width-full', className)
 
   const iconClasses = `sui-position-absolute sui-display-flex sui-align-items-center sui-px1`
 

package/src/components/select/select.css

@@ -21,12 +21,12 @@
 /**
   * Error
   */
-.sui-Select.sui-error {
+.sui-Select[aria-invalid="true"] {
   --border-color: var(--error-separator);
   --color: var(--error-foreground);
 }
 
-.sui-Select.sui-error + [data-ui="Select-icon"] svg {
+.sui-Select[aria-invalid="true"] + [data-ui="Select-icon"] svg {
   color: var(--error-foreground);
 }
 

package/src/components/select/select.props.ts

@@ -2,22 +2,14 @@ import {formElementDensityProps, type FormElementDensityProps} from '../../props
 import {type PropDef} from '../../types/PropDef'
 
 /** @public */
-export type SelectProps = React.ComponentProps<'select'> &
-  FormElementDensityProps & {
-    /**
-     * Disables the select element, blocking interactions and hiding it from screen readers.
-     */
-    disabled?: boolean
-    /**
-     * Used to trigger styling for invalid states.
-     */
-    hasError?: boolean
-  }
+export interface SelectProps extends React.ComponentProps<'select'>, FormElementDensityProps {
+  /**
+   * Used to trigger styling for invalid states.
+   */
+  hasError?: boolean
+}
 
 export const selectProps: Record<string, PropDef> = {
-  disabled: {
-    type: 'boolean',
-  },
   hasError: {
     type: 'boolean',
   },

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

@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {type TextInputProps, textInputProps} from './textInput.props'
+
+const textInputClassName = suffixClassName('sui-TextInput')
+
+/** @public */
+export function TextInput({
+  density = 'regular',
+  hasError = false,
+  type = 'text',
+  ...props
+}: TextInputProps) {
+  const {className, style, ...rest} = getProps({density, ...props}, textInputProps)
+
+  const textInputClasses = clsx(textInputClassName, 'sui-radius2', 'sui-width-full', className)
+
+  return (
+    <input
+      type={type}
+      className={textInputClasses}
+      style={style}
+      data-ui="TextInput"
+      {...rest}
+      aria-invalid={hasError || undefined}
+    />
+  )
+}
+
+export type {TextInputProps}

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

@@ -0,0 +1,49 @@
+.sui-TextInput {
+  --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);
+}
+
+.sui-TextInput::placeholder {
+  color: oklch(from var(--color) l c h / var(--placeholder-opacity));
+}
+
+/**
+  * Error
+  */
+.sui-TextInput[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-TextInput: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
+  */
+.sui-TextInput:disabled {
+  --background-color: var(--inert-background);
+  --border-color: var(--separator-low);
+  --color: var(--inert-foreground);
+  pointer-events: none;
+}
+
+/**
+  * Focus
+  */
+.sui-TextInput:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset);
+}

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

@@ -0,0 +1,41 @@
+import {formElementDensityProps, type FormElementDensityProps} from '../../props/formElement'
+import {type PropDef} from '../../types/PropDef'
+
+export const TEXT_INPUT_EXCLUDED_TYPES = [
+  'button',
+  'checkbox',
+  'color',
+  'file',
+  'hidden',
+  'image',
+  'radio',
+  'range',
+  'reset',
+  'submit',
+] as const
+
+/** @public */
+export type TextInputExcludedTypes = (typeof TEXT_INPUT_EXCLUDED_TYPES)[number]
+
+/** @public */
+export type TextInputType = Exclude<React.HTMLInputTypeAttribute, TextInputExcludedTypes>
+
+/** @public */
+export interface TextInputProps
+  extends Omit<React.ComponentProps<'input'>, 'type'>, FormElementDensityProps {
+  /**
+   * Used to trigger styling for invalid states.
+   */
+  hasError?: boolean
+  /**
+   * The html `type` attribute, with non-text based types excluded.
+   */
+  type?: TextInputType
+}
+
+export const textInputProps: Record<string, PropDef> = {
+  hasError: {
+    type: 'boolean',
+  },
+  ...formElementDensityProps,
+}

package/src/css/tokens/semantic.css

@@ -2,7 +2,7 @@
   --backdrop: light-dark(var(--white), var(--black));
   --brand-background: #eb5228;
   --brand-foreground: var(--black);
-  --placeholder-opacity: var(--opacity-mid);
+  --placeholder-opacity: 0.64;
   --overlay-opacity: var(--opacity-mid);
   /* State */
   --active-background-normal: light-dark(var(--blue-50), var(--blue-950));

package/src/index.ts

@@ -1,5 +1,6 @@
 'use client'
 
+export * from './components/badge/Badge'
 export * from './components/box/Box'
 export * from './components/button/Button'
 export * from './components/card/Card'
@@ -29,6 +30,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-input/TextInput'
 export * from './components/tooltip/Tooltip'
 export * from './components/tooltip-group/TooltipGroup'
 export * from './components/v-stack/VStack'
@@ -65,4 +67,3 @@ export type {TextSize} from './types/Text'
 export type {TextAlign} from './types/TextAlign'
 export type {FontWeight} from './types/FontWeight'
 export type {Tone} from './types/Tone'
-export * from './components/badge/Badge'

package/src/version.ts

@@ -1,3 +1,3 @@
 // This file is generated by scripts/write-version.js. Do not edit.
-export const VERSION = '500alpha11'
-export const HASH = '8b95a0'
+export const VERSION = '500alpha13'
+export const HASH = '0ef1ec'