@purr-react-styled-components/components.hamburger-menu 0.0.1

package/dist/_components.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,11 @@
+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;
+};

package/dist/_types.d.ts

@@ -0,0 +1,15 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+export 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;
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),g=require("clsx"),y=require("react"),_=require("@purr-core/hooks.sync-state-with-props"),s=require("styled-components"),$=require("@purr-react-styled-components/utils.helpers"),u={Container:s.button.withConfig({displayName:"_style__Container",componentId:"sc-10gsfr3-0"})(["",""],$.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=y.memo(({gap:e=5,width:r=32,height:t=32,borderRadius:c=4,color:m="#ffffff",isStandalone:h=!0,active:d=!1,className:b,onClick:i,htmlAttributes:p})=>{const{currentValue:a,setCurrentValue:f}=_(d,h),x=()=>{f(!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:x,children:[n.jsx(u.Bar,{...o}),n.jsx(u.Bar,{...o}),n.jsx(u.Bar,{...o})]})});l.displayName="HamburgerMenu";exports.HamburgerMenu=l;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './_components';
+export * from './_types';

package/dist/index.js

@@ -0,0 +1,72 @@
+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 = "#ffffff",
+  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
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@purr-react-styled-components/components.hamburger-menu",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "typescript": "*",
+    "react": "*",
+    "styled-components": "*",
+    "clsx": "*",
+    "@purr-core/utils.definitions": "0.0.4",
+    "@purr-core/hooks.sync-state-with-props": "0.0.2",
+    "@purr-react-styled-components/utils.helpers": "0.0.1"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}