@sanity/ui 5.0.0-alpha.12 → 5.0.0-alpha.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "5.0.0-alpha.12",
+  "version": "5.0.0-alpha.14",
   "description": "Sanity UI Library",
   "keywords": [
     "components",
@@ -48,7 +48,7 @@
     }
   },
   "dependencies": {
-    "@sanity-labs/design-tokens": "0.0.2-alpha.5",
+    "@sanity-labs/design-tokens": "0.0.2-alpha.6",
     "@sanity/icons": "^5.2.1",
     "clsx": "^2.1.1",
     "comment-json": "^5.0.0",

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/classes/local/text-trim.css

@@ -32,10 +32,6 @@
   .sui-text-heading3 { --trim: -7px; }
   .sui-text-heading4 { --trim: -8px; }
   .sui-text-heading5 { --trim: -10px; }
-  .sui-text-heading6 { --trim: -13px; }
-  .sui-text-heading7 { --trim: -16px; }
-  .sui-text-heading8 { --trim: -22px; }
-  .sui-text-heading9 { --trim: -30px; }
 
   .sui-text-code0 { --trim: -4px; }
   .sui-text-code1 { --trim: -5px; }

package/src/css/classes/system/typography.css

@@ -17,10 +17,6 @@
   .sui-text-heading3 { font: var(--heading-3); }
   .sui-text-heading4 { font: var(--heading-4); }
   .sui-text-heading5 { font: var(--heading-5); }
-  .sui-text-heading6 { font: var(--heading-6); }
-  .sui-text-heading7 { font: var(--heading-7); }
-  .sui-text-heading8 { font: var(--heading-8); }
-  .sui-text-heading9 { font: var(--heading-9); }
 
   .sui-text-eyebrow0 { font: var(--label-0); }
   .sui-text-eyebrow1 { font: var(--label-1); }

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/types/Heading.ts

@@ -1,6 +1,6 @@
 export const HEADING_TAG = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const
 export type HeadingTag = (typeof HEADING_TAG)[number]
 
-export const HEADING_SIZE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const
+export const HEADING_SIZE = [0, 1, 2, 3, 4, 5] as const
 /** @public */
 export type HeadingSize = (typeof HEADING_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 = '500alpha12'
-export const HASH = '87c63f'
+export const VERSION = '500alpha14'
+export const HASH = 'f8a1c2'