@techsio/ui-kit 0.0.0

package/dist/molecules/tabs.js

@@ -0,0 +1,211 @@
+import { jsx } from "react/jsx-runtime";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { connect, machine } from "@zag-js/tabs";
+import { createContext, useContext, useId } from "react";
+import { Button } from "../atoms/button.js";
+import { tv } from "../utils.js";
+const tabsVariants = tv({
+    slots: {
+        root: [
+            'flex w-full',
+            'data-[orientation=horizontal]:flex-col',
+            'data-[orientation=vertical]:flex-row',
+            'bg-tabs-bg',
+            'rounded-tabs'
+        ],
+        list: [
+            'relative flex',
+            'bg-tabs-list-bg',
+            'data-[orientation=horizontal]:flex-row',
+            'data-[orientation=vertical]:flex-col'
+        ],
+        trigger: [
+            'relative flex items-center justify-center',
+            'text-tabs-trigger-fg',
+            'rounded-tabs-trigger',
+            'cursor-pointer',
+            'hover:bg-tabs-trigger-bg-hover',
+            'focus-visible:outline-none',
+            'focus-visible:ring',
+            'focus-visible:ring-tabs-ring',
+            'data-[selected]:text-tabs-trigger-fg-selected',
+            'data-[disabled]:opacity-tabs-disabled data-[disabled]:cursor-not-allowed'
+        ],
+        indicator: [
+            'absolute bg-tabs-indicator-bg rounded-tabs-indicator',
+            'data-[orientation=vertical]:h-(--height) data-[orientation=horizontal]:w-(--width)',
+            'data-[orientation=vertical]:w-tabs-indicator data-[orientation=horizontal]:h-tabs-indicator',
+            'data-[orientation=vertical]:start-0 data-[orientation=horizontal]:bottom-0'
+        ],
+        content: [
+            'text-tabs-content-fg',
+            'outline-none',
+            'focus-visible:ring',
+            'focus-visible:ring-tabs-ring'
+        ]
+    },
+    variants: {
+        variant: {
+            default: {
+                list: '',
+                indicator: 'hidden'
+            },
+            line: {
+                list: 'border-b-(length:--border-width-tabs) border-tabs-border',
+                indicator: 'data-[orientation=horizontal]:-bottom-(--border-width-tabs)'
+            },
+            solid: {
+                trigger: 'data-[selected]:bg-tabs-trigger-bg-selected data-[selected]:text-tabs-trigger-solid-fg',
+                indicator: 'hidden'
+            },
+            outline: {
+                trigger: [
+                    'border-(length:--border-width-tabs) border-transparent',
+                    'data-[selected]:border-tabs-border-selected',
+                    'data-[selected]:bg-tabs-trigger-bg-outline-selected'
+                ],
+                indicator: 'hidden'
+            }
+        },
+        size: {
+            sm: {
+                trigger: 'text-tabs-trigger-sm p-tabs-trigger-sm',
+                content: 'p-tabs-content-sm text-tabs-content-sm'
+            },
+            md: {
+                trigger: 'text-tabs-trigger-md p-tabs-trigger-md',
+                content: 'p-tabs-content-md text-tabs-content-md'
+            },
+            lg: {
+                trigger: 'text-tabs-trigger-lg p-tabs-trigger-lg',
+                content: 'p-tabs-content-lg text-tabs-content-lg'
+            }
+        },
+        fitted: {
+            true: {
+                list: 'w-full',
+                trigger: 'flex-1'
+            }
+        },
+        justify: {
+            start: {
+                list: 'justify-start'
+            },
+            center: {
+                list: 'justify-center'
+            },
+            end: {
+                list: 'justify-end'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md',
+        fitted: false
+    }
+});
+const TabsContext = /*#__PURE__*/ createContext(null);
+function useTabsContext() {
+    const context = useContext(TabsContext);
+    if (!context) throw new Error('Tabs components must be used within Tabs');
+    return context;
+}
+function Tabs({ id, defaultValue, value, orientation = 'horizontal', dir = 'ltr', activationMode = 'automatic', loopFocus = true, onValueChange, variant, size, fitted, justify, children, ref, className, ...props }) {
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
+    const service = useMachine(machine, {
+        id: uniqueId,
+        value,
+        defaultValue,
+        orientation,
+        dir,
+        activationMode,
+        loopFocus,
+        onValueChange: ({ value })=>{
+            onValueChange?.(value);
+        }
+    });
+    const api = connect(service, normalizeProps);
+    const styles = tabsVariants({
+        variant,
+        size,
+        fitted,
+        justify
+    });
+    return /*#__PURE__*/ jsx(TabsContext.Provider, {
+        value: {
+            api,
+            variant,
+            size,
+            fitted,
+            justify,
+            styles
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            className: styles.root({
+                className
+            }),
+            ...api.getRootProps(),
+            ...props,
+            children: children
+        })
+    });
+}
+Tabs.List = function({ children, ref, className, ...props }) {
+    const { api, styles } = useTabsContext();
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: styles.list({
+            className
+        }),
+        ...api.getListProps(),
+        ...props,
+        children: children
+    });
+};
+Tabs.Trigger = function({ value, disabled, children, ref, className, ...props }) {
+    const { api, styles } = useTabsContext();
+    return /*#__PURE__*/ jsx(Button, {
+        ref: ref,
+        theme: "borderless",
+        className: styles.trigger({
+            className
+        }),
+        ...api.getTriggerProps({
+            value,
+            disabled
+        }),
+        "data-disabled": disabled || void 0,
+        ...props,
+        children: children
+    });
+};
+Tabs.Content = function({ value, children, ref, className, ...props }) {
+    const { api, styles } = useTabsContext();
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: styles.content({
+            className
+        }),
+        ...api.getContentProps({
+            value
+        }),
+        ...props,
+        children: children
+    });
+};
+Tabs.Indicator = function({ ref, className, ...props }) {
+    const { api, styles } = useTabsContext();
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: styles.indicator({
+            className
+        }),
+        ...api.getIndicatorProps(),
+        ...props
+    });
+};
+Tabs.displayName = 'Tabs';
+export { Tabs };

