@vinyasa/button 1.0.14 → 1.0.16

package/README.md

@@ -0,0 +1,133 @@
+# @vinyasa/button
+
+A styled, accessible button component with six visual variants, three sizes, configurable corner radius, icon slots, and a loading state — built on `@vinyasa/tokens`.
+
+## Installation
+
+```bash
+pnpm add @vinyasa/button @vinyasa/tokens react react-dom
+```
+
+`@vinyasa/tokens` is a peer dependency: Button's styles reference the shared design-token contract, and rendering it requires a `VinyasaProvider` (from `@vinyasa/tokens`) somewhere above it in the tree. See [`@vinyasa/tokens`'s README](../tokens/README.md) for what that provider does.
+
+No separate stylesheet import is needed — Button's CSS is bundled into its own JS entry and loads automatically when you import the component.
+
+## Setup
+
+Wrap your app once, near the root, in `VinyasaProvider`:
+
+```tsx
+import { VinyasaProvider } from '@vinyasa/tokens';
+import { Button } from '@vinyasa/button';
+
+function App() {
+	return (
+		<VinyasaProvider>
+			<Button>Save changes</Button>
+		</VinyasaProvider>
+	);
+}
+```
+
+## Usage
+
+### Variants
+
+```tsx
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="tertiary">Tertiary</Button>
+<Button variant="danger">Danger</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+```
+
+`variant` defaults to `"primary"`.
+
+### Sizes
+
+```tsx
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+```
+
+`size` defaults to `"md"`.
+
+### Radius
+
+```tsx
+<Button radius="sm">Sharper corners</Button>
+<Button radius="md">Rounded rectangle</Button>
+<Button radius="full">Pill (default)</Button>
+```
+
+`radius` defaults to `"full"`. Independent of `size` — pick any radius at any size.
+
+### Icons
+
+```tsx
+<Button leadingIcon={<PlusIcon />}>Add item</Button>
+<Button variant="outline" trailingIcon={<ArrowIcon />}>Continue</Button>
+```
+
+Icons are rendered at `1em`, so they scale automatically with whichever `size` is active.
+
+### Loading
+
+```tsx
+<Button loading>Saving</Button>
+```
+
+While `loading` is `true`, the button is disabled, gets `aria-busy="true"`, and its `leadingIcon` (if any) is replaced by a spinner. The label stays visible so the button doesn't change width.
+
+### Disabled
+
+```tsx
+<Button disabled>Can't click me</Button>
+```
+
+Any other native `<button>` attribute (`onClick`, `type`, `id`, `aria-*`, ...) can be passed directly — `ButtonProps` extends `ComponentPropsWithoutRef<'button'>`.
+
+### Ref forwarding
+
+```tsx
+const ref = useRef<HTMLButtonElement>(null);
+
+<Button ref={ref}>Save</Button>;
+```
+
+## Props
+
+| Prop           | Type                                                                         | Default     | Description                                                                                            |
+| -------------- | ---------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------ |
+| `children`     | `ReactNode`                                                                  | —           | Required. The button's label.                                                                          |
+| `variant`      | `'primary' \| 'secondary' \| 'tertiary' \| 'danger' \| 'outline' \| 'ghost'` | `'primary'` | Visual style.                                                                                          |
+| `size`         | `'sm' \| 'md' \| 'lg'`                                                       | `'md'`      | Size.                                                                                                  |
+| `radius`       | `'sm' \| 'md' \| 'full'`                                                     | `'full'`    | Corner rounding, independent of `size`.                                                                |
+| `loading`      | `boolean`                                                                    | `false`     | Shows a spinner in place of `leadingIcon`, forces `disabled`.                                          |
+| `leadingIcon`  | `ReactNode`                                                                  | —           | Rendered before `children`. Hidden while `loading`.                                                    |
+| `trailingIcon` | `ReactNode`                                                                  | —           | Rendered after `children`. Hidden while `loading`.                                                     |
+| `disabled`     | `boolean`                                                                    | `false`     | Native disabled state.                                                                                 |
+| `type`         | `'button' \| 'submit' \| 'reset'`                                            | `'button'`  | Defaults to `'button'` (not the native `'submit'`) to avoid accidental form submits inside a `<form>`. |
+
+All other native `<button>` props (`onClick`, `id`, `aria-*`, `name`, ...) pass through unchanged.
+
+## Subpath import
+
+For finer-grained bundling, import the component directly instead of through the package root:
+
+```tsx
+import Button from '@vinyasa/button/button';
+```
+
+## Development
+
+From the repository root:
+
+```bash
+pnpm --filter @vinyasa/button build
+pnpm --filter @vinyasa/button test
+pnpm --filter @vinyasa/button lint
+pnpm storybook   # Components/Button — Playground, Variants, Sizes, Radii, Disabled, Loading, WithIcons
+```

package/dist/cjs/button.cjs

