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

package/dist/index.cjs

@@ -1 +1,27 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),g=require("clsx"),_=require("react"),$=require("@purr-core/hooks.sync-state-with-props"),s=require("styled-components"),f=require("@purr-react-styled-components/utils.helpers"),u={Container:s.button.withConfig({displayName:"_style__Container",componentId:"sc-10gsfr3-0"})(["",""],f.getInvisibleButton),Bar:s.span.withConfig({displayName:"_style__Bar",componentId:"sc-10gsfr3-1"})(["display:block;width:","px;height:","px;background-color:",";margin:","px 0px;transition:0.4s;border-radius:","px;&:nth-child(1){","}&:nth-child(2){","}&:nth-child(3){","}"],({$width:e})=>e,({$height:e,$gap:r})=>(e-4*r)/3,({$color:e})=>e,({$gap:e})=>e,({$borderRadius:e})=>e,({$isActivated:e,$height:r,$gap:t})=>e&&s.css(["transform:translate(0,","px) rotate(-45deg);"],(r-t)/3),({$isActivated:e})=>e&&s.css(["opacity:0;"]),({$isActivated:e,$height:r,$gap:t})=>e&&s.css(["transform:translate(0,-","px) rotate(45deg);"],(r-t)/3))},l=_.memo(({gap:e=5,width:r=32,height:t=32,borderRadius:c=4,color:m="#000000",isStandalone:h=!0,active:d=!1,className:b,onClick:i,htmlAttributes:p})=>{const{currentValue:a,setCurrentValue:x}=$(d,h),y=()=>{x(!a),i==null||i(!a)},o={$isActivated:a,$gap:e,$width:r,$height:t,$borderRadius:c,$color:m,className:g("hamburger-menu__bar",a&&"hamburger-menu__bar--active")};return n.jsxs(u.Container,{...p,className:g("hamburger-menu",`hamburger-menu--gap-${e}`,`hamburger-menu--width-${r}`,`hamburger-menu--height-${t}`,`hamburger-menu--border-radius-${c}`,`hamburger-menu--color-${m}`,a&&"hamburger-menu--active",b),onClick:y,children:[n.jsx(u.Bar,{...o}),n.jsx(u.Bar,{...o}),n.jsx(u.Bar,{...o})]})});l.displayName="HamburgerMenu";exports.HamburgerMenu=l;
+'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`
+    ${utils_helpers.getInvisibleButton}
+  `,Bar:b__default.default.span`
+    display: block;
+    width: ${({$width:r})=>r}px;
+    height: ${({$height:r,$gap:e})=>(r-4*e)/3}px;
+    background-color: ${({$color:r})=>r};
+    margin: ${({$gap:r})=>r}px 0px;
+    transition: 0.4s;
+    border-radius: ${({$borderRadius:r})=>r}px;
+
+    &:nth-child(1) {
+      ${({$isActivated:r,$height:e,$gap:t})=>r&&b.css`
+          transform: translate(0, ${(e-t)/3}px) rotate(-45deg);
+        `}
+    }
+    &:nth-child(2) {
+      ${({$isActivated:r})=>r&&b.css`
+          opacity: 0;
+        `}
+    }
+    &:nth-child(3) {
+      ${({$isActivated:r,$height:e,$gap:t})=>r&&b.css`
+          transform: translate(0, -${(e-t)/3}px) rotate(45deg);
+        `}
+    }
+  `};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/{_types.d.ts → index.d.cts}

@@ -1,7 +1,7 @@
-import { ButtonHTMLAttributes } from 'react';
+import React, { ButtonHTMLAttributes } from 'react';
 import { IExtendable } from '@purr-core/utils.definitions';
 
-export interface IHamburgerMenuProps {
+interface IHamburgerMenuProps {
     gap?: number;
     width?: number;
     height?: number;
@@ -13,3 +13,7 @@ export interface IHamburgerMenuProps {
     isStandalone?: boolean;
     htmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
 }
+
+declare const HamburgerMenu: React.MemoExoticComponent<({ gap, width, height, borderRadius, color, isStandalone, active, className, onClick, htmlAttributes, }: IHamburgerMenuProps) => React.JSX.Element>;
+
+export { HamburgerMenu, type IHamburgerMenuProps };

package/dist/index.d.ts

@@ -1,2 +1,19 @@
-export * from './_components';
-export * from './_types';
+import React, { ButtonHTMLAttributes } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+interface IHamburgerMenuProps {
+    gap?: number;
+    width?: number;
+    height?: number;
+    borderRadius?: number;
+    onClick?: (active: boolean) => void;
+    color?: string;
+    active?: boolean;
+    className?: string;
+    isStandalone?: boolean;
+    htmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
+}
+
+declare const HamburgerMenu: React.MemoExoticComponent<({ gap, width, height, borderRadius, color, isStandalone, active, className, onClick, htmlAttributes, }: IHamburgerMenuProps) => React.JSX.Element>;
+
+export { HamburgerMenu, type IHamburgerMenuProps };

package/dist/index.js

@@ -1,72 +1,27 @@
-import { jsxs as $, jsx as s } from "react/jsx-runtime";
-import h from "clsx";
-import { memo as y } from "react";
-import _ from "@purr-core/hooks.sync-state-with-props";
-import g, { css as i } from "styled-components";
-import { getInvisibleButton as v } from "@purr-react-styled-components/utils.helpers";
-const n = {
-  Container: g.button.withConfig({
-    displayName: "_style__Container",
-    componentId: "sc-10gsfr3-0"
-  })(["", ""], v),
-  Bar: g.span.withConfig({
-    displayName: "_style__Bar",
-    componentId: "sc-10gsfr3-1"
-  })(["display:block;width:", "px;height:", "px;background-color:", ";margin:", "px 0px;transition:0.4s;border-radius:", "px;&:nth-child(1){", "}&:nth-child(2){", "}&:nth-child(3){", "}"], ({
-    $width: r
-  }) => r, ({
-    $height: r,
-    $gap: e
-  }) => (r - 4 * e) / 3, ({
-    $color: r
-  }) => r, ({
-    $gap: r
-  }) => r, ({
-    $borderRadius: r
-  }) => r, ({
-    $isActivated: r,
-    $height: e,
-    $gap: t
-  }) => r && i(["transform:translate(0,", "px) rotate(-45deg);"], (e - t) / 3), ({
-    $isActivated: r
-  }) => r && i(["opacity:0;"]), ({
-    $isActivated: r,
-    $height: e,
-    $gap: t
-  }) => r && i(["transform:translate(0,-", "px) rotate(45deg);"], (e - t) / 3))
-}, B = y(({
-  gap: r = 5,
-  width: e = 32,
-  height: t = 32,
-  borderRadius: u = 4,
-  color: c = "#000000",
-  isStandalone: p = !0,
-  active: d = !1,
-  className: l,
-  onClick: m,
-  htmlAttributes: b
-}) => {
-  const {
-    currentValue: a,
-    setCurrentValue: f
-  } = _(d, p), x = () => {
-    f(!a), m == null || m(!a);
-  }, o = {
-    $isActivated: a,
-    $gap: r,
-    $width: e,
-    $height: t,
-    $borderRadius: u,
-    $color: c,
-    className: h("hamburger-menu__bar", a && "hamburger-menu__bar--active")
-  };
-  return /* @__PURE__ */ $(n.Container, { ...b, className: h("hamburger-menu", `hamburger-menu--gap-${r}`, `hamburger-menu--width-${e}`, `hamburger-menu--height-${t}`, `hamburger-menu--border-radius-${u}`, `hamburger-menu--color-${c}`, a && "hamburger-menu--active", l), onClick: x, children: [
-    /* @__PURE__ */ s(n.Bar, { ...o }),
-    /* @__PURE__ */ s(n.Bar, { ...o }),
-    /* @__PURE__ */ s(n.Bar, { ...o })
-  ] });
-});
-B.displayName = "HamburgerMenu";
-export {
-  B as HamburgerMenu
-};
+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`
+    ${getInvisibleButton}
+  `,Bar:b.span`
+    display: block;
+    width: ${({$width:r})=>r}px;
+    height: ${({$height:r,$gap:e})=>(r-4*e)/3}px;
+    background-color: ${({$color:r})=>r};
+    margin: ${({$gap:r})=>r}px 0px;
+    transition: 0.4s;
+    border-radius: ${({$borderRadius:r})=>r}px;
+
+    &:nth-child(1) {
+      ${({$isActivated:r,$height:e,$gap:t})=>r&&css`
+          transform: translate(0, ${(e-t)/3}px) rotate(-45deg);
+        `}
+    }
+    &:nth-child(2) {
+      ${({$isActivated:r})=>r&&css`
+          opacity: 0;
+        `}
+    }
+    &:nth-child(3) {
+      ${({$isActivated:r,$height:e,$gap:t})=>r&&css`
+          transform: translate(0, -${(e-t)/3}px) rotate(45deg);
+        `}
+    }
+  `};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

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.hamburger-menu",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -26,9 +26,9 @@
     "react-dom": "*",
     "styled-components": "*",
     "clsx": "*",
-    "@purr-core/utils.definitions": "0.0.10",
-    "@purr-react-styled-components/utils.helpers": "0.0.6",
-    "@purr-core/hooks.sync-state-with-props": "0.0.7"
+    "@purr-core/utils.definitions": "0.0.12",
+    "@purr-react-styled-components/utils.helpers": "0.0.8",
+    "@purr-core/hooks.sync-state-with-props": "0.0.9"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -37,6 +37,8 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
+    "build:vite": "tsc && vite build",
+    "build:tsup": "tsup",
     "lint": "eslint . --ext ts,tsx --max-warnings 0"
   }
 }

package/dist/_components.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { IHamburgerMenuProps } from './_types';
-
-export declare const HamburgerMenu: React.MemoExoticComponent<({ gap, width, height, borderRadius, color, isStandalone, active, className, onClick, htmlAttributes, }: IHamburgerMenuProps) => React.JSX.Element>;

package/dist/_style.d.ts

@@ -1,11 +0,0 @@
-export declare const Styled: {
-    Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-    Bar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-        $isActivated: boolean;
-        $gap: number;
-        $width: number;
-        $height: number;
-        $borderRadius: number;
-        $color: string;
-    }>> & string;
-};