ekm-ui 0.3.46 → 0.3.48

package/dist/stacked-list-item.mjs

@@ -24,7 +24,7 @@ import './chunk-W3DRXKTC.mjs';
 import './chunk-WMFTYTMD.mjs';
 import './chunk-EWNPNF2B.mjs';
 import './chunk-NEJOZRKV.mjs';
-import './chunk-OA6BZGB2.mjs';
+import './chunk-S5EQU3KF.mjs';
 import './chunk-ZT7KDTGF.mjs';
 import './chunk-IEHJB2LC.mjs';
 import './chunk-FRIXS4BL.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.3.46",
+  "version": "0.3.48",
   "sideEffects": [
     "**/*.css"
   ],

package/src/dropdown.tsx

@@ -12,6 +12,8 @@ const buttonProps = variantProps({
     color: {
       blue: 'bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-blue-300',
       gray: 'bg-gray-400 hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700 focus:ring-gray-300',
+      lightGray:
+        'text-slate-700 bg-white focus:ring-slate-300 border border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:ring-blue-300',
       green: 'bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus:ring-green-300',
       red: 'bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 focus:ring-red-300',
       yellow: 'bg-yellow-700 hover:bg-yellow-800 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:ring-yellow-300',
@@ -115,16 +117,13 @@ Dropdown.propTypes = {
   /** Unique id for the dropdown */
   id: PropTypes.string.isRequired,
   /** Components to be rendered as Part of the Compound Component*/
-  children: PropTypes.oneOfType([
-    PropTypes.shape({ type: PropTypes.oneOf([DropdownItem]) }),
-    PropTypes.arrayOf(PropTypes.shape({ type: PropTypes.oneOf([DropdownDivider]) })),
-  ]).isRequired,
+  children: PropTypes.node.isRequired,
   /** Shape of the button rectangle or round */
   type: PropTypes.oneOf(['rect', 'round']),
   /** Size of the button sm,md,lg used for rectangle and rsm, rmd, rlg used for a round button */
   size: PropTypes.oneOf(['sm', 'md', 'lg', 'rsm', 'rmd', 'rlg']),
   /** Colour of the button based upon predefined values */
-  color: PropTypes.oneOf(['blue', 'gray', 'green', 'red', 'yellow']),
+  color: PropTypes.oneOf(['blue', 'gray', 'lightGray', 'green', 'red', 'yellow']),
   /** Rectangle should have a text label eg:'Dropdown' and a round type should take an icon element eg:'...' */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
 }

package/dist/chunk-OA6BZGB2.mjs

@@ -1,12 +0,0 @@
-import { a as a$1 } from './chunk-PUJZGK7Y.mjs';
-import { e as e$1, b, a as a$2 } from './chunk-23SJGKDR.mjs';
-import { variantProps } from 'classname-variants/react';
-import { createContext, useState, useEffect, useContext } from 'react';
-import { BiChevronDown } from 'react-icons/bi';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var e=e$1(a$1());var m=createContext(),P=variantProps({base:"text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium text-sm py-2.5 text-center inline-flex items-center",variants:{color:{blue:"bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-blue-300",gray:"bg-gray-400 hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700 focus:ring-gray-300",green:"bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus:ring-green-300",red:"bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 focus:ring-red-300",yellow:"bg-yellow-700 hover:bg-yellow-800 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:ring-yellow-300"},size:{sm:"px-5 py-1.5",md:"px-5 py-2.5",lg:"px-5 py-3.5",rsm:"px-2.5 py-2.5",rmd:"px-3.5 py-3.5",rlg:"px-4.5 py-4.5"},type:{rect:"rounded-lg",round:"rounded-full"},defaultVariants:{color:"blue",size:"md",type:"rect"}}}),t=Object.freeze({OPEN:"open",CLOSED:"closed"});function n({id:o,label:l,type:d,color:c,size:f,children:v}){let[i,s]=useState(t.CLOSED),w=()=>{s(i===t.CLOSED?t.OPEN:t.CLOSED);};return useEffect(()=>{let p=h=>{h.target.id!==o&&s(t.CLOSED);};return document.addEventListener("click",p),()=>{document.removeEventListener("click",p);}},[]),jsx("div",{className:"relative",children:jsxs(m.Provider,{value:{showDropdown:i,setShowDropdown:s},children:[jsxs("button",b(a$2({id:o},P({color:c,size:f,type:d})),{"data-dropdown-toggle":`${o}-dropdown`,type:"button",onClick:w,children:[l,d==="rect"&&jsx(BiChevronDown,{className:"pointer-events-none"})]})),jsx("div",{id:`${o}-dropdown`,className:`z-50 mt-2 absolute ${i===t.OPEN?"":"hidden"} bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700`,children:jsx("ul",{className:"py-2 text-sm text-gray-700 dark:text-gray-200","aria-labelledby":"dropdownDefaultButton",children:v})})]})})}function g(){return jsx("li",{children:jsx("hr",{className:"h-px my-2 bg-gray-200 border-0 dark:bg-gray-700"})})}function a({callback:o,children:l}){let d=useContext(m);return jsx("li",{children:jsx("div",{className:"block px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",onClick:()=>{d.setShowDropdown(!1),o();},children:l})})}n.Divider=g;n.Item=a;n.propTypes={id:e.default.string.isRequired,children:e.default.oneOfType([e.default.shape({type:e.default.oneOf([a])}),e.default.arrayOf(e.default.shape({type:e.default.oneOf([g])}))]).isRequired,type:e.default.oneOf(["rect","round"]),size:e.default.oneOf(["sm","md","lg","rsm","rmd","rlg"]),color:e.default.oneOf(["blue","gray","green","red","yellow"]),label:e.default.oneOfType([e.default.string,e.default.node]).isRequired};n.defaultProps={type:"rect",size:"md",color:"blue",label:"Dropdown"};a.propTypes={callback:e.default.func.isRequired};n.displayName="Dropdown";g.displayName="Dropdown.Divider";a.displayName="Dropdown.Item";
-
-export { n as a, g as b, a as c };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-OA6BZGB2.mjs.map

package/dist/chunk-OA6BZGB2.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/dropdown.tsx"],"names":["import_prop_types","variantProps","useState","createContext","useContext","useEffect","BiChevronDown","jsx","jsxs","DropdownContext","buttonProps","DropdownState","Dropdown","id","label","type","color","size","children","showDropdown","setShowDropdown","handleShowDropdown","handleClickOutside","e","__spreadProps","__spreadValues","DropdownDivider","DropdownItem","callback","context","PropTypes"],"mappings":"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","sourcesContent":["//@ts-nocheck\nimport { variantProps } from 'classname-variants/react'\nimport { useState, createContext, useContext, useEffect, useRef } from 'react'\nimport { BiChevronDown } from 'react-icons/bi'\nimport PropTypes from 'prop-types'\nconst DropdownContext = createContext()\n\n// BUTTON CLASSES\nconst buttonProps = variantProps({\n  base: 'text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium text-sm py-2.5 text-center inline-flex items-center',\n  variants: {\n    color: {\n      blue: 'bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-blue-300',\n      gray: 'bg-gray-400 hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700 focus:ring-gray-300',\n      green: 'bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus:ring-green-300',\n      red: 'bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 focus:ring-red-300',\n      yellow: 'bg-yellow-700 hover:bg-yellow-800 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:ring-yellow-300',\n    },\n    size: {\n      sm: 'px-5 py-1.5',\n      md: 'px-5 py-2.5',\n      lg: 'px-5 py-3.5',\n      // WORKAROUND: Compound variants don't work with classname-variants/react (revisit later)\n      rsm: 'px-2.5 py-2.5',\n      rmd: 'px-3.5 py-3.5',\n      rlg: 'px-4.5 py-4.5',\n    },\n    type: {\n      rect: 'rounded-lg',\n      round: 'rounded-full',\n    },\n    defaultVariants: {\n      color: 'blue',\n      size: 'md',\n      type: 'rect',\n    },\n  },\n})\n\nconst DropdownState = Object.freeze({\n  OPEN: 'open',\n  CLOSED: 'closed',\n})\n\nexport function Dropdown({ id, label, type, color, size, children }) {\n  const [showDropdown, setShowDropdown] = useState(DropdownState.CLOSED)\n  const handleShowDropdown = () => {\n    const currState = showDropdown\n    setShowDropdown(currState === DropdownState.CLOSED ? DropdownState.OPEN : DropdownState.CLOSED)\n  }\n\n  useEffect(() => {\n    const handleClickOutside = (e) => {\n      if (e.target.id === id) return\n      setShowDropdown(DropdownState.CLOSED)\n    }\n\n    document.addEventListener('click', handleClickOutside)\n\n    return () => {\n      document.removeEventListener('click', handleClickOutside)\n    }\n  }, [])\n\n  return (\n    <div className=\"relative\">\n      <DropdownContext.Provider value={{ showDropdown, setShowDropdown }}>\n        <button id={id} {...buttonProps({ color, size, type })} data-dropdown-toggle={`${id}-dropdown`} type=\"button\" onClick={handleShowDropdown}>\n          {label}\n          {type === 'rect' && <BiChevronDown className=\"pointer-events-none\" />}\n        </button>\n        <div\n          id={`${id}-dropdown`}\n          className={`z-50 mt-2 absolute ${\n            showDropdown === DropdownState.OPEN ? '' : 'hidden'\n          } bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700`}\n        >\n          <ul className=\"py-2 text-sm text-gray-700 dark:text-gray-200\" aria-labelledby=\"dropdownDefaultButton\">\n            {children}\n          </ul>\n        </div>\n      </DropdownContext.Provider>\n    </div>\n  )\n}\n\nexport function DropdownDivider() {\n  return (\n    <li>\n      <hr className=\"h-px my-2 bg-gray-200 border-0 dark:bg-gray-700\" />\n    </li>\n  )\n}\n\nexport function DropdownItem({ callback, children }) {\n  const context = useContext(DropdownContext)\n\n  const handleSelection = () => {\n    context.setShowDropdown(false)\n    callback()\n  }\n  return (\n    <li>\n      <div className=\"block px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white\" onClick={handleSelection}>\n        {children}\n      </div>\n    </li>\n  )\n}\n\nDropdown.Divider = DropdownDivider\nDropdown.Item = DropdownItem\n\nDropdown.propTypes = {\n  /** Unique id for the dropdown */\n  id: PropTypes.string.isRequired,\n  /** Components to be rendered as Part of the Compound Component*/\n  children: PropTypes.oneOfType([\n    PropTypes.shape({ type: PropTypes.oneOf([DropdownItem]) }),\n    PropTypes.arrayOf(PropTypes.shape({ type: PropTypes.oneOf([DropdownDivider]) })),\n  ]).isRequired,\n  /** Shape of the button rectangle or round */\n  type: PropTypes.oneOf(['rect', 'round']),\n  /** Size of the button sm,md,lg used for rectangle and rsm, rmd, rlg used for a round button */\n  size: PropTypes.oneOf(['sm', 'md', 'lg', 'rsm', 'rmd', 'rlg']),\n  /** Colour of the button based upon predefined values */\n  color: PropTypes.oneOf(['blue', 'gray', 'green', 'red', 'yellow']),\n  /** Rectangle should have a text label eg:'Dropdown' and a round type should take an icon element eg:'...' */\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n}\nDropdown.defaultProps = {\n  type: 'rect',\n  size: 'md',\n  color: 'blue',\n  label: 'Dropdown',\n}\nDropdownItem.propTypes = {\n  /** Returns value of the dropdown item selected*/\n  callback: PropTypes.func.isRequired,\n}\n\nDropdown.displayName = 'Dropdown'\nDropdownDivider.displayName = 'Dropdown.Divider'\nDropdownItem.displayName = 'Dropdown.Item'\n"]}