@berdsk/ui 0.0.2 → 0.1.0

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.
Files changed (8) hide show
  1. package/README.md +0 -0
  2. package/dist/index.cjs +67 -1
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +41 -1
  5. package/dist/index.d.ts +41 -1
  6. package/dist/index.js +67 -1
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
Binary file
package/dist/index.cjs CHANGED
@@ -1,2 +1,68 @@
1
- "use strict";var m=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var k=(t,e)=>{for(var n in e)o(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of f(e))!h.call(t,c)&&c!==n&&o(t,c,{get:()=>e[c],enumerable:!(r=p(e,c))||r.enumerable});return t};var C=(t,e,n)=>(n=t!=null?m(u(t)):{},s(e||!t||!t.__esModule?o(n,"default",{value:t,enumerable:!0}):n,t)),R=t=>s(o({},"__esModule",{value:!0}),t);var L={};k(L,{Icon:()=>E});module.exports=R(L);var l=C(require("react"),1),a=require("react/jsx-runtime"),i="https://cdn.berdsk.com.br/berdsk-ui/icons/all.css",d="https://cdn.berdsk.com.br",b=()=>{if(typeof document>"u")return;if(!document.querySelector(`link[rel="preconnect"][href="${d}"]`)){let e=document.createElement("link");e.rel="preconnect",e.href=d,document.head.appendChild(e)}if(!document.querySelector(`link[href="${i}"]`)){let e=document.createElement("link");e.rel="stylesheet",e.href=i,document.head.appendChild(e)}},E=({className:t,...e})=>(l.useEffect(()=>{b()},[]),(0,a.jsx)("i",{className:`${t}`,...e}));0&&(module.exports={Icon});
1
+ "use strict";var w=Object.create;var b=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var O=(e,r)=>{for(var o in r)b(e,o,{get:r[o],enumerable:!0})},y=(e,r,o,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of $(r))!S.call(e,n)&&n!==o&&b(e,n,{get:()=>r[n],enumerable:!(d=A(r,n))||d.enumerable});return e};var m=(e,r,o)=>(o=e!=null?w(z(e)):{},y(r||!e||!e.__esModule?b(o,"default",{value:e,enumerable:!0}):o,e)),F=e=>y(b({},"__esModule",{value:!0}),e);var D={};O(D,{Button:()=>C,Icon:()=>U,ThemeProvider:()=>W,defaultTheme:()=>l,useTheme:()=>q});module.exports=F(D);var R=m(require("react"),1),T=require("react/jsx-runtime"),k="https://cdn.berdsk.com.br/berdsk-ui/icons/all.css",x="https://cdn.berdsk.com.br",I=()=>{if(typeof document>"u")return;if(!document.querySelector(`link[rel="preconnect"][href="${x}"]`)){let r=document.createElement("link");r.rel="preconnect",r.href=x,document.head.appendChild(r)}if(!document.querySelector(`link[href="${k}"]`)){let r=document.createElement("link");r.rel="stylesheet",r.href=k,document.head.appendChild(r)}},U=({className:e,...r})=>(R.useEffect(()=>{I()},[]),(0,T.jsx)("i",{className:`${e}`,...r}));var v=m(require("react"),1),t=require("react/jsx-runtime"),C=v.forwardRef(({children:e,variant:r="solid",color:o="primary",size:d="md",rounded:n="md",leftIcon:s,rightIcon:c,fullWidth:i=!1,className:M="",href:u,...p},f)=>{let N=`btn-${r}`,H=`btn-${o}`,P=`btn-${d}`,B=`btn-rounded-${n}`,g=["btn",N,H,P,B,i?"btn-full-width":"",!e&&(s||c)?"btn-icon-only":"",M].filter(Boolean).join(" "),h=(0,t.jsxs)(t.Fragment,{children:[s&&(0,t.jsx)("span",{className:"btn-icon-left",children:s}),e&&(0,t.jsx)("span",{className:"btn-content",children:e}),c&&(0,t.jsx)("span",{className:"btn-icon-right",children:c})]});return u?(0,t.jsx)("a",{href:u,className:g,ref:f,...p,children:h}):(0,t.jsx)("button",{className:g,ref:f,...p,children:h})});C.displayName="Button";var a=m(require("react"),1),L=require("react/jsx-runtime"),l={colors:{primary:"#007bff",secondary:"#6c757d",danger:"#dc3545",success:"#28a745"},borderRadius:{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},borderRadius:{...l.borderRadius,...e.borderRadius}}:l,[e]);return a.useLayoutEffect(()=>{let d=document.documentElement;Object.entries(o.colors).forEach(([c,i])=>{d.style.setProperty(`--berdsk-color-${c}`,i)}),Object.entries(o.borderRadius).forEach(([c,i])=>{d.style.setProperty(`--berdsk-rounded-${c}`,i)});let n="berdsk-ui-theme-styles",s=document.getElementById(n);s||(s=document.createElement("style"),s.id=n,document.head.appendChild(s)),s.innerHTML=`
2
+ :root {
3
+ --berdsk-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
4
+ }
5
+ .btn {
6
+ display: inline-flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ font-family: var(--berdsk-font-family);
10
+ font-weight: 500;
11
+ cursor: pointer;
12
+ transition: all 0.2s;
13
+ border: 1px solid transparent;
14
+ text-decoration: none;
15
+ gap: 0.5rem;
16
+ }
17
+ .btn:disabled {
18
+ opacity: 0.6;
19
+ cursor: not-allowed;
20
+ }
21
+
22
+ /* Tamanhos */
23
+ .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
24
+ .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; }
25
+ .btn-md { padding: 0.5rem 1rem; font-size: 1rem; }
26
+ .btn-lg { padding: 0.75rem 1.5rem; font-size: 1.125rem; }
27
+ .btn-xl { padding: 1rem 2rem; font-size: 1.25rem; }
28
+ .btn-2xl { padding: 1.25rem 2.5rem; font-size: 1.5rem; }
29
+
30
+ /* Cores e Variantes - Solid */
31
+ .btn-solid.btn-primary { background-color: var(--berdsk-color-primary); color: white; }
32
+ .btn-solid.btn-secondary { background-color: var(--berdsk-color-secondary); color: white; }
33
+ .btn-solid.btn-danger { background-color: var(--berdsk-color-danger); color: white; }
34
+ .btn-solid.btn-success { background-color: var(--berdsk-color-success); color: white; }
35
+
36
+ .btn-solid:hover { filter: brightness(0.9); }
37
+
38
+ /* Outlined */
39
+ .btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }
40
+ .btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }
41
+ .btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }
42
+ .btn-outlined.btn-success { border-color: var(--berdsk-color-success); color: var(--berdsk-color-success); background: transparent; }
43
+
44
+ .btn-outlined:hover { background: rgba(0,0,0,0.05); }
45
+
46
+ /* Ghost */
47
+ .btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }
48
+ .btn-ghost:hover { background: rgba(0,0,0,0.05); }
49
+
50
+ /* Link */
51
+ .btn-link { background: transparent; border: none; padding: 0; color: var(--berdsk-color-primary); text-decoration: underline; }
52
+ .btn-link:hover { opacity: 0.8; }
53
+
54
+ /* Rounded */
55
+ .btn-rounded-none { border-radius: var(--berdsk-rounded-none); }
56
+ .btn-rounded-xs { border-radius: var(--berdsk-rounded-xs); }
57
+ .btn-rounded-sm { border-radius: var(--berdsk-rounded-sm); }
58
+ .btn-rounded-md { border-radius: var(--berdsk-rounded-md); }
59
+ .btn-rounded-lg { border-radius: var(--berdsk-rounded-lg); }
60
+ .btn-rounded-full { border-radius: var(--berdsk-rounded-full); }
61
+
62
+ .btn-full-width { width: 100%; display: flex; }
63
+
64
+ .btn-icon-only { padding: 0.5rem; aspect-ratio: 1/1; }
65
+ .btn-xs.btn-icon-only { padding: 0.25rem; }
66
+ .btn-lg.btn-icon-only { padding: 0.75rem; }
67
+ `},[o]),(0,L.jsx)(E.Provider,{value:{theme:o},children:r})},q=()=>a.useContext(E);0&&(module.exports={Button,Icon,ThemeProvider,defaultTheme,useTheme});
2
68
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/Icon.tsx"],"sourcesContent":["\r\nexport * from './components/Icon';\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 (!document.querySelector(`link[rel=\"preconnect\"][href=\"${PRECONNECT_URL}\"]`)) {\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"],"mappings":"0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAAuB,sBAmCdC,EAAA,6BAjCHC,EAAU,oDACVC,EAAiB,4BAMjBC,EAAU,IAAM,CACpB,GAAI,OAAO,SAAa,IAAa,OAGrC,GAAI,CAAC,SAAS,cAAc,gCAAgCD,CAAc,IAAI,EAAG,CAC/E,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","names":["index_exports","__export","Icon","__toCommonJS","React","import_jsx_runtime","CDN_URL","PRECONNECT_URL","loadCDN","preconnect","link","Icon","className","props"]}
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":"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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
@@ -5,4 +5,44 @@ interface IconProps extends React.HTMLAttributes<HTMLElement> {
5
5
  }
6
6
  declare const Icon: React.FC<IconProps>;
7
7
 
8
- export { Icon, type IconProps };
8
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
9
+ variant?: "solid" | "outlined" | "ghost" | "link";
10
+ color?: "primary" | "secondary" | "danger" | "success";
11
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
12
+ rounded?: "none" | "xs" | "sm" | "md" | "lg" | "full";
13
+ leftIcon?: React.ReactNode;
14
+ rightIcon?: React.ReactNode;
15
+ fullWidth?: boolean;
16
+ href?: string;
17
+ }
18
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
19
+
20
+ interface ThemeColors {
21
+ primary: string;
22
+ secondary: string;
23
+ danger: string;
24
+ success: string;
25
+ }
26
+ interface ThemeConfig {
27
+ colors: ThemeColors;
28
+ borderRadius: {
29
+ none: string;
30
+ xs: string;
31
+ sm: string;
32
+ md: string;
33
+ lg: string;
34
+ full: string;
35
+ };
36
+ }
37
+ declare const defaultTheme: ThemeConfig;
38
+ interface ThemeContextType {
39
+ theme: ThemeConfig;
40
+ }
41
+ interface ThemeProviderProps {
42
+ theme?: Partial<ThemeConfig>;
43
+ children: React.ReactNode;
44
+ }
45
+ declare const ThemeProvider: React.FC<ThemeProviderProps>;
46
+ declare const useTheme: () => ThemeContextType;
47
+
48
+ export { Button, type ButtonProps, Icon, type IconProps, type ThemeColors, type ThemeConfig, ThemeProvider, type ThemeProviderProps, defaultTheme, useTheme };
package/dist/index.d.ts CHANGED
@@ -5,4 +5,44 @@ interface IconProps extends React.HTMLAttributes<HTMLElement> {
5
5
  }
