luna-components-library 1.1.7 → 1.1.10

package/README.md

@@ -44,7 +44,7 @@ module.exports = {
 ## 🚀 Quick Start
 
 ```jsx
-import { Button, Card } from 'luna-components-library';
+import { Button, Card, Anchor, Accordion, Spinner, DropDown, ProgressBar } from 'luna-components-library';
 
 function App() {
   return (
@@ -68,6 +68,34 @@ function App() {
           Learn More
         </Button>
       </Card>
+
+      <Anchor href="https://example.com" variant="secondary">
+        Visit Example
+      </Anchor>
+
+      <Accordion 
+        key="demo"
+        active={false}
+        onClick={() => console.log('Toggle')}
+        header={<h3>Click to expand</h3>}
+        content={<p>This is the accordion content!</p>}
+      />
+
+      <Spinner />
+
+      <DropDown 
+        toggle={<button>Select Option</button>}
+        options={['Option 1', 'Option 2', 'Option 3']}
+        selected="Option 1"
+        onChange={(value) => console.log('Selected:', value)}
+      />
+
+      <ProgressBar 
+        progress={60}
+        max={100}
+        min={0}
+        aria-label="Upload progress"
+      />
     </div>
   );
 }
@@ -124,6 +152,93 @@ A flexible card component for displaying content with various padding and shadow
 - `padding?: 'none' | 'sm' | 'md' | 'lg'` - Internal padding (default: 'md')
 - `shadow?: 'none' | 'sm' | 'md' | 'lg'` - Shadow depth (default: 'md')
 
+### Anchor
+A styled link component that opens in a new tab with customizable variants and sizes.
+
+```jsx
+<Anchor 
+  href="https://example.com"
+  variant="primary"
+  size="sm"
+  className="custom-anchor"
+>
+  Link Text
+</Anchor>
+```
+
+**Props:**
+- `children?: React.ReactNode` - Link content (default: "Pablo Andrey Chacon Luna")
+- `variant?: 'primary' | 'secondary' | 'outline'` - Link style (default: 'primary')
+- `size?: 'sm' | 'md' | 'lg'` - Link size (default: 'sm')
+- `href?: string` - URL to link to (default: 'https://andreychaconresumereact.netlify.app/')
+- `className?: string` - Additional CSS classes
+
+### Accordion
+A collapsible content component with customizable header and content sections.
+
+```jsx
+<Accordion 
+  key="accordion-1"
+  active={isActive}
+  onClick={() => setIsActive(!isActive)}
+  header={<h3>Accordion Title</h3>}
+  content={<p>Accordion content goes here</p>}
+/>
+```
+
+**Props:**
+- `key: string` - Unique identifier for the accordion
+- `active: boolean` - Whether the accordion is expanded
+- `onClick: () => void` - Toggle function
+- `header: React.ReactNode` - Header content
+- `content: React.ReactNode` - Content to show when expanded
+
+### Spinner
+A loading spinner component with customizable styling.
+
+```jsx
+<Spinner className="custom-spinner" />
+```
+
+**Props:**
+- `className?: string` - Additional CSS classes (default: "spinner-border")
+
+### DropDown
+A dropdown menu component with customizable toggle and options.
+
+```jsx
+<DropDown 
+  toggle={<button>Menu</button>}
+  options={['Option 1', 'Option 2', 'Option 3']}
+  selected="Option 1"
+  onChange={(value) => console.log('Selected:', value)}
+/>
+```
+
+**Props:**
+- `toggle: React.ReactNode` - Toggle button/element
+- `options: React.ReactNode[]` - Array of options
+- `selected: React.ReactNode` - Currently selected option
+- `onChange: (value: React.ReactNode) => void` - Selection change handler
+
+### ProgressBar
+A progress bar component with customizable progress values and accessibility.
+
+```jsx
+<ProgressBar 
+  progress={75}
+  max={100}
+  min={0}
+  aria-label="Loading progress"
+/>
+```
+
+**Props:**
+- `progress: number` - Current progress value
+- `max: number` - Maximum progress value
+- `min: number` - Minimum progress value
+- `aria-label: string` - Accessibility label
+
 ## 🛠️ Development
 
 ### Prerequisites
@@ -158,6 +273,11 @@ luna-library/
 │   ├── components/
 │   │   ├── Button.tsx
 │   │   ├── Card.tsx
+│   │   ├── Anchor.tsx
+│   │   ├── Accordion.tsx
+│   │   ├── Spinner.tsx
+│   │   ├── DropDown.tsx
+│   │   ├── ProgressBar.tsx
 │   │   └── index.ts
 │   └── index.ts
 ├── dist/                 # Build output

package/dist/luna-components-library.js

@@ -92,7 +92,7 @@ var Card = ({ children, title, className = "", padding = "md", shadow = "md" })
 };
 //#endregion
 //#region src/components/Anchor.tsx
-var Anchor = ({ children = "Pablo Andrey Chacon Luna", variant = "primary", size = "sm", href, className }) => {
+var Anchor = ({ children = "Pablo Andrey Chacon Luna", variant = "primary", size = "sm", href = "https://andreychaconresumereact.netlify.app/", className }) => {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
 		href,
 		target: "_blank",
@@ -115,6 +115,72 @@ var Anchor = ({ children = "Pablo Andrey Chacon Luna", variant = "primary", size
 	});
 };
 //#endregion
-export { Anchor, Button, Card };
+//#region src/components/Accordion.tsx
+var Accordion = ({ key, active, onClick, header, content }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: header }), content] });
+};
+//#endregion
+//#region src/components/Spinner.tsx
+var Spinner = ({ className }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		role: "status",
+		className: className || "spinner-border",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "visually-hidden",
+			children: "Loading..."
+		})
+	});
+};
+//#endregion
+//#region src/components/DropDown.tsx
+var DropDown = ({ toggle, options, selected, onChange }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "show dropdown",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			type: "button",
+			id: "dropdown-basic",
+			"aria-expanded": "true",
+			className: "dropdown-toggle show btn btn-success",
+			children: selected
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			"x-placement": "bottom-start",
+			"aria-labelledby": "dropdown-basic",
+			className: "dropdown-menu show",
+			"data-popper-reference-hidden": "false",
+			"data-popper-escaped": "false",
+			"data-popper-placement": "bottom-start",
+			style: {
+				position: "absolute",
+				inset: "0px auto auto 0px",
+				transform: "translate3d(0px, 39.3333px, 0px)"
+			},
+			children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+				href: "#/action-1",
+				"data-rr-ui-dropdown-item": "",
+				className: "dropdown-item",
+				onClick: () => onChange(option),
+				children: option
+			}, index))
+		})]
+	});
+};
+//#endregion
+//#region src/components/ProgressBar.tsx
+var ProgressBar = ({ progress, max, min, "aria-label": ariaLabel }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "progress",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			role: "progressbar",
+			className: "progress-bar",
+			"aria-valuenow": progress,
+			"aria-valuemin": min,
+			"aria-valuemax": max,
+			style: { width: `${progress}%` },
+			children: [progress, "%"]
+		})
+	});
+};
+//#endregion
+export { Accordion, Anchor, Button, Card, DropDown, ProgressBar, Spinner };
 
 //# sourceMappingURL=luna-components-library.js.map

package/dist/luna-components-library.js.map

@@ -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 = () =>\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,\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,MACA,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"}
+{"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"],"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>\r\n      <h2>{header}</h2>\r\n      {content}\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};\r\n\r\nconst Spinner = ({ className }: SpinnerProps) => {\r\n  const spinnerClass = className || \"spinner-border\";\r\n  return (\r\n    <div role=\"status\" className={spinnerClass}>\r\n      <span className=\"visually-hidden\">Loading...</span>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Spinner;","{/* must have toggle, options, selected, onChange */ }\r\nimport React 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  return (\r\n    <div className=\"show dropdown\">\r\n      <button type=\"button\" id=\"dropdown-basic\" aria-expanded=\"true\" className=\"dropdown-toggle show btn btn-success\">\r\n        {selected}\r\n      </button>\r\n      <div\r\n        x-placement=\"bottom-start\"\r\n        aria-labelledby=\"dropdown-basic\"\r\n        className=\"dropdown-menu show\"\r\n        data-popper-reference-hidden=\"false\"\r\n        data-popper-escaped=\"false\"\r\n        data-popper-placement=\"bottom-start\"\r\n        style={{ position: 'absolute', inset: '0px auto auto 0px', transform: 'translate3d(0px, 39.3333px, 0px)' }}\r\n      >\r\n        {options.map((option, index) => (\r\n          <a key={index} href=\"#/action-1\" data-rr-ui-dropdown-item=\"\" className=\"dropdown-item\" onClick={() => onChange(option)}>\r\n            {option}\r\n          </a>\r\n        ))}\r\n\r\n      </div>\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\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\nconst ProgressBar = ({ progress, max, min, 'aria-label': ariaLabel }: ProgressBarProps) => {\r\n  return <div className=\"progress\">\r\n    <div role=\"progressbar\" className=\"progress-bar\" aria-valuenow={progress} aria-valuemin={min} aria-valuemax={max} style={{ width: `${progress}%` }}>{progress}%</div>\r\n  </div>;\r\n};\r\n\r\nexport default ProgressBar;"],"x_google_ignoreList":[0,1],"mappings":"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"}

package/dist/src/components/Accordion.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+/**
+ * must have key, active, onClick, header, content body
+ */
+interface AccordionProps {
+    key: string;
+    active: boolean;
+    onClick: () => void;
+    header: React.ReactNode;
+    content: React.ReactNode;
+}
+declare const Accordion: ({ key, active, onClick, header, content }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;

package/dist/src/components/DropDown.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+type DropDownProps = {
+    toggle: React.ReactNode;
+    options: React.ReactNode[];
+    selected: React.ReactNode;
+    onChange: (value: React.ReactNode) => void;
+};
+declare const DropDown: ({ toggle, options, selected, onChange }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
+export default DropDown;

package/dist/src/components/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+type ProgressBarProps = {
+    progress: number;
+    max: number;
+    min: number;
+    'aria-label': string;
+};
+declare const ProgressBar: ({ progress, max, min, "aria-label": ariaLabel }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default ProgressBar;

package/dist/src/components/Spinner.d.ts

@@ -0,0 +1,5 @@
+type SpinnerProps = {
+    className?: string;
+};
+declare const Spinner: ({ className }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export default Spinner;

package/dist/src/components/index.d.ts

@@ -1,3 +1,7 @@
 export { default as Button } from './Button';
 export { default as Card } from './Card';
 export { default as Anchor } from './Anchor';
+export { default as Accordion } from './Accordion';
+export { default as Spinner } from './Spinner';
+export { default as DropDown } from './DropDown';
+export { default as ProgressBar } from './ProgressBar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-components-library",
-  "version": "1.1.7",
+  "version": "1.1.10",
   "description": "A React component library with TypeScript support",
   "main": "dist/luna-components-library.js",
   "module": "dist/luna-components-library.js",