@@ -31,12 +31,246 @@ __webpack_require__.d(__webpack_exports__, {
     default: ()=>components_button
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("react");
-var Button_css_button = '_1bwnrav0';
-const Button = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-        className: Button_css_button,
-        children: "Button"
+const external_react_namespaceObject = require("react");
+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 Button_css_button = createRuntimeFn({
+    defaultClassName: '_1bwnrav0',
+    variantClassNames: {
+        variant: {
+            primary: '_1bwnrav1',
+            secondary: '_1bwnrav2',
+            tertiary: '_1bwnrav3',
+            danger: '_1bwnrav4',
+            outline: '_1bwnrav5',
+            ghost: '_1bwnrav6'
+        },
+        size: {
+            sm: '_1bwnrav7',
+            md: '_1bwnrav8',
+            lg: '_1bwnrav9'
+        },
+        radius: {
+            sm: '_1bwnrava',
+            md: '_1bwnravb',
+            full: '_1bwnravc'
+        }
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        radius: 'full'
+    },
+    compoundVariants: []
+});
+var spinner = '_18kjv2i1';
+const Spinner = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        className: spinner,
+        "aria-hidden": "true"
+    });
+const button_Spinner = Spinner;
+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 Button_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 Button_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 Button = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { children, variant, size, radius, loading = false, leadingIcon, trailingIcon, disabled = false, type = 'button', className } = _ref1, rest = _object_without_properties(_ref1, [
+        "children",
+        "variant",
+        "size",
+        "radius",
+        "loading",
+        "leadingIcon",
+        "trailingIcon",
+        "disabled",
+        "type",
+        "className"
+    ]), [ref] = _rest;
+    const classes = className ? `${Button_css_button({
+        variant,
+        size,
+        radius
+    })} ${className}` : Button_css_button({
+        variant,
+        size,
+        radius
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", _object_spread_props(_object_spread({
+        ref: ref,
+        type: type,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        className: classes
+    }, rest), {
+        children: [
+            loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_Spinner, {}) : leadingIcon,
+            children,
+            !loading && trailingIcon
+        ]
+    }));
+});
+Button.displayName = 'Button';
 const button_Button = Button;
 const components_button = button_Button;
 exports["default"] = __webpack_exports__["default"];

package/dist/cjs/button.css

@@ -1,26 +1,128 @@
 ._1bwnrav0 {
-  color: #fff;
+  justify-content: center;
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  font-weight: var(--vinyasa-font-weight-semibold);
+  line-height: var(--vinyasa-line-height-tight);
   cursor: pointer;
-  background-color: #111827;
+  transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), opacity var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
   border: none;
-  border-radius: 9999px;
-  padding: .625rem 1rem;
-  font-size: .875rem;
-  font-weight: 600;
-  line-height: 1;
-  transition: transform .15s, opacity .15s;
+  display: inline-flex;
 }
 
-._1bwnrav0:hover {
-  opacity: .92;
-}
-
-._1bwnrav0:active {
+._1bwnrav0:active:not(:disabled) {
   transform: translateY(1px);
 }
 
 ._1bwnrav0:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
   outline-offset: 2px;
-  outline: 2px solid #2563eb;
+}
+
+._1bwnrav0:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+._1bwnrav1 {
+  background-color: var(--vinyasa-primary);
+  color: var(--vinyasa-on-primary);
+}
+
+._1bwnrav1:hover:not(:disabled) {
+  opacity: .92;
+}
+
+._1bwnrav2 {
+  background-color: var(--vinyasa-secondary);
+  color: var(--vinyasa-on-secondary);
+}
+
+._1bwnrav2:hover:not(:disabled) {
+  opacity: .92;
+}
+
+._1bwnrav3 {
+  background-color: var(--vinyasa-tertiary);
+  color: var(--vinyasa-on-tertiary);
+}
+
+._1bwnrav3:hover:not(:disabled) {
+  opacity: .92;
+}
+
+._1bwnrav4 {
+  background-color: var(--vinyasa-error);
+  color: var(--vinyasa-on-error);
+}
+
+._1bwnrav4:hover:not(:disabled) {
+  opacity: .92;
+}
+
+._1bwnrav5 {
+  color: var(--vinyasa-primary);
+  border: var(--vinyasa-border-width-thin) solid var(--vinyasa-primary);
+  background-color: rgba(0, 0, 0, 0);
+}
+
+._1bwnrav5:hover:not(:disabled) {
+  background-color: var(--vinyasa-secondary);
+}
+
+._1bwnrav6 {
+  color: var(--vinyasa-primary);
+  background-color: rgba(0, 0, 0, 0);
+}
+
+._1bwnrav6:hover:not(:disabled) {
+  background-color: var(--vinyasa-secondary);
+}
+
+._1bwnrav7 {
+  padding: var(--vinyasa-space2) var(--vinyasa-space3);
+  font-size: var(--vinyasa-font-size-sm);
+}
+
+._1bwnrav8 {
+  padding: var(--vinyasa-space3) var(--vinyasa-space4);
+  font-size: var(--vinyasa-font-size-sm);
+}
+
+._1bwnrav9 {
+  padding: var(--vinyasa-space4) var(--vinyasa-space5);
+  font-size: var(--vinyasa-font-size-md);
+}
+
+._1bwnrava {
+  border-radius: var(--vinyasa-radius-sm);
+}
+
+._1bwnravb {
+  border-radius: var(--vinyasa-radius-md);
+}
+
+._1bwnravc {
+  border-radius: var(--vinyasa-radius-full);
+}
+
+@keyframes _18kjv2i0 {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+._18kjv2i1 {
+  border-radius: var(--vinyasa-radius-full);
+  border: .15em solid;
+  border-right-color: rgba(0, 0, 0, 0);
+  width: 1em;
+  height: 1em;
+  animation: .6s linear infinite _18kjv2i0;
+  display: inline-block;
 }