@planningcenter/tapestry 1.4.1-rc.1 → 1.4.1-rc.2

package/react-types/index.d.ts

@@ -195,199 +195,3 @@ If the `label` prop is provided, it will be used to generate a header for the se
     }
   }
 }
-
-declare module "react" {
-  namespace JSX {
-    interface IntrinsicElements {
-      /**
-        * The page header displays the title and any additional metadata and navigation.
-        * @example How to use it
-        * ```html
-        * <tds-page-header>
-        * <h1>Title</h1>
-        * 
-        * <div slot="actions">
-        * <button>Button</button>
-        * </div>
-        * </tds-page-header>
-        * ```
-        * @slot - The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.
-        * @slot actions - Additional content (typically actions) that complements the primary slot.
-        * @slot navigation - For page header with navigation, this slot is for the nav.
-        * @cssprop --tds-page-header-background-color - Background color of the header.
-        * @cssprop --tds-page-header-background-color-inactive - Background color of inactive headers.
-        * @cssprop --tds-page-header-color - Color of any meta text.
-        * @cssprop --tds-page-header-headline-color - Color of the page header h1.
-        * @cssprop --tds-page-header-padding-x - Horizontal padding of the header.
-        * @cssprop --tds-page-header-padding-y - Vertical padding of the header.
-        * @cssprop --tds-page-header-nav-item-padding-x: {var(--t-spacing-1)} - Horizontal padding for the tab.
-        * @cssprop --tds-page-header-nav-item-padding-y: {var(--t-spacing-1)} - Vertical padding for the tab.
-        * @cssprop --tds-page-header-nav-item-color: {var(--t-text-color-default-primary)} - Text color for the tab.
-        * @cssprop --tds-page-header-nav-item-background-color: {var(--t-fill-color-transparency-light-060)} - Background color for the tab.
-        * @cssprop --tds-page-header-nav-item-border-width: {0} - Border width for the tab.
-        * @cssprop --tds-page-header-nav-item-border-color: {var(--tds-page-header-nav-item-background-color)} - Border color for the tab.
-        * @cssprop --tds-page-header-nav-item-border-bottom-color: {var(--t-border-color-default-base)} - Border bottom color for the tab.
-        * @cssprop --tds-page-header-nav-item-color-hover: {var(--tds-page-header-nav-item-color)} - Text color for the tab on hover.
-        * @cssprop --tds-page-header-nav-item-background-color-hover: {var(--t-fill-color-neutral-080)} - Background color for the tab on hover.
-        * @cssprop --tds-page-header-nav-item-border-color-hover: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on hover.
-        * @cssprop --tds-page-header-nav-item-background-color-active: {var(--t-fill-color-neutral-060)} - Background color for the tab on active.
-        * @cssprop --tds-page-header-nav-item-border-color-active: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on active.
-        * @cssprop --tds-page-header-nav-item-color-disabled: {var(--t-text-color-default-disabled)} - Text color for the tab on disabled.
-        * @cssprop --tds-page-header-nav-item-background-color-disabled: {var(--t-fill-color-neutral-080)} - Background color for the tab on disabled.
-        * @cssprop --tds-page-header-nav-item-border-color-disabled: {var(--tds-page-header-nav-item-background-color-disabled)} - Border color for the tab on disabled.
-        * @cssprop --tds-page-header-nav-item-color-selected: {var(--t-text-color-default-primary)} - Text color for the tab on selected.
-        * @cssprop --tds-page-header-nav-item-border-color-selected: {var(--t-border-color-default-base)} - Border color for the tab on selected.
-        * @cssprop --tds-page-header-nav-item-background-color-selected: {var(--t-fill-color-neutral-100)} - Background color for the tab on selected.
-        * @cssprop --tds-page-header-nav-item-border-bottom-color-selected: {var(--tds-page-header-nav-item-background-color-selected)} - Border bottom color for the tab on selected.
-        */
-      "tds-page-header": {
-        /**
-         * Indicates whether the page header is inactive or not.
-         * When set to true, the page header is visually inactive
-         * @prop {boolean} inactive - Controls the inactive state of the page. Defaults to false.
-         */
-        "inactive"?: boolean
-        /**
-         * Indicates whether the page header is a profile page header or not.
-         * When set to true, the page header will visually center the title and actions at mobile breakpoints.
-         */
-        "profile"?: boolean
-        "class"?: string
-      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
-      /**
-        * 
-        */
-      "tds-page-header-nav": {
-        "class"?: string
-      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
-      /**
-        * 
-        * @slot - Default slot for placing content inside the popovercontainer.
-        */
-      "tds-popover-container": {
-        /**
-         * Automatically position the popover above or below the trigger element based on the available space.
-         * The area beneath the trigger element is given a 48px bias towards positioning below.
-         */
-        "autoPosition"?: boolean
-        "class"?: string
-      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
-      /**
-        * The sidenav lets users navigate through subsets of data pertaining to a resource.
-It can be used in addition to the page header navigation, as secondary navigation.
-
-The expected structure of a `tds-sidenav` is:
-`<tds-sidenav> > <tds-sidenav-section> > <tds-sidenav-item>`
-If more depth is needed, the `tds-sidenav-item` can have a `subnav` slot that nests a `tds-sidenav-section`.
-`<tds-sidenav> > <tds-sidenav-section> > <tds-sidenav-item> > <button> + <tds-sidenav-section slot="subnav"> > <tds-sidenav-item> `
-
-Please refer to each component's documentation for more information on how to use them.
-        * @slot - The default slot used to nest`tds-sidenav-section` components.
-        * @cssprop --tds-sidenav-item-background - Background color for item (default: transparent)
-        * @cssprop --tds-sidenav-item-background-hover - Background color for hover state (default: var(--t-fill-color-neutral-080))
-        * @cssprop --tds-sidenav-item-background-active - Background color for active state (default: var(--t-fill-color-neutral-070))
-        * @cssprop --tds-sidenav-item-background-selected - Background color for selected state (default: var(--t-fill-color-neutral-050))
-        * @cssprop --tds-sidenav-item-nested-border-color - Border color for nested items (default: var(--t-fill-color-neutral-050))
-        * @cssprop --tds-sidenav-item-nested-border-color-hover - Border color for nested items in hover state (default: var(--t-fill-color-neutral-010))
-        * @cssprop --tds-sidenav-item-nested-border-color-selected - Border color for nested items in selected state (default: var(--t-fill-color-neutral-010))
-        * @cssprop --tds-sidenav-item-icon-color - Color for item icons (default: var(--t-icon-color-default-secondary))
-        * @cssprop --tds-sidenav-item-icon-color-selected - Color for selected item icons (default: var(--t-icon-color-default-primary))
-        * @cssprop --tds-sidenav-indent - Internal: The indentation spacing for nested items (default: 12px)
-        * @cssprop --tds-sidenav-item-depth - Internal: The current nesting depth of items (default: 0)
-        * @cssprop --tds-sidenav-item-transition - Internal: The transition timing for item state changes (default: background-color .2s cubic-bezier(.19, .91, .38, 1))
-        */
-      "tds-sidenav": {
-        /**
-         * The label for the sidenav, used for accessibility.
-         */
-        "label"?: string
-        /**
-         * The label for the `tds-sidenav-responsive-header`, corresponds to the selected item in the sidenav.
-         */
-        "selectedItemLabel"?: string
-        "class"?: string
-      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
-      /**
-        * The `tds-sidenav-item` component is used to display a single item in the sidenav.
-The slotted content should be a link or button without any classes or styles applied.
-        * @example ```html
-        * <tds-sidenav-item>
-        *  <a href="#">Home</a>
-        * </tds-sidenav-item>
-        * 
-        * <tds-sidenav-item>
-        *  <button>Foo</button>
-        *   <tds-sidenav-section slot="subnav">
-        *     <tds-sidenav-item><a href="#">Nested Link</a></tds-sidenav-item>
-        *   </tds-sidenav-section>
-        * </tds-sidenav-item>
-        * ```
-        * @slot - The default slot is used to display the sidenav item link or button.
-        * @slot subnav - The subnav slot is used to display a nested subnav menu. The slotted content should be a `tds-sidenav-section` component.
-        */
-      "tds-sidenav-item": {
-        /**
-         * Whether the sidenav item is selected.
-         */
-        "selected"?: boolean
-        "class"?: string
-      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
-      /**
-        * UNSTABLE: This component is currently in development and subject to change.
-Provides a collapsible sidenav item.
-        * @slot prefix - The prefix slot is used to display an icon or other content before the label.
-        * @slot suffix - The suffix slot is used to display an icon or other content after the label.
-        * @slot subnav - The subnav slot is used to display a nested subnav menu. Should be a `tds-sidenav-section` component.
-        */
-      "tds-sidenav-item-collapsible": {
-        /**
-         * Indicates whether the sidenav item is collapsed or not.
-         */
-        "collapsed"?: boolean
-        /**
-         * The label of the sidenav item.
-         */
-        "label"?: string
-        "class"?: string
-      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
-      /**
-        * The `tds-sidenav-popover` component is used as part of the `tds-sidenav` component to display a popover for the sidenav.
-It wraps the `tds-popover-container` primitive element, and is not intended to be used as a standalone component.
-        * @slot - The default slot is used to display the wrapped content.
-        */
-      "tds-sidenav-popover": {
-        /**
-         * Maximum screen width at which the popover will be displayed
-         */
-        "popoverMaxScreenWidth"?: string
-        "class"?: string
-      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
-      /**
-        * Provides a toggle to display the sidenav popover and current item for the sidenav on smaller viewports.
-
-It is included inside `tds-sidenav` and is not intended to be used as a standalone component.
-        */
-      "tds-sidenav-responsive-header": {
-        /**
-         * The label for the sidenav header
-         */
-        "label"?: string
-        "class"?: string
-      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
-      /**
-        * The `tds-sidenav-section` component is used to display a section of the sidenav.
-All `tds-sidenav-item` components should be nested within a `tds-sidenav-section`.
-
-If the `label` prop is provided, it will be used to generate a header for the section, and the section will be labelled by the `aria-labelledby` attribute.
-        * @slot - The default slot is used to nest `tds-sidenav-item` components.
-        */
-      "tds-sidenav-section": {
-        /**
-         * The label for the section.
-         */
-        "label"?: string
-        "class"?: string
-      } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "className">
-    }
-  }
-}