@tmorrow/cre8-react 1.0.14

package/lib/components/Accordion/Accordion.d.ts

@@ -0,0 +1,12 @@
+import { Cre8Accordion as Cre8AccordionElement } from '@tmorrow/cre8-wc/lib/components/accordion/accordion';
+/**
+ * The component is a vertically stacked list of headers that reveal or hide sections of related content on a page.
+ * The header title gives the user a high level overview of the content allowing the user to decide
+ * which sections to expand for the information.
+ *
+ * Accordion contains Accordion Items as children. This component is the wrapper for grouping related accordion items.
+ *
+ * Users can select different border types: default (no border), rectangle, rounded bottom, and rounded.
+ *
+ */
+export declare const Cre8Accordion: import("@lit/react").ReactWebComponent<Cre8AccordionElement, {}>;

package/lib/components/Accordion/Accordion.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8Accordion as Cre8AccordionElement } from '@tmorrow/cre8-wc/lib/components/accordion/accordion';
+/**
+ * The component is a vertically stacked list of headers that reveal or hide sections of related content on a page.
+ * The header title gives the user a high level overview of the content allowing the user to decide
+ * which sections to expand for the information.
+ *
+ * Accordion contains Accordion Items as children. This component is the wrapper for grouping related accordion items.
+ *
+ * Users can select different border types: default (no border), rectangle, rounded bottom, and rounded.
+ *
+ */
+export const Cre8Accordion = createComponent({
+    react: React,
+    tagName: 'Cre8-accordion',
+    elementClass: Cre8AccordionElement,
+});

package/lib/components/Accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './Accordion';

package/lib/components/Accordion/index.js

@@ -0,0 +1 @@
+export * from './Accordion';

package/lib/components/AccordionItem/AccordionItem.d.ts

@@ -0,0 +1,25 @@
+import { Cre8AccordionItem as Cre8AccordionItemElement } from '@tmorrow/cre8-wc/lib/components/accordion-item/accordion-item';
+/**
+ *
+ * The accordion item component delivers large amounts of content in a small space
+ * through progressive disclosure. That is, the user gets key details about the
+ * underlying content and can choose to expand that content within the constraints
+ * of the accordion item. Accordion Items work especially well on mobile interfaces or
+ * whenever vertical space is at a premium.
+ *
+ * ## HOW TO USE
+ * Avoid “nested” accordion items—that is, collapsible content within collapsible
+ * content. This type of pattern goes against UX best practices.
+ *
+ * The Cre8 accordion item header allows for two sizes:
+ * 'sm' [Cre8-typography-title-default] or 'lg' [Cre8-typography-title-large]
+ *
+ * A chevron is used to indicate the “expand/collapse” action, though the entire
+ * header area is clickable for the same action.
+ *
+ * **NOTE**: The header of the accordion item uses h tags so be sure to choose the headingTagVariant that
+ * fits into the hierarchy of your html page layout. THIS WILL NOT CHANGE THE APPEARANCE OF THE HEADER.
+ *
+ *
+ */
+export declare const Cre8AccordionItem: import("@lit/react").ReactWebComponent<Cre8AccordionItemElement, {}>;

package/lib/components/AccordionItem/AccordionItem.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8AccordionItem as Cre8AccordionItemElement } from '@tmorrow/cre8-wc/lib/components/accordion-item/accordion-item';
+/**
+ *
+ * The accordion item component delivers large amounts of content in a small space
+ * through progressive disclosure. That is, the user gets key details about the
+ * underlying content and can choose to expand that content within the constraints
+ * of the accordion item. Accordion Items work especially well on mobile interfaces or
+ * whenever vertical space is at a premium.
+ *
+ * ## HOW TO USE
+ * Avoid “nested” accordion items—that is, collapsible content within collapsible
+ * content. This type of pattern goes against UX best practices.
+ *
+ * The Cre8 accordion item header allows for two sizes:
+ * 'sm' [Cre8-typography-title-default] or 'lg' [Cre8-typography-title-large]
+ *
+ * A chevron is used to indicate the “expand/collapse” action, though the entire
+ * header area is clickable for the same action.
+ *
+ * **NOTE**: The header of the accordion item uses h tags so be sure to choose the headingTagVariant that
+ * fits into the hierarchy of your html page layout. THIS WILL NOT CHANGE THE APPEARANCE OF THE HEADER.
+ *
+ *
+ */
+export const Cre8AccordionItem = createComponent({
+    react: React,
+    tagName: 'Cre8-accordion-item',
+    elementClass: Cre8AccordionItemElement,
+});

