azeriand-library 1.3.4 → 1.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +2 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +2 -0
- package/dist/index.umd.js.map +1 -1
- package/dist/style.css +0 -51
- package/package.json +2 -1
package/dist/index.esm.js
CHANGED
|
@@ -13,6 +13,7 @@ function Avatar({ src, className = "", style }) {
|
|
|
13
13
|
const DEFAULT_THEME = "dark";
|
|
14
14
|
const ThemeContext = createContext({ theme: DEFAULT_THEME, setTheme: () => {
|
|
15
15
|
} });
|
|
16
|
+
require("./card.css");
|
|
16
17
|
function Card({ children, noPadding, noBlur = false, appearance = "glass", color = "neutral", intensity, dark = true, onClick, className, style }) {
|
|
17
18
|
let [classNames, setClassNames] = useState("");
|
|
18
19
|
let [cardStyle, setCardStyle] = useState({});
|
|
@@ -39,6 +40,7 @@ function Card({ children, noPadding, noBlur = false, appearance = "glass", color
|
|
|
39
40
|
}, [color, intensity, dark, appearance, noBlur, className, theme]);
|
|
40
41
|
return /* @__PURE__ */ jsx("article", { className: classNames, style: cardStyle, onClick, children });
|
|
41
42
|
}
|
|
43
|
+
require("./button.css");
|
|
42
44
|
function Button({ children, label, icon, position = "left", onClick, size, className, ...cardProps }) {
|
|
43
45
|
let cardClassNames = "flex justify-center items-center gap-x-[0.40rem] h-[2.5rem] min-w-[2.5rem] box-border p-0";
|
|
44
46
|
if (label) {
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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
|
|
1
|
+
{"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 { MouseEventHandler, ReactNode, useContext, useEffect, useState } from 'react';\nimport { ThemeContext } from '../theme-context';\nconst cardCSS = require('./card.css');\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 { MouseEventHandler, ReactNode, useContext, useEffect, useState } from 'react';\nimport { Card } from '../card/card'\nconst buttonCSS = require('./button.css');\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;ACRlF,QAAQ,YAAY;AAc7B,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;ACvDkB,QAAQ,cAAc;AAmBjC,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
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
const DEFAULT_THEME = "dark";
|
|
16
16
|
const ThemeContext = react.createContext({ theme: DEFAULT_THEME, setTheme: () => {
|
|
17
17
|
} });
|
|
18
|
+
require("./card.css");
|
|
18
19
|
function Card({ children, noPadding, noBlur = false, appearance = "glass", color = "neutral", intensity, dark = true, onClick, className, style }) {
|
|
19
20
|
let [classNames, setClassNames] = react.useState("");
|
|
20
21
|
let [cardStyle, setCardStyle] = react.useState({});
|
|
@@ -41,6 +42,7 @@
|
|
|
41
42
|
}, [color, intensity, dark, appearance, noBlur, className, theme]);
|
|
42
43
|
return /* @__PURE__ */ jsxRuntime.jsx("article", { className: classNames, style: cardStyle, onClick, children });
|
|
43
44
|
}
|
|
45
|
+
require("./button.css");
|
|
44
46
|
function Button({ children, label, icon, position = "left", onClick, size, className, ...cardProps }) {
|
|
45
47
|
let cardClassNames = "flex justify-center items-center gap-x-[0.40rem] h-[2.5rem] min-w-[2.5rem] box-border p-0";
|
|
46
48
|
if (label) {
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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
|
|
1
|
+
{"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 { MouseEventHandler, ReactNode, useContext, useEffect, useState } from 'react';\nimport { ThemeContext } from '../theme-context';\nconst cardCSS = require('./card.css');\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 { MouseEventHandler, ReactNode, useContext, useEffect, useState } from 'react';\nimport { Card } from '../card/card'\nconst buttonCSS = require('./button.css');\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;ACRlF,UAAQ,YAAY;AAc7B,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;ACvDkB,UAAQ,cAAc;AAmBjC,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
CHANGED
|
@@ -1,54 +1,3 @@
|
|
|
1
|
-
.card{
|
|
2
|
-
/* border-radius: 20px; */
|
|
3
|
-
color: var(--card-text-color, white);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.card.glass{
|
|
7
|
-
background-color: color-mix(in oklch, var(--glass-color), transparent 80%);
|
|
8
|
-
border: 1px solid color-mix(in oklch, var(--glass-color), transparent 40%);
|
|
9
|
-
-webkit-backface-visibility: hidden;
|
|
10
|
-
-webkit-perspective: 1000;
|
|
11
|
-
-webkit-transform: translate3d(0,0,0);
|
|
12
|
-
-webkit-transform: translateZ(0);
|
|
13
|
-
backface-visibility: hidden;
|
|
14
|
-
perspective: 1000;
|
|
15
|
-
transform: translate3d(0,0,0);
|
|
16
|
-
transform: translateZ(0);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.card.mate{
|
|
20
|
-
background-color: var(--glass-color);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.card.outlined{
|
|
24
|
-
border: solid white 2px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
button .card.ghost:hover, button .card.outlined:hover{
|
|
28
|
-
background: color-mix(in oklch, var(--glass-color), transparent 80%);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
button .card.glass:hover{
|
|
32
|
-
box-shadow: 0 4px 10px color-mix(in oklch, var(--glass-color), transparent 85%);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
button .card.mate:hover{
|
|
36
|
-
background-color: color-mix(in oklch, var(--glass-color), white 10%)
|
|
37
|
-
}
|
|
38
|
-
button{
|
|
39
|
-
background: none;
|
|
40
|
-
color: inherit;
|
|
41
|
-
border: none;
|
|
42
|
-
padding: 0;
|
|
43
|
-
font: inherit;
|
|
44
|
-
cursor: pointer;
|
|
45
|
-
outline: inherit;
|
|
46
|
-
font-weight: bold;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
button:focus {
|
|
50
|
-
outline: revert;
|
|
51
|
-
}
|
|
52
1
|
*, ::before, ::after {
|
|
53
2
|
--tw-border-spacing-x: 0;
|
|
54
3
|
--tw-border-spacing-y: 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "azeriand-library",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.5",
|
|
4
4
|
"description": "A React component library with Tailwind CSS",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -49,6 +49,7 @@
|
|
|
49
49
|
"@storybook/react": "^8.5.3",
|
|
50
50
|
"@storybook/react-vite": "^8.5.3",
|
|
51
51
|
"@storybook/test": "^8.5.3",
|
|
52
|
+
"@types/node": "^24.2.1",
|
|
52
53
|
"@types/react": "^19.0.8",
|
|
53
54
|
"@types/react-dom": "^19.0.3",
|
|
54
55
|
"@vitejs/plugin-react": "^4.6.0",
|