npm - @westpac/ui - Versions diffs - 0.1.0 → 0.2.0 - Mend

@@ -0,0 +1,38 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'flex',
+        tabList: 'relative z-10 flex bg-white'
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                base: 'flex-col',
+                tabList: 'mb-[-1px] flex-row'
+            },
+            vertical: {
+                base: 'flex-row',
+                tabList: 'mr-[-1px] flex-col'
+            }
+        },
+        look: {
+            default: {
+                tabList: 'gap-[2px]'
+            },
+            material: ''
+        },
+        sticky: {
+            true: {
+                tabList: 'sticky shadow-md shadow-black/10'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

@@ -0,0 +1,28 @@
+import { SpectrumTabsProps } from '@react-types/tabs';
+import { HTMLAttributes, ReactElement } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { TabProps } from './components/index.js';
+import { styles } from './tabs.styles.js';
+export type TabsProps<T = any> = SpectrumTabsProps<T> & VariantProps<typeof styles> & {
+    /**
+     * Children
+     */
+    children: ReactElement | ReactElement[];
+    /**
+     * Colors
+     */
+    color?: TabProps['color'];
+    /**
+     * Stretch the tab to fill the whole content
+     */
+    justify?: boolean;
+    /**
+     * set the offset for the sticky tab
+     */
+    stickyOffset?: {
+        bottom?: string;
+        left?: string;
+        right?: string;
+        top?: string;
+    };
+} & HTMLAttributes<HTMLDivElement>;

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare const Textarea: React.ForwardRefExoticComponent<import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+}, undefined, "form-control read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline", {
+    responsiveVariants: string[];
+}, {
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+}, undefined>> & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & React.RefAttributes<HTMLTextAreaElement>>;

@@ -0,0 +1,27 @@
+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, { forwardRef } from 'react';
+import { styles } from './textarea.styles.js';
+function BaseTextarea({ className , size ='medium' , invalid =false , ...props }, ref) {
+    return React.createElement("textarea", _extends({
+        ref: ref,
+        className: styles({
+            className,
+            size,
+            invalid
+        })
+    }, props));
+}
+export const Textarea = forwardRef(BaseTextarea);

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Textarea } from './textarea.component.js';
+declare const meta: Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Invalid usage example
+ */
+export declare const InvalidStory: Story;
+/**
+ * > Disabled usage example
+ */
+export declare const DisabledStory: Story;
+/**
+ * > ReadOnly usage example
+ */
+export declare const ReadOnlyStory: Story;

	@@ -0,0 +1,2 @@
1	+ export { Textarea } from './textarea.component.js';
2	+ export { type TextareaProps } from './textarea.types.js';

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

@@ -0,0 +1,38 @@
+import { Textarea } from './textarea.component.js';
+const meta = {
+    title: 'Example/Textarea',
+    component: Textarea,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "flex justify-center p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        placeholder: 'placeholder',
+        size: 'medium'
+    }
+};
+export const InvalidStory = {
+    args: {
+        invalid: true
+    }
+};
+export const DisabledStory = {
+    args: {
+        disabled: true
+    }
+};
+export const ReadOnlyStory = {
+    args: {
+        readOnly: true
+    }
+};

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline',
+    variants: {
+        size: {
+            small: 'form-control-small min-h-[3.375rem]',
+            medium: 'form-control-medium min-h-[3.375rem]',
+            large: 'form-control-large min-h-[4.125rem]',
+            xlarge: 'form-control-xlarge min-h-[4.5rem]'
+        },
+        invalid: {
+            true: 'border-danger',
+            false: 'border-borderDark'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

@@ -0,0 +1,4 @@
+import { TextareaHTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './textarea.styles.js';
+export type TextareaProps = VariantProps<typeof styles> & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;

@@ -1,2 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
 import { type VisuallyHiddenProps } from './visually-hidden.types.js';
 export declare function VisuallyHidden({ className, tag: Tag, children, ...props }: VisuallyHiddenProps): JSX.Element;

@westpac/ui 0.1.0 → 0.2.0