package/lib/components/AccordionItem/index.d.ts

@@ -0,0 +1 @@
+export * from './AccordionItem';

package/lib/components/AccordionItem/index.js

@@ -0,0 +1 @@
+export * from './AccordionItem';

package/lib/components/Alert/Alert.d.ts

@@ -0,0 +1,16 @@
+import { Cre8Alert as Cre8AlertElement } from '@tmorrow/cre8-wc/lib/components/alert/alert';
+/**
+ * The general purpose of an alert or notification is to draw the user’s attention
+ * and provide the user with timely, relevant information.
+ *
+ * ## Alert Styles:
+ * - There are 6 statuses for 6 types of alerts: 'error', 'info', 'notification', 'neutral', 'warning', 'success'.
+ * Each alert will have different icon to be displayed in the alert.
+ * - Users can select two types of alert variants: 'standalone', or 'banner'.
+ * - User can also choose the alert should be emphasized or not. There are two options: subtle or strong.
+ * - User can add button or link in the alert.
+ * If users choose to emphasize the alert (**strong**), user needs to used **"inverted"** prop in button or link.
+ * - User can choose whether the alert can be dismissed or not
+ *
+ */
+export declare const Cre8Alert: import("@lit/react").ReactWebComponent<Cre8AlertElement, {}>;

package/lib/components/Alert/Alert.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8Alert as Cre8AlertElement } from '@tmorrow/cre8-wc/lib/components/alert/alert';
+/**
+ * The general purpose of an alert or notification is to draw the user’s attention
+ * and provide the user with timely, relevant information.
+ *
+ * ## Alert Styles:
+ * - There are 6 statuses for 6 types of alerts: 'error', 'info', 'notification', 'neutral', 'warning', 'success'.
+ * Each alert will have different icon to be displayed in the alert.
+ * - Users can select two types of alert variants: 'standalone', or 'banner'.
+ * - User can also choose the alert should be emphasized or not. There are two options: subtle or strong.
+ * - User can add button or link in the alert.
+ * If users choose to emphasize the alert (**strong**), user needs to used **"inverted"** prop in button or link.
+ * - User can choose whether the alert can be dismissed or not
+ *
+ */
+export const Cre8Alert = createComponent({
+    react: React,
+    tagName: 'Cre8-alert',
+    elementClass: Cre8AlertElement,
+});

package/lib/components/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from './Alert';

package/lib/components/Alert/index.js

@@ -0,0 +1 @@
+export * from './Alert';

package/lib/components/Badge/Badge.d.ts

@@ -0,0 +1,7 @@
+import { Cre8Badge as Cre8BadgeElement } from '@tmorrow/cre8-wc/lib/components/badge/badge';
+/**
+ * Status badges are used most often in tables or fat rows in a list. These components serve a contextual purpose and don't provide any functionality.
+ * Badges should be organized inside a dedicated table row communicating status such as pending, approved or rejected.
+ *
+ */
+export declare const Cre8Badge: import("@lit/react").ReactWebComponent<Cre8BadgeElement, {}>;

package/lib/components/Badge/Badge.js

@@ -0,0 +1,13 @@
+import { createComponent } from '@lit/react';
+import { Cre8Badge as Cre8BadgeElement } from '@tmorrow/cre8-wc/lib/components/badge/badge';
+import React from 'react';
+/**
+ * Status badges are used most often in tables or fat rows in a list. These components serve a contextual purpose and don't provide any functionality.
+ * Badges should be organized inside a dedicated table row communicating status such as pending, approved or rejected.
+ *
+ */
+export const Cre8Badge = createComponent({
+    react: React,
+    tagName: 'Cre8-badge',
+    elementClass: Cre8BadgeElement,
+});

