@basic-ui/material 1.0.0-alpha.55 → 1.0.0-alpha.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.55",
+  "version": "1.0.0-alpha.56",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -8,12 +8,7 @@
   "module": "./build/esm/index.js",
   "jsnext:main": "./build/esm/index.js",
   "types": "./build/esm/index.d.ts",
-  "files": [
-    "/build",
-    "/src",
-    "/tailwind",
-    "/theme-explorer"
-  ],
+  "files": ["/build", "/src", "/tailwind", "/theme-explorer"],
   "sideEffects": false,
   "scripts": {
     "build": "run -T concurrently \"yarn:build:*\"",
@@ -30,8 +25,8 @@
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.56",
-    "@basic-ui/dynamic-theme": "^0.0.16",
+    "@basic-ui/core": "^0.0.57",
+    "@basic-ui/dynamic-theme": "^0.0.17",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -39,7 +34,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@basic-ui/color-picker": "^0.0.14",
+    "@basic-ui/color-picker": "^0.0.15",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@material/material-color-utilities": "0.1.1",

package/src/Button/BaseButton.tsx

@@ -13,7 +13,7 @@ export type ButtonElevation =
   | 'elevated'
   | 'floating'
   | 'contained';
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonShape = 'rounded' | 'square';
 
 export interface BaseButtonProps
@@ -26,6 +26,14 @@ export interface BaseButtonProps
 }
 
 const sizeStyles = {
+  xxs: {
+    height: rem(24),
+    iconSize: rem(18),
+    contentPaddingInline: rem(10),
+    standardInnerRadius: rem(8),
+    connectedInnerRadius: rem(2),
+    splitInnerRadius: rem(2),
+  },
   xs: {
     height: rem(32),
     iconSize: rem(20),
@@ -76,6 +84,7 @@ function getTypographyVariant(size: ButtonSize) {
 }
 
 function getSquareRadius(size: ButtonSize) {
+  if (size === 'xxs') return 'small';
   if (size === 'md') return 'large';
   if (size === 'lg' || size === 'xl') return 'extra-large';
   return 'medium';

package/src/Button/Button.story.tsx

@@ -18,7 +18,7 @@ const colors = [
 
 type Color = typeof colors[number];
 type ControlShape = 'default' | 'rounded' | 'square';
-type ControlSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ControlSize = 'default' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 const AppsIcon = (props: any) => (
   <svg viewBox="0 0 24 24" {...props}>
@@ -179,11 +179,12 @@ Primary.argTypes = {
   shape: { control: 'inline-radio', options: ['default', 'rounded', 'square'] },
   size: {
     control: 'inline-radio',
-    options: ['default', 'xs', 'sm', 'md', 'lg', 'xl'],
+    options: ['default', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'],
   },
 };
 
 const sizeToName = {
+  xxs: '2X Small',
   xs: 'Extra small',
   sm: 'Small',
   md: 'Medium',
@@ -202,7 +203,7 @@ export const Sizes = ({ shape = 'default' }: { shape?: ControlShape }) => {
       flexDirection="column"
       sx={{ gap: 2 }}
     >
-      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
+      {(['xxs', 'xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
         <Box key={size} display="flex" alignItems="center" sx={{ gap: 2 }}>
           <Button
             variant="filled"
@@ -284,7 +285,7 @@ Sizes.argTypes = {
 
 export const FabExtended = () => (
   <Box bg="surface" p={3} display="flex" flexDirection="column" sx={{ gap: 2 }}>
-    {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
+    {(['xxs', 'xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
       <Box key={size} display="flex" alignItems="center" sx={{ gap: 2 }}>
         <Button variant="fab-extended" size={size} onClick={onClick}>
           <Box as="span" mr={2} lineHeight={0}>

package/src/Button/ButtonGroup.story.tsx

@@ -19,7 +19,7 @@ const colors = [
 
 type Color = typeof colors[number];
 type ControlShape = 'default' | 'rounded' | 'square';
-type ControlSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ControlSize = 'default' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 const PressableButton = ({
   children,
@@ -288,6 +288,6 @@ ButtonGroup.argTypes = {
   shape: { control: 'inline-radio', options: ['default', 'rounded', 'square'] },
   size: {
     control: 'inline-radio',
-    options: ['default', 'xs', 'sm', 'md', 'lg', 'xl'],
+    options: ['default', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'],
   },
 };

package/src/Button/SplitButton.story.tsx

@@ -21,7 +21,7 @@ const colors = [
 
 type Color = typeof colors[number];
 type ControlShape = 'default' | 'rounded' | 'square';
-type ControlSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ControlSize = 'default' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 const ArrowDownIcon = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
@@ -105,6 +105,6 @@ SplitButtonExample.argTypes = {
   shape: { control: 'inline-radio', options: ['default', 'rounded', 'square'] },
   size: {
     control: 'inline-radio',
-    options: ['default', 'xs', 'sm', 'md', 'lg', 'xl'],
+    options: ['default', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'],
   },
 };