package/dist/molecules/toast.js

@@ -0,0 +1,126 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal, normalizeProps, useMachine } from "@zag-js/react";
+import { connect, createStore, group as toast_group, machine } from "@zag-js/toast";
+import { useId } from "react";
+import { Button } from "../atoms/button.js";
+import { tv } from "../utils.js";
+const toastVariants = tv({
+    slots: {
+        root: [
+            'flex flex-col relative rounded-toast-root',
+            'border-(length:--border-width-toast) bg-toast-bg shadow-lg',
+            'w-toast-width overflow-hidden p-toast-root',
+            'data-[type=error]:bg-toast-error-bg data-[type=error]:border-toast-error-border',
+            'data-[type=success]:bg-toast-success-bg data-[type=success]:border-toast-success-border',
+            'data-[type=info]:bg-toast-info-bg data-[type=info]:border-toast-info-border',
+            'data-[type=warning]:bg-toast-warning-bg data-[type=warning]:border-toast-warning-border',
+            'translate-x-[var(--x)] translate-y-[var(--y)]',
+            'scale-[var(--scale)] opacity-[var(--opacity)]',
+            'z-[var(--z-index)] h-[var(--height)]',
+            'will-change-[translate,opacity,scale]',
+            'transition-[translate,scale,opacity] duration-400'
+        ],
+        group: 'flex flex-col relative',
+        header: 'flex relative items-center gap-toast-content',
+        icon: [
+            'flex-shrink-0 text-toast-icon-size',
+            'data-[type=error]:text-toast-error-icon data-[type=error]:token-icon-toast-error',
+            'data-[type=success]:text-toast-success-icon data-[type=success]:token-icon-toast-success',
+            'data-[type=info]:text-toast-info-icon data-[type=info]:token-icon-toast-info',
+            'data-[type=warning]:text-toast-warning-icon data-[type=warning]:token-icon-toast-warning'
+        ],
+        title: [
+            'font-toast-title text-toast-title-size text-toast-fg',
+            'data-[type=error]:text-toast-error-title',
+            'data-[type=success]:text-toast-success-title',
+            'data-[type=info]:text-toast-info-title',
+            'data-[type=warning]:text-toast-warning-title'
+        ],
+        description: [
+            "text-toast-description-size text-toast-fg mt-toast-description-gap"
+        ],
+        closeButton: [
+            'grid place-items-center flex-shrink-0 ms-auto py-0 px-0',
+            'cursor-pointer',
+            'text-toast-close-fg hover:text-toast-close-fg-hover'
+        ]
+    }
+});
+function Toast({ actor, index, parent, placement }) {
+    const composedProps = {
+        ...actor,
+        index,
+        parent,
+        placement
+    };
+    const service = useMachine(machine, composedProps);
+    const api = connect(service, normalizeProps);
+    const { root, header, icon, title, description, closeButton } = toastVariants();
+    return /*#__PURE__*/ jsxs("div", {
+        className: root(),
+        ...api.getRootProps(),
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                ...api.getGhostBeforeProps()
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: header(),
+                ...api.getTitleProps(),
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: icon(),
+                        "data-type": api.type
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: title(),
+                        "data-type": api.type,
+                        children: 'loading' === api.type ? 'loading...' : api.title
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        theme: "borderless",
+                        className: closeButton(),
+                        ...api.getCloseTriggerProps(),
+                        icon: "token-icon-toast-close"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: description(),
+                ...api.getDescriptionProps(),
+                "data-type": api.type,
+                children: api.description
+            }),
+            /*#__PURE__*/ jsx("span", {
+                ...api.getGhostAfterProps()
+            })
+        ]
+    });
+}
+const toaster = createStore({
+    placement: 'bottom-end',
+    gap: 16,
+    offsets: '24px'
+});
+function Toaster() {
+    const service = useMachine(toast_group.machine, {
+        id: useId(),
+        store: toaster
+    });
+    const api = toast_group.connect(service, normalizeProps);
+    const { group } = toastVariants();
+    return /*#__PURE__*/ jsx(Portal, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: group(),
+            ...api.getGroupProps(),
+            children: api.getToasts().map((toast, index)=>/*#__PURE__*/ jsx(Toast, {
+                    actor: toast,
+                    index: index,
+                    parent: service
+                }, toast.id))
+        })
+    });
+}
+function useToast() {
+    return toaster;
+}
+export { Toast, Toaster, toaster, useToast };