package/lib/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export * from './Badge';

package/lib/components/Badge/index.js

@@ -0,0 +1 @@
+export * from './Badge';

package/lib/components/Band/Band.d.ts

@@ -0,0 +1,2 @@
+import { Cre8Band as Cre8BandElement } from '@tmorrow/cre8-wc/lib/components/band/band';
+export declare const Cre8Band: import("@lit/react").ReactWebComponent<Cre8BandElement, {}>;

package/lib/components/Band/Band.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import { Cre8Band as Cre8BandElement } from '@tmorrow/cre8-wc/lib/components/band/band';
+import React from 'react';
+export const Cre8Band = createComponent({
+    react: React,
+    tagName: 'Cre8-band',
+    elementClass: Cre8BandElement,
+});

package/lib/components/Band/index.d.ts

@@ -0,0 +1 @@
+export * from './Band';

package/lib/components/Band/index.js

@@ -0,0 +1 @@
+export * from './Band';

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,17 @@
+import { Cre8Breadcrumbs as Cre8BreadcrumbsElement } from '@tmorrow/cre8-wc/lib/components/breadcrumbs/breadcrumbs';
+/**
+ * The breadcrumbs component is a secondary navigation pattern that helps a user understand where the user is located.
+ * The breadcrumbs component shows the users their current location relative to the information architecture
+ * It enables the users to quickly move up to a parent level or previous location.
+ *
+ * ## How to Use
+ *
+ * - Import 'Breadcrumbs' component.
+ * - Add the pages in the path of the breadcrumbs using `Cre8-breadcrumbs-item`.
+ * All the pages in the breadcrumbs component should be interactive.
+ * - All the page should link to their respective pages (except the current page) using `Cre8-link`.
+ * - The current page is included in the breadcrumbs trail.
+ * - The current page is always the last text listed and is not an interactive link.
+ *
+ */
+export declare const Cre8Breadcrumbs: import("@lit/react").ReactWebComponent<Cre8BreadcrumbsElement, {}>;

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8Breadcrumbs as Cre8BreadcrumbsElement } from '@tmorrow/cre8-wc/lib/components/breadcrumbs/breadcrumbs';
+/**
+ * The breadcrumbs component is a secondary navigation pattern that helps a user understand where the user is located.
+ * The breadcrumbs component shows the users their current location relative to the information architecture
+ * It enables the users to quickly move up to a parent level or previous location.
+ *
+ * ## How to Use
+ *
+ * - Import 'Breadcrumbs' component.
+ * - Add the pages in the path of the breadcrumbs using `Cre8-breadcrumbs-item`.
+ * All the pages in the breadcrumbs component should be interactive.
+ * - All the page should link to their respective pages (except the current page) using `Cre8-link`.
+ * - The current page is included in the breadcrumbs trail.
+ * - The current page is always the last text listed and is not an interactive link.
+ *
+ */
+export const Cre8Breadcrumbs = createComponent({
+    react: React,
+    tagName: 'Cre8-breadcrumbs',
+    elementClass: Cre8BreadcrumbsElement,
+});

package/lib/components/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from './Breadcrumbs';

package/lib/components/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export * from './Breadcrumbs';

package/lib/components/BreadcrumbsItem/BreadcrumbsItem.d.ts

@@ -0,0 +1,2 @@
+import { Cre8BreadcrumbsItem as Cre8BreadcrumbsItemElement } from '@tmorrow/cre8-wc/lib/components/breadcrumbs-item/breadcrumbs-item';
+export declare const Cre8BreadcrumbsItem: import("@lit/react").ReactWebComponent<Cre8BreadcrumbsItemElement, {}>;

