@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/LabeledValue.cjs.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/LabeledValue.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  CalendarDate,\n  CalendarDateTime,\n  getLocalTimeZone,\n  Time,\n  toCalendarDateTime,\n  today,\n  ZonedDateTime\n} from '@internationalized/date';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n  controlFont,\n  controlSize,\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, isValidElement, ReactElement, ReactNode} from 'react';\nimport {\n  DOMProps,\n  DOMRef,\n  DOMRefValue,\n  RangeValue,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FormContext, useFormProps} from './Form';\nimport {style} from '../style' with {type: 'macro'};\nimport {useContext, useEffect} from 'react';\nimport {useDateFormatter} from 'react-aria/useDateFormatter';\nimport {useDOMRef} from './useDOMRef';\nimport {useListFormatter} from 'react-aria/useListFormatter';\nimport {useNumberFormatter} from 'react-aria/useNumberFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ntype NumberValue = number | RangeValue<number>;\ninterface NumberProps<T extends NumberValue> {\n  /** The value to display. */\n  value: T;\n  /** Formatting options for the value. */\n  formatOptions?: Intl.NumberFormatOptions;\n}\n\nexport type DateTime = Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time;\ntype RangeDateTime = RangeValue<DateTime>;\ntype DateTimeValue = DateTime | RangeDateTime;\ninterface DateProps<T extends DateTimeValue> {\n  /** The value to display. */\n  value: T;\n  /** Formatting options for the value. */\n  formatOptions?: Intl.DateTimeFormatOptions;\n}\n\ninterface StringProps<T extends string> {\n  /** The value to display. */\n  value: T;\n  /** Formatting options for the value. */\n  formatOptions?: never;\n}\n\ninterface StringListProps<T extends string[]> {\n  /** The value to display. */\n  value: T;\n  /** Formatting options for the value. */\n  formatOptions?: Intl.ListFormatOptions;\n}\n\ninterface ReactElementProps<T extends ReactElement> {\n  /** The value to display. */\n  value: T;\n  /** Formatting options for the value. */\n  formatOptions?: never;\n}\n\nexport interface LabeledValueStyleProps {\n  /**\n   * The size of the component.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\nexport interface LabeledValueBaseProps\n  extends DOMProps, StyleProps, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'> {\n  /** The content to display as the label. */\n  label: ReactNode;\n}\ntype LabeledValueTypeProps<T> = T extends NumberValue\n  ? NumberProps<T>\n  : T extends DateTimeValue\n    ? DateProps<T>\n    : T extends string[]\n      ? StringListProps<T>\n      : T extends string\n        ? StringProps<T>\n        : T extends ReactElement\n          ? ReactElementProps<T>\n          : never;\n\ntype LabeledValueTypes =\n  | string[]\n  | string\n  | Date\n  | CalendarDate\n  | CalendarDateTime\n  | ZonedDateTime\n  | Time\n  | number\n  | RangeValue<number>\n  | RangeValue<DateTime>\n  | ReactElement;\nexport type LabeledValueProps<T> = LabeledValueTypeProps<T> &\n  LabeledValueBaseProps &\n  LabeledValueStyleProps;\n\nexport const LabeledValueContext =\n  createContext<ContextValue<Partial<LabeledValueProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst fieldStyles = style(\n  {\n    ...field()\n  },\n  getAllowedOverrides()\n);\n\nconst valueStyles = style({\n  ...fieldInput(),\n  minHeight: {\n    isInForm: controlSize()\n  },\n  display: 'flex',\n  alignItems: 'center',\n  font: controlFont()\n});\n\n/**\n * A LabeledValue displays a non-editable value with a label. It formats numbers,\n * dates, times, and lists according to the user's locale.\n */\nexport const LabeledValue = /*#__PURE__*/ forwardRef(function LabeledValue<\n  T extends LabeledValueTypes\n>(props: LabeledValueProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props as any, ref, LabeledValueContext) as any;\n  props = useFormProps(props);\n  let {\n    label,\n    value,\n    formatOptions,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    contextualHelp,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    ...otherProps\n  } = props;\n  let formContext = useContext(FormContext);\n\n  let domRef = useDOMRef(ref);\n  useEffect(() => {\n    if (\n      domRef?.current &&\n      domRef.current.querySelectorAll('input, [contenteditable], textarea').length > 0\n    ) {\n      throw new Error('LabeledValue cannot contain an editable value.');\n    }\n  }, [domRef]);\n\n  let children: ReactNode;\n\n  if (Array.isArray(value)) {\n    children = (\n      <FormattedStringList\n        value={value as string[]}\n        formatOptions={formatOptions as Intl.ListFormatOptions}\n      />\n    );\n  } else if (typeof value === 'number') {\n    children = (\n      <FormattedNumber value={value} formatOptions={formatOptions as Intl.NumberFormatOptions} />\n    );\n  } else if (\n    typeof value === 'object' &&\n    value !== null &&\n    'start' in value &&\n    typeof (value as RangeValue<number>).start === 'number'\n  ) {\n    children = (\n      <FormattedNumber\n        value={value as RangeValue<number>}\n        formatOptions={formatOptions as Intl.NumberFormatOptions}\n      />\n    );\n  } else if (typeof value === 'object' && value !== null && 'start' in value) {\n    children = (\n      <FormattedDate\n        value={value as RangeDateTime}\n        formatOptions={formatOptions as Intl.DateTimeFormatOptions}\n      />\n    );\n  } else if (\n    value instanceof Date ||\n    (typeof value === 'object' && value !== null && ('calendar' in value || 'hour' in value))\n  ) {\n    children = (\n      <FormattedDate\n        value={value as DateTime}\n        formatOptions={formatOptions as Intl.DateTimeFormatOptions}\n      />\n    );\n  } else if (typeof value === 'string') {\n    children = value;\n  } else if (isValidElement(value)) {\n    children = value;\n  }\n\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className +\n        fieldStyles(\n          {\n            isInForm: !!formContext,\n            labelPosition,\n            size\n          },\n          styles\n        )\n      }>\n      <FieldLabel\n        elementType=\"span\"\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={contextualHelp}>\n        {label}\n      </FieldLabel>\n      <span className={valueStyles({isInForm: !!formContext, size, labelPosition})}>\n        {children}\n      </span>\n    </div>\n  );\n});\n\nfunction FormattedStringList({\n  value,\n  formatOptions\n}: {\n  value: string[];\n  formatOptions?: Intl.ListFormatOptions;\n}) {\n  let formatter = useListFormatter(formatOptions ?? {});\n  return <>{formatter.format(value)}</>;\n}\n\nfunction FormattedNumber({\n  value,\n  formatOptions\n}: {\n  value: NumberValue;\n  formatOptions?: Intl.NumberFormatOptions;\n}) {\n  let formatter = useNumberFormatter(formatOptions);\n  if (typeof value === 'object') {\n    return <>{formatter.formatRange(value.start, value.end)}</>;\n  }\n  return <>{formatter.format(value)}</>;\n}\n\nfunction FormattedDate<T extends DateTimeValue>({\n  value,\n  formatOptions\n}: {\n  value: T;\n  formatOptions?: Intl.DateTimeFormatOptions;\n}) {\n  if (!formatOptions) {\n    formatOptions = getDefaultFormatOptions(\n      'start' in value ? (value as RangeDateTime).start : (value as DateTime)\n    );\n  }\n\n  let dateFormatter = useDateFormatter(formatOptions);\n  let timeZone = dateFormatter.resolvedOptions().timeZone || getLocalTimeZone();\n\n  if ('start' in value && 'end' in value) {\n    let start = convertDateTime((value as RangeDateTime).start, timeZone);\n    let end = convertDateTime((value as RangeDateTime).end, timeZone);\n    return <>{dateFormatter.formatRange(start, end)}</>;\n  }\n\n  return <>{dateFormatter.format(convertDateTime(value as DateTime, timeZone))}</>;\n}\n\nfunction convertDateTime(value: DateTime, timeZone: string): Date {\n  if ('timeZone' in value) {\n    return (value as ZonedDateTime).toDate();\n  } else if ('calendar' in value) {\n    return (value as CalendarDate | CalendarDateTime).toDate(timeZone);\n  } else if (!(value instanceof Date)) {\n    return toCalendarDateTime(today(getLocalTimeZone()), value as Time).toDate(timeZone);\n  }\n  return value;\n}\n\nfunction getDefaultFormatOptions(value: DateTime): Intl.DateTimeFormatOptions {\n  if (value instanceof Date) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('timeZone' in value) {\n    return {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      hour: 'numeric',\n      minute: 'numeric',\n      timeZone: (value as ZonedDateTime).timeZone,\n      timeZoneName: 'short'\n    };\n  } else if ('hour' in value && 'year' in value) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('hour' in value) {\n    return {timeStyle: 'short'};\n  } else {\n    return {dateStyle: 'long'};\n  }\n}\n"],"names":[],"version":3,"file":"LabeledValue.cjs.map"}

