polpo 0.1.13 → 0.1.16

package/dist/layouts.cjs

@@ -1,147 +1,2 @@
 "use client";
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/layouts/index.ts
-var layouts_exports = {};
-__export(layouts_exports, {
-  Flex: () => Flex,
-  Grid: () => Grid
-});
-module.exports = __toCommonJS(layouts_exports);
-
-// src/layouts/flex/flex.component.tsx
-var import_react = require("react");
-var Flex = ({
-  tag = "section",
-  children,
-  className,
-  style,
-  direction,
-  wrap,
-  basis,
-  grow,
-  shrink,
-  flow,
-  pc,
-  pi,
-  ps,
-  jc,
-  ji,
-  js,
-  ac,
-  ai,
-  as,
-  gap
-}) => {
-  return (0, import_react.createElement)(
-    tag,
-    {
-      className,
-      style: {
-        ...style,
-        ...direction ? { flexDirection: direction } : {},
-        ...wrap ? { flexWrap: wrap } : {},
-        ...basis ? { flexBasis: basis } : {},
-        ...grow ? { flexGrow: grow } : {},
-        ...shrink ? { flexShrink: shrink } : {},
-        ...flow ? { flexFlow: flow } : {},
-        ...pc ? { placeContent: pc } : {},
-        ...pi ? { placeItems: pi } : {},
-        ...ps ? { placeSelf: ps } : {},
-        ...jc ? { justifyContent: jc } : {},
-        ...ji ? { justifyItems: ji } : {},
-        ...js ? { justifySelf: js } : {},
-        ...ac ? { alignContent: ac } : {},
-        ...ai ? { alignItems: ai } : {},
-        ...as ? { alignSelf: as } : {},
-        ...gap ? { gap } : {},
-        display: "flex"
-      }
-    },
-    children
-  );
-};
-
-// src/layouts/grid/grid.component.tsx
-var import_react2 = require("react");
-var Grid = ({
-  tag = "section",
-  children,
-  className,
-  style,
-  flow,
-  columnSize,
-  rowSize,
-  column,
-  row,
-  pc,
-  pi,
-  ps,
-  jc,
-  ji,
-  js,
-  ac,
-  ai,
-  as,
-  gtc,
-  gtr,
-  gta,
-  gt,
-  gap,
-  ...props
-}) => {
-  return (0, import_react2.createElement)(
-    tag,
-    {
-      className,
-      ...props,
-      style: {
-        ...style,
-        ...flow ? { gridAutoFlow: flow } : {},
-        ...columnSize ? { gridAutoColumns: columnSize } : {},
-        ...rowSize ? { gridAutoRows: rowSize } : {},
-        ...column ? { gridColumn: column } : {},
-        ...row ? { gridRow: row } : {},
-        ...pc ? { placeContent: pc } : {},
-        ...pi ? { placeItems: pi } : {},
-        ...ps ? { placeSelf: ps } : {},
-        ...jc ? { justifyContent: jc } : {},
-        ...ji ? { justifyItems: ji } : {},
-        ...js ? { justifySelf: js } : {},
-        ...ac ? { alignContent: ac } : {},
-        ...ai ? { alignItems: ai } : {},
-        ...as ? { alignSelf: as } : {},
-        ...gtc ? { gridTemplateColumns: gtc } : {},
-        ...gtr ? { gridTemplateRows: gtr } : {},
-        ...gta ? { gridTemplateAreas: gta } : {},
-        ...gt ? { gridTemplate: gt } : {},
-        ...gap ? { gap } : {},
-        display: "grid"
-      }
-    },
-    children
-  );
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Flex,
-  Grid
-});
-//# sourceMappingURL=layouts.cjs.map
+"use strict";var y=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var M=(t,e)=>{for(var i in e)y(t,i,{get:e[i],enumerable:!0})},h=(t,e,i,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of E(e))!L.call(t,r)&&r!==i&&y(t,r,{get:()=>e[r],enumerable:!(a=F(e,r))||a.enumerable});return t};var G=t=>h(y({},"__esModule",{value:!0}),t);var D={};M(D,{Flex:()=>H,Grid:()=>N});module.exports=G(D);var I=require("react"),H=({tag:t="section",children:e,className:i,style:a,direction:r,wrap:s,basis:o,grow:l,shrink:S,flow:p,pc:c,pi:n,ps:C,jc:R,ji:f,js:m,ac:g,ai:P,as:d,gap:u})=>(0,I.createElement)(t,{className:i,style:{...a,...r?{flexDirection:r}:{},...s?{flexWrap:s}:{},...o?{flexBasis:o}:{},...l?{flexGrow:l}:{},...S?{flexShrink:S}:{},...p?{flexFlow:p}:{},...c?{placeContent:c}:{},...n?{placeItems:n}:{},...C?{placeSelf:C}:{},...R?{justifyContent:R}:{},...f?{justifyItems:f}:{},...m?{justifySelf:m}:{},...g?{alignContent:g}:{},...P?{alignItems:P}:{},...d?{alignSelf:d}:{},...u?{gap:u}:{},display:"flex"}},e);var j=require("react");var N=({tag:t="section",children:e,className:i,style:a,flow:r,columnSize:s,rowSize:o,column:l,row:S,pc:p,pi:c,ps:n,jc:C,ji:R,js:f,ac:m,ai:g,as:P,gtc:d,gtr:u,gta:x,gt:T,gap:w,...A})=>(0,j.createElement)(t,{className:i,...A,style:{...a,...r?{gridAutoFlow:r}:{},...s?{gridAutoColumns:s}:{},...o?{gridAutoRows:o}:{},...l?{gridColumn:l}:{},...S?{gridRow:S}:{},...p?{placeContent:p}:{},...c?{placeItems:c}:{},...n?{placeSelf:n}:{},...C?{justifyContent:C}:{},...R?{justifyItems:R}:{},...f?{justifySelf:f}:{},...m?{alignContent:m}:{},...g?{alignItems:g}:{},...P?{alignSelf:P}:{},...d?{gridTemplateColumns:d}:{},...u?{gridTemplateRows:u}:{},...x?{gridTemplateAreas:x}:{},...T?{gridTemplate:T}:{},...w?{gap:w}:{},display:"grid"}},e);0&&(module.exports={Flex,Grid});

