From 87454bc254769943fc255edcf733edf175a7f502 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Mon, 9 Jun 2025 11:09:37 -0500 Subject: [PATCH] syncing with repo --- docs/assets/examples/layouts/ecommerce-1.html | 62 ------------ .../assets/examples/page/ecommerce-1.html | 62 ------------ .../src/react/animated-image/index.ts | 41 -------- .../webawesome/src/react/animation/index.ts | 36 ------- packages/webawesome/src/react/avatar/index.ts | 42 -------- packages/webawesome/src/react/badge/index.ts | 29 ------ .../src/react/breadcrumb-item/index.ts | 32 ------- .../webawesome/src/react/breadcrumb/index.ts | 28 ------ .../src/react/button-group/index.ts | 25 ----- packages/webawesome/src/react/button/index.ts | 57 ----------- .../webawesome/src/react/callout/index.ts | 31 ------ packages/webawesome/src/react/card/index.ts | 37 -------- .../src/react/carousel-item/index.ts | 26 ----- .../webawesome/src/react/carousel/index.ts | 53 ----------- .../webawesome/src/react/checkbox/index.ts | 61 ------------ .../src/react/color-picker/index.ts | 86 ----------------- .../webawesome/src/react/comparison/index.ts | 42 -------- .../webawesome/src/react/copy-button/index.ts | 52 ---------- .../webawesome/src/react/details/index.ts | 55 ----------- packages/webawesome/src/react/dialog/index.ts | 62 ------------ .../webawesome/src/react/divider/index.ts | 25 ----- packages/webawesome/src/react/drawer/index.ts | 67 ------------- .../webawesome/src/react/dropdown/index.ts | 47 --------- .../src/react/format-bytes/index.ts | 21 ---- .../webawesome/src/react/format-date/index.ts | 21 ---- .../src/react/format-number/index.ts | 21 ---- packages/webawesome/src/react/icon/index.ts | 39 -------- .../webawesome/src/react/include/index.ts | 31 ------ packages/webawesome/src/react/index.ts | 59 ------------ packages/webawesome/src/react/input/index.ts | 61 ------------ .../webawesome/src/react/menu-item/index.ts | 46 --------- .../webawesome/src/react/menu-label/index.ts | 23 ----- packages/webawesome/src/react/menu/index.ts | 33 ------- .../src/react/mutation-observer/index.ts | 31 ------ packages/webawesome/src/react/option/index.ts | 41 -------- packages/webawesome/src/react/page/index.ts | 64 ------------- packages/webawesome/src/react/popup/index.ts | 52 ---------- .../src/react/progress-bar/index.ts | 30 ------ .../src/react/progress-ring/index.ts | 33 ------- .../webawesome/src/react/qr-code/index.ts | 23 ----- .../webawesome/src/react/radio-group/index.ts | 44 --------- packages/webawesome/src/react/radio/index.ts | 46 --------- packages/webawesome/src/react/rating/index.ts | 40 -------- .../src/react/relative-time/index.ts | 21 ---- .../src/react/resize-observer/index.ts | 31 ------ .../webawesome/src/react/scroller/index.ts | 29 ------ packages/webawesome/src/react/select/index.ts | 95 ------------------- .../webawesome/src/react/skeleton/index.ts | 27 ------ packages/webawesome/src/react/slider/index.ts | 70 -------------- .../webawesome/src/react/spinner/index.ts | 28 ------ .../webawesome/src/react/split-panel/index.ts | 45 --------- packages/webawesome/src/react/switch/index.ts | 56 ----------- .../webawesome/src/react/tab-group/index.ts | 52 ---------- .../webawesome/src/react/tab-panel/index.ts | 27 ------ packages/webawesome/src/react/tab/index.ts | 27 ------ packages/webawesome/src/react/tag/index.ts | 38 -------- .../webawesome/src/react/textarea/index.ts | 49 ---------- .../webawesome/src/react/tooltip/index.ts | 49 ---------- .../webawesome/src/react/tree-item/index.ts | 89 ----------------- packages/webawesome/src/react/tree/index.ts | 44 --------- 60 files changed, 2594 deletions(-) delete mode 100644 docs/assets/examples/layouts/ecommerce-1.html delete mode 100644 packages/webawesome/docs/assets/examples/page/ecommerce-1.html delete mode 100644 packages/webawesome/src/react/animated-image/index.ts delete mode 100644 packages/webawesome/src/react/animation/index.ts delete mode 100644 packages/webawesome/src/react/avatar/index.ts delete mode 100644 packages/webawesome/src/react/badge/index.ts delete mode 100644 packages/webawesome/src/react/breadcrumb-item/index.ts delete mode 100644 packages/webawesome/src/react/breadcrumb/index.ts delete mode 100644 packages/webawesome/src/react/button-group/index.ts delete mode 100644 packages/webawesome/src/react/button/index.ts delete mode 100644 packages/webawesome/src/react/callout/index.ts delete mode 100644 packages/webawesome/src/react/card/index.ts delete mode 100644 packages/webawesome/src/react/carousel-item/index.ts delete mode 100644 packages/webawesome/src/react/carousel/index.ts delete mode 100644 packages/webawesome/src/react/checkbox/index.ts delete mode 100644 packages/webawesome/src/react/color-picker/index.ts delete mode 100644 packages/webawesome/src/react/comparison/index.ts delete mode 100644 packages/webawesome/src/react/copy-button/index.ts delete mode 100644 packages/webawesome/src/react/details/index.ts delete mode 100644 packages/webawesome/src/react/dialog/index.ts delete mode 100644 packages/webawesome/src/react/divider/index.ts delete mode 100644 packages/webawesome/src/react/drawer/index.ts delete mode 100644 packages/webawesome/src/react/dropdown/index.ts delete mode 100644 packages/webawesome/src/react/format-bytes/index.ts delete mode 100644 packages/webawesome/src/react/format-date/index.ts delete mode 100644 packages/webawesome/src/react/format-number/index.ts delete mode 100644 packages/webawesome/src/react/icon/index.ts delete mode 100644 packages/webawesome/src/react/include/index.ts delete mode 100644 packages/webawesome/src/react/index.ts delete mode 100644 packages/webawesome/src/react/input/index.ts delete mode 100644 packages/webawesome/src/react/menu-item/index.ts delete mode 100644 packages/webawesome/src/react/menu-label/index.ts delete mode 100644 packages/webawesome/src/react/menu/index.ts delete mode 100644 packages/webawesome/src/react/mutation-observer/index.ts delete mode 100644 packages/webawesome/src/react/option/index.ts delete mode 100644 packages/webawesome/src/react/page/index.ts delete mode 100644 packages/webawesome/src/react/popup/index.ts delete mode 100644 packages/webawesome/src/react/progress-bar/index.ts delete mode 100644 packages/webawesome/src/react/progress-ring/index.ts delete mode 100644 packages/webawesome/src/react/qr-code/index.ts delete mode 100644 packages/webawesome/src/react/radio-group/index.ts delete mode 100644 packages/webawesome/src/react/radio/index.ts delete mode 100644 packages/webawesome/src/react/rating/index.ts delete mode 100644 packages/webawesome/src/react/relative-time/index.ts delete mode 100644 packages/webawesome/src/react/resize-observer/index.ts delete mode 100644 packages/webawesome/src/react/scroller/index.ts delete mode 100644 packages/webawesome/src/react/select/index.ts delete mode 100644 packages/webawesome/src/react/skeleton/index.ts delete mode 100644 packages/webawesome/src/react/slider/index.ts delete mode 100644 packages/webawesome/src/react/spinner/index.ts delete mode 100644 packages/webawesome/src/react/split-panel/index.ts delete mode 100644 packages/webawesome/src/react/switch/index.ts delete mode 100644 packages/webawesome/src/react/tab-group/index.ts delete mode 100644 packages/webawesome/src/react/tab-panel/index.ts delete mode 100644 packages/webawesome/src/react/tab/index.ts delete mode 100644 packages/webawesome/src/react/tag/index.ts delete mode 100644 packages/webawesome/src/react/textarea/index.ts delete mode 100644 packages/webawesome/src/react/tooltip/index.ts delete mode 100644 packages/webawesome/src/react/tree-item/index.ts delete mode 100644 packages/webawesome/src/react/tree/index.ts diff --git a/docs/assets/examples/layouts/ecommerce-1.html b/docs/assets/examples/layouts/ecommerce-1.html deleted file mode 100644 index cc58c6a74..000000000 --- a/docs/assets/examples/layouts/ecommerce-1.html +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - Document - - - - - - - - - Get in on our holiday - deals! - -
- - - -
-
Footer
- - - - \ No newline at end of file diff --git a/packages/webawesome/docs/assets/examples/page/ecommerce-1.html b/packages/webawesome/docs/assets/examples/page/ecommerce-1.html deleted file mode 100644 index cc58c6a74..000000000 --- a/packages/webawesome/docs/assets/examples/page/ecommerce-1.html +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - Document - - - - - - - - - Get in on our holiday - deals! - -
- - - -
-
Footer
- - - - \ No newline at end of file diff --git a/packages/webawesome/src/react/animated-image/index.ts b/packages/webawesome/src/react/animated-image/index.ts deleted file mode 100644 index f4f8f7c20..000000000 --- a/packages/webawesome/src/react/animated-image/index.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/animated-image/animated-image.js'; - -import { type EventName } from '@lit/react'; -import type { WaErrorEvent, WaLoadEvent } from '../../events/events.js'; -export type { WaErrorEvent, WaLoadEvent } from '../../events/events.js'; - -const tagName = 'wa-animated-image'; - -/** - * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction. - * @documentation https://backers.webawesome.com/docs/components/animated-image - * @status stable - * @since 2.0 - * - * @dependency wa-icon - * - * @event wa-load - Emitted when the image loads successfully. - * @event wa-error - Emitted when the image fails to load. - * - * @slot play-icon - Optional play icon to use instead of the default. Works best with ``. - * @slot pause-icon - Optional pause icon to use instead of the default. Works best with ``. - * - * @csspart control-box - The container that surrounds the pause/play icons and provides their background. - * - * @cssproperty --control-box-size - The size of the icon box. - * @cssproperty --icon-size - The size of the play/pause icons. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: { - onWaLoad: 'wa-load' as EventName, - onWaError: 'wa-error' as EventName, - }, - displayName: 'WaAnimatedImage', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/animation/index.ts b/packages/webawesome/src/react/animation/index.ts deleted file mode 100644 index 626dc436b..000000000 --- a/packages/webawesome/src/react/animation/index.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/animation/animation.js'; - -import { type EventName } from '@lit/react'; -import type { WaCancelEvent, WaFinishEvent, WaStartEvent } from '../../events/events.js'; -export type { WaCancelEvent, WaFinishEvent, WaStartEvent } from '../../events/events.js'; - -const tagName = 'wa-animation'; - -/** - * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). - * @documentation https://backers.webawesome.com/docs/components/animation - * @status stable - * @since 2.0 - * - * @event wa-cancel - Emitted when the animation is canceled. - * @event wa-finish - Emitted when the animation finishes. - * @event wa-start - Emitted when the animation starts or restarts. - * - * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To - * animate multiple elements, either wrap them in a single container or use multiple `` elements. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: { - onWaCancel: 'wa-cancel' as EventName, - onWaFinish: 'wa-finish' as EventName, - onWaStart: 'wa-start' as EventName, - }, - displayName: 'WaAnimation', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/avatar/index.ts b/packages/webawesome/src/react/avatar/index.ts deleted file mode 100644 index 1e44b9632..000000000 --- a/packages/webawesome/src/react/avatar/index.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/avatar/avatar.js'; - -import { type EventName } from '@lit/react'; -import type { WaErrorEvent } from '../../events/events.js'; -export type { WaErrorEvent } from '../../events/events.js'; - -const tagName = 'wa-avatar'; - -/** - * @summary Avatars are used to represent a person or object. - * @documentation https://backers.webawesome.com/docs/components/avatar - * @status stable - * @since 2.0 - * - * @dependency wa-icon - * - * @slot icon - The default icon to use when no image or initials are present. Works best with ``. - * - * @event wa-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some - * unknown cause. - * - * @csspart icon - The container that wraps the avatar's icon. - * @csspart initials - The container that wraps the avatar's initials. - * @csspart image - The avatar image. Only shown when the `image` attribute is set. - * - * @cssproperty --background-color - The avatar's background color. - * @cssproperty --text-color - The color of the avatar's content. - * @cssproperty --size - The size of the avatar. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: { - onWaError: 'wa-error' as EventName, - }, - displayName: 'WaAvatar', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/badge/index.ts b/packages/webawesome/src/react/badge/index.ts deleted file mode 100644 index b5f36a1ba..000000000 --- a/packages/webawesome/src/react/badge/index.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/badge/badge.js'; - -const tagName = 'wa-badge'; - -/** - * @summary Badges are used to draw attention and display statuses or counts. - * @documentation https://backers.webawesome.com/docs/components/badge - * @status stable - * @since 2.0 - * - * @slot - The badge's content. - * - * @csspart base - The component's base wrapper. - * - * @cssproperty --background-color - The badge's background color. - * @cssproperty --border-color - The color of the badge's border. - * @cssproperty --text-color - The color of the badge's content. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: {}, - displayName: 'WaBadge', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/breadcrumb-item/index.ts b/packages/webawesome/src/react/breadcrumb-item/index.ts deleted file mode 100644 index bdc399dab..000000000 --- a/packages/webawesome/src/react/breadcrumb-item/index.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/breadcrumb-item/breadcrumb-item.js'; - -const tagName = 'wa-breadcrumb-item'; - -/** - * @summary Breadcrumb Items are used inside [breadcrumbs](/docs/components/breadcrumb) to represent different links. - * @documentation https://backers.webawesome.com/docs/components/breadcrumb-item - * @status stable - * @since 2.0 - * - * @slot - The breadcrumb item's label. - * @slot prefix - An optional prefix, usually an icon. - * @slot suffix - An optional suffix, usually an icon. - * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If - * you want to change it for all items in the group, set the separator on `` instead. - * - * @csspart label - The breadcrumb item's label. - * @csspart prefix - The container that wraps the prefix. - * @csspart suffix - The container that wraps the suffix. - * @csspart separator - The container that wraps the separator. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: {}, - displayName: 'WaBreadcrumbItem', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/breadcrumb/index.ts b/packages/webawesome/src/react/breadcrumb/index.ts deleted file mode 100644 index 6180282aa..000000000 --- a/packages/webawesome/src/react/breadcrumb/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/breadcrumb/breadcrumb.js'; - -const tagName = 'wa-breadcrumb'; - -/** - * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy. - * @documentation https://backers.webawesome.com/docs/components/breadcrumb - * @status stable - * @since 2.0 - * - * @slot - One or more breadcrumb items to display. - * @slot separator - The separator to use between breadcrumb items. Works best with ``. - * - * @dependency wa-icon - * - * @csspart base - The component's base wrapper. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: {}, - displayName: 'WaBreadcrumb', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/button-group/index.ts b/packages/webawesome/src/react/button-group/index.ts deleted file mode 100644 index fa64e15ee..000000000 --- a/packages/webawesome/src/react/button-group/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/button-group/button-group.js'; - -const tagName = 'wa-button-group'; - -/** - * @summary Button groups can be used to group related buttons into sections. - * @documentation https://backers.webawesome.com/docs/components/button-group - * @status stable - * @since 2.0 - * - * @slot - One or more `` elements to display in the button group. - * - * @csspart base - The component's base wrapper. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: {}, - displayName: 'WaButtonGroup', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/button/index.ts b/packages/webawesome/src/react/button/index.ts deleted file mode 100644 index 85e973b15..000000000 --- a/packages/webawesome/src/react/button/index.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/button/button.js'; - -import { type EventName } from '@lit/react'; -import type { WaInvalidEvent } from '../../events/events.js'; -export type { WaInvalidEvent } from '../../events/events.js'; - -const tagName = 'wa-button'; - -/** - * @summary Buttons represent actions that are available to the user. - * @documentation https://backers.webawesome.com/docs/components/button - * @status stable - * @since 2.0 - * - * @dependency wa-icon - * @dependency wa-spinner - * - * @event blur - Emitted when the button loses focus. - * @event focus - Emitted when the button gains focus. - * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied. - * - * @slot - The button's label. - * @slot prefix - A presentational prefix icon or similar element. - * @slot suffix - A presentational suffix icon or similar element. - * - * @csspart base - The component's base wrapper. - * @csspart prefix - The container that wraps the prefix. - * @csspart label - The button's label. - * @csspart suffix - The container that wraps the suffix. - * @csspart caret - The button's caret icon, a `` element. - * @csspart spinner - The spinner that shows when the button is in the loading state. - * - * @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part. - * @cssproperty --background-color - The button's background color when the button is not being interacted with. - * @cssproperty --background-color-active - The button's background color when active. - * @cssproperty --background-color-hover - The button's background color on hover. - * @cssproperty --border-color - The color of the button's border when the button is not being interacted with. - * @cssproperty --border-color-active - The color of the button's border when active. - * @cssproperty --border-color-hover - The color of the button's border on hover. - * @cssproperty --box-shadow - The shadow effects around the edges of the button. - * @cssproperty --text-color - The color of the button's label when the button is not being interacted with. - * @cssproperty --text-color-active - The color of the button's label when active. - * @cssproperty --text-color-hover - The color of the button's label on hover. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: { - onWaInvalid: 'wa-invalid' as EventName, - }, - displayName: 'WaButton', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/callout/index.ts b/packages/webawesome/src/react/callout/index.ts deleted file mode 100644 index 3727f46c3..000000000 --- a/packages/webawesome/src/react/callout/index.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/callout/callout.js'; - -const tagName = 'wa-callout'; - -/** - * @summary Callouts are used to display important messages inline. - * @documentation https://backers.webawesome.com/docs/components/callout - * @status stable - * @since 2.0 - * - * @slot - The callout's main content. - * @slot icon - An icon to show in the callout. Works best with ``. - * - * @csspart icon - The container that wraps the optional icon. - * @csspart message - The container that wraps the callout's main content. - * - * @cssproperty --icon-color - The color of the callout's icon. - * @cssproperty --icon-size - The size of the callout's icon. - * @cssproperty --spacing - The amount of space around and between the callout's content. Expects a single value. If you want different spacing around and between the content, use `padding` on the callout itself. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: {}, - displayName: 'WaCallout', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/card/index.ts b/packages/webawesome/src/react/card/index.ts deleted file mode 100644 index de7da4c9e..000000000 --- a/packages/webawesome/src/react/card/index.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/card/card.js'; - -const tagName = 'wa-card'; - -/** - * @summary Cards can be used to group related subjects in a container. - * @documentation https://backers.webawesome.com/docs/components/card - * @status stable - * @since 2.0 - * - * @slot - The card's main content. - * @slot header - An optional header for the card. - * @slot footer - An optional footer for the card. - * @slot media - An optional media section to render at the start of the card. - * - * @csspart media - The container that wraps the card's media. - * @csspart header - The container that wraps the card's header. - * @csspart body - The container that wraps the card's main content. - * @csspart footer - The container that wraps the card's footer. - * - * @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value. - * @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders. Expects a single value. - * @cssproperty [--inner-border-color=var(--wa-color-surface-border)] - The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value. - * @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value. - * @cssproperty [--spacing=var(--wa-space-l)] - The amount of space around and between sections of the card. Expects a single value. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: {}, - displayName: 'WaCard', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/carousel-item/index.ts b/packages/webawesome/src/react/carousel-item/index.ts deleted file mode 100644 index 3202f6dff..000000000 --- a/packages/webawesome/src/react/carousel-item/index.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/carousel-item/carousel-item.js'; - -const tagName = 'wa-carousel-item'; - -/** - * @summary A carousel item represent a slide within a [carousel](/docs/components/carousel). - * - * @since 2.0 - * @status experimental - * - * @slot - The carousel item's content.. - * - * @cssproperty --aspect-ratio - The slide's aspect ratio. Inherited from the carousel by default. - * - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: {}, - displayName: 'WaCarouselItem', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/carousel/index.ts b/packages/webawesome/src/react/carousel/index.ts deleted file mode 100644 index a5f47c2c8..000000000 --- a/packages/webawesome/src/react/carousel/index.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/carousel/carousel.js'; - -import { type EventName } from '@lit/react'; -import type { WaSlideChangeEvent } from '../../events/events.js'; -export type { WaSlideChangeEvent } from '../../events/events.js'; - -const tagName = 'wa-carousel'; - -/** - * @summary Carousels display an arbitrary number of content slides along a horizontal or vertical axis. - * - * @since 2.2 - * @status experimental - * - * @dependency wa-icon - * - * @event {{ index: number, slide: WaCarouselItem }} wa-slide-change - Emitted when the active slide changes. - * - * @slot - The carousel's main content, one or more `` elements. - * @slot next-icon - Optional next icon to use instead of the default. Works best with ``. - * @slot previous-icon - Optional previous icon to use instead of the default. Works best with ``. - * - * @csspart base - The carousel's internal wrapper. - * @csspart scroll-container - The scroll container that wraps the slides. - * @csspart pagination - The pagination indicators wrapper. - * @csspart pagination-item - The pagination indicator. - * @csspart pagination-item-active - Applied when the item is active. - * @csspart navigation - The navigation wrapper. - * @csspart navigation-button - The navigation button. - * @csspart navigation-button-previous - Applied to the previous button. - * @csspart navigation-button-next - Applied to the next button. - * - * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide. - * @cssproperty --navigation-color - The color of the navigation arrows. - * @cssproperty --pagination-color - The color of the dots indicating the number of slides. - * @cssproperty --pagination-color-active - The color of the dot indicating the active slide. - * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become - * partially visible as a scroll hint. - * @cssproperty --slide-gap - The space between each slide. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: { - onWaSlideChange: 'wa-slide-change' as EventName, - }, - displayName: 'WaCarousel', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/checkbox/index.ts b/packages/webawesome/src/react/checkbox/index.ts deleted file mode 100644 index 80c0f0d73..000000000 --- a/packages/webawesome/src/react/checkbox/index.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/checkbox/checkbox.js'; - -import { type EventName } from '@lit/react'; -import type { WaInvalidEvent } from '../../events/events.js'; -export type { WaInvalidEvent } from '../../events/events.js'; - -const tagName = 'wa-checkbox'; - -/** - * @summary Checkboxes allow the user to toggle an option on or off. - * @documentation https://backers.webawesome.com/docs/components/checkbox - * @status stable - * @since 2.0 - * - * @dependency wa-icon - * - * @slot - The checkbox's label. - * @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute. - * - * @event blur - Emitted when the checkbox loses focus. - * @event change - Emitted when the checked state changes. - * @event focus - Emitted when the checkbox gains focus. - * @event input - Emitted when the checkbox receives input. - * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied. - * - * @csspart base - The component's label . - * @csspart control - The square container that wraps the checkbox's checked state. - * @csspart checked-icon - The checked icon, a `` element. - * @csspart indeterminate-icon - The indeterminate icon, a `` element. - * @csspart label - The container that wraps the checkbox's label. - * @csspart hint - The hint's wrapper. - * - * @cssproperty --background-color - The checkbox's background color. - * @cssproperty --background-color-checked - The checkbox's background color when checked. - * @cssproperty --border-color - The color of the checkbox's borders. - * @cssproperty --border-color-checked - The color of the checkbox's borders when checked. - * @cssproperty --border-radius - The radius of the checkbox's corners. - * @cssproperty --border-style - The style of the checkbox's borders. - * @cssproperty --border-width - The width of the checkbox's borders. Expects a single value. - * @cssproperty --box-shadow - The shadow effects around the edges of the checkbox. - * @cssproperty --checked-icon-color - The color of the checkbox's icon. - * @cssproperty --toggle-size - The size of the checkbox. - * - * @cssstate checked - Applied when the checkbox is checked. - * @cssstate disabled - Applied when the checkbox is disabled. - * @cssstate indeterminate - Applied when the checkbox is in an indeterminate state. - * - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: { - onWaInvalid: 'wa-invalid' as EventName, - }, - displayName: 'WaCheckbox', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/color-picker/index.ts b/packages/webawesome/src/react/color-picker/index.ts deleted file mode 100644 index 6d220058e..000000000 --- a/packages/webawesome/src/react/color-picker/index.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/color-picker/color-picker.js'; - -import { type EventName } from '@lit/react'; -import type { WaInvalidEvent } from '../../events/events.js'; -export type { WaInvalidEvent } from '../../events/events.js'; - -const tagName = 'wa-color-picker'; - -/** - * @summary Color pickers allow the user to select a color. - * @documentation https://backers.webawesome.com/docs/components/color-picker - * @status stable - * @since 2.0 - * - * @dependency wa-button - * @dependency wa-button-group - * @dependency wa-dropdown - * @dependency wa-input - * @dependency wa-visually-hidden - * - * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute. - * @slot hint - The color picker's form hint. Alternatively, you can use the `hint` attribute. - * - * @event blur - Emitted when the color picker loses focus. - * @event change - Emitted when the color picker's value changes. - * @event focus - Emitted when the color picker receives focus. - * @event input - Emitted when the color picker receives input. - * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied. - * - * @csspart base - The component's base wrapper. - * @csspart trigger - The color picker's dropdown trigger. - * @csspart swatches - The container that holds the swatches. - * @csspart swatch - Each individual swatch. - * @csspart grid - The color grid. - * @csspart grid-handle - The color grid's handle. - * @csspart slider - Hue and opacity sliders. - * @csspart slider-handle - Hue and opacity slider handles. - * @csspart hue-slider - The hue slider. - * @csspart hue-slider-handle - The hue slider's handle. - * @csspart opacity-slider - The opacity slider. - * @csspart opacity-slider-handle - The opacity slider's handle. - * @csspart preview - The preview color. - * @csspart input - The text input. - * @csspart eye-dropper-button - The eye dropper button. - * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part. - * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part. - * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part. - * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part. - * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part. - * @csspart format-button - The format button. - * @csspart format-button__base - The format button's exported `button` part. - * @csspart format-button__prefix - The format button's exported `prefix` part. - * @csspart format-button__label - The format button's exported `label` part. - * @csspart format-button__suffix - The format button's exported `suffix` part. - * @csspart format-button__caret - The format button's exported `caret` part. - * - * @cssproperty --background-color - The color picker's background color. - * @cssproperty --border-color - The color of the color picker's borders. - * @cssproperty --border-radius - The radius of the color picker's corners. - * @cssproperty --border-style - The style of the color picker's borders. - * @cssproperty --border-width - The width of the color picker's borders. - * @cssproperty --grid-width - The width of the color grid. - * @cssproperty --grid-height - The height of the color grid. - * @cssproperty --grid-handle-size - The size of the color grid's handle. - * @cssproperty --preview-size - The size of the preview color. - * @cssproperty --preview-border-radius - The corners of the preview color. - * @cssproperty --slider-height - The height of the hue and alpha sliders. - * @cssproperty --slider-handle-size - The diameter of the slider's handle. - * @cssproperty --spacing - The amount of space around and between the color picker's controls. - * @cssproperty --swatch-border-radius - The corners of each predefined color swatch. - * @cssproperty --swatch-size - The size of each predefined color swatch. - * @cssproperty --trigger-border-radius - The corners of the color picker's dropdown trigger. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: { - onWaInvalid: 'wa-invalid' as EventName, - }, - displayName: 'WaColorPicker', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/comparison/index.ts b/packages/webawesome/src/react/comparison/index.ts deleted file mode 100644 index b0f998694..000000000 --- a/packages/webawesome/src/react/comparison/index.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/comparison/comparison.js'; - -const tagName = 'wa-comparison'; - -/** - * @summary Compare visual differences between similar content with a sliding panel. - * @documentation https://backers.webawesome.com/docs/components/comparison - * @status stable - * @since 2.0 - * - * @dependency wa-icon - * - * @slot before - The before content, often an `` or `` element. - * @slot after - The after content, often an `` or `` element. - * @slot handle - The icon used inside the handle. - * - * @event change - Emitted when the position changes. - * - * @csspart base - The container that wraps the before and after content. - * @csspart before - The container that wraps the before content. - * @csspart after - The container that wraps the after content. - * @csspart divider - The divider that separates the before and after content. - * @csspart handle - The handle that the user drags to expose the after content. - * - * @cssproperty --divider-color - The color of the divider. - * @cssproperty --divider-width - The width of the dividing line. - * @cssproperty --handle-color - The color of the icon used inside the handle. - * @cssproperty --handle-size - The size of the compare handle. - * - * @cssstate dragging - Applied when the comparison is being dragged. - */ -const reactWrapper = createComponent({ - tagName, - elementClass: Component, - react: React, - events: {}, - displayName: 'WaComparison', -}); - -export default reactWrapper; diff --git a/packages/webawesome/src/react/copy-button/index.ts b/packages/webawesome/src/react/copy-button/index.ts deleted file mode 100644 index 65115eae7..000000000 --- a/packages/webawesome/src/react/copy-button/index.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { createComponent } from '@lit/react'; -import * as React from 'react'; -import Component from '../../components/copy-button/copy-button.js'; - -import { type EventName } from '@lit/react'; -import type { WaCopyEvent, WaErrorEvent } from '../../events/events.js'; -export type { WaCopyEvent, WaErrorEvent } from '../../events/events.js'; - -const tagName = 'wa-copy-button'; - -/** - * @summary Copies text data to the clipboard when the user clicks the trigger. - * @documentation https://backers.webawesome.com/docs/components/copy - * @status experimental - * @since 2.7 - * - * @dependency wa-icon - * @dependency wa-tooltip - * - * @event wa-copy - Emitted when the data has been copied. - * @event wa-error - Emitted when the data could not be copied. - * - * @slot copy-icon - The icon to show in the default copy state. Works best with ``. - * @slot success-icon - The icon to show when the content is copied. Works best with ``. - * @slot error-icon - The icon to show when a copy error occurs. Works best with ``. - * - * @csspart button - The internal `