@aristobyte-ui/utils 1.0.24 → 1.0.25
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.js +2 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -3
- package/dist/index.mjs.map +1 -1
- package/dist/styles/styles/_settings.scss +183 -0
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import "./index.css";
|
|
3
2
|
"use strict";
|
|
4
3
|
var __create = Object.create;
|
|
5
4
|
var __defProp = Object.defineProperty;
|
|
@@ -38,7 +37,7 @@ __export(index_exports, {
|
|
|
38
37
|
});
|
|
39
38
|
module.exports = __toCommonJS(index_exports);
|
|
40
39
|
|
|
41
|
-
// ripple.tsx
|
|
40
|
+
// helpers/ripple.tsx
|
|
42
41
|
var renderRipple = ({
|
|
43
42
|
ref,
|
|
44
43
|
clientX,
|
|
@@ -81,7 +80,7 @@ var renderRipple = ({
|
|
|
81
80
|
});
|
|
82
81
|
};
|
|
83
82
|
|
|
84
|
-
// Portal.tsx
|
|
83
|
+
// helpers/Portal.tsx
|
|
85
84
|
var React = __toESM(require("react"));
|
|
86
85
|
var import_react_dom = require("react-dom");
|
|
87
86
|
var Portal = ({
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../index.ts","../ripple.tsx","../Portal.tsx","../icons/Copy.tsx","../icons/Error.tsx","../icons/Info.tsx","../icons/Success.tsx","../icons/Warning.tsx","../icons/index.ts"],"sourcesContent":["export * from \"./
|
|
1
|
+
{"version":3,"sources":["../index.ts","../helpers/ripple.tsx","../helpers/Portal.tsx","../icons/Copy.tsx","../icons/Error.tsx","../icons/Info.tsx","../icons/Success.tsx","../icons/Warning.tsx","../icons/index.ts"],"sourcesContent":["export * from \"./helpers\";\nexport * from \"./icons\";\n","type RippleParamsRef = HTMLButtonElement | HTMLAnchorElement;\n\nexport type RippleParams<HTMLElementType extends RippleParamsRef> = {\n ref: React.RefObject<HTMLElementType | null>;\n clientX: number;\n clientY: number;\n};\n\nexport const renderRipple = <HTMLElementType extends RippleParamsRef>({\n ref,\n clientX,\n clientY,\n}: RippleParams<HTMLElementType>) => {\n const button = ref.current;\n if (!button) return;\n\n const circle = document.createElement(\"span\");\n const diameter = Math.max(button.clientWidth, button.clientHeight);\n const radius = diameter / 2;\n\n circle.id = \"ripple\";\n\n const style = document.createElement(\"style\");\n style.innerHTML = `\n #ripple {\n animation: ripple 300ms linear;\n background-color: rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n height: ${diameter}px;\n left: ${clientX - button.getBoundingClientRect().left - radius}px;\n pointer-events: none;\n position: absolute;\n top: ${clientY - button.getBoundingClientRect().top - radius}px;\n transform: scale(0);\n width: ${diameter}px;\n z-index: 0;\n }\n \n @keyframes ripple {\n to {\n opacity: 0;\n transform: scale(2);\n }\n }\n `;\n\n button.appendChild(style);\n button.appendChild(circle);\n\n circle.addEventListener(\"animationend\", () => {\n circle.remove();\n style.remove();\n });\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport const Portal: React.FC<{ children: React.ReactNode }> = ({\n children,\n}) => {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n if (!mounted || typeof window === \"undefined\") return null;\n return createPortal(children, document.body);\n};\n","import { IconProps } from \"./type\";\n\nexport const Copy = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Error = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"m15 9-6 6\" />\n <path d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\" />\n <path d=\"m9 9 6 6\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Info = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 16v-4\" />\n <path d=\"M12 8h.01\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Success = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m9 12 2 2 4-4\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Warning = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M12 16h.01\" />\n <path d=\"M12 8v4\" />\n <path d=\"M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z\" />\n </svg>\n);\n","import { Copy } from \"./Copy\";\nimport { Error } from \"./Error\";\nimport { Info } from \"./Info\";\nimport { Success } from \"./Success\";\nimport { Warning } from \"./Warning\";\n\nexport const Icons = {\n Copy,\n Error,\n Info,\n Success,\n Warning,\n};\n"],"mappings":"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","names":["import_jsx_runtime","Error","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","Error"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import "./index.css";
|
|
3
2
|
|
|
4
|
-
// ripple.tsx
|
|
3
|
+
// helpers/ripple.tsx
|
|
5
4
|
var renderRipple = ({
|
|
6
5
|
ref,
|
|
7
6
|
clientX,
|
|
@@ -44,7 +43,7 @@ var renderRipple = ({
|
|
|
44
43
|
});
|
|
45
44
|
};
|
|
46
45
|
|
|
47
|
-
// Portal.tsx
|
|
46
|
+
// helpers/Portal.tsx
|
|
48
47
|
import * as React from "react";
|
|
49
48
|
import { createPortal } from "react-dom";
|
|
50
49
|
var Portal = ({
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../ripple.tsx","../Portal.tsx","../icons/Copy.tsx","../icons/Error.tsx","../icons/Info.tsx","../icons/Success.tsx","../icons/Warning.tsx","../icons/index.ts"],"sourcesContent":["type RippleParamsRef = HTMLButtonElement | HTMLAnchorElement;\n\nexport type RippleParams<HTMLElementType extends RippleParamsRef> = {\n ref: React.RefObject<HTMLElementType | null>;\n clientX: number;\n clientY: number;\n};\n\nexport const renderRipple = <HTMLElementType extends RippleParamsRef>({\n ref,\n clientX,\n clientY,\n}: RippleParams<HTMLElementType>) => {\n const button = ref.current;\n if (!button) return;\n\n const circle = document.createElement(\"span\");\n const diameter = Math.max(button.clientWidth, button.clientHeight);\n const radius = diameter / 2;\n\n circle.id = \"ripple\";\n\n const style = document.createElement(\"style\");\n style.innerHTML = `\n #ripple {\n animation: ripple 300ms linear;\n background-color: rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n height: ${diameter}px;\n left: ${clientX - button.getBoundingClientRect().left - radius}px;\n pointer-events: none;\n position: absolute;\n top: ${clientY - button.getBoundingClientRect().top - radius}px;\n transform: scale(0);\n width: ${diameter}px;\n z-index: 0;\n }\n \n @keyframes ripple {\n to {\n opacity: 0;\n transform: scale(2);\n }\n }\n `;\n\n button.appendChild(style);\n button.appendChild(circle);\n\n circle.addEventListener(\"animationend\", () => {\n circle.remove();\n style.remove();\n });\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport const Portal: React.FC<{ children: React.ReactNode }> = ({\n children,\n}) => {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n if (!mounted || typeof window === \"undefined\") return null;\n return createPortal(children, document.body);\n};\n","import { IconProps } from \"./type\";\n\nexport const Copy = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Error = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"m15 9-6 6\" />\n <path d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\" />\n <path d=\"m9 9 6 6\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Info = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 16v-4\" />\n <path d=\"M12 8h.01\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Success = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m9 12 2 2 4-4\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Warning = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M12 16h.01\" />\n <path d=\"M12 8v4\" />\n <path d=\"M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z\" />\n </svg>\n);\n","import { Copy } from \"./Copy\";\nimport { Error } from \"./Error\";\nimport { Info } from \"./Info\";\nimport { Success } from \"./Success\";\nimport { Warning } from \"./Warning\";\n\nexport const Icons = {\n Copy,\n Error,\n Info,\n Success,\n Warning,\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../helpers/ripple.tsx","../helpers/Portal.tsx","../icons/Copy.tsx","../icons/Error.tsx","../icons/Info.tsx","../icons/Success.tsx","../icons/Warning.tsx","../icons/index.ts"],"sourcesContent":["type RippleParamsRef = HTMLButtonElement | HTMLAnchorElement;\n\nexport type RippleParams<HTMLElementType extends RippleParamsRef> = {\n ref: React.RefObject<HTMLElementType | null>;\n clientX: number;\n clientY: number;\n};\n\nexport const renderRipple = <HTMLElementType extends RippleParamsRef>({\n ref,\n clientX,\n clientY,\n}: RippleParams<HTMLElementType>) => {\n const button = ref.current;\n if (!button) return;\n\n const circle = document.createElement(\"span\");\n const diameter = Math.max(button.clientWidth, button.clientHeight);\n const radius = diameter / 2;\n\n circle.id = \"ripple\";\n\n const style = document.createElement(\"style\");\n style.innerHTML = `\n #ripple {\n animation: ripple 300ms linear;\n background-color: rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n height: ${diameter}px;\n left: ${clientX - button.getBoundingClientRect().left - radius}px;\n pointer-events: none;\n position: absolute;\n top: ${clientY - button.getBoundingClientRect().top - radius}px;\n transform: scale(0);\n width: ${diameter}px;\n z-index: 0;\n }\n \n @keyframes ripple {\n to {\n opacity: 0;\n transform: scale(2);\n }\n }\n `;\n\n button.appendChild(style);\n button.appendChild(circle);\n\n circle.addEventListener(\"animationend\", () => {\n circle.remove();\n style.remove();\n });\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport const Portal: React.FC<{ children: React.ReactNode }> = ({\n children,\n}) => {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n if (!mounted || typeof window === \"undefined\") return null;\n return createPortal(children, document.body);\n};\n","import { IconProps } from \"./type\";\n\nexport const Copy = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Error = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"m15 9-6 6\" />\n <path d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\" />\n <path d=\"m9 9 6 6\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Info = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 16v-4\" />\n <path d=\"M12 8h.01\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Success = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m9 12 2 2 4-4\" />\n </svg>\n);\n","import { IconProps } from \"./type\";\n\nexport const Warning = ({ size = 24, color = \"currentColor\" }: IconProps) => (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M12 16h.01\" />\n <path d=\"M12 8v4\" />\n <path d=\"M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z\" />\n </svg>\n);\n","import { Copy } from \"./Copy\";\nimport { Error } from \"./Error\";\nimport { Info } from \"./Info\";\nimport { Success } from \"./Success\";\nimport { Warning } from \"./Warning\";\n\nexport const Icons = {\n Copy,\n Error,\n Info,\n Success,\n Warning,\n};\n"],"mappings":";;;AAQO,IAAM,eAAe,CAA0C;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,SAAS,IAAI;AACnB,MAAI,CAAC,OAAQ;AAEb,QAAM,SAAS,SAAS,cAAc,MAAM;AAC5C,QAAM,WAAW,KAAK,IAAI,OAAO,aAAa,OAAO,YAAY;AACjE,QAAM,SAAS,WAAW;AAE1B,SAAO,KAAK;AAEZ,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKF,QAAQ;AAAA,gBACV,UAAU,OAAO,sBAAsB,EAAE,OAAO,MAAM;AAAA;AAAA;AAAA,eAGvD,UAAU,OAAO,sBAAsB,EAAE,MAAM,MAAM;AAAA;AAAA,iBAEnD,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYvB,SAAO,YAAY,KAAK;AACxB,SAAO,YAAY,MAAM;AAEzB,SAAO,iBAAiB,gBAAgB,MAAM;AAC5C,WAAO,OAAO;AACd,UAAM,OAAO;AAAA,EACf,CAAC;AACH;;;ACnDA,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAEtB,IAAM,SAAkD,CAAC;AAAA,EAC9D;AACF,MAAM;AACJ,QAAM,CAAC,SAAS,UAAU,IAAU,eAAS,KAAK;AAElD,EAAM,gBAAU,MAAM;AACpB,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,WAAW,OAAO,WAAW,YAAa,QAAO;AACtD,SAAO,aAAa,UAAU,SAAS,IAAI;AAC7C;;;ACbE,SAUE,KAVF;AADK,IAAM,OAAO,CAAC,EAAE,OAAO,IAAI,QAAQ,eAAe,MACvD;AAAA,EAAC;AAAA;AAAA,IACC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAQ;AAAA,IACR,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IAEf;AAAA,0BAAC,UAAK,OAAM,MAAK,QAAO,MAAK,GAAE,KAAI,GAAE,KAAI,IAAG,KAAI,IAAG,KAAI;AAAA,MACvD,oBAAC,UAAK,GAAE,2DAA0D;AAAA;AAAA;AACpE;;;ACZA,SAUE,OAAAA,MAVF,QAAAC,aAAA;AADK,IAAM,QAAQ,CAAC,EAAE,OAAO,IAAI,QAAQ,eAAe,MACxD,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAQ;AAAA,IACR,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IAEf;AAAA,sBAAAD,KAAC,UAAK,GAAE,aAAY;AAAA,MACpB,gBAAAA,KAAC,UAAK,GAAE,8OAA6O;AAAA,MACrP,gBAAAA,KAAC,UAAK,GAAE,YAAW;AAAA;AAAA;AACrB;;;ACbA,SAUE,OAAAE,MAVF,QAAAC,aAAA;AADK,IAAM,OAAO,CAAC,EAAE,OAAO,IAAI,QAAQ,eAAe,MACvD,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAQ;AAAA,IACR,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IAEf;AAAA,sBAAAD,KAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,MAC/B,gBAAAA,KAAC,UAAK,GAAE,aAAY;AAAA,MACpB,gBAAAA,KAAC,UAAK,GAAE,aAAY;AAAA;AAAA;AACtB;;;ACbA,SAUE,OAAAE,MAVF,QAAAC,aAAA;AADK,IAAM,UAAU,CAAC,EAAE,OAAO,IAAI,QAAQ,eAAe,MAC1D,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAQ;AAAA,IACR,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IAEf;AAAA,sBAAAD,KAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,MAC/B,gBAAAA,KAAC,UAAK,GAAE,iBAAgB;AAAA;AAAA;AAC1B;;;ACZA,SAUE,OAAAE,MAVF,QAAAC,aAAA;AADK,IAAM,UAAU,CAAC,EAAE,OAAO,IAAI,QAAQ,eAAe,MAC1D,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAQ;AAAA,IACR,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IAEf;AAAA,sBAAAD,KAAC,UAAK,GAAE,cAAa;AAAA,MACrB,gBAAAA,KAAC,UAAK,GAAE,WAAU;AAAA,MAClB,gBAAAA,KAAC,UAAK,GAAE,iPAAgP;AAAA;AAAA;AAC1P;;;ACVK,IAAM,QAAQ;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":["jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs"]}
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
// =========================================== //
|
|
2
|
+
// AristoByte UI - Style Settings //
|
|
3
|
+
// =========================================== //
|
|
4
|
+
|
|
5
|
+
// === Design Tokens — Color Palette === //
|
|
6
|
+
|
|
7
|
+
// Base
|
|
8
|
+
$white: #ffffff;
|
|
9
|
+
$black: #000000;
|
|
10
|
+
$transparent: transparent;
|
|
11
|
+
|
|
12
|
+
// === Black Transparent Scale === //
|
|
13
|
+
$black-transparent-100: rgba(0, 0, 0, 0.1);
|
|
14
|
+
$black-transparent-200: rgba(0, 0, 0, 0.2);
|
|
15
|
+
$black-transparent-300: rgba(0, 0, 0, 0.3);
|
|
16
|
+
$black-transparent-400: rgba(0, 0, 0, 0.4);
|
|
17
|
+
$black-transparent-500: rgba(0, 0, 0, 0.5);
|
|
18
|
+
$black-transparent-600: rgba(0, 0, 0, 0.6);
|
|
19
|
+
$black-transparent-700: rgba(0, 0, 0, 0.7);
|
|
20
|
+
$black-transparent-800: rgba(0, 0, 0, 0.8);
|
|
21
|
+
$black-transparent-900: rgba(0, 0, 0, 0.9);
|
|
22
|
+
|
|
23
|
+
// === Black Transparent Scale === //
|
|
24
|
+
$white-transparent-100: rgba(255, 255, 255, 0.1);
|
|
25
|
+
$white-transparent-200: rgba(255, 255, 255, 0.2);
|
|
26
|
+
$white-transparent-300: rgba(255, 255, 255, 0.3);
|
|
27
|
+
$white-transparent-400: rgba(255, 255, 255, 0.4);
|
|
28
|
+
$white-transparent-500: rgba(255, 255, 255, 0.5);
|
|
29
|
+
$white-transparent-600: rgba(255, 255, 255, 0.6);
|
|
30
|
+
$white-transparent-700: rgba(255, 255, 255, 0.7);
|
|
31
|
+
$white-transparent-800: rgba(255, 255, 255, 0.8);
|
|
32
|
+
$white-transparent-900: rgba(255, 255, 255, 0.9);
|
|
33
|
+
|
|
34
|
+
// === Neutral Scale (Grey) === //
|
|
35
|
+
$grey-50: #f9fafb;
|
|
36
|
+
$grey-100: #f3f4f6;
|
|
37
|
+
$grey-200: #e5e7eb;
|
|
38
|
+
$grey-300: #d1d5db;
|
|
39
|
+
$grey-400: #9ca3af;
|
|
40
|
+
$grey-500: #6b7280;
|
|
41
|
+
$grey-600: #4b5563;
|
|
42
|
+
$grey-700: #374151;
|
|
43
|
+
$grey-800: #1f2937;
|
|
44
|
+
$grey-900: #111827;
|
|
45
|
+
|
|
46
|
+
// === Primary Scale (Blue) === //
|
|
47
|
+
$blue-50: #eff6ff;
|
|
48
|
+
$blue-100: #dbeafe;
|
|
49
|
+
$blue-200: #bfdbfe;
|
|
50
|
+
$blue-300: #93c5fd;
|
|
51
|
+
$blue-400: #60a5fa;
|
|
52
|
+
$blue-500: #3b82f6;
|
|
53
|
+
$blue-600: #2563eb; // Main
|
|
54
|
+
$blue-700: #1d4ed8; // Hover
|
|
55
|
+
$blue-800: #1e40af;
|
|
56
|
+
$blue-900: #1e3a8a;
|
|
57
|
+
|
|
58
|
+
// === Secondary Scale (Indigo) === //
|
|
59
|
+
$indigo-50: #eef2ff;
|
|
60
|
+
$indigo-100: #e0e7ff;
|
|
61
|
+
$indigo-200: #c7d2fe;
|
|
62
|
+
$indigo-300: #a5b4fc;
|
|
63
|
+
$indigo-400: #818cf8;
|
|
64
|
+
$indigo-500: #6366f1;
|
|
65
|
+
$indigo-600: #4f46e5; // Main
|
|
66
|
+
$indigo-700: #4338ca; // Hover
|
|
67
|
+
|
|
68
|
+
// === Error Scale (Red) === //
|
|
69
|
+
$red-50: #fef2f2;
|
|
70
|
+
$red-100: #fee2e2;
|
|
71
|
+
$red-200: #fecaca;
|
|
72
|
+
$red-300: #fca5a5;
|
|
73
|
+
$red-400: #f87171;
|
|
74
|
+
$red-500: #ef4444;
|
|
75
|
+
$red-600: #dc2626; // Main
|
|
76
|
+
$red-700: #b91c1c; // Hover
|
|
77
|
+
|
|
78
|
+
// === Success Scale (Green) === //
|
|
79
|
+
$green-50: #f0fdf4;
|
|
80
|
+
$green-100: #dcfce7;
|
|
81
|
+
$green-200: #bbf7d0;
|
|
82
|
+
$green-300: #86efac;
|
|
83
|
+
$green-400: #4ade80;
|
|
84
|
+
$green-500: #22c55e;
|
|
85
|
+
$green-600: #16a34a; // Main
|
|
86
|
+
$green-700: #15803d; // Hover
|
|
87
|
+
|
|
88
|
+
// === Warning Scale (Amber) === //
|
|
89
|
+
$amber-50: #fffbeb;
|
|
90
|
+
$amber-100: #fef3c7;
|
|
91
|
+
$amber-200: #fde68a;
|
|
92
|
+
$amber-300: #fcd34d;
|
|
93
|
+
$amber-400: #fbbf24;
|
|
94
|
+
$amber-500: #f59e0b;
|
|
95
|
+
$amber-600: #d97706; // Main
|
|
96
|
+
$amber-700: #b45309; // Hover
|
|
97
|
+
|
|
98
|
+
// === Semantic Tokens === //
|
|
99
|
+
$color-default: $grey-800;
|
|
100
|
+
$color-default-hover: $grey-900;
|
|
101
|
+
$color-default-disabled: rgba($color-default, 0.5);
|
|
102
|
+
|
|
103
|
+
$color-primary: $blue-600;
|
|
104
|
+
$color-primary-hover: $blue-700;
|
|
105
|
+
$color-primary-disabled: rgba($color-primary, 0.5);
|
|
106
|
+
|
|
107
|
+
$color-secondary: $indigo-600;
|
|
108
|
+
$color-secondary-hover: $indigo-700;
|
|
109
|
+
$color-secondary-disabled: rgba($color-secondary, 0.5);
|
|
110
|
+
|
|
111
|
+
$color-error: $red-600;
|
|
112
|
+
$color-error-hover: $red-700;
|
|
113
|
+
$color-error-disabled: rgba($color-error, 0.5);
|
|
114
|
+
|
|
115
|
+
$color-success: $green-600;
|
|
116
|
+
$color-success-hover: $green-700;
|
|
117
|
+
$color-success-disabled: rgba($color-success, 0.5);
|
|
118
|
+
|
|
119
|
+
$color-warning: $amber-600;
|
|
120
|
+
$color-warning-hover: $amber-700;
|
|
121
|
+
$color-warning-disabled: rgba($color-warning, 0.5);
|
|
122
|
+
|
|
123
|
+
$text-color-white: $white;
|
|
124
|
+
$text-color-black: $black;
|
|
125
|
+
$text-color-white-disabled: rgba($white, 0.5);
|
|
126
|
+
$text-color-black-disabled: rgba($black, 0.5);
|
|
127
|
+
|
|
128
|
+
// === Shadows === //
|
|
129
|
+
$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);
|
|
130
|
+
$shadow-md:
|
|
131
|
+
0 4px 6px -1px rgba($black, 0.1),
|
|
132
|
+
0 2px 4px -1px rgba($black, 0.06);
|
|
133
|
+
$shadow-lg:
|
|
134
|
+
0 10px 15px -3px rgba($black, 0.1),
|
|
135
|
+
0 4px 6px -2px rgba($black, 0.05);
|
|
136
|
+
|
|
137
|
+
// === Font families === //
|
|
138
|
+
$font-family-sans: "Inter", sans-serif;
|
|
139
|
+
$font-family-serif: "Georgia", serif;
|
|
140
|
+
$font-family-mono: "Fira Code", monospace;
|
|
141
|
+
|
|
142
|
+
// === Font weights === //
|
|
143
|
+
$font-weight-regular: 400;
|
|
144
|
+
$font-weight-medium: 500;
|
|
145
|
+
$font-weight-semibold: 600;
|
|
146
|
+
$font-weight-bold: 700;
|
|
147
|
+
|
|
148
|
+
// === Line heights === //
|
|
149
|
+
$line-height-tight: 1.2;
|
|
150
|
+
$line-height-snug: 1.375;
|
|
151
|
+
$line-height-normal: 1.5;
|
|
152
|
+
$line-height-loose: 1.625;
|
|
153
|
+
|
|
154
|
+
// === Font Sizes — Semantic Tokens === //
|
|
155
|
+
|
|
156
|
+
// === Titles === //
|
|
157
|
+
$font-size-hero: 3rem; // 48px
|
|
158
|
+
$font-size-title-1: 2.25rem; // 36px
|
|
159
|
+
$font-size-title-2: 1.875rem; // 30px
|
|
160
|
+
$font-size-title-3: 1.5rem; // 24px
|
|
161
|
+
|
|
162
|
+
// === Subtitles === //
|
|
163
|
+
$font-size-subtitle-1: 1.25rem; // 20px
|
|
164
|
+
$font-size-subtitle-2: 1.125rem; // 18px
|
|
165
|
+
|
|
166
|
+
// === Body text === //
|
|
167
|
+
$font-size-body-lg: 1rem; // 16px
|
|
168
|
+
$font-size-body-md: 0.9375rem; // 15px
|
|
169
|
+
$font-size-body-sm: 0.875rem; // 14px
|
|
170
|
+
|
|
171
|
+
// === Captions / Descriptions === //
|
|
172
|
+
$font-size-caption: 0.75rem; // 12px
|
|
173
|
+
$font-size-footnote: 0.6875rem; // 11px
|
|
174
|
+
|
|
175
|
+
// === Buttons === //
|
|
176
|
+
$font-size-button-lg: 1rem; // 16px
|
|
177
|
+
$font-size-button-md: 0.875rem; // 14px
|
|
178
|
+
$font-size-button-sm: 0.75rem; // 12px
|
|
179
|
+
|
|
180
|
+
// === Animations === //
|
|
181
|
+
|
|
182
|
+
$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);
|
|
183
|
+
$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aristobyte-ui/utils",
|
|
3
3
|
"description": "A collection of shared utility functions for AristoByte projects, designed to provide reusable helpers, streamline common operations, and ensure consistency across applications and packages.",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.25",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"private": false,
|
|
7
7
|
"main": "dist/index.js",
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"tsup": "^8.5.0"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
|
-
"@aristobyte-ui/eslint-config": "^1.0.
|
|
66
|
-
"@aristobyte-ui/typescript-config": "^1.0.
|
|
65
|
+
"@aristobyte-ui/eslint-config": "^1.0.25",
|
|
66
|
+
"@aristobyte-ui/typescript-config": "^1.0.25",
|
|
67
67
|
"@turbo/gen": "^2.5.0",
|
|
68
68
|
"@types/node": "^24.3.0",
|
|
69
69
|
"@types/react": "19.1.0",
|