@tmorrow/cre8-react 1.0.14

package/lib/components/Section/Section.js

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

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

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

package/lib/components/Section/index.js

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

package/lib/components/Select/Select.d.ts

@@ -0,0 +1,29 @@
+import { type EventName } from '@lit/react';
+import { Cre8Select as Cre8SelectElement } from '@tmorrow/cre8-wc/lib/components/select/select';
+import { type Cre8DomEvent } from '../../util/Cre8DomEvent';
+/**
+ * The Select control is designed and built to be used for selecting between choices in a form.
+ * It is not a Dropdown control which is generally used for displaying lists of choices
+ * that act as links or actions, like filter options.
+ *
+ * Consider the use of a Select control carefully.
+ * When you have less than 5 options for the user to choose from,
+ * Radio or Checkbox inputs may be a better choice to display all of the options at once.
+ * Users have to slow down to scan a list with more than 15 options,
+ * so using an option group to give the options hierarchy may help users find their choice faster.
+ * Alternately, a text input field might be a more appropriate control to use when there are too many options,
+ * especially when used with typeahead/auto-complete.
+ *
+ * ## How to use
+ * 1. The collapsed default state always shows a default placeholder value or a selected value.
+ * 2. Sort list items in a logical order, such as grouping highly related options together, placing most common options first, using alphabetical or numeric orders or dates in chronological order.
+ * 3. A list that includes 6+ items should show a scrollbar.
+ * 4. Users should be able to use a keystroke to quickly jump to selecting an option that begins with the entered letter.
+ * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.
+ * 6. Adhere to our common form field conventions and always include a Label, provide short and clear error messages in context, avoid using the Read-only and Disabled states as much as possible, and utilize the info/formatting tip or helpful link rather than placeholder text.
+ *
+ * @slot fieldNote - Container for optional field note content
+ */
+export declare const Cre8Select: import("@lit/react").ReactWebComponent<Cre8SelectElement, {
+    onChange: EventName<Cre8DomEvent<Cre8SelectElement>>;
+}>;

package/lib/components/Select/Select.js

@@ -0,0 +1,34 @@
+import { createComponent } from '@lit/react';
+import { Cre8Select as Cre8SelectElement } from '@tmorrow/cre8-wc/lib/components/select/select';
+import React from 'react';
+/**
+ * The Select control is designed and built to be used for selecting between choices in a form.
+ * It is not a Dropdown control which is generally used for displaying lists of choices
+ * that act as links or actions, like filter options.
+ *
+ * Consider the use of a Select control carefully.
+ * When you have less than 5 options for the user to choose from,
+ * Radio or Checkbox inputs may be a better choice to display all of the options at once.
+ * Users have to slow down to scan a list with more than 15 options,
+ * so using an option group to give the options hierarchy may help users find their choice faster.
+ * Alternately, a text input field might be a more appropriate control to use when there are too many options,
+ * especially when used with typeahead/auto-complete.
+ *
+ * ## How to use
+ * 1. The collapsed default state always shows a default placeholder value or a selected value.
+ * 2. Sort list items in a logical order, such as grouping highly related options together, placing most common options first, using alphabetical or numeric orders or dates in chronological order.
+ * 3. A list that includes 6+ items should show a scrollbar.
+ * 4. Users should be able to use a keystroke to quickly jump to selecting an option that begins with the entered letter.
+ * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.
+ * 6. Adhere to our common form field conventions and always include a Label, provide short and clear error messages in context, avoid using the Read-only and Disabled states as much as possible, and utilize the info/formatting tip or helpful link rather than placeholder text.
+ *
+ * @slot fieldNote - Container for optional field note content
+ */
+export const Cre8Select = createComponent({
+    react: React,
+    tagName: 'Cre8-select',
+    elementClass: Cre8SelectElement,
+    events: {
+        onChange: 'change',
+    },
+});

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

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

package/lib/components/Select/index.js

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

package/lib/components/SelectTile/SelectTile.d.ts

@@ -0,0 +1,10 @@
+import { EventName } from '@lit/react';
+import { Cre8SelectTile as Cre8SelectTileElement } from '@tmorrow/cre8-wc/lib/components/select-tile/select-tile';
+import { Cre8DomEvent } from '../../util/Cre8DomEvent';
+export declare const Cre8SelectTile: import("@lit/react").ReactWebComponent<Cre8SelectTileElement, {
+    onBlur: EventName<Cre8DomEvent<Cre8SelectTileElement> & FocusEvent>;
+    onChange: EventName<Cre8DomEvent<Cre8SelectTileElement>>;
+    onClick: EventName<Cre8DomEvent<Cre8SelectTileElement> & PointerEvent>;
+    onFocus: EventName<Cre8DomEvent<Cre8SelectTileElement> & FocusEvent>;
+    onInput: EventName<Cre8DomEvent<Cre8SelectTileElement>>;
+}>;

