luna-components-library 1.1.16 → 1.1.17
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.
|
@@ -229,7 +229,7 @@ var Spinner = ({ className, size = "md", type = "circle" }) => {
|
|
|
229
229
|
};
|
|
230
230
|
//#endregion
|
|
231
231
|
//#region src/components/DropDown.tsx
|
|
232
|
-
var DropDown = ({ toggle, options, selected, onChange }) => {
|
|
232
|
+
var DropDown = ({ toggle, options, selected, onChange, className = "" }) => {
|
|
233
233
|
const [isOpen, setIsOpen] = useState(false);
|
|
234
234
|
const handleToggle = () => {
|
|
235
235
|
setIsOpen(!isOpen);
|
|
@@ -239,7 +239,7 @@ var DropDown = ({ toggle, options, selected, onChange }) => {
|
|
|
239
239
|
setIsOpen(false);
|
|
240
240
|
};
|
|
241
241
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
242
|
-
className:
|
|
242
|
+
className: `relative inline-block text-left ${className}`,
|
|
243
243
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
244
244
|
onClick: handleToggle,
|
|
245
245
|
className: "cursor-pointer",
|
|
@@ -247,7 +247,7 @@ var DropDown = ({ toggle, options, selected, onChange }) => {
|
|
|
247
247
|
}), isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
248
248
|
className: "absolute z-10 mt-2 w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",
|
|
249
249
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
250
|
-
className: "py-1",
|
|
250
|
+
className: "py-1 flex flex-col",
|
|
251
251
|
children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
252
252
|
onClick: () => handleOptionClick(option),
|
|
253
253
|
className: "block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900",
|
|
@@ -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","../src/components/Accordion.tsx","../src/components/Spinner.tsx","../src/components/DropDown.tsx","../src/components/ProgressBar.tsx","../src/components/Typed.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;","\r\nimport React from 'react';\r\n\r\n/**\r\n * must have key, active, onClick, header, content body\r\n */\r\ninterface AccordionProps {\r\n key: string;\r\n active: boolean;\r\n onClick: () => void;\r\n header: React.ReactNode;\r\n content: React.ReactNode;\r\n}\r\n\r\nconst Accordion = ({ key, active, onClick, header, content }: AccordionProps) => {\r\n return (\r\n <div className=\"border border-gray-200 rounded-lg overflow-hidden\">\r\n <button\r\n onClick={onClick}\r\n className=\"w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition-colors duration-200 flex justify-between items-center\"\r\n aria-expanded={active}\r\n >\r\n {header}\r\n <svg\r\n className={`w-5 h-5 text-gray-500 transition-transform duration-200 ${active ? 'transform rotate-180' : ''\r\n }`}\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n strokeWidth={2}\r\n d=\"M19 9l-7 7-7-7\"\r\n />\r\n </svg>\r\n </button>\r\n\r\n <div\r\n className={`transition-all duration-300 ease-in-out ${active ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'\r\n } overflow-hidden`}\r\n >\r\n <div className=\"p-4 bg-white border-t border-gray-200\">\r\n {content}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Accordion;","import React from 'react';\r\n\r\n{/* must have animation,role, className */ }\r\ntype SpinnerProps = {\r\n className?: string;\r\n size?: 'sm' | 'md' | 'lg';\r\n type?: 'circle' | 'dots' | 'pulse' | 'bars';\r\n};\r\n\r\nconst Spinner = ({ className, size = 'md', type = 'circle' }: SpinnerProps) => {\r\n const sizeClasses = {\r\n sm: 'w-4 h-4',\r\n md: 'w-6 h-6',\r\n lg: 'w-8 h-8'\r\n };\r\n\r\n const dotSizeClasses = {\r\n sm: 'w-1 h-1',\r\n md: 'w-2 h-2',\r\n lg: 'w-3 h-3'\r\n };\r\n\r\n const barSizeClasses = {\r\n sm: 'w-1 h-4',\r\n md: 'w-1 h-6',\r\n lg: 'w-1 h-8'\r\n };\r\n\r\n if (type === 'dots') {\r\n return (\r\n <div role=\"status\" className={`flex gap-1 ${className || ''}`}>\r\n <span className=\"sr-only\">Loading...</span>\r\n <div className={`${dotSizeClasses[size]} bg-blue-600 rounded-full animate-bounce`} style={{ animationDelay: '0ms' }}></div>\r\n <div className={`${dotSizeClasses[size]} bg-blue-600 rounded-full animate-bounce`} style={{ animationDelay: '150ms' }}></div>\r\n <div className={`${dotSizeClasses[size]} bg-blue-600 rounded-full animate-bounce`} style={{ animationDelay: '300ms' }}></div>\r\n </div>\r\n );\r\n }\r\n\r\n if (type === 'pulse') {\r\n return (\r\n <div role=\"status\" className={`${sizeClasses[size]} ${className || ''}`}>\r\n <span className=\"sr-only\">Loading...</span>\r\n <div className={`${sizeClasses[size]} bg-blue-600 rounded-full animate-pulse`}></div>\r\n </div>\r\n );\r\n }\r\n\r\n if (type === 'bars') {\r\n return (\r\n <div role=\"status\" className={`flex gap-1 items-center ${className || ''}`}>\r\n <span className=\"sr-only\">Loading...</span>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '0ms' }}></div>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '200ms' }}></div>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '400ms' }}></div>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '600ms' }}></div>\r\n </div>\r\n );\r\n }\r\n\r\n // Default circle spinner\r\n return (\r\n <div\r\n role=\"status\"\r\n className={`inline-block animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 ${sizeClasses[size]} ${className || ''}`}\r\n >\r\n <span className=\"sr-only\">Loading...</span>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Spinner;","{/* must have toggle, options, selected, onChange */ }\r\nimport React, { useState } from 'react';\r\n\r\ntype DropDownProps = {\r\n toggle: React.ReactNode;\r\n options: React.ReactNode[];\r\n selected: React.ReactNode;\r\n onChange: (value: React.ReactNode) => void;\r\n};\r\n\r\nconst DropDown = ({ toggle, options, selected, onChange }: DropDownProps) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n const handleToggle = () => {\r\n setIsOpen(!isOpen);\r\n };\r\n\r\n const handleOptionClick = (option: React.ReactNode) => {\r\n onChange(option);\r\n setIsOpen(false);\r\n };\r\n\r\n return (\r\n <div className=\"relative inline-block text-left\">\r\n <div onClick={handleToggle} className=\"cursor-pointer\">\r\n {toggle}\r\n </div>\r\n\r\n {isOpen && (\r\n <div className=\"absolute z-10 mt-2 w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\">\r\n <div className=\"py-1\">\r\n {options.map((option, index) => (\r\n <button\r\n key={index}\r\n onClick={() => handleOptionClick(option)}\r\n className=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900\"\r\n >\r\n {option}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default DropDown;","{/* must have progress, max, min, aria-label */ }\r\nimport React from 'react';\r\nimport { CSSProperties } from 'react';\r\n\r\ntype ProgressBarProps = {\r\n progress: number;\r\n max: number;\r\n min: number;\r\n 'aria-label': string;\r\n};\r\n\r\n{/* need a class for the progress bar class name: progress-bar */ }\r\ntype ProgressBarPropsWithClassName = ProgressBarProps & {\r\n className?: CSSProperties;\r\n style?: CSSProperties;\r\n variant?: 'primary' | 'success' | 'warning' | 'danger' | 'dark' | 'light';\r\n};\r\n\r\nconst ProgressBar = ({ progress, max, min, 'aria-label': ariaLabel, className, style, variant = 'primary' }: ProgressBarPropsWithClassName) => {\r\n const variantClasses = {\r\n primary: {\r\n bg: 'bg-blue-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n success: {\r\n bg: 'bg-green-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n warning: {\r\n bg: 'bg-yellow-500',\r\n text: 'text-gray-900',\r\n containerBg: 'bg-gray-200'\r\n },\r\n danger: {\r\n bg: 'bg-red-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n dark: {\r\n bg: 'bg-gray-800',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-300'\r\n },\r\n light: {\r\n bg: 'bg-gray-100',\r\n text: 'text-gray-900',\r\n containerBg: 'bg-gray-300'\r\n }\r\n };\r\n\r\n const currentVariant = variantClasses[variant];\r\n\r\n return (\r\n <div className={`w-full ${currentVariant.containerBg} rounded-full h-4 overflow-hidden`}>\r\n <div\r\n role=\"progressbar\"\r\n className={`${currentVariant.bg} h-full rounded-full transition-all duration-300 flex items-center justify-center ${currentVariant.text} text-xs font-medium`}\r\n aria-valuenow={progress}\r\n aria-valuemin={min}\r\n aria-valuemax={max}\r\n style={{ width: `${progress}%`, ...className, ...style }}\r\n >\r\n {progress > 10 && `${progress}%`}\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default ProgressBar;","import React, { useState, useEffect, CSSProperties } from 'react';\r\n\r\ntype TypedProps = {\r\n strings: string[];\r\n typeSpeed?: number;\r\n backSpeed?: number;\r\n backDelay?: number;\r\n startDelay?: number;\r\n loop?: boolean;\r\n showCursor?: boolean;\r\n className?: string;\r\n style?: TypedStyle;\r\n};\r\n\r\ntype TypedStyle = CSSProperties & {\r\n animation?: string;\r\n animationDelay?: string;\r\n};\r\n\r\nconst Typed = ({\r\n strings,\r\n typeSpeed = 50,\r\n backSpeed = 30,\r\n backDelay = 500,\r\n startDelay = 0,\r\n loop = true,\r\n showCursor = true,\r\n className = '',\r\n style = {},\r\n}: TypedProps) => {\r\n const [currentStringIndex, setCurrentStringIndex] = useState(0);\r\n const [currentText, setCurrentText] = useState('');\r\n const [isDeleting, setIsDeleting] = useState(false);\r\n const [isPaused, setIsPaused] = useState(false);\r\n const [cursorOpacity, setCursorOpacity] = useState(1);\r\n\r\n useEffect(() => {\r\n const timer = setTimeout(() => {\r\n setIsPaused(false);\r\n }, startDelay);\r\n\r\n return () => clearTimeout(timer);\r\n }, [startDelay]);\r\n\r\n useEffect(() => {\r\n if (isPaused) return;\r\n\r\n const currentString = strings[currentStringIndex] || '';\r\n\r\n const timer = setTimeout(() => {\r\n if (!isDeleting) {\r\n // Typing\r\n if (currentText.length < currentString.length) {\r\n setCurrentText(currentText + currentString[currentText.length]);\r\n } else {\r\n // Finished typing, wait before deleting\r\n if (loop) {\r\n setIsPaused(true);\r\n setTimeout(() => {\r\n setIsPaused(false);\r\n setIsDeleting(true);\r\n }, backDelay);\r\n }\r\n }\r\n } else {\r\n // Deleting\r\n if (currentText.length > 0) {\r\n setCurrentText(currentText.slice(0, -1));\r\n } else {\r\n // Finished deleting, move to next string\r\n setIsDeleting(false);\r\n setCurrentStringIndex((prevIndex) =>\r\n prevIndex === strings.length - 1 ? 0 : prevIndex + 1\r\n );\r\n }\r\n }\r\n }, isDeleting ? backSpeed : typeSpeed);\r\n\r\n return () => clearTimeout(timer);\r\n }, [currentText, isDeleting, currentStringIndex, strings, typeSpeed, backSpeed, backDelay, loop, isPaused]);\r\n\r\n // Cursor fade effect\r\n useEffect(() => {\r\n const fadeTimer = setInterval(() => {\r\n setCursorOpacity(prev => {\r\n if (prev === 1) return 0;\r\n return 1;\r\n });\r\n }, 750);\r\n\r\n return () => clearInterval(fadeTimer);\r\n }, []);\r\n\r\n return (\r\n <span className={`inline-block ${className}`} >\r\n <span className=\"typed\">{currentText}</span>\r\n {showCursor && (\r\n <span\r\n className=\"typed-cursor ml-1 inline-block w-0.5 h-5 bg-current\"\r\n aria-hidden=\"true\"\r\n style={{\r\n ...style,\r\n opacity: cursorOpacity\r\n }}\r\n >\r\n\r\n </span>\r\n )}\r\n </span>\r\n );\r\n};\r\n\r\nexport default Typed;"],"x_google_ignoreList":[0,1],"mappings":"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"}
|
|
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","../src/components/Accordion.tsx","../src/components/Spinner.tsx","../src/components/DropDown.tsx","../src/components/ProgressBar.tsx","../src/components/Typed.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;","\r\nimport React from 'react';\r\n\r\n/**\r\n * must have key, active, onClick, header, content body\r\n */\r\ninterface AccordionProps {\r\n key: string;\r\n active: boolean;\r\n onClick: () => void;\r\n header: React.ReactNode;\r\n content: React.ReactNode;\r\n}\r\n\r\nconst Accordion = ({ key, active, onClick, header, content }: AccordionProps) => {\r\n return (\r\n <div className=\"border border-gray-200 rounded-lg overflow-hidden\">\r\n <button\r\n onClick={onClick}\r\n className=\"w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition-colors duration-200 flex justify-between items-center\"\r\n aria-expanded={active}\r\n >\r\n {header}\r\n <svg\r\n className={`w-5 h-5 text-gray-500 transition-transform duration-200 ${active ? 'transform rotate-180' : ''\r\n }`}\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n strokeWidth={2}\r\n d=\"M19 9l-7 7-7-7\"\r\n />\r\n </svg>\r\n </button>\r\n\r\n <div\r\n className={`transition-all duration-300 ease-in-out ${active ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'\r\n } overflow-hidden`}\r\n >\r\n <div className=\"p-4 bg-white border-t border-gray-200\">\r\n {content}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Accordion;","import React from 'react';\r\n\r\n{/* must have animation,role, className */ }\r\ntype SpinnerProps = {\r\n className?: string;\r\n size?: 'sm' | 'md' | 'lg';\r\n type?: 'circle' | 'dots' | 'pulse' | 'bars';\r\n};\r\n\r\nconst Spinner = ({ className, size = 'md', type = 'circle' }: SpinnerProps) => {\r\n const sizeClasses = {\r\n sm: 'w-4 h-4',\r\n md: 'w-6 h-6',\r\n lg: 'w-8 h-8'\r\n };\r\n\r\n const dotSizeClasses = {\r\n sm: 'w-1 h-1',\r\n md: 'w-2 h-2',\r\n lg: 'w-3 h-3'\r\n };\r\n\r\n const barSizeClasses = {\r\n sm: 'w-1 h-4',\r\n md: 'w-1 h-6',\r\n lg: 'w-1 h-8'\r\n };\r\n\r\n if (type === 'dots') {\r\n return (\r\n <div role=\"status\" className={`flex gap-1 ${className || ''}`}>\r\n <span className=\"sr-only\">Loading...</span>\r\n <div className={`${dotSizeClasses[size]} bg-blue-600 rounded-full animate-bounce`} style={{ animationDelay: '0ms' }}></div>\r\n <div className={`${dotSizeClasses[size]} bg-blue-600 rounded-full animate-bounce`} style={{ animationDelay: '150ms' }}></div>\r\n <div className={`${dotSizeClasses[size]} bg-blue-600 rounded-full animate-bounce`} style={{ animationDelay: '300ms' }}></div>\r\n </div>\r\n );\r\n }\r\n\r\n if (type === 'pulse') {\r\n return (\r\n <div role=\"status\" className={`${sizeClasses[size]} ${className || ''}`}>\r\n <span className=\"sr-only\">Loading...</span>\r\n <div className={`${sizeClasses[size]} bg-blue-600 rounded-full animate-pulse`}></div>\r\n </div>\r\n );\r\n }\r\n\r\n if (type === 'bars') {\r\n return (\r\n <div role=\"status\" className={`flex gap-1 items-center ${className || ''}`}>\r\n <span className=\"sr-only\">Loading...</span>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '0ms' }}></div>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '200ms' }}></div>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '400ms' }}></div>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '600ms' }}></div>\r\n </div>\r\n );\r\n }\r\n\r\n // Default circle spinner\r\n return (\r\n <div\r\n role=\"status\"\r\n className={`inline-block animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 ${sizeClasses[size]} ${className || ''}`}\r\n >\r\n <span className=\"sr-only\">Loading...</span>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Spinner;","{/* must have toggle, options, selected, onChange */ }\r\nimport React, { useState } from 'react';\r\n\r\ntype DropDownProps = {\r\n toggle: React.ReactNode;\r\n options: React.ReactNode[];\r\n selected: React.ReactNode;\r\n onChange: (value: React.ReactNode) => void;\r\n className?: string;\r\n};\r\n\r\nconst DropDown = ({ toggle, options, selected, onChange, className = '' }: DropDownProps) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n const handleToggle = () => {\r\n setIsOpen(!isOpen);\r\n };\r\n\r\n const handleOptionClick = (option: React.ReactNode) => {\r\n onChange(option);\r\n setIsOpen(false);\r\n };\r\n\r\n return (\r\n <div className={`relative inline-block text-left ${className}`}>\r\n <div onClick={handleToggle} className=\"cursor-pointer\">\r\n {toggle}\r\n </div>\r\n\r\n {isOpen && (\r\n <div className=\"absolute z-10 mt-2 w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\">\r\n <div className=\"py-1 flex flex-col\">\r\n {options.map((option, index) => (\r\n <button\r\n key={index}\r\n onClick={() => handleOptionClick(option)}\r\n className=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900\"\r\n >\r\n {option}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default DropDown;","{/* must have progress, max, min, aria-label */ }\r\nimport React from 'react';\r\nimport { CSSProperties } from 'react';\r\n\r\ntype ProgressBarProps = {\r\n progress: number;\r\n max: number;\r\n min: number;\r\n 'aria-label': string;\r\n};\r\n\r\n{/* need a class for the progress bar class name: progress-bar */ }\r\ntype ProgressBarPropsWithClassName = ProgressBarProps & {\r\n className?: CSSProperties;\r\n style?: CSSProperties;\r\n variant?: 'primary' | 'success' | 'warning' | 'danger' | 'dark' | 'light';\r\n};\r\n\r\nconst ProgressBar = ({ progress, max, min, 'aria-label': ariaLabel, className, style, variant = 'primary' }: ProgressBarPropsWithClassName) => {\r\n const variantClasses = {\r\n primary: {\r\n bg: 'bg-blue-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n success: {\r\n bg: 'bg-green-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n warning: {\r\n bg: 'bg-yellow-500',\r\n text: 'text-gray-900',\r\n containerBg: 'bg-gray-200'\r\n },\r\n danger: {\r\n bg: 'bg-red-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n dark: {\r\n bg: 'bg-gray-800',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-300'\r\n },\r\n light: {\r\n bg: 'bg-gray-100',\r\n text: 'text-gray-900',\r\n containerBg: 'bg-gray-300'\r\n }\r\n };\r\n\r\n const currentVariant = variantClasses[variant];\r\n\r\n return (\r\n <div className={`w-full ${currentVariant.containerBg} rounded-full h-4 overflow-hidden`}>\r\n <div\r\n role=\"progressbar\"\r\n className={`${currentVariant.bg} h-full rounded-full transition-all duration-300 flex items-center justify-center ${currentVariant.text} text-xs font-medium`}\r\n aria-valuenow={progress}\r\n aria-valuemin={min}\r\n aria-valuemax={max}\r\n style={{ width: `${progress}%`, ...className, ...style }}\r\n >\r\n {progress > 10 && `${progress}%`}\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default ProgressBar;","import React, { useState, useEffect, CSSProperties } from 'react';\r\n\r\ntype TypedProps = {\r\n strings: string[];\r\n typeSpeed?: number;\r\n backSpeed?: number;\r\n backDelay?: number;\r\n startDelay?: number;\r\n loop?: boolean;\r\n showCursor?: boolean;\r\n className?: string;\r\n style?: TypedStyle;\r\n};\r\n\r\ntype TypedStyle = CSSProperties & {\r\n animation?: string;\r\n animationDelay?: string;\r\n};\r\n\r\nconst Typed = ({\r\n strings,\r\n typeSpeed = 50,\r\n backSpeed = 30,\r\n backDelay = 500,\r\n startDelay = 0,\r\n loop = true,\r\n showCursor = true,\r\n className = '',\r\n style = {},\r\n}: TypedProps) => {\r\n const [currentStringIndex, setCurrentStringIndex] = useState(0);\r\n const [currentText, setCurrentText] = useState('');\r\n const [isDeleting, setIsDeleting] = useState(false);\r\n const [isPaused, setIsPaused] = useState(false);\r\n const [cursorOpacity, setCursorOpacity] = useState(1);\r\n\r\n useEffect(() => {\r\n const timer = setTimeout(() => {\r\n setIsPaused(false);\r\n }, startDelay);\r\n\r\n return () => clearTimeout(timer);\r\n }, [startDelay]);\r\n\r\n useEffect(() => {\r\n if (isPaused) return;\r\n\r\n const currentString = strings[currentStringIndex] || '';\r\n\r\n const timer = setTimeout(() => {\r\n if (!isDeleting) {\r\n // Typing\r\n if (currentText.length < currentString.length) {\r\n setCurrentText(currentText + currentString[currentText.length]);\r\n } else {\r\n // Finished typing, wait before deleting\r\n if (loop) {\r\n setIsPaused(true);\r\n setTimeout(() => {\r\n setIsPaused(false);\r\n setIsDeleting(true);\r\n }, backDelay);\r\n }\r\n }\r\n } else {\r\n // Deleting\r\n if (currentText.length > 0) {\r\n setCurrentText(currentText.slice(0, -1));\r\n } else {\r\n // Finished deleting, move to next string\r\n setIsDeleting(false);\r\n setCurrentStringIndex((prevIndex) =>\r\n prevIndex === strings.length - 1 ? 0 : prevIndex + 1\r\n );\r\n }\r\n }\r\n }, isDeleting ? backSpeed : typeSpeed);\r\n\r\n return () => clearTimeout(timer);\r\n }, [currentText, isDeleting, currentStringIndex, strings, typeSpeed, backSpeed, backDelay, loop, isPaused]);\r\n\r\n // Cursor fade effect\r\n useEffect(() => {\r\n const fadeTimer = setInterval(() => {\r\n setCursorOpacity(prev => {\r\n if (prev === 1) return 0;\r\n return 1;\r\n });\r\n }, 750);\r\n\r\n return () => clearInterval(fadeTimer);\r\n }, []);\r\n\r\n return (\r\n <span className={`inline-block ${className}`} >\r\n <span className=\"typed\">{currentText}</span>\r\n {showCursor && (\r\n <span\r\n className=\"typed-cursor ml-1 inline-block w-0.5 h-5 bg-current\"\r\n aria-hidden=\"true\"\r\n style={{\r\n ...style,\r\n opacity: cursorOpacity\r\n }}\r\n >\r\n\r\n </span>\r\n )}\r\n </span>\r\n );\r\n};\r\n\r\nexport default Typed;"],"x_google_ignoreList":[0,1],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ type DropDownProps = {
|
|
|
4
4
|
options: React.ReactNode[];
|
|
5
5
|
selected: React.ReactNode;
|
|
6
6
|
onChange: (value: React.ReactNode) => void;
|
|
7
|
+
className?: string;
|
|
7
8
|
};
|
|
8
|
-
declare const DropDown: ({ toggle, options, selected, onChange }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare const DropDown: ({ toggle, options, selected, onChange, className }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
export default DropDown;
|
package/package.json
CHANGED