@purr-react-tailwindcss/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<({ isStandalone, active, classes, onClick, htmlAttributes, }: IHamburgerMenuProps) => React.JSX.Element>;

package/dist/_types.d.ts

@@ -0,0 +1,23 @@
+import { ClassValue } from 'clsx';
+import { ButtonHTMLAttributes } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+export interface IHamburgerMenuClasses {
+    container?: ClassValue;
+    firstBar?: ClassValue;
+    secondBar?: ClassValue;
+    thirdBar?: ClassValue;
+}
+export interface IHamburgerMenuBuiltClasses {
+    container?: string;
+    firstBar?: string;
+    secondBar?: string;
+    thirdBar?: string;
+}
+export interface IHamburgerMenuProps {
+    onClick?: (active: boolean) => void;
+    active?: boolean;
+    classes?: IHamburgerMenuClasses;
+    htmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
+    isStandalone?: boolean;
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("clsx"),d=require("react"),h=require("@purr-core/hooks.sync-state-with-props"),u=d.memo(({isStandalone:o=!0,active:m=!1,classes:r,onClick:a,htmlAttributes:i})=>{const{currentValue:t,setCurrentValue:b}=h(m,o),g=()=>{b(!t),a==null||a(!t)};return e.jsxs("button",{className:n("bg-transparent","outline-none","border-none","hamburger-menu",t&&"hamburger-menu--active",r==null?void 0:r.container),onClick:g,...i,children:[e.jsx("span",{className:n("block","w-8","h-1","bg-white","my-1","transition-all","rounded",t&&"transform translate-y-2 -rotate-45","hamburger-menu__bar",r==null?void 0:r.firstBar)}),e.jsx("span",{className:n("block","w-8","h-1","bg-white","my-1","transition-all","rounded",t&&"opacity-0","hamburger-menu__bar",r==null?void 0:r.secondBar)}),e.jsx("span",{className:n("block","w-8","h-1","bg-white","my-1","transition-all","rounded",t&&"transform -translate-y-2 rotate-45","hamburger-menu__bar",r==null?void 0:r.thirdBar)})]})});u.displayName="HamburgerMenu";exports.HamburgerMenu=u;

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,89 @@
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
+import n from "clsx";
+import { memo as d } from "react";
+import g from "@purr-core/hooks.sync-state-with-props";
+const p = d(
+  ({
+    isStandalone: a = !0,
+    active: m = !1,
+    classes: r,
+    onClick: e,
+    htmlAttributes: u
+  }) => {
+    const { currentValue: t, setCurrentValue: i } = g(m, a), b = () => {
+      i(!t), e == null || e(!t);
+    };
+    return /* @__PURE__ */ h(
+      "button",
+      {
+        className: n(
+          "bg-transparent",
+          "outline-none",
+          "border-none",
+          "hamburger-menu",
+          t && "hamburger-menu--active",
+          r == null ? void 0 : r.container
+        ),
+        onClick: b,
+        ...u,
+        children: [
+          /* @__PURE__ */ o(
+            "span",
+            {
+              className: n(
+                "block",
+                "w-8",
+                "h-1",
+                "bg-white",
+                "my-1",
+                "transition-all",
+                "rounded",
+                t && "transform translate-y-2 -rotate-45",
+                "hamburger-menu__bar",
+                r == null ? void 0 : r.firstBar
+              )
+            }
+          ),
+          /* @__PURE__ */ o(
+            "span",
+            {
+              className: n(
+                "block",
+                "w-8",
+                "h-1",
+                "bg-white",
+                "my-1",
+                "transition-all",
+                "rounded",
+                t && "opacity-0",
+                "hamburger-menu__bar",
+                r == null ? void 0 : r.secondBar
+              )
+            }
+          ),
+          /* @__PURE__ */ o(
+            "span",
+            {
+              className: n(
+                "block",
+                "w-8",
+                "h-1",
+                "bg-white",
+                "my-1",
+                "transition-all",
+                "rounded",
+                t && "transform -translate-y-2 rotate-45",
+                "hamburger-menu__bar",
+                r == null ? void 0 : r.thirdBar
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+p.displayName = "HamburgerMenu";
+export {
+  p as HamburgerMenu
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@purr-react-tailwindcss/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": "*",
+    "clsx": "*",
+    "@purr-core/utils.definitions": "0.0.5",
+    "@purr-core/hooks.sync-state-with-props": "0.0.3"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}