@stackshift-ui/button 6.0.11 → 6.1.0-beta.1

package/dist/button.d.ts

@@ -1,26 +1,11 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
-import { type LabeledRoute } from "./types";
-type Variant = "outline" | "ghost" | "link" | "custom" | "solid" | "addToWishlist" | "unstyled" | "swiper_pagination" | "tab";
-type TextSize = "xs" | "sm" | "md" | "lg";
-type RadiusSize = "none" | "sm" | "md" | "base" | "lg" | "xl" | "2xl" | "full";
-interface BaseType {
-    children?: ReactNode;
-    variant?: Variant;
-    radius?: RadiusSize;
-    size?: TextSize;
-    ariaLabel?: string;
-    isActive?: boolean;
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "unstyled" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
 }
-interface LinkProps extends BaseType, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type"> {
-    link: LabeledRoute;
-    as: "link";
-}
-interface ButtonProps extends BaseType, ButtonHTMLAttributes<HTMLButtonElement> {
-    as?: "button";
-    loading?: boolean;
-    disabled?: boolean;
-    loadingComponent?: React.ReactNode;
-}
-type Props = ButtonProps | LinkProps;
-export declare function Button({ children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/button.js

@@ -1 +1 @@
-"use strict";var O=Object.create;var d=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var G=(t,e)=>{for(var o in e)d(t,o,{get:e[o],enumerable:!0})},T=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of j(e))!D.call(t,r)&&r!==o&&d(t,r,{get:()=>e[r],enumerable:!(s=U(e,r))||s.enumerable});return t};var J=(t,e,o)=>(o=t!=null?O(q(t)):{},T(e||!t||!t.__esModule?d(o,"default",{value:t,enumerable:!0}):o,t)),K=t=>T(d({},"__esModule",{value:!0}),t);var X={};G(X,{Button:()=>Q});module.exports=K(X);var S=require("@stackshift-ui/link"),B=require("@stackshift-ui/system"),u=J(require("classnames")),w=require("react-icons/fa");var v=t=>{var e,o;return!(t!=null&&t.internalLink)&&!(t!=null&&t.externalLink)?"/page-not-found":(t==null?void 0:t.type)==="linkInternal"&&((o=(e=t==null?void 0:t.internalLink)==null?void 0:e.toLowerCase())!=null&&o.includes("home"))?"/":(t==null?void 0:t.type)==="linkInternal"?`/${t==null?void 0:t.internalLink}`:(t==null?void 0:t.type)==="linkExternal"?`${t==null?void 0:t.externalLink}`:"/"};var l=require("react/jsx-runtime"),R="Button";function Q({children:t,...e}){let{[R]:o="button"}=(0,B.useStackShiftUIComponents)(),s={xs:"py-1 px-3 text-xs",sm:"py-2 px-4 text-sm",default:"py-3 px-6 text-default",md:"py-3 px-6 text-base",lg:"py-4 px-7 text-lg"},r={none:"rounded-none",sm:"rounded-sm",md:"rounded-md",base:"rounded-base",lg:"rounded-lg",xl:"rounded-xl","2xl":"rounded-2xl",full:"rounded-full",global:"rounded-global"},{radius:x,size:p,variant:m,ariaLabel:f,className:g,isActive:L}=e,a=x?r[x]:"rounded-global",n=s[p!=null?p:"default"],i="inline-block font-default text-default transition duration-200",A=`${i} ${n} ${a} bg-primary hover:bg-primary/50 text-gray-50`,C=`inline-block bg-primary hover:bg-primary/50 ${n} ${a} text-gray-50 font-bold transition duration-200`,N=`${i} ${n} ${a} bg-white hover:bg-primary/50 outline outline-1 text-primary outline-primary`,z=`${i} ${a} ${n} bg-transparent hover:bg-primary/50 text-primary`,M=`transition-200 text-primary hover:text-primary/50 underline ${a} ${(0,u.default)(n,"px-0 py-0")}`,P="",H=`mr-1 ${L?"bg-primary":"bg-gray-200"} rounded-full p-1 focus:outline-none`,V=`mx-auto mb-1 w-auto px-4 py-2 rounded duration-200 transition focus:outline-none font-bold ${L?"bg-gray-50 text-primary shadow":"text-gray-700 hover:bg-secondary/50 hover:text-primary hover:shadow"}`,E=`${i} ${a} ${n} ml-auto sm:ml-0 flex-shrink-0 inline-flex items-center justify-center w-full rounded-md border hover:border-primary`,h={outline:N,ghost:z,link:M,custom:C,solid:A,addToWishlist:E,unstyled:P,swiper_pagination:H,tab:V}[m!=null?m:"solid"];if(e.as==="link"){let{link:b,...F}=e;return(0,l.jsx)(S.Link,{className:(0,u.default)(h,g),"aria-label":f,href:v(b),target:b.linkTarget,rel:b.linkTarget==="_blank"?"noopener noreferrer":"",...F,children:t})}let{loadingComponent:c,onClick:I,loading:$,disabled:y,type:_}=e,W=c!=null?c:(0,l.jsx)(w.FaSpinner,{className:"animate-spin",size:30});return(0,l.jsx)(o,{onClick:I,disabled:y!=null?y:$,className:(0,u.default)(h,g),"aria-label":f,"data-testid":R.toLowerCase(),type:_,children:$?W:t})}0&&(module.exports={Button});
+"use strict";var v=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},a=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of y(t))!B.call(e,o)&&o!==n&&s(e,o,{get:()=>t[o],enumerable:!(i=h(t,o))||i.enumerable});return e};var k=(e,t,n)=>(n=e!=null?v(x(e)):{},a(t||!e||!e.__esModule?s(n,"default",{value:e,enumerable:!0}):n,e)),w=e=>a(s({},"__esModule",{value:!0}),e);var V={};C(V,{Button:()=>l,buttonVariants:()=>f});module.exports=w(V);var d=require("@radix-ui/react-slot"),u=require("class-variance-authority"),c=k(require("react")),r=require("@stackshift-ui/system"),g=require("react/jsx-runtime"),p="Button",f=(0,u.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{unstyled:"bg-transparent p-0 border-none shadow-none hover:bg-transparent ring-0 outline-none text-inherit",default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",icon:"h-10 w-10"}},defaultVariants:{variant:"default",size:"default"}}),l=c.forwardRef(({className:e,variant:t,size:n,asChild:i=!1,...o},m)=>{let{[p]:b=r.DefaultComponent}=(0,r.useStackShiftUIComponents)();return(0,g.jsx)(b,{as:i?d.Slot:"button",className:(0,r.cn)(f({variant:t,size:n,className:e})),ref:m,...o})});l.displayName=p;0&&(module.exports={Button,buttonVariants});

package/dist/button.mjs

@@ -1 +1 @@
-import{a}from"./chunk-RVVB2H7S.mjs";import"./chunk-5BNLLVMY.mjs";export{a as Button};
+import{a,b}from"./chunk-UMCCY4XB.mjs";export{b as Button,a as buttonVariants};

package/dist/chunk-UMCCY4XB.mjs

@@ -0,0 +1 @@
+import{Slot as u}from"@radix-ui/react-slot";import{cva as c}from"class-variance-authority";import*as e from"react";import{cn as p,DefaultComponent as f,useStackShiftUIComponents as l}from"@stackshift-ui/system";import{jsx as b}from"react/jsx-runtime";var t="Button",g=c("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{unstyled:"bg-transparent p-0 border-none shadow-none hover:bg-transparent ring-0 outline-none text-inherit",default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",icon:"h-10 w-10"}},defaultVariants:{variant:"default",size:"default"}}),m=e.forwardRef(({className:n,variant:o,size:r,asChild:i=!1,...s},a)=>{let{[t]:d=f}=l();return b(d,{as:i?u:"button",className:p(g({variant:o,size:r,className:n})),ref:a,...s})});m.displayName=t;export{g as a,m as b};

