https://www.berea.edu/_next/static/chunks/pages/styleguide/button-40531da936febb8f.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},r=(new e.Error).stack;r&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[r]="20629568-2494-4f8e-aafc-754bf4e01f39",e._sentryDebugIdIdentifier="sentry-dbid-20629568-2494-4f8e-aafc-754bf4e01f39")}catch(e){}}(),(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6967],{97673:function(e,r,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styleguide/button",function(){return s(70481)}])},17171:function(e,r,s){"use strict";s.d(r,{Z:function(){return d}});var t=s(85893),a=s(67294),n=s(41664),l=s.n(n),i=s(17627);function d(e){let{title:r,description:s,filePath:n,bgClass:d,showEditor:c=!1,defaultData:o,linkTo:x,children:m}=e,[u,h]=(0,a.useState)(o?JSON.stringify(o,null,2):""),[b,g]=(0,a.useState)(o),[y,p]=(0,a.useState)(null);return(0,a.useEffect)(()=>{if(c&&u)try{let e=JSON.parse(u);g(e),p(null)}catch(e){p(e.message)}},[u,c]),(0,t.jsxs)("div",{className:"mb-6",children:[(0,t.jsxs)("div",{className:"mb-3 flex items-start justify-between",children:[(0,t.jsxs)("div",{className:"min-w-0",children:[(0,t.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:r}),s&&(0,t.jsx)("p",{className:"mt-0.5 text-sm text-gray-500",children:s}),n&&(0,t.jsx)("code",{className:"mt-1 block font-mono text-xs break-all text-gray-400",children:n})]}),x&&(0,t.jsxs)(l(),{href:x,className:"flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-200",children:["View details",(0,t.jsx)("svg",{className:"h-3 w-3",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})]})]}),(0,t.jsxs)("div",{className:"rounded-lg border border-gray-300 shadow-lg",children:[(0,t.jsx)("div",{className:"rounded-t-lg bg-gray-800 px-3 py-2 text-xs text-gray-300",children:"Preview"}),(0,t.jsx)("div",{className:"relative min-h-[100px] ".concat(d||""),children:m(c?b

