@vinyasa/feedback 1.0.21

package/dist/esm/147.js

@@ -0,0 +1,164 @@
+import "./147.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useSyncExternalStore } from "react";
+import { XIcon } from "@vinyasa/icons";
+import { createRuntimeFn } from "./953.js";
+import { statusIcons } from "./277.js";
+var body = '_1xil9gel';
+var closeButton = '_1xil9geo';
+var description = '_1xil9gen';
+var enterFromBottom = '_1xil9geh';
+var enterFromTop = '_1xil9geg';
+var exitToBottom = '_1xil9gej';
+var exitToTop = '_1xil9gei';
+var icon = '_1xil9gek';
+var stack = createRuntimeFn({
+    defaultClassName: '_1xil9ge0',
+    variantClassNames: {
+        position: {
+            'top-left': '_1xil9ge1',
+            'top-center': '_1xil9ge2',
+            'top-right': '_1xil9ge3',
+            'bottom-left': '_1xil9ge4',
+            'bottom-center': '_1xil9ge5',
+            'bottom-right': '_1xil9ge6'
+        }
+    },
+    defaultVariants: {
+        position: 'bottom-right'
+    },
+    compoundVariants: []
+});
+var title = '_1xil9gem';
+var toastCard = createRuntimeFn({
+    defaultClassName: '_1xil9ge7',
+    variantClassNames: {
+        status: {
+            info: '_1xil9ge8',
+            success: '_1xil9ge9',
+            warning: '_1xil9gea',
+            error: '_1xil9geb'
+        }
+    },
+    defaultVariants: {
+        status: 'info'
+    },
+    compoundVariants: []
+});
+const TOAST_EXIT_DURATION_MS = 150;
+let toasts = [];
+const listeners = new Set();
+let nextId = 0;
+const notify = ()=>{
+    for (const listener of listeners)listener();
+};
+const subscribe = (listener)=>{
+    listeners.add(listener);
+    return ()=>{
+        listeners.delete(listener);
+    };
+};
+const getSnapshot = ()=>toasts;
+const show = (options)=>{
+    const id = String(nextId);
+    nextId += 1;
+    const item = {
+        id,
+        status: options.status ?? 'info',
+        title: options.title,
+        description: options.description,
+        duration: options.duration ?? 4000,
+        exiting: false
+    };
+    toasts = [
+        ...toasts,
+        item
+    ];
+    notify();
+    return id;
+};
+const dismiss = (id)=>{
+    const target = toasts.find((item)=>item.id === id);
+    if (!target || target.exiting) return;
+    toasts = toasts.map((item)=>item.id === id ? {
+            ...item,
+            exiting: true
+        } : item);
+    notify();
+    setTimeout(()=>{
+        toasts = toasts.filter((item)=>item.id !== id);
+        notify();
+    }, TOAST_EXIT_DURATION_MS);
+};
+const toast = {
+    show: show,
+    dismiss: dismiss
+};
+const ToastItemView = ({ id, status, title: itemTitle, description: itemDescription, duration, exiting, edge })=>{
+    useEffect(()=>{
+        if (duration <= 0) return;
+        const timer = setTimeout(()=>{
+            dismiss(id);
+        }, duration);
+        return ()=>{
+            clearTimeout(timer);
+        };
+    }, [
+        id,
+        duration
+    ]);
+    const Icon = statusIcons[status];
+    const animationClass = exiting ? 'top' === edge ? exitToTop : exitToBottom : 'top' === edge ? enterFromTop : enterFromBottom;
+    return /*#__PURE__*/ jsxs("div", {
+        className: `${toastCard({
+            status
+        })} ${animationClass}`,
+        role: "status",
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                className: icon,
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: body,
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        className: title,
+                        children: itemTitle
+                    }),
+                    itemDescription ? /*#__PURE__*/ jsx("p", {
+                        className: description,
+                        children: itemDescription
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: closeButton,
+                onClick: ()=>{
+                    dismiss(id);
+                },
+                "aria-label": "Dismiss",
+                children: /*#__PURE__*/ jsx(XIcon, {})
+            })
+        ]
+    });
+};
+const toaster_ToastItemView = ToastItemView;
+const emptySnapshot = [];
+const Toaster = ({ position = 'bottom-right' })=>{
+    const items = useSyncExternalStore(subscribe, getSnapshot, ()=>emptySnapshot);
+    const edge = position.startsWith('top') ? 'top' : 'bottom';
+    return /*#__PURE__*/ jsx("div", {
+        className: stack({
+            position
+        }),
+        children: items.map((item)=>/*#__PURE__*/ jsx(toaster_ToastItemView, {
+                ...item,
+                edge: edge
+            }, item.id))
+    });
+};
+Toaster.displayName = 'Toaster';
+const toaster_Toaster = Toaster;
+export { toast, toaster_Toaster as Toaster };