package/dist/helper/index.mjs

@@ -1 +1 @@
-import{a}from"../chunk-5BNLLVMY.mjs";export{a as extractLink};
+var a=e=>{var t,r;return!(e!=null&&e.internalLink)&&!(e!=null&&e.externalLink)?"/page-not-found":(e==null?void 0:e.type)==="linkInternal"&&((r=(t=e==null?void 0:e.internalLink)==null?void 0:t.toLowerCase())!=null&&r.includes("home"))?"/":(e==null?void 0:e.type)==="linkInternal"?`/${e==null?void 0:e.internalLink}`:(e==null?void 0:e.type)==="linkExternal"?`${e==null?void 0:e.externalLink}`:"/"};export{a as extractLink};

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";var O=Object.create;var d=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var G=(t,e)=>{for(var o in e)d(t,o,{get:e[o],enumerable:!0})},T=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of j(e))!D.call(t,r)&&r!==o&&d(t,r,{get:()=>e[r],enumerable:!(s=U(e,r))||s.enumerable});return t};var J=(t,e,o)=>(o=t!=null?O(q(t)):{},T(e||!t||!t.__esModule?d(o,"default",{value:t,enumerable:!0}):o,t)),K=t=>T(d({},"__esModule",{value:!0}),t);var X={};G(X,{Button:()=>Q});module.exports=K(X);var S=require("@stackshift-ui/link"),B=require("@stackshift-ui/system"),u=J(require("classnames")),w=require("react-icons/fa");var v=t=>{var e,o;return!(t!=null&&t.internalLink)&&!(t!=null&&t.externalLink)?"/page-not-found":(t==null?void 0:t.type)==="linkInternal"&&((o=(e=t==null?void 0:t.internalLink)==null?void 0:e.toLowerCase())!=null&&o.includes("home"))?"/":(t==null?void 0:t.type)==="linkInternal"?`/${t==null?void 0:t.internalLink}`:(t==null?void 0:t.type)==="linkExternal"?`${t==null?void 0:t.externalLink}`:"/"};var l=require("react/jsx-runtime"),R="Button";function Q({children:t,...e}){let{[R]:o="button"}=(0,B.useStackShiftUIComponents)(),s={xs:"py-1 px-3 text-xs",sm:"py-2 px-4 text-sm",default:"py-3 px-6 text-default",md:"py-3 px-6 text-base",lg:"py-4 px-7 text-lg"},r={none:"rounded-none",sm:"rounded-sm",md:"rounded-md",base:"rounded-base",lg:"rounded-lg",xl:"rounded-xl","2xl":"rounded-2xl",full:"rounded-full",global:"rounded-global"},{radius:x,size:p,variant:m,ariaLabel:f,className:g,isActive:L}=e,n=x?r[x]:"rounded-global",a=s[p!=null?p:"default"],i="inline-block font-default text-default transition duration-200",A=`${i} ${a} ${n} bg-primary hover:bg-primary/50 text-gray-50`,C=`inline-block bg-primary hover:bg-primary/50 ${a} ${n} text-gray-50 font-bold transition duration-200`,N=`${i} ${a} ${n} bg-white hover:bg-primary/50 outline outline-1 text-primary outline-primary`,z=`${i} ${n} ${a} bg-transparent hover:bg-primary/50 text-primary`,M=`transition-200 text-primary hover:text-primary/50 underline ${n} ${(0,u.default)(a,"px-0 py-0")}`,P="",H=`mr-1 ${L?"bg-primary":"bg-gray-200"} rounded-full p-1 focus:outline-none`,V=`mx-auto mb-1 w-auto px-4 py-2 rounded duration-200 transition focus:outline-none font-bold ${L?"bg-gray-50 text-primary shadow":"text-gray-700 hover:bg-secondary/50 hover:text-primary hover:shadow"}`,E=`${i} ${n} ${a} ml-auto sm:ml-0 flex-shrink-0 inline-flex items-center justify-center w-full rounded-md border hover:border-primary`,h={outline:N,ghost:z,link:M,custom:C,solid:A,addToWishlist:E,unstyled:P,swiper_pagination:H,tab:V}[m!=null?m:"solid"];if(e.as==="link"){let{link:b,...F}=e;return(0,l.jsx)(S.Link,{className:(0,u.default)(h,g),"aria-label":f,href:v(b),target:b.linkTarget,rel:b.linkTarget==="_blank"?"noopener noreferrer":"",...F,children:t})}let{loadingComponent:c,onClick:I,loading:$,disabled:y,type:_}=e,W=c!=null?c:(0,l.jsx)(w.FaSpinner,{className:"animate-spin",size:30});return(0,l.jsx)(o,{onClick:I,disabled:y!=null?y:$,className:(0,u.default)(h,g),"aria-label":f,"data-testid":R.toLowerCase(),type:_,children:$?W:t})}0&&(module.exports={Button});
+"use strict";var v=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},a=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of y(t))!B.call(e,n)&&n!==o&&s(e,n,{get:()=>t[n],enumerable:!(i=h(t,n))||i.enumerable});return e};var k=(e,t,o)=>(o=e!=null?v(x(e)):{},a(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),w=e=>a(s({},"__esModule",{value:!0}),e);var V={};C(V,{Button:()=>l,buttonVariants:()=>f});module.exports=w(V);var d=require("@radix-ui/react-slot"),u=require("class-variance-authority"),c=k(require("react")),r=require("@stackshift-ui/system"),g=require("react/jsx-runtime"),p="Button",f=(0,u.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{unstyled:"bg-transparent p-0 border-none shadow-none hover:bg-transparent ring-0 outline-none text-inherit",default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",icon:"h-10 w-10"}},defaultVariants:{variant:"default",size:"default"}}),l=c.forwardRef(({className:e,variant:t,size:o,asChild:i=!1,...n},m)=>{let{[p]:b=r.DefaultComponent}=(0,r.useStackShiftUIComponents)();return(0,g.jsx)(b,{as:i?d.Slot:"button",className:(0,r.cn)(f({variant:t,size:o,className:e})),ref:m,...n})});l.displayName=p;0&&(module.exports={Button,buttonVariants});

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";import{a as e}from"./chunk-RVVB2H7S.mjs";import"./chunk-5BNLLVMY.mjs";export{e as Button};
+"use strict";import{a as e,b as o}from"./chunk-UMCCY4XB.mjs";export{o as Button,e as buttonVariants};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackshift-ui/button",
-  "version": "6.0.11",
+  "version": "6.1.0-beta.1",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -27,15 +27,17 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.10",
-    "@stackshift-ui/typescript-config": "6.0.10"
+    "@stackshift-ui/typescript-config": "6.0.10",
+    "@stackshift-ui/eslint-config": "6.0.10"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
     "react-icons": "^5.3.0",
-    "@stackshift-ui/scripts": "6.0.10",
-    "@stackshift-ui/link": "6.0.11",
-    "@stackshift-ui/system": "6.0.11"
+    "@stackshift-ui/system": "6.1.0-beta.1",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/link": "6.0.12-beta.1"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/button.test.tsx

@@ -7,7 +7,37 @@ describe.concurrent("button", () => {
 
   test("Common: Button - test if renders without errors", ({ expect }) => {
     const clx = "button-class";
-    render(<Button className={clx} />);
-    expect(screen.getByTestId("button").classList).toContain(clx);
+
+    const { unmount } = render(<Button className={clx}>Test Button</Button>);
+
+    const button = screen.getByRole("button", { name: "Test Button" });
+    expect(button.classList).toContain(clx);
+    expect(button.textContent).toBe("Test Button");
+    unmount();
+  });
+
+  test("Common: Button - test if renders as child", ({ expect }) => {
+    const { unmount } = render(
+      <Button asChild>
+        <a href="#" target="_blank" rel="noopener noreferrer">
+          External Link
+        </a>
+      </Button>,
+    );
+
+    const link = screen.getByRole("link", { name: "External Link" });
+    expect(link.tagName.toLowerCase()).toBe("a");
+    expect(link.getAttribute("href")).toBe("#");
+    expect(link.getAttribute("target")).toBe("_blank");
+    expect(link.getAttribute("rel")).toBe("noopener noreferrer");
+    unmount();
+  });
+
+  test("Common: Button - test if renders with correct variant", ({ expect }) => {
+    const { unmount } = render(<Button variant="destructive">Destructive Button</Button>);
+
+    const button = screen.getByRole("button", { name: "Destructive Button" });
+    expect(button.classList).toContain("bg-destructive");
+    unmount();
   });
 });

package/src/button.tsx

@@ -1,135 +1,61 @@
-import { Link } from "@stackshift-ui/link";
-import { useStackShiftUIComponents } from "@stackshift-ui/system";
-import cn from "classnames";
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
-import { FaSpinner } from "react-icons/fa";
-import { extractLink } from "./helper";
-import { type LabeledRoute, type StyleVariants } from "./types";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
-type Variant =
-  | "outline"
-  | "ghost"
-  | "link"
-  | "custom"
-  | "solid"
-  | "addToWishlist"
-  | "unstyled"
-  | "swiper_pagination"
-  | "tab";
-type TextSize = "xs" | "sm" | "md" | "lg";
-type RadiusSize = "none" | "sm" | "md" | "base" | "lg" | "xl" | "2xl" | "full";
-
-interface BaseType {
-  children?: ReactNode;
-  variant?: Variant;
-  radius?: RadiusSize;
-  size?: TextSize;
-  ariaLabel?: string;
-  isActive?: boolean;
-}
-
-interface LinkProps extends BaseType, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type"> {
-  link: LabeledRoute;
-  as: "link";
-}
-
-interface ButtonProps extends BaseType, ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: "button";
-  loading?: boolean;
-  disabled?: boolean;
-  loadingComponent?: React.ReactNode;
-}
-
-type Props = ButtonProps | LinkProps;
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
 
 const displayName = "Button";
 
-export function Button({ children, ...props }: Props) {
-  const { [displayName]: Component = "button" } = useStackShiftUIComponents();
-
-  const sizes = {
-    xs: "py-1 px-3 text-xs",
-    sm: "py-2 px-4 text-sm",
-    default: "py-3 px-6 text-default",
-    md: "py-3 px-6 text-base",
-    lg: "py-4 px-7 text-lg",
-  };
-
-  const borderRadiusMap = {
-    none: "rounded-none",
-    sm: "rounded-sm",
-    md: "rounded-md",
-    base: "rounded-base",
-    lg: "rounded-lg",
-    xl: "rounded-xl",
-    "2xl": "rounded-2xl",
-    full: "rounded-full",
-    global: "rounded-global",
-  };
-
-  const { radius, size, variant, ariaLabel, className, isActive } = props;
-
-  const buttonRadius = radius ? borderRadiusMap[radius] : "rounded-global";
-  const buttonSize = sizes[size ?? "default"];
-
-  const commonStyles = "inline-block font-default text-default transition duration-200";
-  const solid = `${commonStyles} ${buttonSize} ${buttonRadius} bg-primary hover:bg-primary/50 text-gray-50`;
-  const custom = `inline-block bg-primary hover:bg-primary/50 ${buttonSize} ${buttonRadius} text-gray-50 font-bold transition duration-200`;
-  const outline = `${commonStyles} ${buttonSize} ${buttonRadius} bg-white hover:bg-primary/50 outline outline-1 text-primary outline-primary`;
-  const ghost = `${commonStyles} ${buttonRadius} ${buttonSize} bg-transparent hover:bg-primary/50 text-primary`;
-  const linkType = `transition-200 text-primary hover:text-primary/50 underline ${buttonRadius} ${cn(buttonSize, "px-0 py-0")}`;
-  const unstyled = ``;
-  const swiper_pagination = `mr-1 ${isActive ? "bg-primary" : "bg-gray-200"} rounded-full p-1 focus:outline-none`;
-  const tab = `mx-auto mb-1 w-auto px-4 py-2 rounded duration-200 transition focus:outline-none font-bold ${
-    isActive
-      ? "bg-gray-50 text-primary shadow"
-      : "text-gray-700 hover:bg-secondary/50 hover:text-primary hover:shadow"
-  }`;
-  const addToWishlist = `${commonStyles} ${buttonRadius} ${buttonSize} ml-auto sm:ml-0 flex-shrink-0 inline-flex items-center justify-center w-full rounded-md border hover:border-primary`;
-
-  const variants: StyleVariants<Variant> = {
-    outline,
-    ghost,
-    link: linkType,
-    custom,
-    solid,
-    addToWishlist,
-    unstyled,
-    swiper_pagination,
-    tab,
-  };
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        unstyled:
+          "bg-transparent p-0 border-none shadow-none hover:bg-transparent ring-0 outline-none text-inherit",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
 
-  const variantClass = variants[variant ?? "solid"];
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  if (props.as === "link") {
-    const { link, ...rest } = props as LinkProps;
+    const Comp = asChild ? Slot : "button";
 
     return (
-      <Link
-        className={cn(variantClass, className)}
-        aria-label={ariaLabel}
-        href={extractLink(link)}
-        target={link.linkTarget}
-        rel={link.linkTarget === "_blank" ? "noopener noreferrer" : ""}
-        {...rest}>
-        {children}
-      </Link>
+      <Component
+        as={Comp}
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
     );
-  }
-
-  const { loadingComponent, onClick, loading, disabled, type } = props;
+  },
+);
+Button.displayName = displayName;
 