package/lib/components/SelectTile/SelectTile.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8SelectTile as Cre8SelectTileElement } from '@tmorrow/cre8-wc/lib/components/select-tile/select-tile';
+export const Cre8SelectTile = createComponent({
+    react: React,
+    tagName: 'Cre8-select-tile',
+    elementClass: Cre8SelectTileElement,
+    events: {
+        onBlur: 'blur',
+        onChange: 'change',
+        onClick: 'click',
+        onFocus: 'focus',
+        onInput: 'input',
+    },
+});

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

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

package/lib/components/SelectTile/index.js

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

package/lib/components/SelectTileList/SelectTileList.d.ts

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

package/lib/components/SelectTileList/SelectTileList.js

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

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

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

package/lib/components/SelectTileList/index.js

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

package/lib/components/SkeletonLoader/SkeletonLoader.d.ts

@@ -0,0 +1,22 @@
+import { Cre8SkeletonLoader as Cre8SkeletonLoaderElement } from '@tmorrow/cre8-wc/lib/components/skeleton-loader/skeleton-loader';
+/**
+ * Skeleton Loader allows for the ability to create placeholder UI loading states.
+ * Developers are encouraged to pass into the Skeleton Loader their own parameters
+ * to create simple (or complex) loading screens.
+ *
+ * ## How to Use
+ * Skeleton states are simplified versions of components used on an initial page load
+ * to indicate that the information on the page has not fully loaded yet.
+ * They only appear for only a few seconds, disappearing once components and content populate the page.
+ * These loaders use motion to convey that the page is not stuck and that data is still being loaded.
+ * This can help to reduce user uncertainty. Skeleton objects should generally be visualized
+ * by simple primitives which mimic the original content in a recognizable way.
+ * It is recommended to use a more elaborate form if that is needed to make the component recognizable.
+ *
+ * Never represent toast notifications, overflow menus, dropdown items, modals, and loaders with skeleton states.
+ * Elements inside a modal may have a skeleton state, but the modal itself should not.
+ *
+ * **IMPORTANT!** This is not a loading element and will provide no value to a screen reader user,
+ * this is a decorative element only!
+ */
+export declare const Cre8SkeletonLoader: import("@lit/react").ReactWebComponent<Cre8SkeletonLoaderElement, {}>;

package/lib/components/SkeletonLoader/SkeletonLoader.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8SkeletonLoader as Cre8SkeletonLoaderElement } from '@tmorrow/cre8-wc/lib/components/skeleton-loader/skeleton-loader';
+/**
+ * Skeleton Loader allows for the ability to create placeholder UI loading states.
+ * Developers are encouraged to pass into the Skeleton Loader their own parameters
+ * to create simple (or complex) loading screens.
+ *
+ * ## How to Use
+ * Skeleton states are simplified versions of components used on an initial page load
+ * to indicate that the information on the page has not fully loaded yet.
+ * They only appear for only a few seconds, disappearing once components and content populate the page.
+ * These loaders use motion to convey that the page is not stuck and that data is still being loaded.
+ * This can help to reduce user uncertainty. Skeleton objects should generally be visualized
+ * by simple primitives which mimic the original content in a recognizable way.
+ * It is recommended to use a more elaborate form if that is needed to make the component recognizable.
+ *
+ * Never represent toast notifications, overflow menus, dropdown items, modals, and loaders with skeleton states.
+ * Elements inside a modal may have a skeleton state, but the modal itself should not.
+ *
+ * **IMPORTANT!** This is not a loading element and will provide no value to a screen reader user,
+ * this is a decorative element only!
+ */
+export const Cre8SkeletonLoader = createComponent({
+    react: React,
+    tagName: 'Cre8-skeleton-loader',
+    elementClass: Cre8SkeletonLoaderElement,
+});

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

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

package/lib/components/SkeletonLoader/index.js

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

package/lib/components/SplitButton/SplitButton.d.ts

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

package/lib/components/SplitButton/SplitButton.js

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

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

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

package/lib/components/SplitButton/index.js

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

package/lib/components/Submenu/Submenu.d.ts

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