package/dist/esm/158.css

@@ -0,0 +1,21 @@
+._1vw410a0 {
+  position: relative;
+}
+
+._1vw410a1 {
+  z-index: var(--vinyasa-z-index-overlay);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+._1vw410a2 {
+  background-color: var(--vinyasa-secondary);
+  opacity: .8;
+  border-radius: inherit;
+  position: absolute;
+  inset: 0;
+}
+

package/dist/esm/158.js

@@ -0,0 +1,31 @@
+import "./158.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import box from "@vinyasa/layout/box";
+import { forwardRef } from "react";
+import { Spinner as spinner_Spinner } from "./703.js";
+var backdrop = '_1vw410a2';
+var overlay = '_1vw410a1';
+var wrapper = '_1vw410a0';
+const LoadingOverlay = /*#__PURE__*/ forwardRef(({ visible, className, children, ...rest }, ref)=>{
+    const classes = className ? `${wrapper} ${className}` : wrapper;
+    return /*#__PURE__*/ jsxs(box, {
+        ref: ref,
+        className: classes,
+        ...rest,
+        children: [
+            children,
+            visible ? /*#__PURE__*/ jsxs("div", {
+                className: overlay,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: backdrop
+                    }),
+                    /*#__PURE__*/ jsx(spinner_Spinner, {})
+                ]
+            }) : null
+        ]
+    });
+});
+LoadingOverlay.displayName = 'LoadingOverlay';
+const loading_overlay_LoadingOverlay = LoadingOverlay;
+export { loading_overlay_LoadingOverlay as LoadingOverlay };

package/dist/esm/266.css

@@ -0,0 +1,30 @@
+@keyframes _1af39sp0 {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+._1af39sp1 {
+  display: block;
+}
+
+._1af39sp2 {
+  animation: 1s linear infinite _1af39sp0;
+}
+
+._1af39sp3 {
+  stroke: var(--vinyasa-secondary);
+  fill: none;
+}
+
+._1af39sp4 {
+  stroke: var(--vinyasa-primary);
+  fill: none;
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard);
+}
+

package/dist/esm/266.js

@@ -0,0 +1,75 @@
+import "./266.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { resolveSpacingStyle } from "./474.js";
+var fill = '_1af39sp4';
+var indeterminate = '_1af39sp2';
+var svg = '_1af39sp1';
+var track = '_1af39sp3';
+const CircularProgress = /*#__PURE__*/ forwardRef(({ value, max = 100, size = 32, strokeWidth = 4, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, ...rest }, ref)=>{
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const isIndeterminate = void 0 === value;
+    const percent = isIndeterminate ? 25 : Math.min(100, Math.max(0, value / max * 100));
+    const dashOffset = circumference - percent / 100 * circumference;
+    const computedStyle = {
+        ...resolveSpacingStyle({
+            m,
+            mt,
+            mr,
+            mb,
+            ml,
+            mx,
+            my,
+            p,
+            pt,
+            pr,
+            pb,
+            pl,
+            px,
+            py
+        }),
+        ...style
+    };
+    const classes = [
+        svg,
+        isIndeterminate ? indeterminate : null,
+        className
+    ].filter(Boolean).join(' ');
+    const center = size / 2;
+    return /*#__PURE__*/ jsxs("svg", {
+        ref: ref,
+        role: "progressbar",
+        "aria-valuenow": isIndeterminate ? void 0 : value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        width: size,
+        height: size,
+        viewBox: `0 0 ${String(size)} ${String(size)}`,
+        className: classes,
+        style: computedStyle,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx("circle", {
+                className: track,
+                cx: center,
+                cy: center,
+                r: radius,
+                strokeWidth: strokeWidth
+            }),
+            /*#__PURE__*/ jsx("circle", {
+                className: fill,
+                cx: center,
+                cy: center,
+                r: radius,
+                strokeWidth: strokeWidth,
+                strokeDasharray: circumference,
+                strokeDashoffset: dashOffset,
+                transform: `rotate(-90 ${String(center)} ${String(center)})`
+            })
+        ]
+    });
+});
+CircularProgress.displayName = 'CircularProgress';
+const circular_progress_CircularProgress = CircularProgress;
+export { circular_progress_CircularProgress as CircularProgress };

package/dist/esm/277.js

