@jenesei-software/jenesei-kit-react 1.0.0

package/build/component-DZxbW_Jz.js

@@ -0,0 +1,237 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useMemo } from "react";
+import styled, { css, useTheme } from "styled-components";
+import { I as Icon } from "./component.styles-BapdQNhL.js";
+import { d as addRippleDefault } from "./component.styles-B0L4jbOO.js";
+import { R as Ripple } from "./component-ByY_9Ryc.js";
+import { motion } from "framer-motion";
+import { g as getFontSizeStyles, h as addSXTypography } from "./component-C2JFFh-k.js";
+import { b as addTransition, f as addOutline } from "./style-CEGJOjRW.js";
+import { a as addSX } from "./style-plT9Ah7t.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-bN9HlSWE.js";
+const ButtonGenre = css`
+  ${(props) => css`
+    background: ${props.theme.colors.button[props.$genre].background.rest};
+    border-color: ${props.theme.colors.button[props.$genre].border.rest};
+    color: ${props.theme.colors.button[props.$genre].color.rest};
+    &:hover {
+      ${!props.$isHidden && css`
+        background: ${props.theme.colors.button[props.$genre].background.hover};
+        border-color: ${props.theme.colors.button[props.$genre].border.hover};
+        color: ${props.theme.colors.button[props.$genre].color.hover};
+      `}
+    }
+  `};
+`;
+const ButtonDisabled = css`
+  ${(props) => props.$isHidden ? css`
+          opacity: 0.5;
+          background: ${props.theme.colors.button[props.$genre].background.rest} !important;
+          color: ${props.theme.colors.button[props.$genre].color.rest} !important;
+        ` : css`
+          opacity: 1;
+        `}
+`;
+const ButtonIsHiddenBorder = css`
+  ${(props) => props.$isHiddenBorder && css`
+      border: 0px transparent !important;
+    `}
+`;
+const ButtonIsRadius = css`
+  ${(props) => props.$isRadius && css`
+      border-radius: 100px;
+    `}
+`;
+const ButtonIsPlaystationEffect = css`
+  ${(props) => props.$isPlaystationEffect && css`
+      box-shadow: ${props.theme.effects.button};
+    `}
+`;
+const StyledButtonIconsWrapper = styled.div`
+  ${(props) => props.$isIconGroup ? css`
+          display: flex;
+          gap: ${KEY_SIZE_DATA[props.$size].padding - 2}px;
+          align-items: center;
+          order: ${props.$iconGroupOrder || "initial"};
+        ` : css`
+          display: contents;
+        `}
+`;
+const ButtonSize = css`
+  ${(props) => ButtonSizeConstructor({
+  ...KEY_SIZE_DATA[props.$size],
+  isFullSize: props.$isFullSize,
+  isWidthAsHeight: props.$isWidthAsHeight,
+  isMinWidthAsContent: props.$isMinWidthAsContent
+})};
+`;
+const ButtonSizeConstructor = (props) => css`
+  height: fit-content;
+  min-height: ${props.height}px;
+  max-height: fit-content;
+  padding: 2px ${props.padding}px;
+  border-radius: ${props.radius}px;
+  gap: ${props.padding - 2}px;
+  ${(params) => getFontSizeStyles(props.font, 700, params.theme.font.family)};
+  ${() => props.isFullSize && css`
+      height: 100%;
+      width: 100%;
+      border-radius: 0px;
+    `};
+  ${props.isWidthAsHeight && css`
+    width: ${props.height}px;
+    min-width: ${props.height}px;
+    padding: 0px;
+  `};
+  ${props.isMinWidthAsContent && css`
+    min-width: max-content;
+  `};
+`;
+const ButtonBorder = css`
+  border: 1px solid transparent;
+`;
+const ButtonFlex = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledButton = styled(motion.button)`
+  cursor: pointer;
+  user-select: none;
+
+  ${ButtonBorder};
+  ${ButtonSize};
+  ${ButtonGenre};
+  ${ButtonDisabled};
+  ${ButtonIsHiddenBorder};
+  ${ButtonIsRadius};
+  ${ButtonIsPlaystationEffect};
+  ${ButtonFlex};
+  ${addRippleDefault};
+  ${addTransition};
+  ${addOutline};
+  ${addSXTypography};
+  ${addSX};
+`;
+const Button = (props) => {
+  const theme = useTheme();
+  const iconComponents = useMemo(
+    () => {
+      var _a, _b;
+      return (_b = (_a = props.icons ?? []) == null ? void 0 : _a.filter((icon) => !icon.isHidden)) == null ? void 0 : _b.map(
+        (icon, index) => (icon == null ? void 0 : icon.type) === "id" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Icon,
+          {
+            name: icon == null ? void 0 : icon.name,
+            type: "id",
+            size: (icon == null ? void 0 : icon.size) ?? props.size,
+            turn: icon.turn,
+            order: icon.order
+          },
+          index
+        ) : (icon == null ? void 0 : icon.type) === "logo" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Icon,
+          {
+            name: icon == null ? void 0 : icon.name,
+            type: "logo",
+            size: (icon == null ? void 0 : icon.size) ?? props.size,
+            turn: icon.turn,
+            order: icon.order
+          },
+          index
+        ) : (icon == null ? void 0 : icon.type) === "checkbox" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Icon,
+          {
+            name: icon == null ? void 0 : icon.name,
+            type: "checkbox",
+            size: (icon == null ? void 0 : icon.size) ?? props.size,
+            turn: icon.turn,
+            order: icon.order
+          },
+          index
+        ) : (icon == null ? void 0 : icon.type) === "loading" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Icon,
+          {
+            name: icon == null ? void 0 : icon.name,
+            type: "loading",
+            size: (icon == null ? void 0 : icon.size) ?? props.size,
+            turn: icon.turn,
+            order: icon.order
+          },
+          index
+        ) : (icon == null ? void 0 : icon.type) === "realebail" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Icon,
+          {
+            name: icon == null ? void 0 : icon.name,
+            type: "realebail",
+            size: (icon == null ? void 0 : icon.size) ?? props.size,
+            turn: icon.turn,
+            order: icon.order
+          },
+          index
+        ) : null
+      );
+    },
+    [props.icons, props.size]
+  );
+  const handleClick = (event) => {
+    if (!props.isDisabled && props.onClick) {
+      props.onClick(event);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    StyledButton,
+    {
+      whileTap: props.isWhileTapEffect ? { scale: 0.9, transition: { duration: 0.02 } } : {},
+      id: props.id,
+      tabIndex: 0,
+      $isFullSize: props.isFullSize,
+      $genre: props.genre,
+      $size: props.size,
+      $isDisabled: props.isDisabled,
+      $isMinWidthAsContent: props.isMinWidthAsContent,
+      $isWidthAsHeight: props.isWidthAsHeight,
+      $isRadius: props.isRadius,
+      $isHidden: props.isHidden,
+      $isPlaystationEffect: props.isPlaystationEffect,
+      $sxTypography: props.sxTypography,
+      $isHiddenBorder: props.isHiddenBorder || props.isPlaystationEffect,
+      disabled: props.isDisabled,
+      type: props.type ?? "button",
+      className: props.className,
+      onClick: handleClick,
+      ref: props.ref,
+      $sx: props.sx,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Ripple,
+          {
+            color: theme.colors.checkbox[props.genre].color.rest,
+            isDisabled: props.isDisabled ?? props.isDisabledRipple,
+            isHidden: props.isHidden
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          !props.isOnlyIcon && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { order: 0, display: "contents" }, children: props.children && props.children }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            StyledButtonIconsWrapper,
+            {
+              $size: props.size,
+              $isIconGroup: props.isIconGroup,
+              $iconGroupOrder: "iconGroupOrder" in props ? props.iconGroupOrder : void 0,
+              children: iconComponents
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  ButtonSize as B,
+  StyledButtonIconsWrapper as S,
+  ButtonSizeConstructor as a,
+  StyledButton as b,
+  Button as c
+};
+//# sourceMappingURL=component-DZxbW_Jz.js.map

package/build/component-DZxbW_Jz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-DZxbW_Jz.js","sources":["../src/components/button/component.styles.ts","../src/components/button/component.tsx"],"sourcesContent":["import { motion } from 'framer-motion'\nimport styled, { css } from 'styled-components'\n\nimport { addRippleDefault } from '@local/components/ripple'\nimport { addSXTypography, getFontSizeStyles } from '@local/components/typography'\nimport { addOutline, addTransition } from '@local/styles/add'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledDollarButtonIconsWrapperProps, StyledDollarButtonProps } from '.'\n\n/****************************************** Genre *************************************************/\nconst ButtonGenre = css<StyledDollarButtonProps>`\n  ${props => css`\n    background: ${props.theme.colors.button[props.$genre].background.rest};\n    border-color: ${props.theme.colors.button[props.$genre].border.rest};\n    color: ${props.theme.colors.button[props.$genre].color.rest};\n    &:hover {\n      ${!props.$isHidden &&\n      css`\n        background: ${props.theme.colors.button[props.$genre].background.hover};\n        border-color: ${props.theme.colors.button[props.$genre].border.hover};\n        color: ${props.theme.colors.button[props.$genre].color.hover};\n      `}\n    }\n  `};\n`\n\n/****************************************** Disabled *************************************************/\nconst ButtonDisabled = css<StyledDollarButtonProps>`\n  ${props =>\n    props.$isHidden\n      ? css`\n          opacity: 0.5;\n          background: ${props.theme.colors.button[props.$genre].background.rest} !important;\n          color: ${props.theme.colors.button[props.$genre].color.rest} !important;\n        `\n      : css`\n          opacity: 1;\n        `}\n`\n/****************************************** is HiddenBorder *************************************************/\nconst ButtonIsHiddenBorder = css<StyledDollarButtonProps>`\n  ${props =>\n    props.$isHiddenBorder &&\n    css`\n      border: 0px transparent !important;\n    `}\n`\n/****************************************** is Radius *************************************************/\nconst ButtonIsRadius = css<StyledDollarButtonProps>`\n  ${props =>\n    props.$isRadius &&\n    css`\n      border-radius: 100px;\n    `}\n`\n/****************************************** is PlaystationEffect *************************************************/\nconst ButtonIsPlaystationEffect = css<StyledDollarButtonProps>`\n  ${props =>\n    props.$isPlaystationEffect &&\n    css`\n      box-shadow: ${props.theme.effects.button};\n    `}\n`\n/****************************************** Icons Wrapper *************************************************/\nexport const StyledButtonIconsWrapper = styled.div<StyledDollarButtonIconsWrapperProps>`\n  ${props =>\n    props.$isIconGroup\n      ? css`\n          display: flex;\n          gap: ${KEY_SIZE_DATA[props.$size].padding - 2}px;\n          align-items: center;\n          order: ${props.$iconGroupOrder || 'initial'};\n        `\n      : css`\n          display: contents;\n        `}\n`\n\n/****************************************** Size *************************************************/\nexport const ButtonSize = css<StyledDollarButtonProps>`\n  ${props =>\n    ButtonSizeConstructor({\n      ...KEY_SIZE_DATA[props.$size],\n      isFullSize: props.$isFullSize,\n      isWidthAsHeight: props.$isWidthAsHeight,\n      isMinWidthAsContent: props.$isMinWidthAsContent\n    })};\n`\nexport const ButtonSizeConstructor = (\n  props: IThemeSizePropertyDefault & {\n    isFullSize?: boolean\n    isWidthAsHeight?: boolean\n    isMinWidthAsContent?: boolean\n  }\n) => css`\n  height: fit-content;\n  min-height: ${props.height}px;\n  max-height: fit-content;\n  padding: 2px ${props.padding}px;\n  border-radius: ${props.radius}px;\n  gap: ${props.padding - 2}px;\n  ${params => getFontSizeStyles(props.font, 700, params.theme.font.family)};\n  ${() =>\n    props.isFullSize &&\n    css`\n      height: 100%;\n      width: 100%;\n      border-radius: 0px;\n    `};\n  ${props.isWidthAsHeight &&\n  css`\n    width: ${props.height}px;\n    min-width: ${props.height}px;\n    padding: 0px;\n  `};\n  ${props.isMinWidthAsContent &&\n  css`\n    min-width: max-content;\n  `};\n`\n/****************************************** Border *************************************************/\nconst ButtonBorder = css`\n  border: 1px solid transparent;\n`\n\n/****************************************** Flex *************************************************/\nconst ButtonFlex = css<StyledDollarButtonProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n/****************************************** Styled *************************************************/\nexport const StyledButton = styled(motion.button)<StyledDollarButtonProps>`\n  cursor: pointer;\n  user-select: none;\n\n  ${ButtonBorder};\n  ${ButtonSize};\n  ${ButtonGenre};\n  ${ButtonDisabled};\n  ${ButtonIsHiddenBorder};\n  ${ButtonIsRadius};\n  ${ButtonIsPlaystationEffect};\n  ${ButtonFlex};\n  ${addRippleDefault};\n  ${addTransition};\n  ${addOutline};\n  ${addSXTypography};\n  ${addSX};\n`\n","import { FC, Ref, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\n\nimport {\n  Icon,\n  TIconCheckboxNameString,\n  TIconIdNameString,\n  TIconLoadingNameString,\n  TIconLogoNameString,\n  TIconRealEbailNameString\n} from '@local/components/icon'\nimport { Ripple } from '@local/components/ripple'\n\nimport { ButtonProps, StyledButton, StyledButtonIconsWrapper } from '.'\n\nexport const Button: FC<ButtonProps> = props => {\n  const theme = useTheme()\n\n  const iconComponents = useMemo(\n    () =>\n      (props.icons ?? [])\n        ?.filter(icon => !icon.isHidden)\n        ?.map((icon, index) =>\n          icon?.type === 'id' ? (\n            <Icon\n              key={index}\n              name={icon?.name as TIconIdNameString}\n              type=\"id\"\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'logo' ? (\n            <Icon\n              key={index}\n              name={icon?.name as TIconLogoNameString}\n              type=\"logo\"\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'checkbox' ? (\n            <Icon\n              key={index}\n              name={icon?.name as TIconCheckboxNameString}\n              type=\"checkbox\"\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'loading' ? (\n            <Icon\n              key={index}\n              name={icon?.name as TIconLoadingNameString}\n              type=\"loading\"\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'realebail' ? (\n            <Icon\n              key={index}\n              name={icon?.name as TIconRealEbailNameString}\n              type=\"realebail\"\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : null\n        ),\n    [props.icons, props.size]\n  )\n\n  const handleClick: ButtonProps['onClick'] = event => {\n    if (!props.isDisabled && props.onClick) {\n      props.onClick(event)\n    }\n  }\n\n  return (\n    <StyledButton\n      whileTap={props.isWhileTapEffect ? { scale: 0.9, transition: { duration: 0.02 } } : {}}\n      id={props.id}\n      tabIndex={0}\n      $isFullSize={props.isFullSize}\n      $genre={props.genre}\n      $size={props.size}\n      $isDisabled={props.isDisabled}\n      $isMinWidthAsContent={props.isMinWidthAsContent}\n      $isWidthAsHeight={props.isWidthAsHeight}\n      $isRadius={props.isRadius}\n      $isHidden={props.isHidden}\n      $isPlaystationEffect={props.isPlaystationEffect}\n      $sxTypography={props.sxTypography}\n      $isHiddenBorder={props.isHiddenBorder || props.isPlaystationEffect}\n      disabled={props.isDisabled}\n      type={props.type ?? 'button'}\n      className={props.className}\n      onClick={handleClick}\n      ref={props.ref as Ref<HTMLButtonElement>}\n      $sx={props.sx}\n    >\n      <Ripple\n        color={theme.colors.checkbox[props.genre].color.rest}\n        isDisabled={props.isDisabled ?? props.isDisabledRipple}\n        isHidden={props.isHidden}\n      />\n      <>\n        {!props.isOnlyIcon && <div style={{ order: 0, display: 'contents' }}>{props.children && props.children}</div>}\n        <StyledButtonIconsWrapper\n          $size={props.size}\n          $isIconGroup={props.isIconGroup}\n          $iconGroupOrder={'iconGroupOrder' in props ? props.iconGroupOrder : undefined}\n        >\n          {iconComponents}\n        </StyledButtonIconsWrapper>\n      </>\n    </StyledButton>\n  )\n}\n"],"names":["jsx","jsxs","Fragment"],"mappings":"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"}

package/build/component-UW1VzyvB.cjs

@@ -0,0 +1,52 @@
+"use strict";const t=require("./jsx-runtime-BcGej2Kr.cjs"),e=require("./component-D1NPhRuV.cjs"),r=require("styled-components"),o=require("./style-fRZ6xrVp.cjs"),i=r.css`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  justify-content: space-between;
+  & #jenesei-button {
+    &:not(:only-child) {
+      flex-grow: 1;
+      &:first-child {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      }
+      &:last-child {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+      }
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+      }
+    }
+  }
+`,s=r.css`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+
+  & #jenesei-button {
+    &:not(:only-child) {
+      &:first-child {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      &:last-child {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+      }
+    }
+  }
+`,n=r.styled.div`
+  & #jenesei-button {
+    &:focus-visible {
+      z-index: 1;
+    }
+  }
+  ${t=>"horizontal"===t.$position?i:s};
+  ${o.addSX};
+`;exports.ButtonGroup=r=>{var o;return t.jsxRuntimeExports.jsx(n,{$sx:r.sx,$position:r.position,className:r.className,id:"jenesei-button-group",children:null==(o=r.value)?void 0:o.map((r,o)=>t.jsxRuntimeExports.jsx(e.Button,{id:"jenesei-button",...r},o))})},exports.ButtonGroupWrapper=n;
+//# sourceMappingURL=component-UW1VzyvB.cjs.map

package/build/component-UW1VzyvB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-UW1VzyvB.cjs","sources":["../src/components/button-group/component.styles.ts","../src/components/button-group/component.tsx"],"sourcesContent":["import { css, styled } from 'styled-components'\n\nimport { addSX } from '@local/styles/sx'\n\nimport { StyledButtonGroupProps } from '.'\n\n/****************************************** Position *************************************************/\nconst ButtonGroupWrapperPositionHorizontal = css`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  justify-content: space-between;\n  & #jenesei-button {\n    &:not(:only-child) {\n      flex-grow: 1;\n      &:first-child {\n        border-bottom-right-radius: 0;\n        border-top-right-radius: 0;\n      }\n      &:last-child {\n        border-bottom-left-radius: 0;\n        border-top-left-radius: 0;\n      }\n      &:not(:first-child):not(:last-child) {\n        border-radius: 0;\n      }\n    }\n  }\n`\n\nconst ButtonGroupWrapperPositionVertical = css`\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n\n  & #jenesei-button {\n    &:not(:only-child) {\n      &:first-child {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      &:last-child {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n      &:not(:first-child):not(:last-child) {\n        border-radius: 0;\n      }\n    }\n  }\n`\n\nexport const ButtonGroupWrapper = styled.div<StyledButtonGroupProps>`\n  & #jenesei-button {\n    &:focus-visible {\n      z-index: 1;\n    }\n  }\n  ${props =>\n    props.$position === 'horizontal' ? ButtonGroupWrapperPositionHorizontal : ButtonGroupWrapperPositionVertical};\n  ${addSX};\n`\n","import { FC } from 'react'\n\nimport { Button } from '@local/components/button'\n\nimport { ButtonGroupProps, ButtonGroupWrapper } from '.'\n\nexport const ButtonGroup: FC<ButtonGroupProps> = props => {\n  return (\n    <ButtonGroupWrapper $sx={props.sx} $position={props.position} className={props.className} id=\"jenesei-button-group\">\n      {props.value?.map((button, id) => <Button id=\"jenesei-button\" key={id} {...button} />)}\n    </ButtonGroupWrapper>\n  )\n}\n"],"names":["ButtonGroupWrapperPositionHorizontal","css","ButtonGroupWrapperPositionVertical","ButtonGroupWrapper","styled","div","props","$position","addSX","jsx","$sx","sx","position","className","id","children","_a","value","map","button","Button"],"mappings":"kKAOMA,EAAuCC,EAAAA,GAAAA;;;;;;;;;;;;;;;;;;;;;;EAwBvCC,EAAqCD,EAAAA,GAAAA;;;;;;;;;;;;;;;;;;;;EAsB9BE,EAAqBC,EAAAA,OAAOC,GAAA;;;;;;IAMrCC,GACoB,eAApBA,EAAMC,UAA6BP,EAAuCE;IAC1EM;sBCvD6CF,UAC/C,SACEG,kBAAAA,IAACN,EAAA,CAAmBO,IAAKJ,EAAMK,GAAIJ,UAAWD,EAAMM,SAAUC,UAAWP,EAAMO,UAAWC,GAAG,uBAC1FC,SAAA,OAAAC,EAAAV,EAAMW,YAAN,EAAAD,EAAaE,IAAI,CAACC,EAAQL,IAAOL,EAAAA,kBAAAA,IAACW,EAAAA,OAAA,CAAON,GAAG,oBAA8BK,GAARL"}

package/build/component-accordion.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./component.styles-DyGfo9t0.cjs");exports.Accordion=o.Accordion,exports.AccordionDetails=o.AccordionDetails,exports.AccordionStyledIcon=o.AccordionStyledIcon,exports.AccordionSummary=o.AccordionSummary,exports.AccordionSummaryContent=o.AccordionSummaryContent,exports.AccordionWrapper=o.AccordionWrapper;
+//# sourceMappingURL=component-accordion.cjs.js.map

package/build/component-accordion.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-accordion.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/component-accordion.d.ts

@@ -0,0 +1,94 @@
+import { AccordionProps as AccordionProps_2 } from './component.types';
+import { AddDollarSign } from '../..';
+import { addSXProps as addSXProps_2 } from '../..';
+import { Component } from 'react';
+import { CSSObject } from 'styled-components';
+import { DefaultTheme } from 'styled-components';
+import { DetailedHTMLProps } from 'react';
+import { DragEvent as DragEvent_2 } from 'react';
+import { DragEventHandler } from 'react';
+import { FastOmit } from 'styled-components';
+import { FC } from 'react';
+import { HTMLAttributes } from 'react';
+import { IconItemProps } from '../icon';
+import { IconTypeMap } from '../icon';
+import { IStyledComponentBase } from 'styled-components/dist/types';
+import { IThemePaletteKeys } from '../..';
+import { IThemeSize } from '../..';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { Substitute } from 'styled-components/dist/types';
+
+export declare const Accordion: FC<AccordionProps>;
+
+export declare const AccordionDetails: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign<Pick<AccordionProps_2, "expanded">>>> & string;
+
+export declare type AccordionDetailsProps = AddDollarSign_2<Pick<AccordionProps, 'expanded'>>;
+
+export declare interface AccordionProps {
+    wrapperProps: StackProps;
+    accordionSummary: ReactNode;
+    accordionDetails: ReactNode;
+    expanded: boolean;
+    isAccordionIcon?: boolean;
+    onClickSummary?: () => void;
+    onClickIcon?: () => void;
+    triggerUpdate?: unknown[];
+}
+
+export declare const AccordionStyledIcon: IStyledComponentBase<"web", Substitute<    {
+type: keyof IconTypeMap;
+name: "Radio" | "Square" | "Arrow" | "Heart" | "Close" | "Biometry" | "QR" | "Search" | "Folder" | "Wallet" | "Graph" | "Bookmark" | "Category" | "Home" | "Notification" | "Chat" | "Paper" | "Plus" | "Minus" | "PaperPlus" | "PaperNegative" | "PaperFail" | "PaperDownload" | "PaperUpload" | "Send" | "PasswordMini" | "Swap" | "Work" | "Arrow1" | "Arrow2" | "Arrow3" | "Arrow4" | "ArrowMini1" | "ArrowMini2" | "Scan" | "Activity" | "Calendar" | "Message" | "PlusMini" | "ChartMini" | "Game" | "Bag1" | "Bag2" | "TicketStar" | "MoreCircle" | "MoreSquare" | "Discount" | "Buy" | "Web" | "InfoMini" | "DangerMini" | "DangerTriangle" | "CloseMini" | "TickMini" | "Video" | "Discovery" | "Location" | "Document" | "Setting" | "TimeSquare" | "TimeCircle" | "VolumeUp" | "VolumeDown" | "VolumeOff" | "Star" | "Select" | "Ticket" | "Camera" | "Profile" | "AddUser" | "TwoUser" | "ThreeUser" | "Login" | "Logout" | "Download" | "Upload" | "Voice" | "Voice2" | "Delete" | "Edit" | "EditSquare" | "PlayMini" | "ShieldDone" | "ShieldFail" | "Show" | "Hide" | "Filter" | "Filter2" | "Image" | "Image2" | "Call" | "Calling" | "CallMissed" | "CallSilent" | "Lock" | "Unlock" | "Resources" | "Language" | "Line" | "Circle" | "Blocks" | "Balls" | "Map" | "HomeLikes" | "HomeManagement" | "UserSettings" | "User" | "Jenesei";
+className?: string;
+onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
+size: IThemeSize | "100%";
+primaryColor?: IThemePaletteKeys;
+secondColor?: IThemePaletteKeys;
+turn?: number;
+order?: number;
+tabIndex?: number;
+} & addSXProps_2, AddDollarSign<Pick<AccordionProps_2, "expanded">>>> & string & Omit<(<T extends keyof IconTypeMap>(props: IconItemProps<T>) => JSX.Element | null), keyof Component<any, {}, any>>;
+
+export declare type AccordionStyledIconProps = AddDollarSign_2<Pick<AccordionProps, 'expanded'>>;
+
+export declare const AccordionSummary: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+
+export declare const AccordionSummaryContent: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign<Pick<AccordionProps_2, "isAccordionIcon">>>> & string;
+
+export declare type AccordionSummaryContentProps = AddDollarSign_2<Pick<AccordionProps, 'isAccordionIcon'>>;
+
+export declare const AccordionWrapper: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+
+declare type AddDollarSign_2<T> = {
+    [K in keyof T as `$${string & K}`]: T[K];
+};
+
+declare interface addSXProps {
+    sx?: SXProps;
+}
+
+declare type IThemeDevice = 'default' | 'tablet' | 'mobile';
+
+declare interface StackProps extends addSXProps, PropsWithChildren {
+    className?: string;
+    isHover?: boolean;
+    isRipple?: boolean;
+    onClick?: () => void;
+    onDrop?: (e: DragEvent_2<HTMLDivElement>) => void;
+    onDragOver?: DragEventHandler<HTMLDivElement>;
+    ref?: Ref<HTMLDivElement | null>;
+}
+
+declare type SXProps = ({
+    default: CSSObject;
+} & {
+    [K in IThemeDevice]?: CSSObject;
+}) | ((theme: DefaultTheme) => {
+    default: CSSObject;
+} & {
+    [K in IThemeDevice]?: CSSObject;
+});
+
+export { }

package/build/component-accordion.es.js

@@ -0,0 +1,10 @@
+import { A, d, e, b, c, a } from "./component.styles-C6LohBfF.js";
+export {
+  A as Accordion,
+  d as AccordionDetails,
+  e as AccordionStyledIcon,
+  b as AccordionSummary,
+  c as AccordionSummaryContent,
+  a as AccordionWrapper
+};
+//# sourceMappingURL=component-accordion.es.js.map

package/build/component-accordion.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-accordion.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/build/component-button-group.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./component-UW1VzyvB.cjs");exports.ButtonGroup=t.ButtonGroup,exports.ButtonGroupWrapper=t.ButtonGroupWrapper;
+//# sourceMappingURL=component-button-group.cjs.js.map

package/build/component-button-group.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-button-group.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}