package/lib/components/Submenu/Submenu.js

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

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

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

package/lib/components/Submenu/index.js

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

package/lib/components/SubmenuItem/SubmenuItem.d.ts

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

package/lib/components/SubmenuItem/SubmenuItem.js

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

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

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

package/lib/components/SubmenuItem/index.js

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

package/lib/components/Tab/Tab.d.ts

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

package/lib/components/Tab/Tab.js

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

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

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

package/lib/components/Tab/index.js

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

package/lib/components/TabPanel/TabPanel.d.ts

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

package/lib/components/TabPanel/TabPanel.js

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

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

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

package/lib/components/TabPanel/index.js

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

package/lib/components/Table/Table.d.ts

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

package/lib/components/Table/Table.js

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

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

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

package/lib/components/Table/index.js

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

package/lib/components/TableBody/TableBody.d.ts

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

package/lib/components/TableBody/TableBody.js

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

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

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

package/lib/components/TableBody/index.js

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

package/lib/components/TableCell/TableCell.d.ts

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

package/lib/components/TableCell/TableCell.js

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

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

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

package/lib/components/TableCell/index.js

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

package/lib/components/TableHeader/TableHeader.d.ts

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

package/lib/components/TableHeader/TableHeader.js

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

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

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

package/lib/components/TableHeader/index.js

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

package/lib/components/TableHeaderCell/TableHeaderCell.d.ts

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

package/lib/components/TableHeaderCell/TableHeaderCell.js

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

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

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

package/lib/components/TableHeaderCell/index.js

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

package/lib/components/TableObject/TableObject.d.ts

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

package/lib/components/TableObject/TableObject.js

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

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

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

package/lib/components/TableObject/index.js

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

package/lib/components/TableRow/TableRow.d.ts

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

package/lib/components/TableRow/TableRow.js

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

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

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

package/lib/components/TableRow/index.js

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

package/lib/components/Tabs/Tabs.d.ts

@@ -0,0 +1,26 @@
+import { EventName } from '@lit/react';
+import { Cre8Tabs as Cre8TabsElement } from '@tmorrow/cre8-wc/lib/components/tabs/tabs';
+import { Cre8DomEvent } from '../../util/Cre8DomEvent';
+/**
+ * Tabs are used to quickly navigate back and forth between views.
+ * The Tab design and interaction varies depending on the requirements for your organization and project.
+ * Standardizing on the best individual controls will improve usability and reduce development and QA time.
+ *
+ * Create a standard set of Tab controls: Primary Tabs (for system navigation), Secondary Tabs (for sub navigation within a screen).
+ *
+ * ## Usability Guidelines
+ * - The selected Tab should be visually differentiated from the other Tabs. The deselected Tabs should still look enabled. Dimming the other Tabs decreases the legibility of items that are actually active and clickable.
+ * - There must be a minimum of 2 Tabs.
+ * - Showing status in a Tab is non-standard (such as 0%, 10%).
+ * - Tab labels and content should be parallel, with the exception of a Summary or Overview Tab which can be a rollup of content across other Tabs.
+ * - Keep the font size of the Tabs the same. If the Tabs are a fixed width and one of the labels is too long, don't resize the text to fit and consider wrapping text to a second line.
+ * - If possible, don't truncate text because it makes it harder to understand what's in the Tab.
+ * - Try not to use more than six Tabs to keep the UI uncluttered.
+ * - Do not stack Tabs on top of each other, and do not nest Tabs within Tabs. Find alternate ways of navigating page hierarchy.
+ *
+ * @slot default - Default, unnamed slot container for each `Cre8-tab` button
+ * @slot panel - Container for each `Cre8-tab-panel` content item
+ */
+export declare const Cre8Tabs: import("@lit/react").ReactWebComponent<Cre8TabsElement, {
+    onTabChange: EventName<Cre8DomEvent<Cre8TabsElement>>;
+}>;

