azeriand-library 1.2.3 → 1.3.3

package/dist/components/button/button.d.ts

@@ -0,0 +1,19 @@
+import { MouseEventHandler, ReactNode } from 'react';
+type ButtonProps = {
+    children?: ReactNode;
+    label?: string;
+    icon?: ReactNode;
+    position?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+    size?: string;
+    className?: string;
+    noPadding?: boolean;
+    noBlur?: boolean;
+    appearance?: string;
+    color?: string;
+    intensity?: number;
+    dark?: boolean;
+    style?: React.CSSProperties;
+};
+export declare function Button({ children, label, icon, position, onClick, size, className, ...cardProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { Avatar } from './components/avatar';
 export { Card } from './components/card/card';
+export { Button } from './components/button/button';
 export * from './styles/index';

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useState, useContext, useEffect } from "react";
 function Avatar({ src, className = "", style }) {
   return /* @__PURE__ */ jsx(
@@ -39,8 +39,35 @@ function Card({ children, noPadding, noBlur = false, appearance = "glass", color
   }, [color, intensity, dark, appearance, noBlur, className, theme]);
   return /* @__PURE__ */ jsx("article", { className: classNames, style: cardStyle, onClick, children });
 }
+function Button({ children, label, icon, position = "left", onClick, size, className, ...cardProps }) {
+  let cardClassNames = "flex justify-center items-center gap-x-[0.40rem] h-[2.5rem] min-w-[2.5rem] box-border p-0";
+  if (label) {
+    cardClassNames += " px-0 py-1";
+  }
+  if (className) {
+    const roundedMatch = className.match(/rounded\-[a-z0-9]+/g);
+    if (roundedMatch) {
+      cardClassNames += " " + roundedMatch[roundedMatch.length - 1];
+    }
+  }
+  if (size === "sm") {
+    cardClassNames += " h-[2rem] w-[2rem] min-w-auto";
+  }
+  const buttonClick = (ev) => {
+    if (typeof onClick === "function") {
+      onClick(ev);
+    }
+  };
+  return /* @__PURE__ */ jsx("button", { className, onClick: buttonClick, children: /* @__PURE__ */ jsxs(Card, { noBlur: true, noPadding: true, className: cardClassNames, ...cardProps, children: [
+    position === "left" && icon,
+    label,
+    children,
+    position === "right" && icon
+  ] }) });
+}
 export {
   Avatar,
+  Button,
   Card
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/components/avatar.tsx","../src/components/theme-context.tsx","../src/components/card/card.tsx"],"sourcesContent":["\r\ntype AvatarProps = {\r\n    src: string;\r\n    className?: string;\r\n    style?: React.CSSProperties;\r\n}\r\n\r\nexport function Avatar({ src, className = '', style }: AvatarProps){\r\n    return(\r\n        <img className={`size-[3rem] rounded-2xl ${className}`} \r\n        src={src} \r\n        style={style}/>\r\n    )\r\n}","import { useState, createContext } from 'react'\n\ntype ThemeMode = 'dark' | 'light';\nconst DEFAULT_THEME = 'dark';\n\ntype ThemeContext = {\n    theme: ThemeMode,\n    setTheme: (val: ThemeMode) => void\n}\n\nexport const ThemeContext = createContext<ThemeContext>({theme: DEFAULT_THEME, setTheme: () => {}}); //Creando el 'espacio compartido' al que los componentes pueden acceder??\n\nimport { ReactNode } from 'react';\n\nexport default function ThemeContextComponent({children}: {children: ReactNode}){\n\n    const [theme, setTheme] = useState<ThemeMode>(DEFAULT_THEME)\n\n    //Creando el componente donde todos los hijos pueden acceder al contexto (siendo children los props)\n    return(\n        <ThemeContext.Provider value={{theme, setTheme}}> \n            {children}\n        </ThemeContext.Provider>\n    )\n}","import './card.css'\nimport { MouseEventHandler, ReactNode, useContext, useEffect, useState } from 'react';\nimport { ThemeContext } from '../theme-context';\n\ntype CardProps = {\n    children?: ReactNode;\n    noPadding?: boolean;\n    noBlur?: boolean;\n    appearance?: string;\n    color?: string;\n    intensity?: number;\n    dark?: boolean;\n    onClick?: MouseEventHandler<HTMLElement>;\n    className?: string;\n    style?: React.CSSProperties;\n}\nexport function Card({children, noPadding, noBlur = false, appearance = 'glass', color = 'neutral', intensity, dark = true, onClick, className, style}: CardProps){\n    \n    let [classNames, setClassNames] = useState(\"\")\n    let [cardStyle, setCardStyle] = useState({})\n    const {theme} = useContext(ThemeContext)\n    \n    useEffect(() => {\n\n        let intensityValue = intensity\n    \n        if (intensityValue === undefined){\n            intensityValue = theme === 'dark' ? 600 : 300;\n        }\n    \n        setCardStyle({\n            \"--glass-color\": `var(--color-${color}-${intensityValue})`,\n            \"--card-text-color\": `var(--color-${color}-${dark ? '100' : '800'})`,\n            backdropFilter: appearance === 'glass' && !noBlur ? 'blur(10px)' : undefined,\n            ...style\n        });\n\n        let rounded = 'rounded-md'\n\n        if (className){\n            const roundedMatch = className.match(/rounded\\-[a-z0-9]+/g)\n            if (roundedMatch){\n                rounded = roundedMatch[roundedMatch.length - 1]\n            }\n        }\n\n        setClassNames(`card ${rounded} ${appearance} ${className} ${noPadding ? '' : 'p-[2rem]'}`)\n\n       \n    }, [color, intensity, dark, appearance, noBlur, className, theme])\n\n    return(\n        <article className={classNames} style={cardStyle} onClick={onClick}>\n            {children}\n        </article>\n    )\n\n}\n"],"names":[],"mappings":";;AAOO,SAAS,OAAO,EAAE,KAAK,YAAY,IAAI,SAAqB;AAC/D,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAI,WAAW,2BAA2B,SAAS;AAAA,MACpD;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAER;ACVA,MAAM,gBAAgB;AAOf,MAAM,eAAe,cAA4B,EAAC,OAAO,eAAe,UAAU,MAAM;AAAC,GAAE;ACM3F,SAAS,KAAK,EAAC,UAAU,WAAW,SAAS,OAAO,aAAa,SAAS,QAAQ,WAAW,WAAW,OAAO,MAAM,SAAS,WAAW,SAAkB;AAE9J,MAAI,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC7C,MAAI,CAAC,WAAW,YAAY,IAAI,SAAS,CAAA,CAAE;AAC3C,QAAM,EAAC,MAAA,IAAS,WAAW,YAAY;AAEvC,YAAU,MAAM;AAEZ,QAAI,iBAAiB;AAErB,QAAI,mBAAmB,QAAU;AAC7B,uBAAiB,UAAU,SAAS,MAAM;AAAA,IAC9C;AAEA,iBAAa;AAAA,MACT,iBAAiB,eAAe,KAAK,IAAI,cAAc;AAAA,MACvD,qBAAqB,eAAe,KAAK,IAAI,OAAO,QAAQ,KAAK;AAAA,MACjE,gBAAgB,eAAe,WAAW,CAAC,SAAS,eAAe;AAAA,MACnE,GAAG;AAAA,IAAA,CACN;AAED,QAAI,UAAU;AAEd,QAAI,WAAU;AACV,YAAM,eAAe,UAAU,MAAM,qBAAqB;AAC1D,UAAI,cAAa;AACb,kBAAU,aAAa,aAAa,SAAS,CAAC;AAAA,MAClD;AAAA,IACJ;AAEA,kBAAc,QAAQ,OAAO,IAAI,UAAU,IAAI,SAAS,IAAI,YAAY,KAAK,UAAU,EAAE;AAAA,EAG7F,GAAG,CAAC,OAAO,WAAW,MAAM,YAAY,QAAQ,WAAW,KAAK,CAAC;AAEjE,6BACK,WAAA,EAAQ,WAAW,YAAY,OAAO,WAAW,SAC7C,UACL;AAGR;"}
+{"version":3,"file":"index.esm.js","sources":["../src/components/avatar.tsx","../src/components/theme-context.tsx","../src/components/card/card.tsx","../src/components/button/button.tsx"],"sourcesContent":["\r\ntype AvatarProps = {\r\n    src: string;\r\n    className?: string;\r\n    style?: React.CSSProperties;\r\n}\r\n\r\nexport function Avatar({ src, className = '', style }: AvatarProps){\r\n    return(\r\n        <img className={`size-[3rem] rounded-2xl ${className}`} \r\n        src={src} \r\n        style={style}/>\r\n    )\r\n}","import { useState, createContext } from 'react'\n\ntype ThemeMode = 'dark' | 'light';\nconst DEFAULT_THEME = 'dark';\n\ntype ThemeContext = {\n    theme: ThemeMode,\n    setTheme: (val: ThemeMode) => void\n}\n\nexport const ThemeContext = createContext<ThemeContext>({theme: DEFAULT_THEME, setTheme: () => {}}); //Creando el 'espacio compartido' al que los componentes pueden acceder??\n\nimport { ReactNode } from 'react';\n\nexport default function ThemeContextComponent({children}: {children: ReactNode}){\n\n    const [theme, setTheme] = useState<ThemeMode>(DEFAULT_THEME)\n\n    //Creando el componente donde todos los hijos pueden acceder al contexto (siendo children los props)\n    return(\n        <ThemeContext.Provider value={{theme, setTheme}}> \n            {children}\n        </ThemeContext.Provider>\n    )\n}","import './card.css'\nimport { MouseEventHandler, ReactNode, useContext, useEffect, useState } from 'react';\nimport { ThemeContext } from '../theme-context';\n\ntype CardProps = {\n    children?: ReactNode;\n    noPadding?: boolean;\n    noBlur?: boolean;\n    appearance?: string;\n    color?: string;\n    intensity?: number;\n    dark?: boolean;\n    onClick?: MouseEventHandler<HTMLElement>;\n    className?: string;\n    style?: React.CSSProperties;\n}\nexport function Card({children, noPadding, noBlur = false, appearance = 'glass', color = 'neutral', intensity, dark = true, onClick, className, style}: CardProps){\n    \n    let [classNames, setClassNames] = useState(\"\")\n    let [cardStyle, setCardStyle] = useState({})\n    const {theme} = useContext(ThemeContext)\n    \n    useEffect(() => {\n\n        let intensityValue = intensity\n    \n        if (intensityValue === undefined){\n            intensityValue = theme === 'dark' ? 600 : 300;\n        }\n    \n        setCardStyle({\n            \"--glass-color\": `var(--color-${color}-${intensityValue})`,\n            \"--card-text-color\": `var(--color-${color}-${dark ? '100' : '800'})`,\n            backdropFilter: appearance === 'glass' && !noBlur ? 'blur(10px)' : undefined,\n            ...style\n        });\n\n        let rounded = 'rounded-md'\n\n        if (className){\n            const roundedMatch = className.match(/rounded\\-[a-z0-9]+/g)\n            if (roundedMatch){\n                rounded = roundedMatch[roundedMatch.length - 1]\n            }\n        }\n\n        setClassNames(`card ${rounded} ${appearance} ${className} ${noPadding ? '' : 'p-[2rem]'}`)\n\n       \n    }, [color, intensity, dark, appearance, noBlur, className, theme])\n\n    return(\n        <article className={classNames} style={cardStyle} onClick={onClick}>\n            {children}\n        </article>\n    )\n\n}\n","import './button.css'\nimport { MouseEventHandler, ReactNode, useContext, useEffect, useState } from 'react';\nimport { Card } from '../card/card'\n\ntype ButtonProps = {\n    children?: ReactNode;\n    label?: string;\n    icon?: ReactNode;\n    position?: string\n    onClick?: MouseEventHandler<HTMLElement>;\n    size?: string;\n    className?: string;\n    noPadding?: boolean;\n    noBlur?: boolean;\n    appearance?: string;\n    color?: string;\n    intensity?: number;\n    dark?: boolean;\n    style?: React.CSSProperties;\n}\n\nexport function Button({children, label, icon, position='left', onClick, size, className, ...cardProps} : ButtonProps){\n\n    let cardClassNames = 'flex justify-center items-center gap-x-[0.40rem] h-[2.5rem] min-w-[2.5rem] box-border p-0'\n\n    if (label) {\n        cardClassNames += ' px-0 py-1'\n    }\n\n\n    if (className){\n        const roundedMatch = className.match(/rounded\\-[a-z0-9]+/g)\n        if (roundedMatch){\n            cardClassNames += ' ' + roundedMatch[roundedMatch.length-1]\n        }\n    }\n\n    if (size === 'sm'){\n        cardClassNames += ' h-[2rem] w-[2rem] min-w-auto'\n    }\n\n    const buttonClick: MouseEventHandler<HTMLButtonElement> = (ev) => {\n        if (typeof onClick === 'function') { \n            onClick(ev)\n        }\n    }\n   \n    return(\n        <button className={className} onClick={buttonClick}>\n            <Card noBlur noPadding className={cardClassNames} {...cardProps}>\n                {position === 'left' && icon}\n                {label}\n                {children}\n                {position === 'right' && icon}\n            </Card>\n        </button>\n    )\n}"],"names":[],"mappings":";;AAOO,SAAS,OAAO,EAAE,KAAK,YAAY,IAAI,SAAqB;AAC/D,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAI,WAAW,2BAA2B,SAAS;AAAA,MACpD;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAER;ACVA,MAAM,gBAAgB;AAOf,MAAM,eAAe,cAA4B,EAAC,OAAO,eAAe,UAAU,MAAM;AAAC,GAAE;ACM3F,SAAS,KAAK,EAAC,UAAU,WAAW,SAAS,OAAO,aAAa,SAAS,QAAQ,WAAW,WAAW,OAAO,MAAM,SAAS,WAAW,SAAkB;AAE9J,MAAI,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC7C,MAAI,CAAC,WAAW,YAAY,IAAI,SAAS,CAAA,CAAE;AAC3C,QAAM,EAAC,MAAA,IAAS,WAAW,YAAY;AAEvC,YAAU,MAAM;AAEZ,QAAI,iBAAiB;AAErB,QAAI,mBAAmB,QAAU;AAC7B,uBAAiB,UAAU,SAAS,MAAM;AAAA,IAC9C;AAEA,iBAAa;AAAA,MACT,iBAAiB,eAAe,KAAK,IAAI,cAAc;AAAA,MACvD,qBAAqB,eAAe,KAAK,IAAI,OAAO,QAAQ,KAAK;AAAA,MACjE,gBAAgB,eAAe,WAAW,CAAC,SAAS,eAAe;AAAA,MACnE,GAAG;AAAA,IAAA,CACN;AAED,QAAI,UAAU;AAEd,QAAI,WAAU;AACV,YAAM,eAAe,UAAU,MAAM,qBAAqB;AAC1D,UAAI,cAAa;AACb,kBAAU,aAAa,aAAa,SAAS,CAAC;AAAA,MAClD;AAAA,IACJ;AAEA,kBAAc,QAAQ,OAAO,IAAI,UAAU,IAAI,SAAS,IAAI,YAAY,KAAK,UAAU,EAAE;AAAA,EAG7F,GAAG,CAAC,OAAO,WAAW,MAAM,YAAY,QAAQ,WAAW,KAAK,CAAC;AAEjE,6BACK,WAAA,EAAQ,WAAW,YAAY,OAAO,WAAW,SAC7C,UACL;AAGR;ACpCO,SAAS,OAAO,EAAC,UAAU,OAAO,MAAM,WAAS,QAAQ,SAAS,MAAM,WAAW,GAAG,UAAA,GAAyB;AAElH,MAAI,iBAAiB;AAErB,MAAI,OAAO;AACP,sBAAkB;AAAA,EACtB;AAGA,MAAI,WAAU;AACV,UAAM,eAAe,UAAU,MAAM,qBAAqB;AAC1D,QAAI,cAAa;AACb,wBAAkB,MAAM,aAAa,aAAa,SAAO,CAAC;AAAA,IAC9D;AAAA,EACJ;AAEA,MAAI,SAAS,MAAK;AACd,sBAAkB;AAAA,EACtB;AAEA,QAAM,cAAoD,CAAC,OAAO;AAC9D,QAAI,OAAO,YAAY,YAAY;AAC/B,cAAQ,EAAE;AAAA,IACd;AAAA,EACJ;AAEA,SACI,oBAAC,UAAA,EAAO,WAAsB,SAAS,aACnC,UAAA,qBAAC,MAAA,EAAK,QAAM,MAAC,WAAS,MAAC,WAAW,gBAAiB,GAAG,WACjD,UAAA;AAAA,IAAA,aAAa,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,IACA,aAAa,WAAW;AAAA,EAAA,EAAA,CAC7B,EAAA,CACJ;AAER;"}

package/dist/index.umd.js

@@ -41,7 +41,34 @@
     }, [color, intensity, dark, appearance, noBlur, className, theme]);
     return /* @__PURE__ */ jsxRuntime.jsx("article", { className: classNames, style: cardStyle, onClick, children });
   }
