azeriand-library 1.0.0 → 1.2.0

package/README.md

@@ -0,0 +1,92 @@
+# Azeriand Library
+
+A React component library built with TypeScript and Tailwind CSS.
+
+## Installation
+
+```bash
+npm install azeriand-library
+# or
+yarn add azeriand-library
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { Button } from 'azeriand-library';
+import 'azeriand-library/dist/style.css'; // Import the CSS
+
+function App() {
+  return (
+    <div>
+      <Button color="#ff6b6b">
+        Click me!
+      </Button>
+    </div>
+  );
+}
+```
+
+### With Tailwind CSS
+
+If your project uses Tailwind CSS, make sure to include the library's source files in your Tailwind configuration:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/azeriand-library/dist/**/*.{js,jsx,ts,tsx}", // Add this line
+  ],
+  // ... rest of your config
+}
+```
+
+Then you can use the components without importing the CSS:
+
+```tsx
+import { Button } from 'azeriand-library';
+
+function App() {
+  return (
+    <Button color="#ff6b6b">
+      Click me!
+    </Button>
+  );
+}
+```
+
+## Components
+
+### Button
+
+A customizable button component with Tailwind CSS styling.
+
+#### Props
+
+- `color?: string` - Background color for the button
+
+#### Example
+
+```tsx
+<Button color="#3b82f6">Primary Button</Button>
+<Button color="#10b981">Success Button</Button>
+```
+
+## Development
+
+```bash
+# Install dependencies
+yarn install
+
+# Start Storybook for development
+yarn storybook
+
+# Build the library
+yarn build
+
+# Build Storybook for production
+yarn build-storybook
+```

package/dist/components/avatar.d.ts

@@ -0,0 +1,7 @@
+type AvatarProps = {
+    src: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare function Avatar({ src, className, style }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/card/card.d.ts

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

package/dist/components/theme-context.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+type ThemeMode = 'dark' | 'light';
+type ThemeContext = {
+    theme: ThemeMode;
+    setTheme: (val: ThemeMode) => void;
+};
+export declare const ThemeContext: import('react').Context<ThemeContext>;
+export default function ThemeContextComponent({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

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

package/dist/index.esm.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useContext, useEffect } from "react";
+function Avatar({ src, className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: `size-[3rem] rounded-2xl ${className}`,
+      src,
+      style
+    }
+  );
+}
+const DEFAULT_THEME = "dark";
+const ThemeContext = createContext({ theme: DEFAULT_THEME, setTheme: () => {
+} });
+function Card({ children, noPadding, noBlur = false, appearance = "glass", color = "neutral", intensity, dark = true, onClick, className, style }) {
+  let [classNames, setClassNames] = useState("");
+  let [cardStyle, setCardStyle] = useState({});
+  const { theme } = useContext(ThemeContext);
+  useEffect(() => {
+    let intensityValue = intensity;
+    if (intensityValue === void 0) {
+      intensityValue = theme === "dark" ? 600 : 300;
+    }
+    setCardStyle({
+      "--glass-color": `var(--color-${color}-${intensityValue})`,
+      "--card-text-color": `var(--color-${color}-${dark ? "100" : "800"})`,
+      backdropFilter: appearance === "glass" && !noBlur ? "blur(10px)" : void 0,
+      ...style
+    });
+    let rounded = "rounded-md";
+    if (className) {
+      const roundedMatch = className.match(/rounded\-[a-z0-9]+/g);
+      if (roundedMatch) {
+        rounded = roundedMatch[roundedMatch.length - 1];
+      }
+    }
+    setClassNames(`card ${rounded} ${appearance} ${className} ${noPadding ? "" : "p-[2rem]"}`);
+  }, [color, intensity, dark, appearance, noBlur, className, theme]);
+  return /* @__PURE__ */ jsx("article", { className: classNames, style: cardStyle, onClick, children });
+}
+export {
+  Avatar,
+  Card
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +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;"}

package/dist/index.umd.js

@@ -0,0 +1,48 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.AzeriandLibrary = {}, global.React, global.React));
+})(this, function(exports2, jsxRuntime, react) {
+  "use strict";
+  function Avatar({ src, className = "", style }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        className: `size-[3rem] rounded-2xl ${className}`,
+        src,
+        style
+      }
+    );
+  }
+  const DEFAULT_THEME = "dark";
+  const ThemeContext = react.createContext({ theme: DEFAULT_THEME, setTheme: () => {
+  } });
+  function Card({ children, noPadding, noBlur = false, appearance = "glass", color = "neutral", intensity, dark = true, onClick, className, style }) {
+    let [classNames, setClassNames] = react.useState("");
+    let [cardStyle, setCardStyle] = react.useState({});
+    const { theme } = react.useContext(ThemeContext);
+    react.useEffect(() => {
+      let intensityValue = intensity;
+      if (intensityValue === void 0) {
+        intensityValue = theme === "dark" ? 600 : 300;
+      }
+      setCardStyle({
+        "--glass-color": `var(--color-${color}-${intensityValue})`,
+        "--card-text-color": `var(--color-${color}-${dark ? "100" : "800"})`,
+        backdropFilter: appearance === "glass" && !noBlur ? "blur(10px)" : void 0,
+        ...style
+      });
+      let rounded = "rounded-md";
+      if (className) {
+        const roundedMatch = className.match(/rounded\-[a-z0-9]+/g);
+        if (roundedMatch) {
+          rounded = roundedMatch[roundedMatch.length - 1];
+        }
+      }
+      setClassNames(`card ${rounded} ${appearance} ${className} ${noPadding ? "" : "p-[2rem]"}`);
+    }, [color, intensity, dark, appearance, noBlur, className, theme]);
+    return /* @__PURE__ */ jsxRuntime.jsx("article", { className: classNames, style: cardStyle, onClick, children });
+  }
+  exports2.Avatar = Avatar;
+  exports2.Card = Card;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +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;;;;;"}