@koko420/react-components 0.0.1

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.cjs ADDED
@@ -0,0 +1,87 @@
1
+ 'use strict';
2
+
3
+ var classVarianceAuthority = require('class-variance-authority');
4
+ var tailwindMerge = require('tailwind-merge');
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+
7
+ // src/components/atoms/DotsLoader.tsx
8
+ var dots = classVarianceAuthority.cva("", {
9
+ variants: {
10
+ modifier: {
11
+ primary: ["bg-white"],
12
+ primaryBordered: [
13
+ "bg-white -mb-[2px] shadow-[0_0_0_1px_rgba(255,255,255,0.5)]"
14
+ ],
15
+ secondary: ["bg-black"],
16
+ tertiary: ["bg-neutral-550"]
17
+ },
18
+ size: {
19
+ xs: ["-m-x-2 scale-[0.65]"],
20
+ sm: ["-m-x-4 scale-[0.7]"],
21
+ md: ["-m-x-4 scale-[0.8]"],
22
+ lg: ["-m-x-4 scale-[1]"],
23
+ xl: ["-m-x-4 scale-[1.05]"],
24
+ xxl: ["-m-x-4 scale-[1.1]"]
25
+ }
26
+ }
27
+ });
28
+ var DotsLoader = ({
29
+ size,
30
+ dotsBg,
31
+ modifier,
32
+ className
33
+ }) => {
34
+ const sizeStyles = dots({ size }), dotStyle = `absolute top-0 h-[13px] w-[13px] rounded-full ${dotsBg ?? dots({ modifier })}`;
35
+ return /* @__PURE__ */ jsxRuntime.jsxs(
36
+ "div",
37
+ {
38
+ className: tailwindMerge.twMerge(
39
+ "relative z-0 -ml-1 -mr-1 h-[13px] w-[80px]",
40
+ sizeStyles,
41
+ className
42
+ ),
43
+ children: [
44
+ /* @__PURE__ */ jsxRuntime.jsx(
45
+ "div",
46
+ {
47
+ className: tailwindMerge.twMerge(
48
+ "left-[8px] z-[1] animate-[scale-in_0.6s_infinite]",
49
+ dotStyle
50
+ )
51
+ }
52
+ ),
53
+ /* @__PURE__ */ jsxRuntime.jsx(
54
+ "div",
55
+ {
56
+ className: tailwindMerge.twMerge(
57
+ "left-[8px] animate-[move-24px_0.6s_infinite]",
58
+ dotStyle
59
+ )
60
+ }
61
+ ),
62
+ /* @__PURE__ */ jsxRuntime.jsx(
63
+ "div",
64
+ {
65
+ className: tailwindMerge.twMerge(
66
+ "left-[32px] z-[2] animate-[move-24px_0.6s_infinite]",
67
+ dotStyle
68
+ )
69
+ }
70
+ ),
71
+ /* @__PURE__ */ jsxRuntime.jsx(
72
+ "div",
73
+ {
74
+ className: tailwindMerge.twMerge(
75
+ "left-[56px] z-[1] animate-[scale-out_0.6s_infinite]",
76
+ dotStyle
77
+ )
78
+ }
79
+ )
80
+ ]
81
+ }
82
+ );
83
+ };
84
+
85
+ exports.DotsLoader = DotsLoader;
86
+ //# sourceMappingURL=index.cjs.map
87
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/atoms/DotsLoader.tsx"],"names":["cva","jsxs","twMerge","jsx"],"mappings":";;;;;;;AAGA,IAAM,IAAA,GAAOA,2BAAI,EAAA,EAAI;AAAA,EACnB,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,OAAA,EAAS,CAAC,UAAU,CAAA;AAAA,MACpB,eAAA,EAAiB;AAAA,QACf;AAAA,OACF;AAAA,MACA,SAAA,EAAW,CAAC,UAAU,CAAA;AAAA,MACtB,QAAA,EAAU,CAAC,gBAAgB;AAAA,KAC7B;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,CAAC,qBAAqB,CAAA;AAAA,MAC1B,EAAA,EAAI,CAAC,oBAAoB,CAAA;AAAA,MACzB,EAAA,EAAI,CAAC,oBAAoB,CAAA;AAAA,MACzB,EAAA,EAAI,CAAC,kBAAkB,CAAA;AAAA,MACvB,EAAA,EAAI,CAAC,qBAAqB,CAAA;AAAA,MAC1B,GAAA,EAAK,CAAC,oBAAoB;AAAA;AAC5B;AAEJ,CAAC,CAAA;AASM,IAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAuB;AACrB,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,EAAE,IAAA,EAAM,CAAA,EAC9B,QAAA,GAAW,CAAA,8CAAA,EAAiD,MAAA,IAAU,IAAA,CAAK,EAAE,QAAA,EAAU,CAAC,CAAA,CAAA;AAE1F,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,qBAAA;AAAA,QACT,4CAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,qBAAA;AAAA,cACT,mDAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,qBAAA;AAAA,cACT,8CAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,qBAAA;AAAA,cACT,qDAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,qBAAA;AAAA,cACT,qDAAA;AAAA,cACA;AAAA;AACF;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"index.cjs","sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { twMerge } from \"tailwind-merge\";\n\nconst dots = cva(\"\", {\n variants: {\n modifier: {\n primary: [\"bg-white\"],\n primaryBordered: [\n \"bg-white -mb-[2px] shadow-[0_0_0_1px_rgba(255,255,255,0.5)]\",\n ],\n secondary: [\"bg-black\"],\n tertiary: [\"bg-neutral-550\"],\n },\n size: {\n xs: [\"-m-x-2 scale-[0.65]\"],\n sm: [\"-m-x-4 scale-[0.7]\"],\n md: [\"-m-x-4 scale-[0.8]\"],\n lg: [\"-m-x-4 scale-[1]\"],\n xl: [\"-m-x-4 scale-[1.05]\"],\n xxl: [\"-m-x-4 scale-[1.1]\"],\n },\n },\n});\n\ntype DotsVariants = VariantProps<typeof dots>;\n\nexport type DotsLoaderProps = {\n dotsBg?: string;\n className?: string;\n} & DotsVariants;\n\nexport const DotsLoader = ({\n size,\n dotsBg,\n modifier,\n className,\n}: DotsLoaderProps) => {\n const sizeStyles = dots({ size }),\n dotStyle = `absolute top-0 h-[13px] w-[13px] rounded-full ${dotsBg ?? dots({ modifier })}`;\n\n return (\n <div\n className={twMerge(\n \"relative z-0 -ml-1 -mr-1 h-[13px] w-[80px]\",\n sizeStyles,\n className,\n )}\n >\n <div\n className={twMerge(\n \"left-[8px] z-[1] animate-[scale-in_0.6s_infinite]\",\n dotStyle,\n )}\n />\n <div\n className={twMerge(\n \"left-[8px] animate-[move-24px_0.6s_infinite]\",\n dotStyle,\n )}\n />\n <div\n className={twMerge(\n \"left-[32px] z-[2] animate-[move-24px_0.6s_infinite]\",\n dotStyle,\n )}\n />\n <div\n className={twMerge(\n \"left-[56px] z-[1] animate-[scale-out_0.6s_infinite]\",\n dotStyle,\n )}\n />\n </div>\n );\n};\n\nexport default DotsLoader;\n\n"]}
@@ -0,0 +1,16 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as class_variance_authority_types from 'class-variance-authority/types';
3
+ import { VariantProps } from 'class-variance-authority';
4
+
5
+ declare const dots: (props?: ({
6
+ modifier?: "primary" | "primaryBordered" | "secondary" | "tertiary" | null | undefined;
7
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | null | undefined;
8
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
9
+ type DotsVariants = VariantProps<typeof dots>;
10
+ type DotsLoaderProps = {
11
+ dotsBg?: string;
12
+ className?: string;
13
+ } & DotsVariants;
14
+ declare const DotsLoader: ({ size, dotsBg, modifier, className, }: DotsLoaderProps) => react_jsx_runtime.JSX.Element;
15
+
16
+ export { DotsLoader, type DotsLoaderProps };
@@ -0,0 +1,16 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as class_variance_authority_types from 'class-variance-authority/types';
3
+ import { VariantProps } from 'class-variance-authority';
4
+
5
+ declare const dots: (props?: ({
6
+ modifier?: "primary" | "primaryBordered" | "secondary" | "tertiary" | null | undefined;
7
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | null | undefined;
8
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
9
+ type DotsVariants = VariantProps<typeof dots>;
10
+ type DotsLoaderProps = {
11
+ dotsBg?: string;
12
+ className?: string;
13
+ } & DotsVariants;
14
+ declare const DotsLoader: ({ size, dotsBg, modifier, className, }: DotsLoaderProps) => react_jsx_runtime.JSX.Element;
15
+
16
+ export { DotsLoader, type DotsLoaderProps };
package/dist/index.js ADDED
@@ -0,0 +1,85 @@
1
+ import { cva } from 'class-variance-authority';
2
+ import { twMerge } from 'tailwind-merge';
3
+ import { jsxs, jsx } from 'react/jsx-runtime';
4
+
5
+ // src/components/atoms/DotsLoader.tsx
6
+ var dots = cva("", {
7
+ variants: {
8
+ modifier: {
9
+ primary: ["bg-white"],
10
+ primaryBordered: [
11
+ "bg-white -mb-[2px] shadow-[0_0_0_1px_rgba(255,255,255,0.5)]"
12
+ ],
13
+ secondary: ["bg-black"],
14
+ tertiary: ["bg-neutral-550"]
15
+ },
16
+ size: {
17
+ xs: ["-m-x-2 scale-[0.65]"],
18
+ sm: ["-m-x-4 scale-[0.7]"],
19
+ md: ["-m-x-4 scale-[0.8]"],
20
+ lg: ["-m-x-4 scale-[1]"],
21
+ xl: ["-m-x-4 scale-[1.05]"],
22
+ xxl: ["-m-x-4 scale-[1.1]"]
23
+ }
24
+ }
25
+ });
26
+ var DotsLoader = ({
27
+ size,
28
+ dotsBg,
29
+ modifier,
30
+ className
31
+ }) => {
32
+ const sizeStyles = dots({ size }), dotStyle = `absolute top-0 h-[13px] w-[13px] rounded-full ${dotsBg ?? dots({ modifier })}`;
33
+ return /* @__PURE__ */ jsxs(
34
+ "div",
35
+ {
36
+ className: twMerge(
37
+ "relative z-0 -ml-1 -mr-1 h-[13px] w-[80px]",
38
+ sizeStyles,
39
+ className
40
+ ),
41
+ children: [
42
+ /* @__PURE__ */ jsx(
43
+ "div",
44
+ {
45
+ className: twMerge(
46
+ "left-[8px] z-[1] animate-[scale-in_0.6s_infinite]",
47
+ dotStyle
48
+ )
49
+ }
50
+ ),
51
+ /* @__PURE__ */ jsx(
52
+ "div",
53
+ {
54
+ className: twMerge(
55
+ "left-[8px] animate-[move-24px_0.6s_infinite]",
56
+ dotStyle
57
+ )
58
+ }
59
+ ),
60
+ /* @__PURE__ */ jsx(
61
+ "div",
62
+ {
63
+ className: twMerge(
64
+ "left-[32px] z-[2] animate-[move-24px_0.6s_infinite]",
65
+ dotStyle
66
+ )
67
+ }
68
+ ),
69
+ /* @__PURE__ */ jsx(
70
+ "div",
71
+ {
72
+ className: twMerge(
73
+ "left-[56px] z-[1] animate-[scale-out_0.6s_infinite]",
74
+ dotStyle
75
+ )
76
+ }
77
+ )
78
+ ]
79
+ }
80
+ );
81
+ };
82
+
83
+ export { DotsLoader };
84
+ //# sourceMappingURL=index.js.map
85
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/atoms/DotsLoader.tsx"],"names":[],"mappings":";;;;;AAGA,IAAM,IAAA,GAAO,IAAI,EAAA,EAAI;AAAA,EACnB,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,OAAA,EAAS,CAAC,UAAU,CAAA;AAAA,MACpB,eAAA,EAAiB;AAAA,QACf;AAAA,OACF;AAAA,MACA,SAAA,EAAW,CAAC,UAAU,CAAA;AAAA,MACtB,QAAA,EAAU,CAAC,gBAAgB;AAAA,KAC7B;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,CAAC,qBAAqB,CAAA;AAAA,MAC1B,EAAA,EAAI,CAAC,oBAAoB,CAAA;AAAA,MACzB,EAAA,EAAI,CAAC,oBAAoB,CAAA;AAAA,MACzB,EAAA,EAAI,CAAC,kBAAkB,CAAA;AAAA,MACvB,EAAA,EAAI,CAAC,qBAAqB,CAAA;AAAA,MAC1B,GAAA,EAAK,CAAC,oBAAoB;AAAA;AAC5B;AAEJ,CAAC,CAAA;AASM,IAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAuB;AACrB,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,EAAE,IAAA,EAAM,CAAA,EAC9B,QAAA,GAAW,CAAA,8CAAA,EAAiD,MAAA,IAAU,IAAA,CAAK,EAAE,QAAA,EAAU,CAAC,CAAA,CAAA;AAE1F,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,QACT,4CAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,OAAA;AAAA,cACT,mDAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,OAAA;AAAA,cACT,8CAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,OAAA;AAAA,cACT,qDAAA;AAAA,cACA;AAAA;AACF;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,OAAA;AAAA,cACT,qDAAA;AAAA,cACA;AAAA;AACF;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"index.js","sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { twMerge } from \"tailwind-merge\";\n\nconst dots = cva(\"\", {\n variants: {\n modifier: {\n primary: [\"bg-white\"],\n primaryBordered: [\n \"bg-white -mb-[2px] shadow-[0_0_0_1px_rgba(255,255,255,0.5)]\",\n ],\n secondary: [\"bg-black\"],\n tertiary: [\"bg-neutral-550\"],\n },\n size: {\n xs: [\"-m-x-2 scale-[0.65]\"],\n sm: [\"-m-x-4 scale-[0.7]\"],\n md: [\"-m-x-4 scale-[0.8]\"],\n lg: [\"-m-x-4 scale-[1]\"],\n xl: [\"-m-x-4 scale-[1.05]\"],\n xxl: [\"-m-x-4 scale-[1.1]\"],\n },\n },\n});\n\ntype DotsVariants = VariantProps<typeof dots>;\n\nexport type DotsLoaderProps = {\n dotsBg?: string;\n className?: string;\n} & DotsVariants;\n\nexport const DotsLoader = ({\n size,\n dotsBg,\n modifier,\n className,\n}: DotsLoaderProps) => {\n const sizeStyles = dots({ size }),\n dotStyle = `absolute top-0 h-[13px] w-[13px] rounded-full ${dotsBg ?? dots({ modifier })}`;\n\n return (\n <div\n className={twMerge(\n \"relative z-0 -ml-1 -mr-1 h-[13px] w-[80px]\",\n sizeStyles,\n className,\n )}\n >\n <div\n className={twMerge(\n \"left-[8px] z-[1] animate-[scale-in_0.6s_infinite]\",\n dotStyle,\n )}\n />\n <div\n className={twMerge(\n \"left-[8px] animate-[move-24px_0.6s_infinite]\",\n dotStyle,\n )}\n />\n <div\n className={twMerge(\n \"left-[32px] z-[2] animate-[move-24px_0.6s_infinite]\",\n dotStyle,\n )}\n />\n <div\n className={twMerge(\n \"left-[56px] z-[1] animate-[scale-out_0.6s_infinite]\",\n dotStyle,\n )}\n />\n </div>\n );\n};\n\nexport default DotsLoader;\n\n"]}
package/package.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "name": "@koko420/react-components",
3
+ "version": "0.0.1",
4
+ "description": "Some of my favourite components in 1 place",
5
+ "type": "module",
6
+ "main": "./dist/index.cjs",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/index.js",
13
+ "require": "./dist/index.cjs"
14
+ },
15
+ "./styles.css": "./dist/styles.css"
16
+ },
17
+ "files": [
18
+ "dist"
19
+ ],
20
+ "scripts": {
21
+ "build": "tsup",
22
+ "dev": "tsup --watch",
23
+ "lint": "eslint src/",
24
+ "typecheck": "tsc --noEmit"
25
+ },
26
+ "peerDependencies": {
27
+ "react": ">=18",
28
+ "react-dom": ">=18",
29
+ "tailwindcss": ">=3"
30
+ },
31
+ "dependencies": {
32
+ "class-variance-authority": "^0.7.0",
33
+ "tailwind-merge": "^2.5.0",
34
+ "zod": "^3.23.0",
35
+ "zustand": "^5.0.0"
36
+ },
37
+ "devDependencies": {
38
+ "@types/react": "^18.3.0",
39
+ "@types/react-dom": "^18.3.0",
40
+ "react": "^18.3.0",
41
+ "react-dom": "^18.3.0",
42
+ "tailwindcss": "^3.4.0",
43
+ "tsup": "^8.3.0",
44
+ "typescript": "^5.6.0"
45
+ },
46
+ "keywords": [
47
+ "react",
48
+ "components",
49
+ "tailwind",
50
+ "typescript"
51
+ ],
52
+ "author": "",
53
+ "license": "MIT",
54
+ "packageManager": "pnpm@10.22.0"
55
+ }