package/lib/components/BreadcrumbsItem/BreadcrumbsItem.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8BreadcrumbsItem as Cre8BreadcrumbsItemElement } from '@tmorrow/cre8-wc/lib/components/breadcrumbs-item/breadcrumbs-item';
+export const Cre8BreadcrumbsItem = createComponent({
+    react: React,
+    tagName: 'Cre8-breadcrumbs-item',
+    elementClass: Cre8BreadcrumbsItemElement,
+});

package/lib/components/BreadcrumbsItem/index.d.ts

@@ -0,0 +1 @@
+export * from './BreadcrumbsItem';

package/lib/components/BreadcrumbsItem/index.js

@@ -0,0 +1 @@
+export * from './BreadcrumbsItem';

package/lib/components/Button/Button.d.ts

@@ -0,0 +1,68 @@
+import { Cre8Button as Cre8ButtonElement } from '@tmorrow/cre8-wc/lib/components/button/button';
+/**
+ * The size and state of buttons on the screen serve as visual cues for the user about what they can do and what they should do next. They indicate the availability and priority of the action on the page.
+ *
+ * - Buttons are a single call-to-action where a single click performs that action
+ * - Use buttons when you are performing an action which is almost always on the same page
+ * - Use a link instead of a button when you're navigating to another place
+ *
+ * ## How to Use
+ *
+ * Buttons are distinguished by three key properties:
+ *
+ * - **Visual Priority**: Style and size: Primary, Secondary, or Tertiary styles; each with large and small variations
+ * - **State**: Interaction state: hover/click (press), focus, disabled, and submitting/loading (only for large buttons)
+ * - **Brand**: Styles determined by the site or component theme
+ *
+ * ### Usage Guidelines
+ *
+ * Primary, Secondary and Tertiary styles emphasize or de-emphasize an action. They also define
+ * background, font style, and border colors. Large and small sizing assists with visual priority by defining button
+ * heights, left and right internal padding, and font-size.
+ *
+ * #### System Feedback
+ * Each button has a default and hover/click (press) state that give the user feedback
+ * that they have successfully interacted with a button.
+ * Button presses should always be combined with other types of timely system feedback.
+ * Examples of system feedback may be a page refresh, exposing additional controls or content,
+ * dialogs, alerts and notifications.
+ * If there is perceived a delay in system response, generally due to technical constraints,
+ * provide a progress or loading indicator.
+ *
+ * #### Button Text
+ *
+ * - Button text should be as short and simple as possible, ideally a maximum of 3 words.
+ * - Use Title Case for readability.
+ * - They should not include punctuation (exception: "Loading...").
+ * - They should not be used as an indicator of what happens on the next page, or as a substitute
+ * for a progress meter.
+ *
+ * #### Button With Icon
+ *
+ * For button with icon:
+ * - **iconRotateDegree** & **iconFlipDirection** props are optional.
+ * - They are used to set up the correct dirrection for icons, for example,
+ * arrows, caret up or caret down.
+ *
+ * #### Button Styling
+ *
+ * - DO use only the styles of the brand you are working on.
+ * - DO NOT combine styles, even if the page is co-branded.
+ *
+ * #### Button Sizes
+ * - DO always pair like sizes together and maintain the hierarchy of Primary and Secondary/Tertiary.
+ * - DO NOT mix sizes of buttons when they are used together as a group.
+ *
+ * #### Input Pairing
+ *
+ * Primary and Secondary buttons may be paired with input fields.
+ * Only one Primary button may appear on each screen.
+ * Use the Secondary button when there are multiple in-context buttons
+ * and/or when there is an emphasized page level button.
+ * When used in a form context, the button's `type` needs to be `submit` to pass along form data.
+ *
+ * - DO use only large buttons with input fields.
+ * - DO NOT use small buttons with input fields.
+ *
+ */
+export declare const Cre8Button: import("@lit/react").ReactWebComponent<Cre8ButtonElement, {}>;

package/lib/components/Button/Button.js