+  function Button({ children, label, icon, position = "left", onClick, size, className, ...cardProps }) {
+    let cardClassNames = "flex justify-center items-center gap-x-[0.40rem] h-[2.5rem] min-w-[2.5rem] box-border p-0";
+    if (label) {
+      cardClassNames += " px-0 py-1";
+    }
+    if (className) {
+      const roundedMatch = className.match(/rounded\-[a-z0-9]+/g);
+      if (roundedMatch) {
+        cardClassNames += " " + roundedMatch[roundedMatch.length - 1];
+      }
+    }
+    if (size === "sm") {
+      cardClassNames += " h-[2rem] w-[2rem] min-w-auto";
+    }
+    const buttonClick = (ev) => {
+      if (typeof onClick === "function") {
+        onClick(ev);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { className, onClick: buttonClick, children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { noBlur: true, noPadding: true, className: cardClassNames, ...cardProps, children: [
+      position === "left" && icon,
+      label,
+      children,
+      position === "right" && icon
+    ] }) });
+  }
   exports2.Avatar = Avatar;
+  exports2.Button = Button;
   exports2.Card = Card;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","sources":["../src/components/avatar.tsx","../src/components/theme-context.tsx","../src/components/card/card.tsx"],"sourcesContent":["\r\ntype AvatarProps = {\r\n    src: string;\r\n    className?: string;\r\n    style?: React.CSSProperties;\r\n}\r\n\r\nexport function Avatar({ src, className = '', style }: AvatarProps){\r\n    return(\r\n        <img className={`size-[3rem] rounded-2xl ${className}`} \r\n        src={src} \r\n        style={style}/>\r\n    )\r\n}","import { useState, createContext } from 'react'\n\ntype ThemeMode = 'dark' | 'light';\nconst DEFAULT_THEME = 'dark';\n\ntype ThemeContext = {\n    theme: ThemeMode,\n    setTheme: (val: ThemeMode) => void\n}\n\nexport const ThemeContext = createContext<ThemeContext>({theme: DEFAULT_THEME, setTheme: () => {}}); //Creando el 'espacio compartido' al que los componentes pueden acceder??\n\nimport { ReactNode } from 'react';\n\nexport default function ThemeContextComponent({children}: {children: ReactNode}){\n\n    const [theme, setTheme] = useState<ThemeMode>(DEFAULT_THEME)\n\n    //Creando el componente donde todos los hijos pueden acceder al contexto (siendo children los props)\n    return(\n        <ThemeContext.Provider value={{theme, setTheme}}> \n            {children}\n        </ThemeContext.Provider>\n    )\n}","import './card.css'\nimport { MouseEventHandler, ReactNode, useContext, useEffect, useState } from 'react';\nimport { ThemeContext } from '../theme-context';\n\ntype CardProps = {\n    children?: ReactNode;\n    noPadding?: boolean;\n    noBlur?: boolean;\n    appearance?: string;\n    color?: string;\n    intensity?: number;\n    dark?: boolean;\n    onClick?: MouseEventHandler<HTMLElement>;\n    className?: string;\n    style?: React.CSSProperties;\n}\nexport function Card({children, noPadding, noBlur = false, appearance = 'glass', color = 'neutral', intensity, dark = true, onClick, className, style}: CardProps){\n    \n    let [classNames, setClassNames] = useState(\"\")\n    let [cardStyle, setCardStyle] = useState({})\n    const {theme} = useContext(ThemeContext)\n    \n    useEffect(() => {\n\n        let intensityValue = intensity\n    \n        if (intensityValue === undefined){\n            intensityValue = theme === 'dark' ? 600 : 300;\n        }\n    \n        setCardStyle({\n            \"--glass-color\": `var(--color-${color}-${intensityValue})`,\n            \"--card-text-color\": `var(--color-${color}-${dark ? '100' : '800'})`,\n            backdropFilter: appearance === 'glass' && !noBlur ? 'blur(10px)' : undefined,\n            ...style\n        });\n\n        let rounded = 'rounded-md'\n\n        if (className){\n            const roundedMatch = className.match(/rounded\\-[a-z0-9]+/g)\n            if (roundedMatch){\n                rounded = roundedMatch[roundedMatch.length - 1]\n            }\n        }\n\n        setClassNames(`card ${rounded} ${appearance} ${className} ${noPadding ? '' : 'p-[2rem]'}`)\n\n       \n    }, [color, intensity, dark, appearance, noBlur, className, theme])\n\n    return(\n        <article className={classNames} style={cardStyle} onClick={onClick}>\n            {children}\n        </article>\n    )\n\n}\n"],"names":["jsx","createContext","useState","useContext","useEffect"],"mappings":";;;;AAOO,WAAS,OAAO,EAAE,KAAK,YAAY,IAAI,SAAqB;AAC/D,WACIA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAAI,WAAW,2BAA2B,SAAS;AAAA,QACpD;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EAER;ACVA,QAAM,gBAAgB;AAOf,QAAM,eAAeC,MAAAA,cAA4B,EAAC,OAAO,eAAe,UAAU,MAAM;AAAA,EAAC,GAAE;ACM3F,WAAS,KAAK,EAAC,UAAU,WAAW,SAAS,OAAO,aAAa,SAAS,QAAQ,WAAW,WAAW,OAAO,MAAM,SAAS,WAAW,SAAkB;AAE9J,QAAI,CAAC,YAAY,aAAa,IAAIC,MAAAA,SAAS,EAAE;AAC7C,QAAI,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAS,CAAA,CAAE;AAC3C,UAAM,EAAC,MAAA,IAASC,MAAAA,WAAW,YAAY;AAEvCC,UAAAA,UAAU,MAAM;AAEZ,UAAI,iBAAiB;AAErB,UAAI,mBAAmB,QAAU;AAC7B,yBAAiB,UAAU,SAAS,MAAM;AAAA,MAC9C;AAEA,mBAAa;AAAA,QACT,iBAAiB,eAAe,KAAK,IAAI,cAAc;AAAA,QACvD,qBAAqB,eAAe,KAAK,IAAI,OAAO,QAAQ,KAAK;AAAA,QACjE,gBAAgB,eAAe,WAAW,CAAC,SAAS,eAAe;AAAA,QACnE,GAAG;AAAA,MAAA,CACN;AAED,UAAI,UAAU;AAEd,UAAI,WAAU;AACV,cAAM,eAAe,UAAU,MAAM,qBAAqB;AAC1D,YAAI,cAAa;AACb,oBAAU,aAAa,aAAa,SAAS,CAAC;AAAA,QAClD;AAAA,MACJ;AAEA,oBAAc,QAAQ,OAAO,IAAI,UAAU,IAAI,SAAS,IAAI,YAAY,KAAK,UAAU,EAAE;AAAA,IAG7F,GAAG,CAAC,OAAO,WAAW,MAAM,YAAY,QAAQ,WAAW,KAAK,CAAC;AAEjE,0CACK,WAAA,EAAQ,WAAW,YAAY,OAAO,WAAW,SAC7C,UACL;AAAA,EAGR;;;;;"}