package/lib/components/Tabs/Tabs.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8Tabs as Cre8TabsElement } from '@tmorrow/cre8-wc/lib/components/tabs/tabs';
+/**
+ * Tabs are used to quickly navigate back and forth between views.
+ * The Tab design and interaction varies depending on the requirements for your organization and project.
+ * Standardizing on the best individual controls will improve usability and reduce development and QA time.
+ *
+ * Create a standard set of Tab controls: Primary Tabs (for system navigation), Secondary Tabs (for sub navigation within a screen).
+ *
+ * ## Usability Guidelines
+ * - The selected Tab should be visually differentiated from the other Tabs. The deselected Tabs should still look enabled. Dimming the other Tabs decreases the legibility of items that are actually active and clickable.
+ * - There must be a minimum of 2 Tabs.
+ * - Showing status in a Tab is non-standard (such as 0%, 10%).
+ * - Tab labels and content should be parallel, with the exception of a Summary or Overview Tab which can be a rollup of content across other Tabs.
+ * - Keep the font size of the Tabs the same. If the Tabs are a fixed width and one of the labels is too long, don't resize the text to fit and consider wrapping text to a second line.
+ * - If possible, don't truncate text because it makes it harder to understand what's in the Tab.
+ * - Try not to use more than six Tabs to keep the UI uncluttered.
+ * - Do not stack Tabs on top of each other, and do not nest Tabs within Tabs. Find alternate ways of navigating page hierarchy.
+ *
+ * @slot default - Default, unnamed slot container for each `Cre8-tab` button
+ * @slot panel - Container for each `Cre8-tab-panel` content item
+ */
+export const Cre8Tabs = createComponent({
+    react: React,
+    tagName: 'Cre8-tabs',
+    elementClass: Cre8TabsElement,
+    events: {
+        onTabChange: 'tabChange',
+    },
+});

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

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

package/lib/components/Tabs/index.js

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

package/lib/components/Tag/Tag.d.ts

@@ -0,0 +1,18 @@
+import { EventName } from '@lit/react';
+import { Cre8Tag as Cre8TagElement } from '@tmorrow/cre8-wc/lib/components/tag/tag';
+import { Cre8DomEvent } from '../../util/Cre8DomEvent';
+/**
+ * The tag component allows you to make selections, filter content, or trigger actions. While buttons are
+ * expected to appear consistently and with familiar calls to actions, tags should appear dynamically
+ * as a group of multiple interactions elements. It is a flexible
+ * component that comes in the following types:
+ *  - **radio**  Clicking a Radio Button causes it to change color. These tags only allow
+ * one option to be chosen and can be used in place of radio button when they need to be listed
+ * horizontally
+ *
+ *  - **checkbox** It allows for selecting options, It can be toggled on and off.
+ * checkbox tags can be used as an alternative to checkboxes.
+ */
+export declare const Cre8Tag: import("@lit/react").ReactWebComponent<Cre8TagElement, {
+    onChange: EventName<Cre8DomEvent<Cre8TagElement>>;
+}>;

package/lib/components/Tag/Tag.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8Tag as Cre8TagElement } from '@tmorrow/cre8-wc/lib/components/tag/tag';
+/**
+ * The tag component allows you to make selections, filter content, or trigger actions. While buttons are
+ * expected to appear consistently and with familiar calls to actions, tags should appear dynamically
+ * as a group of multiple interactions elements. It is a flexible
+ * component that comes in the following types:
+ *  - **radio**  Clicking a Radio Button causes it to change color. These tags only allow
+ * one option to be chosen and can be used in place of radio button when they need to be listed
+ * horizontally
+ *
+ *  - **checkbox** It allows for selecting options, It can be toggled on and off.
+ * checkbox tags can be used as an alternative to checkboxes.
+ */
+export const Cre8Tag = createComponent({
+    react: React,
+    tagName: 'Cre8-tag',
+    elementClass: Cre8TagElement,
+    events: {
+        onChange: 'input',
+    },
+});

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

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

package/lib/components/Tag/index.js

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

package/lib/components/TagList/TagList.d.ts

@@ -0,0 +1,7 @@
+import { Cre8TagList as Cre8TagListElement } from '@tmorrow/cre8-wc/lib/components/tag-list/tag-list';
+/**
+ * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.
+ * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.
+ * Tag List has a label that should be used to describe the purpose of the list.
+ */
+export declare const Cre8TagList: import("@lit/react").ReactWebComponent<Cre8TagListElement, {}>;

package/lib/components/TagList/TagList.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Cre8TagList as Cre8TagListElement } from '@tmorrow/cre8-wc/lib/components/tag-list/tag-list';
+/**
+ * Tag List must have children which are Tag components that are of type `checkbox` or `radio`.
+ * The Tags must use the `neutral` variant and the `round` shape when they are inside a Tag List.
+ * Tag List has a label that should be used to describe the purpose of the list.
+ */
+export const Cre8TagList = createComponent({
+    react: React,
+    tagName: 'Cre8-tag-list',
+    elementClass: Cre8TagListElement,
+});

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

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

package/lib/components/TagList/index.js

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