package/dist/layouts.css

@@ -1,5 +1,2 @@
-/* src/layouts/grid/grid.styles.css */
-.grida {
-  display: grid;
-}
-/*# sourceMappingURL=layouts.css.map */
+.grida{display:grid}
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */

package/dist/layouts.js

@@ -1,120 +1,2 @@
 "use client";
-
-// src/layouts/flex/flex.component.tsx
-import { createElement } from "react";
-var Flex = ({
-  tag = "section",
-  children,
-  className,
-  style,
-  direction,
-  wrap,
-  basis,
-  grow,
-  shrink,
-  flow,
-  pc,
-  pi,
-  ps,
-  jc,
-  ji,
-  js,
-  ac,
-  ai,
-  as,
-  gap
-}) => {
-  return createElement(
-    tag,
-    {
-      className,
-      style: {
-        ...style,
-        ...direction ? { flexDirection: direction } : {},
-        ...wrap ? { flexWrap: wrap } : {},
-        ...basis ? { flexBasis: basis } : {},
-        ...grow ? { flexGrow: grow } : {},
-        ...shrink ? { flexShrink: shrink } : {},
-        ...flow ? { flexFlow: flow } : {},
-        ...pc ? { placeContent: pc } : {},
-        ...pi ? { placeItems: pi } : {},
-        ...ps ? { placeSelf: ps } : {},
-        ...jc ? { justifyContent: jc } : {},
-        ...ji ? { justifyItems: ji } : {},
-        ...js ? { justifySelf: js } : {},
-        ...ac ? { alignContent: ac } : {},
-        ...ai ? { alignItems: ai } : {},
-        ...as ? { alignSelf: as } : {},
-        ...gap ? { gap } : {},
-        display: "flex"
-      }
-    },
-    children
-  );
-};
-
-// src/layouts/grid/grid.component.tsx
-import { createElement as createElement2 } from "react";
-var Grid = ({
-  tag = "section",
-  children,
-  className,
-  style,
-  flow,
-  columnSize,
-  rowSize,
-  column,
-  row,
-  pc,
-  pi,
-  ps,
-  jc,
-  ji,
-  js,
-  ac,
-  ai,
-  as,
-  gtc,
-  gtr,
-  gta,
-  gt,
-  gap,
-  ...props
-}) => {
-  return createElement2(
-    tag,
-    {
-      className,
-      ...props,
-      style: {
-        ...style,
-        ...flow ? { gridAutoFlow: flow } : {},
-        ...columnSize ? { gridAutoColumns: columnSize } : {},
-        ...rowSize ? { gridAutoRows: rowSize } : {},
-        ...column ? { gridColumn: column } : {},
-        ...row ? { gridRow: row } : {},
-        ...pc ? { placeContent: pc } : {},
-        ...pi ? { placeItems: pi } : {},
-        ...ps ? { placeSelf: ps } : {},
-        ...jc ? { justifyContent: jc } : {},
-        ...ji ? { justifyItems: ji } : {},
-        ...js ? { justifySelf: js } : {},
-        ...ac ? { alignContent: ac } : {},
-        ...ai ? { alignItems: ai } : {},
-        ...as ? { alignSelf: as } : {},
-        ...gtc ? { gridTemplateColumns: gtc } : {},
-        ...gtr ? { gridTemplateRows: gtr } : {},
-        ...gta ? { gridTemplateAreas: gta } : {},
-        ...gt ? { gridTemplate: gt } : {},
-        ...gap ? { gap } : {},
-        display: "grid"
-      }
-    },
-    children
-  );
-};
-export {
-  Flex,
-  Grid
-};
-//# sourceMappingURL=layouts.js.map
+import{createElement as I}from"react";var E=({tag:g="section",children:P,className:d,style:u,direction:e,wrap:t,basis:r,grow:i,shrink:a,flow:s,pc:o,pi:l,ps:S,jc:p,ji:c,js:n,ac:C,ai:R,as:f,gap:m})=>I(g,{className:d,style:{...u,...e?{flexDirection:e}:{},...t?{flexWrap:t}:{},...r?{flexBasis:r}:{},...i?{flexGrow:i}:{},...a?{flexShrink:a}:{},...s?{flexFlow:s}:{},...o?{placeContent:o}:{},...l?{placeItems:l}:{},...S?{placeSelf:S}:{},...p?{justifyContent:p}:{},...c?{justifyItems:c}:{},...n?{justifySelf:n}:{},...C?{alignContent:C}:{},...R?{alignItems:R}:{},...f?{alignSelf:f}:{},...m?{gap:m}:{},display:"flex"}},P);import{createElement as j}from"react";var v=({tag:g="section",children:P,className:d,style:u,flow:e,columnSize:t,rowSize:r,column:i,row:a,pc:s,pi:o,ps:l,jc:S,ji:p,js:c,ac:n,ai:C,as:R,gtc:f,gtr:m,gta:y,gt:x,gap:T,...w})=>j(g,{className:d,...w,style:{...u,...e?{gridAutoFlow:e}:{},...t?{gridAutoColumns:t}:{},...r?{gridAutoRows:r}:{},...i?{gridColumn:i}:{},...a?{gridRow:a}:{},...s?{placeContent:s}:{},...o?{placeItems:o}:{},...l?{placeSelf:l}:{},...S?{justifyContent:S}:{},...p?{justifyItems:p}:{},...c?{justifySelf:c}:{},...n?{alignContent:n}:{},...C?{alignItems:C}:{},...R?{alignSelf:R}:{},...f?{gridTemplateColumns:f}:{},...m?{gridTemplateRows:m}:{},...y?{gridTemplateAreas:y}:{},...x?{gridTemplate:x}:{},...T?{gap:T}:{},display:"grid"}},P);export{E as Flex,v as Grid};

