v12-ui/dist/Button/Button.cjs

A React component library with a focus on utility-first design and accessibility.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),m=require("react"),w=require("../utils/utils.cjs"),p=require("class-variance-authority"),y=p.cva("size-text-button font-weight-button flex justify-center items-center hover:cursor-pointer disabled:opacity-50 whitespace-nowrap transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-inherit active:ring-active",{variants:{variant:{primary:"text-text-primary bg-bg-primary hover:bg-bg-primary-hover focus-visible:ring-border-primary",secondary:"text-text-secondary bg-bg-secondary hover:bg-bg-secondary-hover focus-visible:ring-border-secondary",muted:"text-text-muted bg-bg-muted hover:bg-bg-muted-hover focus-visible:ring-border-muted",accent:"text-text-accent bg-bg-accent hover:bg-bg-accent-hover focus-visible:ring-border-accent",success:"text-text-success bg-bg-success hover:bg-bg-success-hover focus-visible:ring-border-success",warning:"text-text-warning bg-bg-warning hover:bg-bg-warning-hover focus-visible:ring-border-warning",error:"text-text-error bg-bg-error hover:bg-bg-error-hover focus-visible:ring-border-error",info:"text-text-info bg-bg-info hover:bg-bg-info-hover focus-visible:ring-border-info",ghost:"text-text-ghost bg-bg-ghost hover:bg-bg-ghost-hover focus-visible:ring-border-ghost"},border:{true:"border-1"},shadow:{default:"shadow-custom-lg",success:"shadow-shadow-success",warning:"shadow-shadow-warning",error:"shadow-shadow-error",info:"shadow-shadow-info"},rounded:{none:"rounded-none",sm:"rounded-sm",md:"rounded-md",lg:"rounded-lg",pill:"rounded-4xl",circle:"rounded-full aspect-square"},size:{sm:"px-3 py-1 w-20 h-9",md:"px-6 py-2 w-30 h-11",lg:"px-10 py-3 w-35 h-14",fit:"px-8 py-3 w-fit h-fit",full:"px-10 py-3 w-full h-14"}},compoundVariants:[{variant:"primary",border:!0,className:"border-border-primary hover:border-primary-hover"},{variant:"secondary",border:!0,className:"border-border-secondary hover:border-secondary-hover"},{variant:"muted",border:!0,className:"border-border-muted"},{variant:"accent",border:!0,className:"border-border-accent hover:border-accent-hover"},{variant:"success",border:!0,className:"border-border-success hover:border-success-hover"},{variant:"warning",border:!0,className:"border-border-warning hover:border-warning-hover"},{variant:"error",border:!0,className:"border-border-error hover:border-error-hover"},{variant:"info",border:!0,className:"border-border-info hover:border-info-hover"},{variant:"ghost",border:!0,className:"border-border-ghost hover:border-ghost-hover"}],defaultVariants:{variant:"primary",border:!0,shadow:"default",rounded:"pill",size:"fit"}});function x({as:e,disabled:o,children:i,variant:a,border:b,shadow:d,rounded:c,size:u,className:g,...t},h){const s=e||"button",v=s==="button";if(process.env.NODE_ENV!=="production"){if(e==="a"&&!("href"in t))throw new Error('When using "as" prop with "a" tag, "href" must be provided.');if(e==="button"&&"href"in t)throw new Error('When using "as" prop with "button" tag, "href" should not be provided.')}function l(r){const n=r.currentTarget;!n||n.tagName==="BUTTON"||(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),n.click())}return f.jsx(s,{role:v?void 0:"button",tabIndex:o?-1:0,onKeyDown:l,ref:h,"aria-disabled":o,...t,className:w.cn(y({variant:a,border:b,shadow:d,rounded:c,size:u}),o&&"bg-bg-disabled hover:cursor-not-allowed hover:bg-bg-disabled border-border-disabled",g),children:i})}const N=m.forwardRef(x);exports.Button=N;