-  const Loader = loadingComponent ?? <FaSpinner className="animate-spin" size={30} />;
-
-  return (
-    <Component
-      onClick={onClick}
-      disabled={disabled ?? loading}
-      className={cn(variantClass, className)}
-      aria-label={ariaLabel}
-      data-testid={displayName.toLowerCase()}
-      type={type}>
-      {loading ? Loader : children}
-    </Component>
-  );
-}
+export { Button, buttonVariants };

package/src/index.ts

@@ -2,3 +2,4 @@
 
 // component exports
 export * from "./button";
+

package/dist/chunk-5BNLLVMY.mjs

@@ -1 +0,0 @@
-var a=e=>{var t,r;return!(e!=null&&e.internalLink)&&!(e!=null&&e.externalLink)?"/page-not-found":(e==null?void 0:e.type)==="linkInternal"&&((r=(t=e==null?void 0:e.internalLink)==null?void 0:t.toLowerCase())!=null&&r.includes("home"))?"/":(e==null?void 0:e.type)==="linkInternal"?`/${e==null?void 0:e.internalLink}`:(e==null?void 0:e.type)==="linkExternal"?`${e==null?void 0:e.externalLink}`:"/"};export{a};

package/dist/chunk-RVVB2H7S.mjs

@@ -1 +0,0 @@
-import{a as f}from"./chunk-5BNLLVMY.mjs";import{Link as V}from"@stackshift-ui/link";import{useStackShiftUIComponents as _}from"@stackshift-ui/system";import d from"classnames";import{FaSpinner as E}from"react-icons/fa";import{jsx as u}from"react/jsx-runtime";var h="Button";function q({children:p,...o}){let{[h]:k="button"}=_(),L={xs:"py-1 px-3 text-xs",sm:"py-2 px-4 text-sm",default:"py-3 px-6 text-default",md:"py-3 px-6 text-base",lg:"py-4 px-7 text-lg"},$={none:"rounded-none",sm:"rounded-sm",md:"rounded-md",base:"rounded-base",lg:"rounded-lg",xl:"rounded-xl","2xl":"rounded-2xl",full:"rounded-full",global:"rounded-global"},{radius:m,size:r,variant:a,ariaLabel:c,className:y,isActive:b}=o,t=m?$[m]:"rounded-global",e=L[r!=null?r:"default"],n="inline-block font-default text-default transition duration-200",T=`${n} ${e} ${t} bg-primary hover:bg-primary/50 text-gray-50`,v=`inline-block bg-primary hover:bg-primary/50 ${e} ${t} text-gray-50 font-bold transition duration-200`,S=`${n} ${e} ${t} bg-white hover:bg-primary/50 outline outline-1 text-primary outline-primary`,B=`${n} ${t} ${e} bg-transparent hover:bg-primary/50 text-primary`,R=`transition-200 text-primary hover:text-primary/50 underline ${t} ${d(e,"px-0 py-0")}`,A="",w=`mr-1 ${b?"bg-primary":"bg-gray-200"} rounded-full p-1 focus:outline-none`,N=`mx-auto mb-1 w-auto px-4 py-2 rounded duration-200 transition focus:outline-none font-bold ${b?"bg-gray-50 text-primary shadow":"text-gray-700 hover:bg-secondary/50 hover:text-primary hover:shadow"}`,z=`${n} ${t} ${e} ml-auto sm:ml-0 flex-shrink-0 inline-flex items-center justify-center w-full rounded-md border hover:border-primary`,x={outline:S,ghost:B,link:R,custom:v,solid:T,addToWishlist:z,unstyled:A,swiper_pagination:w,tab:N}[a!=null?a:"solid"];if(o.as==="link"){let{link:l,...H}=o;return u(V,{className:d(x,y),"aria-label":c,href:f(l),target:l.linkTarget,rel:l.linkTarget==="_blank"?"noopener noreferrer":"",...H,children:p})}let{loadingComponent:i,onClick:C,loading:g,disabled:s,type:M}=o,P=i!=null?i:u(E,{className:"animate-spin",size:30});return u(k,{onClick:C,disabled:s!=null?s:g,className:d(x,y),"aria-label":c,"data-testid":h.toLowerCase(),type:M,children:g?P:p})}export{q as a};