@react-spectrum/s2 3.0.0-nightly-6193c40ee-240920 → 3.0.0-nightly-9421c1409-240922

package/dist/Disclosure.css

@@ -0,0 +1,446 @@
+@layer _.a {
+  .ub {
+    border-top-width: 1px;
+  }
+
+  .ua {
+    border-top-width: 0;
+  }
+
+  .va {
+    border-bottom-width: 0;
+  }
+
+  .wa {
+    border-style: solid;
+  }
+
+  .ch {
+    border-color: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
+  }
+
+  .q-ffvo8f {
+    min-width: 12.5rem;
+  }
+
+  .Aa {
+    margin-top: 0;
+  }
+
+  .Ba {
+    margin-bottom: 0;
+  }
+
+  .ya {
+    margin-inline-start: 0;
+  }
+
+  .za {
+    margin-inline-end: 0;
+  }
+
+  ._La {
+    outline-style: none;
+  }
+
+  ._Lb {
+    outline-style: solid;
+  }
+
+  .dx {
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+  }
+
+  ._Nc {
+    outline-width: 2px;
+  }
+
+  ._M-3hmpw {
+    outline-offset: -2px;
+  }
+
+  ._di {
+    font-size: 1.125rem;
+  }
+
+  ._dj {
+    font-size: 1.375rem;
+  }
+
+  ._dn {
+    font-size: 1.75rem;
+  }
+
+  ._ed {
+    font-variation-settings: "wght" 700;
+    font-synthesis-weight: none;
+    font-weight: 700;
+  }
+
+  ._fa {
+    line-height: 1.3;
+  }
+
+  .ao {
+    color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .aj {
+    color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
+  }
+
+  ._Zd {
+    display: flex;
+  }
+
+  ._1d {
+    align-items: baseline;
+  }
+
+  .C-10cd9hn {
+    padding-inline-start: calc(var(--o) * 3 / 8 - 1px);
+  }
+
+  .D-10cd9hn {
+    padding-inline-end: calc(var(--o) * 3 / 8 - 1px);
+  }
+
+  .E-1dbqcch {
+    padding-top: calc((var(--o)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
+  }
+
+  .F-1dbqcch {
+    padding-bottom: calc((var(--o)  - var(--u, 0px)  - var(--v, 0px)  - 1lh) / 2);
+  }
+
+  .i-10cd9hn {
+    row-gap: calc(var(--o) * 3 / 8 - 1px);
+  }
+
+  .j-10cd9hn {
+    column-gap: calc(var(--o) * 3 / 8 - 1px);
+  }
+
+  .o-375tou {
+    min-height: var(--o);
+  }
+
+  .l4 {
+    width: 100%;
+  }
+
+  .ba {
+    background-color: #0000;
+  }
+
+  .b_____k {
+    background-color: #00000017;
+  }
+
+  .u-375tp0 {
+    border-top-width: var(--u);
+  }
+
+  .v-375tp1 {
+    border-bottom-width: var(--v);
+  }
+
+  .sa {
+    border-inline-start-width: 0;
+  }
+
+  .ta {
+    border-inline-end-width: 0;
+  }
+
+  ._va {
+    border-start-start-radius: 0;
+  }
+
+  ._vh {
+    border-start-start-radius: .571429em;
+  }
+
+  ._wa {
+    border-start-end-radius: 0;
+  }
+
+  ._wh {
+    border-start-end-radius: .571429em;
+  }
+
+  ._xa {
+    border-end-start-radius: 0;
+  }
+
+  ._xh {
+    border-end-start-radius: .571429em;
+  }
+
+  ._ya {
+    border-end-end-radius: 0;
+  }
+
+  ._yh {
+    border-end-end-radius: .571429em;
+  }
+
+  ._ja {
+    text-align: start;
+  }
+
+  .__R-yksgrp {
+    -webkit-tap-highlight-color: #0000;
+  }
+
+  .-_375tou_o-m {
+    --o: 1.5rem;
+  }
+
+  .-_375tou_o-q {
+    --o: 2rem;
+  }
+
+  .-_375tou_o-r {
+    --o: 2.5rem;
+  }
+
+  .-_375tou_o-x {
+    --o: 3rem;
+  }
+
+  .-_375tou_o-z {
+    --o: 3.5rem;
+  }
+
+  .-_375tou_o-B {
+    --o: 4rem;
+  }
+
+  .-_375tp0_u-a {
+    --u: 0px;
+  }
+
+  .-_375tp1_v-a {
+    --v: 0px;
+  }
+
+  .R-375xa6 {
+    rotate: 180deg;
+  }
+
+  .R-3hn0u {
+    rotate: 90deg;
+  }
+
+  ._Q-37j0s6 {
+    transition-duration: .1s;
+  }
+
+  .-rwx0fg_e-b {
+    --iconPrimary: currentColor;
+  }
+
+  ._8-3t1x {
+    flex-shrink: 0;
+  }
+
+  ._ca {
+    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._dg {
+    font-size: 1rem;
+  }
+
+  ._eb {
+    font-variation-settings: "wght" 400;
+    font-synthesis-weight: none;
+    font-weight: 400;
+  }
+
+  ._fb {
+    line-height: 1.5;
+  }
+
+  .an {
+    color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .Ed {
+    padding-top: .5rem;
+  }
+
+  .Ff {
+    padding-bottom: 1rem;
+  }
+
+  .Cd {
+    padding-inline-start: .5rem;
+  }
+
+  .C-1ch0ogp {
+    padding-inline-start: .5625rem;
+  }
+
+  .Ce {
+    padding-inline-start: .75rem;
+  }
+
+  .C-1p15uv3 {
+    padding-inline-start: .9375rem;
+  }
+
+  .Dd {
+    padding-inline-end: .5rem;
+  }
+
+  .D-1ch0ogp {
+    padding-inline-end: .5625rem;
+  }
+
+  .De {
+    padding-inline-end: .75rem;
+  }
+
+  .D-1p15uv3 {
+    padding-inline-end: .9375rem;
+  }
+}
+
+@layer _.b {
+  .v-uamghwb:last-child {
+    border-bottom-width: 1px;
+  }
+
+  .v-uamghwa:last-child {
+    border-bottom-width: 0;
+  }
+
+  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    line-height: 1.5;
+  }
+
+  ._c-enzrfpb:lang(ar) {
+    font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._f-1x99dloc:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    line-height: 1.7;
+  }
+}
+
+@layer UNSAFE_overrides;
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    .qb-z005a2 {
+      min-width: 15.625rem;
+    }
+
+    ._dbj {
+      font-size: 1.375rem;
+    }
+
+    ._dbm {
+      font-size: 1.6875rem;
+    }
+
+    ._dbo {
+      font-size: 2.125rem;
+    }
+
+    .-_375tou_o-bn {
+      --o: 1.875rem;
+    }
+
+    .-_375tou_o-br {
+      --o: 2.5rem;
+    }
+
+    .-_375tou_o-bu {
+      --o: 3.125rem;
+    }
+
+    .-_375tou_o-by {
+      --o: 3.75rem;
+    }
+
+    .-_375tou_o-bA {
+      --o: 4.375rem;
+    }
+
+    .-_375tou_o-bC {
+      --o: 5rem;
+    }
+
+    ._dbh {
+      font-size: 1.1875rem;
+    }
+
+    .Cb-1itkwgp {
+      padding-inline-start: .703125rem;
+    }
+
+    .Cb-yk4pb9 {
+      padding-inline-start: 1.17188rem;
+    }
+
+    .Db-1itkwgp {
+      padding-inline-end: .703125rem;
+    }
+
+    .Db-yk4pb9 {
+      padding-inline-end: 1.17188rem;
+    }
+  }
+}
+
+@layer _.c {
+  ._c-enzwzjc:lang(he) {
+    font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer _.d {
+  ._c-enzykdd: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 {
+  ._c-enzzrge:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
+}
+
+@layer _.f {
+  ._c-eo0c6sf:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.g {
+  ._c-1uotwbwg: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 {
+  ._c-bc1l9oh: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.a {
+  @media (forced-colors: active) {
+    .da_____z {
+      outline-color: highlight;
+    }
+  }
+}
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+/*# sourceMappingURL=Disclosure.css.map */

package/dist/Disclosure.css.map

@@ -0,0 +1 @@
+{"mappings":"AC2CmB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmEE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAIA;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4EC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsDF;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAzMD;EAAA;;;;EAAA;;;;EAuEE;;;;EAkID;;;;EAAA;;;;;AAzMD;;AAAA;EAAA;IAAA;;;;IAuEE;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkID;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAlIC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;;;AA4EC","sources":["af82a6f8008c749b","packages/@react-spectrum/s2/src/Disclosure.tsx"],"sourcesContent":["@import \"02b9b02b69a441b2\";\n@import \"80d1cf6aba9342e9\";\n@import \"d47c144c912b2c65\";\n@import \"54c3947845455457\";\n@import \"47e48706d70658de\";\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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';\nimport {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';\nimport {CenterBaseline} from './CenterBaseline';\nimport {centerPadding, focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport Chevron from '../ui-icons/Chevron';\nimport {filterDOMProps} from '@react-aria/utils';\nimport React, {createContext, forwardRef, ReactElement, useContext} from 'react';\nimport {size as sizeValue, style} from '../style/spectrum-theme' with { type: 'macro' };\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface DisclosureProps extends RACDisclosureProps, StyleProps, DOMProps {\n  /**\n   * The size of the disclosure.\n   * @default \"M\"\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of space between the disclosures.\n   * @default \"regular\"\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /** Whether the disclosure should be displayed with a quiet style. */\n  isQuiet?: boolean,\n  /** The contents of the disclosure, consisting of an DisclosureHeader and DisclosurePanel. */\n  children: [ReactElement<DisclosureHeaderProps>, ReactElement<DisclosurePanelProps>]\n}\n\nexport const DisclosureContext = createContext<ContextValue<Omit<DisclosureProps, 'children'>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst disclosure = style({\n  color: 'heading',\n  borderTopWidth: {\n    default: 1,\n    isQuiet: 0\n  },\n  borderBottomWidth: {\n    default: 0,\n    ':last-child': {\n      default: 1,\n      isQuiet: 0\n    }\n  },\n  borderStartWidth: 0,\n  borderEndWidth: 0,\n  borderStyle: 'solid',\n  borderColor: 'gray-200',\n  minWidth: sizeValue(200)\n}, getAllowedOverrides());\n\nfunction Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);\n  let {\n    size = 'M',\n    density = 'regular',\n    isQuiet, isDisabled\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  const domProps = filterDOMProps(otherProps);\n\n  return (\n    <Provider\n      values={[\n        [DisclosureContext, {size, isQuiet, density, isDisabled}]\n      ]}>\n      <RACDisclosure\n        {...domProps}\n        isDisabled={isDisabled}\n        ref={domRef}\n        style={UNSAFE_style}\n        className={(UNSAFE_className ?? '') + disclosure({isQuiet}, props.styles)}>\n        {props.children}\n      </RACDisclosure>\n    </Provider>\n  );\n}\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.\n */\nlet _Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(Disclosure);\nexport {_Disclosure as Disclosure};\n\nexport interface DisclosureHeaderProps extends UnsafeStyles, DOMProps {\n  /** The heading level of the disclosure header.\n   * \n   * @default 3\n   */\n  level?: number,\n  children: React.ReactNode\n}\n\nconst headingStyle = style({\n  margin: 0\n});\n\nconst buttonStyles = style({\n  ...focusRing(),\n  outlineOffset: -2,\n  font: 'heading',\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled'\n  },\n  fontWeight: 'bold',\n  fontSize: {\n    size: {\n      S: 'heading-xs',\n      M: 'heading-sm',\n      L: 'heading',\n      XL: 'heading-lg'\n    }\n  },\n  lineHeight: 'ui',\n  display: 'flex',\n  alignItems: 'baseline',\n  paddingX: '[calc(self(minHeight) * 3/8 - 1px)]',\n  paddingY: centerPadding(),\n  gap: '[calc(self(minHeight) * 3/8 - 1px)]',\n  minHeight: {\n    // compact is equivalent to 'control', but other densities have more padding.\n    size: {\n      S: {\n        density: {\n          compact: 24,\n          regular: 32,\n          spacious: 40\n        }\n      },\n      M: {\n        density: {\n          compact: 32,\n          regular: 40,\n          spacious: 48\n        }\n      },\n      L: {\n        density: {\n          compact: 40,\n          regular: 48,\n          spacious: 56\n        }\n      },\n      XL: {\n        density: {\n          compact: 48,\n          regular: 56,\n          spacious: 64\n        }\n      }\n    }\n  },\n  width: 'full',\n  backgroundColor: {\n    default: 'transparent',\n    isFocusVisible: 'transparent-black-100',\n    isHovered: 'transparent-black-100'\n  },\n  borderWidth: 0,\n  borderRadius: {\n    // Only rounded for keyboard focus and quiet hover.\n    default: 'none',\n    isFocusVisible: 'control',\n    isQuiet: {\n      isHovered: 'control',\n      isFocusVisible: 'control'\n    }\n  },\n  textAlign: 'start',\n  disableTapHighlight: true\n});\n\nconst chevronStyles = style({\n  rotate: {\n    isRTL: 180,\n    isExpanded: 90\n  },\n  transitionDuration: '100ms',\n  transitionProperty: 'rotate',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  flexShrink: 0\n});\n\nfunction DisclosureHeader(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    level = 3,\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  const domProps = filterDOMProps(otherProps);\n  let {direction} = useLocale();\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let {size, density, isQuiet} = useSlottedContext(DisclosureContext)!;\n  let isRTL = direction === 'rtl';\n  return (\n    <Heading\n      {...domProps}\n      level={level}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + headingStyle}>\n      <Button className={({isHovered, isFocused, isFocusVisible, isDisabled}) => buttonStyles({size, isHovered, isFocused, isFocusVisible, density, isQuiet, isDisabled})} slot=\"trigger\">\n        <CenterBaseline>\n          <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden=\"true\" />\n        </CenterBaseline>\n        {props.children}\n      </Button>\n    </Heading>\n  );\n}\n\n/**\n * A header for a disclosure. Contains a heading and a trigger button to expand/collapse the panel.\n */\nlet _DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeader);\nexport {_DisclosureHeader as DisclosureHeader};\n\nexport interface DisclosurePanelProps extends RACDisclosurePanelProps, UnsafeStyles, DOMProps, AriaLabelingProps {\n  children: React.ReactNode\n}\n\nconst panelStyles = style({\n  font: 'body',\n  paddingTop: {\n    isExpanded: 8\n  },\n  paddingBottom: {\n    isExpanded: 16\n  },\n  paddingX: {\n    isExpanded: {\n      size: {\n        S: 8,\n        M: sizeValue(9),\n        L: 12,\n        XL: sizeValue(15)\n      }\n    }\n  }\n});\n\nfunction DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    UNSAFE_style,\n    UNSAFE_className = '',\n    ...otherProps\n  } = props;\n  const domProps = filterDOMProps(otherProps);\n  let {size} = useSlottedContext(DisclosureContext)!;\n  let {isExpanded} = useContext(DisclosureStateContext)!;\n  let panelRef = useDOMRef(ref);\n  return (\n    <RACDisclosurePanel\n      {...domProps}\n      ref={panelRef}\n      style={UNSAFE_style}\n      className={(UNSAFE_className ?? '') + panelStyles({size, isExpanded})}>\n      {props.children}\n    </RACDisclosurePanel>\n  );\n}\n\n/**\n * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.\n */\nlet _DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosurePanel);\nexport {_DisclosurePanel as DisclosurePanel};\n\n"],"names":[],"version":3,"file":"Disclosure.css.map"}