@vinyasa/button 1.0.21 → 1.0.23

package/dist/cjs/button.cjs

@@ -1,5 +1,267 @@
 "use strict";
-var __webpack_require__ = {};
+var __webpack_modules__ = {
+    639 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            a: ()=>ButtonIcon,
+            A: ()=>button_Button
+        });
+        const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+        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 ButtonIcon = ({ children })=>children;
+        ButtonIcon.displayName = 'ButtonIcon';
+        const isButtonIcon = (node)=>/*#__PURE__*/ (0, external_react_namespaceObject.isValidElement)(node) && node.type === ButtonIcon;
+        const Button = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+            let _ref = [
+                _0,
+                _1
+            ], [_ref1, ..._rest] = _ref, { children, variant, size, radius, loading = false, disabled = false, type = 'button', className } = _ref1, rest = _object_without_properties(_ref1, [
+                "children",
+                "variant",
+                "size",
+                "radius",
+                "loading",
+                "disabled",
+                "type",
+                "className"
+            ]), [ref] = _rest;
+            const classes = className ? `${Button_css_button({
+                variant,
+                size,
+                radius
+            })} ${className}` : Button_css_button({
+                variant,
+                size,
+                radius
+            });
+            const childArray = external_react_namespaceObject.Children.toArray(children);
+            const hasLeadingIcon = isButtonIcon(childArray[0]);
+            const content = loading ? [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_Spinner, {}, "spinner"),
+                ...childArray.slice(hasLeadingIcon ? 1 : 0).filter((child)=>!isButtonIcon(child))
+            ] : children;
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", _object_spread_props(_object_spread({
+                ref: ref,
+                type: type,
+                disabled: disabled || loading,
+                "aria-busy": loading || void 0,
+                className: classes
+            }, rest), {
+                children: content
+            }));
+        });
+        Button.displayName = 'Button';
+        const button_Button = Button;
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
 (()=>{
     __webpack_require__.d = (exports1, getters, values)=>{
         var define = (defs, kind)=>{
@@ -26,255 +288,20 @@ var __webpack_require__ = {};
     };
 })();
 var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    default: ()=>components_button
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-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
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    var _Button__rspack_import_0 = __webpack_require__(639);
+    const __rspack_default_export = _Button__rspack_import_0.A;
+    __webpack_require__.d(__webpack_exports__, {
+        ButtonIcon: ()=>_Button__rspack_import_0.a
+    }, {
+        default: __rspack_default_export
     });
-    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.ButtonIcon = __webpack_exports__.ButtonIcon;
 exports["default"] = __webpack_exports__["default"];
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ButtonIcon",
     "default"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/cjs/button.css

@@ -2,6 +2,7 @@
   justify-content: center;
   align-items: center;
   gap: var(--vinyasa-space2);
+  font-family: var(--vinyasa-font-family-sans);
   font-weight: var(--vinyasa-font-weight-semibold);
   line-height: var(--vinyasa-line-height-tight);
   cursor: pointer;
@@ -15,8 +16,9 @@
 }
 
 ._1bwnrav0:focus-visible {
-  outline: var(--vinyasa-focus-ring-width) solid var(--vinyasa-focus);
-  outline-offset: var(--vinyasa-focus-ring-offset);
+  border-color: var(--vinyasa-focus);
+  box-shadow: 0 0 0 1px var(--vinyasa-focus), 0 0 0 4px color-mix(in srgb, var(--vinyasa-focus) 16%, transparent);
+  outline: none;
 }
 
 ._1bwnrav0:disabled {

package/dist/cjs/index.cjs

@@ -1,8 +1,9 @@
 "use strict";
 var __webpack_modules__ = {
-    397 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+    639 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
         __webpack_require__.d(__webpack_exports__, {
-            default: ()=>components_button
+            a: ()=>ButtonIcon,
+            A: ()=>button_Button
         });
         const jsx_runtime_namespaceObject = require("react/jsx-runtime");
         const external_react_namespaceObject = require("react");
@@ -205,18 +206,19 @@ var __webpack_modules__ = {
             }
             return target;
         }
+        const ButtonIcon = ({ children })=>children;
+        ButtonIcon.displayName = 'ButtonIcon';
+        const isButtonIcon = (node)=>/*#__PURE__*/ (0, external_react_namespaceObject.isValidElement)(node) && node.type === ButtonIcon;
         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, [
+            ], [_ref1, ..._rest] = _ref, { children, variant, size, radius, loading = false, disabled = false, type = 'button', className } = _ref1, rest = _object_without_properties(_ref1, [
                 "children",
                 "variant",
                 "size",
                 "radius",
                 "loading",
-                "leadingIcon",
-                "trailingIcon",
                 "disabled",
                 "type",
                 "className"
@@ -230,23 +232,31 @@ var __webpack_modules__ = {
                 size,
                 radius
             });
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", _object_spread_props(_object_spread({
+            const childArray = external_react_namespaceObject.Children.toArray(children);
+            const hasLeadingIcon = isButtonIcon(childArray[0]);
+            const content = loading ? [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_Spinner, {}, "spinner"),
+                ...childArray.slice(hasLeadingIcon ? 1 : 0).filter((child)=>!isButtonIcon(child))
+            ] : children;
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("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
-                ]
+                children: content
             }));
         });
         Button.displayName = 'Button';
         const button_Button = Button;
