@symbo.ls/button 2.11.198 → 2.11.210

package/index.js

@@ -1,11 +1,29 @@
 'use strict'
 
 import { Flex, FocusableComponent } from '@symbo.ls/atoms'
-import { IconText } from '@symbo.ls/icon'
+import { IconText } from '@symbo.ls/Icon'
+
+/**
+ * A Button component
+ * The `Button` component represents a clickable button element with customizable styles and properties.
+ *
+ * @description
+ * @extends {FocusableComponent, IconText}
+ * @typedef {Object} Button
+ * @property {string} tag - The HTML tag used to render the button (e.g., 'button').
+ * @property {string} props.type - The type attribute of the button ('button' by default).
+ *
+ * @example
+ * // Example usage of the Button component:
+ * const myButton = {
+ *   extend: Button
+ * }
+ */
 
 export const Button = {
   extend: [FocusableComponent, IconText],
   tag: 'button',
+
   props: {
     fontSize: 'A',
     type: 'button',
@@ -50,15 +68,14 @@ export const KangorooButton = {
 export const CommonButton = {
   extend: Button,
   props: {
-    color: 'white',
-    background: 'blue',
+    theme: 'primary',
     boxSize: 'fit-content',
     padding: 'A A2',
     round: 'Z2',
     gap: 'Y2',
     position: 'relative'
   },
-  icon: {
+  Icon: {
     props: { fontSize: 'C' }
   },
   Caption: {
@@ -72,7 +89,7 @@ export const CommonButton = {
 export const IconCommonButton = {
   extend: CommonButton,
   props: {
-    icon: { name: 'smile' },
+    Icon: { name: 'smile' },
     boxSize: 'fit-content fit-content',
     padding: 'A',
     background: 'gray3'
@@ -114,27 +131,27 @@ export const CancelConfirmButtons = {
 export const IcontextButton = {
   extend: CommonButton,
   props: {
-    padding: 'A',
+    padding: 'A A1',
     position: 'relative',
     background: 'gray3',
-    icon: { name: 'smile' }
+    Icon: { name: 'smile' }
   }
 }
 
 export const DropDownButton = {
   extend: CommonButton,
   props: {
-    gap: 'Y',
+    gap: 'X2',
     boxSize: 'fit-content fit-content',
-    padding: 'A B A A+X',
+    padding: 'Z2 B Z2 A',
     round: 'Z',
     background: '#141416',
     color: 'white',
-    icon: {
+    Icon: {
       name: 'chevronDown',
       fontSize: 'D'
     },
-    Caption: { text: 'all' }
+    Caption: { text: 'All' }
   }
 }
 
@@ -166,11 +183,11 @@ export const PlusMinusButtons = {
   },
   Minus: {
     extend: IconCommonButton,
-    props: { icon: { name: 'minus' } }
+    props: { Icon: { name: 'minus' } }
   },
   Value: { props: { text: '1' } },
   Plus: {
     extend: IconCommonButton,
-    props: { icon: { name: 'plus' } }
+    props: { Icon: { name: 'plus' } }
   }
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/button",
-  "version": "2.11.198",
+  "version": "2.11.210",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "18f8fcfd01b3be21bd04d98d7fe6291eb920b729",
+  "gitHead": "45ec4a9a2ab3233c83b705202980d45b0c3cb91e",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
     "@symbo.ls/icon": "latest"