@@ -0,0 +1,74 @@
+import { createComponent } from '@lit/react';
+import { Cre8Button as Cre8ButtonElement } from '@tmorrow/cre8-wc/lib/components/button/button';
+import React from 'react';
+/**
+ * The size and state of buttons on the screen serve as visual cues for the user about what they can do and what they should do next. They indicate the availability and priority of the action on the page.
+ *
+ * - Buttons are a single call-to-action where a single click performs that action
+ * - Use buttons when you are performing an action which is almost always on the same page
+ * - Use a link instead of a button when you're navigating to another place
+ *
+ * ## How to Use
+ *
+ * Buttons are distinguished by three key properties:
+ *
+ * - **Visual Priority**: Style and size: Primary, Secondary, or Tertiary styles; each with large and small variations
+ * - **State**: Interaction state: hover/click (press), focus, disabled, and submitting/loading (only for large buttons)
+ * - **Brand**: Styles determined by the site or component theme
+ *
+ * ### Usage Guidelines
+ *
+ * Primary, Secondary and Tertiary styles emphasize or de-emphasize an action. They also define
+ * background, font style, and border colors. Large and small sizing assists with visual priority by defining button
+ * heights, left and right internal padding, and font-size.
+ *
+ * #### System Feedback
+ * Each button has a default and hover/click (press) state that give the user feedback
+ * that they have successfully interacted with a button.
+ * Button presses should always be combined with other types of timely system feedback.
+ * Examples of system feedback may be a page refresh, exposing additional controls or content,
+ * dialogs, alerts and notifications.
+ * If there is perceived a delay in system response, generally due to technical constraints,
+ * provide a progress or loading indicator.
+ *
+ * #### Button Text
+ *
+ * - Button text should be as short and simple as possible, ideally a maximum of 3 words.
+ * - Use Title Case for readability.
+ * - They should not include punctuation (exception: "Loading...").
+ * - They should not be used as an indicator of what happens on the next page, or as a substitute
+ * for a progress meter.
+ *
+ * #### Button With Icon
+ *
+ * For button with icon:
+ * - **iconRotateDegree** & **iconFlipDirection** props are optional.
+ * - They are used to set up the correct dirrection for icons, for example,
+ * arrows, caret up or caret down.
+ *
+ * #### Button Styling
+ *
+ * - DO use only the styles of the brand you are working on.
+ * - DO NOT combine styles, even if the page is co-branded.
+ *
+ * #### Button Sizes
+ * - DO always pair like sizes together and maintain the hierarchy of Primary and Secondary/Tertiary.
+ * - DO NOT mix sizes of buttons when they are used together as a group.
+ *
+ * #### Input Pairing
+ *
+ * Primary and Secondary buttons may be paired with input fields.
+ * Only one Primary button may appear on each screen.
+ * Use the Secondary button when there are multiple in-context buttons
+ * and/or when there is an emphasized page level button.
+ * When used in a form context, the button's `type` needs to be `submit` to pass along form data.
+ *
+ * - DO use only large buttons with input fields.
+ * - DO NOT use small buttons with input fields.
+ *
+ */
+export const Cre8Button = createComponent({
+    react: React,
+    tagName: 'Cre8-button',
+    elementClass: Cre8ButtonElement,
+});

package/lib/components/Button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/lib/components/Button/index.js

@@ -0,0 +1 @@
+export * from './Button';

package/lib/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,2 @@
+import { Cre8ButtonGroup as Cre8ButtonGroupElement } from '@tmorrow/cre8-wc/lib/components/button-group/button-group';
+export declare const Cre8ButtonGroup: import("@lit/react").ReactWebComponent<Cre8ButtonGroupElement, {}>;

package/lib/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8ButtonGroup as Cre8ButtonGroupElement } from '@tmorrow/cre8-wc/lib/components/button-group/button-group';
+export const Cre8ButtonGroup = createComponent({
+    react: React,
+    tagName: 'Cre8-button-group',
+    elementClass: Cre8ButtonGroupElement,
+});

package/lib/components/ButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './ButtonGroup';

package/lib/components/ButtonGroup/index.js

@@ -0,0 +1 @@
+export * from './ButtonGroup';