@@ -0,0 +1,8 @@
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XIcon } from "@vinyasa/icons";
+const statusIcons = {
+    info: InfoIcon,
+    success: CheckCircleIcon,
+    warning: AlertTriangleIcon,
+    error: XIcon
+};
+export { statusIcons };

package/dist/esm/288.css

@@ -0,0 +1,7 @@
+.dmnndp0 {
+  color: var(--vinyasa-text-muted);
+  margin-bottom: var(--vinyasa-space2);
+  font-size: 3rem;
+  display: flex;
+}
+

package/dist/esm/288.js

@@ -0,0 +1,38 @@
+import "./288.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Center, Stack } from "@vinyasa/layout";
+import { Heading, Paragraph } from "@vinyasa/typography";
+import { forwardRef } from "react";
+var iconWrapper = 'dmnndp0';
+const EmptyState = /*#__PURE__*/ forwardRef(({ icon, title, description, action, p = 6, ...rest }, ref)=>/*#__PURE__*/ jsx(Center, {
+        ref: ref,
+        p: p,
+        ...rest,
+        children: /*#__PURE__*/ jsxs(Stack, {
+            gap: 2,
+            align: "center",
+            style: {
+                textAlign: 'center',
+                maxWidth: '24rem'
+            },
+            children: [
+                icon ? /*#__PURE__*/ jsx("span", {
+                    className: iconWrapper,
+                    children: icon
+                }) : null,
+                /*#__PURE__*/ jsx(Heading, {
+                    as: "h3",
+                    size: "lg",
+                    children: title
+                }),
+                description ? /*#__PURE__*/ jsx(Paragraph, {
+                    color: "muted",
+                    children: description
+                }) : null,
+                action
+            ]
+        })
+    }));
+EmptyState.displayName = 'EmptyState';
+const empty_state_EmptyState = EmptyState;
+export { empty_state_EmptyState as EmptyState };

package/dist/esm/474.js

@@ -0,0 +1,76 @@
+import { themeContract } from "@vinyasa/tokens";
+const space = {
+    1: themeContract.space1,
+    2: themeContract.space2,
+    3: themeContract.space3,
+    4: themeContract.space4,
+    5: themeContract.space5,
+    6: themeContract.space6
+};
+const spacingPropertyMap = [
+    [
+        'm',
+        'margin'
+    ],
+    [
+        'mx',
+        'marginInline'
+    ],
+    [
+        'my',
+        'marginBlock'
+    ],
+    [
+        'mt',
+        'marginTop'
+    ],
+    [
+        'mr',
+        'marginRight'
+    ],
+    [
+        'mb',
+        'marginBottom'
+    ],
+    [
+        'ml',
+        'marginLeft'
+    ],
+    [
+        'p',
+        'padding'
+    ],
+    [
+        'px',
+        'paddingInline'
+    ],
+    [
+        'py',
+        'paddingBlock'
+    ],
+    [
+        'pt',
+        'paddingTop'
+    ],
+    [
+        'pr',
+        'paddingRight'
+    ],
+    [
+        'pb',
+        'paddingBottom'
+    ],
+    [
+        'pl',
+        'paddingLeft'
+    ]
+];
+const resolveSpacingStyle = (props)=>{
+    const style = {};
+    for (const [propKey, cssProperty] of spacingPropertyMap){
+        const value = props[propKey];
+        if (void 0 !== value) style[cssProperty] = space[value];
+    }
+    return style;
+};
+export { resolveSpacingStyle };

package/dist/esm/495.css