package/dist/private/LabeledValue.css

@@ -0,0 +1,285 @@
+@layer _.a {
+  .se15 {
+    display: grid;
+  }
+
+  .z2mU15 {
+    grid-column-start: 1;
+  }
+
+  .yvoofG15 {
+    grid-column-end: span 2;
+  }
+
+  .DM8Mfn15 {
+    grid-template-columns: 1fr;
+  }
+
+  .DPlN5qb15 {
+    grid-template-columns: auto 1fr;
+  }
+
+  .DLwlgod15 {
+    grid-template-columns: subgrid;
+  }
+
+  .E4w1sLc15 {
+    grid-template-rows: auto 1fr auto;
+  }
+
+  .EPlN5qb15 {
+    grid-template-rows: auto 1fr;
+  }
+
+  .Cxaocre15 {
+    grid-template-areas: "label"
+                         "input"
+                         "helptext";
+  }
+
+  .CbRM95c15 {
+    grid-template-areas: "label input"
+                         "label helptext";
+  }
+
+  .ea15 {
+    align-items: baseline;
+  }
+
+  ._Fd15 {
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+  }
+
+  .-BhX7R-Fx15 {
+    --field-height: calc(2rem * var(--s2-scale));
+  }
+
+  .-BhX7R-Fn15 {
+    --field-height: calc(1.25rem * var(--s2-scale));
+  }
+
+  .-BhX7R-Fp15 {
+    --field-height: calc(1.5rem * var(--s2-scale));
+  }
+
+  .-BhX7R-Fv15 {
+    --field-height: calc(2.5rem * var(--s2-scale));
+  }
+
+  .-BhX7R-Fz15 {
+    --field-height: calc(3rem * var(--s2-scale));
+  }
+
+  .-AJjOLd-UVkF0Db15 {
+    --field-gap: calc((var(--field-height) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
+  }
+
+  .qg15 {
+    column-gap: .75rem;
+  }
+
+  .__ca15 {
+    -webkit-tap-highlight-color: #0000;
+  }
+
+  .zXcEWr15 {
+    grid-column-start: input;
+  }
+
+  .yXcEWr15 {
+    grid-column-end: input;
+  }
+
+  .BXcEWr15 {
+    grid-row-start: input;
+  }
+
+  .AXcEWr15 {
+    grid-row-end: input;
+  }
+
+  .Nk15 {
+    min-width: calc(2rem * var(--s2-scale));
+  }
+
+  .Ne15 {
+    min-width: calc(1.25rem * var(--s2-scale));
+  }
+
+  .Nf15 {
+    min-width: calc(1.5rem * var(--s2-scale));
+  }
+
+  .Nj15 {
+    min-width: calc(2.5rem * var(--s2-scale));
+  }
+
+  .Nl15 {
+    min-width: calc(3rem * var(--s2-scale));
+  }
+
+  ._qd15 {
+    contain: none;
+  }
+
+  .-Anxdcc-Z3fn9H15 {
+    --defaultWidth: calc(13rem * var(--s2-scale));
+  }
+
+  .-Anxdcc-Zr15 {
+    --defaultWidth: calc(12rem * var(--s2-scale));
+  }
+
+  .-Anxdcc-ZStdtne15 {
+    --defaultWidth: calc(14rem * var(--s2-scale));
+  }
+
+  .-Anxdcc-Zt15 {
+    --defaultWidth: calc(15rem * var(--s2-scale));
+  }
+
+  .__v6TNLWb15 {
+    contain-intrinsic-width: calc(var(--defaultWidth) - var(--S, 0px) - var(--R, 0px) - var(--m, 0px) - var(--l, 0px));
+  }
+
+  .Mi15 {
+    min-height: calc(2rem * var(--s2-scale));
+  }
+
+  .Mf15 {
+    min-height: calc(1.25rem * var(--s2-scale));
+  }
+
+  .Mg15 {
+    min-height: calc(1.5rem * var(--s2-scale));
+  }
+
+  .Mh15 {
+    min-height: calc(2.5rem * var(--s2-scale));
+  }
+
+  .Mk15 {
+    min-height: calc(3rem * var(--s2-scale));
+  }
+
+  .sd15 {
+    display: flex;
+  }
+
+  .eb15 {
+    align-items: center;
+  }
+
+  .uk15 {
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  .-_6BNtrc-c15 {
+    --fs: pow(1.125, 0);
+  }
+
+  .-_6BNtrc-a15 {
+    --fs: pow(1.125, -2);
+  }
+
+  .-_6BNtrc-b15 {
+    --fs: pow(1.125, -1);
+  }
+
+  .-_6BNtrc-d15 {
+    --fs: pow(1.125, 1);
+  }
+
+  .-_6BNtrc-e15 {
+    --fs: pow(1.125, 2);
+  }
+
+  .vx15 {
+    font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
+  }
+
+  .xb15 {
+    font-weight: 400;
+  }
+
+  ._xa15 {
+    font-synthesis-weight: none;
+  }
+
+  ._Fd15 {
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+    line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
+  }
+
+  .pt15 {
+    color: light-dark(#292929, #dbdbdb);
+  }
+}
+
+@layer _.b {
+  .ucJ9TBTb15:lang(ar) {
+    font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._FnuYUweb15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    line-height: 1.5;
+  }
+}
+
+@layer _.c {
+  .ud3Euai15:lang(he) {
+    font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer _.d {
+  .uea15:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
+}
+
+@layer _.e {
+  .ugb15:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
+}
+
+@layer _.f {
+  .uhd15:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.g {
+  .uje15:lang(zh-hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.h {
+  .u2NhKxcl15:lang(zh-HK) {
+    font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.i {
+  .uic15:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
+}
+
+@layer _.b.t {
+  @supports (contain-intrinsic-width: 1px) {
+    ._qtb15 {
+      contain: inline-size;
+    }
+  }
+}
+/*# sourceMappingURL=LabeledValue.css.map */

package/dist/private/LabeledValue.css.map

@@ -0,0 +1 @@
+{"mappings":"ACoIoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;;AAPA;EAOA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA","sources":["0f1b4272e0d5f131","packages/@react-spectrum/s2/src/LabeledValue.tsx"],"sourcesContent":["@import \"13190e8ba87989d6\";\n@import \"bc87a2804ebb2e1e\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  CalendarDate,\n  CalendarDateTime,\n  getLocalTimeZone,\n  Time,\n  toCalendarDateTime,\n  today,\n  ZonedDateTime\n} from '@internationalized/date';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n  controlFont,\n  controlSize,\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, isValidElement, ReactElement, ReactNode} from 'react';\nimport {\n  DOMProps,\n  DOMRef,\n  DOMRefValue,\n  RangeValue,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FormContext, useFormProps} from './Form';\nimport {style} from '../style' with {type: 'macro'};\nimport {useContext, useEffect} from 'react';\nimport {useDateFormatter} from 'react-aria/useDateFormatter';\nimport {useDOMRef} from './useDOMRef';\nimport {useListFormatter} from 'react-aria/useListFormatter';\nimport {useNumberFormatter} from 'react-aria/useNumberFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ntype NumberValue = number | RangeValue<number>;\ninterface NumberProps<T extends NumberValue> {\n  /** The value to display. */\n  value: T;\n  /** Formatting options for the value. */\n  formatOptions?: Intl.NumberFormatOptions;\n}\n\nexport type DateTime = Date | CalendarDate | CalendarDateTime | ZonedDateTime | Time;\ntype RangeDateTime = RangeValue<DateTime>;\ntype DateTimeValue = DateTime | RangeDateTime;\ninterface DateProps<T extends DateTimeValue> {\n  /** The value to display. */\n  value: T;\n  /** Formatting options for the value. */\n  formatOptions?: Intl.DateTimeFormatOptions;\n}\n\ninterface StringProps<T extends string> {\n  /** The value to display. */\n  value: T;\n  /** Formatting options for the value. */\n  formatOptions?: never;\n}\n\ninterface StringListProps<T extends string[]> {\n  /** The value to display. */\n  value: T;\n  /** Formatting options for the value. */\n  formatOptions?: Intl.ListFormatOptions;\n}\n\ninterface ReactElementProps<T extends ReactElement> {\n  /** The value to display. */\n  value: T;\n  /** Formatting options for the value. */\n  formatOptions?: never;\n}\n\nexport interface LabeledValueStyleProps {\n  /**\n   * The size of the component.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\nexport interface LabeledValueBaseProps\n  extends DOMProps, StyleProps, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'> {\n  /** The content to display as the label. */\n  label: ReactNode;\n}\ntype LabeledValueTypeProps<T> = T extends NumberValue\n  ? NumberProps<T>\n  : T extends DateTimeValue\n    ? DateProps<T>\n    : T extends string[]\n      ? StringListProps<T>\n      : T extends string\n        ? StringProps<T>\n        : T extends ReactElement\n          ? ReactElementProps<T>\n          : never;\n\ntype LabeledValueTypes =\n  | string[]\n  | string\n  | Date\n  | CalendarDate\n  | CalendarDateTime\n  | ZonedDateTime\n  | Time\n  | number\n  | RangeValue<number>\n  | RangeValue<DateTime>\n  | ReactElement;\nexport type LabeledValueProps<T> = LabeledValueTypeProps<T> &\n  LabeledValueBaseProps &\n  LabeledValueStyleProps;\n\nexport const LabeledValueContext =\n  createContext<ContextValue<Partial<LabeledValueProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst fieldStyles = style(\n  {\n    ...field()\n  },\n  getAllowedOverrides()\n);\n\nconst valueStyles = style({\n  ...fieldInput(),\n  minHeight: {\n    isInForm: controlSize()\n  },\n  display: 'flex',\n  alignItems: 'center',\n  font: controlFont()\n});\n\n/**\n * A LabeledValue displays a non-editable value with a label. It formats numbers,\n * dates, times, and lists according to the user's locale.\n */\nexport const LabeledValue = /*#__PURE__*/ forwardRef(function LabeledValue<\n  T extends LabeledValueTypes\n>(props: LabeledValueProps<T>, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props as any, ref, LabeledValueContext) as any;\n  props = useFormProps(props);\n  let {\n    label,\n    value,\n    formatOptions,\n    size = 'M',\n    labelPosition = 'top',\n    labelAlign = 'start',\n    contextualHelp,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles,\n    ...otherProps\n  } = props;\n  let formContext = useContext(FormContext);\n\n  let domRef = useDOMRef(ref);\n  useEffect(() => {\n    if (\n      domRef?.current &&\n      domRef.current.querySelectorAll('input, [contenteditable], textarea').length > 0\n    ) {\n      throw new Error('LabeledValue cannot contain an editable value.');\n    }\n  }, [domRef]);\n\n  let children: ReactNode;\n\n  if (Array.isArray(value)) {\n    children = (\n      <FormattedStringList\n        value={value as string[]}\n        formatOptions={formatOptions as Intl.ListFormatOptions}\n      />\n    );\n  } else if (typeof value === 'number') {\n    children = (\n      <FormattedNumber value={value} formatOptions={formatOptions as Intl.NumberFormatOptions} />\n    );\n  } else if (\n    typeof value === 'object' &&\n    value !== null &&\n    'start' in value &&\n    typeof (value as RangeValue<number>).start === 'number'\n  ) {\n    children = (\n      <FormattedNumber\n        value={value as RangeValue<number>}\n        formatOptions={formatOptions as Intl.NumberFormatOptions}\n      />\n    );\n  } else if (typeof value === 'object' && value !== null && 'start' in value) {\n    children = (\n      <FormattedDate\n        value={value as RangeDateTime}\n        formatOptions={formatOptions as Intl.DateTimeFormatOptions}\n      />\n    );\n  } else if (\n    value instanceof Date ||\n    (typeof value === 'object' && value !== null && ('calendar' in value || 'hour' in value))\n  ) {\n    children = (\n      <FormattedDate\n        value={value as DateTime}\n        formatOptions={formatOptions as Intl.DateTimeFormatOptions}\n      />\n    );\n  } else if (typeof value === 'string') {\n    children = value;\n  } else if (isValidElement(value)) {\n    children = value;\n  }\n\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className +\n        fieldStyles(\n          {\n            isInForm: !!formContext,\n            labelPosition,\n            size\n          },\n          styles\n        )\n      }>\n      <FieldLabel\n        elementType=\"span\"\n        size={size}\n        labelPosition={labelPosition}\n        labelAlign={labelAlign}\n        contextualHelp={contextualHelp}>\n        {label}\n      </FieldLabel>\n      <span className={valueStyles({isInForm: !!formContext, size, labelPosition})}>\n        {children}\n      </span>\n    </div>\n  );\n});\n\nfunction FormattedStringList({\n  value,\n  formatOptions\n}: {\n  value: string[];\n  formatOptions?: Intl.ListFormatOptions;\n}) {\n  let formatter = useListFormatter(formatOptions ?? {});\n  return <>{formatter.format(value)}</>;\n}\n\nfunction FormattedNumber({\n  value,\n  formatOptions\n}: {\n  value: NumberValue;\n  formatOptions?: Intl.NumberFormatOptions;\n}) {\n  let formatter = useNumberFormatter(formatOptions);\n  if (typeof value === 'object') {\n    return <>{formatter.formatRange(value.start, value.end)}</>;\n  }\n  return <>{formatter.format(value)}</>;\n}\n\nfunction FormattedDate<T extends DateTimeValue>({\n  value,\n  formatOptions\n}: {\n  value: T;\n  formatOptions?: Intl.DateTimeFormatOptions;\n}) {\n  if (!formatOptions) {\n    formatOptions = getDefaultFormatOptions(\n      'start' in value ? (value as RangeDateTime).start : (value as DateTime)\n    );\n  }\n\n  let dateFormatter = useDateFormatter(formatOptions);\n  let timeZone = dateFormatter.resolvedOptions().timeZone || getLocalTimeZone();\n\n  if ('start' in value && 'end' in value) {\n    let start = convertDateTime((value as RangeDateTime).start, timeZone);\n    let end = convertDateTime((value as RangeDateTime).end, timeZone);\n    return <>{dateFormatter.formatRange(start, end)}</>;\n  }\n\n  return <>{dateFormatter.format(convertDateTime(value as DateTime, timeZone))}</>;\n}\n\nfunction convertDateTime(value: DateTime, timeZone: string): Date {\n  if ('timeZone' in value) {\n    return (value as ZonedDateTime).toDate();\n  } else if ('calendar' in value) {\n    return (value as CalendarDate | CalendarDateTime).toDate(timeZone);\n  } else if (!(value instanceof Date)) {\n    return toCalendarDateTime(today(getLocalTimeZone()), value as Time).toDate(timeZone);\n  }\n  return value;\n}\n\nfunction getDefaultFormatOptions(value: DateTime): Intl.DateTimeFormatOptions {\n  if (value instanceof Date) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('timeZone' in value) {\n    return {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n      hour: 'numeric',\n      minute: 'numeric',\n      timeZone: (value as ZonedDateTime).timeZone,\n      timeZoneName: 'short'\n    };\n  } else if ('hour' in value && 'year' in value) {\n    return {dateStyle: 'long', timeStyle: 'short'};\n  } else if ('hour' in value) {\n    return {timeStyle: 'short'};\n  } else {\n    return {dateStyle: 'long'};\n  }\n}\n"],"names":[],"version":3,"file":"LabeledValue.css.map"}