@westpac/ui 0.1.0

package/dist/components/well/well.stories.d.ts

@@ -0,0 +1,25 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Well } from './well.component.js';
+declare const meta: Meta<typeof Well>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultUsage: Story;
+/**
+ * > Nested usage example
+ */
+export declare const NestedUsage: Story;
+/**
+ * > Tag as <article>
+ */
+export declare const CustomTagUsage: Story;
+/**
+ * > Nested tag as <article>
+ */
+export declare const CustomTagNestedUsage: Story;
+/**
+ * > Tag as <aside> with child <san>, passed as a component
+ */
+export declare const ComplexCustomTagNestedUsage: Story;

package/dist/components/well/well.stories.js

@@ -0,0 +1,51 @@
+import { Well } from './well.component.js';
+const meta = {
+    title: 'Example/Well',
+    component: Well,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                style: {
+                    padding: '3rem'
+                }
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export default meta;
+export const DefaultUsage = {
+    args: {
+        children: "Look, I'm in a well"
+    }
+};
+export const NestedUsage = {
+    args: {
+        children: React.createElement(React.Fragment, null, "I am outside", React.createElement(Well, {
+            color: "white"
+        }, "I am inside"))
+    }
+};
+export const CustomTagUsage = {
+    args: {
+        tag: 'article',
+        children: "Look, I'm in a well"
+    }
+};
+export const CustomTagNestedUsage = {
+    args: {
+        tag: 'article',
+        children: React.createElement(React.Fragment, null, "I am outside", React.createElement(Well, {
+            color: "white"
+        }, "I am inside"))
+    }
+};
+export const ComplexCustomTagNestedUsage = {
+    args: {
+        tag: 'aside',
+        children: React.createElement("span", null, "Look, I'm in a well")
+    }
+};

package/dist/components/well/well.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    color: {
+        light: string;
+        white: string;
+    };
+}, undefined, "rounded border border-border p-2 sm:p-4", {
+    responsiveVariants: string[];
+}, {
+    color: {
+        light: string;
+        white: string;
+    };
+}, undefined>;

package/dist/components/well/well.styles.js

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'rounded border border-border p-2 sm:p-4',
+    variants: {
+        color: {
+            light: 'bg-light',
+            white: 'bg-white'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/well/well.types.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './well.styles.js';
+export type WellProps = {
+    /**
+     * Well's content
+     */
+    children: ReactNode;
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & HTMLAttributes<Element> & VariantProps<typeof styles>;

package/dist/components/well/well.types.js

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