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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.hamburger-menu",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "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-react-styled-components/utils.helpers": "0.0.7",
+    "@purr-core/hooks.sync-state-with-props": "0.0.8",
+    "@purr-core/utils.definitions": "0.0.11"
   },
   "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;
-};

package/dist/_types.d.ts

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

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

package/dist/index.d.ts

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

package/dist/index.js

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