@purr-react-tailwindcss/components.hamburger-menu 0.0.1 → 0.0.2
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/_components.d.ts +1 -1
- package/dist/_types.d.ts +4 -15
- package/dist/index.cjs +1 -1
- package/dist/index.js +36 -35
- package/package.json +3 -3
package/dist/_components.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { IHamburgerMenuProps } from './_types';
|
|
3
3
|
|
|
4
|
-
export declare const HamburgerMenu: React.MemoExoticComponent<({ isStandalone, active,
|
|
4
|
+
export declare const HamburgerMenu: React.MemoExoticComponent<({ isStandalone, active, onClick, htmlAttributes, firstBarHTMLAttributes, secondBarHTMLAttributes, thirdBarHTMLAttributes, }: IHamburgerMenuProps) => React.JSX.Element>;
|
package/dist/_types.d.ts
CHANGED
|
@@ -1,23 +1,12 @@
|
|
|
1
|
-
import { ClassValue } from 'clsx';
|
|
2
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
3
2
|
import { IExtendable } from '@purr-core/utils.definitions';
|
|
4
3
|
|
|
5
|
-
export interface IHamburgerMenuClasses {
|
|
6
|
-
container?: ClassValue;
|
|
7
|
-
firstBar?: ClassValue;
|
|
8
|
-
secondBar?: ClassValue;
|
|
9
|
-
thirdBar?: ClassValue;
|
|
10
|
-
}
|
|
11
|
-
export interface IHamburgerMenuBuiltClasses {
|
|
12
|
-
container?: string;
|
|
13
|
-
firstBar?: string;
|
|
14
|
-
secondBar?: string;
|
|
15
|
-
thirdBar?: string;
|
|
16
|
-
}
|
|
17
4
|
export interface IHamburgerMenuProps {
|
|
18
5
|
onClick?: (active: boolean) => void;
|
|
19
6
|
active?: boolean;
|
|
20
|
-
classes?: IHamburgerMenuClasses;
|
|
21
|
-
htmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
|
|
22
7
|
isStandalone?: boolean;
|
|
8
|
+
htmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
|
|
9
|
+
firstBarHTMLAttributes?: ButtonHTMLAttributes<HTMLSpanElement> & IExtendable;
|
|
10
|
+
secondBarHTMLAttributes?: ButtonHTMLAttributes<HTMLSpanElement> & IExtendable;
|
|
11
|
+
thirdBarHTMLAttributes?: ButtonHTMLAttributes<HTMLSpanElement> & IExtendable;
|
|
23
12
|
}
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("clsx"),g=require("react"),h=require("@purr-core/hooks.sync-state-with-props"),n=g.memo(({isStandalone:s=!0,active:u=!1,onClick:a,htmlAttributes:o,firstBarHTMLAttributes:m,secondBarHTMLAttributes:l,thirdBarHTMLAttributes:i})=>{const{currentValue:e,setCurrentValue:b}=h(u,s),c=()=>{b(!e),a==null||a(!e)};return r.jsxs("button",{className:t("bg-transparent","outline-none","border-none","hamburger-menu",e&&"hamburger-menu--active"),onClick:c,...o,children:[r.jsx("span",{className:t("block","w-8","h-1","bg-white","my-1","transition-all","rounded",e&&"translate-y-2 -rotate-45 transform","hamburger-menu__bar"),...m}),r.jsx("span",{className:t("block","w-8","h-1","bg-white","my-1","transition-all","rounded",e&&"opacity-0","hamburger-menu__bar"),...l}),r.jsx("span",{className:t("block","w-8","h-1","bg-white","my-1","transition-all","rounded",e&&"-translate-y-2 rotate-45 transform","hamburger-menu__bar"),...i})]})});n.displayName="HamburgerMenu";exports.HamburgerMenu=n;
|
package/dist/index.js
CHANGED
|
@@ -1,36 +1,37 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { memo as
|
|
1
|
+
import { jsxs as c, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import r from "clsx";
|
|
3
|
+
import { memo as h } from "react";
|
|
4
4
|
import g from "@purr-core/hooks.sync-state-with-props";
|
|
5
|
-
const p =
|
|
5
|
+
const p = h(
|
|
6
6
|
({
|
|
7
|
-
isStandalone:
|
|
8
|
-
active:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
isStandalone: n = !0,
|
|
8
|
+
active: s = !1,
|
|
9
|
+
onClick: a,
|
|
10
|
+
htmlAttributes: m,
|
|
11
|
+
firstBarHTMLAttributes: o,
|
|
12
|
+
secondBarHTMLAttributes: u,
|
|
13
|
+
thirdBarHTMLAttributes: l
|
|
12
14
|
}) => {
|
|
13
|
-
const { currentValue:
|
|
14
|
-
|
|
15
|
+
const { currentValue: e, setCurrentValue: b } = g(s, n), i = () => {
|
|
16
|
+
b(!e), a == null || a(!e);
|
|
15
17
|
};
|
|
16
|
-
return /* @__PURE__ */
|
|
18
|
+
return /* @__PURE__ */ c(
|
|
17
19
|
"button",
|
|
18
20
|
{
|
|
19
|
-
className:
|
|
21
|
+
className: r(
|
|
20
22
|
"bg-transparent",
|
|
21
23
|
"outline-none",
|
|
22
24
|
"border-none",
|
|
23
25
|
"hamburger-menu",
|
|
24
|
-
|
|
25
|
-
r == null ? void 0 : r.container
|
|
26
|
+
e && "hamburger-menu--active"
|
|
26
27
|
),
|
|
27
|
-
onClick:
|
|
28
|
-
...
|
|
28
|
+
onClick: i,
|
|
29
|
+
...m,
|
|
29
30
|
children: [
|
|
30
|
-
/* @__PURE__ */
|
|
31
|
+
/* @__PURE__ */ t(
|
|
31
32
|
"span",
|
|
32
33
|
{
|
|
33
|
-
className:
|
|
34
|
+
className: r(
|
|
34
35
|
"block",
|
|
35
36
|
"w-8",
|
|
36
37
|
"h-1",
|
|
@@ -38,16 +39,16 @@ const p = d(
|
|
|
38
39
|
"my-1",
|
|
39
40
|
"transition-all",
|
|
40
41
|
"rounded",
|
|
41
|
-
|
|
42
|
-
"hamburger-menu__bar"
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
e && "translate-y-2 -rotate-45 transform",
|
|
43
|
+
"hamburger-menu__bar"
|
|
44
|
+
),
|
|
45
|
+
...o
|
|
45
46
|
}
|
|
46
47
|
),
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
+
/* @__PURE__ */ t(
|
|
48
49
|
"span",
|
|
49
50
|
{
|
|
50
|
-
className:
|
|
51
|
+
className: r(
|
|
51
52
|
"block",
|
|
52
53
|
"w-8",
|
|
53
54
|
"h-1",
|
|
@@ -55,16 +56,16 @@ const p = d(
|
|
|
55
56
|
"my-1",
|
|
56
57
|
"transition-all",
|
|
57
58
|
"rounded",
|
|
58
|
-
|
|
59
|
-
"hamburger-menu__bar"
|
|
60
|
-
|
|
61
|
-
|
|
59
|
+
e && "opacity-0",
|
|
60
|
+
"hamburger-menu__bar"
|
|
61
|
+
),
|
|
62
|
+
...u
|
|
62
63
|
}
|
|
63
64
|
),
|
|
64
|
-
/* @__PURE__ */
|
|
65
|
+
/* @__PURE__ */ t(
|
|
65
66
|
"span",
|
|
66
67
|
{
|
|
67
|
-
className:
|
|
68
|
+
className: r(
|
|
68
69
|
"block",
|
|
69
70
|
"w-8",
|
|
70
71
|
"h-1",
|
|
@@ -72,10 +73,10 @@ const p = d(
|
|
|
72
73
|
"my-1",
|
|
73
74
|
"transition-all",
|
|
74
75
|
"rounded",
|
|
75
|
-
|
|
76
|
-
"hamburger-menu__bar"
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
e && "-translate-y-2 rotate-45 transform",
|
|
77
|
+
"hamburger-menu__bar"
|
|
78
|
+
),
|
|
79
|
+
...l
|
|
79
80
|
}
|
|
80
81
|
)
|
|
81
82
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purr-react-tailwindcss/components.hamburger-menu",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
"typescript": "*",
|
|
25
25
|
"react": "*",
|
|
26
26
|
"clsx": "*",
|
|
27
|
-
"@purr-core/utils.definitions": "0.0.
|
|
28
|
-
"@purr-core/hooks.sync-state-with-props": "0.0.
|
|
27
|
+
"@purr-core/utils.definitions": "0.0.6",
|
|
28
|
+
"@purr-core/hooks.sync-state-with-props": "0.0.4"
|
|
29
29
|
},
|
|
30
30
|
"author": "@DinhThienPhuc",
|
|
31
31
|
"license": "ISC",
|