@berdsk/ui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +26 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +11 -7
- package/dist/index.d.ts +11 -7
- package/dist/index.js +27 -13
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var z=Object.create;var b=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var O=(e,r)=>{for(var o in r)b(e,o,{get:r[o],enumerable:!0})},k=(e,r,o,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of A(r))!S.call(e,t)&&t!==o&&b(e,t,{get:()=>r[t],enumerable:!(s=B(r,t))||s.enumerable});return e};var m=(e,r,o)=>(o=e!=null?z($(e)):{},k(r||!e||!e.__esModule?b(o,"default",{value:e,enumerable:!0}):o,e)),F=e=>k(b({},"__esModule",{value:!0}),e);var D={};O(D,{Button:()=>R,Icon:()=>U,ThemeProvider:()=>W,defaultTheme:()=>l,useTheme:()=>q});module.exports=F(D);var x=m(require("react"),1),T=require("react/jsx-runtime"),y="https://cdn.berdsk.com.br/berdsk-ui/icons/all.css",v="https://cdn.berdsk.com.br",I=()=>{if(typeof document>"u")return;if(!document.querySelector(`link[rel="preconnect"][href="${v}"]`)){let r=document.createElement("link");r.rel="preconnect",r.href=v,document.head.appendChild(r)}if(!document.querySelector(`link[href="${y}"]`)){let r=document.createElement("link");r.rel="stylesheet",r.href=y,document.head.appendChild(r)}},U=({className:e,...r})=>(x.useEffect(()=>{I()},[]),(0,T.jsx)("i",{className:`${e}`,...r}));var C=m(require("react"),1),n=require("react/jsx-runtime"),R=C.forwardRef(({children:e,variant:r="solid",color:o="primary",size:s="md",rounded:t="md",leftIcon:d,rightIcon:c,fullWidth:i=!1,className:w="",href:u,...p},g)=>{let M=`btn-${r}`,N=`btn-${o}`,P=`btn-${s}`,H=`btn-rounded-${t}`,h=["btn",M,N,P,H,i?"btn-full-width":"",!e&&(d||c)?"btn-icon-only":"",w].filter(Boolean).join(" "),f=(0,n.jsxs)(n.Fragment,{children:[d&&(0,n.jsx)("span",{className:"btn-icon-left",children:d}),e&&(0,n.jsx)("span",{className:"btn-content",children:e}),c&&(0,n.jsx)("span",{className:"btn-icon-right",children:c})]});return u?(0,n.jsx)("a",{href:u,className:h,ref:g,...p,children:f}):(0,n.jsx)("button",{className:h,ref:g,...p,children:f})});R.displayName="Button";var a=m(require("react"),1),L=require("react/jsx-runtime"),l={colors:{primary:"#007bff",secondary:"#6c757d",danger:"#dc3545",success:"#28a745"},border:{color:"#dee2e6",size:"1px",radius:{none:"0",xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",full:"9999px"}}},E=a.createContext({theme:l}),W=({theme:e,children:r})=>{let o=a.useMemo(()=>e?{...l,...e,colors:{...l.colors,...e.colors},border:{...l.border,...e.border,radius:{...l.border.radius,...e.border?.radius}}}:l,[e]);return a.useLayoutEffect(()=>{let s=document.documentElement;Object.entries(o.colors).forEach(([c,i])=>{s.style.setProperty(`--berdsk-color-${c}`,i)}),s.style.setProperty("--berdsk-border-color",o.border.color),s.style.setProperty("--berdsk-border-size",o.border.size),Object.entries(o.border.radius).forEach(([c,i])=>{s.style.setProperty(`--berdsk-rounded-${c}`,i)});let t="berdsk-ui-theme-styles",d=document.getElementById(t);d||(d=document.createElement("style"),d.id=t,document.head.appendChild(d)),d.innerHTML=`
|
|
2
2
|
:root {
|
|
3
3
|
--berdsk-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
|
4
4
|
}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
font-weight: 500;
|
|
11
11
|
cursor: pointer;
|
|
12
12
|
transition: all 0.2s;
|
|
13
|
-
border:
|
|
13
|
+
border: var(--berdsk-border-size) solid transparent;
|
|
14
14
|
text-decoration: none;
|
|
15
15
|
gap: 0.5rem;
|
|
16
16
|
}
|
|
@@ -20,12 +20,12 @@
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
/* Tamanhos */
|
|
23
|
-
.btn-xs { padding: 0
|
|
24
|
-
.btn-sm { padding: 0
|
|
25
|
-
.btn-md { padding: 0
|
|
26
|
-
.btn-lg { padding: 0
|
|
27
|
-
.btn-xl { padding:
|
|
28
|
-
.btn-2xl { padding:
|
|
23
|
+
.btn-xs { padding: 0 0.5rem; height: 1.5rem; font-size: 0.75rem; }
|
|
24
|
+
.btn-sm { padding: 0 0.75rem; height: 2rem; font-size: 0.875rem; }
|
|
25
|
+
.btn-md { padding: 0 1rem; height: 2.5rem; font-size: 1rem; }
|
|
26
|
+
.btn-lg { padding: 0 1.5rem; height: 3rem; font-size: 1.125rem; }
|
|
27
|
+
.btn-xl { padding: 0 2rem; height: 3.5rem; font-size: 1.25rem; }
|
|
28
|
+
.btn-2xl { padding: 0 2.5rem; height: 4rem; font-size: 1.5rem; }
|
|
29
29
|
|
|
30
30
|
/* Cores e Variantes - Solid */
|
|
31
31
|
.btn-solid.btn-primary { background-color: var(--berdsk-color-primary); color: white; }
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
.btn-solid:hover { filter: brightness(0.9); }
|
|
37
37
|
|
|
38
38
|
/* Outlined */
|
|
39
|
+
.btn-outlined { border-width: var(--berdsk-border-size); }
|
|
39
40
|
.btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }
|
|
40
41
|
.btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }
|
|
41
42
|
.btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }
|
|
@@ -45,10 +46,19 @@
|
|
|
45
46
|
|
|
46
47
|
/* Ghost */
|
|
47
48
|
.btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }
|
|
49
|
+
.btn-ghost.btn-secondary { color: var(--berdsk-color-secondary); background: transparent; }
|
|
50
|
+
.btn-ghost.btn-danger { color: var(--berdsk-color-danger); background: transparent; }
|
|
51
|
+
.btn-ghost.btn-success { color: var(--berdsk-color-success); background: transparent; }
|
|
52
|
+
|
|
48
53
|
.btn-ghost:hover { background: rgba(0,0,0,0.05); }
|
|
49
54
|
|
|
50
55
|
/* Link */
|
|
51
|
-
.btn-link { background: transparent; border: none; padding: 0;
|
|
56
|
+
.btn-link { background: transparent; border: none; padding: 0; height: auto; text-decoration: underline; }
|
|
57
|
+
.btn-link.btn-primary { color: var(--berdsk-color-primary); }
|
|
58
|
+
.btn-link.btn-secondary { color: var(--berdsk-color-secondary); }
|
|
59
|
+
.btn-link.btn-danger { color: var(--berdsk-color-danger); }
|
|
60
|
+
.btn-link.btn-success { color: var(--berdsk-color-success); }
|
|
61
|
+
|
|
52
62
|
.btn-link:hover { opacity: 0.8; }
|
|
53
63
|
|
|
54
64
|
/* Rounded */
|
|
@@ -61,8 +71,12 @@
|
|
|
61
71
|
|
|
62
72
|
.btn-full-width { width: 100%; display: flex; }
|
|
63
73
|
|
|
64
|
-
.btn-icon-only { padding: 0
|
|
65
|
-
.btn-xs.btn-icon-only {
|
|
66
|
-
.btn-
|
|
74
|
+
.btn-icon-only { padding: 0; aspect-ratio: 1/1; width: auto; }
|
|
75
|
+
.btn-xs.btn-icon-only { width: 1.5rem; }
|
|
76
|
+
.btn-sm.btn-icon-only { width: 2rem; }
|
|
77
|
+
.btn-md.btn-icon-only { width: 2.5rem; }
|
|
78
|
+
.btn-lg.btn-icon-only { width: 3rem; }
|
|
79
|
+
.btn-xl.btn-icon-only { width: 3.5rem; }
|
|
80
|
+
.btn-2xl.btn-icon-only { width: 4rem; }
|
|
67
81
|
`},[o]),(0,L.jsx)(E.Provider,{value:{theme:o},children:r})},q=()=>a.useContext(E);0&&(module.exports={Button,Icon,ThemeProvider,defaultTheme,useTheme});
|
|
68
82
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/Icon.tsx","../src/components/Button.tsx","../src/theme/ThemeProvider.tsx"],"sourcesContent":["export * from \"./components/Icon\";\r\nexport * from \"./components/Button\";\r\nexport * from \"./theme/ThemeProvider\";\r\n","import * as React from \"react\";\r\n\r\nconst CDN_URL = \"https://cdn.berdsk.com.br/berdsk-ui/icons/all.css\";\r\nconst PRECONNECT_URL = \"https://cdn.berdsk.com.br\";\r\n\r\nexport interface IconProps extends React.HTMLAttributes<HTMLElement> {\r\n className: string;\r\n}\r\n\r\nconst loadCDN = () => {\r\n if (typeof document === \"undefined\") return;\r\n\r\n // Preconnect para acelerar a conexão com o CDN\r\n if (\r\n !document.querySelector(`link[rel=\"preconnect\"][href=\"${PRECONNECT_URL}\"]`)\r\n ) {\r\n const preconnect = document.createElement(\"link\");\r\n preconnect.rel = \"preconnect\";\r\n preconnect.href = PRECONNECT_URL;\r\n document.head.appendChild(preconnect);\r\n }\r\n\r\n // Link do CSS\r\n const existingLink = document.querySelector(`link[href=\"${CDN_URL}\"]`);\r\n if (!existingLink) {\r\n const link = document.createElement(\"link\");\r\n link.rel = \"stylesheet\";\r\n link.href = CDN_URL;\r\n document.head.appendChild(link);\r\n }\r\n};\r\n\r\nexport const Icon: React.FC<IconProps> = ({ className, ...props }) => {\r\n React.useEffect(() => {\r\n loadCDN();\r\n }, []);\r\n\r\n return <i className={`${className}`} {...props} />;\r\n};\r\n","import * as React from \"react\";\r\nimport { Icon } from \"./Icon\";\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\r\n variant?: \"solid\" | \"outlined\" | \"ghost\" | \"link\";\r\n color?: \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\r\n rounded?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"full\";\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n fullWidth?: boolean;\r\n href?: string;\r\n}\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\r\n (\r\n {\r\n children,\r\n variant = \"solid\",\r\n color = \"primary\",\r\n size = \"md\",\r\n rounded = \"md\",\r\n leftIcon,\r\n rightIcon,\r\n fullWidth = false,\r\n className = \"\",\r\n href,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Estilos base e variantes (simulados via classes, assumindo que o projeto terá um CSS global ou o usuário fornecerá)\r\n // No entanto, para ser útil \"out of the box\", vamos construir uma string de classes bem estruturada.\r\n \r\n const baseClass = \"btn\";\r\n const variantClass = `btn-${variant}`;\r\n const colorClass = `btn-${color}`;\r\n const sizeClass = `btn-${size}`;\r\n const roundedClass = `btn-rounded-${rounded}`;\r\n const fullWidthClass = fullWidth ? \"btn-full-width\" : \"\";\r\n const iconOnlyClass = !children && (leftIcon || rightIcon) ? \"btn-icon-only\" : \"\";\r\n\r\n const combinedClasses = [\r\n baseClass,\r\n variantClass,\r\n colorClass,\r\n sizeClass,\r\n roundedClass,\r\n fullWidthClass,\r\n iconOnlyClass,\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(\" \");\r\n\r\n const content = (\r\n <>\r\n {leftIcon && <span className=\"btn-icon-left\">{leftIcon}</span>}\r\n {children && <span className=\"btn-content\">{children}</span>}\r\n {rightIcon && <span className=\"btn-icon-right\">{rightIcon}</span>}\r\n </>\r\n );\r\n\r\n if (href) {\r\n return (\r\n <a\r\n href={href}\r\n className={combinedClasses}\r\n ref={ref as React.ForwardedRef<HTMLAnchorElement>}\r\n {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\r\n >\r\n {content}\r\n </a>\r\n );\r\n }\r\n\r\n return (\r\n <button\r\n className={combinedClasses}\r\n ref={ref as React.ForwardedRef<HTMLButtonElement>}\r\n {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\r\n >\r\n {content}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface ThemeColors {\r\n primary: string;\r\n secondary: string;\r\n danger: string;\r\n success: string;\r\n}\r\n\r\nexport interface ThemeConfig {\r\n colors: ThemeColors;\r\n borderRadius: {\r\n none: string;\r\n xs: string;\r\n sm: string;\r\n md: string;\r\n lg: string;\r\n full: string;\r\n };\r\n}\r\n\r\nexport const defaultTheme: ThemeConfig = {\r\n colors: {\r\n primary: \"#007bff\",\r\n secondary: \"#6c757d\",\r\n danger: \"#dc3545\",\r\n success: \"#28a745\",\r\n },\r\n borderRadius: {\r\n none: \"0\",\r\n xs: \"0.125rem\",\r\n sm: \"0.25rem\",\r\n md: \"0.375rem\",\r\n lg: \"0.5rem\",\r\n full: \"9999px\",\r\n },\r\n};\r\n\r\ninterface ThemeContextType {\r\n theme: ThemeConfig;\r\n}\r\n\r\nconst ThemeContext = React.createContext<ThemeContextType>({\r\n theme: defaultTheme,\r\n});\r\n\r\nexport interface ThemeProviderProps {\r\n theme?: Partial<ThemeConfig>;\r\n children: React.ReactNode;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n theme,\r\n children,\r\n}) => {\r\n const mergedTheme = React.useMemo(() => {\r\n if (!theme) return defaultTheme;\r\n return {\r\n ...defaultTheme,\r\n ...theme,\r\n colors: { ...defaultTheme.colors, ...theme.colors },\r\n borderRadius: { ...defaultTheme.borderRadius, ...theme.borderRadius },\r\n };\r\n }, [theme]);\r\n\r\n React.useLayoutEffect(() => {\r\n const root = document.documentElement;\r\n \r\n // Injetar cores\r\n Object.entries(mergedTheme.colors).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-color-${key}`, value);\r\n });\r\n\r\n // Injetar arredondamentos\r\n Object.entries(mergedTheme.borderRadius).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-rounded-${key}`, value);\r\n });\r\n\r\n // Injetar estilos base para o botão funcionar \"out-of-the-box\"\r\n const styleId = \"berdsk-ui-theme-styles\";\r\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\r\n \r\n if (!styleElement) {\r\n styleElement = document.createElement(\"style\");\r\n styleElement.id = styleId;\r\n document.head.appendChild(styleElement);\r\n }\r\n\r\n styleElement.innerHTML = `\r\n :root {\r\n --berdsk-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\r\n }\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--berdsk-font-family);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border: 1px solid transparent;\r\n text-decoration: none;\r\n gap: 0.5rem;\r\n }\r\n .btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n }\r\n \r\n /* Tamanhos */\r\n .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }\r\n .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; }\r\n .btn-md { padding: 0.5rem 1rem; font-size: 1rem; }\r\n .btn-lg { padding: 0.75rem 1.5rem; font-size: 1.125rem; }\r\n .btn-xl { padding: 1rem 2rem; font-size: 1.25rem; }\r\n .btn-2xl { padding: 1.25rem 2.5rem; font-size: 1.5rem; }\r\n\r\n /* Cores e Variantes - Solid */\r\n .btn-solid.btn-primary { background-color: var(--berdsk-color-primary); color: white; }\r\n .btn-solid.btn-secondary { background-color: var(--berdsk-color-secondary); color: white; }\r\n .btn-solid.btn-danger { background-color: var(--berdsk-color-danger); color: white; }\r\n .btn-solid.btn-success { background-color: var(--berdsk-color-success); color: white; }\r\n \r\n .btn-solid:hover { filter: brightness(0.9); }\r\n\r\n /* Outlined */\r\n .btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }\r\n .btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }\r\n .btn-outlined.btn-success { border-color: var(--berdsk-color-success); color: var(--berdsk-color-success); background: transparent; }\r\n \r\n .btn-outlined:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Ghost */\r\n .btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-ghost:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Link */\r\n .btn-link { background: transparent; border: none; padding: 0; color: var(--berdsk-color-primary); text-decoration: underline; }\r\n .btn-link:hover { opacity: 0.8; }\r\n\r\n /* Rounded */\r\n .btn-rounded-none { border-radius: var(--berdsk-rounded-none); }\r\n .btn-rounded-xs { border-radius: var(--berdsk-rounded-xs); }\r\n .btn-rounded-sm { border-radius: var(--berdsk-rounded-sm); }\r\n .btn-rounded-md { border-radius: var(--berdsk-rounded-md); }\r\n .btn-rounded-lg { border-radius: var(--berdsk-rounded-lg); }\r\n .btn-rounded-full { border-radius: var(--berdsk-rounded-full); }\r\n\r\n .btn-full-width { width: 100%; display: flex; }\r\n \r\n .btn-icon-only { padding: 0.5rem; aspect-ratio: 1/1; }\r\n .btn-xs.btn-icon-only { padding: 0.25rem; }\r\n .btn-lg.btn-icon-only { padding: 0.75rem; }\r\n `;\r\n\r\n }, [mergedTheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ theme: mergedTheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport const useTheme = () => React.useContext(ThemeContext);\r\n"],"mappings":"0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,EAAA,SAAAC,EAAA,kBAAAC,EAAA,iBAAAC,EAAA,aAAAC,IAAA,eAAAC,EAAAP,GCAA,IAAAQ,EAAuB,sBAqCdC,EAAA,6BAnCHC,EAAU,oDACVC,EAAiB,4BAMjBC,EAAU,IAAM,CACpB,GAAI,OAAO,SAAa,IAAa,OAGrC,GACE,CAAC,SAAS,cAAc,gCAAgCD,CAAc,IAAI,EAC1E,CACA,IAAME,EAAa,SAAS,cAAc,MAAM,EAChDA,EAAW,IAAM,aACjBA,EAAW,KAAOF,EAClB,SAAS,KAAK,YAAYE,CAAU,CACtC,CAIA,GAAI,CADiB,SAAS,cAAc,cAAcH,CAAO,IAAI,EAClD,CACjB,IAAMI,EAAO,SAAS,cAAc,MAAM,EAC1CA,EAAK,IAAM,aACXA,EAAK,KAAOJ,EACZ,SAAS,KAAK,YAAYI,CAAI,CAChC,CACF,EAEaC,EAA4B,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,KACxD,YAAU,IAAM,CACpBL,EAAQ,CACV,EAAG,CAAC,CAAC,KAEE,OAAC,KAAE,UAAW,GAAGI,CAAS,GAAK,GAAGC,EAAO,GCrClD,IAAAC,EAAuB,sBAwDjBC,EAAA,6BA1COC,EAAe,aAC1B,CACE,CACE,SAAAC,EACA,QAAAC,EAAU,QACV,MAAAC,EAAQ,UACR,KAAAC,EAAO,KACP,QAAAC,EAAU,KACV,SAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,GACZ,UAAAC,EAAY,GACZ,KAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAKH,IAAMC,EAAe,OAAOX,CAAO,GAC7BY,EAAa,OAAOX,CAAK,GACzBY,EAAY,OAAOX,CAAI,GACvBY,EAAe,eAAeX,CAAO,GAIrCY,EAAkB,CACtB,MACAJ,EACAC,EACAC,EACAC,EARqBR,EAAY,iBAAmB,GAChC,CAACP,IAAaK,GAAYC,GAAa,gBAAkB,GAU7EE,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EAELS,KACJ,oBACG,UAAAZ,MAAY,OAAC,QAAK,UAAU,gBAAiB,SAAAA,EAAS,EACtDL,MAAY,OAAC,QAAK,UAAU,cAAe,SAAAA,EAAS,EACpDM,MAAa,OAAC,QAAK,UAAU,iBAAkB,SAAAA,EAAU,GAC5D,EAGF,OAAIG,KAEA,OAAC,KACC,KAAMA,EACN,UAAWO,EACX,IAAKL,EACJ,GAAID,EAEJ,SAAAO,EACH,KAKF,OAAC,UACC,UAAWD,EACX,IAAKL,EACJ,GAAID,EAEJ,SAAAO,EACH,CAEJ,CACF,EAEAlB,EAAO,YAAc,SCxFrB,IAAAmB,EAAuB,sBA+JnBC,EAAA,6BA1ISC,EAA4B,CACvC,OAAQ,CACN,QAAS,UACT,UAAW,UACX,OAAQ,UACR,QAAS,SACX,EACA,aAAc,CACZ,KAAM,IACN,GAAI,WACJ,GAAI,UACJ,GAAI,WACJ,GAAI,SACJ,KAAM,QACR,CACF,EAMMC,EAAqB,gBAAgC,CACzD,MAAOD,CACT,CAAC,EAOYE,EAA8C,CAAC,CAC1D,MAAAC,EACA,SAAAC,CACF,IAAM,CACJ,IAAMC,EAAoB,UAAQ,IAC3BF,EACE,CACL,GAAGH,EACH,GAAGG,EACH,OAAQ,CAAE,GAAGH,EAAa,OAAQ,GAAGG,EAAM,MAAO,EAClD,aAAc,CAAE,GAAGH,EAAa,aAAc,GAAGG,EAAM,YAAa,CACtE,EANmBH,EAOlB,CAACG,CAAK,CAAC,EAEV,OAAM,kBAAgB,IAAM,CAC1B,IAAMG,EAAO,SAAS,gBAGtB,OAAO,QAAQD,EAAY,MAAM,EAAE,QAAQ,CAAC,CAACE,EAAKC,CAAK,IAAM,CAC3DF,EAAK,MAAM,YAAY,kBAAkBC,CAAG,GAAIC,CAAK,CACvD,CAAC,EAGD,OAAO,QAAQH,EAAY,YAAY,EAAE,QAAQ,CAAC,CAACE,EAAKC,CAAK,IAAM,CACjEF,EAAK,MAAM,YAAY,oBAAoBC,CAAG,GAAIC,CAAK,CACzD,CAAC,EAGD,IAAMC,EAAU,yBACZC,EAAe,SAAS,eAAeD,CAAO,EAE7CC,IACHA,EAAe,SAAS,cAAc,OAAO,EAC7CA,EAAa,GAAKD,EAClB,SAAS,KAAK,YAAYC,CAAY,GAGxCA,EAAa,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAoE3B,EAAG,CAACL,CAAW,CAAC,KAGd,OAACJ,EAAa,SAAb,CAAsB,MAAO,CAAE,MAAOI,CAAY,EAChD,SAAAD,EACH,CAEJ,EAEaO,EAAW,IAAY,aAAWV,CAAY","names":["index_exports","__export","Button","Icon","ThemeProvider","defaultTheme","useTheme","__toCommonJS","React","import_jsx_runtime","CDN_URL","PRECONNECT_URL","loadCDN","preconnect","link","Icon","className","props","React","import_jsx_runtime","Button","children","variant","color","size","rounded","leftIcon","rightIcon","fullWidth","className","href","props","ref","variantClass","colorClass","sizeClass","roundedClass","combinedClasses","content","React","import_jsx_runtime","defaultTheme","ThemeContext","ThemeProvider","theme","children","mergedTheme","root","key","value","styleId","styleElement","useTheme"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/Icon.tsx","../src/components/Button.tsx","../src/theme/ThemeProvider.tsx"],"sourcesContent":["export * from \"./components/Icon\";\r\nexport * from \"./components/Button\";\r\nexport * from \"./theme/ThemeProvider\";\r\n","import * as React from \"react\";\r\n\r\nconst CDN_URL = \"https://cdn.berdsk.com.br/berdsk-ui/icons/all.css\";\r\nconst PRECONNECT_URL = \"https://cdn.berdsk.com.br\";\r\n\r\nexport interface IconProps extends React.HTMLAttributes<HTMLElement> {\r\n className: string;\r\n}\r\n\r\nconst loadCDN = () => {\r\n if (typeof document === \"undefined\") return;\r\n\r\n // Preconnect para acelerar a conexão com o CDN\r\n if (\r\n !document.querySelector(`link[rel=\"preconnect\"][href=\"${PRECONNECT_URL}\"]`)\r\n ) {\r\n const preconnect = document.createElement(\"link\");\r\n preconnect.rel = \"preconnect\";\r\n preconnect.href = PRECONNECT_URL;\r\n document.head.appendChild(preconnect);\r\n }\r\n\r\n // Link do CSS\r\n const existingLink = document.querySelector(`link[href=\"${CDN_URL}\"]`);\r\n if (!existingLink) {\r\n const link = document.createElement(\"link\");\r\n link.rel = \"stylesheet\";\r\n link.href = CDN_URL;\r\n document.head.appendChild(link);\r\n }\r\n};\r\n\r\nexport const Icon: React.FC<IconProps> = ({ className, ...props }) => {\r\n React.useEffect(() => {\r\n loadCDN();\r\n }, []);\r\n\r\n return <i className={`${className}`} {...props} />;\r\n};\r\n","import * as React from \"react\";\r\nimport { Icon } from \"./Icon\";\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\r\n variant?: \"solid\" | \"outlined\" | \"ghost\" | \"link\";\r\n color?: \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\r\n rounded?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"full\";\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n fullWidth?: boolean;\r\n href?: string;\r\n}\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\r\n (\r\n {\r\n children,\r\n variant = \"solid\",\r\n color = \"primary\",\r\n size = \"md\",\r\n rounded = \"md\",\r\n leftIcon,\r\n rightIcon,\r\n fullWidth = false,\r\n className = \"\",\r\n href,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Estilos base e variantes (simulados via classes, assumindo que o projeto terá um CSS global ou o usuário fornecerá)\r\n // No entanto, para ser útil \"out of the box\", vamos construir uma string de classes bem estruturada.\r\n \r\n const baseClass = \"btn\";\r\n const variantClass = `btn-${variant}`;\r\n const colorClass = `btn-${color}`;\r\n const sizeClass = `btn-${size}`;\r\n const roundedClass = `btn-rounded-${rounded}`;\r\n const fullWidthClass = fullWidth ? \"btn-full-width\" : \"\";\r\n const iconOnlyClass = !children && (leftIcon || rightIcon) ? \"btn-icon-only\" : \"\";\r\n\r\n const combinedClasses = [\r\n baseClass,\r\n variantClass,\r\n colorClass,\r\n sizeClass,\r\n roundedClass,\r\n fullWidthClass,\r\n iconOnlyClass,\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(\" \");\r\n\r\n const content = (\r\n <>\r\n {leftIcon && <span className=\"btn-icon-left\">{leftIcon}</span>}\r\n {children && <span className=\"btn-content\">{children}</span>}\r\n {rightIcon && <span className=\"btn-icon-right\">{rightIcon}</span>}\r\n </>\r\n );\r\n\r\n if (href) {\r\n return (\r\n <a\r\n href={href}\r\n className={combinedClasses}\r\n ref={ref as React.ForwardedRef<HTMLAnchorElement>}\r\n {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\r\n >\r\n {content}\r\n </a>\r\n );\r\n }\r\n\r\n return (\r\n <button\r\n className={combinedClasses}\r\n ref={ref as React.ForwardedRef<HTMLButtonElement>}\r\n {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\r\n >\r\n {content}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface ThemeColors {\r\n primary: string;\r\n secondary: string;\r\n danger: string;\r\n success: string;\r\n}\r\n\r\nexport interface ThemeConfig {\r\n colors: ThemeColors;\r\n border: {\r\n color: string;\r\n size: string;\r\n radius: {\r\n none: string;\r\n xs: string;\r\n sm: string;\r\n md: string;\r\n lg: string;\r\n full: string;\r\n };\r\n };\r\n}\r\n\r\nexport const defaultTheme: ThemeConfig = {\r\n colors: {\r\n primary: \"#007bff\",\r\n secondary: \"#6c757d\",\r\n danger: \"#dc3545\",\r\n success: \"#28a745\",\r\n },\r\n border: {\r\n color: \"#dee2e6\",\r\n size: \"1px\",\r\n radius: {\r\n none: \"0\",\r\n xs: \"0.125rem\",\r\n sm: \"0.25rem\",\r\n md: \"0.375rem\",\r\n lg: \"0.5rem\",\r\n full: \"9999px\",\r\n },\r\n },\r\n};\r\n\r\ninterface ThemeContextType {\r\n theme: ThemeConfig;\r\n}\r\n\r\nconst ThemeContext = React.createContext<ThemeContextType>({\r\n theme: defaultTheme,\r\n});\r\n\r\nexport interface ThemeProviderProps {\r\n theme?: Partial<ThemeConfig>;\r\n children: React.ReactNode;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n theme,\r\n children,\r\n}) => {\r\n const mergedTheme = React.useMemo(() => {\r\n if (!theme) return defaultTheme;\r\n return {\r\n ...defaultTheme,\r\n ...theme,\r\n colors: { ...defaultTheme.colors, ...theme.colors },\r\n border: {\r\n ...defaultTheme.border,\r\n ...theme.border,\r\n radius: { ...defaultTheme.border.radius, ...theme.border?.radius },\r\n },\r\n };\r\n }, [theme]);\r\n\r\n React.useLayoutEffect(() => {\r\n const root = document.documentElement;\r\n \r\n // Injetar cores\r\n Object.entries(mergedTheme.colors).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-color-${key}`, value);\r\n });\r\n\r\n // Injetar borda\r\n root.style.setProperty(\"--berdsk-border-color\", mergedTheme.border.color);\r\n root.style.setProperty(\"--berdsk-border-size\", mergedTheme.border.size);\r\n\r\n // Injetar arredondamentos\r\n Object.entries(mergedTheme.border.radius).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-rounded-${key}`, value);\r\n });\r\n\r\n // Injetar estilos base para o botão funcionar \"out-of-the-box\"\r\n const styleId = \"berdsk-ui-theme-styles\";\r\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\r\n \r\n if (!styleElement) {\r\n styleElement = document.createElement(\"style\");\r\n styleElement.id = styleId;\r\n document.head.appendChild(styleElement);\r\n }\r\n\r\n styleElement.innerHTML = `\r\n :root {\r\n --berdsk-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\r\n }\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--berdsk-font-family);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border: var(--berdsk-border-size) solid transparent;\r\n text-decoration: none;\r\n gap: 0.5rem;\r\n }\r\n .btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n }\r\n \r\n /* Tamanhos */\r\n .btn-xs { padding: 0 0.5rem; height: 1.5rem; font-size: 0.75rem; }\r\n .btn-sm { padding: 0 0.75rem; height: 2rem; font-size: 0.875rem; }\r\n .btn-md { padding: 0 1rem; height: 2.5rem; font-size: 1rem; }\r\n .btn-lg { padding: 0 1.5rem; height: 3rem; font-size: 1.125rem; }\r\n .btn-xl { padding: 0 2rem; height: 3.5rem; font-size: 1.25rem; }\r\n .btn-2xl { padding: 0 2.5rem; height: 4rem; font-size: 1.5rem; }\r\n\r\n /* Cores e Variantes - Solid */\r\n .btn-solid.btn-primary { background-color: var(--berdsk-color-primary); color: white; }\r\n .btn-solid.btn-secondary { background-color: var(--berdsk-color-secondary); color: white; }\r\n .btn-solid.btn-danger { background-color: var(--berdsk-color-danger); color: white; }\r\n .btn-solid.btn-success { background-color: var(--berdsk-color-success); color: white; }\r\n \r\n .btn-solid:hover { filter: brightness(0.9); }\r\n\r\n /* Outlined */\r\n .btn-outlined { border-width: var(--berdsk-border-size); }\r\n .btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }\r\n .btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }\r\n .btn-outlined.btn-success { border-color: var(--berdsk-color-success); color: var(--berdsk-color-success); background: transparent; }\r\n \r\n .btn-outlined:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Ghost */\r\n .btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-ghost.btn-secondary { color: var(--berdsk-color-secondary); background: transparent; }\r\n .btn-ghost.btn-danger { color: var(--berdsk-color-danger); background: transparent; }\r\n .btn-ghost.btn-success { color: var(--berdsk-color-success); background: transparent; }\r\n \r\n .btn-ghost:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Link */\r\n .btn-link { background: transparent; border: none; padding: 0; height: auto; text-decoration: underline; }\r\n .btn-link.btn-primary { color: var(--berdsk-color-primary); }\r\n .btn-link.btn-secondary { color: var(--berdsk-color-secondary); }\r\n .btn-link.btn-danger { color: var(--berdsk-color-danger); }\r\n .btn-link.btn-success { color: var(--berdsk-color-success); }\r\n \r\n .btn-link:hover { opacity: 0.8; }\r\n\r\n /* Rounded */\r\n .btn-rounded-none { border-radius: var(--berdsk-rounded-none); }\r\n .btn-rounded-xs { border-radius: var(--berdsk-rounded-xs); }\r\n .btn-rounded-sm { border-radius: var(--berdsk-rounded-sm); }\r\n .btn-rounded-md { border-radius: var(--berdsk-rounded-md); }\r\n .btn-rounded-lg { border-radius: var(--berdsk-rounded-lg); }\r\n .btn-rounded-full { border-radius: var(--berdsk-rounded-full); }\r\n\r\n .btn-full-width { width: 100%; display: flex; }\r\n \r\n .btn-icon-only { padding: 0; aspect-ratio: 1/1; width: auto; }\r\n .btn-xs.btn-icon-only { width: 1.5rem; }\r\n .btn-sm.btn-icon-only { width: 2rem; }\r\n .btn-md.btn-icon-only { width: 2.5rem; }\r\n .btn-lg.btn-icon-only { width: 3rem; }\r\n .btn-xl.btn-icon-only { width: 3.5rem; }\r\n .btn-2xl.btn-icon-only { width: 4rem; }\r\n `;\r\n\r\n }, [mergedTheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ theme: mergedTheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport const useTheme = () => React.useContext(ThemeContext);\r\n"],"mappings":"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","names":["index_exports","__export","Button","Icon","ThemeProvider","defaultTheme","useTheme","__toCommonJS","React","import_jsx_runtime","CDN_URL","PRECONNECT_URL","loadCDN","preconnect","link","Icon","className","props","React","import_jsx_runtime","Button","children","variant","color","size","rounded","leftIcon","rightIcon","fullWidth","className","href","props","ref","variantClass","colorClass","sizeClass","roundedClass","combinedClasses","content","React","import_jsx_runtime","defaultTheme","ThemeContext","ThemeProvider","theme","children","mergedTheme","root","key","value","styleId","styleElement","useTheme"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -25,13 +25,17 @@ interface ThemeColors {
|
|
|
25
25
|
}
|
|
26
26
|
interface ThemeConfig {
|
|
27
27
|
colors: ThemeColors;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
border: {
|
|
29
|
+
color: string;
|
|
30
|
+
size: string;
|
|
31
|
+
radius: {
|
|
32
|
+
none: string;
|
|
33
|
+
xs: string;
|
|
34
|
+
sm: string;
|
|
35
|
+
md: string;
|
|
36
|
+
lg: string;
|
|
37
|
+
full: string;
|
|
38
|
+
};
|
|
35
39
|
};
|
|
36
40
|
}
|
|
37
41
|
declare const defaultTheme: ThemeConfig;
|
package/dist/index.d.ts
CHANGED
|
@@ -25,13 +25,17 @@ interface ThemeColors {
|
|
|
25
25
|
}
|
|
26
26
|
interface ThemeConfig {
|
|
27
27
|
colors: ThemeColors;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
border: {
|
|
29
|
+
color: string;
|
|
30
|
+
size: string;
|
|
31
|
+
radius: {
|
|
32
|
+
none: string;
|
|
33
|
+
xs: string;
|
|
34
|
+
sm: string;
|
|
35
|
+
md: string;
|
|
36
|
+
lg: string;
|
|
37
|
+
full: string;
|
|
38
|
+
};
|
|
35
39
|
};
|
|
36
40
|
}
|
|
37
41
|
declare const defaultTheme: ThemeConfig;
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as k from"react";import{jsx as w}from"react/jsx-runtime";var h="https://cdn.berdsk.com.br/berdsk-ui/icons/all.css",f="https://cdn.berdsk.com.br",L=()=>{if(typeof document>"u")return;if(!document.querySelector(`link[rel="preconnect"][href="${f}"]`)){let r=document.createElement("link");r.rel="preconnect",r.href=f,document.head.appendChild(r)}if(!document.querySelector(`link[href="${h}"]`)){let r=document.createElement("link");r.rel="stylesheet",r.href=h,document.head.appendChild(r)}},$=({className:e,...r})=>(k.useEffect(()=>{L()},[]),w("i",{className:`${e}`,...r}));import*as y from"react";import{Fragment as N,jsx as l,jsxs as P}from"react/jsx-runtime";var M=y.forwardRef(({children:e,variant:r="solid",color:t="primary",size:d="md",rounded:i="md",leftIcon:o,rightIcon:s,fullWidth:c=!1,className:x="",href:b,...m},u)=>{let T=`btn-${r}`,C=`btn-${t}`,R=`btn-${d}`,E=`btn-rounded-${i}`,p=["btn",T,C,R,E,c?"btn-full-width":"",!e&&(o||s)?"btn-icon-only":"",x].filter(Boolean).join(" "),g=P(N,{children:[o&&l("span",{className:"btn-icon-left",children:o}),e&&l("span",{className:"btn-content",children:e}),s&&l("span",{className:"btn-icon-right",children:s})]});return b?l("a",{href:b,className:p,ref:u,...m,children:g}):l("button",{className:p,ref:u,...m,children:g})});M.displayName="Button";import*as n from"react";import{jsx as H}from"react/jsx-runtime";var a={colors:{primary:"#007bff",secondary:"#6c757d",danger:"#dc3545",success:"#28a745"},border:{color:"#dee2e6",size:"1px",radius:{none:"0",xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",full:"9999px"}}},v=n.createContext({theme:a}),U=({theme:e,children:r})=>{let t=n.useMemo(()=>e?{...a,...e,colors:{...a.colors,...e.colors},border:{...a.border,...e.border,radius:{...a.border.radius,...e.border?.radius}}}:a,[e]);return n.useLayoutEffect(()=>{let d=document.documentElement;Object.entries(t.colors).forEach(([s,c])=>{d.style.setProperty(`--berdsk-color-${s}`,c)}),d.style.setProperty("--berdsk-border-color",t.border.color),d.style.setProperty("--berdsk-border-size",t.border.size),Object.entries(t.border.radius).forEach(([s,c])=>{d.style.setProperty(`--berdsk-rounded-${s}`,c)});let i="berdsk-ui-theme-styles",o=document.getElementById(i);o||(o=document.createElement("style"),o.id=i,document.head.appendChild(o)),o.innerHTML=`
|
|
2
2
|
:root {
|
|
3
3
|
--berdsk-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
|
4
4
|
}
|
|
@@ -10,7 +10,7 @@ import*as y from"react";import{jsx as M}from"react/jsx-runtime";var g="https://c
|
|
|
10
10
|
font-weight: 500;
|
|
11
11
|
cursor: pointer;
|
|
12
12
|
transition: all 0.2s;
|
|
13
|
-
border:
|
|
13
|
+
border: var(--berdsk-border-size) solid transparent;
|
|
14
14
|
text-decoration: none;
|
|
15
15
|
gap: 0.5rem;
|
|
16
16
|
}
|
|
@@ -20,12 +20,12 @@ import*as y from"react";import{jsx as M}from"react/jsx-runtime";var g="https://c
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
/* Tamanhos */
|
|
23
|
-
.btn-xs { padding: 0
|
|
24
|
-
.btn-sm { padding: 0
|
|
25
|
-
.btn-md { padding: 0
|
|
26
|
-
.btn-lg { padding: 0
|
|
27
|
-
.btn-xl { padding:
|
|
28
|
-
.btn-2xl { padding:
|
|
23
|
+
.btn-xs { padding: 0 0.5rem; height: 1.5rem; font-size: 0.75rem; }
|
|
24
|
+
.btn-sm { padding: 0 0.75rem; height: 2rem; font-size: 0.875rem; }
|
|
25
|
+
.btn-md { padding: 0 1rem; height: 2.5rem; font-size: 1rem; }
|
|
26
|
+
.btn-lg { padding: 0 1.5rem; height: 3rem; font-size: 1.125rem; }
|
|
27
|
+
.btn-xl { padding: 0 2rem; height: 3.5rem; font-size: 1.25rem; }
|
|
28
|
+
.btn-2xl { padding: 0 2.5rem; height: 4rem; font-size: 1.5rem; }
|
|
29
29
|
|
|
30
30
|
/* Cores e Variantes - Solid */
|
|
31
31
|
.btn-solid.btn-primary { background-color: var(--berdsk-color-primary); color: white; }
|
|
@@ -36,6 +36,7 @@ import*as y from"react";import{jsx as M}from"react/jsx-runtime";var g="https://c
|
|
|
36
36
|
.btn-solid:hover { filter: brightness(0.9); }
|
|
37
37
|
|
|
38
38
|
/* Outlined */
|
|
39
|
+
.btn-outlined { border-width: var(--berdsk-border-size); }
|
|
39
40
|
.btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }
|
|
40
41
|
.btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }
|
|
41
42
|
.btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }
|
|
@@ -45,10 +46,19 @@ import*as y from"react";import{jsx as M}from"react/jsx-runtime";var g="https://c
|
|
|
45
46
|
|
|
46
47
|
/* Ghost */
|
|
47
48
|
.btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }
|
|
49
|
+
.btn-ghost.btn-secondary { color: var(--berdsk-color-secondary); background: transparent; }
|
|
50
|
+
.btn-ghost.btn-danger { color: var(--berdsk-color-danger); background: transparent; }
|
|
51
|
+
.btn-ghost.btn-success { color: var(--berdsk-color-success); background: transparent; }
|
|
52
|
+
|
|
48
53
|
.btn-ghost:hover { background: rgba(0,0,0,0.05); }
|
|
49
54
|
|
|
50
55
|
/* Link */
|
|
51
|
-
.btn-link { background: transparent; border: none; padding: 0;
|
|
56
|
+
.btn-link { background: transparent; border: none; padding: 0; height: auto; text-decoration: underline; }
|
|
57
|
+
.btn-link.btn-primary { color: var(--berdsk-color-primary); }
|
|
58
|
+
.btn-link.btn-secondary { color: var(--berdsk-color-secondary); }
|
|
59
|
+
.btn-link.btn-danger { color: var(--berdsk-color-danger); }
|
|
60
|
+
.btn-link.btn-success { color: var(--berdsk-color-success); }
|
|
61
|
+
|
|
52
62
|
.btn-link:hover { opacity: 0.8; }
|
|
53
63
|
|
|
54
64
|
/* Rounded */
|
|
@@ -61,8 +71,12 @@ import*as y from"react";import{jsx as M}from"react/jsx-runtime";var g="https://c
|
|
|
61
71
|
|
|
62
72
|
.btn-full-width { width: 100%; display: flex; }
|
|
63
73
|
|
|
64
|
-
.btn-icon-only { padding: 0
|
|
65
|
-
.btn-xs.btn-icon-only {
|
|
66
|
-
.btn-
|
|
67
|
-
|
|
74
|
+
.btn-icon-only { padding: 0; aspect-ratio: 1/1; width: auto; }
|
|
75
|
+
.btn-xs.btn-icon-only { width: 1.5rem; }
|
|
76
|
+
.btn-sm.btn-icon-only { width: 2rem; }
|
|
77
|
+
.btn-md.btn-icon-only { width: 2.5rem; }
|
|
78
|
+
.btn-lg.btn-icon-only { width: 3rem; }
|
|
79
|
+
.btn-xl.btn-icon-only { width: 3.5rem; }
|
|
80
|
+
.btn-2xl.btn-icon-only { width: 4rem; }
|
|
81
|
+
`},[t]),H(v.Provider,{value:{theme:t},children:r})},W=()=>n.useContext(v);export{M as Button,$ as Icon,U as ThemeProvider,a as defaultTheme,W as useTheme};
|
|
68
82
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Icon.tsx","../src/components/Button.tsx","../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\nconst CDN_URL = \"https://cdn.berdsk.com.br/berdsk-ui/icons/all.css\";\r\nconst PRECONNECT_URL = \"https://cdn.berdsk.com.br\";\r\n\r\nexport interface IconProps extends React.HTMLAttributes<HTMLElement> {\r\n className: string;\r\n}\r\n\r\nconst loadCDN = () => {\r\n if (typeof document === \"undefined\") return;\r\n\r\n // Preconnect para acelerar a conexão com o CDN\r\n if (\r\n !document.querySelector(`link[rel=\"preconnect\"][href=\"${PRECONNECT_URL}\"]`)\r\n ) {\r\n const preconnect = document.createElement(\"link\");\r\n preconnect.rel = \"preconnect\";\r\n preconnect.href = PRECONNECT_URL;\r\n document.head.appendChild(preconnect);\r\n }\r\n\r\n // Link do CSS\r\n const existingLink = document.querySelector(`link[href=\"${CDN_URL}\"]`);\r\n if (!existingLink) {\r\n const link = document.createElement(\"link\");\r\n link.rel = \"stylesheet\";\r\n link.href = CDN_URL;\r\n document.head.appendChild(link);\r\n }\r\n};\r\n\r\nexport const Icon: React.FC<IconProps> = ({ className, ...props }) => {\r\n React.useEffect(() => {\r\n loadCDN();\r\n }, []);\r\n\r\n return <i className={`${className}`} {...props} />;\r\n};\r\n","import * as React from \"react\";\r\nimport { Icon } from \"./Icon\";\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\r\n variant?: \"solid\" | \"outlined\" | \"ghost\" | \"link\";\r\n color?: \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\r\n rounded?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"full\";\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n fullWidth?: boolean;\r\n href?: string;\r\n}\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\r\n (\r\n {\r\n children,\r\n variant = \"solid\",\r\n color = \"primary\",\r\n size = \"md\",\r\n rounded = \"md\",\r\n leftIcon,\r\n rightIcon,\r\n fullWidth = false,\r\n className = \"\",\r\n href,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Estilos base e variantes (simulados via classes, assumindo que o projeto terá um CSS global ou o usuário fornecerá)\r\n // No entanto, para ser útil \"out of the box\", vamos construir uma string de classes bem estruturada.\r\n \r\n const baseClass = \"btn\";\r\n const variantClass = `btn-${variant}`;\r\n const colorClass = `btn-${color}`;\r\n const sizeClass = `btn-${size}`;\r\n const roundedClass = `btn-rounded-${rounded}`;\r\n const fullWidthClass = fullWidth ? \"btn-full-width\" : \"\";\r\n const iconOnlyClass = !children && (leftIcon || rightIcon) ? \"btn-icon-only\" : \"\";\r\n\r\n const combinedClasses = [\r\n baseClass,\r\n variantClass,\r\n colorClass,\r\n sizeClass,\r\n roundedClass,\r\n fullWidthClass,\r\n iconOnlyClass,\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(\" \");\r\n\r\n const content = (\r\n <>\r\n {leftIcon && <span className=\"btn-icon-left\">{leftIcon}</span>}\r\n {children && <span className=\"btn-content\">{children}</span>}\r\n {rightIcon && <span className=\"btn-icon-right\">{rightIcon}</span>}\r\n </>\r\n );\r\n\r\n if (href) {\r\n return (\r\n <a\r\n href={href}\r\n className={combinedClasses}\r\n ref={ref as React.ForwardedRef<HTMLAnchorElement>}\r\n {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\r\n >\r\n {content}\r\n </a>\r\n );\r\n }\r\n\r\n return (\r\n <button\r\n className={combinedClasses}\r\n ref={ref as React.ForwardedRef<HTMLButtonElement>}\r\n {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\r\n >\r\n {content}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface ThemeColors {\r\n primary: string;\r\n secondary: string;\r\n danger: string;\r\n success: string;\r\n}\r\n\r\nexport interface ThemeConfig {\r\n colors: ThemeColors;\r\n borderRadius: {\r\n none: string;\r\n xs: string;\r\n sm: string;\r\n md: string;\r\n lg: string;\r\n full: string;\r\n };\r\n}\r\n\r\nexport const defaultTheme: ThemeConfig = {\r\n colors: {\r\n primary: \"#007bff\",\r\n secondary: \"#6c757d\",\r\n danger: \"#dc3545\",\r\n success: \"#28a745\",\r\n },\r\n borderRadius: {\r\n none: \"0\",\r\n xs: \"0.125rem\",\r\n sm: \"0.25rem\",\r\n md: \"0.375rem\",\r\n lg: \"0.5rem\",\r\n full: \"9999px\",\r\n },\r\n};\r\n\r\ninterface ThemeContextType {\r\n theme: ThemeConfig;\r\n}\r\n\r\nconst ThemeContext = React.createContext<ThemeContextType>({\r\n theme: defaultTheme,\r\n});\r\n\r\nexport interface ThemeProviderProps {\r\n theme?: Partial<ThemeConfig>;\r\n children: React.ReactNode;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n theme,\r\n children,\r\n}) => {\r\n const mergedTheme = React.useMemo(() => {\r\n if (!theme) return defaultTheme;\r\n return {\r\n ...defaultTheme,\r\n ...theme,\r\n colors: { ...defaultTheme.colors, ...theme.colors },\r\n borderRadius: { ...defaultTheme.borderRadius, ...theme.borderRadius },\r\n };\r\n }, [theme]);\r\n\r\n React.useLayoutEffect(() => {\r\n const root = document.documentElement;\r\n \r\n // Injetar cores\r\n Object.entries(mergedTheme.colors).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-color-${key}`, value);\r\n });\r\n\r\n // Injetar arredondamentos\r\n Object.entries(mergedTheme.borderRadius).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-rounded-${key}`, value);\r\n });\r\n\r\n // Injetar estilos base para o botão funcionar \"out-of-the-box\"\r\n const styleId = \"berdsk-ui-theme-styles\";\r\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\r\n \r\n if (!styleElement) {\r\n styleElement = document.createElement(\"style\");\r\n styleElement.id = styleId;\r\n document.head.appendChild(styleElement);\r\n }\r\n\r\n styleElement.innerHTML = `\r\n :root {\r\n --berdsk-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\r\n }\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--berdsk-font-family);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border: 1px solid transparent;\r\n text-decoration: none;\r\n gap: 0.5rem;\r\n }\r\n .btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n }\r\n \r\n /* Tamanhos */\r\n .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }\r\n .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; }\r\n .btn-md { padding: 0.5rem 1rem; font-size: 1rem; }\r\n .btn-lg { padding: 0.75rem 1.5rem; font-size: 1.125rem; }\r\n .btn-xl { padding: 1rem 2rem; font-size: 1.25rem; }\r\n .btn-2xl { padding: 1.25rem 2.5rem; font-size: 1.5rem; }\r\n\r\n /* Cores e Variantes - Solid */\r\n .btn-solid.btn-primary { background-color: var(--berdsk-color-primary); color: white; }\r\n .btn-solid.btn-secondary { background-color: var(--berdsk-color-secondary); color: white; }\r\n .btn-solid.btn-danger { background-color: var(--berdsk-color-danger); color: white; }\r\n .btn-solid.btn-success { background-color: var(--berdsk-color-success); color: white; }\r\n \r\n .btn-solid:hover { filter: brightness(0.9); }\r\n\r\n /* Outlined */\r\n .btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }\r\n .btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }\r\n .btn-outlined.btn-success { border-color: var(--berdsk-color-success); color: var(--berdsk-color-success); background: transparent; }\r\n \r\n .btn-outlined:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Ghost */\r\n .btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-ghost:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Link */\r\n .btn-link { background: transparent; border: none; padding: 0; color: var(--berdsk-color-primary); text-decoration: underline; }\r\n .btn-link:hover { opacity: 0.8; }\r\n\r\n /* Rounded */\r\n .btn-rounded-none { border-radius: var(--berdsk-rounded-none); }\r\n .btn-rounded-xs { border-radius: var(--berdsk-rounded-xs); }\r\n .btn-rounded-sm { border-radius: var(--berdsk-rounded-sm); }\r\n .btn-rounded-md { border-radius: var(--berdsk-rounded-md); }\r\n .btn-rounded-lg { border-radius: var(--berdsk-rounded-lg); }\r\n .btn-rounded-full { border-radius: var(--berdsk-rounded-full); }\r\n\r\n .btn-full-width { width: 100%; display: flex; }\r\n \r\n .btn-icon-only { padding: 0.5rem; aspect-ratio: 1/1; }\r\n .btn-xs.btn-icon-only { padding: 0.25rem; }\r\n .btn-lg.btn-icon-only { padding: 0.75rem; }\r\n `;\r\n\r\n }, [mergedTheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ theme: mergedTheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport const useTheme = () => React.useContext(ThemeContext);\r\n"],"mappings":"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","names":["React","jsx","CDN_URL","PRECONNECT_URL","loadCDN","preconnect","link","Icon","className","props","React","Fragment","jsx","jsxs","Button","children","variant","color","size","rounded","leftIcon","rightIcon","fullWidth","className","href","props","ref","variantClass","colorClass","sizeClass","roundedClass","combinedClasses","content","React","jsx","defaultTheme","ThemeContext","ThemeProvider","theme","children","mergedTheme","root","key","value","styleId","styleElement","useTheme"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Icon.tsx","../src/components/Button.tsx","../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\nconst CDN_URL = \"https://cdn.berdsk.com.br/berdsk-ui/icons/all.css\";\r\nconst PRECONNECT_URL = \"https://cdn.berdsk.com.br\";\r\n\r\nexport interface IconProps extends React.HTMLAttributes<HTMLElement> {\r\n className: string;\r\n}\r\n\r\nconst loadCDN = () => {\r\n if (typeof document === \"undefined\") return;\r\n\r\n // Preconnect para acelerar a conexão com o CDN\r\n if (\r\n !document.querySelector(`link[rel=\"preconnect\"][href=\"${PRECONNECT_URL}\"]`)\r\n ) {\r\n const preconnect = document.createElement(\"link\");\r\n preconnect.rel = \"preconnect\";\r\n preconnect.href = PRECONNECT_URL;\r\n document.head.appendChild(preconnect);\r\n }\r\n\r\n // Link do CSS\r\n const existingLink = document.querySelector(`link[href=\"${CDN_URL}\"]`);\r\n if (!existingLink) {\r\n const link = document.createElement(\"link\");\r\n link.rel = \"stylesheet\";\r\n link.href = CDN_URL;\r\n document.head.appendChild(link);\r\n }\r\n};\r\n\r\nexport const Icon: React.FC<IconProps> = ({ className, ...props }) => {\r\n React.useEffect(() => {\r\n loadCDN();\r\n }, []);\r\n\r\n return <i className={`${className}`} {...props} />;\r\n};\r\n","import * as React from \"react\";\r\nimport { Icon } from \"./Icon\";\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\r\n variant?: \"solid\" | \"outlined\" | \"ghost\" | \"link\";\r\n color?: \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\r\n rounded?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"full\";\r\n leftIcon?: React.ReactNode;\r\n rightIcon?: React.ReactNode;\r\n fullWidth?: boolean;\r\n href?: string;\r\n}\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\r\n (\r\n {\r\n children,\r\n variant = \"solid\",\r\n color = \"primary\",\r\n size = \"md\",\r\n rounded = \"md\",\r\n leftIcon,\r\n rightIcon,\r\n fullWidth = false,\r\n className = \"\",\r\n href,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n // Estilos base e variantes (simulados via classes, assumindo que o projeto terá um CSS global ou o usuário fornecerá)\r\n // No entanto, para ser útil \"out of the box\", vamos construir uma string de classes bem estruturada.\r\n \r\n const baseClass = \"btn\";\r\n const variantClass = `btn-${variant}`;\r\n const colorClass = `btn-${color}`;\r\n const sizeClass = `btn-${size}`;\r\n const roundedClass = `btn-rounded-${rounded}`;\r\n const fullWidthClass = fullWidth ? \"btn-full-width\" : \"\";\r\n const iconOnlyClass = !children && (leftIcon || rightIcon) ? \"btn-icon-only\" : \"\";\r\n\r\n const combinedClasses = [\r\n baseClass,\r\n variantClass,\r\n colorClass,\r\n sizeClass,\r\n roundedClass,\r\n fullWidthClass,\r\n iconOnlyClass,\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(\" \");\r\n\r\n const content = (\r\n <>\r\n {leftIcon && <span className=\"btn-icon-left\">{leftIcon}</span>}\r\n {children && <span className=\"btn-content\">{children}</span>}\r\n {rightIcon && <span className=\"btn-icon-right\">{rightIcon}</span>}\r\n </>\r\n );\r\n\r\n if (href) {\r\n return (\r\n <a\r\n href={href}\r\n className={combinedClasses}\r\n ref={ref as React.ForwardedRef<HTMLAnchorElement>}\r\n {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\r\n >\r\n {content}\r\n </a>\r\n );\r\n }\r\n\r\n return (\r\n <button\r\n className={combinedClasses}\r\n ref={ref as React.ForwardedRef<HTMLButtonElement>}\r\n {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\r\n >\r\n {content}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface ThemeColors {\r\n primary: string;\r\n secondary: string;\r\n danger: string;\r\n success: string;\r\n}\r\n\r\nexport interface ThemeConfig {\r\n colors: ThemeColors;\r\n border: {\r\n color: string;\r\n size: string;\r\n radius: {\r\n none: string;\r\n xs: string;\r\n sm: string;\r\n md: string;\r\n lg: string;\r\n full: string;\r\n };\r\n };\r\n}\r\n\r\nexport const defaultTheme: ThemeConfig = {\r\n colors: {\r\n primary: \"#007bff\",\r\n secondary: \"#6c757d\",\r\n danger: \"#dc3545\",\r\n success: \"#28a745\",\r\n },\r\n border: {\r\n color: \"#dee2e6\",\r\n size: \"1px\",\r\n radius: {\r\n none: \"0\",\r\n xs: \"0.125rem\",\r\n sm: \"0.25rem\",\r\n md: \"0.375rem\",\r\n lg: \"0.5rem\",\r\n full: \"9999px\",\r\n },\r\n },\r\n};\r\n\r\ninterface ThemeContextType {\r\n theme: ThemeConfig;\r\n}\r\n\r\nconst ThemeContext = React.createContext<ThemeContextType>({\r\n theme: defaultTheme,\r\n});\r\n\r\nexport interface ThemeProviderProps {\r\n theme?: Partial<ThemeConfig>;\r\n children: React.ReactNode;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n theme,\r\n children,\r\n}) => {\r\n const mergedTheme = React.useMemo(() => {\r\n if (!theme) return defaultTheme;\r\n return {\r\n ...defaultTheme,\r\n ...theme,\r\n colors: { ...defaultTheme.colors, ...theme.colors },\r\n border: {\r\n ...defaultTheme.border,\r\n ...theme.border,\r\n radius: { ...defaultTheme.border.radius, ...theme.border?.radius },\r\n },\r\n };\r\n }, [theme]);\r\n\r\n React.useLayoutEffect(() => {\r\n const root = document.documentElement;\r\n \r\n // Injetar cores\r\n Object.entries(mergedTheme.colors).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-color-${key}`, value);\r\n });\r\n\r\n // Injetar borda\r\n root.style.setProperty(\"--berdsk-border-color\", mergedTheme.border.color);\r\n root.style.setProperty(\"--berdsk-border-size\", mergedTheme.border.size);\r\n\r\n // Injetar arredondamentos\r\n Object.entries(mergedTheme.border.radius).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-rounded-${key}`, value);\r\n });\r\n\r\n // Injetar estilos base para o botão funcionar \"out-of-the-box\"\r\n const styleId = \"berdsk-ui-theme-styles\";\r\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\r\n \r\n if (!styleElement) {\r\n styleElement = document.createElement(\"style\");\r\n styleElement.id = styleId;\r\n document.head.appendChild(styleElement);\r\n }\r\n\r\n styleElement.innerHTML = `\r\n :root {\r\n --berdsk-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\r\n }\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--berdsk-font-family);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border: var(--berdsk-border-size) solid transparent;\r\n text-decoration: none;\r\n gap: 0.5rem;\r\n }\r\n .btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n }\r\n \r\n /* Tamanhos */\r\n .btn-xs { padding: 0 0.5rem; height: 1.5rem; font-size: 0.75rem; }\r\n .btn-sm { padding: 0 0.75rem; height: 2rem; font-size: 0.875rem; }\r\n .btn-md { padding: 0 1rem; height: 2.5rem; font-size: 1rem; }\r\n .btn-lg { padding: 0 1.5rem; height: 3rem; font-size: 1.125rem; }\r\n .btn-xl { padding: 0 2rem; height: 3.5rem; font-size: 1.25rem; }\r\n .btn-2xl { padding: 0 2.5rem; height: 4rem; font-size: 1.5rem; }\r\n\r\n /* Cores e Variantes - Solid */\r\n .btn-solid.btn-primary { background-color: var(--berdsk-color-primary); color: white; }\r\n .btn-solid.btn-secondary { background-color: var(--berdsk-color-secondary); color: white; }\r\n .btn-solid.btn-danger { background-color: var(--berdsk-color-danger); color: white; }\r\n .btn-solid.btn-success { background-color: var(--berdsk-color-success); color: white; }\r\n \r\n .btn-solid:hover { filter: brightness(0.9); }\r\n\r\n /* Outlined */\r\n .btn-outlined { border-width: var(--berdsk-border-size); }\r\n .btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }\r\n .btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }\r\n .btn-outlined.btn-success { border-color: var(--berdsk-color-success); color: var(--berdsk-color-success); background: transparent; }\r\n \r\n .btn-outlined:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Ghost */\r\n .btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-ghost.btn-secondary { color: var(--berdsk-color-secondary); background: transparent; }\r\n .btn-ghost.btn-danger { color: var(--berdsk-color-danger); background: transparent; }\r\n .btn-ghost.btn-success { color: var(--berdsk-color-success); background: transparent; }\r\n \r\n .btn-ghost:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Link */\r\n .btn-link { background: transparent; border: none; padding: 0; height: auto; text-decoration: underline; }\r\n .btn-link.btn-primary { color: var(--berdsk-color-primary); }\r\n .btn-link.btn-secondary { color: var(--berdsk-color-secondary); }\r\n .btn-link.btn-danger { color: var(--berdsk-color-danger); }\r\n .btn-link.btn-success { color: var(--berdsk-color-success); }\r\n \r\n .btn-link:hover { opacity: 0.8; }\r\n\r\n /* Rounded */\r\n .btn-rounded-none { border-radius: var(--berdsk-rounded-none); }\r\n .btn-rounded-xs { border-radius: var(--berdsk-rounded-xs); }\r\n .btn-rounded-sm { border-radius: var(--berdsk-rounded-sm); }\r\n .btn-rounded-md { border-radius: var(--berdsk-rounded-md); }\r\n .btn-rounded-lg { border-radius: var(--berdsk-rounded-lg); }\r\n .btn-rounded-full { border-radius: var(--berdsk-rounded-full); }\r\n\r\n .btn-full-width { width: 100%; display: flex; }\r\n \r\n .btn-icon-only { padding: 0; aspect-ratio: 1/1; width: auto; }\r\n .btn-xs.btn-icon-only { width: 1.5rem; }\r\n .btn-sm.btn-icon-only { width: 2rem; }\r\n .btn-md.btn-icon-only { width: 2.5rem; }\r\n .btn-lg.btn-icon-only { width: 3rem; }\r\n .btn-xl.btn-icon-only { width: 3.5rem; }\r\n .btn-2xl.btn-icon-only { width: 4rem; }\r\n `;\r\n\r\n }, [mergedTheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ theme: mergedTheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport const useTheme = () => React.useContext(ThemeContext);\r\n"],"mappings":"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","names":["React","jsx","CDN_URL","PRECONNECT_URL","loadCDN","preconnect","link","Icon","className","props","React","Fragment","jsx","jsxs","Button","children","variant","color","size","rounded","leftIcon","rightIcon","fullWidth","className","href","props","ref","variantClass","colorClass","sizeClass","roundedClass","combinedClasses","content","React","jsx","defaultTheme","ThemeContext","ThemeProvider","theme","children","mergedTheme","root","key","value","styleId","styleElement","useTheme"]}
|