package/lib/components/Card/Card.d.ts

@@ -0,0 +1,13 @@
+import { Cre8Card as Cre8CardElement } from '@tmorrow/cre8-wc/lib/components/card/card';
+/** The card component acts a general container element for various content.
+*
+* # How to Use
+* 1. Wrap the card component tags around any html template code which has been properly imported into the file.
+* 2. Decide the layout that best fits the designs assigned to your work.  Generally, we recommend visual elements appear at the start with
+* custom html content that gives further context and meaning following after.
+* 3. The card defaults to a column and includes a `horizontal` directional variant. If you have a card where the layout of the content is
+* more aligned horizontally, using the `horizontal` variant will ease the construction of your component
+* 4. Finally, we typically recommend reserving the end of the card for any interactive elements such as buttons for navigating to further information.
+*
+*/
+export declare const Cre8Card: import("@lit/react").ReactWebComponent<Cre8CardElement, {}>;

package/lib/components/Card/Card.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8Card as Cre8CardElement } from '@tmorrow/cre8-wc/lib/components/card/card';
+/** The card component acts a general container element for various content.
+*
+* # How to Use
+* 1. Wrap the card component tags around any html template code which has been properly imported into the file.
+* 2. Decide the layout that best fits the designs assigned to your work.  Generally, we recommend visual elements appear at the start with
+* custom html content that gives further context and meaning following after.
+* 3. The card defaults to a column and includes a `horizontal` directional variant. If you have a card where the layout of the content is
+* more aligned horizontally, using the `horizontal` variant will ease the construction of your component
+* 4. Finally, we typically recommend reserving the end of the card for any interactive elements such as buttons for navigating to further information.
+*
+*/
+export const Cre8Card = createComponent({
+    react: React,
+    tagName: 'Cre8-card',
+    elementClass: Cre8CardElement,
+});

package/lib/components/Card/index.d.ts

@@ -0,0 +1 @@
+export * from './Card';

package/lib/components/Card/index.js

@@ -0,0 +1 @@
+export * from './Card';

package/lib/components/CheckboxField/CheckboxField.d.ts

@@ -0,0 +1,2 @@
+import { Cre8CheckboxField as Cre8CheckboxFieldElement } from '@tmorrow/cre8-wc/lib/components/checkbox-field/checkbox-field';
+export declare const Cre8CheckboxField: import("@lit/react").ReactWebComponent<Cre8CheckboxFieldElement, {}>;

package/lib/components/CheckboxField/CheckboxField.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8CheckboxField as Cre8CheckboxFieldElement } from '@tmorrow/cre8-wc/lib/components/checkbox-field/checkbox-field';
+export const Cre8CheckboxField = createComponent({
+    react: React,
+    tagName: 'Cre8-checkbox-field',
+    elementClass: Cre8CheckboxFieldElement,
+});

package/lib/components/CheckboxField/index.d.ts

@@ -0,0 +1 @@
+export * from './CheckboxField';

package/lib/components/CheckboxField/index.js

@@ -0,0 +1 @@
+export * from './CheckboxField';

package/lib/components/CheckboxFieldItem/CheckboxFieldItem.d.ts

@@ -0,0 +1,9 @@
+import { EventName } from '@lit/react';
+import { Cre8CheckboxFieldItem as Cre8CheckboxFieldItemElement } from '@tmorrow/cre8-wc/lib/components/checkbox-field-item/checkbox-field-item';
+import { Cre8DomEvent } from '../../util/Cre8DomEvent';
+/**
+ *  CheckboxFieldItem is the combination of Checkbox, Label and FieldNote. Checkbox can turn an option on or off.
+ */
+export declare const Cre8CheckboxFieldItem: import("@lit/react").ReactWebComponent<Cre8CheckboxFieldItemElement, {
+    onChange: EventName<Cre8DomEvent<Cre8CheckboxFieldItemElement>>;
+}>;

