@sanity-labs/ui-poc 0.0.1-alpha.10 → 0.0.1-alpha.12

package/dist/_chunks-es/LazyRefractor.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { hasLanguage, Refractor } from "react-refractor";
+function LazyRefractor({ language, value }) {
+  return hasLanguage(language) ? /* @__PURE__ */ jsx(Refractor, { inline: !0, language, value }) : /* @__PURE__ */ jsx("code", { children: value });
+}
+export {
+  LazyRefractor as default
+};
+//# sourceMappingURL=LazyRefractor.js.map

package/dist/_chunks-es/LazyRefractor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyRefractor.js","sources":["../../src/components/code/LazyRefractor.tsx"],"sourcesContent":["import {hasLanguage, Refractor, type RefractorProps} from 'react-refractor'\n\nexport default function LazyRefractor({language, value}: RefractorProps) {\n  if (!hasLanguage(language)) {\n    return <code>{value}</code>\n  }\n\n  return <Refractor inline language={language} value={value} />\n}\n"],"names":[],"mappings":";;AAEA,SAAwB,cAAc,EAAC,UAAU,SAAwB;AACvE,SAAK,YAAY,QAAQ,IAIlB,oBAAC,WAAA,EAAU,QAAM,IAAC,UAAoB,MAAA,CAAc,IAHlD,oBAAC,QAAA,EAAM,UAAA,OAAM;AAIxB;"}

package/dist/index.d.ts

@@ -1,5 +1,8 @@
+import type {ComponentProps} from 'react'
+import type {ComponentPropsWithRef} from 'react'
+import type {ElementType} from 'react'
 import {JSX} from 'react/jsx-runtime'
-import {default as React_2} from 'react'
+import type {SVGProps} from 'react'
 
 declare const ALIGN_ITEMS: readonly ['baseline', 'center', 'flex-end', 'flex-start', 'stretch']
 
@@ -21,10 +24,10 @@ declare type BorderProps = {
 }
 
 /** @public */
-export declare function Box<T extends React_2.ElementType = 'div'>({
+export declare function Box<T extends ElementType = 'div'>({
   display,
   ...props
-}: BoxProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof BoxProps<T>>): JSX.Element
+}: BoxProps<T> & Omit<ComponentPropsWithRef<T>, keyof BoxProps<T>>): JSX.Element
 
 /** @public */
 declare interface BoxProps<T extends React.ElementType> extends LayoutProps {
@@ -35,11 +38,11 @@ declare interface BoxProps<T extends React.ElementType> extends LayoutProps {
 }
 
 /** @public */
-export declare function Card<T extends React_2.ElementType = 'div'>({
+export declare function Card<T extends ElementType = 'div'>({
   density,
   tone,
   ...props
-}: CardProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof CardProps<T>>): JSX.Element
+}: CardProps<T> & Omit<ComponentPropsWithRef<T>, keyof CardProps<T>>): JSX.Element
 
 /** @public */
 declare interface CardProps<T extends React.ElementType> extends MarginProps, ToneProps {
@@ -49,6 +52,60 @@ declare interface CardProps<T extends React.ElementType> extends MarginProps, To
   density?: Responsive<Density>
 }
 
+/** @beta */
+export declare function Checkbox(props: CheckboxProps): JSX.Element
+
+/** @beta */
+declare interface CheckboxProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Input label */
+  label: React.ReactNode
+  /** Indeterminate state */
+  indeterminate?: boolean
+}
+
+/** @public */
+export declare function Code<T extends React.ElementType = 'pre'>({
+  size,
+  ...props
+}: CodeProps & Omit<React.ComponentPropsWithRef<T>, keyof CodeProps>): JSX.Element
+
+declare const CODE_SIZE: readonly [0, 1, 2, 3, 4]
+
+declare const CODE_TAG: readonly ['pre', 'span']
+
+/** @public */
+declare interface CodeProps
+  extends React.ComponentProps<'pre'>, Omit<TypographyProps, 'align' | 'lineClamp' | 'tone'> {
+  /** Element to render */
+  as?: CodeTag
+  /** Refractor language for syntax highlighting */
+  language?: string
+  /** CSS **font-size** property */
+  size?: Responsive<CodeSize>
+}
+
+declare type CodeSize = (typeof CODE_SIZE)[number]
+
+declare type CodeTag = (typeof CODE_TAG)[number]
+
+/** @public */
+export declare function Container<T extends ElementType = 'div'>({
+  marginX,
+  ...props
+}: ContainerProps<T> & Omit<ComponentPropsWithRef<T>, keyof ContainerProps<T>>): JSX.Element
+
+declare const CONTAINER_SIZE: readonly [0, 1, 2, 3, 4, 5]
+
+/** @public */
+declare interface ContainerProps<T extends React.ElementType> extends LayoutProps {
+  /** Element to render */
+  as?: T
+  /** CSS **max-width** property */
+  contentSize?: Responsive<ContainerSize>
+}
+
+declare type ContainerSize = (typeof CONTAINER_SIZE)[number]
+
 declare const DENSITY: readonly ['compact', 'regular', 'loose']
 
 declare type Density = (typeof DENSITY)[number]
@@ -72,10 +129,10 @@ export declare function Divider(props: DividerProps): JSX.Element
 declare interface DividerProps extends React.ComponentProps<'hr'>, MarginProps {}
 
 /** @public */
-export declare function Flex<T extends React_2.ElementType = 'div'>({
+export declare function Flex<T extends ElementType = 'div'>({
   display,
   ...props
-}: FlexProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof FlexProps<T>>): JSX.Element
+}: FlexProps<T> & Omit<ComponentPropsWithRef<T>, keyof FlexProps<T>>): JSX.Element
 
 declare const FLEX_DIRECTION: readonly ['row', 'row-reverse', 'column', 'column-reverse']
 
