@westpac/ui 0.2.0 → 0.3.0

package/dist/components/table/components/body/body.component.js

@@ -0,0 +1,23 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { styles } from './body.styles.js';
+export function Body({ className , children , ...props }) {
+    return React.createElement("tbody", _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

package/dist/components/table/components/body/body.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {
+    responsiveVariants: string[];
+}, {}, undefined>;

package/dist/components/table/components/body/body.styles.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/table/components/body/body.types.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type BodyProps = HTMLAttributes<HTMLTableSectionElement>;

package/dist/components/table/components/body/body.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/table/components/body/index.d.ts

@@ -0,0 +1,2 @@
+export { Body } from './body.component.js';
+export { type BodyProps } from './body.types.js';

package/dist/components/table/components/body/index.js

@@ -0,0 +1 @@
+export { Body } from './body.component.js';

package/dist/components/table/components/caption/caption.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type CaptionProps } from './caption.types.js';
+export declare function Caption({ className, children, ...props }: CaptionProps): JSX.Element;

package/dist/components/table/components/caption/caption.component.js

@@ -0,0 +1,23 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { styles } from './caption.styles.js';
+export function Caption({ className , children , ...props }) {
+    return React.createElement("caption", _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

package/dist/components/table/components/caption/caption.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "typography-body-8 mb-2 text-left font-light", {
+    responsiveVariants: string[];
+}, {}, undefined>;

package/dist/components/table/components/caption/caption.styles.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'typography-body-8 mb-2 text-left font-light',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/table/components/caption/caption.types.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type CaptionProps = HTMLAttributes<HTMLTableCaptionElement>;

package/dist/components/table/components/caption/caption.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/table/components/caption/index.d.ts

@@ -0,0 +1,2 @@
+export { Caption } from './caption.component.js';
+export { type CaptionProps } from './caption.types.js';

package/dist/components/table/components/caption/index.js

@@ -0,0 +1 @@
+export { Caption } from './caption.component.js';

package/dist/components/table/components/cell/cell.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type CellProps } from './cell.types.js';
+export declare function Cell({ className, children, highlighted, highlightStart, ...props }: CellProps): JSX.Element;

package/dist/components/table/components/cell/cell.component.js

@@ -0,0 +1,30 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { useContext } from 'react';
+import { TableContext } from '../../table.component.js';
+import { styles as cellStyles } from './cell.styles.js';
+export function Cell({ className , children , highlighted , highlightStart , ...props }) {
+    const { bordered  } = useContext(TableContext);
+    const styles = cellStyles({
+        bordered,
+        highlighted,
+        highlightStart
+    });
+    return React.createElement("td", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), children);
+}

package/dist/components/table/components/cell/cell.styles.d.ts

@@ -0,0 +1,39 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    bordered: {
+        true: {
+            base: string;
+        };
+    };
+    highlighted: {
+        true: {
+            base: string;
+        };
+    };
+    highlightStart: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    bordered: {
+        true: {
+            base: string;
+        };
+    };
+    highlighted: {
+        true: {
+            base: string;
+        };
+    };
+    highlightStart: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>;

package/dist/components/table/components/cell/cell.styles.js

@@ -0,0 +1,31 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'typography-body-10 border-border border border-x-0 border-b-[1px] border-t-0 p-2 text-left align-bottom'
+    },
+    variants: {
+        bordered: {
+            true: {
+                base: 'border-x-1'
+            }
+        },
+        highlighted: {
+            true: {
+                base: 'border-b-primary border border-b-[3px]'
+            }
+        },
+        highlightStart: {
+            true: {
+                base: 'border-l-primary border border-b-[3px] border-l-[6px]'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/table/components/cell/cell.types.d.ts

@@ -0,0 +1,13 @@
+import { TdHTMLAttributes } from 'react';
+export type CellProps = {
+    /**
+     * Should be `true` if cell is start of highlight
+     */
+    highlightStart?: boolean;
+    /**
+     * Should be `true` if cell should be highlighted
+     * If cell is first cell in a highlight block highlightStart should also be `true`
+     * If multiple cells need to be highlighted it may be easier to pass array of cells through Row
+     */
+    highlighted?: boolean;
+} & TdHTMLAttributes<HTMLTableCellElement>;

package/dist/components/table/components/cell/cell.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/table/components/cell/index.d.ts

@@ -0,0 +1,2 @@
+export { Cell } from './cell.component.js';
+export { type CellProps } from './cell.types.js';

package/dist/components/table/components/cell/index.js

@@ -0,0 +1 @@
+export { Cell } from './cell.component.js';

package/dist/components/table/components/footer/footer.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FooterProps } from './footer.types.js';
+export declare function Footer({ className, children, colspan, ...props }: FooterProps): JSX.Element;

package/dist/components/table/components/footer/footer.component.js

@@ -0,0 +1,29 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { useContext } from 'react';
+import { TableContext } from '../../table.component.js';
+import { styles as footerStyles } from './footer.styles.js';
+export function Footer({ className , children , colspan , ...props }) {
+    const { bordered  } = useContext(TableContext);
+    const styles = footerStyles({
+        bordered
+    });
+    return React.createElement("tfoot", _extends({}, props), React.createElement("tr", null, React.createElement("td", {
+        className: styles.base({
+            className
+        }),
+        colSpan: colspan
+    }, children)));
+}

package/dist/components/table/components/footer/footer.styles.d.ts

@@ -0,0 +1,19 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    bordered: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    bordered: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>;

package/dist/components/table/components/footer/footer.styles.js

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'text-muted typography-body-10 p-2 text-left font-light'
+    },
+    variants: {
+        bordered: {
+            true: {
+                base: 'border-border border'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/table/components/footer/footer.types.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export type FooterProps = {
+    /**
+     * Span for footer, should be same length as amount of columns in table
+     */
+    colspan: number;
+} & HTMLAttributes<HTMLTableSectionElement>;

package/dist/components/table/components/footer/footer.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/table/components/footer/index.d.ts

@@ -0,0 +1,2 @@
+export { Footer } from './footer.component.js';
+export { type FooterProps } from './footer.types.js';

package/dist/components/table/components/footer/index.js

@@ -0,0 +1 @@
+export { Footer } from './footer.component.js';

package/dist/components/table/components/header/header.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type HeaderProps } from './header.types.js';
+export declare function Header({ className, children, ...props }: HeaderProps): JSX.Element;

package/dist/components/table/components/header/header.component.js

@@ -0,0 +1,23 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { styles } from './header.styles.js';
+export function Header({ className , children , ...props }) {
+    return React.createElement("thead", _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

package/dist/components/table/components/header/header.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {
+    responsiveVariants: string[];
+}, {}, undefined>;

package/dist/components/table/components/header/header.styles.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/table/components/header/header.types.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type HeaderProps = HTMLAttributes<HTMLTableSectionElement>;

package/dist/components/table/components/header/header.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/table/components/header/index.d.ts

@@ -0,0 +1,2 @@
+export { Header } from './header.component.js';
+export { type HeaderProps } from './header.types.js';

package/dist/components/table/components/header/index.js

@@ -0,0 +1 @@
+export { Header } from './header.component.js';

package/dist/components/table/components/header-cell/header-cell.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type HeaderCellProps } from './header-cell.types.js';
+export declare function HeaderCell({ className, children, ...props }: HeaderCellProps): JSX.Element;

package/dist/components/table/components/header-cell/header-cell.component.js

@@ -0,0 +1,28 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { useContext } from 'react';
+import { TableContext } from '../../table.component.js';
+import { styles as headerCellStyles } from './header-cell.styles.js';
+export function HeaderCell({ className , children , ...props }) {
+    const { bordered  } = useContext(TableContext);
+    const styles = headerCellStyles({
+        bordered
+    });
+    return React.createElement("th", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), children);
+}

package/dist/components/table/components/header-cell/header-cell.styles.d.ts

@@ -0,0 +1,19 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    bordered: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    bordered: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>;

package/dist/components/table/components/header-cell/header-cell.styles.js

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'text-text typography-body-10 border-hero border border-x-0 border-b-[3px] border-t-0 p-2 text-left align-bottom'
+    },
+    variants: {
+        bordered: {
+            true: {
+                base: 'border-x-1 border-t-1 border-x-border border-t-border'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/table/components/header-cell/header-cell.types.d.ts

@@ -0,0 +1,2 @@
+import { ThHTMLAttributes } from 'react';
+export type HeaderCellProps = ThHTMLAttributes<HTMLTableCellElement>;

package/dist/components/table/components/header-cell/header-cell.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/table/components/header-cell/index.d.ts

@@ -0,0 +1,2 @@
+export { HeaderCell } from './header-cell.component.js';
+export { type HeaderCellProps } from './header-cell.types.js';

package/dist/components/table/components/header-cell/index.js

@@ -0,0 +1 @@
+export { HeaderCell } from './header-cell.component.js';

package/dist/components/table/components/header-row/header-row.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type HeaderRowProps } from './header-row.types.js';
+export declare function HeaderRow({ className, children, ...props }: HeaderRowProps): JSX.Element;

package/dist/components/table/components/header-row/header-row.component.js

@@ -0,0 +1,23 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { styles } from './header-row.styles.js';
+export function HeaderRow({ className , children , ...props }) {
+    return React.createElement("tr", _extends({
+        className: styles({
+            className
+        })
+    }, props), children);
+}

package/dist/components/table/components/header-row/header-row.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {
+    responsiveVariants: string[];
+}, {}, undefined>;

package/dist/components/table/components/header-row/header-row.styles.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/table/components/header-row/header-row.types.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type HeaderRowProps = HTMLAttributes<HTMLTableRowElement>;

package/dist/components/table/components/header-row/header-row.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/table/components/header-row/index.d.ts

@@ -0,0 +1,2 @@
+export { HeaderRow } from './header-row.component.js';
+export { type HeaderRowProps } from './header-row.types.js';

package/dist/components/table/components/header-row/index.js

@@ -0,0 +1 @@
+export { HeaderRow } from './header-row.component.js';

package/dist/components/table/components/index.d.ts

@@ -0,0 +1,8 @@
+export * from './body/index.js';
+export * from './caption/index.js';
+export * from './cell/index.js';
+export * from './footer/index.js';
+export * from './header/index.js';
+export * from './header-cell/index.js';
+export * from './header-row/index.js';
+export * from './row/index.js';

package/dist/components/table/components/index.js

@@ -0,0 +1,8 @@
+export * from './body/index.js';
+export * from './caption/index.js';
+export * from './cell/index.js';
+export * from './footer/index.js';
+export * from './header/index.js';
+export * from './header-cell/index.js';
+export * from './header-row/index.js';
+export * from './row/index.js';

package/dist/components/table/components/row/index.d.ts

@@ -0,0 +1,2 @@
+export { Row } from './row.component.js';
+export { type RowProps } from './row.types.js';

package/dist/components/table/components/row/index.js

@@ -0,0 +1 @@
+export { Row } from './row.component.js';

package/dist/components/table/components/row/row.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type RowProps } from './row.types.js';
+export declare function Row({ className, children, highlighted, ...props }: RowProps): JSX.Element;