luna-components-library 1.1.6 → 1.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -7,6 +7,7 @@ A modern React component library built with TypeScript and Vite, designed for re
|
|
|
7
7
|
- 🚀 **Built with Vite** - Fast development and optimized builds
|
|
8
8
|
- 📝 **TypeScript Support** - Full type safety and IntelliSense
|
|
9
9
|
- 🎨 **Modern Components** - Clean, accessible, and customizable UI components
|
|
10
|
+
- 🎯 **Tailwind CSS Styled** - Components use Tailwind CSS utility classes for styling
|
|
10
11
|
- 📦 **Tree-shakable** - Only bundle what you use
|
|
11
12
|
- 🔧 **Multiple Formats** - ES modules and UMD bundles
|
|
12
13
|
- 📚 **Type Declarations** - Complete TypeScript definitions included
|
|
@@ -21,6 +22,25 @@ yarn add luna-components-library
|
|
|
21
22
|
pnpm add luna-components-library
|
|
22
23
|
```
|
|
23
24
|
|
|
25
|
+
**⚠️ Important:** This library uses **Tailwind CSS** for styling. Make sure you have Tailwind CSS configured in your project:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install tailwindcss
|
|
29
|
+
npx tailwindcss init -p
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Then add the library's components to your `tailwind.config.js`:
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
module.exports = {
|
|
36
|
+
content: [
|
|
37
|
+
"./src/**/*.{js,jsx,ts,tsx}",
|
|
38
|
+
"./node_modules/luna-components-library/dist/**/*.{js,ts,jsx,tsx}"
|
|
39
|
+
],
|
|
40
|
+
// ... rest of your config
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
24
44
|
## 🚀 Quick Start
|
|
25
45
|
|
|
26
46
|
```jsx
|
|
@@ -205,6 +225,9 @@ The library is configured with:
|
|
|
205
225
|
- `vite-plugin-dts` - TypeScript declaration generation
|
|
206
226
|
- `rimraf` - Cross-platform file removal
|
|
207
227
|
|
|
228
|
+
### Styling
|
|
229
|
+
This library is built with **Tailwind CSS** utility classes. Components use predefined Tailwind classes for consistent styling and are fully customizable through the `className` prop.
|
|
230
|
+
|
|
208
231
|
## 🤝 Contributing
|
|
209
232
|
|
|
210
233
|
1. Fork the repository
|
|
@@ -39,7 +39,7 @@ var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((expor
|
|
|
39
39
|
var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
|
|
40
40
|
module.exports = require_react_jsx_runtime_production();
|
|
41
41
|
})))();
|
|
42
|
-
var Button = ({ children, variant = "primary", size = "sm", onClick = () =>
|
|
42
|
+
var Button = ({ children, variant = "primary", size = "sm", onClick = () => void 0, disabled = false, className = "" }) => {
|
|
43
43
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
44
44
|
className: `
|
|
45
45
|
font-medium rounded-lg transition-colors focus:outline-none focus:ring-2
|
|
@@ -92,12 +92,26 @@ var Card = ({ children, title, className = "", padding = "md", shadow = "md" })
|
|
|
92
92
|
};
|
|
93
93
|
//#endregion
|
|
94
94
|
//#region src/components/Anchor.tsx
|
|
95
|
-
var Anchor = ({
|
|
95
|
+
var Anchor = ({ children = "Pablo Andrey Chacon Luna", variant = "primary", size = "sm", href = "https://andreychaconresumereact.netlify.app/", className }) => {
|
|
96
96
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
|
|
97
|
-
href
|
|
97
|
+
href,
|
|
98
98
|
target: "_blank",
|
|
99
99
|
rel: "noopener noreferrer",
|
|
100
|
-
|
|
100
|
+
className: `
|
|
101
|
+
font-medium rounded-lg transition-colors focus:outline-none focus:ring-2
|
|
102
|
+
${{
|
|
103
|
+
primary: "bg-blue-600 text-white hover:bg-blue-700",
|
|
104
|
+
secondary: "bg-gray-600 text-white hover:bg-gray-700",
|
|
105
|
+
outline: "border border-gray-300 text-gray-700 hover:bg-gray-50"
|
|
106
|
+
}[variant]}
|
|
107
|
+
${{
|
|
108
|
+
sm: "px-3 py-1.5 text-sm",
|
|
109
|
+
md: "px-4 py-2 text-base",
|
|
110
|
+
lg: "px-6 py-3 text-lg"
|
|
111
|
+
}[size]}
|
|
112
|
+
${className}
|
|
113
|
+
`.trim(),
|
|
114
|
+
children
|
|
101
115
|
});
|
|
102
116
|
};
|
|
103
117
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"luna-components-library.js","names":[],"sources":["../node_modules/react/cjs/react-jsx-runtime.production.js","../node_modules/react/jsx-runtime.js","../src/components/Button.tsx","../src/components/Card.tsx","../src/components/Anchor.tsx"],"sourcesContent":["/**\n * @license React\n * react-jsx-runtime.production.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\nvar REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\");\nfunction jsxProd(type, config, maybeKey) {\n var key = null;\n void 0 !== maybeKey && (key = \"\" + maybeKey);\n void 0 !== config.key && (key = \"\" + config.key);\n if (\"key\" in config) {\n maybeKey = {};\n for (var propName in config)\n \"key\" !== propName && (maybeKey[propName] = config[propName]);\n } else maybeKey = config;\n config = maybeKey.ref;\n return {\n $$typeof: REACT_ELEMENT_TYPE,\n type: type,\n key: key,\n ref: void 0 !== config ? config : null,\n props: maybeKey\n };\n}\nexports.Fragment = REACT_FRAGMENT_TYPE;\nexports.jsx = jsxProd;\nexports.jsxs = jsxProd;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-jsx-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n","import React from 'react';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'sm' | 'md' | 'lg';\n onClick?: () => void;\n disabled?: boolean;\n className?: string;\n}\n\n{/* onCLick default should open window.open('https://andreychaconresumereact.netlify.app/', '_blank') */ }\n\nconst Button = ({\n children,\n variant = 'primary',\n size = 'sm',\n onClick = ()
|
|
1
|
+
{"version":3,"file":"luna-components-library.js","names":[],"sources":["../node_modules/react/cjs/react-jsx-runtime.production.js","../node_modules/react/jsx-runtime.js","../src/components/Button.tsx","../src/components/Card.tsx","../src/components/Anchor.tsx"],"sourcesContent":["/**\n * @license React\n * react-jsx-runtime.production.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\nvar REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\");\nfunction jsxProd(type, config, maybeKey) {\n var key = null;\n void 0 !== maybeKey && (key = \"\" + maybeKey);\n void 0 !== config.key && (key = \"\" + config.key);\n if (\"key\" in config) {\n maybeKey = {};\n for (var propName in config)\n \"key\" !== propName && (maybeKey[propName] = config[propName]);\n } else maybeKey = config;\n config = maybeKey.ref;\n return {\n $$typeof: REACT_ELEMENT_TYPE,\n type: type,\n key: key,\n ref: void 0 !== config ? config : null,\n props: maybeKey\n };\n}\nexports.Fragment = REACT_FRAGMENT_TYPE;\nexports.jsx = jsxProd;\nexports.jsxs = jsxProd;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-jsx-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n","import React from 'react';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'sm' | 'md' | 'lg';\n onClick?: () => void;\n disabled?: boolean;\n className?: string;\n}\n\n{/* onCLick default should open window.open('https://andreychaconresumereact.netlify.app/', '_blank') */ }\n\nconst Button = ({\n children,\n variant = 'primary',\n size = 'sm',\n onClick = () =>\n void 0,\n disabled = false,\n className = '',\n}: ButtonProps) => {\n const baseClasses = 'font-medium rounded-lg transition-colors focus:outline-none focus:ring-2';\n\n const variantClasses = {\n primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',\n secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',\n outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500',\n };\n\n const sizeClasses = {\n sm: 'px-3 py-1.5 text-sm',\n md: 'px-4 py-2 text-base',\n lg: 'px-6 py-3 text-lg',\n };\n\n const classes = `\n ${baseClasses}\n ${variantClasses[variant]}\n ${sizeClasses[size]}\n ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n ${className}\n `.trim();\n\n return (\n <button\n className={classes}\n onClick={onClick}\n disabled={disabled}\n >\n {children}\n </button>\n );\n};\n\nexport default Button;\n","import React from 'react';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n className?: string;\n padding?: 'none' | 'sm' | 'md' | 'lg';\n shadow?: 'none' | 'sm' | 'md' | 'lg';\n}\n\nconst Card = ({\n children,\n title,\n className = '',\n padding = 'md',\n shadow = 'md',\n}: CardProps) => {\n const baseClasses = 'bg-white rounded-lg border border-gray-200';\n\n const paddingClasses = {\n none: '',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-6',\n };\n\n const shadowClasses = {\n none: '',\n sm: 'shadow-sm',\n md: 'shadow-md',\n lg: 'shadow-lg',\n };\n\n const classes = `\n ${baseClasses}\n ${paddingClasses[padding]}\n ${shadowClasses[shadow]}\n ${className}\n `.trim();\n\n return (\n <div className={classes}>\n {title && (\n <div className=\"mb-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">{title}</h3>\n </div>\n )}\n {children}\n </div>\n );\n};\n\nexport default Card;\n","type AnchorProps = {\r\n children?: React.ReactNode;\r\n variant?: 'primary' | 'secondary' | 'outline';\r\n size?: 'sm' | 'md' | 'lg';\r\n href?: string;\r\n className?: string;\r\n}\r\n\r\nconst Anchor = ({\r\n children = \"Pablo Andrey Chacon Luna\",\r\n variant = 'primary',\r\n size = 'sm',\r\n href = 'https://andreychaconresumereact.netlify.app/',\r\n className,\r\n}: AnchorProps) => {\r\n\r\n const baseClasses = 'font-medium rounded-lg transition-colors focus:outline-none focus:ring-2';\r\n\r\n const variantClasses = {\r\n primary: 'bg-blue-600 text-white hover:bg-blue-700',\r\n secondary: 'bg-gray-600 text-white hover:bg-gray-700',\r\n outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50',\r\n };\r\n\r\n const sizeClasses = {\r\n sm: 'px-3 py-1.5 text-sm',\r\n md: 'px-4 py-2 text-base',\r\n lg: 'px-6 py-3 text-lg',\r\n };\r\n\r\n const classes = `\r\n ${baseClasses}\r\n ${variantClasses[variant]}\r\n ${sizeClasses[size]}\r\n ${className}\r\n `.trim();\r\n\r\n return (\r\n <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" className={classes}>\r\n {children}\r\n </a>\r\n );\r\n};\r\n\r\nexport default Anchor;"],"x_google_ignoreList":[0,1],"mappings":";;;;;;;;;;;;;;;CAWA,IAAI,qBAAqB,OAAO,IAAI,6BAA6B;CAEjE,SAAS,QAAQ,MAAM,QAAQ,UAAU;EACvC,IAAI,MAAM;EACV,KAAK,MAAM,aAAa,MAAM,KAAK;EACnC,KAAK,MAAM,OAAO,QAAQ,MAAM,KAAK,OAAO;EAC5C,IAAI,SAAS,QAAQ;GACnB,WAAW,EAAE;GACb,KAAK,IAAI,YAAY,QACnB,UAAU,aAAa,SAAS,YAAY,OAAO;SAChD,WAAW;EAClB,SAAS,SAAS;EAClB,OAAO;GACL,UAAU;GACJ;GACD;GACL,KAAK,KAAK,MAAM,SAAS,SAAS;GAClC,OAAO;GACR;;CAGH,QAAQ,MAAM;CACd,QAAQ,OAAO;;;;;CC9Bb,OAAO,UAAA,sCAAA;;ACUT,IAAM,UAAU,EACd,UACA,UAAU,WACV,OAAO,MACP,gBACE,KAAK,GACP,WAAW,OACX,YAAY,SACK;CAuBjB,OACE,iBAAA,GAAA,mBAAA,KAAC,UAAD;EACE,WAVY;;MAEZ;GAbF,SAAS;GACT,WAAW;GACX,SAAS;GAWP,CAAe,SAAS;MACxB;GARF,IAAI;GACJ,IAAI;GACJ,IAAI;GAMF,CAAY,MAAM;MAClB,WAAW,kCAAkC,GAAG;MAChD,UAAU;IACZ,MAIa;EACF;EACC;EAET;EACM,CAAA;;;;ACzCb,IAAM,QAAQ,EACZ,UACA,OACA,YAAY,IACZ,UAAU,MACV,SAAS,WACM;CAwBf,OACE,iBAAA,GAAA,mBAAA,MAAC,OAAD;EAAK,WARS;;MAEZ;GAfF,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GAYF,CAAe,SAAS;MACxB;GATF,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GAMF,CAAc,QAAQ;MACtB,UAAU;IACZ,MAGgB;YAAhB,CACG,SACC,iBAAA,GAAA,mBAAA,KAAC,OAAD;GAAK,WAAU;aACb,iBAAA,GAAA,mBAAA,KAAC,MAAD;IAAI,WAAU;cAAuC;IAAW,CAAA;GAC5D,CAAA,EAEP,SACG;;;;;ACxCV,IAAM,UAAU,EACd,WAAW,4BACX,UAAU,WACV,OAAO,MACP,OAAO,gDACP,gBACiB;CAuBjB,OACE,iBAAA,GAAA,mBAAA,KAAC,KAAD;EAAS;EAAM,QAAO;EAAS,KAAI;EAAsB,WAR3C;;MAEZ;GAbF,SAAS;GACT,WAAW;GACX,SAAS;GAWP,CAAe,SAAS;MACxB;GARF,IAAI;GACJ,IAAI;GACJ,IAAI;GAMF,CAAY,MAAM;MAClB,UAAU;IACZ,MAGoE;EACjE;EACC,CAAA"}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
type AnchorProps = {
|
|
2
|
-
|
|
2
|
+
children?: React.ReactNode;
|
|
3
|
+
variant?: 'primary' | 'secondary' | 'outline';
|
|
4
|
+
size?: 'sm' | 'md' | 'lg';
|
|
5
|
+
href?: string;
|
|
6
|
+
className?: string;
|
|
3
7
|
};
|
|
4
|
-
declare const Anchor: ({
|
|
8
|
+
declare const Anchor: ({ children, variant, size, href, className, }: AnchorProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
9
|
export default Anchor;
|
package/package.json
CHANGED