@berdsk/ui 0.2.8 → 0.2.9
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/README.md +0 -0
- package/dist/Button.d.cts +1 -1
- package/dist/Button.d.ts +1 -1
- package/dist/ThemeProvider.cjs +1 -1
- package/dist/ThemeProvider.js +1 -1
- package/dist/{chunk-TO52GBVF.js → chunk-CK44QQW5.js} +3 -3
- package/dist/{chunk-TO52GBVF.js.map → chunk-CK44QQW5.js.map} +1 -1
- package/dist/{chunk-O3TVZAQB.cjs → chunk-ENMFI5RT.cjs} +3 -3
- package/dist/{chunk-O3TVZAQB.cjs.map → chunk-ENMFI5RT.cjs.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/docs/Button.md +76 -0
- package/docs/Icon.md +44 -0
- package/docs/Section.md +92 -0
- package/docs/Theme.md +158 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
Binary file
|
package/dist/Button.d.cts
CHANGED
|
@@ -10,6 +10,6 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement | HTM
|
|
|
10
10
|
fullWidth?: boolean;
|
|
11
11
|
href?: string;
|
|
12
12
|
}
|
|
13
|
-
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<
|
|
13
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
14
14
|
|
|
15
15
|
export { Button, type ButtonProps };
|
package/dist/Button.d.ts
CHANGED
|
@@ -10,6 +10,6 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement | HTM
|
|
|
10
10
|
fullWidth?: boolean;
|
|
11
11
|
href?: string;
|
|
12
12
|
}
|
|
13
|
-
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<
|
|
13
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
14
14
|
|
|
15
15
|
export { Button, type ButtonProps };
|
package/dist/ThemeProvider.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var chunkENMFI5RT_cjs=require('./chunk-ENMFI5RT.cjs');require('./chunk-GNFE24S7.cjs');Object.defineProperty(exports,"ThemeProvider",{enumerable:true,get:function(){return chunkENMFI5RT_cjs.b}});Object.defineProperty(exports,"defaultTheme",{enumerable:true,get:function(){return chunkENMFI5RT_cjs.a}});Object.defineProperty(exports,"useTheme",{enumerable:true,get:function(){return chunkENMFI5RT_cjs.c}});//# sourceMappingURL=ThemeProvider.cjs.map
|
|
2
2
|
//# sourceMappingURL=ThemeProvider.cjs.map
|
package/dist/ThemeProvider.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{b as ThemeProvider,a as defaultTheme,c as useTheme}from'./chunk-
|
|
1
|
+
export{b as ThemeProvider,a as defaultTheme,c as useTheme}from'./chunk-CK44QQW5.js';import'./chunk-FW4363Y4.js';//# sourceMappingURL=ThemeProvider.js.map
|
|
2
2
|
//# sourceMappingURL=ThemeProvider.js.map
|
|
@@ -95,9 +95,9 @@ import*as n from'react';import {jsx}from'react/jsx-runtime';var o={colors:{prima
|
|
|
95
95
|
.lg\\:px-8 { padding-left: 2rem; padding-right: 2rem; }
|
|
96
96
|
}
|
|
97
97
|
`;let c="https://cdn.berdsk.com.br/berdsk-ui/icons/all.css",m="https://cdn.berdsk.com.br";if(!document.querySelector(`link[rel="preconnect"][href="${m}"]`)){let e=document.createElement("link");e.rel="preconnect",e.href=m,document.head.appendChild(e);}if(!document.querySelector(`link[href="${c}"]`)){let e=document.createElement("link");e.rel="stylesheet",e.href=c,document.head.appendChild(e);}let g="berdsk-ui-theme-styles",s=document.getElementById(g);s||(s=document.createElement("style"),s.id=g,document.head.appendChild(s)),s.innerHTML=`
|
|
98
|
-
|
|
98
|
+
html {
|
|
99
99
|
font-family: var(--berdsk-font-family);
|
|
100
100
|
font-weight: var(--berdsk-font-weight);
|
|
101
101
|
}
|
|
102
|
-
`;},[r]),jsx(p.Provider,{value:{theme:r},children:h})},f=()=>n.useContext(p);export{o as a,u as b,f as c};//# sourceMappingURL=chunk-
|
|
103
|
-
//# sourceMappingURL=chunk-
|
|
102
|
+
`;},[r]),jsx(p.Provider,{value:{theme:r},children:h})},f=()=>n.useContext(p);export{o as a,u as b,f as c};//# sourceMappingURL=chunk-CK44QQW5.js.map
|
|
103
|
+
//# sourceMappingURL=chunk-CK44QQW5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/theme/ThemeProvider.tsx"],"names":["defaultTheme","ThemeContext","ThemeProvider","theme","children","mergedTheme","root","key","value","sectionStyleId","sectionStyleElement","CDN_URL","PRECONNECT_URL","preconnect","link","styleId","styleElement","jsx","useTheme"],"mappings":"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","file":"chunk-TO52GBVF.js","sourcesContent":["'use client';\nimport * as React from 'react';\n\nexport interface ThemeColors {\n primary: string;\n secondary: string;\n danger: string;\n success: string;\n}\n\nexport interface ThemeConfig {\n colors: ThemeColors;\n typography: {\n fontFamily: string;\n fontWeight: string;\n };\n spacing: {\n gap: string;\n };\n border: {\n color: string;\n size: string;\n radius: {\n none: string;\n xs: string;\n sm: string;\n md: string;\n lg: string;\n full: string;\n };\n };\n}\n\nexport const defaultTheme: ThemeConfig = {\n colors: {\n primary: '#007bff',\n secondary: '#6c757d',\n danger: '#dc3545',\n success: '#28a745',\n },\n typography: {\n fontFamily:\n 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif',\n fontWeight: '400',\n },\n spacing: {\n gap: '0.5rem',\n },\n border: {\n color: '#dee2e6',\n size: '1px',\n radius: {\n none: '0',\n xs: '0.125rem',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n full: '9999px',\n },\n },\n};\n\ninterface ThemeContextType {\n theme: ThemeConfig;\n}\n\nconst ThemeContext = React.createContext<ThemeContextType>({\n theme: defaultTheme,\n});\n\nexport interface ThemeProviderProps {\n theme?: Partial<ThemeConfig>;\n children: React.ReactNode;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {\n const mergedTheme = React.useMemo(() => {\n if (!theme) return defaultTheme;\n return {\n ...defaultTheme,\n ...theme,\n colors: { ...defaultTheme.colors, ...theme.colors },\n typography: { ...defaultTheme.typography, ...theme.typography },\n spacing: { ...defaultTheme.spacing, ...theme.spacing },\n border: {\n ...defaultTheme.border,\n ...theme.border,\n radius: { ...defaultTheme.border.radius, ...theme.border?.radius },\n },\n };\n }, [theme]);\n\n React.useLayoutEffect(() => {\n const root = document.documentElement;\n\n // Injetar cores\n Object.entries(mergedTheme.colors).forEach(([key, value]) => {\n root.style.setProperty(`--berdsk-color-${key}`, value);\n });\n\n // Injetar tipografia\n root.style.setProperty('--berdsk-font-family', mergedTheme.typography.fontFamily);\n root.style.setProperty('--berdsk-font-weight', mergedTheme.typography.fontWeight);\n\n // Injetar espaçamento\n root.style.setProperty('--berdsk-spacing-gap', mergedTheme.spacing.gap);\n\n // Injetar borda\n root.style.setProperty('--berdsk-border-color', mergedTheme.border.color);\n root.style.setProperty('--berdsk-border-size', mergedTheme.border.size);\n\n // Injetar arredondamentos\n Object.entries(mergedTheme.border.radius).forEach(([key, value]) => {\n root.style.setProperty(`--berdsk-rounded-${key}`, value);\n });\n\n // Injetar estilos do Section e outros componentes (Tailwind Utilities)\n const sectionStyleId = 'berdsk-ui-section-styles';\n let sectionStyleElement = document.getElementById(sectionStyleId) as HTMLStyleElement;\n if (!sectionStyleElement) {\n sectionStyleElement = document.createElement('style');\n sectionStyleElement.id = sectionStyleId;\n document.head.appendChild(sectionStyleElement);\n }\n sectionStyleElement.innerHTML = `\n .absolute { position: absolute; }\n .relative { position: relative; }\n .left-0 { left: 0; }\n .top-0 { top: 0; }\n .bottom-0 { bottom: 0; }\n .z-50 { z-index: 50; }\n .w-full { width: 100%; }\n .w-6 { width: 1.5rem; }\n .w-8 { width: 2rem; }\n .w-10 { width: 2.5rem; }\n .w-12 { width: 3rem; }\n .w-14 { width: 3.5rem; }\n .w-16 { width: 4rem; }\n .h-6 { height: 1.5rem; }\n .h-8 { height: 2rem; }\n .h-10 { height: 2.5rem; }\n .h-12 { height: 3rem; }\n .h-14 { height: 3.5rem; }\n .h-16 { height: 4rem; }\n .min-h-screen { min-height: 100vh; }\n .flex { display: flex; }\n .inline-flex { display: inline-flex; }\n .flex-col { flex-direction: column; }\n .flex-1 { flex: 1 1 0%; }\n .items-center { align-items: center; }\n .justify-center { justify-content: center; }\n .pointer-events-none { pointer-events: none; }\n .mx-auto { margin-left: auto; margin-right: auto; }\n .px-0 { padding-left: 0; padding-right: 0; }\n .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }\n .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n .px-4 { padding-left: 1rem; padding-right: 1rem; }\n .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n .px-8 { padding-left: 2rem; padding-right: 2rem; }\n .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }\n .p-0 { padding: 0; }\n .max-w-7xl { max-width: 80rem; }\n .bottom-full { bottom: 100%; }\n .top-full { top: 100%; }\n .-translate-y-full { transform: translateY(-100%); }\n .translate-y-full { transform: translateY(100%); }\n .-top-full { top: -100%; }\n .-bottom-full { bottom: -100%; }\n .aspect-square { aspect-ratio: 1 / 1; }\n .cursor-pointer { cursor: pointer; }\n .cursor-not-allowed { cursor: not-allowed; }\n .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }\n .font-normal { font-weight: var(--berdsk-font-weight); }\n .font-medium { font-weight: 500; }\n .font-bold { font-weight: 700; }\n .text-center { text-align: center; }\n .text-xs { font-size: 0.75rem; line-height: 1rem; }\n .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n .text-base { font-size: 1rem; line-height: 1.5rem; }\n .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n .text-white { color: #fff; }\n .text-primary { color: var(--berdsk-color-primary); }\n .text-secondary { color: var(--berdsk-color-secondary); }\n .text-danger { color: var(--berdsk-color-danger); }\n .text-success { color: var(--berdsk-color-success); }\n .bg-primary { background-color: var(--berdsk-color-primary); }\n .bg-secondary { background-color: var(--berdsk-color-secondary); }\n .bg-danger { background-color: var(--berdsk-color-danger); }\n .bg-success { background-color: var(--berdsk-color-success); }\n .bg-transparent { background-color: transparent; }\n .bg-black\\\\/5 { background-color: rgba(0, 0, 0, 0.05); }\n .border { border-width: var(--berdsk-border-size); }\n .border-none { border-style: none; }\n .border-transparent { border-color: transparent; }\n .border-primary { border-color: var(--berdsk-color-primary); }\n .border-secondary { border-color: var(--berdsk-color-secondary); }\n .border-danger { border-color: var(--berdsk-color-danger); }\n .border-success { border-color: var(--berdsk-color-success); }\n .rounded-none { border-radius: var(--berdsk-rounded-none); }\n .rounded-xs { border-radius: var(--berdsk-rounded-xs); }\n .rounded-sm { border-radius: var(--berdsk-rounded-sm); }\n .rounded-md { border-radius: var(--berdsk-rounded-md); }\n .rounded-lg { border-radius: var(--berdsk-rounded-lg); }\n .rounded-full { border-radius: var(--berdsk-rounded-full); }\n .opacity-60 { opacity: 0.6; }\n .hover\\\\:opacity-80:hover { opacity: 0.8; }\n .hover\\\\:brightness-90:hover { filter: brightness(0.9); }\n .hover\\\\:bg-black\\\\/5:hover { background-color: rgba(0, 0, 0, 0.05); }\n .underline { text-decoration-line: underline; }\n .gap-gap { gap: var(--berdsk-spacing-gap); }\n \n @media (min-width: 640px) {\n .sm\\\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n }\n @media (min-width: 1024px) {\n .lg\\\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n }\n `;\n\n // Carregar ícones do CDN\n const CDN_URL = 'https://cdn.berdsk.com.br/berdsk-ui/icons/all.css';\n const PRECONNECT_URL = 'https://cdn.berdsk.com.br';\n\n if (!document.querySelector(`link[rel=\"preconnect\"][href=\"${PRECONNECT_URL}\"]`)) {\n const preconnect = document.createElement('link');\n preconnect.rel = 'preconnect';\n preconnect.href = PRECONNECT_URL;\n document.head.appendChild(preconnect);\n }\n\n if (!document.querySelector(`link[href=\"${CDN_URL}\"]`)) {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = CDN_URL;\n document.head.appendChild(link);\n }\n\n // Estilos base globais\n const styleId = 'berdsk-ui-theme-styles';\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\n\n if (!styleElement) {\n styleElement = document.createElement('style');\n styleElement.id = styleId;\n document.head.appendChild(styleElement);\n }\n\n styleElement.innerHTML = `\n * {\n font-family: var(--berdsk-font-family);\n font-weight: var(--berdsk-font-weight);\n }\n `;\n }, [mergedTheme]);\n\n return <ThemeContext.Provider value={{ theme: mergedTheme }}>{children}</ThemeContext.Provider>;\n};\n\nexport const useTheme = () => React.useContext(ThemeContext);\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/theme/ThemeProvider.tsx"],"names":["defaultTheme","ThemeContext","ThemeProvider","theme","children","mergedTheme","root","key","value","sectionStyleId","sectionStyleElement","CDN_URL","PRECONNECT_URL","preconnect","link","styleId","styleElement","jsx","useTheme"],"mappings":"4DAiCO,IAAMA,CAAAA,CAA4B,CACvC,MAAA,CAAQ,CACN,OAAA,CAAS,SAAA,CACT,SAAA,CAAW,SAAA,CACX,MAAA,CAAQ,SAAA,CACR,OAAA,CAAS,SACX,CAAA,CACA,UAAA,CAAY,CACV,UAAA,CACE,mIAAA,CACF,UAAA,CAAY,KACd,CAAA,CACA,OAAA,CAAS,CACP,GAAA,CAAK,QACP,CAAA,CACA,MAAA,CAAQ,CACN,KAAA,CAAO,SAAA,CACP,IAAA,CAAM,KAAA,CACN,MAAA,CAAQ,CACN,IAAA,CAAM,GAAA,CACN,EAAA,CAAI,UAAA,CACJ,EAAA,CAAI,SAAA,CACJ,EAAA,CAAI,UAAA,CACJ,EAAA,CAAI,QAAA,CACJ,IAAA,CAAM,QACR,CACF,CACF,CAAA,CAMMC,CAAAA,CAAqB,CAAA,CAAA,aAAA,CAAgC,CACzD,KAAA,CAAOD,CACT,CAAC,CAAA,CAOYE,EAA8C,CAAC,CAAE,KAAA,CAAAC,CAAAA,CAAO,QAAA,CAAAC,CAAS,CAAA,GAAM,CAClF,IAAMC,CAAAA,CAAoB,CAAA,CAAA,OAAA,CAAQ,IAC3BF,CAAAA,CACE,CACL,GAAGH,CAAAA,CACH,GAAGG,CAAAA,CACH,MAAA,CAAQ,CAAE,GAAGH,CAAAA,CAAa,MAAA,CAAQ,GAAGG,CAAAA,CAAM,MAAO,CAAA,CAClD,UAAA,CAAY,CAAE,GAAGH,CAAAA,CAAa,UAAA,CAAY,GAAGG,CAAAA,CAAM,UAAW,CAAA,CAC9D,OAAA,CAAS,CAAE,GAAGH,CAAAA,CAAa,OAAA,CAAS,GAAGG,CAAAA,CAAM,OAAQ,CAAA,CACrD,MAAA,CAAQ,CACN,GAAGH,CAAAA,CAAa,MAAA,CAChB,GAAGG,CAAAA,CAAM,MAAA,CACT,MAAA,CAAQ,CAAE,GAAGH,CAAAA,CAAa,MAAA,CAAO,MAAA,CAAQ,GAAGG,CAAAA,CAAM,MAAA,EAAQ,MAAO,CACnE,CACF,CAAA,CAZmBH,CAAAA,CAalB,CAACG,CAAK,CAAC,CAAA,CAEV,OAAM,CAAA,CAAA,eAAA,CAAgB,IAAM,CAC1B,IAAMG,CAAAA,CAAO,QAAA,CAAS,eAAA,CAGtB,MAAA,CAAO,OAAA,CAAQD,CAAAA,CAAY,MAAM,CAAA,CAAE,OAAA,CAAQ,CAAC,CAACE,CAAAA,CAAKC,CAAK,CAAA,GAAM,CAC3DF,CAAAA,CAAK,KAAA,CAAM,WAAA,CAAY,CAAA,eAAA,EAAkBC,CAAG,CAAA,CAAA,CAAIC,CAAK,EACvD,CAAC,CAAA,CAGDF,CAAAA,CAAK,KAAA,CAAM,WAAA,CAAY,sBAAA,CAAwBD,CAAAA,CAAY,UAAA,CAAW,UAAU,CAAA,CAChFC,CAAAA,CAAK,KAAA,CAAM,WAAA,CAAY,sBAAA,CAAwBD,CAAAA,CAAY,UAAA,CAAW,UAAU,CAAA,CAGhFC,CAAAA,CAAK,KAAA,CAAM,WAAA,CAAY,sBAAA,CAAwBD,CAAAA,CAAY,OAAA,CAAQ,GAAG,CAAA,CAGtEC,CAAAA,CAAK,KAAA,CAAM,WAAA,CAAY,uBAAA,CAAyBD,CAAAA,CAAY,MAAA,CAAO,KAAK,CAAA,CACxEC,CAAAA,CAAK,KAAA,CAAM,WAAA,CAAY,sBAAA,CAAwBD,CAAAA,CAAY,MAAA,CAAO,IAAI,CAAA,CAGtE,MAAA,CAAO,OAAA,CAAQA,CAAAA,CAAY,MAAA,CAAO,MAAM,CAAA,CAAE,OAAA,CAAQ,CAAC,CAACE,CAAAA,CAAKC,CAAK,CAAA,GAAM,CAClEF,CAAAA,CAAK,KAAA,CAAM,WAAA,CAAY,CAAA,iBAAA,EAAoBC,CAAG,CAAA,CAAA,CAAIC,CAAK,EACzD,CAAC,CAAA,CAGD,IAAMC,CAAAA,CAAiB,0BAAA,CACnBC,CAAAA,CAAsB,QAAA,CAAS,cAAA,CAAeD,CAAc,CAAA,CAC3DC,CAAAA,GACHA,CAAAA,CAAsB,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA,CACpDA,CAAAA,CAAoB,EAAA,CAAKD,CAAAA,CACzB,QAAA,CAAS,IAAA,CAAK,WAAA,CAAYC,CAAmB,CAAA,CAAA,CAE/CA,CAAAA,CAAoB,SAAA,CAAY;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;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,IAAA,CAAA,CAkGhC,IAAMC,CAAAA,CAAU,mDAAA,CACVC,CAAAA,CAAiB,2BAAA,CAEvB,GAAI,CAAC,QAAA,CAAS,aAAA,CAAc,CAAA,6BAAA,EAAgCA,CAAc,CAAA,EAAA,CAAI,CAAA,CAAG,CAC/E,IAAMC,CAAAA,CAAa,SAAS,aAAA,CAAc,MAAM,CAAA,CAChDA,CAAAA,CAAW,IAAM,YAAA,CACjBA,CAAAA,CAAW,KAAOD,CAAAA,CAClB,QAAA,CAAS,KAAK,WAAA,CAAYC,CAAU,EACtC,CAEA,GAAI,CAAC,QAAA,CAAS,cAAc,CAAA,WAAA,EAAcF,CAAO,IAAI,CAAA,CAAG,CACtD,IAAMG,CAAAA,CAAO,SAAS,aAAA,CAAc,MAAM,CAAA,CAC1CA,CAAAA,CAAK,IAAM,YAAA,CACXA,CAAAA,CAAK,IAAA,CAAOH,CAAAA,CACZ,SAAS,IAAA,CAAK,WAAA,CAAYG,CAAI,EAChC,CAGA,IAAMC,CAAAA,CAAU,wBAAA,CACZC,CAAAA,CAAe,QAAA,CAAS,eAAeD,CAAO,CAAA,CAE7CC,IACHA,CAAAA,CAAe,QAAA,CAAS,cAAc,OAAO,CAAA,CAC7CA,CAAAA,CAAa,EAAA,CAAKD,EAClB,QAAA,CAAS,IAAA,CAAK,YAAYC,CAAY,CAAA,CAAA,CAGxCA,EAAa,SAAA,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,EAM3B,CAAA,CAAG,CAACX,CAAW,CAAC,EAETY,GAAAA,CAAChB,CAAAA,CAAa,SAAb,CAAsB,KAAA,CAAO,CAAE,KAAA,CAAOI,CAAY,EAAI,QAAA,CAAAD,CAAAA,CAAS,CACzE,CAAA,CAEac,CAAAA,CAAW,IAAY,CAAA,CAAA,UAAA,CAAWjB,CAAY","file":"chunk-CK44QQW5.js","sourcesContent":["'use client';\nimport * as React from 'react';\n\nexport interface ThemeColors {\n primary: string;\n secondary: string;\n danger: string;\n success: string;\n}\n\nexport interface ThemeConfig {\n colors: ThemeColors;\n typography: {\n fontFamily: string;\n fontWeight: string;\n };\n spacing: {\n gap: string;\n };\n border: {\n color: string;\n size: string;\n radius: {\n none: string;\n xs: string;\n sm: string;\n md: string;\n lg: string;\n full: string;\n };\n };\n}\n\nexport const defaultTheme: ThemeConfig = {\n colors: {\n primary: '#007bff',\n secondary: '#6c757d',\n danger: '#dc3545',\n success: '#28a745',\n },\n typography: {\n fontFamily:\n 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif',\n fontWeight: '400',\n },\n spacing: {\n gap: '0.5rem',\n },\n border: {\n color: '#dee2e6',\n size: '1px',\n radius: {\n none: '0',\n xs: '0.125rem',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n full: '9999px',\n },\n },\n};\n\ninterface ThemeContextType {\n theme: ThemeConfig;\n}\n\nconst ThemeContext = React.createContext<ThemeContextType>({\n theme: defaultTheme,\n});\n\nexport interface ThemeProviderProps {\n theme?: Partial<ThemeConfig>;\n children: React.ReactNode;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {\n const mergedTheme = React.useMemo(() => {\n if (!theme) return defaultTheme;\n return {\n ...defaultTheme,\n ...theme,\n colors: { ...defaultTheme.colors, ...theme.colors },\n typography: { ...defaultTheme.typography, ...theme.typography },\n spacing: { ...defaultTheme.spacing, ...theme.spacing },\n border: {\n ...defaultTheme.border,\n ...theme.border,\n radius: { ...defaultTheme.border.radius, ...theme.border?.radius },\n },\n };\n }, [theme]);\n\n React.useLayoutEffect(() => {\n const root = document.documentElement;\n\n // Injetar cores\n Object.entries(mergedTheme.colors).forEach(([key, value]) => {\n root.style.setProperty(`--berdsk-color-${key}`, value);\n });\n\n // Injetar tipografia\n root.style.setProperty('--berdsk-font-family', mergedTheme.typography.fontFamily);\n root.style.setProperty('--berdsk-font-weight', mergedTheme.typography.fontWeight);\n\n // Injetar espaçamento\n root.style.setProperty('--berdsk-spacing-gap', mergedTheme.spacing.gap);\n\n // Injetar borda\n root.style.setProperty('--berdsk-border-color', mergedTheme.border.color);\n root.style.setProperty('--berdsk-border-size', mergedTheme.border.size);\n\n // Injetar arredondamentos\n Object.entries(mergedTheme.border.radius).forEach(([key, value]) => {\n root.style.setProperty(`--berdsk-rounded-${key}`, value);\n });\n\n // Injetar estilos do Section e outros componentes (Tailwind Utilities)\n const sectionStyleId = 'berdsk-ui-section-styles';\n let sectionStyleElement = document.getElementById(sectionStyleId) as HTMLStyleElement;\n if (!sectionStyleElement) {\n sectionStyleElement = document.createElement('style');\n sectionStyleElement.id = sectionStyleId;\n document.head.appendChild(sectionStyleElement);\n }\n sectionStyleElement.innerHTML = `\n .absolute { position: absolute; }\n .relative { position: relative; }\n .left-0 { left: 0; }\n .top-0 { top: 0; }\n .bottom-0 { bottom: 0; }\n .z-50 { z-index: 50; }\n .w-full { width: 100%; }\n .w-6 { width: 1.5rem; }\n .w-8 { width: 2rem; }\n .w-10 { width: 2.5rem; }\n .w-12 { width: 3rem; }\n .w-14 { width: 3.5rem; }\n .w-16 { width: 4rem; }\n .h-6 { height: 1.5rem; }\n .h-8 { height: 2rem; }\n .h-10 { height: 2.5rem; }\n .h-12 { height: 3rem; }\n .h-14 { height: 3.5rem; }\n .h-16 { height: 4rem; }\n .min-h-screen { min-height: 100vh; }\n .flex { display: flex; }\n .inline-flex { display: inline-flex; }\n .flex-col { flex-direction: column; }\n .flex-1 { flex: 1 1 0%; }\n .items-center { align-items: center; }\n .justify-center { justify-content: center; }\n .pointer-events-none { pointer-events: none; }\n .mx-auto { margin-left: auto; margin-right: auto; }\n .px-0 { padding-left: 0; padding-right: 0; }\n .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }\n .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n .px-4 { padding-left: 1rem; padding-right: 1rem; }\n .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n .px-8 { padding-left: 2rem; padding-right: 2rem; }\n .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }\n .p-0 { padding: 0; }\n .max-w-7xl { max-width: 80rem; }\n .bottom-full { bottom: 100%; }\n .top-full { top: 100%; }\n .-translate-y-full { transform: translateY(-100%); }\n .translate-y-full { transform: translateY(100%); }\n .-top-full { top: -100%; }\n .-bottom-full { bottom: -100%; }\n .aspect-square { aspect-ratio: 1 / 1; }\n .cursor-pointer { cursor: pointer; }\n .cursor-not-allowed { cursor: not-allowed; }\n .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }\n .font-normal { font-weight: var(--berdsk-font-weight); }\n .font-medium { font-weight: 500; }\n .font-bold { font-weight: 700; }\n .text-center { text-align: center; }\n .text-xs { font-size: 0.75rem; line-height: 1rem; }\n .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n .text-base { font-size: 1rem; line-height: 1.5rem; }\n .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n .text-white { color: #fff; }\n .text-primary { color: var(--berdsk-color-primary); }\n .text-secondary { color: var(--berdsk-color-secondary); }\n .text-danger { color: var(--berdsk-color-danger); }\n .text-success { color: var(--berdsk-color-success); }\n .bg-primary { background-color: var(--berdsk-color-primary); }\n .bg-secondary { background-color: var(--berdsk-color-secondary); }\n .bg-danger { background-color: var(--berdsk-color-danger); }\n .bg-success { background-color: var(--berdsk-color-success); }\n .bg-transparent { background-color: transparent; }\n .bg-black\\\\/5 { background-color: rgba(0, 0, 0, 0.05); }\n .border { border-width: var(--berdsk-border-size); }\n .border-none { border-style: none; }\n .border-transparent { border-color: transparent; }\n .border-primary { border-color: var(--berdsk-color-primary); }\n .border-secondary { border-color: var(--berdsk-color-secondary); }\n .border-danger { border-color: var(--berdsk-color-danger); }\n .border-success { border-color: var(--berdsk-color-success); }\n .rounded-none { border-radius: var(--berdsk-rounded-none); }\n .rounded-xs { border-radius: var(--berdsk-rounded-xs); }\n .rounded-sm { border-radius: var(--berdsk-rounded-sm); }\n .rounded-md { border-radius: var(--berdsk-rounded-md); }\n .rounded-lg { border-radius: var(--berdsk-rounded-lg); }\n .rounded-full { border-radius: var(--berdsk-rounded-full); }\n .opacity-60 { opacity: 0.6; }\n .hover\\\\:opacity-80:hover { opacity: 0.8; }\n .hover\\\\:brightness-90:hover { filter: brightness(0.9); }\n .hover\\\\:bg-black\\\\/5:hover { background-color: rgba(0, 0, 0, 0.05); }\n .underline { text-decoration-line: underline; }\n .gap-gap { gap: var(--berdsk-spacing-gap); }\n \n @media (min-width: 640px) {\n .sm\\\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n }\n @media (min-width: 1024px) {\n .lg\\\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n }\n `;\n\n // Carregar ícones do CDN\n const CDN_URL = 'https://cdn.berdsk.com.br/berdsk-ui/icons/all.css';\n const PRECONNECT_URL = 'https://cdn.berdsk.com.br';\n\n if (!document.querySelector(`link[rel=\"preconnect\"][href=\"${PRECONNECT_URL}\"]`)) {\n const preconnect = document.createElement('link');\n preconnect.rel = 'preconnect';\n preconnect.href = PRECONNECT_URL;\n document.head.appendChild(preconnect);\n }\n\n if (!document.querySelector(`link[href=\"${CDN_URL}\"]`)) {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = CDN_URL;\n document.head.appendChild(link);\n }\n\n // Estilos base globais\n const styleId = 'berdsk-ui-theme-styles';\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\n\n if (!styleElement) {\n styleElement = document.createElement('style');\n styleElement.id = styleId;\n document.head.appendChild(styleElement);\n }\n\n styleElement.innerHTML = `\n html {\n font-family: var(--berdsk-font-family);\n font-weight: var(--berdsk-font-weight);\n }\n `;\n }, [mergedTheme]);\n\n return <ThemeContext.Provider value={{ theme: mergedTheme }}>{children}</ThemeContext.Provider>;\n};\n\nexport const useTheme = () => React.useContext(ThemeContext);\n"]}
|
|
@@ -95,9 +95,9 @@
|
|
|
95
95
|
.lg\\:px-8 { padding-left: 2rem; padding-right: 2rem; }
|
|
96
96
|
}
|
|
97
97
|
`;let c="https://cdn.berdsk.com.br/berdsk-ui/icons/all.css",m="https://cdn.berdsk.com.br";if(!document.querySelector(`link[rel="preconnect"][href="${m}"]`)){let e=document.createElement("link");e.rel="preconnect",e.href=m,document.head.appendChild(e);}if(!document.querySelector(`link[href="${c}"]`)){let e=document.createElement("link");e.rel="stylesheet",e.href=c,document.head.appendChild(e);}let g="berdsk-ui-theme-styles",s=document.getElementById(g);s||(s=document.createElement("style"),s.id=g,document.head.appendChild(s)),s.innerHTML=`
|
|
98
|
-
|
|
98
|
+
html {
|
|
99
99
|
font-family: var(--berdsk-font-family);
|
|
100
100
|
font-weight: var(--berdsk-font-weight);
|
|
101
101
|
}
|
|
102
|
-
`;},[r]),jsxRuntime.jsx(p.Provider,{value:{theme:r},children:h})},f=()=>n__namespace.useContext(p);exports.a=o;exports.b=u;exports.c=f;//# sourceMappingURL=chunk-
|
|
103
|
-
//# sourceMappingURL=chunk-
|
|
102
|
+
`;},[r]),jsxRuntime.jsx(p.Provider,{value:{theme:r},children:h})},f=()=>n__namespace.useContext(p);exports.a=o;exports.b=u;exports.c=f;//# sourceMappingURL=chunk-ENMFI5RT.cjs.map
|
|
103
|
+
//# sourceMappingURL=chunk-ENMFI5RT.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/theme/ThemeProvider.tsx"],"names":["defaultTheme","ThemeContext","n","ThemeProvider","theme","children","mergedTheme","root","key","value","sectionStyleId","sectionStyleElement","CDN_URL","PRECONNECT_URL","preconnect","link","styleId","styleElement","jsx","useTheme"],"mappings":"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","file":"chunk-O3TVZAQB.cjs","sourcesContent":["'use client';\nimport * as React from 'react';\n\nexport interface ThemeColors {\n primary: string;\n secondary: string;\n danger: string;\n success: string;\n}\n\nexport interface ThemeConfig {\n colors: ThemeColors;\n typography: {\n fontFamily: string;\n fontWeight: string;\n };\n spacing: {\n gap: string;\n };\n border: {\n color: string;\n size: string;\n radius: {\n none: string;\n xs: string;\n sm: string;\n md: string;\n lg: string;\n full: string;\n };\n };\n}\n\nexport const defaultTheme: ThemeConfig = {\n colors: {\n primary: '#007bff',\n secondary: '#6c757d',\n danger: '#dc3545',\n success: '#28a745',\n },\n typography: {\n fontFamily:\n 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif',\n fontWeight: '400',\n },\n spacing: {\n gap: '0.5rem',\n },\n border: {\n color: '#dee2e6',\n size: '1px',\n radius: {\n none: '0',\n xs: '0.125rem',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n full: '9999px',\n },\n },\n};\n\ninterface ThemeContextType {\n theme: ThemeConfig;\n}\n\nconst ThemeContext = React.createContext<ThemeContextType>({\n theme: defaultTheme,\n});\n\nexport interface ThemeProviderProps {\n theme?: Partial<ThemeConfig>;\n children: React.ReactNode;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {\n const mergedTheme = React.useMemo(() => {\n if (!theme) return defaultTheme;\n return {\n ...defaultTheme,\n ...theme,\n colors: { ...defaultTheme.colors, ...theme.colors },\n typography: { ...defaultTheme.typography, ...theme.typography },\n spacing: { ...defaultTheme.spacing, ...theme.spacing },\n border: {\n ...defaultTheme.border,\n ...theme.border,\n radius: { ...defaultTheme.border.radius, ...theme.border?.radius },\n },\n };\n }, [theme]);\n\n React.useLayoutEffect(() => {\n const root = document.documentElement;\n\n // Injetar cores\n Object.entries(mergedTheme.colors).forEach(([key, value]) => {\n root.style.setProperty(`--berdsk-color-${key}`, value);\n });\n\n // Injetar tipografia\n root.style.setProperty('--berdsk-font-family', mergedTheme.typography.fontFamily);\n root.style.setProperty('--berdsk-font-weight', mergedTheme.typography.fontWeight);\n\n // Injetar espaçamento\n root.style.setProperty('--berdsk-spacing-gap', mergedTheme.spacing.gap);\n\n // Injetar borda\n root.style.setProperty('--berdsk-border-color', mergedTheme.border.color);\n root.style.setProperty('--berdsk-border-size', mergedTheme.border.size);\n\n // Injetar arredondamentos\n Object.entries(mergedTheme.border.radius).forEach(([key, value]) => {\n root.style.setProperty(`--berdsk-rounded-${key}`, value);\n });\n\n // Injetar estilos do Section e outros componentes (Tailwind Utilities)\n const sectionStyleId = 'berdsk-ui-section-styles';\n let sectionStyleElement = document.getElementById(sectionStyleId) as HTMLStyleElement;\n if (!sectionStyleElement) {\n sectionStyleElement = document.createElement('style');\n sectionStyleElement.id = sectionStyleId;\n document.head.appendChild(sectionStyleElement);\n }\n sectionStyleElement.innerHTML = `\n .absolute { position: absolute; }\n .relative { position: relative; }\n .left-0 { left: 0; }\n .top-0 { top: 0; }\n .bottom-0 { bottom: 0; }\n .z-50 { z-index: 50; }\n .w-full { width: 100%; }\n .w-6 { width: 1.5rem; }\n .w-8 { width: 2rem; }\n .w-10 { width: 2.5rem; }\n .w-12 { width: 3rem; }\n .w-14 { width: 3.5rem; }\n .w-16 { width: 4rem; }\n .h-6 { height: 1.5rem; }\n .h-8 { height: 2rem; }\n .h-10 { height: 2.5rem; }\n .h-12 { height: 3rem; }\n .h-14 { height: 3.5rem; }\n .h-16 { height: 4rem; }\n .min-h-screen { min-height: 100vh; }\n .flex { display: flex; }\n .inline-flex { display: inline-flex; }\n .flex-col { flex-direction: column; }\n .flex-1 { flex: 1 1 0%; }\n .items-center { align-items: center; }\n .justify-center { justify-content: center; }\n .pointer-events-none { pointer-events: none; }\n .mx-auto { margin-left: auto; margin-right: auto; }\n .px-0 { padding-left: 0; padding-right: 0; }\n .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }\n .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n .px-4 { padding-left: 1rem; padding-right: 1rem; }\n .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n .px-8 { padding-left: 2rem; padding-right: 2rem; }\n .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }\n .p-0 { padding: 0; }\n .max-w-7xl { max-width: 80rem; }\n .bottom-full { bottom: 100%; }\n .top-full { top: 100%; }\n .-translate-y-full { transform: translateY(-100%); }\n .translate-y-full { transform: translateY(100%); }\n .-top-full { top: -100%; }\n .-bottom-full { bottom: -100%; }\n .aspect-square { aspect-ratio: 1 / 1; }\n .cursor-pointer { cursor: pointer; }\n .cursor-not-allowed { cursor: not-allowed; }\n .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }\n .font-normal { font-weight: var(--berdsk-font-weight); }\n .font-medium { font-weight: 500; }\n .font-bold { font-weight: 700; }\n .text-center { text-align: center; }\n .text-xs { font-size: 0.75rem; line-height: 1rem; }\n .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n .text-base { font-size: 1rem; line-height: 1.5rem; }\n .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n .text-white { color: #fff; }\n .text-primary { color: var(--berdsk-color-primary); }\n .text-secondary { color: var(--berdsk-color-secondary); }\n .text-danger { color: var(--berdsk-color-danger); }\n .text-success { color: var(--berdsk-color-success); }\n .bg-primary { background-color: var(--berdsk-color-primary); }\n .bg-secondary { background-color: var(--berdsk-color-secondary); }\n .bg-danger { background-color: var(--berdsk-color-danger); }\n .bg-success { background-color: var(--berdsk-color-success); }\n .bg-transparent { background-color: transparent; }\n .bg-black\\\\/5 { background-color: rgba(0, 0, 0, 0.05); }\n .border { border-width: var(--berdsk-border-size); }\n .border-none { border-style: none; }\n .border-transparent { border-color: transparent; }\n .border-primary { border-color: var(--berdsk-color-primary); }\n .border-secondary { border-color: var(--berdsk-color-secondary); }\n .border-danger { border-color: var(--berdsk-color-danger); }\n .border-success { border-color: var(--berdsk-color-success); }\n .rounded-none { border-radius: var(--berdsk-rounded-none); }\n .rounded-xs { border-radius: var(--berdsk-rounded-xs); }\n .rounded-sm { border-radius: var(--berdsk-rounded-sm); }\n .rounded-md { border-radius: var(--berdsk-rounded-md); }\n .rounded-lg { border-radius: var(--berdsk-rounded-lg); }\n .rounded-full { border-radius: var(--berdsk-rounded-full); }\n .opacity-60 { opacity: 0.6; }\n .hover\\\\:opacity-80:hover { opacity: 0.8; }\n .hover\\\\:brightness-90:hover { filter: brightness(0.9); }\n .hover\\\\:bg-black\\\\/5:hover { background-color: rgba(0, 0, 0, 0.05); }\n .underline { text-decoration-line: underline; }\n .gap-gap { gap: var(--berdsk-spacing-gap); }\n \n @media (min-width: 640px) {\n .sm\\\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n }\n @media (min-width: 1024px) {\n .lg\\\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n }\n `;\n\n // Carregar ícones do CDN\n const CDN_URL = 'https://cdn.berdsk.com.br/berdsk-ui/icons/all.css';\n const PRECONNECT_URL = 'https://cdn.berdsk.com.br';\n\n if (!document.querySelector(`link[rel=\"preconnect\"][href=\"${PRECONNECT_URL}\"]`)) {\n const preconnect = document.createElement('link');\n preconnect.rel = 'preconnect';\n preconnect.href = PRECONNECT_URL;\n document.head.appendChild(preconnect);\n }\n\n if (!document.querySelector(`link[href=\"${CDN_URL}\"]`)) {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = CDN_URL;\n document.head.appendChild(link);\n }\n\n // Estilos base globais\n const styleId = 'berdsk-ui-theme-styles';\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\n\n if (!styleElement) {\n styleElement = document.createElement('style');\n styleElement.id = styleId;\n document.head.appendChild(styleElement);\n }\n\n styleElement.innerHTML = `\n * {\n font-family: var(--berdsk-font-family);\n font-weight: var(--berdsk-font-weight);\n }\n `;\n }, [mergedTheme]);\n\n return <ThemeContext.Provider value={{ theme: mergedTheme }}>{children}</ThemeContext.Provider>;\n};\n\nexport const useTheme = () => React.useContext(ThemeContext);\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/theme/ThemeProvider.tsx"],"names":["defaultTheme","ThemeContext","n","ThemeProvider","theme","children","mergedTheme","root","key","value","sectionStyleId","sectionStyleElement","CDN_URL","PRECONNECT_URL","preconnect","link","styleId","styleElement","jsx","useTheme"],"mappings":"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","file":"chunk-ENMFI5RT.cjs","sourcesContent":["'use client';\nimport * as React from 'react';\n\nexport interface ThemeColors {\n primary: string;\n secondary: string;\n danger: string;\n success: string;\n}\n\nexport interface ThemeConfig {\n colors: ThemeColors;\n typography: {\n fontFamily: string;\n fontWeight: string;\n };\n spacing: {\n gap: string;\n };\n border: {\n color: string;\n size: string;\n radius: {\n none: string;\n xs: string;\n sm: string;\n md: string;\n lg: string;\n full: string;\n };\n };\n}\n\nexport const defaultTheme: ThemeConfig = {\n colors: {\n primary: '#007bff',\n secondary: '#6c757d',\n danger: '#dc3545',\n success: '#28a745',\n },\n typography: {\n fontFamily:\n 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif',\n fontWeight: '400',\n },\n spacing: {\n gap: '0.5rem',\n },\n border: {\n color: '#dee2e6',\n size: '1px',\n radius: {\n none: '0',\n xs: '0.125rem',\n sm: '0.25rem',\n md: '0.375rem',\n lg: '0.5rem',\n full: '9999px',\n },\n },\n};\n\ninterface ThemeContextType {\n theme: ThemeConfig;\n}\n\nconst ThemeContext = React.createContext<ThemeContextType>({\n theme: defaultTheme,\n});\n\nexport interface ThemeProviderProps {\n theme?: Partial<ThemeConfig>;\n children: React.ReactNode;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {\n const mergedTheme = React.useMemo(() => {\n if (!theme) return defaultTheme;\n return {\n ...defaultTheme,\n ...theme,\n colors: { ...defaultTheme.colors, ...theme.colors },\n typography: { ...defaultTheme.typography, ...theme.typography },\n spacing: { ...defaultTheme.spacing, ...theme.spacing },\n border: {\n ...defaultTheme.border,\n ...theme.border,\n radius: { ...defaultTheme.border.radius, ...theme.border?.radius },\n },\n };\n }, [theme]);\n\n React.useLayoutEffect(() => {\n const root = document.documentElement;\n\n // Injetar cores\n Object.entries(mergedTheme.colors).forEach(([key, value]) => {\n root.style.setProperty(`--berdsk-color-${key}`, value);\n });\n\n // Injetar tipografia\n root.style.setProperty('--berdsk-font-family', mergedTheme.typography.fontFamily);\n root.style.setProperty('--berdsk-font-weight', mergedTheme.typography.fontWeight);\n\n // Injetar espaçamento\n root.style.setProperty('--berdsk-spacing-gap', mergedTheme.spacing.gap);\n\n // Injetar borda\n root.style.setProperty('--berdsk-border-color', mergedTheme.border.color);\n root.style.setProperty('--berdsk-border-size', mergedTheme.border.size);\n\n // Injetar arredondamentos\n Object.entries(mergedTheme.border.radius).forEach(([key, value]) => {\n root.style.setProperty(`--berdsk-rounded-${key}`, value);\n });\n\n // Injetar estilos do Section e outros componentes (Tailwind Utilities)\n const sectionStyleId = 'berdsk-ui-section-styles';\n let sectionStyleElement = document.getElementById(sectionStyleId) as HTMLStyleElement;\n if (!sectionStyleElement) {\n sectionStyleElement = document.createElement('style');\n sectionStyleElement.id = sectionStyleId;\n document.head.appendChild(sectionStyleElement);\n }\n sectionStyleElement.innerHTML = `\n .absolute { position: absolute; }\n .relative { position: relative; }\n .left-0 { left: 0; }\n .top-0 { top: 0; }\n .bottom-0 { bottom: 0; }\n .z-50 { z-index: 50; }\n .w-full { width: 100%; }\n .w-6 { width: 1.5rem; }\n .w-8 { width: 2rem; }\n .w-10 { width: 2.5rem; }\n .w-12 { width: 3rem; }\n .w-14 { width: 3.5rem; }\n .w-16 { width: 4rem; }\n .h-6 { height: 1.5rem; }\n .h-8 { height: 2rem; }\n .h-10 { height: 2.5rem; }\n .h-12 { height: 3rem; }\n .h-14 { height: 3.5rem; }\n .h-16 { height: 4rem; }\n .min-h-screen { min-height: 100vh; }\n .flex { display: flex; }\n .inline-flex { display: inline-flex; }\n .flex-col { flex-direction: column; }\n .flex-1 { flex: 1 1 0%; }\n .items-center { align-items: center; }\n .justify-center { justify-content: center; }\n .pointer-events-none { pointer-events: none; }\n .mx-auto { margin-left: auto; margin-right: auto; }\n .px-0 { padding-left: 0; padding-right: 0; }\n .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }\n .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }\n .px-4 { padding-left: 1rem; padding-right: 1rem; }\n .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n .px-8 { padding-left: 2rem; padding-right: 2rem; }\n .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }\n .p-0 { padding: 0; }\n .max-w-7xl { max-width: 80rem; }\n .bottom-full { bottom: 100%; }\n .top-full { top: 100%; }\n .-translate-y-full { transform: translateY(-100%); }\n .translate-y-full { transform: translateY(100%); }\n .-top-full { top: -100%; }\n .-bottom-full { bottom: -100%; }\n .aspect-square { aspect-ratio: 1 / 1; }\n .cursor-pointer { cursor: pointer; }\n .cursor-not-allowed { cursor: not-allowed; }\n .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }\n .font-normal { font-weight: var(--berdsk-font-weight); }\n .font-medium { font-weight: 500; }\n .font-bold { font-weight: 700; }\n .text-center { text-align: center; }\n .text-xs { font-size: 0.75rem; line-height: 1rem; }\n .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n .text-base { font-size: 1rem; line-height: 1.5rem; }\n .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n .text-white { color: #fff; }\n .text-primary { color: var(--berdsk-color-primary); }\n .text-secondary { color: var(--berdsk-color-secondary); }\n .text-danger { color: var(--berdsk-color-danger); }\n .text-success { color: var(--berdsk-color-success); }\n .bg-primary { background-color: var(--berdsk-color-primary); }\n .bg-secondary { background-color: var(--berdsk-color-secondary); }\n .bg-danger { background-color: var(--berdsk-color-danger); }\n .bg-success { background-color: var(--berdsk-color-success); }\n .bg-transparent { background-color: transparent; }\n .bg-black\\\\/5 { background-color: rgba(0, 0, 0, 0.05); }\n .border { border-width: var(--berdsk-border-size); }\n .border-none { border-style: none; }\n .border-transparent { border-color: transparent; }\n .border-primary { border-color: var(--berdsk-color-primary); }\n .border-secondary { border-color: var(--berdsk-color-secondary); }\n .border-danger { border-color: var(--berdsk-color-danger); }\n .border-success { border-color: var(--berdsk-color-success); }\n .rounded-none { border-radius: var(--berdsk-rounded-none); }\n .rounded-xs { border-radius: var(--berdsk-rounded-xs); }\n .rounded-sm { border-radius: var(--berdsk-rounded-sm); }\n .rounded-md { border-radius: var(--berdsk-rounded-md); }\n .rounded-lg { border-radius: var(--berdsk-rounded-lg); }\n .rounded-full { border-radius: var(--berdsk-rounded-full); }\n .opacity-60 { opacity: 0.6; }\n .hover\\\\:opacity-80:hover { opacity: 0.8; }\n .hover\\\\:brightness-90:hover { filter: brightness(0.9); }\n .hover\\\\:bg-black\\\\/5:hover { background-color: rgba(0, 0, 0, 0.05); }\n .underline { text-decoration-line: underline; }\n .gap-gap { gap: var(--berdsk-spacing-gap); }\n \n @media (min-width: 640px) {\n .sm\\\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n }\n @media (min-width: 1024px) {\n .lg\\\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n }\n `;\n\n // Carregar ícones do CDN\n const CDN_URL = 'https://cdn.berdsk.com.br/berdsk-ui/icons/all.css';\n const PRECONNECT_URL = 'https://cdn.berdsk.com.br';\n\n if (!document.querySelector(`link[rel=\"preconnect\"][href=\"${PRECONNECT_URL}\"]`)) {\n const preconnect = document.createElement('link');\n preconnect.rel = 'preconnect';\n preconnect.href = PRECONNECT_URL;\n document.head.appendChild(preconnect);\n }\n\n if (!document.querySelector(`link[href=\"${CDN_URL}\"]`)) {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = CDN_URL;\n document.head.appendChild(link);\n }\n\n // Estilos base globais\n const styleId = 'berdsk-ui-theme-styles';\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\n\n if (!styleElement) {\n styleElement = document.createElement('style');\n styleElement.id = styleId;\n document.head.appendChild(styleElement);\n }\n\n styleElement.innerHTML = `\n html {\n font-family: var(--berdsk-font-family);\n font-weight: var(--berdsk-font-weight);\n }\n `;\n }, [mergedTheme]);\n\n return <ThemeContext.Provider value={{ theme: mergedTheme }}>{children}</ThemeContext.Provider>;\n};\n\nexport const useTheme = () => React.useContext(ThemeContext);\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var chunkZ5XWNRFP_cjs=require('./chunk-Z5XWNRFP.cjs'),chunkKXPGO6PS_cjs=require('./chunk-KXPGO6PS.cjs'),chunkOI62N27S_cjs=require('./chunk-OI62N27S.cjs');require('./chunk-U7VSEXSW.cjs');var
|
|
1
|
+
'use strict';var chunkZ5XWNRFP_cjs=require('./chunk-Z5XWNRFP.cjs'),chunkKXPGO6PS_cjs=require('./chunk-KXPGO6PS.cjs'),chunkOI62N27S_cjs=require('./chunk-OI62N27S.cjs');require('./chunk-U7VSEXSW.cjs');var chunkENMFI5RT_cjs=require('./chunk-ENMFI5RT.cjs');require('./chunk-GNFE24S7.cjs');Object.defineProperty(exports,"Button",{enumerable:true,get:function(){return chunkZ5XWNRFP_cjs.a}});Object.defineProperty(exports,"Section",{enumerable:true,get:function(){return chunkKXPGO6PS_cjs.a}});Object.defineProperty(exports,"Icon",{enumerable:true,get:function(){return chunkOI62N27S_cjs.a}});Object.defineProperty(exports,"ThemeProvider",{enumerable:true,get:function(){return chunkENMFI5RT_cjs.b}});Object.defineProperty(exports,"defaultTheme",{enumerable:true,get:function(){return chunkENMFI5RT_cjs.a}});Object.defineProperty(exports,"useTheme",{enumerable:true,get:function(){return chunkENMFI5RT_cjs.c}});//# sourceMappingURL=index.cjs.map
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{a as Button}from'./chunk-3SA2QKC6.js';export{a as Section}from'./chunk-ZOVZGLB5.js';export{a as Icon}from'./chunk-MVVNEKMH.js';import'./chunk-GUQJ6RZT.js';export{b as ThemeProvider,a as defaultTheme,c as useTheme}from'./chunk-
|
|
1
|
+
export{a as Button}from'./chunk-3SA2QKC6.js';export{a as Section}from'./chunk-ZOVZGLB5.js';export{a as Icon}from'./chunk-MVVNEKMH.js';import'./chunk-GUQJ6RZT.js';export{b as ThemeProvider,a as defaultTheme,c as useTheme}from'./chunk-CK44QQW5.js';import'./chunk-FW4363Y4.js';//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/docs/Button.md
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# Button
|
|
2
|
+
|
|
3
|
+
O componente `Button` é um elemento versátil para ações do usuário, suportando diversas variantes, tamanhos e estados.
|
|
4
|
+
|
|
5
|
+
## Importação
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { Button } from '@berdsk/ui';
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Propriedades
|
|
12
|
+
|
|
13
|
+
O componente aceita todas as propriedades padrão de um elemento `<button>` ou `<a>` (dependendo do uso de `href`), além das seguintes:
|
|
14
|
+
|
|
15
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
16
|
+
| :---------- | :-------------------------------------------------- | :---------- | :--------------------------------------------------------- |
|
|
17
|
+
| `variant` | `'solid' \| 'outlined' \| 'ghost' \| 'link'` | `'solid'` | Estilo visual do botão. |
|
|
18
|
+
| `color` | `'primary' \| 'secondary' \| 'danger' \| 'success'` | `'primary'` | Cor temática do botão. |
|
|
19
|
+
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | `'md'` | Tamanho do botão. |
|
|
20
|
+
| `rounded` | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'full'` | `'md'` | Arredondamento das bordas. |
|
|
21
|
+
| `leftIcon` | `React.ReactNode` | - | Ícone exibido à esquerda do texto. |
|
|
22
|
+
| `rightIcon` | `React.ReactNode` | - | Ícone exibido à direita do texto. |
|
|
23
|
+
| `fullWidth` | `boolean` | `false` | Se verdadeiro, o botão ocupa toda a largura do container. |
|
|
24
|
+
| `href` | `string` | - | Se fornecido, o botão será renderizado como uma tag `<a>`. |
|
|
25
|
+
|
|
26
|
+
## Exemplo de Uso
|
|
27
|
+
|
|
28
|
+
### Variantes e Cores
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
<Button variant="solid" color="primary">Primário Sólido</Button>
|
|
32
|
+
<Button variant="outlined" color="danger">Perigo Outlined</Button>
|
|
33
|
+
<Button variant="ghost" color="success">Sucesso Ghost</Button>
|
|
34
|
+
<Button variant="link">Link</Button>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Com Ícones
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { Button, Icon } from '@berdsk/ui';
|
|
41
|
+
|
|
42
|
+
<Button leftIcon={<Icon className="fas fa-plus" />}>
|
|
43
|
+
Adicionar
|
|
44
|
+
</Button>
|
|
45
|
+
|
|
46
|
+
<Button
|
|
47
|
+
variant="outlined"
|
|
48
|
+
rightIcon={<Icon className="fas fa-arrow-right" />}
|
|
49
|
+
>
|
|
50
|
+
Continuar
|
|
51
|
+
</Button>
|
|
52
|
+
|
|
53
|
+
{/* Botão apenas com ícone */}
|
|
54
|
+
<Button rounded="full" leftIcon={<Icon className="fas fa-search" />} />
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Como Link
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
<Button href="https://berdsk.com.br" variant="link">
|
|
61
|
+
Visitar Site
|
|
62
|
+
</Button>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Estilização e Tailwind
|
|
66
|
+
|
|
67
|
+
O `Button` utiliza utilitários do Tailwind internamente (via injeção de estilos do `ThemeProvider`) e tokens temáticos mapeados para variáveis CSS. Em projetos que usam Tailwind, você pode sobrescrever/estender estilos com `className`:
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
<Button className="shadow-md hover:scale-105 transition-transform">Ação</Button>
|
|
71
|
+
<Button variant="outlined" color="secondary" className="rounded-full" />
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
- As cores respeitam o tema: `bg-primary`, `text-secondary`, `border-danger`, etc.
|
|
75
|
+
- Os tamanhos afetam altura e paddings (`h-10 px-4`, etc.). Para botão apenas com ícone, a largura é ajustada automaticamente e `aspect-square` é aplicado.
|
|
76
|
+
- `rounded` mapeia para `rounded-none|xs|sm|md|lg|full` com valores vindos do tema.
|
package/docs/Icon.md
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
# Icon
|
|
2
|
+
|
|
3
|
+
O componente `Icon` é utilizado para renderizar ícones na interface, carregando automaticamente o CDN de ícones da Berdsk.
|
|
4
|
+
|
|
5
|
+
## Importação
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { Icon } from '@berdsk/ui';
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Propriedades
|
|
12
|
+
|
|
13
|
+
O componente aceita todas as propriedades padrão de um elemento `<i>` do HTML (através de `React.HTMLAttributes<HTMLElement>`), além das seguintes:
|
|
14
|
+
|
|
15
|
+
| Propriedade | Tipo | Obrigatório | Descrição |
|
|
16
|
+
| :---------- | :------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------- |
|
|
17
|
+
| `className` | `string` | Sim | Classes CSS para o ícone (ex: `fas fa-user`). Você pode combinar com utilitários Tailwind como `text-primary`, `text-xl`, etc. |
|
|
18
|
+
|
|
19
|
+
## Funcionamento
|
|
20
|
+
|
|
21
|
+
Ao ser utilizado pela primeira vez, o componente injeta automaticamente no `<head>` do documento:
|
|
22
|
+
|
|
23
|
+
1. Um link de `preconnect` para `https://cdn.berdsk.com.br`.
|
|
24
|
+
2. O link para o CSS global de ícones: `https://cdn.berdsk.com.br/berdsk-ui/icons/all.css`.
|
|
25
|
+
|
|
26
|
+
## Exemplo de Uso
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { Icon } from '@berdsk/ui';
|
|
30
|
+
|
|
31
|
+
function MyComponent() {
|
|
32
|
+
return (
|
|
33
|
+
<div className="flex gap-gap">
|
|
34
|
+
<Icon className="fas fa-user text-primary" />
|
|
35
|
+
<Icon className="fas fa-home text-xl" />
|
|
36
|
+
</div>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Dica
|
|
42
|
+
|
|
43
|
+
- Quando usado com Tailwind, utilize `text-*` para cor/tamanho (ex.: `text-primary`, `text-2xl`).
|
|
44
|
+
- Em projetos sem Tailwind, você ainda pode customizar via `style` inline (ex.: `style={{ color: '#444', fontSize: 20 }}`).
|
package/docs/Section.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# Section
|
|
2
|
+
|
|
3
|
+
O componente `Section` ajuda a estruturar áreas da página com largura total ou centralização automática, além de oferecer divisores decorativos no topo e/ou base.
|
|
4
|
+
|
|
5
|
+
## Importação
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { Section } from '@berdsk/ui';
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Propriedades
|
|
12
|
+
|
|
13
|
+
| Propriedade | Tipo | Padrão | Descrição |
|
|
14
|
+
| :------------------- | :----------------- | :------------ | :------------------------------------------------------------------------------- | ----- | ----------------------------- | ------- | ----------- | -------------------------------- |
|
|
15
|
+
| `as` | `'section' | 'header' | 'footer' | 'nav' | 'article' | 'main'` | `'section'` | Elemento HTML a ser renderizado. |
|
|
16
|
+
| `fullWidth` | `boolean` | `false` | Se `true`, renderiza os filhos ocupando 100% da largura (sem container central). |
|
|
17
|
+
| `screenHeight` | `boolean` | `false` | Se `true`, a altura mínima será a altura total da tela (`min-h-screen`). |
|
|
18
|
+
| `flex` | `boolean` | `false` | Habilita comportamento flex para a `Section` (`flex-1` quando aplicável). |
|
|
19
|
+
| `centerX` | `boolean` | `false` | Centraliza conteúdo no eixo X (horizontal). |
|
|
20
|
+
| `centerY` | `boolean` | `false` | Centraliza conteúdo no eixo Y (vertical). |
|
|
21
|
+
| `containerClassName` | `string` | `''` | Classes extras aplicadas ao container interno quando `fullWidth` é `false`. |
|
|
22
|
+
| `divisorTop` | `{ variant: 'wavy' | 'wavy-simple' | 'arched'; color?: string; className?: string; height?: number; }` | `-` | Exibe um divisor SVG no topo. |
|
|
23
|
+
| `divisorBottom` | `{ variant: 'wavy' | 'wavy-simple' | 'arched'; color?: string; className?: string; height?: number; }` | `-` | Exibe um divisor SVG na base. |
|
|
24
|
+
| `className` | `string` | `''` | Classes adicionais para a `Section` (útil para Tailwind). |
|
|
25
|
+
|
|
26
|
+
## Comportamento do Container
|
|
27
|
+
|
|
28
|
+
- Quando `fullWidth = false` (padrão): o conteúdo é envolvido por um container central (`max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8`).
|
|
29
|
+
- Quando `fullWidth = true`: os filhos são renderizados diretamente, ocupando toda a largura disponível.
|
|
30
|
+
|
|
31
|
+
## Divisores (Dividers)
|
|
32
|
+
|
|
33
|
+
- `variant`: Escolha entre `wavy`, `wavy-simple` e `arched`.
|
|
34
|
+
- `color`: Cor do divisor. Aceita cores CSS (ex: `#fff`, `rgb(255,0,0)`) ou qualquer classe do Tailwind (ex: `text-primary-200`, `bg-sky-500`, `fill-red-500`). O componente tenta detectar automaticamente se o valor é uma cor CSS ou uma classe Tailwind. Por padrão usa `currentColor`.
|
|
35
|
+
- `height`: Altura em pixels (padrão `100`).
|
|
36
|
+
- `className`: Classes extras; ex.: `text-primary/60` para aplicar opacidade com Tailwind.
|
|
37
|
+
|
|
38
|
+
### Comportamento dos Divisores
|
|
39
|
+
|
|
40
|
+
Os divisores são posicionados de forma absoluta no topo ou base **do lado de fora** da seção (`z-50`). Eles utilizam tradução negativa (`translate-y`) para garantir que a transição entre seções seja suave e decorativa, sem ocupar espaço no fluxo do documento.
|
|
41
|
+
|
|
42
|
+
**Dica de Design:** Como os divisores ficam fora da seção, eles geralmente sobrepõem a seção vizinha. Certifique-se de que as cores dos divisores combinem com as seções adjacentes para um efeito visual harmonioso. Se você tiver problemas de visibilidade (ex: divisor sumindo sob outra seção), pode ser necessário ajustar o `z-index` das seções em seu projeto.
|
|
43
|
+
|
|
44
|
+
## Exemplos
|
|
45
|
+
|
|
46
|
+
### Seção padrão centralizada
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
<Section>
|
|
50
|
+
<h1 className="text-2xl">Título</h1>
|
|
51
|
+
<p>Conteúdo</p>
|
|
52
|
+
</Section>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Full width com centralização e altura da tela
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
<Section fullWidth screenHeight centerX centerY className="bg-primary/5">
|
|
59
|
+
<div className="text-center">
|
|
60
|
+
<h2 className="text-xl text-primary">Bem-vindo</h2>
|
|
61
|
+
<p>Seção com 100% da largura e altura da tela.</p>
|
|
62
|
+
</div>
|
|
63
|
+
</Section>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Com divisores decorativos
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
<Section
|
|
70
|
+
screenHeight
|
|
71
|
+
centerX
|
|
72
|
+
centerY
|
|
73
|
+
className="bg-secondary/10"
|
|
74
|
+
divisorTop={{ variant: 'wavy', className: 'text-secondary', height: 80 }}
|
|
75
|
+
divisorBottom={{
|
|
76
|
+
variant: 'arched',
|
|
77
|
+
className: 'text-secondary',
|
|
78
|
+
height: 120,
|
|
79
|
+
}}
|
|
80
|
+
>
|
|
81
|
+
<div className="text-center">
|
|
82
|
+
<h2 className="text-xl">Seção com Divisores</h2>
|
|
83
|
+
<p>Topo ondulado e base arqueada.</p>
|
|
84
|
+
</div>
|
|
85
|
+
</Section>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Tailwind e Tema
|
|
89
|
+
|
|
90
|
+
- A `Section` utiliza utilitários como `relative`, `w-full`, `min-h-screen`, `flex`, `items-center`, `justify-center`, etc.
|
|
91
|
+
- Em projetos sem Tailwind, o `ThemeProvider` injeta os utilitários essenciais para funcionamento out-of-the-box.
|
|
92
|
+
- Em projetos com Tailwind, use `className` para estender o visual. As cores `primary|secondary|danger|success` vêm do tema via variáveis CSS e mapeamentos no Tailwind.
|
package/docs/Theme.md
ADDED
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
# Tematização (ThemeProvider)
|
|
2
|
+
|
|
3
|
+
A biblioteca `@berdsk/ui` utiliza um sistema de tematização baseado em CSS Variables para garantir que os componentes sejam consistentes e facilmente customizáveis.
|
|
4
|
+
|
|
5
|
+
## Uso Básico
|
|
6
|
+
|
|
7
|
+
Para que os estilos dos componentes funcionem corretamente e para ter acesso ao esquema de cores padrão, envolva sua aplicação com o `ThemeProvider`.
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
import { ThemeProvider } from '@berdsk/ui';
|
|
11
|
+
|
|
12
|
+
function App() {
|
|
13
|
+
return (
|
|
14
|
+
<ThemeProvider>
|
|
15
|
+
<YourAppContent />
|
|
16
|
+
</ThemeProvider>
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Customização
|
|
22
|
+
|
|
23
|
+
Você pode passar um objeto `theme` para o `ThemeProvider` para sobrescrever as cores, espaçamentos e arredondamentos padrão.
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { ThemeProvider, Button } from '@berdsk/ui';
|
|
27
|
+
|
|
28
|
+
const myTheme = {
|
|
29
|
+
colors: {
|
|
30
|
+
primary: '#6200ee',
|
|
31
|
+
secondary: '#03dac6',
|
|
32
|
+
danger: '#b00020',
|
|
33
|
+
success: '#4caf50',
|
|
34
|
+
},
|
|
35
|
+
spacing: {
|
|
36
|
+
gap: '1rem',
|
|
37
|
+
},
|
|
38
|
+
border: {
|
|
39
|
+
color: '#e0e0e0',
|
|
40
|
+
size: '2px',
|
|
41
|
+
radius: {
|
|
42
|
+
md: '8px',
|
|
43
|
+
full: '50px',
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
function App() {
|
|
49
|
+
return (
|
|
50
|
+
<ThemeProvider theme={myTheme}>
|
|
51
|
+
<Button color="primary">Meu Botão Customizado</Button>
|
|
52
|
+
</ThemeProvider>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Integração com Tailwind (opcional)
|
|
58
|
+
|
|
59
|
+
A biblioteca já funciona "zero-config". Caso seu projeto utilize Tailwind, você pode aproveitar os tokens do tema mapeados para utilitários Tailwind:
|
|
60
|
+
|
|
61
|
+
- Cores: `bg-primary`, `text-secondary`, `border-danger`, `bg-success`, etc.
|
|
62
|
+
- Bordas: `rounded-none|xs|sm|md|lg|full` (valores vindos do tema).
|
|
63
|
+
- Espaçamento customizado: `gap-gap`.
|
|
64
|
+
|
|
65
|
+
Exemplo de `tailwind.config.js` (já incluso na biblioteca como referência):
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
/** @type {import('tailwindcss').Config} */
|
|
69
|
+
export default {
|
|
70
|
+
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
|
71
|
+
theme: {
|
|
72
|
+
extend: {
|
|
73
|
+
colors: {
|
|
74
|
+
primary: 'var(--berdsk-color-primary)',
|
|
75
|
+
secondary: 'var(--berdsk-color-secondary)',
|
|
76
|
+
danger: 'var(--berdsk-color-danger)',
|
|
77
|
+
success: 'var(--berdsk-color-success)',
|
|
78
|
+
},
|
|
79
|
+
borderRadius: {
|
|
80
|
+
none: 'var(--berdsk-rounded-none)',
|
|
81
|
+
xs: 'var(--berdsk-rounded-xs)',
|
|
82
|
+
sm: 'var(--berdsk-rounded-sm)',
|
|
83
|
+
md: 'var(--berdsk-rounded-md)',
|
|
84
|
+
lg: 'var(--berdsk-rounded-lg)',
|
|
85
|
+
full: 'var(--berdsk-rounded-full)',
|
|
86
|
+
},
|
|
87
|
+
spacing: {
|
|
88
|
+
gap: 'var(--berdsk-spacing-gap)',
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
plugins: [],
|
|
93
|
+
};
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Observações:
|
|
97
|
+
|
|
98
|
+
- Em projetos sem Tailwind, o `ThemeProvider` injeta utilitários essenciais (usados por `Button`, `Icon`, `Section`) para funcionamento imediato.
|
|
99
|
+
- Em projetos com Tailwind, utilize `className` para estender/ajustar o visual facilmente.
|
|
100
|
+
|
|
101
|
+
## Tipografia e Fontes do Next.js
|
|
102
|
+
|
|
103
|
+
Para utilizar fontes do Next.js (`next/font/google`) no `ThemeProvider`, você pode passar o `fontFamily` diretamente do objeto de estilo da fonte.
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
'use client';
|
|
107
|
+
|
|
108
|
+
import { ThemeProvider } from '@berdsk/ui';
|
|
109
|
+
import { Zain } from 'next/font/google';
|
|
110
|
+
import { PropsWithChildren } from 'react';
|
|
111
|
+
|
|
112
|
+
const zain = Zain({
|
|
113
|
+
subsets: ['latin'],
|
|
114
|
+
weight: ['400', '700'],
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
const Theme = ({ children }: PropsWithChildren) => {
|
|
118
|
+
return (
|
|
119
|
+
<ThemeProvider
|
|
120
|
+
theme={{
|
|
121
|
+
typography: {
|
|
122
|
+
fontFamily: zain.style.fontFamily,
|
|
123
|
+
fontWeight: '700',
|
|
124
|
+
},
|
|
125
|
+
}}
|
|
126
|
+
>
|
|
127
|
+
{children}
|
|
128
|
+
</ThemeProvider>
|
|
129
|
+
);
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
export default Theme;
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## Esquema de Cores Padrão
|
|
136
|
+
|
|
137
|
+
Por padrão, a biblioteca utiliza as seguintes cores:
|
|
138
|
+
|
|
139
|
+
| Nome | Valor Hex | Variável CSS |
|
|
140
|
+
| :------------- | :-------- | :------------------------- |
|
|
141
|
+
| `primary` | `#007bff` | `--berdsk-color-primary` |
|
|
142
|
+
| `secondary` | `#6c757d` | `--berdsk-color-secondary` |
|
|
143
|
+
| `danger` | `#dc3545` | `--berdsk-color-danger` |
|
|
144
|
+
| `success` | `#28a745` | `--berdsk-color-success` |
|
|
145
|
+
| `border.color` | `#dee2e6` | `--berdsk-border-color` |
|
|
146
|
+
| `border.size` | `1px` | `--berdsk-border-size` |
|
|
147
|
+
| `spacing.gap` | `0.5rem` | `--berdsk-spacing-gap` |
|
|
148
|
+
|
|
149
|
+
## Arredondamentos Padrão (border.radius)
|
|
150
|
+
|
|
151
|
+
| Nome | Valor | Variável CSS |
|
|
152
|
+
| :----- | :--------- | :---------------------- |
|
|
153
|
+
| `none` | `0` | `--berdsk-rounded-none` |
|
|
154
|
+
| `xs` | `0.125rem` | `--berdsk-rounded-xs` |
|
|
155
|
+
| `sm` | `0.25rem` | `--berdsk-rounded-sm` |
|
|
156
|
+
| `md` | `0.375rem` | `--berdsk-rounded-md` |
|
|
157
|
+
| `lg` | `0.5rem` | `--berdsk-rounded-lg` |
|
|
158
|
+
| `full` | `9999px` | `--berdsk-rounded-full` |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@berdsk/ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.9",
|
|
4
4
|
"description": "Biblioteca de componentes UI profissional da Berdsk",
|
|
5
5
|
"author": "Berdsk",
|
|
6
6
|
"publishConfig": {
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
"files": [
|
|
24
|
-
"dist"
|
|
24
|
+
"dist",
|
|
25
|
+
"docs"
|
|
25
26
|
],
|
|
26
27
|
"engines": {
|
|
27
28
|
"node": ">=18"
|