@berdsk/ui 0.0.2 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +0 -0
  2. package/dist/index.cjs +81 -1
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +45 -1
  5. package/dist/index.d.ts +45 -1
  6. package/dist/index.js +81 -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,82 @@
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 z=Object.create;var b=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var O=(e,r)=>{for(var o in r)b(e,o,{get:r[o],enumerable:!0})},k=(e,r,o,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of A(r))!S.call(e,t)&&t!==o&&b(e,t,{get:()=>r[t],enumerable:!(s=B(r,t))||s.enumerable});return e};var m=(e,r,o)=>(o=e!=null?z($(e)):{},k(r||!e||!e.__esModule?b(o,"default",{value:e,enumerable:!0}):o,e)),F=e=>k(b({},"__esModule",{value:!0}),e);var D={};O(D,{Button:()=>R,Icon:()=>U,ThemeProvider:()=>W,defaultTheme:()=>l,useTheme:()=>q});module.exports=F(D);var x=m(require("react"),1),T=require("react/jsx-runtime"),y="https://cdn.berdsk.com.br/berdsk-ui/icons/all.css",v="https://cdn.berdsk.com.br",I=()=>{if(typeof document>"u")return;if(!document.querySelector(`link[rel="preconnect"][href="${v}"]`)){let r=document.createElement("link");r.rel="preconnect",r.href=v,document.head.appendChild(r)}if(!document.querySelector(`link[href="${y}"]`)){let r=document.createElement("link");r.rel="stylesheet",r.href=y,document.head.appendChild(r)}},U=({className:e,...r})=>(x.useEffect(()=>{I()},[]),(0,T.jsx)("i",{className:`${e}`,...r}));var C=m(require("react"),1),n=require("react/jsx-runtime"),R=C.forwardRef(({children:e,variant:r="solid",color:o="primary",size:s="md",rounded:t="md",leftIcon:d,rightIcon:c,fullWidth:i=!1,className:w="",href:u,...p},g)=>{let M=`btn-${r}`,N=`btn-${o}`,P=`btn-${s}`,H=`btn-rounded-${t}`,h=["btn",M,N,P,H,i?"btn-full-width":"",!e&&(d||c)?"btn-icon-only":"",w].filter(Boolean).join(" "),f=(0,n.jsxs)(n.Fragment,{children:[d&&(0,n.jsx)("span",{className:"btn-icon-left",children:d}),e&&(0,n.jsx)("span",{className:"btn-content",children:e}),c&&(0,n.jsx)("span",{className:"btn-icon-right",children:c})]});return u?(0,n.jsx)("a",{href:u,className:h,ref:g,...p,children:f}):(0,n.jsx)("button",{className:h,ref:g,...p,children:f})});R.displayName="Button";var a=m(require("react"),1),L=require("react/jsx-runtime"),l={colors:{primary:"#007bff",secondary:"#6c757d",danger:"#dc3545",success:"#28a745"},border:{color:"#dee2e6",size:"1px",radius:{none:"0",xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",full:"9999px"}}},E=a.createContext({theme:l}),W=({theme:e,children:r})=>{let o=a.useMemo(()=>e?{...l,...e,colors:{...l.colors,...e.colors},border:{...l.border,...e.border,radius:{...l.border.radius,...e.border?.radius}}}:l,[e]);return a.useLayoutEffect(()=>{let s=document.documentElement;Object.entries(o.colors).forEach(([c,i])=>{s.style.setProperty(`--berdsk-color-${c}`,i)}),s.style.setProperty("--berdsk-border-color",o.border.color),s.style.setProperty("--berdsk-border-size",o.border.size),Object.entries(o.border.radius).forEach(([c,i])=>{s.style.setProperty(`--berdsk-rounded-${c}`,i)});let t="berdsk-ui-theme-styles",d=document.getElementById(t);d||(d=document.createElement("style"),d.id=t,document.head.appendChild(d)),d.innerHTML=`
2
+ :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: var(--berdsk-border-size) 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 0.5rem; height: 1.5rem; font-size: 0.75rem; }
24
+ .btn-sm { padding: 0 0.75rem; height: 2rem; font-size: 0.875rem; }
25
+ .btn-md { padding: 0 1rem; height: 2.5rem; font-size: 1rem; }
26
+ .btn-lg { padding: 0 1.5rem; height: 3rem; font-size: 1.125rem; }
27
+ .btn-xl { padding: 0 2rem; height: 3.5rem; font-size: 1.25rem; }
28
+ .btn-2xl { padding: 0 2.5rem; height: 4rem; font-size: 1.5rem; }
29
+
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 { border-width: var(--berdsk-border-size); }
40
+ .btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }
41
+ .btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }
42
+ .btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }
43
+ .btn-outlined.btn-success { border-color: var(--berdsk-color-success); color: var(--berdsk-color-success); background: transparent; }
44
+
45
+ .btn-outlined:hover { background: rgba(0,0,0,0.05); }
46
+
47
+ /* Ghost */
48
+ .btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }
49
+ .btn-ghost.btn-secondary { color: var(--berdsk-color-secondary); background: transparent; }
50
+ .btn-ghost.btn-danger { color: var(--berdsk-color-danger); background: transparent; }
51
+ .btn-ghost.btn-success { color: var(--berdsk-color-success); background: transparent; }
52
+
53
+ .btn-ghost:hover { background: rgba(0,0,0,0.05); }
54
+
55
+ /* Link */
56
+ .btn-link { background: transparent; border: none; padding: 0; height: auto; text-decoration: underline; }
57
+ .btn-link.btn-primary { color: var(--berdsk-color-primary); }
58
+ .btn-link.btn-secondary { color: var(--berdsk-color-secondary); }
59
+ .btn-link.btn-danger { color: var(--berdsk-color-danger); }
60
+ .btn-link.btn-success { color: var(--berdsk-color-success); }
61
+
62
+ .btn-link:hover { opacity: 0.8; }
63
+
64
+ /* Rounded */
65
+ .btn-rounded-none { border-radius: var(--berdsk-rounded-none); }
66
+ .btn-rounded-xs { border-radius: var(--berdsk-rounded-xs); }
67
+ .btn-rounded-sm { border-radius: var(--berdsk-rounded-sm); }
68
+ .btn-rounded-md { border-radius: var(--berdsk-rounded-md); }
69
+ .btn-rounded-lg { border-radius: var(--berdsk-rounded-lg); }
70
+ .btn-rounded-full { border-radius: var(--berdsk-rounded-full); }
71
+
72
+ .btn-full-width { width: 100%; display: flex; }
73
+
74
+ .btn-icon-only { padding: 0; aspect-ratio: 1/1; width: auto; }
75
+ .btn-xs.btn-icon-only { width: 1.5rem; }
76
+ .btn-sm.btn-icon-only { width: 2rem; }
77
+ .btn-md.btn-icon-only { width: 2.5rem; }
78
+ .btn-lg.btn-icon-only { width: 3rem; }
79
+ .btn-xl.btn-icon-only { width: 3.5rem; }
80
+ .btn-2xl.btn-icon-only { width: 4rem; }
81
+ `},[o]),(0,L.jsx)(E.Provider,{value:{theme:o},children:r})},q=()=>a.useContext(E);0&&(module.exports={Button,Icon,ThemeProvider,defaultTheme,useTheme});
2
82
  //# 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 border: {\r\n color: string;\r\n size: string;\r\n radius: {\r\n none: string;\r\n xs: string;\r\n sm: string;\r\n md: string;\r\n lg: string;\r\n full: string;\r\n };\r\n };\r\n}\r\n\r\nexport const defaultTheme: ThemeConfig = {\r\n colors: {\r\n primary: \"#007bff\",\r\n secondary: \"#6c757d\",\r\n danger: \"#dc3545\",\r\n success: \"#28a745\",\r\n },\r\n border: {\r\n color: \"#dee2e6\",\r\n size: \"1px\",\r\n radius: {\r\n none: \"0\",\r\n xs: \"0.125rem\",\r\n sm: \"0.25rem\",\r\n md: \"0.375rem\",\r\n lg: \"0.5rem\",\r\n full: \"9999px\",\r\n },\r\n },\r\n};\r\n\r\ninterface ThemeContextType {\r\n theme: ThemeConfig;\r\n}\r\n\r\nconst ThemeContext = React.createContext<ThemeContextType>({\r\n theme: defaultTheme,\r\n});\r\n\r\nexport interface ThemeProviderProps {\r\n theme?: Partial<ThemeConfig>;\r\n children: React.ReactNode;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n theme,\r\n children,\r\n}) => {\r\n const mergedTheme = React.useMemo(() => {\r\n if (!theme) return defaultTheme;\r\n return {\r\n ...defaultTheme,\r\n ...theme,\r\n colors: { ...defaultTheme.colors, ...theme.colors },\r\n border: {\r\n ...defaultTheme.border,\r\n ...theme.border,\r\n radius: { ...defaultTheme.border.radius, ...theme.border?.radius },\r\n },\r\n };\r\n }, [theme]);\r\n\r\n React.useLayoutEffect(() => {\r\n const root = document.documentElement;\r\n \r\n // Injetar cores\r\n Object.entries(mergedTheme.colors).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-color-${key}`, value);\r\n });\r\n\r\n // Injetar borda\r\n root.style.setProperty(\"--berdsk-border-color\", mergedTheme.border.color);\r\n root.style.setProperty(\"--berdsk-border-size\", mergedTheme.border.size);\r\n\r\n // Injetar arredondamentos\r\n Object.entries(mergedTheme.border.radius).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-rounded-${key}`, value);\r\n });\r\n\r\n // Injetar estilos base para o botão funcionar \"out-of-the-box\"\r\n const styleId = \"berdsk-ui-theme-styles\";\r\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\r\n \r\n if (!styleElement) {\r\n styleElement = document.createElement(\"style\");\r\n styleElement.id = styleId;\r\n document.head.appendChild(styleElement);\r\n }\r\n\r\n styleElement.innerHTML = `\r\n :root {\r\n --berdsk-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\r\n }\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--berdsk-font-family);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border: var(--berdsk-border-size) solid transparent;\r\n text-decoration: none;\r\n gap: 0.5rem;\r\n }\r\n .btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n }\r\n \r\n /* Tamanhos */\r\n .btn-xs { padding: 0 0.5rem; height: 1.5rem; font-size: 0.75rem; }\r\n .btn-sm { padding: 0 0.75rem; height: 2rem; font-size: 0.875rem; }\r\n .btn-md { padding: 0 1rem; height: 2.5rem; font-size: 1rem; }\r\n .btn-lg { padding: 0 1.5rem; height: 3rem; font-size: 1.125rem; }\r\n .btn-xl { padding: 0 2rem; height: 3.5rem; font-size: 1.25rem; }\r\n .btn-2xl { padding: 0 2.5rem; height: 4rem; font-size: 1.5rem; }\r\n\r\n /* Cores e Variantes - Solid */\r\n .btn-solid.btn-primary { background-color: var(--berdsk-color-primary); color: white; }\r\n .btn-solid.btn-secondary { background-color: var(--berdsk-color-secondary); color: white; }\r\n .btn-solid.btn-danger { background-color: var(--berdsk-color-danger); color: white; }\r\n .btn-solid.btn-success { background-color: var(--berdsk-color-success); color: white; }\r\n \r\n .btn-solid:hover { filter: brightness(0.9); }\r\n\r\n /* Outlined */\r\n .btn-outlined { border-width: var(--berdsk-border-size); }\r\n .btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }\r\n .btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }\r\n .btn-outlined.btn-success { border-color: var(--berdsk-color-success); color: var(--berdsk-color-success); background: transparent; }\r\n \r\n .btn-outlined:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Ghost */\r\n .btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-ghost.btn-secondary { color: var(--berdsk-color-secondary); background: transparent; }\r\n .btn-ghost.btn-danger { color: var(--berdsk-color-danger); background: transparent; }\r\n .btn-ghost.btn-success { color: var(--berdsk-color-success); background: transparent; }\r\n \r\n .btn-ghost:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Link */\r\n .btn-link { background: transparent; border: none; padding: 0; height: auto; text-decoration: underline; }\r\n .btn-link.btn-primary { color: var(--berdsk-color-primary); }\r\n .btn-link.btn-secondary { color: var(--berdsk-color-secondary); }\r\n .btn-link.btn-danger { color: var(--berdsk-color-danger); }\r\n .btn-link.btn-success { color: var(--berdsk-color-success); }\r\n \r\n .btn-link:hover { opacity: 0.8; }\r\n\r\n /* Rounded */\r\n .btn-rounded-none { border-radius: var(--berdsk-rounded-none); }\r\n .btn-rounded-xs { border-radius: var(--berdsk-rounded-xs); }\r\n .btn-rounded-sm { border-radius: var(--berdsk-rounded-sm); }\r\n .btn-rounded-md { border-radius: var(--berdsk-rounded-md); }\r\n .btn-rounded-lg { border-radius: var(--berdsk-rounded-lg); }\r\n .btn-rounded-full { border-radius: var(--berdsk-rounded-full); }\r\n\r\n .btn-full-width { width: 100%; display: flex; }\r\n \r\n .btn-icon-only { padding: 0; aspect-ratio: 1/1; width: auto; }\r\n .btn-xs.btn-icon-only { width: 1.5rem; }\r\n .btn-sm.btn-icon-only { width: 2rem; }\r\n .btn-md.btn-icon-only { width: 2.5rem; }\r\n .btn-lg.btn-icon-only { width: 3rem; }\r\n .btn-xl.btn-icon-only { width: 3.5rem; }\r\n .btn-2xl.btn-icon-only { width: 4rem; }\r\n `;\r\n\r\n }, [mergedTheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ theme: mergedTheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport const useTheme = () => React.useContext(ThemeContext);\r\n"],"mappings":"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","names":["index_exports","__export","Button","Icon","ThemeProvider","defaultTheme","useTheme","__toCommonJS","React","import_jsx_runtime","CDN_URL","PRECONNECT_URL","loadCDN","preconnect","link","Icon","className","props","React","import_jsx_runtime","Button","children","variant","color","size","rounded","leftIcon","rightIcon","fullWidth","className","href","props","ref","variantClass","colorClass","sizeClass","roundedClass","combinedClasses","content","React","import_jsx_runtime","defaultTheme","ThemeContext","ThemeProvider","theme","children","mergedTheme","root","key","value","styleId","styleElement","useTheme"]}