1:void 0)})]}),c&&o&&(0,t.jsx)(i.Z,{data:b,defaultData:o,onChange:(e,r)=>{g(e),h(r)},error:y})]})}},17627:function(e,r,s){"use strict";s.d(r,{Z:function(){return l}});var t=s(85893),a=s(67294),n=s(13464);function l(e){let{data:r,defaultData:s,onChange:l,error:i}=e,[d,c]=(0,a.useState)("tree"),[o,x]=(0,a.useState)(1),[m,u]=(0,a.useState)(r?JSON.stringify(r,null,2):JSON.stringify(s,null,2)),[h,b]=(0,a.useState)(null),g=(0,a.useRef)(JSON.parse(JSON.stringify(r||s)));(0,a.useEffect)(()=>{r&&(u(JSON.stringify(r,null,2)),g.current=JSON.parse(JSON.stringify(r)))},[r]);let y=e=>{u(e);try{let r=JSON.parse(e);b(null),g.current=JSON.parse(JSON.stringify(r)),l(r,e)}catch(e){b(e.message)}},p=()=>{let e=JSON.stringify(s,null,2);u(e),b(null),g.current=JSON.parse(JSON.stringify(s)),l(s,e)},f=i||h;return(0,t.jsxs)("div",{className:"mt-4 rounded-lg border border-gray-200 bg-white",children:[(0,t.jsxs)("div",{className:"grid gap-3 border-b border-gray-200 px-4 py-3 sm:flex sm:items-center sm:justify-between",children:[(0,t.jsx)("h4",{className:"text-sm font-medium text-gray-700",children:"Component Data"}),(0,t.jsxs)("div",{className:"flex flex-wrap items-center gap-2 sm:gap-4",children:[(0,t.jsxs)("div",{className:"flex rounded-md border border-gray-300 text-xs",children:[(0,t.jsx)("button",{onClick:()=>c("tree"),className:"px-3 py-1.5 transition-colors ".concat("tree"===d?"bg-gray-800 text-white":"bg-white text-gray-600 hover:bg-gray-50"," rounded-l-md"),children:"Tree"}),(0,t.jsx)("button",{onClick:()=>c("raw"),className:"px-3 py-1.5 transition-colors ".concat("raw"===d?"bg-gray-800 text-white":"bg-white text-gray-600 hover:bg-gray-50"," rounded-r-md border-l border-gray-300"),children:"Edit"})]}),"tree"===d?(0,t.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,t.jsx)("button",{onClick:()=>x(!1),className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Expand All"}),(0,t.jsx)("button",{onClick:()=>x(1),className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Collapse All"}),(0,t.jsx)("button",{onClick:p,className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Reset"})]}):(0,t.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,t.jsx)("button",{onClick:p,className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Reset"}),(0,t.jsx)("button",{onClick:()=>{try{let e=JSON.parse(m),r=JSON.stringify(e,null,2);u(r),b(null)}catch(e){}},className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Format"})]})]})]}),f&&(0,t.jsx)("div",{className:"border-b border-red-200 bg-red-50 px-4 py-2 text-sm text-red-600",children:f}),(0,t.jsx)("div",{className:"p-4",children:"tree"===d?(0,t.jsx)("div",{className:"max-h-96 overflow-auto rounded bg-gray-50 p-3",children:(0,t.jsx)(n.Z,{value:g.current,collapsed:o,displayDataTypes:!1,onEdit:e=>(setTimeout(()=>{let e=JSON.stringify(g.current,null,2);u(e),l(JSON.parse(JSON.stringify(g.current)),e)},0),!0),style:{backgroundColor:"transparent",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",fontSize:"12px"}})}):(0,t.jsx)("textarea",{value:m,onChange:e=>y(e.target.value),className:"h-64 w-full rounded border p-3 font-mono text-xs ".concat(f?"border-red-300 focus:border-red-500 focus:ring-red-500":"border-gray-300 focus:border-blue-500 focus:ring-blue-500"," focus:outline-none focus:ring-1"),spellCheck:!1})})]})}},70481:function(e,r,s){"use strict";s.r(r),s.d(r,{default:function(){return x}});var t=s(85893),a=s(56552),n=s(43982),l=s(1340),i=s(17171),d=s(86170);let c={buttons:[{label:"Primary Action",variant:"primary",linkUrl:"/apply"},{label:"Secondary Action",variant:"secondary",linkUrl:"/visit"},{label:"Tertiary Action",variant:"tertiary",linkUrl:"/learn-more"}]};function o(e){let{buttons:r}=e;return(0,t.jsx)("div",{className:"flex flex-wrap items-center gap-4",children:r.map((e,r)=>(0,t.jsx)(d.Z,{label:e.label,variant:e.variant,linkUrl:e.linkUrl},r))})}function x(){return(0,t.jsxs)(l.ZP,{children:[(0,t.jsxs)("div",{className:"mb-8 max-w-3xl",children:[(0,t.jsx)("h1",{className:"mb-2 text-2xl font-bold",children:"Button"}),(0,t.jsx)("p",{className:"text-gray-600",children:"Button component with primary, secondary, and tertiary variants."})]}),(0,t.jsx)(i.Z,{title:"Button Variants",description:"All three button variants shown together",filePath:"components/ui/next/primitives/Button/Button.tsx",showEditor:!0,defaultData:c,bgClass:"bg-brand-blue-darker p-8",children:e=>(0,t.jsx)("div",{"data-tone":"blue",children:(0,t.jsx)(o,{buttons:e.buttons})})}),(0,t.jsxs)("div",{className:"mt-8",children:[(0,t.jsx)("h2",{className:"mb-4 text-xl font-semibold",children:"Individual Variants"}),(0,t.jsxs)("div",{className:"space-y-6",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)("h3",{className:"mb-2 font-medium",children:"Primary"}),(0,t.jsx)("p",{className:"mb-3 text-sm text-gray-600",children:"Main call-to-action button for important actions like Apply, Submit, etc."}),(0,t.jsx)("div",{"data-tone":"blue",className:"rounded-lg bg-brand-blue-darker p-6",children:(0,t.jsx)(d.Z,{label:"Apply Now",variant:"primary",linkUrl:"/apply"})})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("h3",{className:"mb-2 font-medium",children:"Secondary"}),(0,t.jsx)("p",{className:"mb-3 text-sm text-gray-600",children:"Secondary actions that complement the primary CTA."}),(0,t.jsx)("div",{"data-tone":"blue",className:"rounded-lg bg-brand-blue-darker p-6",children:(0,t.jsx)(d.Z,{label:"Schedule a Visit",variant:"secondary",linkUrl:"/visit"})})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("h3",{className:"mb-2 font-medium",children:"Tertiary"}),(0,t.jsx)("p",{className:"mb-3 text-sm text-gray-600",children:"Low-emphasis actions or links that look like buttons."}),(0,t.jsx)("div",{"data-tone":"blue",className:"rounded-lg bg-brand-blue-darker p-6",children:(0,t.jsx)(d.Z,{label:"Learn More",variant:"tertiary",linkUrl:"/learn-more"})})]})]})]}),(0,t.jsxs)("div",{className:"mt-8",children:[(0,t.jsx)("h2",{className:"mb-4 text-xl font-semibold",children:"Icon & onClick"}),(0,t.jsxs)("div",{className:"space-y-6",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)("h3",{className:"mb-2 font-medium",children:"Leading Icon"}),(0,t.jsxs)("p",{className:"mb-3 text-sm text-gray-600",children:["Pass any ",(0,t.jsx)("code",{children:"ReactNode"})," as ",(0,t.jsx)("code",{children:"icon"})," — the caller owns sizing and aria (icons are decorative, so mark them ",(0,t.jsx)("code",{children:"aria-hidden"}),")."]}),(0,t.jsx)("div",{className:"flex flex-wrap items-center gap-4 roun

1ded-lg bg-brand-blue-darker p-6",children:(0,t.jsx)(d.Z,{label:"Contact Us",variant:"primary",linkUrl:"tel:8599853500",icon:(0,t.jsx)(a.Z,{className:"size-5","aria-hidden":!0})})})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("h3",{className:"mb-2 font-medium",children:"onClick (no link)"}),(0,t.jsxs)("p",{className:"mb-3 text-sm text-gray-600",children:["Without a ",(0,t.jsx)("code",{children:"linkUrl"}),", the primitive renders a real"," ",(0,t.jsx)("code",{children:'<button type="button">'})," and ",(0,t.jsx)("code",{children:"onClick"})," fires the action — e.g. opening the site search."]}),(0,t.jsx)("div",{className:"rounded-lg bg-brand-blue-darker p-6",children:(0,t.jsx)(d.Z,{label:"Search Berea.edu",variant:"secondary",icon:(0,t.jsx)(n.Z,{className:"size-5","aria-hidden":!0}),onClick:()=>alert("onClick fired — wire this to a real action")})})]})]})]}),(0,t.jsxs)("div",{className:"mt-8 max-w-3xl rounded-lg bg-gray-50 p-4",children:[(0,t.jsx)("h3",{className:"mb-2 font-semibold",children:"Design Notes"}),(0,t.jsxs)("table",{className:"w-full text-sm",children:[(0,t.jsx)("thead",{children:(0,t.jsxs)("tr",{className:"border-b",children:[(0,t.jsx)("th",{className:"py-2 text-left",children:"Aspect"}),(0,t.jsx)("th",{className:"py-2 text-left",children:"Value"})]})}),(0,t.jsxs)("tbody",{className:"text-gray-600",children:[(0,t.jsxs)("tr",{className:"border-b",children:[(0,t.jsx)("td",{className:"py-2",children:"Primary Color"}),(0,t.jsxs)("td",{className:"py-2",children:[(0,t.jsx)("span",{className:"inline-block h-4 w-4 rounded bg-next-chartreuse"})," ","Chartreuse"]})]}),(0,t.jsxs)("tr",{className:"border-b",children:[(0,t.jsx)("td",{className:"py-2",children:"Font"}),(0,t.jsx)("td",{className:"py-2",children:"Serif, Italic"})]}),(0,t.jsxs)("tr",{className:"border-b",children:[(0,t.jsx)("td",{className:"py-2",children:"Hover Effect"}),(0,t.jsx)("td",{className:"py-2",children:"Scale transform (1.05)"})]})]})]})]})]})}},43982:function(e,r,s){"use strict";var t=s(67294);let a=t.forwardRef(function(e,r){let{title:s,titleId:a,...n}=e;return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:r,"aria-labelledby":a},n),s?t.createElement("title",{id:a},s):null,t.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"}))});r.Z=a}},function(e){e.O(0,[3464,1340,2888,9774,179],function(){return e(e.s=97673)}),_N_E=e.O()}]);