+{"version":3,"file":"index.umd.js","sources":["../src/components/avatar.tsx","../src/components/theme-context.tsx","../src/components/card/card.tsx","../src/components/button/button.tsx"],"sourcesContent":["\r\ntype AvatarProps = {\r\n    src: string;\r\n    className?: string;\r\n    style?: React.CSSProperties;\r\n}\r\n\r\nexport function Avatar({ src, className = '', style }: AvatarProps){\r\n    return(\r\n        <img className={`size-[3rem] rounded-2xl ${className}`} \r\n        src={src} \r\n        style={style}/>\r\n    )\r\n}","import { useState, createContext } from 'react'\n\ntype ThemeMode = 'dark' | 'light';\nconst DEFAULT_THEME = 'dark';\n\ntype ThemeContext = {\n    theme: ThemeMode,\n    setTheme: (val: ThemeMode) => void\n}\n\nexport const ThemeContext = createContext<ThemeContext>({theme: DEFAULT_THEME, setTheme: () => {}}); //Creando el 'espacio compartido' al que los componentes pueden acceder??\n\nimport { ReactNode } from 'react';\n\nexport default function ThemeContextComponent({children}: {children: ReactNode}){\n\n    const [theme, setTheme] = useState<ThemeMode>(DEFAULT_THEME)\n\n    //Creando el componente donde todos los hijos pueden acceder al contexto (siendo children los props)\n    return(\n        <ThemeContext.Provider value={{theme, setTheme}}> \n            {children}\n        </ThemeContext.Provider>\n    )\n}","import './card.css'\nimport { MouseEventHandler, ReactNode, useContext, useEffect, useState } from 'react';\nimport { ThemeContext } from '../theme-context';\n\ntype CardProps = {\n    children?: ReactNode;\n    noPadding?: boolean;\n    noBlur?: boolean;\n    appearance?: string;\n    color?: string;\n    intensity?: number;\n    dark?: boolean;\n    onClick?: MouseEventHandler<HTMLElement>;\n    className?: string;\n    style?: React.CSSProperties;\n}\nexport function Card({children, noPadding, noBlur = false, appearance = 'glass', color = 'neutral', intensity, dark = true, onClick, className, style}: CardProps){\n    \n    let [classNames, setClassNames] = useState(\"\")\n    let [cardStyle, setCardStyle] = useState({})\n    const {theme} = useContext(ThemeContext)\n    \n    useEffect(() => {\n\n        let intensityValue = intensity\n    \n        if (intensityValue === undefined){\n            intensityValue = theme === 'dark' ? 600 : 300;\n        }\n    \n        setCardStyle({\n            \"--glass-color\": `var(--color-${color}-${intensityValue})`,\n            \"--card-text-color\": `var(--color-${color}-${dark ? '100' : '800'})`,\n            backdropFilter: appearance === 'glass' && !noBlur ? 'blur(10px)' : undefined,\n            ...style\n        });\n\n        let rounded = 'rounded-md'\n\n        if (className){\n            const roundedMatch = className.match(/rounded\\-[a-z0-9]+/g)\n            if (roundedMatch){\n                rounded = roundedMatch[roundedMatch.length - 1]\n            }\n        }\n\n        setClassNames(`card ${rounded} ${appearance} ${className} ${noPadding ? '' : 'p-[2rem]'}`)\n\n       \n    }, [color, intensity, dark, appearance, noBlur, className, theme])\n\n    return(\n        <article className={classNames} style={cardStyle} onClick={onClick}>\n            {children}\n        </article>\n    )\n\n}\n","import './button.css'\nimport { MouseEventHandler, ReactNode, useContext, useEffect, useState } from 'react';\nimport { Card } from '../card/card'\n\ntype ButtonProps = {\n    children?: ReactNode;\n    label?: string;\n    icon?: ReactNode;\n    position?: string\n    onClick?: MouseEventHandler<HTMLElement>;\n    size?: string;\n    className?: string;\n    noPadding?: boolean;\n    noBlur?: boolean;\n    appearance?: string;\n    color?: string;\n    intensity?: number;\n    dark?: boolean;\n    style?: React.CSSProperties;\n}\n\nexport function Button({children, label, icon, position='left', onClick, size, className, ...cardProps} : ButtonProps){\n\n    let cardClassNames = 'flex justify-center items-center gap-x-[0.40rem] h-[2.5rem] min-w-[2.5rem] box-border p-0'\n\n    if (label) {\n        cardClassNames += ' px-0 py-1'\n    }\n\n\n    if (className){\n        const roundedMatch = className.match(/rounded\\-[a-z0-9]+/g)\n        if (roundedMatch){\n            cardClassNames += ' ' + roundedMatch[roundedMatch.length-1]\n        }\n    }\n\n    if (size === 'sm'){\n        cardClassNames += ' h-[2rem] w-[2rem] min-w-auto'\n    }\n\n    const buttonClick: MouseEventHandler<HTMLButtonElement> = (ev) => {\n        if (typeof onClick === 'function') { \n            onClick(ev)\n        }\n    }\n   \n    return(\n        <button className={className} onClick={buttonClick}>\n            <Card noBlur noPadding className={cardClassNames} {...cardProps}>\n                {position === 'left' && icon}\n                {label}\n                {children}\n                {position === 'right' && icon}\n            </Card>\n        </button>\n    )\n}"],"names":["jsx","createContext","useState","useContext","useEffect","jsxs"],"mappings":";;;;AAOO,WAAS,OAAO,EAAE,KAAK,YAAY,IAAI,SAAqB;AAC/D,WACIA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAAI,WAAW,2BAA2B,SAAS;AAAA,QACpD;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EAER;ACVA,QAAM,gBAAgB;AAOf,QAAM,eAAeC,MAAAA,cAA4B,EAAC,OAAO,eAAe,UAAU,MAAM;AAAA,EAAC,GAAE;ACM3F,WAAS,KAAK,EAAC,UAAU,WAAW,SAAS,OAAO,aAAa,SAAS,QAAQ,WAAW,WAAW,OAAO,MAAM,SAAS,WAAW,SAAkB;AAE9J,QAAI,CAAC,YAAY,aAAa,IAAIC,MAAAA,SAAS,EAAE;AAC7C,QAAI,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAS,CAAA,CAAE;AAC3C,UAAM,EAAC,MAAA,IAASC,MAAAA,WAAW,YAAY;AAEvCC,UAAAA,UAAU,MAAM;AAEZ,UAAI,iBAAiB;AAErB,UAAI,mBAAmB,QAAU;AAC7B,yBAAiB,UAAU,SAAS,MAAM;AAAA,MAC9C;AAEA,mBAAa;AAAA,QACT,iBAAiB,eAAe,KAAK,IAAI,cAAc;AAAA,QACvD,qBAAqB,eAAe,KAAK,IAAI,OAAO,QAAQ,KAAK;AAAA,QACjE,gBAAgB,eAAe,WAAW,CAAC,SAAS,eAAe;AAAA,QACnE,GAAG;AAAA,MAAA,CACN;AAED,UAAI,UAAU;AAEd,UAAI,WAAU;AACV,cAAM,eAAe,UAAU,MAAM,qBAAqB;AAC1D,YAAI,cAAa;AACb,oBAAU,aAAa,aAAa,SAAS,CAAC;AAAA,QAClD;AAAA,MACJ;AAEA,oBAAc,QAAQ,OAAO,IAAI,UAAU,IAAI,SAAS,IAAI,YAAY,KAAK,UAAU,EAAE;AAAA,IAG7F,GAAG,CAAC,OAAO,WAAW,MAAM,YAAY,QAAQ,WAAW,KAAK,CAAC;AAEjE,0CACK,WAAA,EAAQ,WAAW,YAAY,OAAO,WAAW,SAC7C,UACL;AAAA,EAGR;ACpCO,WAAS,OAAO,EAAC,UAAU,OAAO,MAAM,WAAS,QAAQ,SAAS,MAAM,WAAW,GAAG,UAAA,GAAyB;AAElH,QAAI,iBAAiB;AAErB,QAAI,OAAO;AACP,wBAAkB;AAAA,IACtB;AAGA,QAAI,WAAU;AACV,YAAM,eAAe,UAAU,MAAM,qBAAqB;AAC1D,UAAI,cAAa;AACb,0BAAkB,MAAM,aAAa,aAAa,SAAO,CAAC;AAAA,MAC9D;AAAA,IACJ;AAEA,QAAI,SAAS,MAAK;AACd,wBAAkB;AAAA,IACtB;AAEA,UAAM,cAAoD,CAAC,OAAO;AAC9D,UAAI,OAAO,YAAY,YAAY;AAC/B,gBAAQ,EAAE;AAAA,MACd;AAAA,IACJ;AAEA,WACIJ,2BAAAA,IAAC,UAAA,EAAO,WAAsB,SAAS,aACnC,UAAAK,gCAAC,MAAA,EAAK,QAAM,MAAC,WAAS,MAAC,WAAW,gBAAiB,GAAG,WACjD,UAAA;AAAA,MAAA,aAAa,UAAU;AAAA,MACvB;AAAA,MACA;AAAA,MACA,aAAa,WAAW;AAAA,IAAA,EAAA,CAC7B,EAAA,CACJ;AAAA,EAER;;;;;;"}