package/dist/types.cjs

@@ -1,20 +1,2 @@
 "use client";
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/types/index.ts
-var types_exports = {};
-module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.cjs.map
+"use strict";var m=Object.defineProperty;var t=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var b=(r,o,p,f)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of x(o))!a.call(r,e)&&e!==p&&m(r,e,{get:()=>o[e],enumerable:!(f=t(o,e))||f.enumerable});return r};var c=r=>b(m({},"__esModule",{value:!0}),r);var d={};module.exports=c(d);

package/dist/types.js

@@ -1,2 +1 @@
 "use client";
-//# sourceMappingURL=types.js.map

package/eslint.config.js

@@ -0,0 +1,4 @@
+import EslintConfig from 'polpo-eslint-config/react';
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig([...EslintConfig]);

package/package.json

@@ -1,17 +1,21 @@
 {
   "name": "polpo",
-  "version": "0.1.13",
-  "sideEffects": [
-    "*.css"
-  ],
+  "version": "0.1.16",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "dependencies": {
+      "polpo-tailwind-config": "0.0.1",
+      "class-variance-authority": "^0.7.1",
+      "clsx": "^2.1.1",
+      "color": "^5.0.3",
+      "react-colorful": "^5.7.0",
+      "react-hook-form": "7.75.0",
+      "react-icons": "*",
+      "use-eye-dropper": "^1.7.2"
+    }
   },
