@vinyasa/feedback 1.0.21

package/README.md

@@ -0,0 +1,134 @@
+# @vinyasa/feedback
+
+11 feedback primitives: Spinner, ProgressBar, CircularProgress, Alert, Banner, InlineMessage, Skeleton, LoadingOverlay, EmptyState, ErrorBoundary, Toaster (+ the `toast` imperative API).
+
+## Installation
+
+```bash
+pnpm add @vinyasa/feedback @vinyasa/layout @vinyasa/typography @vinyasa/icons @vinyasa/button @vinyasa/tokens react react-dom
+```
+
+This is the one package that sits on top of every other category — it composes `@vinyasa/layout` (Box, Stack, Center), `@vinyasa/typography` (Heading, Paragraph), `@vinyasa/icons` (status icons), and `@vinyasa/button` (action slots), rather than being a peer to them. All five are peer dependencies. Rendering requires a `VinyasaProvider` (from `@vinyasa/tokens`) above these components in the tree — including `<Toaster />`, which renders in place (not via a portal — see its own docs below) and so must stay inside the same `VinyasaProvider` subtree as everything else.
+
+## New tokens this package introduces
+
+Alert/Banner/InlineMessage/Toast share one status system — four pale-background + readable-text pairs, purpose-built for status communication (distinct from `primary`/`secondary`/`tertiary`, which are Button's brand-hierarchy roles, and from the existing solid `error`/`onError` pair, which is built for Button's loud danger variant, not a pale alert box):
+
+| Token               | Value     | Source               |
+| ------------------- | --------- | -------------------- |
+| `statusInfoBg`      | `#dbeafe` | existing `blue[100]` |
+| `statusInfoText`    | `#1d4ed8` | existing `blue[700]` |
+| `statusSuccessBg`   | `#dcfce7` | new `green[100]`     |
+| `statusSuccessText` | `#15803d` | new `green[700]`     |
+| `statusWarningBg`   | `#fef3c7` | new `amber[100]`     |
+| `statusWarningText` | `#b45309` | new `amber[700]`     |
+| `statusErrorBg`     | `#fee2e2` | existing `red[100]`  |
+| `statusErrorText`   | `#dc2626` | existing `red[600]`  |
+
+Everything else (Spinner, Skeleton, both progress components, LoadingOverlay) reuses existing tokens — `primary`/`secondary`/`borderColorDefault`/`radiusFull`/`elevationOverlay`/`zIndexOverlay`/`zIndexToast`.
+
+## Spacing
+
+Every component accepts the same margin/padding props as `@vinyasa/layout` — see [its README](../layout/README.md#spacing) for the full prop and token tables.
+
+## Usage
+
+### Spinner
+
+```tsx
+<Spinner size="md" />
+```
+
+A public, standalone spinner — distinct from the private one `@vinyasa/button` already uses internally for its own `loading` prop, not a shared dependency between the two.
+
+### ProgressBar, CircularProgress
+
+```tsx
+<ProgressBar value={60} />
+<CircularProgress value={60} />
+<CircularProgress />   {/* indeterminate — omit value */}
+```
+
+Both expose `role="progressbar"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`.
+
+### Alert, Banner, InlineMessage
+
+One shared status vocabulary — `status`: `info` / `success` / `warning` / `error` — differing only in layout: `Alert` is boxed (icon + title + description), `Banner` is edge-to-edge (for a page/section top), `InlineMessage` is bare (icon + colored text, e.g. under a form field).
+
+```tsx
+<Alert status="success" title="Saved" description="Your changes have been saved." />
+<Banner status="warning">Scheduled maintenance tonight at 10pm.</Banner>
+<InlineMessage status="error">This field is required.</InlineMessage>
+```
+
+### Skeleton
+
+```tsx
+<Skeleton width="100%" height="1rem" />
+<Skeleton circle width="3rem" height="3rem" />
+```
+
+### LoadingOverlay
+
+```tsx
+<LoadingOverlay visible={isLoading}>
+	<Content />
+</LoadingOverlay>
+```
+
+### EmptyState
+
+```tsx
+<EmptyState
+	icon={<InboxIcon />}
+	title="No results"
+	description="Try adjusting your filters."
+	action={<Button>Clear filters</Button>}
+/>
+```
+
+### ErrorBoundary
+
+The one class component in the system — `getDerivedStateFromError`/`componentDidCatch` have no hook equivalent.
+
+```tsx
+<ErrorBoundary fallback={<EmptyState title="Something went wrong" />}>
+	<App />
+</ErrorBoundary>
+```
+
+### Toaster + toast
+
+An imperative API: mount one `<Toaster />` inside `VinyasaProvider`, near the app root, then call `toast.show()` from anywhere.
+
+```tsx
+// once, inside VinyasaProvider, near the app root
+<Toaster position="bottom-right" />;
+
+// from anywhere
+import { toast } from '@vinyasa/feedback';
+toast.show({ status: 'success', title: 'Saved' });
+```
+
+`position` accepts `top-left` / `top-center` / `top-right` / `bottom-left` / `bottom-center` / `bottom-right`, defaulting to `bottom-right`. Mount exactly one `<Toaster />` — the `toast` API is backed by a single global store, same as Mantine/sonner, so multiple instances would all render the same list rather than partitioning it by position.
+
+`Toaster` renders in place with `position: fixed`, deliberately not via a portal to `document.body`: `VinyasaProvider` injects its theme as CSS custom properties on its own wrapper element rather than on `:root`, so anything portaled outside that subtree would lose every token (transparent backgrounds, no radius, no shadow). `position: fixed` already floats the toast stack above the rest of the page without leaving the themed DOM subtree.
+
+## Subpath imports
+
+Every component can be imported directly instead of through the package root, e.g.:
+
+```tsx
+import Spinner from '@vinyasa/feedback/spinner';
+```
+
+## Development
+
+From the repository root:
+
+```bash
+pnpm --filter @vinyasa/feedback build
+pnpm --filter @vinyasa/feedback test
+pnpm --filter @vinyasa/feedback lint
+pnpm storybook   # Feedback/*
+```

package/dist/cjs/alert.cjs

@@ -0,0 +1,286 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    default: ()=>alert_Alert
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const box_namespaceObject = require("@vinyasa/layout/box");
+var box_default = /*#__PURE__*/ __webpack_require__.n(box_namespaceObject);
+const external_react_namespaceObject = require("react");
+const icons_namespaceObject = require("@vinyasa/icons");
+const statusIcons = {
+    info: icons_namespaceObject.InfoIcon,
+    success: icons_namespaceObject.CheckCircleIcon,
+    warning: icons_namespaceObject.AlertTriangleIcon,
+    error: icons_namespaceObject.XIcon
+};
+function toPrimitive(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+        var i = e.call(t, r || "default");
+        if ("object" != typeof i) return i;
+        throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === r ? String : Number)(t);
+}
+function toPropertyKey(t) {
+    var i = toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : String(i);
+}
+function _defineProperty(obj, key, value) {
+    key = toPropertyKey(key);
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function createRuntimeFn_62c9670f_esm_ownKeys(e, r) {
+    var t = Object.keys(e);
+    if (Object.getOwnPropertySymbols) {
+        var o = Object.getOwnPropertySymbols(e);
+        r && (o = o.filter(function(r) {
+            return Object.getOwnPropertyDescriptor(e, r).enumerable;
+        })), t.push.apply(t, o);
+    }
+    return t;
+}
+function _objectSpread2(e) {
+    for(var r = 1; r < arguments.length; r++){
+        var t = null != arguments[r] ? arguments[r] : {};
+        r % 2 ? createRuntimeFn_62c9670f_esm_ownKeys(Object(t), !0).forEach(function(r) {
+            _defineProperty(e, r, t[r]);
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : createRuntimeFn_62c9670f_esm_ownKeys(Object(t)).forEach(function(r) {
+            Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+        });
+    }
+    return e;
+}
+function mapValues(input, fn) {
+    var result = {};
+    for(var _key in input)result[_key] = fn(input[_key], _key);
+    return result;
+}
+var shouldApplyCompound = (compoundCheck, selections, defaultVariants)=>{
+    for (var key of Object.keys(compoundCheck)){
+        var _selections$key;
+        if (compoundCheck[key] !== (null != (_selections$key = selections[key]) ? _selections$key : defaultVariants[key])) return false;
+    }
+    return true;
+};
+var createRuntimeFn = (config)=>{
+    var runtimeFn = (options)=>{
+        var className = config.defaultClassName;
+        var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+        for(var variantName in selections){
+            var _selections$variantNa;
+            var variantSelection = null != (_selections$variantNa = selections[variantName]) ? _selections$variantNa : config.defaultVariants[variantName];
+            if (null != variantSelection) {
+                var selection = variantSelection;
+                if ('boolean' == typeof selection) selection = true === selection ? 'true' : 'false';
+                var selectionClassName = config.variantClassNames[variantName][selection];
+                if (selectionClassName) className += ' ' + selectionClassName;
+            }
+        }
+        for (var [compoundCheck, compoundClassName] of config.compoundVariants)if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) className += ' ' + compoundClassName;
+        return className;
+    };
+    runtimeFn.variants = ()=>Object.keys(config.variantClassNames);
+    runtimeFn.classNames = {
+        get base () {
+            return config.defaultClassName.split(' ')[0];
+        },
+        get variants () {
+            return mapValues(config.variantClassNames, (classNames)=>mapValues(classNames, (className)=>className.split(' ')[0]));
+        }
+    };
+    return runtimeFn;
+};
+var Alert_css_alert = createRuntimeFn({
+    defaultClassName: '_1313gq0',
+    variantClassNames: {
+        status: {
+            info: '_1313gq1',
+            success: '_1313gq2',
+            warning: '_1313gq3',
+            error: '_1313gq4'
+        }
+    },
+    defaultVariants: {
+        status: 'info'
+    },
+    compoundVariants: []
+});
+var body = '_1313gq6';
+var Alert_css_description = '_1313gq8';
+var icon = '_1313gq5';
+var Alert_css_title = '_1313gq7';
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function Alert_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else Alert_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys, key, i;
+    if ("u" > typeof Reflect && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (!(excluded.indexOf(key) >= 0)) {
+            if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+        }
+    }
+    return target;
+}
+const Alert = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { status = 'info', title, description, className } = _ref1, rest = _object_without_properties(_ref1, [
+        "status",
+        "title",
+        "description",
+        "className"
+    ]), [ref] = _rest;
+    const Icon = statusIcons[status];
+    const classes = className ? `${Alert_css_alert({
+        status
+    })} ${className}` : Alert_css_alert({
+        status
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(box_default(), _object_spread_props(_object_spread({
+        ref: ref,
+        role: "alert",
+        className: classes
+    }, rest), {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+                className: icon,
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: body,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                        className: Alert_css_title,
+                        children: title
+                    }),
+                    description ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                        className: Alert_css_description,
+                        children: description
+                    }) : null
+                ]
+            })
+        ]
+    }));
+});
+Alert.displayName = 'Alert';
+const alert_Alert = Alert;
+exports["default"] = __webpack_exports__["default"];
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/alert.css

