rharuow-ds 1.0.0 → 1.0.3

package/README.md

@@ -0,0 +1,63 @@
+# rharuow-ds
+
+Design System em React com integração a React Hook Form, Tailwind CSS e shadcn/ui.
+
+## Instalação
+
+Adicione o pacote ao seu projeto:
+
+```bash
+npm install rharuow-ds
+```
+
+> **Atenção:**  
+> Não é necessário instalar ou configurar Tailwind CSS no seu projeto consumidor para usar os estilos do rharuow-ds. O CSS já vem pronto no pacote!
+
+---
+
+## Como usar
+
+1. **Importe o CSS do design system**  
+   No seu arquivo de entrada (ex: `src/main.tsx`, `src/index.tsx` ou `_app.tsx` no Next.js):
+
+   ```js
+   import "rharuow-ds/dist/styles.css";
+   ```
+
+2. **Use os componentes normalmente**
+
+   ```tsx
+   import { Button, Input } from "rharuow-ds";
+
+   function App() {
+     return (
+       <div>
+         <Input label="E-mail" name="email" />
+         <Button variant="default">Enviar</Button>
+       </div>
+     );
+   }
+   ```
+
+---
+
+## Documentação
+
+Acesse a documentação interativa dos componentes em [GitHub Pages](#) _(link será atualizado após o deploy)_.
+
+---
+
+## Desenvolvimento
+
+Para contribuir ou rodar localmente:
+
+```bash
+git clone https://github.com/seu-usuario/rharuow-ds.git
+cd rharuow-ds
+npm install
+npm run storybook
+```
+
+---
+
+Desenvolvido por Harysson.

package/dist/rharuow-ds.cjs.js

@@ -19,4 +19,4 @@
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,l,i,g,i),X[i+l]=!0)}if(i=null,u!==void 0&&(t(u),i=""+u),d(n)&&(t(n.key),i=""+n.key),"key"in n){u={};for(var U in n)U!=="key"&&(u[U]=n[U])}else u=n;return i&&m(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),f(e,i,b,E,s(),u,L,M)}function j(e){typeof e=="object"&&e!==null&&e.$$typeof===v&&e._store&&(e._store.validated=1)}var _=R,v=Symbol.for("react.transitional.element"),A=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),I=Symbol.for("react.strict_mode"),w=Symbol.for("react.profiler"),D=Symbol.for("react.consumer"),P=Symbol.for("react.context"),N=Symbol.for("react.forward_ref"),C=Symbol.for("react.suspense"),O=Symbol.for("react.suspense_list"),se=Symbol.for("react.memo"),z=Symbol.for("react.lazy"),ue=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),W=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,q=Object.prototype.hasOwnProperty,le=Array.isArray,$=console.createTask?console.createTask:function(){return null};_={"react-stack-bottom-frame":function(e){return e()}};var J,V={},G=_["react-stack-bottom-frame"].bind(_,c)(),B=$(a(c)),X={};h.Fragment=y,h.jsx=function(e,n,u,l,E){var b=1e4>W.recentlyCreatedOwnerStacks++;return x(e,n,u,!1,l,E,b?Error("react-stack-top-frame"):G,b?$(a(e)):B)},h.jsxs=function(e,n,u,l,E){var b=1e4>W.recentlyCreatedOwnerStacks++;return x(e,n,u,!0,l,E,b?Error("react-stack-top-frame"):G,b?$(a(e)):B)}}()),h}var Q;function be(){return Q||(Q=1,process.env.NODE_ENV==="production"?F.exports=de():F.exports=me()),F.exports}var p=be();function re(r){var o,t,a="";if(typeof r=="string"||typeof r=="number")a+=r;else if(typeof r=="object")if(Array.isArray(r)){var s=r.length;for(o=0;o<s;o++)r[o]&&(t=re(r[o]))&&(a&&(a+=" "),a+=t)}else for(t in r)r[t]&&(a&&(a+=" "),a+=t);return a}function ve(){for(var r,o,t=0,a="",s=arguments.length;t<s;t++)(r=arguments[t])&&(o=re(r))&&(a&&(a+=" "),a+=o);return a}function S(...r){return ve(...r)}const Ee=({children:r,variant:o="default",className:t="",...a})=>{const s="px-4 py-2 rounded font-medium transition",c={default:"bg-blue-600 text-white hover:bg-blue-700",outline:"border border-blue-600 text-blue-600 bg-white hover:bg-blue-50"};return p.jsx("button",{className:S(s,c[o],t),...a,children:r})};var _e=r=>r instanceof Date,te=r=>r==null;const pe=r=>typeof r=="object";var Re=r=>!te(r)&&!Array.isArray(r)&&pe(r)&&!_e(r),xe=r=>/^\w*$/.test(r),K=r=>r===void 0,ge=r=>Array.isArray(r)?r.filter(Boolean):[],Te=r=>ge(r.replace(/["|']|\]/g,"").split(/\.|\[/)),ee=(r,o,t)=>{if(!o||!Re(r))return t;const a=(xe(o)?[o]:Te(o)).reduce((s,c)=>te(s)?s:s[c],r);return K(a)||a===r?K(r[o])?t:r[o]:a};const ne=R.createContext(null);ne.displayName="HookFormContext";const ae=()=>R.useContext(ne),ye=typeof window<"u"?Y.useLayoutEffect:Y.useEffect;var Oe=r=>typeof r=="string",ke=(r,o,t,a,s)=>Oe(r)?ee(t,r,s):Array.isArray(r)?r.map(c=>ee(t,c)):t;function he(r){const o=ae(),{control:t=o.control,name:a,defaultValue:s,disabled:c,exact:d}=r||{},m=R.useRef(s),[T,f]=R.useState(t._getWatch(a,m.current));return ye(()=>t._subscribe({name:a,formState:{values:!0},exact:d,callback:x=>!c&&f(ke(a,t._names,x.values||t._formValues,!1,m.current))}),[a,t,c,d]),R.useEffect(()=>t._removeUnmounted()),T}const oe=Y.forwardRef(({className:r,type:o="text",label:t,onFocus:a,onBlur:s,Icon:c,iconClassName:d,iconAction:m,containerClassName:T,...f},x)=>{var P,N,C;const[j,_]=Y.useState(!1),v=ae(),A=v==null?void 0:v.control,y=A&&f.name?he({control:A,name:String(f.name)}):void 0,I=f.value??y??"",w=(C=(N=(P=v==null?void 0:v.formState)==null?void 0:P.errors)==null?void 0:N[f.name])==null?void 0:C.message,D=j||!!I;return p.jsxs("div",{className:S("relative",T),children:[p.jsx("input",{id:f.id||f.name,type:o,className:S("peer flex h-12 w-full border border-input rounded-md bg-transparent px-3 pt-6 pb-2 text-sm text-white placeholder-transparent transition focus:outline-none focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50",r),onFocus:O=>{_(!0),a&&a(O)},onBlur:O=>{_(!1),s&&s(O)},ref:x,...f}),t&&p.jsx("label",{htmlFor:f.id||f.name,className:S("absolute left-3 top-3 z-10 origin-[0] cursor-text select-none text-sm text-gray-400 transition-all duration-200",D?"scale-90 -translate-y-3 text-xs text-blue-400":"scale-100 translate-y-0"),children:t}),c&&p.jsx("div",{className:S("absolute top-1/2 right-3 -translate-y-1/2 text-white",d),onClick:m,children:p.jsx(c,{})}),w&&p.jsx("span",{className:"text-red-500 text-xs mt-1 block",children:w})]})});oe.displayName="Input";exports.Button=Ee;exports.Input=oe;
+  <%s key={someKey} {...props} />`,l,i,g,i),X[i+l]=!0)}if(i=null,u!==void 0&&(t(u),i=""+u),d(n)&&(t(n.key),i=""+n.key),"key"in n){u={};for(var U in n)U!=="key"&&(u[U]=n[U])}else u=n;return i&&m(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),f(e,i,b,E,s(),u,L,M)}function j(e){typeof e=="object"&&e!==null&&e.$$typeof===v&&e._store&&(e._store.validated=1)}var _=R,v=Symbol.for("react.transitional.element"),A=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),I=Symbol.for("react.strict_mode"),w=Symbol.for("react.profiler"),D=Symbol.for("react.consumer"),P=Symbol.for("react.context"),N=Symbol.for("react.forward_ref"),C=Symbol.for("react.suspense"),O=Symbol.for("react.suspense_list"),se=Symbol.for("react.memo"),z=Symbol.for("react.lazy"),ue=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),W=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,q=Object.prototype.hasOwnProperty,le=Array.isArray,$=console.createTask?console.createTask:function(){return null};_={"react-stack-bottom-frame":function(e){return e()}};var J,V={},G=_["react-stack-bottom-frame"].bind(_,c)(),B=$(a(c)),X={};h.Fragment=y,h.jsx=function(e,n,u,l,E){var b=1e4>W.recentlyCreatedOwnerStacks++;return x(e,n,u,!1,l,E,b?Error("react-stack-top-frame"):G,b?$(a(e)):B)},h.jsxs=function(e,n,u,l,E){var b=1e4>W.recentlyCreatedOwnerStacks++;return x(e,n,u,!0,l,E,b?Error("react-stack-top-frame"):G,b?$(a(e)):B)}}()),h}var Q;function be(){return Q||(Q=1,process.env.NODE_ENV==="production"?F.exports=de():F.exports=me()),F.exports}var p=be();function re(r){var o,t,a="";if(typeof r=="string"||typeof r=="number")a+=r;else if(typeof r=="object")if(Array.isArray(r)){var s=r.length;for(o=0;o<s;o++)r[o]&&(t=re(r[o]))&&(a&&(a+=" "),a+=t)}else for(t in r)r[t]&&(a&&(a+=" "),a+=t);return a}function ve(){for(var r,o,t=0,a="",s=arguments.length;t<s;t++)(r=arguments[t])&&(o=re(r))&&(a&&(a+=" "),a+=o);return a}function S(...r){return ve(...r)}const Ee=({children:r,variant:o="default",className:t="",...a})=>{const s="px-4 py-2 rounded font-medium transition text-red-500",c={default:"bg-blue-600 text-white hover:bg-blue-700",outline:"border border-blue-600 text-blue-600 bg-white hover:bg-blue-50"};return p.jsx("button",{className:S(s,c[o],t),...a,children:r})};var _e=r=>r instanceof Date,te=r=>r==null;const pe=r=>typeof r=="object";var Re=r=>!te(r)&&!Array.isArray(r)&&pe(r)&&!_e(r),xe=r=>/^\w*$/.test(r),K=r=>r===void 0,ge=r=>Array.isArray(r)?r.filter(Boolean):[],Te=r=>ge(r.replace(/["|']|\]/g,"").split(/\.|\[/)),ee=(r,o,t)=>{if(!o||!Re(r))return t;const a=(xe(o)?[o]:Te(o)).reduce((s,c)=>te(s)?s:s[c],r);return K(a)||a===r?K(r[o])?t:r[o]:a};const ne=R.createContext(null);ne.displayName="HookFormContext";const ae=()=>R.useContext(ne),ye=typeof window<"u"?Y.useLayoutEffect:Y.useEffect;var Oe=r=>typeof r=="string",ke=(r,o,t,a,s)=>Oe(r)?ee(t,r,s):Array.isArray(r)?r.map(c=>ee(t,c)):t;function he(r){const o=ae(),{control:t=o.control,name:a,defaultValue:s,disabled:c,exact:d}=r||{},m=R.useRef(s),[T,f]=R.useState(t._getWatch(a,m.current));return ye(()=>t._subscribe({name:a,formState:{values:!0},exact:d,callback:x=>!c&&f(ke(a,t._names,x.values||t._formValues,!1,m.current))}),[a,t,c,d]),R.useEffect(()=>t._removeUnmounted()),T}const oe=Y.forwardRef(({className:r,type:o="text",label:t,onFocus:a,onBlur:s,Icon:c,iconClassName:d,iconAction:m,containerClassName:T,...f},x)=>{var P,N,C;const[j,_]=Y.useState(!1),v=ae(),A=v==null?void 0:v.control,y=A&&f.name?he({control:A,name:String(f.name)}):void 0,I=f.value??y??"",w=(C=(N=(P=v==null?void 0:v.formState)==null?void 0:P.errors)==null?void 0:N[f.name])==null?void 0:C.message,D=j||!!I;return p.jsxs("div",{className:S("relative",T),children:[p.jsx("input",{id:f.id||f.name,type:o,className:S("peer flex h-12 w-full border border-input rounded-md bg-transparent px-3 pt-6 pb-2 text-sm text-white placeholder-transparent transition focus:outline-none focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50",r),onFocus:O=>{_(!0),a&&a(O)},onBlur:O=>{_(!1),s&&s(O)},ref:x,...f}),t&&p.jsx("label",{htmlFor:f.id||f.name,className:S("absolute left-3 top-3 z-10 origin-[0] cursor-text select-none text-sm text-gray-400 transition-all duration-200",D?"scale-90 -translate-y-3 text-xs text-blue-400":"scale-100 translate-y-0"),children:t}),c&&p.jsx("div",{className:S("absolute top-1/2 right-3 -translate-y-1/2 text-white",d),onClick:m,children:p.jsx(c,{})}),w&&p.jsx("span",{className:"text-red-500 text-xs mt-1 block",children:w})]})});oe.displayName="Input";exports.Button=Ee;exports.Input=oe;

package/dist/rharuow-ds.es.js

@@ -302,7 +302,7 @@ const Ae = ({
   className: n = "",
   ...a
 }) => {
-  const o = "px-4 py-2 rounded font-medium transition", l = {
+  const o = "px-4 py-2 rounded font-medium transition text-red-500", l = {
     default: "bg-blue-600 text-white hover:bg-blue-700",
     outline: "border border-blue-600 text-blue-600 bg-white hover:bg-blue-50"
   };

package/dist/styles.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.relative{position:relative}.left-3{left:.75rem}.right-3{right:.75rem}.top-1\/2{top:50%}.top-3{top:.75rem}.z-10{z-index:10}.mt-1{margin-top:.25rem}.block{display:block}.flex{display:flex}.h-12{height:3rem}.w-full{width:100%}.origin-\[0\]{transform-origin:0}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.-translate-y-3{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-3{--tw-translate-y:-0.75rem}.translate-y-0{--tw-translate-y:0px}.scale-100,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-90{--tw-scale-x:.9;--tw-scale-y:.9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem}.pb-2,.py-2{padding-bottom:.5rem}.pt-6{padding-top:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.placeholder-transparent::-moz-placeholder{color:transparent}.placeholder-transparent::placeholder{color:transparent}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}

package/package.json

@@ -1,22 +1,36 @@
 {
   "name": "rharuow-ds",
-  "version": "1.0.0",
-  "main": "index.js",
+  "version": "1.0.3",
+  "main": "dist/rharuow-ds.cjs.js",
+  "module": "dist/rharuow-ds.es.js",
+  "types": "dist/types/src/components/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/rharuow-ds.es.js",
+      "require": "./dist/rharuow-ds.cjs.js",
+      "types": "./dist/types/src/components/index.d.ts"
+    },
+    "./dist/styles.css": "./dist/styles.css"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "vite build && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "build:css": "npx tailwindcss -i ./src/styles/ds.css -o ./dist/styles.css --minify",
+    "build": "vite build && tsc --emitDeclarationOnly --declaration --declarationDir dist/types && npm run build:css",
     "storybook": "storybook dev -p 6006",
+    "deploy-storybook": "npx gh-pages -d storybook-static",
     "build-storybook": "storybook build"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "description": "",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.59.0"
+  },
   "dependencies": {
     "clsx": "^2.1.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-hook-form": "^7.59.0",
     "shadcn-ui": "^0.9.5"
   },
   "devDependencies": {
@@ -24,15 +38,13 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.6.0",
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.6",
+    "gh-pages": "^6.3.0",
     "storybook": "^9.0.14",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.8.3"
   },
   "files": [
     "dist",
-    "src",
     "package.json",
     "README.md"
   ]

package/src/components/Button.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { cn } from "../lib/utils";
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "outline";
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  children,
-  variant = "default",
-  className = "",
-  ...props
-}) => {
-  const base = "px-4 py-2 rounded font-medium transition";
-  const variants = {
-    default: "bg-blue-600 text-white hover:bg-blue-700",
-    outline: "border border-blue-600 text-blue-600 bg-white hover:bg-blue-50",
-  };
-  return (
-    <button className={cn(base, variants[variant], className)} {...props}>
-      {children}
-    </button>
-  );
-};

package/src/components/Input.tsx

@@ -1,104 +0,0 @@
-"use client";
-import * as React from "react";
-
-import { cn } from "../lib/utils";
-import { useFormContext, useWatch } from "react-hook-form";
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-export interface CustomProps {
-  label?: string;
-  Icon?: React.ElementType;
-  iconClassName?: string;
-  containerClassName?: string;
-  iconAction?: React.MouseEventHandler<HTMLDivElement>;
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps & CustomProps>(
-  (
-    {
-      className,
-      type = "text",
-      label,
-      onFocus,
-      onBlur,
-      Icon,
-      iconClassName,
-      iconAction,
-      containerClassName,
-      ...props
-    },
-    ref
-  ) => {
-    const [focused, setFocused] = React.useState(false);
-
-    const form = useFormContext();
-    const control = form?.control;
-    const valueWatch =
-      control && props.name
-        ? useWatch({ control, name: String(props.name) })
-        : undefined;
-
-    const value = props.value ?? valueWatch ?? "";
-    const error = form?.formState?.errors?.[props.name as string]?.message;
-
-    // Floating label: label sobe se input está focado ou tem valor
-    const isFloating = focused || !!value;
-
-    return (
-      <div className={cn("relative", containerClassName)}>
-        <input
-          id={props.id || props.name}
-          type={type}
-          className={cn(
-            "peer flex h-12 w-full border border-input rounded-md bg-transparent px-3 pt-6 pb-2 text-sm text-white placeholder-transparent transition focus:outline-none focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50",
-            className
-          )}
-          onFocus={(event) => {
-            setFocused(true);
-            onFocus && onFocus(event);
-          }}
-          onBlur={(event) => {
-            setFocused(false);
-            onBlur && onBlur(event);
-          }}
-          ref={ref}
-          {...props}
-        />
-        {label && (
-          <label
-            htmlFor={props.id || props.name}
-            className={cn(
-              "absolute left-3 top-3 z-10 origin-[0] cursor-text select-none text-sm text-gray-400 transition-all duration-200",
-              isFloating
-                ? "scale-90 -translate-y-3 text-xs text-blue-400"
-                : "scale-100 translate-y-0"
-            )}
-          >
-            {label}
-          </label>
-        )}
-        {Icon && (
-          <div
-            className={cn(
-              "absolute top-1/2 right-3 -translate-y-1/2 text-white",
-              iconClassName
-            )}
-            onClick={iconAction}
-          >
-            <Icon />
-          </div>
-        )}
-        {error && (
-          <span className="text-red-500 text-xs mt-1 block">
-            {error as string}
-          </span>
-        )}
-      </div>
-    );
-  }
-);
-Input.displayName = "Input";
-
-export { Input };

package/src/components/index.ts

@@ -1,2 +0,0 @@
-export * from "./Button";
-export * from "./Input";

package/src/lib/utils.ts

@@ -1,5 +0,0 @@
-import clsx, { ClassValue } from "clsx";
-
-export function cn(...inputs: ClassValue[]) {
-  return clsx(...inputs);
-}

package/src/stories/Button.stories.tsx

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "../components/Button";
-
-const meta: Meta<typeof Button> = {
-  title: "Components/Button",
-  component: Button,
-  tags: ["autodocs"],
-};
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {
-  args: {
-    children: "Botão padrão",
-    variant: "default",
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    children: "Botão outline",
-    variant: "outline",
-  },
-};

package/src/stories/Input.stories.tsx

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Input } from "../components/Input";
-import { FormProvider, useForm } from "react-hook-form";
-
-const meta: Meta<typeof Input> = {
-  title: "Components/Input",
-  component: Input,
-  tags: ["autodocs"],
-};
-export default meta;
-
-type Story = StoryObj<typeof Input>;
-
-const Template = (args: any) => {
-  const methods = useForm();
-  return (
-    <FormProvider {...methods}>
-      <Input {...args} name="email" />
-    </FormProvider>
-  );
-};
-
-export const Default: Story = {
-  render: Template,
-  args: {
-    label: "E-mail",
-    placeholder: "Digite seu e-mail",
-  },
-};

package/src/styles/tailwind.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;