-        const components_button = button_Button;
+    },
+    294 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        var _Button__rspack_import_0 = __webpack_require__(639);
+        const __rspack_default_export = _Button__rspack_import_0.A;
+        __webpack_require__.d(__webpack_exports__, {}, {
+            default: __rspack_default_export
+        });
     }
 };
 var __webpack_module_cache__ = {};
@@ -287,16 +297,20 @@ function __webpack_require__(moduleId) {
 var __webpack_exports__ = {};
 (()=>{
     __webpack_require__.r(__webpack_exports__);
-    var _components_button__rspack_import_0 = __webpack_require__(397);
+    var _components_button__rspack_import_0 = __webpack_require__(294);
+    var _components_button__rspack_import_1 = __webpack_require__(639);
     __webpack_require__.d(__webpack_exports__, {
         Button: ()=>_components_button__rspack_import_0["default"],
+        ButtonIcon: ()=>_components_button__rspack_import_1.a,
         default: ()=>_components_button__rspack_import_0["default"]
     });
 })();
 exports.Button = __webpack_exports__.Button;
+exports.ButtonIcon = __webpack_exports__.ButtonIcon;
 exports["default"] = __webpack_exports__["default"];
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "Button",
+    "ButtonIcon",
     "default"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/cjs/index.css

@@ -2,6 +2,7 @@
   justify-content: center;
   align-items: center;
   gap: var(--vinyasa-space2);
+  font-family: var(--vinyasa-font-family-sans);
   font-weight: var(--vinyasa-font-weight-semibold);
   line-height: var(--vinyasa-line-height-tight);
   cursor: pointer;
@@ -15,8 +16,9 @@
 }
 
 ._1bwnrav0:focus-visible {
-  outline: var(--vinyasa-focus-ring-width) solid var(--vinyasa-focus);
-  outline-offset: var(--vinyasa-focus-ring-offset);
+  border-color: var(--vinyasa-focus);
+  box-shadow: 0 0 0 1px var(--vinyasa-focus), 0 0 0 4px color-mix(in srgb, var(--vinyasa-focus) 16%, transparent);
+  outline: none;
 }
 
 ._1bwnrav0:disabled {

package/dist/esm/button.css

@@ -2,6 +2,7 @@
   justify-content: center;
   align-items: center;
   gap: var(--vinyasa-space2);
+  font-family: var(--vinyasa-font-family-sans);
   font-weight: var(--vinyasa-font-weight-semibold);
   line-height: var(--vinyasa-line-height-tight);
   cursor: pointer;
@@ -15,8 +16,9 @@
 }
 
 ._1bwnrav0:focus-visible {
-  outline: var(--vinyasa-focus-ring-width) solid var(--vinyasa-focus);
-  outline-offset: var(--vinyasa-focus-ring-offset);
+  border-color: var(--vinyasa-focus);
+  box-shadow: 0 0 0 1px var(--vinyasa-focus), 0 0 0 4px color-mix(in srgb, var(--vinyasa-focus) 16%, transparent);
+  outline: none;
 }
 
 ._1bwnrav0:disabled {

package/dist/esm/button.js

@@ -1,6 +1,6 @@
 import "./button.css";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Children, forwardRef, isValidElement } from "react";
 function toPrimitive(t, r) {
     if ("object" != typeof t || !t) return t;
     var e = t[Symbol.toPrimitive];
@@ -122,7 +122,10 @@ const Spinner = ()=>/*#__PURE__*/ jsx("span", {
         "aria-hidden": "true"
     });
 const button_Spinner = Spinner;
-const Button = /*#__PURE__*/ forwardRef(({ children, variant, size, radius, loading = false, leadingIcon, trailingIcon, disabled = false, type = 'button', className, ...rest }, ref)=>{
+const ButtonIcon = ({ children })=>children;
+ButtonIcon.displayName = 'ButtonIcon';
+const isButtonIcon = (node)=>/*#__PURE__*/ isValidElement(node) && node.type === ButtonIcon;
+const Button = /*#__PURE__*/ forwardRef(({ children, variant, size, radius, loading = false, disabled = false, type = 'button', className, ...rest }, ref)=>{
     const classes = className ? `${Button_css_button({
         variant,
         size,
@@ -132,22 +135,24 @@ const Button = /*#__PURE__*/ forwardRef(({ children, variant, size, radius, load
         size,
         radius
     });
-    return /*#__PURE__*/ jsxs("button", {
+    const childArray = Children.toArray(children);
+    const hasLeadingIcon = isButtonIcon(childArray[0]);
+    const content = loading ? [
+        /*#__PURE__*/ jsx(button_Spinner, {}, "spinner"),
+        ...childArray.slice(hasLeadingIcon ? 1 : 0).filter((child)=>!isButtonIcon(child))
+    ] : children;
+    return /*#__PURE__*/ jsx("button", {
         ref: ref,
         type: type,
         disabled: disabled || loading,
         "aria-busy": loading || void 0,
         className: classes,
         ...rest,
-        children: [
-            loading ? /*#__PURE__*/ jsx(button_Spinner, {}) : leadingIcon,
-            children,
-            !loading && trailingIcon
-        ]
+        children: content
     });
 });
 Button.displayName = 'Button';
 const button_Button = Button;
 const components_button = button_Button;
 export default components_button;
-export { components_button as Button };
+export { ButtonIcon, components_button as Button };

package/dist/esm/components/button/Button.d.ts

@@ -8,8 +8,13 @@ export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'c
     size?: ButtonSize;
     radius?: ButtonRadius;
     loading?: boolean;
-    leadingIcon?: ReactNode;
-    trailingIcon?: ReactNode;
 }
+export interface ButtonIconProps {
+    children: ReactNode;
+}
+export declare const ButtonIcon: {
+    ({ children }: ButtonIconProps): ReactNode;
+    displayName: string;
+};
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/esm/components/button/index.d.ts

@@ -1,3 +1,4 @@
-import Button from './Button';
+import Button, { ButtonIcon } from './Button';
 export default Button;
-export type { ButtonProps, ButtonRadius, ButtonSize, ButtonVariant } from './Button';
+export { ButtonIcon };
+export type { ButtonIconProps, ButtonProps, ButtonRadius, ButtonSize, ButtonVariant, } from './Button';

package/dist/esm/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Button } from './components/button';
+export { default as Button, ButtonIcon } from './components/button';
 export { default } from './components/button';
-export type { ButtonProps, ButtonRadius, ButtonSize, ButtonVariant } from './components/button';
+export type { ButtonIconProps, ButtonProps, ButtonRadius, ButtonSize, ButtonVariant, } from './components/button';

package/dist/esm/index.js

@@ -1 +1 @@
-export { Button, Button as default } from "./button.js";
+export { Button, Button as default, ButtonIcon } from "./button.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinyasa/button",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "private": false,
   "type": "module",
   "sideEffects": [
@@ -41,7 +41,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@vinyasa/tokens": "^1.0.21"
+    "@vinyasa/tokens": "^1.0.23"
   },
   "devDependencies": {
     "@rsbuild/plugin-react": "^2.1.0",
@@ -54,9 +54,9 @@
     "@vanilla-extract/vite-plugin": "^5.2.3",
     "@vanilla-extract/webpack-plugin": "^2.3.27",
     "typescript": "^5.7.3",
-    "@vinyasa/layout": "1.0.21",
-    "@vinyasa/tokens": "1.0.21",
-    "@vinyasa/icons": "1.0.21"
+    "@vinyasa/layout": "1.0.23",
+    "@vinyasa/tokens": "1.0.23",
+    "@vinyasa/icons": "1.0.23"
   },
   "scripts": {
     "build": "rslib build && node ../../scripts/postbuild-package.mjs",