@@ -0,0 +1,39 @@
+@keyframes i625lp0 {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.i625lp1 {
+  background-color: var(--vinyasa-secondary);
+  background-image: linear-gradient(90deg, var(--vinyasa-secondary) 25%, var(--vinyasa-border-color-default) 50%, var(--vinyasa-secondary) 75%);
+  border-radius: var(--vinyasa-radius-sm);
+  background-size: 200% 100%;
+  display: block;
+}
+
+.i625lp2 {
+  border-radius: var(--vinyasa-radius-full);
+}
+
+.i625lp3 {
+  animation: 1.5s ease-in-out infinite i625lp0;
+}
+
+.i625lp4 {
+  position: relative;
+}
+
+.i625lp5 {
+  position: absolute;
+  inset: 0;
+}
+
+.i625lp6 {
+  visibility: hidden;
+}
+

package/dist/esm/495.js

@@ -0,0 +1,61 @@
+import "./495.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import box from "@vinyasa/layout/box";
+import { forwardRef } from "react";
+import { createRuntimeFn } from "./953.js";
+var hiddenContent = 'i625lp6';
+var overlay = 'i625lp5';
+var skeleton = createRuntimeFn({
+    defaultClassName: 'i625lp1',
+    variantClassNames: {
+        circle: {
+            true: 'i625lp2'
+        },
+        animate: {
+            true: 'i625lp3'
+        }
+    },
+    defaultVariants: {
+        animate: true
+    },
+    compoundVariants: []
+});
+var wrapper = 'i625lp4';
+const Skeleton = /*#__PURE__*/ forwardRef(({ circle, animate, width, height, children, visible = true, className, style, ...rest }, ref)=>{
+    const skeletonClasses = skeleton({
+        circle,
+        animate
+    });
+    if (void 0 !== children) return /*#__PURE__*/ jsxs(box, {
+        ref: ref,
+        className: `${wrapper} ${className ?? ''}`.trim(),
+        style: style,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: visible ? hiddenContent : void 0,
+                "aria-hidden": visible,
+                children: children
+            }),
+            visible ? /*#__PURE__*/ jsx("div", {
+                className: `${skeletonClasses} ${overlay}`,
+                "aria-hidden": "true"
+            }) : null
+        ]
+    });
+    const classes = className ? `${skeletonClasses} ${className}` : skeletonClasses;
+    return /*#__PURE__*/ jsx(box, {
+        ref: ref,
+        "aria-hidden": "true",
+        className: classes,
+        style: {
+            width,
+            height,
+            ...style
+        },
+        ...rest
+    });
+});
+Skeleton.displayName = 'Skeleton';
+const skeleton_Skeleton = Skeleton;
+export { skeleton_Skeleton as Skeleton };

package/dist/esm/516.css

@@ -0,0 +1,29 @@
+._14g63aj0 {
+  align-items: center;
+  gap: var(--vinyasa-space1);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  display: inline-flex;
+}
+
+._14g63aj1 {
+  color: var(--vinyasa-status-info-text);
+}
+
+._14g63aj2 {
+  color: var(--vinyasa-status-success-text);
+}
+
+._14g63aj3 {
+  color: var(--vinyasa-status-warning-text);
+}
+
+._14g63aj4 {
+  color: var(--vinyasa-status-error-text);
+}
+
+._14g63aj5 {
+  flex-shrink: 0;
+  margin-top: -.05em;
+}
+

package/dist/esm/516.js

@@ -0,0 +1,66 @@
+import "./516.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { createRuntimeFn } from "./953.js";
+import { statusIcons } from "./277.js";
+import { resolveSpacingStyle } from "./474.js";
+var icon = '_14g63aj5';
+var inlineMessage = createRuntimeFn({
+    defaultClassName: '_14g63aj0',
+    variantClassNames: {
+        status: {
+            info: '_14g63aj1',
+            success: '_14g63aj2',
+            warning: '_14g63aj3',
+            error: '_14g63aj4'
+        }
+    },
+    defaultVariants: {
+        status: 'info'
+    },
+    compoundVariants: []
+});
+const InlineMessage = /*#__PURE__*/ forwardRef(({ status = 'info', m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children, ...rest }, ref)=>{
+    const Icon = statusIcons[status];
+    const classes = className ? `${inlineMessage({
+        status
+    })} ${className}` : inlineMessage({
+        status
+    });
+    const computedStyle = {
+        ...resolveSpacingStyle({
+            m,
+            mt,
+            mr,
+            mb,
+            ml,
+            mx,
+            my,
+            p,
+            pt,
+            pr,
+            pb,
+            pl,
+            px,
+            py
+        }),
+        ...style
+    };
+    return /*#__PURE__*/ jsxs("span", {
+        ref: ref,
+        role: "alert",
+        className: classes,
+        style: computedStyle,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                className: icon,
+                "aria-hidden": "true"
+            }),
+            children
+        ]
+    });
+});
+InlineMessage.displayName = 'InlineMessage';
+const inline_message_InlineMessage = InlineMessage;
+export { inline_message_InlineMessage as InlineMessage };

package/dist/esm/703.css

@@ -0,0 +1,34 @@
+@keyframes _8naz5u0 {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+._8naz5u1 {
+  color: var(--vinyasa-primary);
+  border: .15em solid;
+  border-right-color: #0000;
+  border-radius: 9999px;
+  animation: .6s linear infinite _8naz5u0;
+  display: inline-block;
+}
+
+._8naz5u3 {
+  width: 1rem;
+  height: 1rem;
+}
+
+._8naz5u4 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+._8naz5u5 {
+  width: 2rem;
+  height: 2rem;
+}
+