@breadcoop/ui 1.0.4 → 1.0.6

package/README.md

@@ -8,6 +8,25 @@ A React TypeScript component library for implementing Bread Coop branding in JS/
 npm install @breadcoop/ui
 ```
 
+## ⚠️ Important: CSS Import Required
+
+**Your components will not display correctly without importing the theme CSS!** Choose one of the integration methods below.
+
+### 🚨 Troubleshooting: Components Not Styling
+
+If your LiftedButton or other components appear unstyled:
+
+1. **Check browser console** - you should see a warning about missing CSS variables
+2. **Import the theme CSS** using one of the methods below
+3. **Ensure Tailwind is configured** if using the preset method
+4. **Clear build cache** and rebuild your project
+
+**Quick Fix:**
+```tsx
+// Add this import to your main component or CSS file
+import "@breadcoop/ui/theme";
+```
+
 ## Usage Options
 
 ### Option 1: Drop-in CSS Theme (Simplest)

package/dist/index.js

@@ -1 +1 @@
-"use strict";function e(e,t,r){if(t in e){Object.defineProperty(e,t,{value:r,enumerable:true,configurable:true,writable:true})}else{e[t]=r}return e}function t(t){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};var o=Object.keys(n);if(typeof Object.getOwnPropertySymbols==="function"){o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))}o.forEach(function(r){e(t,r,n[r])})}return t}function r(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);if(t){n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})}r.push.apply(r,n)}return r}function n(e,t){t=t!=null?t:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(e,Object.getOwnPropertyDescriptors(t))}else{r(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function o(e,t){if(e==null)return{};var r=a(e,t);var n,o;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++){n=i[o];if(t.indexOf(n)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;r[n]=e[n]}}return r}function a(e,t){if(e==null)return{};var r={};var n=Object.keys(e);var o,a;for(a=0;a<n.length;a++){o=n[a];if(t.indexOf(o)>=0)continue;r[o]=e[o]}return r}var i=require("react"),c=require("react/jsx-runtime");function l(e){return e&&e.__esModule?e:{default:e}}var s=l(i);var u={primary:{bg:"--color-primary-orange",text:"--color-paper-main",hoverBg:"--color-orange-1",hoverText:"#ffffff",shadowBg:"#595959"},secondary:{bg:"#FBDED1",text:"--color-primary-orange",hoverBg:"#FFF1EA",hoverText:"--color-primary-orange",shadowBg:"#595959"},destructive:{bg:"--color-system-red",text:"--color-paper-main",hoverBg:"#BF0A00",hoverText:"#ffffff",shadowBg:"#595959"},positive:{bg:"--color-system-green",text:"--color-paper-main",hoverBg:"#2B8F00",hoverText:"#ffffff",shadowBg:"#595959"},stroke:{bg:"--color-paper-main",text:"--color-surface-ink",hoverBg:"--color-paper-2",hoverText:"--color-surface-ink",shadowBg:"#595959"}};function d(e){return{"--btn-bg":f(e.bg),"--btn-text":f(e.text),"--btn-hover-bg":f(e.hoverBg),"--btn-hover-text":f(e.hoverText),"--btn-shadow":f(e.shadowBg)}}function f(e){return e?e.startsWith("--")?"var(".concat(e,")"):e:""}var v=function(e,t){if(s.default.isValidElement(e)){var r="".concat(e.props.className||""," ").concat(t).trim();return s.default.cloneElement(e,{className:r})}return e};function p(e){var r=e.children,a=e.leftIcon,i=e.rightIcon,l=e.disabled,s=l===void 0?false:l,f=e.preset,p=f===void 0?"primary":f,b=e.colorOverrides,h=b===void 0?{}:b,x=e.offsetPx,g=x===void 0?4:x,m=e.durationMs,y=m===void 0?300:m,j=e.className,O=j===void 0?"":j,w=e.type,N=w===void 0?"button":w,B=e.width,k=B===void 0?"auto":B,P=e.scrollTo,D=o(e,["children","leftIcon","rightIcon","disabled","preset","colorOverrides","offsetPx","durationMs","className","type","width","scrollTo"]);var E=t({},u[p],h),T=n(t({},d(E)),{"--btn-offset":"".concat(g,"px"),"--btn-duration":"".concat(y,"ms")}),I=["relative z-10 inline-flex items-center justify-center gap-[8px]","text-body text-[16px]","px-[32px] h-14",s?"cursor-not-allowed":"cursor-pointer",k==="full"?"w-full":"",k==="mobile-full"?"w-full xl:w-auto":""],F=["bg-[var(--btn-bg)] text-[var(--btn-text)]",p==="stroke"?"border border-surface-ink":"","group-hover:bg-[var(--btn-hover-bg)] group-hover:text-[var(--btn-hover-text)]","group-active:bg-[var(--btn-bg)] group-active:text-[var(--btn-text)]","transition-all duration-[var(--btn-duration)] ease-out","-translate-x-[var(--btn-offset)] -translate-y-[var(--btn-offset)]","group-active:translate-x-0 group-active:translate-y-0"],S=["bg-[var(--color-surface-grey)]  opacity-50"],H=I.concat(s?S:F);H.push(O);var C=function(e){var t;P&&(e.preventDefault(),(t=document.getElementById(P))===null||t===void 0?void 0:t.scrollIntoView({behavior:"smooth"})),D.onClick&&D.onClick(e)};return c.jsxs("span",{className:[k==="full"?"relative block select-none align-middle":k==="mobile-full"?"relative block md:inline-block select-none align-middle":"relative inline-block select-none align-middle","group"].join(" "),style:T,children:[s?null:c.jsx("span",{"aria-hidden":true,className:"absolute inset-0 bg-[var(--btn-shadow)]"}),c.jsxs("button",n(t({type:N,className:H.join(" "),onClick:C},D),{children:[a?c.jsx("span",{className:"shrink-0 py-[5px] flex items-center justify-center","aria-hidden":true,children:v(a,"w-6 h-6")}):null,c.jsx("span",{className:"whitespace-nowrap mt-1 leading-none p-[5px]",children:r}),i?c.jsx("span",{className:"shrink-0 py-[5px] flex items-center justify-center","aria-hidden":true,children:v(i,"w-6 h-6")}):null]}))]})}var b={breadDisplay:"--font-breadDisplay",breadBody:"--font-breadBody"},h=function(e){var t=e.variant,r=e.children,n=e.className,o=n===void 0?"":n;var a=["h1","h2","h3"].includes(t)?"font-breadDisplay":"font-breadBody",i={h1:"text-h1",h2:"text-h2",h3:"text-h3",h4:"text-h4",h5:"text-h5",body:"text-body",caption:"text-caption"},c=t.startsWith("h")?t:"p";return s.default.createElement(c,{className:"".concat(a," ").concat(i[t]," ").concat(o).trim()},r)},x=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c.jsx(h,{variant:"h1",className:n,children:t})},g=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c.jsx(h,{variant:"h2",className:n,children:t})},m=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c.jsx(h,{variant:"h3",className:n,children:t})},y=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c.jsx(h,{variant:"h4",className:n,children:t})},j=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c.jsx(h,{variant:"h5",className:n,children:t})},O=function(e){var t=e.children,r=e.className,n=r===void 0?"":r,o=e.bold,a=o===void 0?false:o;return c.jsx(h,{variant:"body",className:"".concat(a?"text-body-bold":""," ").concat(n).trim(),children:t})},w=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c.jsx(h,{variant:"caption",className:n,children:t})};exports.Body=O;exports.Caption=w;exports.Heading1=x;exports.Heading2=g;exports.Heading3=m;exports.Heading4=y;exports.Heading5=j;exports.LiftedButton=p;exports.Typography=h;exports.fontVariables=b;
+"use strict";function e(e,t,r){if(t in e){Object.defineProperty(e,t,{value:r,enumerable:true,configurable:true,writable:true})}else{e[t]=r}return e}function t(t){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};var o=Object.keys(n);if(typeof Object.getOwnPropertySymbols==="function"){o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))}o.forEach(function(r){e(t,r,n[r])})}return t}function r(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);if(t){n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})}r.push.apply(r,n)}return r}function n(e,t){t=t!=null?t:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(e,Object.getOwnPropertyDescriptors(t))}else{r(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function o(e,t){if(e==null)return{};var r=a(e,t);var n,o;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++){n=i[o];if(t.indexOf(n)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;r[n]=e[n]}}return r}function a(e,t){if(e==null)return{};var r={};var n=Object.keys(e);var o,a;for(a=0;a<n.length;a++){o=n[a];if(t.indexOf(o)>=0)continue;r[o]=e[o]}return r}function i(e){"@swc/helpers - typeof";return e&&typeof Symbol!=="undefined"&&e.constructor===Symbol?"symbol":typeof e}var c=require("react"),l=require("react/jsx-runtime");function s(e){return e&&e.__esModule?e:{default:e}}var u=s(c);var d={primary:{bg:"--color-primary-orange",text:"--color-paper-main",hoverBg:"--color-orange-1",hoverText:"#ffffff",shadowBg:"#595959"},secondary:{bg:"#FBDED1",text:"--color-primary-orange",hoverBg:"#FFF1EA",hoverText:"--color-primary-orange",shadowBg:"#595959"},destructive:{bg:"--color-system-red",text:"--color-paper-main",hoverBg:"#BF0A00",hoverText:"#ffffff",shadowBg:"#595959"},positive:{bg:"--color-system-green",text:"--color-paper-main",hoverBg:"#2B8F00",hoverText:"#ffffff",shadowBg:"#595959"},stroke:{bg:"--color-paper-main",text:"--color-surface-ink",hoverBg:"--color-paper-2",hoverText:"--color-surface-ink",shadowBg:"#595959"}};function f(e){return{"--btn-bg":h(e.bg),"--btn-text":h(e.text),"--btn-hover-bg":h(e.hoverBg),"--btn-hover-text":h(e.hoverText),"--btn-shadow":h(e.shadowBg)}}var p={"--color-primary-orange":"#ea6023","--color-paper-main":"#f6f3eb","--color-surface-ink":"#1b201a","--color-system-red":"#df0b00","--color-system-green":"#32a800","--color-orange-1":"#d14a0f","--color-paper-2":"#eae2d6"};function h(e){if(!e)return"";if(e.includes("var("))return e;if(e.startsWith("--")){var t=p[e]||"#000000";return"var(".concat(e,", ").concat(t,")")}return e}var v=["--color-primary-orange","--color-paper-main","--color-surface-ink","--color-system-red","--color-system-green","--color-orange-1","--color-paper-2"],m=false;function b(){if(m||(typeof window==="undefined"?"undefined":i(window))>"u")return;var e=[];v.forEach(function(t){var r=getComputedStyle(document.documentElement).getPropertyValue(t);(!r||r.trim()==="")&&e.push(t)}),e.length>0&&!m&&(m=true,console.warn("\uD83D\uDEA8 @breadcoop/ui: Missing CSS variables detected!\n\nMissing variables: ".concat(e.join(", "),"\n\nTo fix this, import the theme CSS in your main CSS file:\n\n@import '@breadcoop/ui/theme';\n\nOr use the Tailwind preset:\nmodule.exports = { presets: [require('@breadcoop/ui/tailwind-preset')] }")))}process.env.NODE_ENV==="development"&&setTimeout(b,100);var y=function(e,t){if(u.default.isValidElement(e)){var r="".concat(e.props.className||""," ").concat(t).trim();return u.default.cloneElement(e,{className:r})}return e};function g(e){var r=e.children,a=e.leftIcon,i=e.rightIcon,c=e.disabled,s=c===void 0?false:c,p=e.preset,h=p===void 0?"primary":p,v=e.colorOverrides,m=v===void 0?{}:v,g=e.offsetPx,x=g===void 0?4:g,w=e.durationMs,j=w===void 0?300:w,O=e.className,N=O===void 0?"":O,B=e.type,k=B===void 0?"button":B,P=e.width,S=P===void 0?"auto":P,E=e.scrollTo,D=o(e,["children","leftIcon","rightIcon","disabled","preset","colorOverrides","offsetPx","durationMs","className","type","width","scrollTo"]);u.default.useEffect(function(){b()},[]);var T=t({},d[h],m),C=n(t({},f(T)),{"--btn-offset":"".concat(x,"px"),"--btn-duration":"".concat(j,"ms")}),I=["lifted-button-base",S==="full"?"w-full":"",S==="mobile-full"?"w-full xl:w-auto":""],F=[function(e){switch(e){case"primary":return"lifted-button-primary";case"secondary":return"lifted-button-secondary";case"destructive":return"lifted-button-destructive";case"positive":return"lifted-button-positive";case"stroke":return"lifted-button-stroke";default:return"lifted-button-primary"}}(h),"lifted-button-motion","lifted-button-lifted","lifted-button-active"],H=["lifted-button-disabled"],M=I.concat(s?H:F);M.push(N);var V=function(e){var t;E&&(e.preventDefault(),(t=document.getElementById(E))===null||t===void 0?void 0:t.scrollIntoView({behavior:"smooth"})),D.onClick&&D.onClick(e)};return l.jsxs("span",{className:[S==="full"?"relative block select-none align-middle":S==="mobile-full"?"relative block md:inline-block select-none align-middle":"relative inline-block select-none align-middle","group"].join(" "),style:C,children:[s?null:l.jsx("span",{"aria-hidden":true,className:"lifted-button-shadow",style:{transform:"translateX(2px) translateY(2px)"}}),l.jsxs("button",n(t({type:k,className:M.join(" "),onClick:V},D),{children:[a?l.jsx("span",{className:"shrink-0 py-[5px] flex items-center justify-center","aria-hidden":true,children:y(a,"w-6 h-6")}):null,l.jsx("span",{className:"whitespace-nowrap mt-1 leading-none p-[5px]",children:r}),i?l.jsx("span",{className:"shrink-0 py-[5px] flex items-center justify-center","aria-hidden":true,children:y(i,"w-6 h-6")}):null]}))]})}var x={breadDisplay:"--font-breadDisplay",breadBody:"--font-breadBody"},w=function(e){var t=e.variant,r=e.children,n=e.className,o=n===void 0?"":n;var a=["h1","h2","h3"].includes(t)?"font-breadDisplay":"font-breadBody",i={h1:"text-h1",h2:"text-h2",h3:"text-h3",h4:"text-h4",h5:"text-h5",body:"text-body",caption:"text-caption"},c=t.startsWith("h")?t:"p";return u.default.createElement(c,{className:"".concat(a," ").concat(i[t]," ").concat(o).trim()},r)},j=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l.jsx(w,{variant:"h1",className:n,children:t})},O=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l.jsx(w,{variant:"h2",className:n,children:t})},N=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l.jsx(w,{variant:"h3",className:n,children:t})},B=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l.jsx(w,{variant:"h4",className:n,children:t})},k=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l.jsx(w,{variant:"h5",className:n,children:t})},P=function(e){var t=e.children,r=e.className,n=r===void 0?"":r,o=e.bold,a=o===void 0?false:o;return l.jsx(w,{variant:"body",className:"".concat(a?"text-body-bold":""," ").concat(n).trim(),children:t})},S=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l.jsx(w,{variant:"caption",className:n,children:t})};exports.Body=P;exports.Caption=S;exports.Heading1=j;exports.Heading2=O;exports.Heading3=N;exports.Heading4=B;exports.Heading5=k;exports.LiftedButton=g;exports.Typography=w;exports.fontVariables=x;

package/dist/index.mjs

@@ -1 +1 @@
-function e(e,t,r){if(t in e){Object.defineProperty(e,t,{value:r,enumerable:true,configurable:true,writable:true})}else{e[t]=r}return e}function t(t){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};var a=Object.keys(n);if(typeof Object.getOwnPropertySymbols==="function"){a=a.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))}a.forEach(function(r){e(t,r,n[r])})}return t}function r(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);if(t){n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})}r.push.apply(r,n)}return r}function n(e,t){t=t!=null?t:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(e,Object.getOwnPropertyDescriptors(t))}else{r(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function a(e,t){if(e==null)return{};var r=o(e,t);var n,a;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++){n=i[a];if(t.indexOf(n)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;r[n]=e[n]}}return r}function o(e,t){if(e==null)return{};var r={};var n=Object.keys(e);var a,o;for(o=0;o<n.length;o++){a=n[o];if(t.indexOf(a)>=0)continue;r[a]=e[a]}return r}import i from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";var s={primary:{bg:"--color-primary-orange",text:"--color-paper-main",hoverBg:"--color-orange-1",hoverText:"#ffffff",shadowBg:"#595959"},secondary:{bg:"#FBDED1",text:"--color-primary-orange",hoverBg:"#FFF1EA",hoverText:"--color-primary-orange",shadowBg:"#595959"},destructive:{bg:"--color-system-red",text:"--color-paper-main",hoverBg:"#BF0A00",hoverText:"#ffffff",shadowBg:"#595959"},positive:{bg:"--color-system-green",text:"--color-paper-main",hoverBg:"#2B8F00",hoverText:"#ffffff",shadowBg:"#595959"},stroke:{bg:"--color-paper-main",text:"--color-surface-ink",hoverBg:"--color-paper-2",hoverText:"--color-surface-ink",shadowBg:"#595959"}};function d(e){return{"--btn-bg":u(e.bg),"--btn-text":u(e.text),"--btn-hover-bg":u(e.hoverBg),"--btn-hover-text":u(e.hoverText),"--btn-shadow":u(e.shadowBg)}}function u(e){return e?e.startsWith("--")?"var(".concat(e,")"):e:""}var f=function(e,t){if(i.isValidElement(e)){var r="".concat(e.props.className||""," ").concat(t).trim();return i.cloneElement(e,{className:r})}return e};function v(e){var r=e.children,o=e.leftIcon,i=e.rightIcon,u=e.disabled,v=u===void 0?false:u,p=e.preset,b=p===void 0?"primary":p,h=e.colorOverrides,m=h===void 0?{}:h,g=e.offsetPx,y=g===void 0?4:g,x=e.durationMs,O=x===void 0?300:x,w=e.className,N=w===void 0?"":w,j=e.type,B=j===void 0?"button":j,k=e.width,P=k===void 0?"auto":k,D=e.scrollTo,E=a(e,["children","leftIcon","rightIcon","disabled","preset","colorOverrides","offsetPx","durationMs","className","type","width","scrollTo"]);var T=t({},s[b],m),I=n(t({},d(T)),{"--btn-offset":"".concat(y,"px"),"--btn-duration":"".concat(O,"ms")}),S=["relative z-10 inline-flex items-center justify-center gap-[8px]","text-body text-[16px]","px-[32px] h-14",v?"cursor-not-allowed":"cursor-pointer",P==="full"?"w-full":"",P==="mobile-full"?"w-full xl:w-auto":""],F=["bg-[var(--btn-bg)] text-[var(--btn-text)]",b==="stroke"?"border border-surface-ink":"","group-hover:bg-[var(--btn-hover-bg)] group-hover:text-[var(--btn-hover-text)]","group-active:bg-[var(--btn-bg)] group-active:text-[var(--btn-text)]","transition-all duration-[var(--btn-duration)] ease-out","-translate-x-[var(--btn-offset)] -translate-y-[var(--btn-offset)]","group-active:translate-x-0 group-active:translate-y-0"],H=["bg-[var(--color-surface-grey)]  opacity-50"],C=S.concat(v?H:F);C.push(N);var V=function(e){var t;D&&(e.preventDefault(),(t=document.getElementById(D))===null||t===void 0?void 0:t.scrollIntoView({behavior:"smooth"})),E.onClick&&E.onClick(e)};return l("span",{className:[P==="full"?"relative block select-none align-middle":P==="mobile-full"?"relative block md:inline-block select-none align-middle":"relative inline-block select-none align-middle","group"].join(" "),style:I,children:[v?null:c("span",{"aria-hidden":true,className:"absolute inset-0 bg-[var(--btn-shadow)]"}),l("button",n(t({type:B,className:C.join(" "),onClick:V},E),{children:[o?c("span",{className:"shrink-0 py-[5px] flex items-center justify-center","aria-hidden":true,children:f(o,"w-6 h-6")}):null,c("span",{className:"whitespace-nowrap mt-1 leading-none p-[5px]",children:r}),i?c("span",{className:"shrink-0 py-[5px] flex items-center justify-center","aria-hidden":true,children:f(i,"w-6 h-6")}):null]}))]})}var p={breadDisplay:"--font-breadDisplay",breadBody:"--font-breadBody"},b=function(e){var t=e.variant,r=e.children,n=e.className,a=n===void 0?"":n;var o=["h1","h2","h3"].includes(t)?"font-breadDisplay":"font-breadBody",c={h1:"text-h1",h2:"text-h2",h3:"text-h3",h4:"text-h4",h5:"text-h5",body:"text-body",caption:"text-caption"},l=t.startsWith("h")?t:"p";return i.createElement(l,{className:"".concat(o," ").concat(c[t]," ").concat(a).trim()},r)},h=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c(b,{variant:"h1",className:n,children:t})},m=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c(b,{variant:"h2",className:n,children:t})},g=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c(b,{variant:"h3",className:n,children:t})},y=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c(b,{variant:"h4",className:n,children:t})},x=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c(b,{variant:"h5",className:n,children:t})},O=function(e){var t=e.children,r=e.className,n=r===void 0?"":r,a=e.bold,o=a===void 0?false:a;return c(b,{variant:"body",className:"".concat(o?"text-body-bold":""," ").concat(n).trim(),children:t})},w=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return c(b,{variant:"caption",className:n,children:t})};export{O as Body,w as Caption,h as Heading1,m as Heading2,g as Heading3,y as Heading4,x as Heading5,v as LiftedButton,b as Typography,p as fontVariables};
+function e(e,t,r){if(t in e){Object.defineProperty(e,t,{value:r,enumerable:true,configurable:true,writable:true})}else{e[t]=r}return e}function t(t){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};var o=Object.keys(n);if(typeof Object.getOwnPropertySymbols==="function"){o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))}o.forEach(function(r){e(t,r,n[r])})}return t}function r(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);if(t){n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})}r.push.apply(r,n)}return r}function n(e,t){t=t!=null?t:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(e,Object.getOwnPropertyDescriptors(t))}else{r(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function o(e,t){if(e==null)return{};var r=a(e,t);var n,o;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++){n=i[o];if(t.indexOf(n)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(e,n))continue;r[n]=e[n]}}return r}function a(e,t){if(e==null)return{};var r={};var n=Object.keys(e);var o,a;for(a=0;a<n.length;a++){o=n[a];if(t.indexOf(o)>=0)continue;r[o]=e[o]}return r}function i(e){"@swc/helpers - typeof";return e&&typeof Symbol!=="undefined"&&e.constructor===Symbol?"symbol":typeof e}import c from"react";import{jsx as l,jsxs as s}from"react/jsx-runtime";var d={primary:{bg:"--color-primary-orange",text:"--color-paper-main",hoverBg:"--color-orange-1",hoverText:"#ffffff",shadowBg:"#595959"},secondary:{bg:"#FBDED1",text:"--color-primary-orange",hoverBg:"#FFF1EA",hoverText:"--color-primary-orange",shadowBg:"#595959"},destructive:{bg:"--color-system-red",text:"--color-paper-main",hoverBg:"#BF0A00",hoverText:"#ffffff",shadowBg:"#595959"},positive:{bg:"--color-system-green",text:"--color-paper-main",hoverBg:"#2B8F00",hoverText:"#ffffff",shadowBg:"#595959"},stroke:{bg:"--color-paper-main",text:"--color-surface-ink",hoverBg:"--color-paper-2",hoverText:"--color-surface-ink",shadowBg:"#595959"}};function u(e){return{"--btn-bg":p(e.bg),"--btn-text":p(e.text),"--btn-hover-bg":p(e.hoverBg),"--btn-hover-text":p(e.hoverText),"--btn-shadow":p(e.shadowBg)}}var f={"--color-primary-orange":"#ea6023","--color-paper-main":"#f6f3eb","--color-surface-ink":"#1b201a","--color-system-red":"#df0b00","--color-system-green":"#32a800","--color-orange-1":"#d14a0f","--color-paper-2":"#eae2d6"};function p(e){if(!e)return"";if(e.includes("var("))return e;if(e.startsWith("--")){var t=f[e]||"#000000";return"var(".concat(e,", ").concat(t,")")}return e}var m=["--color-primary-orange","--color-paper-main","--color-surface-ink","--color-system-red","--color-system-green","--color-orange-1","--color-paper-2"],h=false;function b(){if(h||(typeof window==="undefined"?"undefined":i(window))>"u")return;var e=[];m.forEach(function(t){var r=getComputedStyle(document.documentElement).getPropertyValue(t);(!r||r.trim()==="")&&e.push(t)}),e.length>0&&!h&&(h=true,console.warn("\uD83D\uDEA8 @breadcoop/ui: Missing CSS variables detected!\n\nMissing variables: ".concat(e.join(", "),"\n\nTo fix this, import the theme CSS in your main CSS file:\n\n@import '@breadcoop/ui/theme';\n\nOr use the Tailwind preset:\nmodule.exports = { presets: [require('@breadcoop/ui/tailwind-preset')] }")))}process.env.NODE_ENV==="development"&&setTimeout(b,100);var v=function(e,t){if(c.isValidElement(e)){var r="".concat(e.props.className||""," ").concat(t).trim();return c.cloneElement(e,{className:r})}return e};function y(e){var r=e.children,a=e.leftIcon,i=e.rightIcon,f=e.disabled,p=f===void 0?false:f,m=e.preset,h=m===void 0?"primary":m,y=e.colorOverrides,g=y===void 0?{}:y,w=e.offsetPx,x=w===void 0?4:w,O=e.durationMs,N=O===void 0?300:O,j=e.className,B=j===void 0?"":j,k=e.type,P=k===void 0?"button":k,S=e.width,E=S===void 0?"auto":S,D=e.scrollTo,T=o(e,["children","leftIcon","rightIcon","disabled","preset","colorOverrides","offsetPx","durationMs","className","type","width","scrollTo"]);c.useEffect(function(){b()},[]);var C=t({},d[h],g),I=n(t({},u(C)),{"--btn-offset":"".concat(x,"px"),"--btn-duration":"".concat(N,"ms")}),F=["lifted-button-base",E==="full"?"w-full":"",E==="mobile-full"?"w-full xl:w-auto":""],H=[function(e){switch(e){case"primary":return"lifted-button-primary";case"secondary":return"lifted-button-secondary";case"destructive":return"lifted-button-destructive";case"positive":return"lifted-button-positive";case"stroke":return"lifted-button-stroke";default:return"lifted-button-primary"}}(h),"lifted-button-motion","lifted-button-lifted","lifted-button-active"],M=["lifted-button-disabled"],V=F.concat(p?M:H);V.push(B);var A=function(e){var t;D&&(e.preventDefault(),(t=document.getElementById(D))===null||t===void 0?void 0:t.scrollIntoView({behavior:"smooth"})),T.onClick&&T.onClick(e)};return s("span",{className:[E==="full"?"relative block select-none align-middle":E==="mobile-full"?"relative block md:inline-block select-none align-middle":"relative inline-block select-none align-middle","group"].join(" "),style:I,children:[p?null:l("span",{"aria-hidden":true,className:"lifted-button-shadow",style:{transform:"translateX(2px) translateY(2px)"}}),s("button",n(t({type:P,className:V.join(" "),onClick:A},T),{children:[a?l("span",{className:"shrink-0 py-[5px] flex items-center justify-center","aria-hidden":true,children:v(a,"w-6 h-6")}):null,l("span",{className:"whitespace-nowrap mt-1 leading-none p-[5px]",children:r}),i?l("span",{className:"shrink-0 py-[5px] flex items-center justify-center","aria-hidden":true,children:v(i,"w-6 h-6")}):null]}))]})}var g={breadDisplay:"--font-breadDisplay",breadBody:"--font-breadBody"},w=function(e){var t=e.variant,r=e.children,n=e.className,o=n===void 0?"":n;var a=["h1","h2","h3"].includes(t)?"font-breadDisplay":"font-breadBody",i={h1:"text-h1",h2:"text-h2",h3:"text-h3",h4:"text-h4",h5:"text-h5",body:"text-body",caption:"text-caption"},l=t.startsWith("h")?t:"p";return c.createElement(l,{className:"".concat(a," ").concat(i[t]," ").concat(o).trim()},r)},x=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l(w,{variant:"h1",className:n,children:t})},O=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l(w,{variant:"h2",className:n,children:t})},N=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l(w,{variant:"h3",className:n,children:t})},j=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l(w,{variant:"h4",className:n,children:t})},B=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l(w,{variant:"h5",className:n,children:t})},k=function(e){var t=e.children,r=e.className,n=r===void 0?"":r,o=e.bold,a=o===void 0?false:o;return l(w,{variant:"body",className:"".concat(a?"text-body-bold":""," ").concat(n).trim(),children:t})},P=function(e){var t=e.children,r=e.className,n=r===void 0?"":r;return l(w,{variant:"caption",className:n,children:t})};export{k as Body,P as Caption,x as Heading1,O as Heading2,N as Heading3,j as Heading4,B as Heading5,y as LiftedButton,w as Typography,g as fontVariables};

package/dist/theme.css

@@ -160,6 +160,64 @@
   .bread-button-enabled {
     @apply cursor-pointer;
   }
+
+  /* LiftedButton Components */
+  .lifted-button-base {
+    @apply mb-1 relative z-10 inline-flex items-center justify-center gap-[8px] font-breadBody text-base px-[37px] h-14 cursor-pointer;
+  }
+
+  .lifted-button-primary {
+    @apply bg-primary-orange text-paper-main group-hover:bg-orange-1 group-hover:text-white;
+  }
+
+  .lifted-button-secondary {
+    @apply text-primary-orange group-hover:text-primary-orange;
+    background-color: #fbded1;
+  }
+
+  .lifted-button-secondary:hover {
+    background-color: #fff1ea;
+  }
+
+  .lifted-button-destructive {
+    @apply bg-system-red text-paper-main group-hover:text-white;
+  }
+
+  .lifted-button-destructive:hover {
+    background-color: #bf0a00;
+  }
+
+  .lifted-button-positive {
+    @apply bg-system-green text-paper-main group-hover:text-white;
+  }
+
+  .lifted-button-positive:hover {
+    background-color: #2b8f00;
+  }
+
+  .lifted-button-stroke {
+    @apply bg-paper-main text-surface-ink border border-surface-ink group-hover:bg-paper-2 group-hover:text-surface-ink;
+  }
+
+  .lifted-button-disabled {
+    @apply bg-surface-grey opacity-50 cursor-not-allowed;
+  }
+
+  .lifted-button-shadow {
+    @apply absolute mb-1 inset-0 bg-surface-grey-2;
+  }
+
+  .lifted-button-motion {
+    @apply transition-all ease-out;
+  }
+
+  .lifted-button-lifted {
+    @apply -translate-x-0.5 -translate-y-0.5;
+  }
+
+  .lifted-button-active {
+    @apply group-active:translate-x-0.5 group-active:translate-y-0.5;
+  }
 }
 
 body {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@breadcoop/ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A component library for implementing Bread Coop branding in JS/TS projects",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
-  "style": "dist/index.css",
+  "style": "dist/theme.css",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/theme.css

@@ -160,6 +160,64 @@
   .bread-button-enabled {
     @apply cursor-pointer;
   }
+
+  /* LiftedButton Components */
+  .lifted-button-base {
+    @apply mb-1 relative z-10 inline-flex items-center justify-center gap-[8px] font-breadBody text-base px-[37px] h-14 cursor-pointer;
+  }
+
+  .lifted-button-primary {
+    @apply bg-primary-orange text-paper-main group-hover:bg-orange-1 group-hover:text-white;
+  }
+
+  .lifted-button-secondary {
+    @apply text-primary-orange group-hover:text-primary-orange;
+    background-color: #fbded1;
+  }
+
+  .lifted-button-secondary:hover {
+    background-color: #fff1ea;
+  }
+
+  .lifted-button-destructive {
+    @apply bg-system-red text-paper-main group-hover:text-white;
+  }
+
+  .lifted-button-destructive:hover {
+    background-color: #bf0a00;
+  }
+
+  .lifted-button-positive {
+    @apply bg-system-green text-paper-main group-hover:text-white;
+  }
+
+  .lifted-button-positive:hover {
+    background-color: #2b8f00;
+  }
+
+  .lifted-button-stroke {
+    @apply bg-paper-main text-surface-ink border border-surface-ink group-hover:bg-paper-2 group-hover:text-surface-ink;
+  }
+
+  .lifted-button-disabled {
+    @apply bg-surface-grey opacity-50 cursor-not-allowed;
+  }
+
+  .lifted-button-shadow {
+    @apply absolute mb-1 inset-0 bg-surface-grey-2;
+  }
+
+  .lifted-button-motion {
+    @apply transition-all ease-out;
+  }
+
+  .lifted-button-lifted {
+    @apply -translate-x-0.5 -translate-y-0.5;
+  }
+
+  .lifted-button-active {
+    @apply group-active:translate-x-0.5 group-active:translate-y-0.5;
+  }
 }
 
 body {