package/dist/style.css

@@ -35,6 +35,20 @@ button .card.glass:hover{
 button .card.mate:hover{
     background-color: color-mix(in oklch, var(--glass-color), white 10%) 
 }
+button{
+    background: none;
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+    font-weight: bold;
+}
+
+button:focus {
+    outline: revert;
+}
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -539,10 +553,41 @@ video {
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mr-\[1rem\] {
+  margin-right: 1rem;
+}
+.box-border {
+  box-sizing: border-box;
+}
+.flex {
+  display: flex;
+}
 .size-\[3rem\] {
   width: 3rem;
   height: 3rem;
 }
+.h-\[2\.5rem\] {
+  height: 2.5rem;
+}
+.h-\[2rem\] {
+  height: 2rem;
+}
+.w-\[2rem\] {
+  width: 2rem;
+}
+.min-w-\[2\.5rem\] {
+  min-width: 2.5rem;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.gap-x-\[0\.40rem\] {
+  -moz-column-gap: 0.40rem;
+       column-gap: 0.40rem;
+}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -559,9 +604,20 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
 }
+.p-0 {
+  padding: 0px;
+}
 .p-\[2rem\] {
   padding: 2rem;
 }
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;

package/dist/styles/globals.css

@@ -3,6 +3,7 @@
 @tailwind utilities;
 
 @import '../components/card/card.css';
+@import '../components/button/button.css';
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "azeriand-library",
-  "version": "1.2.3",
+  "version": "1.3.3",
   "description": "A React component library with Tailwind CSS",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -60,5 +60,7 @@
     "vite": "^5.4.0",
     "vite-plugin-dts": "^4.5.4"
   },
-  "dependencies": {}
+  "dependencies": {
+    "react-icons": "^5.5.0"
+  }
 }

package/src/styles/globals.css

@@ -3,6 +3,7 @@
 @tailwind utilities;
 
 @import '../components/card/card.css';
+@import '../components/button/button.css';
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;