package/dist/index.d.cts CHANGED
@@ -5,4 +5,48 @@ 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
+ border: {
29
+ color: string;
30
+ size: string;
31
+ radius: {
32
+ none: string;
33
+ xs: string;
34
+ sm: string;
35
+ md: string;
36
+ lg: string;
37
+ full: string;
38
+ };
39
+ };
40
+ }
41
+ declare const defaultTheme: ThemeConfig;
42
+ interface ThemeContextType {
43
+ theme: ThemeConfig;
44
+ }
45
+ interface ThemeProviderProps {
46
+ theme?: Partial<ThemeConfig>;
47
+ children: React.ReactNode;
48
+ }
49
+ declare const ThemeProvider: React.FC<ThemeProviderProps>;
50
+ declare const useTheme: () => ThemeContextType;
51
+
52
+ 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,48 @@ 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
+ border: {
29
+ color: string;
30
+ size: string;
31
+ radius: {
32
+ none: string;
33
+ xs: string;
34
+ sm: string;
35
+ md: string;
36
+ lg: string;
37
+ full: string;
38
+ };
39
+ };
40
+ }
41
+ declare const defaultTheme: ThemeConfig;
42
+ interface ThemeContextType {
43
+ theme: ThemeConfig;
44
+ }
45
+ interface ThemeProviderProps {
46
+ theme?: Partial<ThemeConfig>;
47
+ children: React.ReactNode;
48
+ }
49
+ declare const ThemeProvider: React.FC<ThemeProviderProps>;
50
+ declare const useTheme: () => ThemeContextType;
51
+
52
+ export { Button, type ButtonProps, Icon, type IconProps, type ThemeColors, type ThemeConfig, ThemeProvider, type ThemeProviderProps, defaultTheme, useTheme };
package/dist/index.js CHANGED
@@ -1,2 +1,82 @@
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 k from"react";import{jsx as w}from"react/jsx-runtime";var h="https://cdn.berdsk.com.br/berdsk-ui/icons/all.css",f="https://cdn.berdsk.com.br",L=()=>{if(typeof document>"u")return;if(!document.querySelector(`link[rel="preconnect"][href="${f}"]`)){let r=document.createElement("link");r.rel="preconnect",r.href=f,document.head.appendChild(r)}if(!document.querySelector(`link[href="${h}"]`)){let r=document.createElement("link");r.rel="stylesheet",r.href=h,document.head.appendChild(r)}},$=({className:e,...r})=>(k.useEffect(()=>{L()},[]),w("i",{className:`${e}`,...r}));import*as y from"react";import{Fragment as N,jsx as l,jsxs as P}from"react/jsx-runtime";var M=y.forwardRef(({children:e,variant:r="solid",color:t="primary",size:d="md",rounded:i="md",leftIcon:o,rightIcon:s,fullWidth:c=!1,className:x="",href:b,...m},u)=>{let T=`btn-${r}`,C=`btn-${t}`,R=`btn-${d}`,E=`btn-rounded-${i}`,p=["btn",T,C,R,E,c?"btn-full-width":"",!e&&(o||s)?"btn-icon-only":"",x].filter(Boolean).join(" "),g=P(N,{children:[o&&l("span",{className:"btn-icon-left",children:o}),e&&l("span",{className:"btn-content",children:e}),s&&l("span",{className:"btn-icon-right",children:s})]});return b?l("a",{href:b,className:p,ref:u,...m,children:g}):l("button",{className:p,ref:u,...m,children:g})});M.displayName="Button";import*as n from"react";import{jsx as H}from"react/jsx-runtime";var a={colors:{primary:"#007bff",secondary:"#6c757d",danger:"#dc3545",success:"#28a745"},border:{color:"#dee2e6",size:"1px",radius:{none:"0",xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",full:"9999px"}}},v=n.createContext({theme:a}),U=({theme:e,children:r})=>{let t=n.useMemo(()=>e?{...a,...e,colors:{...a.colors,...e.colors},border:{...a.border,...e.border,radius:{...a.border.radius,...e.border?.radius}}}:a,[e]);return n.useLayoutEffect(()=>{let d=document.documentElement;Object.entries(t.colors).forEach(([s,c])=>{d.style.setProperty(`--berdsk-color-${s}`,c)}),d.style.setProperty("--berdsk-border-color",t.border.color),d.style.setProperty("--berdsk-border-size",t.border.size),Object.entries(t.border.radius).forEach(([s,c])=>{d.style.setProperty(`--berdsk-rounded-${s}`,c)});let i="berdsk-ui-theme-styles",o=document.getElementById(i);o||(o=document.createElement("style"),o.id=i,document.head.appendChild(o)),o.innerHTML=`
2
+ :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: var(--berdsk-border-size) 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 0.5rem; height: 1.5rem; font-size: 0.75rem; }
24
+ .btn-sm { padding: 0 0.75rem; height: 2rem; font-size: 0.875rem; }
25
+ .btn-md { padding: 0 1rem; height: 2.5rem; font-size: 1rem; }
26
+ .btn-lg { padding: 0 1.5rem; height: 3rem; font-size: 1.125rem; }
27
+ .btn-xl { padding: 0 2rem; height: 3.5rem; font-size: 1.25rem; }
28
+ .btn-2xl { padding: 0 2.5rem; height: 4rem; font-size: 1.5rem; }
29
+
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 { border-width: var(--berdsk-border-size); }
40
+ .btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }
41
+ .btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }
42
+ .btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }
43
+ .btn-outlined.btn-success { border-color: var(--berdsk-color-success); color: var(--berdsk-color-success); background: transparent; }
44
+
45
+ .btn-outlined:hover { background: rgba(0,0,0,0.05); }
46
+
47
+ /* Ghost */
48
+ .btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }
49
+ .btn-ghost.btn-secondary { color: var(--berdsk-color-secondary); background: transparent; }
50
+ .btn-ghost.btn-danger { color: var(--berdsk-color-danger); background: transparent; }
51
+ .btn-ghost.btn-success { color: var(--berdsk-color-success); background: transparent; }
52
+
53
+ .btn-ghost:hover { background: rgba(0,0,0,0.05); }
54
+
55
+ /* Link */
56
+ .btn-link { background: transparent; border: none; padding: 0; height: auto; text-decoration: underline; }
57
+ .btn-link.btn-primary { color: var(--berdsk-color-primary); }
58
+ .btn-link.btn-secondary { color: var(--berdsk-color-secondary); }
59
+ .btn-link.btn-danger { color: var(--berdsk-color-danger); }
60
+ .btn-link.btn-success { color: var(--berdsk-color-success); }
61
+
62
+ .btn-link:hover { opacity: 0.8; }
63
+
64
+ /* Rounded */
65
+ .btn-rounded-none { border-radius: var(--berdsk-rounded-none); }
66
+ .btn-rounded-xs { border-radius: var(--berdsk-rounded-xs); }
67
+ .btn-rounded-sm { border-radius: var(--berdsk-rounded-sm); }
68
+ .btn-rounded-md { border-radius: var(--berdsk-rounded-md); }
69
+ .btn-rounded-lg { border-radius: var(--berdsk-rounded-lg); }
70
+ .btn-rounded-full { border-radius: var(--berdsk-rounded-full); }
71
+
72
+ .btn-full-width { width: 100%; display: flex; }
73
+
74
+ .btn-icon-only { padding: 0; aspect-ratio: 1/1; width: auto; }
75
+ .btn-xs.btn-icon-only { width: 1.5rem; }
76
+ .btn-sm.btn-icon-only { width: 2rem; }
77
+ .btn-md.btn-icon-only { width: 2.5rem; }
78
+ .btn-lg.btn-icon-only { width: 3rem; }
79
+ .btn-xl.btn-icon-only { width: 3.5rem; }
80
+ .btn-2xl.btn-icon-only { width: 4rem; }
81
+ `},[t]),H(v.Provider,{value:{theme:t},children:r})},W=()=>n.useContext(v);export{M as Button,$ as Icon,U as ThemeProvider,a as defaultTheme,W as useTheme};
2
82
  //# 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 border: {\r\n color: string;\r\n size: string;\r\n radius: {\r\n none: string;\r\n xs: string;\r\n sm: string;\r\n md: string;\r\n lg: string;\r\n full: string;\r\n };\r\n };\r\n}\r\n\r\nexport const defaultTheme: ThemeConfig = {\r\n colors: {\r\n primary: \"#007bff\",\r\n secondary: \"#6c757d\",\r\n danger: \"#dc3545\",\r\n success: \"#28a745\",\r\n },\r\n border: {\r\n color: \"#dee2e6\",\r\n size: \"1px\",\r\n radius: {\r\n none: \"0\",\r\n xs: \"0.125rem\",\r\n sm: \"0.25rem\",\r\n md: \"0.375rem\",\r\n lg: \"0.5rem\",\r\n full: \"9999px\",\r\n },\r\n },\r\n};\r\n\r\ninterface ThemeContextType {\r\n theme: ThemeConfig;\r\n}\r\n\r\nconst ThemeContext = React.createContext<ThemeContextType>({\r\n theme: defaultTheme,\r\n});\r\n\r\nexport interface ThemeProviderProps {\r\n theme?: Partial<ThemeConfig>;\r\n children: React.ReactNode;\r\n}\r\n\r\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\r\n theme,\r\n children,\r\n}) => {\r\n const mergedTheme = React.useMemo(() => {\r\n if (!theme) return defaultTheme;\r\n return {\r\n ...defaultTheme,\r\n ...theme,\r\n colors: { ...defaultTheme.colors, ...theme.colors },\r\n border: {\r\n ...defaultTheme.border,\r\n ...theme.border,\r\n radius: { ...defaultTheme.border.radius, ...theme.border?.radius },\r\n },\r\n };\r\n }, [theme]);\r\n\r\n React.useLayoutEffect(() => {\r\n const root = document.documentElement;\r\n \r\n // Injetar cores\r\n Object.entries(mergedTheme.colors).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-color-${key}`, value);\r\n });\r\n\r\n // Injetar borda\r\n root.style.setProperty(\"--berdsk-border-color\", mergedTheme.border.color);\r\n root.style.setProperty(\"--berdsk-border-size\", mergedTheme.border.size);\r\n\r\n // Injetar arredondamentos\r\n Object.entries(mergedTheme.border.radius).forEach(([key, value]) => {\r\n root.style.setProperty(`--berdsk-rounded-${key}`, value);\r\n });\r\n\r\n // Injetar estilos base para o botão funcionar \"out-of-the-box\"\r\n const styleId = \"berdsk-ui-theme-styles\";\r\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\r\n \r\n if (!styleElement) {\r\n styleElement = document.createElement(\"style\");\r\n styleElement.id = styleId;\r\n document.head.appendChild(styleElement);\r\n }\r\n\r\n styleElement.innerHTML = `\r\n :root {\r\n --berdsk-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\r\n }\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--berdsk-font-family);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border: var(--berdsk-border-size) solid transparent;\r\n text-decoration: none;\r\n gap: 0.5rem;\r\n }\r\n .btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n }\r\n \r\n /* Tamanhos */\r\n .btn-xs { padding: 0 0.5rem; height: 1.5rem; font-size: 0.75rem; }\r\n .btn-sm { padding: 0 0.75rem; height: 2rem; font-size: 0.875rem; }\r\n .btn-md { padding: 0 1rem; height: 2.5rem; font-size: 1rem; }\r\n .btn-lg { padding: 0 1.5rem; height: 3rem; font-size: 1.125rem; }\r\n .btn-xl { padding: 0 2rem; height: 3.5rem; font-size: 1.25rem; }\r\n .btn-2xl { padding: 0 2.5rem; height: 4rem; font-size: 1.5rem; }\r\n\r\n /* Cores e Variantes - Solid */\r\n .btn-solid.btn-primary { background-color: var(--berdsk-color-primary); color: white; }\r\n .btn-solid.btn-secondary { background-color: var(--berdsk-color-secondary); color: white; }\r\n .btn-solid.btn-danger { background-color: var(--berdsk-color-danger); color: white; }\r\n .btn-solid.btn-success { background-color: var(--berdsk-color-success); color: white; }\r\n \r\n .btn-solid:hover { filter: brightness(0.9); }\r\n\r\n /* Outlined */\r\n .btn-outlined { border-width: var(--berdsk-border-size); }\r\n .btn-outlined.btn-primary { border-color: var(--berdsk-color-primary); color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-outlined.btn-secondary { border-color: var(--berdsk-color-secondary); color: var(--berdsk-color-secondary); background: transparent; }\r\n .btn-outlined.btn-danger { border-color: var(--berdsk-color-danger); color: var(--berdsk-color-danger); background: transparent; }\r\n .btn-outlined.btn-success { border-color: var(--berdsk-color-success); color: var(--berdsk-color-success); background: transparent; }\r\n \r\n .btn-outlined:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Ghost */\r\n .btn-ghost.btn-primary { color: var(--berdsk-color-primary); background: transparent; }\r\n .btn-ghost.btn-secondary { color: var(--berdsk-color-secondary); background: transparent; }\r\n .btn-ghost.btn-danger { color: var(--berdsk-color-danger); background: transparent; }\r\n .btn-ghost.btn-success { color: var(--berdsk-color-success); background: transparent; }\r\n \r\n .btn-ghost:hover { background: rgba(0,0,0,0.05); }\r\n\r\n /* Link */\r\n .btn-link { background: transparent; border: none; padding: 0; height: auto; text-decoration: underline; }\r\n .btn-link.btn-primary { color: var(--berdsk-color-primary); }\r\n .btn-link.btn-secondary { color: var(--berdsk-color-secondary); }\r\n .btn-link.btn-danger { color: var(--berdsk-color-danger); }\r\n .btn-link.btn-success { color: var(--berdsk-color-success); }\r\n \r\n .btn-link:hover { opacity: 0.8; }\r\n\r\n /* Rounded */\r\n .btn-rounded-none { border-radius: var(--berdsk-rounded-none); }\r\n .btn-rounded-xs { border-radius: var(--berdsk-rounded-xs); }\r\n .btn-rounded-sm { border-radius: var(--berdsk-rounded-sm); }\r\n .btn-rounded-md { border-radius: var(--berdsk-rounded-md); }\r\n .btn-rounded-lg { border-radius: var(--berdsk-rounded-lg); }\r\n .btn-rounded-full { border-radius: var(--berdsk-rounded-full); }\r\n\r\n .btn-full-width { width: 100%; display: flex; }\r\n \r\n .btn-icon-only { padding: 0; aspect-ratio: 1/1; width: auto; }\r\n .btn-xs.btn-icon-only { width: 1.5rem; }\r\n .btn-sm.btn-icon-only { width: 2rem; }\r\n .btn-md.btn-icon-only { width: 2.5rem; }\r\n .btn-lg.btn-icon-only { width: 3rem; }\r\n .btn-xl.btn-icon-only { width: 3.5rem; }\r\n .btn-2xl.btn-icon-only { width: 4rem; }\r\n `;\r\n\r\n }, [mergedTheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ theme: mergedTheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport const useTheme = () => React.useContext(ThemeContext);\r\n"],"mappings":"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","names":["React","jsx","CDN_URL","PRECONNECT_URL","loadCDN","preconnect","link","Icon","className","props","React","Fragment","jsx","jsxs","Button","children","variant","color","size","rounded","leftIcon","rightIcon","fullWidth","className","href","props","ref","variantClass","colorClass","sizeClass","roundedClass","combinedClasses","content","React","jsx","defaultTheme","ThemeContext","ThemeProvider","theme","children","mergedTheme","root","key","value","styleId","styleElement","useTheme"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@berdsk/ui",
3
- "version": "0.0.2",
3
+ "version": "0.1.1",
4
4
  "description": "Biblioteca de componentes UI profissional da Berdsk",
5
5
  "author": "Berdsk",
6
6
  "publishConfig": {