-  "files": [
-    "dist"
-  ],
   "exports": {
     ".": null,
     "./components.css": {
@@ -82,11 +86,11 @@
     "@types/react-dom": "*",
     "esbuild-postcss": "^0.0.4",
     "eslint": "*",
+    "postcss": "^8.5.15",
     "tsup": "*",
     "typescript": "*",
-    "polpo-eslint-config": "1.0.1",
     "polpo-typescript-config": "1.0.1",
-    "@polpo/tailwind-config": "0.0.0"
+    "polpo-eslint-config": "1.0.1"
   },
   "peerDependencies": {
     "react": "*",
@@ -101,7 +105,8 @@
     "react-colorful": "^5.7.0",
     "react-hook-form": "7.75.0",
     "react-icons": "*",
-    "use-eye-dropper": "^1.7.2"
+    "use-eye-dropper": "^1.7.2",
+    "polpo-tailwind-config": "0.0.1"
   },
   "scripts": {
     "lint": "eslint src",

package/postcss.config.js

@@ -0,0 +1,3 @@
+import { postcssConfig } from 'polpo-tailwind-config/postcss';
+
+export default postcssConfig;

package/src/components/accordion/accordion-item.tsx

@@ -0,0 +1,123 @@
+import React, { useMemo } from 'react';
+import { IconType } from 'react-icons';
+import { FaCaretLeft } from 'react-icons/fa';
+
+import { useClassNames } from '../../hooks';
+import { SlideCard } from '../cards';
+import { Typography } from '../typography';
+
+import { useAccordionItem } from './accordion.component';
+
+type NodeFunction = (isOpen: boolean) => React.ReactNode;
+
+type ContentType = React.ReactNode | NodeFunction;
+
+type AccordionItemCommonProps = {
+  icon?: IconType;
+  children: React.ReactNode;
+  startContent?: ContentType;
+  endContent?: ContentType;
+  className?: string;
+  style?: React.CSSProperties;
+  classNames?: {
+    header?: string;
+    headerContent?: string;
+    title?: string;
+    subtitle?: string;
+    toggleIcon?: string;
+    body?: string;
+  };
+};
+
+type AccordionItemTitleProps = AccordionItemCommonProps & {
+  title?: ContentType;
+  subtitle?: ContentType;
+  content?: never;
+};
+
+type AccordionItemContentProps = AccordionItemCommonProps & {
+  title?: never;
+  subtitle?: never;
+  content?: ContentType;
+};
+
+type AccordionItemProps = AccordionItemTitleProps | AccordionItemContentProps;
+
+const getContent = (content: ContentType | undefined, isOpen: boolean): React.ReactNode | undefined => {
+  if (typeof content === 'function') {
+    return content(isOpen);
+  }
+
+  return content;
+};
+
+export const AccordionItem: React.FC<AccordionItemProps> = ({
+  title,
+  subtitle,
+  children,
+  icon: Icon = FaCaretLeft,
+  startContent,
+  content,
+  endContent,
+  classNames = {},
+  className = '',
+  style = {},
+}: AccordionItemProps) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const [isOpen, toggle] = useAccordionItem(id);
+  const headerClassName = useClassNames({
+    'accordion-header': true,
+    'has-start-content': !!startContent,
+    [classNames?.header ?? '']: !!classNames?.header,
+    'is-open': isOpen,
+  });
+
+  const headerContentClassName = useClassNames({
+    'accordion-header-content': true,
+    [classNames?.headerContent ?? '']: !!classNames?.headerContent,
+  });
+
+  const toggleIconClassName = useClassNames({
+    'accordion-toggle-icon': true,
+    isOpen: isOpen,
+    [classNames?.toggleIcon ?? '']: !!classNames?.toggleIcon,
+  });
+
+  const bodyContentClassName = useClassNames({
+    'accordion-body': true,
+    [classNames?.body ?? '']: !!classNames?.body,
+  });
+
+  const titleContent = getContent(title, isOpen);
+  const subtitleContent = getContent(subtitle, isOpen);
+  const headerStart = getContent(startContent, isOpen);
+  const headerMiddle = getContent(content, isOpen) ?? (
+    <section className={headerContentClassName}>
+      <Typography className={classNames?.title} variant='body' noPadding weight='bold'>
+        {titleContent}
+      </Typography>
+      <Typography className={classNames?.subtitle} variant='label' noPadding weight='light'>
+        {subtitleContent}
+      </Typography>
+    </section>
+  );
+  const headerEnd = getContent(endContent, isOpen) ?? <Icon className={toggleIconClassName} />;
+
+  const accordionItemClassName = useClassNames({
+    'accordion-item': true,
+    [className]: Boolean(className),
+  });
+
+  return (
+    <section className={accordionItemClassName} style={style}>
+      <section className={headerClassName} onClick={toggle}>
+        {headerStart}
+        {headerMiddle}
+        {headerEnd}
+      </section>
+      <SlideCard isOpen={isOpen}>
+        <section className={bodyContentClassName}>{children}</section>
+      </SlideCard>
+    </section>
+  );
+};

package/src/components/accordion/accordion.component.tsx

@@ -0,0 +1,80 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+
+import { useClassNames } from '../../hooks';
+import { Line } from '../line';
+
+import './accordion.styles.css';
+
+type AccordionContextState = {
+  toggleItem: (id: string) => void;
+  openedItems: Array<string>;
+};
+
+const AccordionContext = createContext<AccordionContextState | null>(null);
+
+export const useAccordionItem = (id: string): [boolean, () => void] => {
+  const context = useContext(AccordionContext);
+
+  if (!context) {
+    throw new Error('You cant use this component out off an Accordion component');
+  }
+
+  const { toggleItem, openedItems } = context;
+
+  const toggle = () => toggleItem(id);
+
+  return [openedItems.includes(id), toggle];
+};
+
+type AccordionProps = {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  noSeparators?: boolean;
+  multiple?: boolean;
+  defaultOpened?: Array<string> | string;
+};
+
+export const Accordion = ({
+  children,
+  className = '',
+  noSeparators,
+  multiple,
+  style = {},
+  defaultOpened = [],
+}: AccordionProps) => {
+  const [openedItems, setOpenedItems] = useState<{ [index: string]: boolean }>(() => {
+    return (Array.isArray(defaultOpened) ? defaultOpened : [defaultOpened]).reduce((acc, id) => {
+      return typeof id === 'string' ? { ...acc, [id]: true } : acc;
+    }, {});
+  });
+
+  const toggleItem = useCallback(
+    (id: string) => {
+      setOpenedItems(prev => ({ ...(multiple ? prev : {}), [id]: !prev[id] }));
+    },
+    [multiple],
+  );
+
+  const openedItemsIDs = useMemo(() => Object.keys(openedItems).filter(id => openedItems[id]), [openedItems]);
+
+  const accordionClassName = useClassNames({
+    accordion: true,
+    [className]: Boolean(className),
+  });
+
+  return (
+    <AccordionContext.Provider
+      value={{
+        toggleItem,
+        openedItems: openedItemsIDs,
+      }}
+    >
+      <section className={accordionClassName} style={style}>
+        {(Array.isArray(children) ? children : [children]).flatMap((child, key) => {
+          return key === 0 ? child : [noSeparators ? null : <Line orientation='horizontal' key={`${key}.5`} />, child];
+        })}
+      </section>
+    </AccordionContext.Provider>
+  );
+};

package/src/components/accordion/accordion.styles.css

@@ -0,0 +1,41 @@
+@reference "polpo-tailwind-config/styles";
+
+.accordion {
+    display: grid;
+}
+
+.accordion-item {
+    display: grid;
+    position: relative;
+
+    .accordion-header {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+        gap: 20px;
+        cursor: pointer;
+        position: sticky;
+        top: 0;
+        padding: 20px 0;
+
+        &.has-start-content {
+            grid-template-columns: auto 1fr auto;
+        }
+    }
+
+    .accordion-header-content {
+        display: grid;
+    }
+
+    .accordion-toggle-icon {
+        transition: all 300ms ease;
+
+        &.isOpen {
+            transform: rotate(-90deg);
+        }
+    }
+
+    .accordion-body {
+        padding: 10px 0 20px;
+    }
+}

package/src/components/accordion/index.ts

@@ -0,0 +1,2 @@
+export * from './accordion.component';
+export * from './accordion-item';

package/src/components/button/button.component.tsx

@@ -0,0 +1,50 @@
+import type { ButtonHTMLAttributes } from 'react';
+
+import { cn } from '../../helpers';
+import { ColorTypes, RadiusTypes, SizeTypes, VariantTypes } from '../component.types';
+import { Ripple } from '../ripple';
+
+import './button.styles.css';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  color?: `${ColorTypes}`;
+  variant?: `${VariantTypes}`;
+  radius?: `${RadiusTypes}`;
+  size?: `${SizeTypes}`;
+  noWrap?: boolean;
+  ref?: React.Ref<HTMLButtonElement>;
+  forIcon?: boolean;
+  isLoading?: boolean;
+}
+
+export const Button = ({
+  children,
+  color = ColorTypes.DEFAULT,
+  variant = VariantTypes.SOLID,
+  radius = RadiusTypes.MEDIUM,
+  size = SizeTypes.REGULAR,
+  noWrap = false,
+  forIcon = false,
+  className = '',
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      {...props}
+      className={cn(
+        'button',
+        color,
+        variant,
+        radius && `radius-${radius}`,
+        size && `size-${size}`,
+        noWrap && 'no-wrap',
+        forIcon && 'icon',
+        className,
+      )}
+    >
+      {children}
+      <Ripple />
+    </button>
+  );
+};