@@ -128,10 +185,10 @@ declare type GapProps = {
 }
 
 /** @public */
-export declare function Grid<T extends React_2.ElementType = 'div'>({
+export declare function Grid<T extends ElementType = 'div'>({
   display,
   ...props
-}: GridProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof GridProps<T>>): JSX.Element
+}: GridProps<T> & Omit<ComponentPropsWithRef<T>, keyof GridProps<T>>): JSX.Element
 
 declare const GRID_AUTO_FLOW: readonly ['row', 'column', 'row dense', 'column dense', 'dense']
 
@@ -175,11 +232,11 @@ declare interface GridProps<T extends React.ElementType>
 }
 
 /** @public */
-export declare function Heading<T extends React_2.ElementType = 'h2'>({
+export declare function Heading<T extends ElementType = 'h2'>({
   size,
   weight,
   ...props
-}: HeadingProps & Omit<React_2.ComponentPropsWithRef<T>, keyof HeadingProps>): JSX.Element
+}: HeadingProps & Omit<ComponentPropsWithRef<T>, keyof HeadingProps>): JSX.Element
 
 declare const HEADING_SIZE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
@@ -190,7 +247,7 @@ declare interface HeadingProps extends TypographyProps {
   /** Element to render */
   as?: HeadingTag
   /** CSS **font-size** property */
-  size?: HeadingSize
+  size?: Responsive<HeadingSize>
 }
 
 declare type HeadingSize = (typeof HEADING_SIZE)[number]
@@ -206,6 +263,23 @@ declare type HeightProps = {
   maxHeight?: Responsive<string>
 }
 
+/** @public */
+export declare function Icon({icon: Component, size, ...props}: IconProps): JSX.Element
+
+declare const ICON_SIZE: readonly [0, 1, 2, 3, 4]
+
+/** @public */
+declare interface IconProps extends ComponentProps<'svg'>, MarginProps, ToneProps {
+  /** Icon to render */
+  icon: React.ComponentType<SVGProps<SVGSVGElement>>
+  /** CSS **font-size** property */
+  size?: Responsive<IconSize>
+  /** CSS **color** property */
+  muted?: TypographyProps['muted']
+}
+
+declare type IconSize = (typeof ICON_SIZE)[number]
+
 declare const JUSTIFY_CONTENT: readonly [
   'flex-start',
   'flex-end',
@@ -217,6 +291,15 @@ declare const JUSTIFY_CONTENT: readonly [
 
 declare type JustifyContent = (typeof JUSTIFY_CONTENT)[number]
 
+/** @beta */
+export declare function Label(props: LabelProps): JSX.Element
+
+/** @beta */
+declare interface LabelProps extends React.ComponentProps<'label'>, MarginProps {
+  /** Element to render */
+  disabled?: boolean
+}
+
 declare interface LayoutProps
   extends
     ToneProps,
@@ -298,6 +381,15 @@ declare type PositionProps = {
   left?: Responsive<SpaceAuto>
 }
 
+/** @beta */
+export declare function Radio(props: RadioProps): JSX.Element
+
+/** @beta */
+declare interface RadioProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Input label */
+  label: React.ReactNode
+}
+
 declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, 'full']
 
 declare type Radius = (typeof RADIUS)[number]
@@ -323,9 +415,6 @@ declare type Responsive<T> =
   | ([T | undefined, ...(T | undefined)[]] & {
       length: 6
     })
-  | ([T | undefined, ...(T | undefined)[]] & {
-      length: 7
-    })
 
 declare type ShadowProps = {
   /** CSS **box-shadow** property */
@@ -340,11 +429,22 @@ declare const SPACE_AUTO: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'auto']
 
 declare type SpaceAuto = (typeof SPACE_AUTO)[number]
 
+/** @beta */
+export declare function Switch(props: SwitchProps): JSX.Element
+
+/** @beta */
+declare interface SwitchProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Input label */
+  label: React.ReactNode
+  /** Indeterminate state */
+  indeterminate?: boolean
+}
+
 /** @public */
-declare function Text_2<T extends React_2.ElementType = 'span'>({
+declare function Text_2<T extends ElementType = 'span'>({
   size,
   ...props
-}: TextProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof TextProps<T>>): JSX.Element
+}: TextProps<T> & Omit<ComponentPropsWithRef<T>, keyof TextProps<T>>): JSX.Element
 export {Text_2 as Text}
 
 declare const TEXT_ALIGN: readonly ['left', 'center', 'right', 'justify']
@@ -358,7 +458,7 @@ declare interface TextProps<T extends React.ElementType> extends TypographyProps
   /** Element to render */
   as?: T
   /** CSS **font-size** property */
-  size?: TextSize
+  size?: Responsive<TextSize>
 }
 
 declare type TextSize = (typeof TEXT_SIZE)[number]
@@ -393,6 +493,17 @@ declare interface TypographyProps extends MarginProps, ToneProps {
   weight?: FontWeight
 }
 
+/** @public */
+export declare function VisuallyHidden<T extends ElementType = 'span'>(
+  props: VisuallyHiddenProps<T> & Omit<ComponentPropsWithRef<T>, keyof VisuallyHiddenProps<T>>,
+): JSX.Element
+
+/** @public */
+declare interface VisuallyHiddenProps<T extends React.ElementType> {
+  /** Element to render */
+  as?: T
+}
+
 declare type WidthProps = {
   /** CSS **width** property */
   width?: Responsive<string>