@purr-react-styled-components/components.hamburger-menu 0.0.8 → 0.0.9

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.
Files changed (5) hide show
  1. package/dist/index.cjs +27 -0
  2. package/dist/index.d.cts +19 -0
  3. package/dist/index.d.ts +19 -0
  4. package/dist/index.js +27 -0
  5. package/package.json +4 -4
package/dist/index.cjs ADDED
@@ -0,0 +1,27 @@
1
+ 'use strict';var p=require('clsx'),n=require('react'),v=require('@purr-core/hooks.sync-state-with-props'),b=require('styled-components'),utils_helpers=require('@purr-react-styled-components/utils.helpers');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var p__default=/*#__PURE__*/_interopDefault(p);var n__default=/*#__PURE__*/_interopDefault(n);var v__default=/*#__PURE__*/_interopDefault(v);var b__default=/*#__PURE__*/_interopDefault(b);var a={Container:b__default.default.button`
2
+ ${utils_helpers.getInvisibleButton}
3
+ `,Bar:b__default.default.span`
4
+ display: block;
5
+ width: ${({$width:r})=>r}px;
6
+ height: ${({$height:r,$gap:e})=>(r-4*e)/3}px;
7
+ background-color: ${({$color:r})=>r};
8
+ margin: ${({$gap:r})=>r}px 0px;
9
+ transition: 0.4s;
10
+ border-radius: ${({$borderRadius:r})=>r}px;
11
+
12
+ &:nth-child(1) {
13
+ ${({$isActivated:r,$height:e,$gap:t})=>r&&b.css`
14
+ transform: translate(0, ${(e-t)/3}px) rotate(-45deg);
15
+ `}
16
+ }
17
+ &:nth-child(2) {
18
+ ${({$isActivated:r})=>r&&b.css`
19
+ opacity: 0;
20
+ `}
21
+ }
22
+ &:nth-child(3) {
23
+ ${({$isActivated:r,$height:e,$gap:t})=>r&&b.css`
24
+ transform: translate(0, -${(e-t)/3}px) rotate(45deg);
25
+ `}
26
+ }
27
+ `};var B=n.memo(({gap:r=5,width:e=32,height:t=32,borderRadius:i=4,color:s="#000000",isStandalone:$=true,active:l=false,className:g,onClick:h,htmlAttributes:d})=>{let{currentValue:o,setCurrentValue:c}=v__default.default(l,$),f=()=>{c(!o),h?.(!o);},m={$isActivated:o,$gap:r,$width:e,$height:t,$borderRadius:i,$color:s,className:p__default.default("hamburger-menu__bar",o&&"hamburger-menu__bar--active")};return n__default.default.createElement(a.Container,{...d,className:p__default.default("hamburger-menu",`hamburger-menu--gap-${r}`,`hamburger-menu--width-${e}`,`hamburger-menu--height-${t}`,`hamburger-menu--border-radius-${i}`,`hamburger-menu--color-${s}`,o&&"hamburger-menu--active",g),onClick:f},n__default.default.createElement(a.Bar,{...m}),n__default.default.createElement(a.Bar,{...m}),n__default.default.createElement(a.Bar,{...m}))});B.displayName="HamburgerMenu";exports.HamburgerMenu=B;
package/dist/index.d.cts ADDED
@@ -0,0 +1,19 @@
1
+ import React, { ButtonHTMLAttributes } from 'react';
2
+ import { IExtendable } from '@purr-core/utils.definitions';
3
+
4
+ interface IHamburgerMenuProps {
5
+ gap?: number;
6
+ width?: number;
7
+ height?: number;
8
+ borderRadius?: number;
9
+ onClick?: (active: boolean) => void;
10
+ color?: string;
11
+ active?: boolean;
12
+ className?: string;
13
+ isStandalone?: boolean;
14
+ htmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
15
+ }
16
+
17
+ declare const HamburgerMenu: React.MemoExoticComponent<({ gap, width, height, borderRadius, color, isStandalone, active, className, onClick, htmlAttributes, }: IHamburgerMenuProps) => React.JSX.Element>;
18
+
19
+ export { HamburgerMenu, type IHamburgerMenuProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import React, { ButtonHTMLAttributes } from 'react';
2
+ import { IExtendable } from '@purr-core/utils.definitions';
3
+
4
+ interface IHamburgerMenuProps {
5
+ gap?: number;
6
+ width?: number;
7
+ height?: number;
8
+ borderRadius?: number;
9
+ onClick?: (active: boolean) => void;
10
+ color?: string;
11
+ active?: boolean;
12
+ className?: string;
13
+ isStandalone?: boolean;
14
+ htmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
15
+ }
16
+
17
+ declare const HamburgerMenu: React.MemoExoticComponent<({ gap, width, height, borderRadius, color, isStandalone, active, className, onClick, htmlAttributes, }: IHamburgerMenuProps) => React.JSX.Element>;
18
+
19
+ export { HamburgerMenu, type IHamburgerMenuProps };
package/dist/index.js ADDED
@@ -0,0 +1,27 @@
1
+ import p from'clsx';import n,{memo}from'react';import v from'@purr-core/hooks.sync-state-with-props';import b,{css}from'styled-components';import {getInvisibleButton}from'@purr-react-styled-components/utils.helpers';var a={Container:b.button`
2
+ ${getInvisibleButton}
3
+ `,Bar:b.span`
4
+ display: block;
5
+ width: ${({$width:r})=>r}px;
6
+ height: ${({$height:r,$gap:e})=>(r-4*e)/3}px;
7
+ background-color: ${({$color:r})=>r};
8
+ margin: ${({$gap:r})=>r}px 0px;
9
+ transition: 0.4s;
10
+ border-radius: ${({$borderRadius:r})=>r}px;
11
+
12
+ &:nth-child(1) {
13
+ ${({$isActivated:r,$height:e,$gap:t})=>r&&css`
14
+ transform: translate(0, ${(e-t)/3}px) rotate(-45deg);
15
+ `}
16
+ }
17
+ &:nth-child(2) {
18
+ ${({$isActivated:r})=>r&&css`
19
+ opacity: 0;
20
+ `}
21
+ }
22
+ &:nth-child(3) {
23
+ ${({$isActivated:r,$height:e,$gap:t})=>r&&css`
24
+ transform: translate(0, -${(e-t)/3}px) rotate(45deg);
25
+ `}
26
+ }
27
+ `};var B=memo(({gap:r=5,width:e=32,height:t=32,borderRadius:i=4,color:s="#000000",isStandalone:$=true,active:l=false,className:g,onClick:h,htmlAttributes:d})=>{let{currentValue:o,setCurrentValue:c}=v(l,$),f=()=>{c(!o),h?.(!o);},m={$isActivated:o,$gap:r,$width:e,$height:t,$borderRadius:i,$color:s,className:p("hamburger-menu__bar",o&&"hamburger-menu__bar--active")};return n.createElement(a.Container,{...d,className:p("hamburger-menu",`hamburger-menu--gap-${r}`,`hamburger-menu--width-${e}`,`hamburger-menu--height-${t}`,`hamburger-menu--border-radius-${i}`,`hamburger-menu--color-${s}`,o&&"hamburger-menu--active",g),onClick:f},n.createElement(a.Bar,{...m}),n.createElement(a.Bar,{...m}),n.createElement(a.Bar,{...m}))});B.displayName="HamburgerMenu";export{B as HamburgerMenu};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purr-react-styled-components/components.hamburger-menu",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -26,9 +26,9 @@
26
26
  "react-dom": "*",
27
27
  "styled-components": "*",
28
28
  "clsx": "*",
29
- "@purr-react-styled-components/utils.helpers": "0.0.7",
30
- "@purr-core/hooks.sync-state-with-props": "0.0.8",
31
- "@purr-core/utils.definitions": "0.0.11"
29
+ "@purr-core/utils.definitions": "0.0.12",
30
+ "@purr-react-styled-components/utils.helpers": "0.0.8",
31
+ "@purr-core/hooks.sync-state-with-props": "0.0.9"
32
32
  },
33
33
  "author": "@DinhThienPhuc",
34
34
  "license": "ISC",