@@ -0,0 +1,51 @@
+._1313gq0 {
+  align-items: flex-start;
+  gap: var(--vinyasa-space3);
+  padding: var(--vinyasa-space4);
+  border-radius: var(--vinyasa-radius-md);
+  font-family: var(--vinyasa-font-family-sans);
+  display: flex;
+}
+
+._1313gq1 {
+  background-color: var(--vinyasa-status-info-bg);
+  color: var(--vinyasa-status-info-text);
+}
+
+._1313gq2 {
+  background-color: var(--vinyasa-status-success-bg);
+  color: var(--vinyasa-status-success-text);
+}
+
+._1313gq3 {
+  background-color: var(--vinyasa-status-warning-bg);
+  color: var(--vinyasa-status-warning-text);
+}
+
+._1313gq4 {
+  background-color: var(--vinyasa-status-error-bg);
+  color: var(--vinyasa-status-error-text);
+}
+
+._1313gq5 {
+  flex-shrink: 0;
+  margin-top: .125em;
+}
+
+._1313gq6 {
+  gap: var(--vinyasa-space1);
+  flex-direction: column;
+  display: flex;
+}
+
+._1313gq7 {
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-semibold);
+  margin: 0;
+}
+
+._1313gq8 {
+  font-size: var(--vinyasa-font-size-sm);
+  margin: 0;
+}
+