6
6
  declare const Icon: React.FC<IconProps>;
7
7
 
8
- export { Icon, type IconProps };
8
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
9
+ variant?: "solid" | "outlined" | "ghost" | "link";
10
+ color?: "primary" | "secondary" | "danger" | "success";
11
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
12
+ rounded?: "none" | "xs" | "sm" | "md" | "lg" | "full";
13
+ leftIcon?: React.ReactNode;
14
+ rightIcon?: React.ReactNode;
15
+ fullWidth?: boolean;
16
+ href?: string;
17
+ }
18
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
19
+
20
+ interface ThemeColors {
21
+ primary: string;
22
+ secondary: string;
23
+ danger: string;
24
+ success: string;
25
+ }
26
+ interface ThemeConfig {
27
+ colors: ThemeColors;
28
+ borderRadius: {
29
+ none: string;
30
+ xs: string;
31
+ sm: string;
32
+ md: string;
33
+ lg: string;
34
+ full: string;
35
+ };
36
+ }
37
+ declare const defaultTheme: ThemeConfig;
38
+ interface ThemeContextType {
39
+ theme: ThemeConfig;
40
+ }
41
+ interface ThemeProviderProps {
42
+ theme?: Partial<ThemeConfig>;
43
+ children: React.ReactNode;
44
+ }
45
+ declare const ThemeProvider: React.FC<ThemeProviderProps>;
46
+ declare const useTheme: () => ThemeContextType;
47
+
48
+ export { Button, type ButtonProps, Icon, type IconProps, type ThemeColors, type ThemeConfig, ThemeProvider, type ThemeProviderProps, defaultTheme, useTheme };
package/dist/index.js CHANGED
@@ -1,2 +1,68 @@
1
- import*as o from"react";import{jsx as s}from"react/jsx-runtime";var n="https://cdn.berdsk.com.br/berdsk-ui/icons/all.css",c="https://cdn.berdsk.com.br",r=()=>{if(typeof document>"u")return;if(!document.querySelector(`link[rel="preconnect"][href="${c}"]`)){let e=document.createElement("link");e.rel="preconnect",e.href=c,document.head.appendChild(e)}if(!document.querySelector(`link[href="${n}"]`)){let e=document.createElement("link");e.rel="stylesheet",e.href=n,document.head.appendChild(e)}},i=({className:t,...e})=>(o.useEffect(()=>{r()},[]),s("i",{className:`${t}`,...e}));export{i as Icon};
1
+ import*as y from"react";import{jsx as M}from"react/jsx-runtime";var g="https://cdn.berdsk.com.br/berdsk-ui/icons/all.css",h="https://cdn.berdsk.com.br",L=()=>{if(typeof document>"u")return;if(!document.querySelector(`link[rel="preconnect"][href="${h}"]`)){let e=document.createElement("link");e.rel="preconnect",e.href=h,document.head.appendChild(e)}if(!document.querySelector(`link[href="${g}"]`)){let e=document.createElement("link");e.rel="stylesheet",e.href=g,document.head.appendChild(e)}},z=({className:r,...e})=>(y.useEffect(()=>{L()},[]),M("i",{className:`${r}`,...e}));import*as k from"react";import{Fragment as H,jsx as d,jsxs as P}from"react/jsx-runtime";var N=k.forwardRef(({children:r,variant:e="solid",color:s="primary",size:l="md",rounded:i="md",leftIcon:o,rightIcon:t,fullWidth:a=!1,className:R="",href:b,...m},u)=>{let T=`btn-${e}`,v=`btn-${s}`,C=`btn-${l}`,E=`btn-rounded-${i}`,p=["btn",T,v,C,E,a?"btn-full-width":"",!r&&(o||t)?"btn-icon-only":"",R].filter(Boolean).join(" "),f=P(H,{children:[o&&d("span",{className:"btn-icon-left",children:o}),r&&d("span",{className:"btn-content",children:r}),t&&d("span",{className:"btn-icon-right",children:t})]});return b?d("a",{href:b,className:p,ref:u,...m,children:f}):d("button",{className:p,ref:u,...m,children:f})});N.displayName="Button";import*as n from"react";import{jsx as B}from"react/jsx-runtime";var c={colors:{primary:"#007bff",secondary:"#6c757d",danger:"#dc3545",success:"#28a745"},borderRadius:{none:"0",xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",full:"9999px"}},x=n.createContext({theme:c}),U=({theme:r,children:e})=>{let s=n.useMemo(()=>r?{...c,...r,colors:{...c.colors,...r.colors},borderRadius:{...c.borderRadius,...r.borderRadius}}:c,[r]);return n.useLayoutEffect(()=>{let l=document.documentElement;Object.entries(s.colors).forEach(([t,a])=>{l.style.setProperty(`--berdsk-color-${t}`,a)}),Object.entries(s.borderRadius).forEach(([t,a])=>{l.style.setProperty(`--berdsk-rounded-${t}`,a)});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
+ :root {
3
+ --berdsk-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
4
+ }
5
+ .btn {
6
+ display: inline-flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ font-family: var(--berdsk-font-family);
10
+ font-weight: 500;
11
+ cursor: pointer;
12
+ transition: all 0.2s;
13
+ border: 1px solid transparent;
14
+ text-decoration: none;
15
+ gap: 0.5rem;
16
+ }
17
+ .btn:disabled {
18
+ opacity: 0.6;
19
+ cursor: not-allowed;
20
+ }
21
+
22
+ /* Tamanhos */
23
+ .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
24
+ .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; }
25
+ .btn-md { padding: 0.5rem 1rem; font-size: 1rem; }
26
+ .btn-lg { padding: 0.75rem 1.5rem; font-size: 1.125rem; }
27
+ .btn-xl { padding: 1rem 2rem; font-size: 1.25rem; }
28
+ .btn-2xl { padding: 1.25rem 2.5rem; font-size: 1.5rem; }
29
+
30
+ /* Cores e Variantes - Solid */
31
+ .btn-solid.btn-primary { background-color: var(--berdsk-color-primary); color: white; }
32
+ .btn-solid.btn-secondary { background-color: var(--berdsk-color-secondary); color: white; }
33
+ .btn-solid.btn-danger { background-color: var(--berdsk-color-danger); color: white; }
34
+ .btn-solid.btn-success { background-color: var(--berdsk-color-success); color: white; }
35
+
36
+ .btn-solid:hover { filter: brightness(0.9); }
37
+
38
+ /* Outlined */
39
+ .btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }
40
+ .btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }
41
+ .btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }
42
+ .btn-outlined.btn-success { border-color: var(--berdsk-color-success); color: var(--berdsk-color-success); background: transparent; }
43
+
44
+ .btn-outlined:hover { background: rgba(0,0,0,0.05); }
45
+
46
+ /* Ghost */
47
+ .btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }
48
+ .btn-ghost:hover { background: rgba(0,0,0,0.05); }
49
+
50
+ /* Link */
51
+ .btn-link { background: transparent; border: none; padding: 0; color: var(--berdsk-color-primary); text-decoration: underline; }
52
+ .btn-link:hover { opacity: 0.8; }
53
+
54
+ /* Rounded */
55
+ .btn-rounded-none { border-radius: var(--berdsk-rounded-none); }
56
+ .btn-rounded-xs { border-radius: var(--berdsk-rounded-xs); }
57
+ .btn-rounded-sm { border-radius: var(--berdsk-rounded-sm); }
58
+ .btn-rounded-md { border-radius: var(--berdsk-rounded-md); }
59
+ .btn-rounded-lg { border-radius: var(--berdsk-rounded-lg); }
60
+ .btn-rounded-full { border-radius: var(--berdsk-rounded-full); }
61
+
62
+ .btn-full-width { width: 100%; display: flex; }
63
+
64
+ .btn-icon-only { padding: 0.5rem; aspect-ratio: 1/1; }
65
+ .btn-xs.btn-icon-only { padding: 0.25rem; }
66
+ .btn-lg.btn-icon-only { padding: 0.75rem; }
67
+ `},[s]),B(x.Provider,{value:{theme:s},children:e})},W=()=>n.useContext(x);export{N as Button,z as Icon,U as ThemeProvider,c as defaultTheme,W as useTheme};
2
68
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Icon.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 (!document.querySelector(`link[rel=\"preconnect\"][href=\"${PRECONNECT_URL}\"]`)) {\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"],"mappings":"AAAA,UAAYA,MAAW,QAmCd,cAAAC,MAAA,oBAjCT,IAAMC,EAAU,oDACVC,EAAiB,4BAMjBC,EAAU,IAAM,CACpB,GAAI,OAAO,SAAa,IAAa,OAGrC,GAAI,CAAC,SAAS,cAAc,gCAAgCD,CAAc,IAAI,EAAG,CAC/E,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,EAEEH,EAAC,KAAE,UAAW,GAAGO,CAAS,GAAK,GAAGC,EAAO","names":["React","jsx","CDN_URL","PRECONNECT_URL","loadCDN","preconnect","link","Icon","className","props"]}
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":"AAAA,UAAYA,MAAW,QAqCd,cAAAC,MAAA,oBAnCT,IAAMC,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,EAEEH,EAAC,KAAE,UAAW,GAAGO,CAAS,GAAK,GAAGC,EAAO,GCrClD,UAAYC,MAAW,QAwDjB,mBAAAC,EACe,OAAAC,EADf,QAAAC,MAAA,oBA1CC,IAAMC,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,EACJnB,EAAAF,EAAA,CACG,UAAAS,GAAYR,EAAC,QAAK,UAAU,gBAAiB,SAAAQ,EAAS,EACtDL,GAAYH,EAAC,QAAK,UAAU,cAAe,SAAAG,EAAS,EACpDM,GAAaT,EAAC,QAAK,UAAU,iBAAkB,SAAAS,EAAU,GAC5D,EAGF,OAAIG,EAEAZ,EAAC,KACC,KAAMY,EACN,UAAWO,EACX,IAAKL,EACJ,GAAID,EAEJ,SAAAO,EACH,EAKFpB,EAAC,UACC,UAAWmB,EACX,IAAKL,EACJ,GAAID,EAEJ,SAAAO,EACH,CAEJ,CACF,EAEAlB,EAAO,YAAc,SCxFrB,UAAYmB,MAAW,QA+JnB,cAAAC,MAAA,oBA1IG,IAAMC,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,EAGdN,EAACE,EAAa,SAAb,CAAsB,MAAO,CAAE,MAAOI,CAAY,EAChD,SAAAD,EACH,CAEJ,EAEaO,EAAW,IAAY,aAAWV,CAAY","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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@berdsk/ui",
3
- "version": "0.0.2",
3
+ "version": "0.1.0",
4
4
  "description": "Biblioteca de componentes UI profissional da Berdsk",
5
5
  "author": "Berdsk",
6
6
  "publishConfig": {