package/lib/components/CheckboxFieldItem/CheckboxFieldItem.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8CheckboxFieldItem as Cre8CheckboxFieldItemElement } from '@tmorrow/cre8-wc/lib/components/checkbox-field-item/checkbox-field-item';
+/**
+ *  CheckboxFieldItem is the combination of Checkbox, Label and FieldNote. Checkbox can turn an option on or off.
+ */
+export const Cre8CheckboxFieldItem = createComponent({
+    react: React,
+    tagName: 'Cre8-checkbox-field-item',
+    elementClass: Cre8CheckboxFieldItemElement,
+    events: {
+        onChange: 'input',
+    },
+});

package/lib/components/CheckboxFieldItem/index.d.ts

@@ -0,0 +1 @@
+export * from './CheckboxFieldItem';

package/lib/components/CheckboxFieldItem/index.js

@@ -0,0 +1 @@
+export * from './CheckboxFieldItem';

package/lib/components/DangerButton/DangerButton.d.ts

@@ -0,0 +1,2 @@
+import { Cre8DangerButton as Cre8DangerButtonElement } from '@tmorrow/cre8-wc/lib/components/danger-button/danger-button';
+export declare const Cre8DangerButton: import("@lit/react").ReactWebComponent<Cre8DangerButtonElement, {}>;

package/lib/components/DangerButton/DangerButton.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8DangerButton as Cre8DangerButtonElement } from '@tmorrow/cre8-wc/lib/components/danger-button/danger-button';
+export const Cre8DangerButton = createComponent({
+    react: React,
+    tagName: 'Cre8-danger-button',
+    elementClass: Cre8DangerButtonElement,
+});

package/lib/components/DangerButton/index.d.ts

@@ -0,0 +1 @@
+export * from './DangerButton';

package/lib/components/DangerButton/index.js

@@ -0,0 +1 @@
+export * from './DangerButton';

package/lib/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,11 @@
+import { EventName } from '@lit/react';
+import { Cre8DatePicker as Cre8DatePickerElement } from '@tmorrow/cre8-wc/lib/components/date-picker/date-picker';
+import { Cre8DomEvent } from '../../util/Cre8DomEvent';
+/**
+ * The Date Picker component renders a form group with label, control, help text and validation styling much
+ * like the Field component but exclusively for type=date.
+ * Cre8DatePicker inherts the Cre8Field component.
+ */
+export declare const Cre8DatePicker: import("@lit/react").ReactWebComponent<Cre8DatePickerElement, {
+    onChange: EventName<Cre8DomEvent<Cre8DatePickerElement>>;
+}>;

package/lib/components/DatePicker/DatePicker.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8DatePicker as Cre8DatePickerElement } from '@tmorrow/cre8-wc/lib/components/date-picker/date-picker';
+/**
+ * The Date Picker component renders a form group with label, control, help text and validation styling much
+ * like the Field component but exclusively for type=date.
+ * Cre8DatePicker inherts the Cre8Field component.
+ */
+export const Cre8DatePicker = createComponent({
+    react: React,
+    tagName: 'Cre8-date-picker',
+    elementClass: Cre8DatePickerElement,
+    events: {
+        onChange: 'input',
+    },
+});

package/lib/components/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DatePicker';

package/lib/components/DatePicker/index.js

@@ -0,0 +1 @@
+export * from './DatePicker';

package/lib/components/Divider/Divider.d.ts

@@ -0,0 +1,13 @@
+import { Cre8Divider as Cre8DividerElement } from '@tmorrow/cre8-wc/lib/components/divider/divider';
+/**
+ * The divider component is a separator between sections of content or groups of items.
+ * It often contains a horizontal or vertical line.
+ *
+ * ##How to use
+ * - By default, the component renders the **horizontal divider**
+ * - The user can set variant === "vertical" so it will render the vertical divider
+ * - By default, the divider has gray color.
+ * - The user can set status === "brand" to set the divider to blue color.
+ * - The user can set status === "knockout" to set the divider to white color.
+*/
+export declare const Cre8Divider: import("@lit/react").ReactWebComponent<Cre8DividerElement, {}>;