@hyphen/hyphen-components 4.0.0 → 4.1.0

package/dist/lib/tokens.d.ts

@@ -13,10 +13,10 @@ export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl
 export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
 export declare const FONT_WEIGHT_OPTIONS: ("light" | "normal" | "medium" | "semibold" | "bold")[];
 export declare const HEADING_SIZE_OPTIONS: ("sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl")[];
-export declare const HEIGHT_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "100")[];
+export declare const HEIGHT_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "66" | "70" | "75" | "80" | "90" | "100")[];
 export declare const LINE_HEIGHT_OPTIONS: ("base" | "none" | "input" | "heading" | "text")[];
-export declare const SPACING_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "auto")[];
-export declare const WIDTH_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "100")[];
+export declare const SPACING_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "auto")[];
+export declare const WIDTH_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "66" | "70" | "75" | "80" | "90" | "100")[];
 export declare const Z_INDEX_OPTIONS: ("0" | "modal" | "popover" | "overlay" | "drawer" | "sticky")[];
 export declare const Z_INDEX_VALUES: any;
 export declare const BOX_SHADOW_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -60,6 +60,26 @@
       "limit": "10 KB"
     }
   ],
+  "dependencies": {
+    "@hyphen/hyphen-design-tokens": "^4.19.0",
+    "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@types/react-modal": "^3.16.3",
+    "classnames": "^2.5.1",
+    "date-fns": "^2.16.1",
+    "focus-trap-react": "^10.2.3",
+    "formik": "^2.4.6",
+    "react-datepicker": "^6.3.0",
+    "react-focus-lock": "^2.13.2",
+    "react-modal": "^3.16.1",
+    "react-popper": "^2.3.0",
+    "react-remove-scroll": "^2.5.10",
+    "react-router-dom": "^6.26.1",
+    "react-select": "^5.8.0",
+    "react-select-event": "^5.5.1"
+  },
   "devDependencies": {
     "@babel/core": "^7.23.7",
     "@chromatic-com/storybook": "^1.8.0",
@@ -120,25 +140,5 @@
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.21.2"
-  },
-  "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^4.18.0",
-    "@popperjs/core": "^2.11.8",
-    "@radix-ui/react-collapsible": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@types/react-modal": "^3.16.3",
-    "classnames": "^2.5.1",
-    "date-fns": "^2.16.1",
-    "focus-trap-react": "^10.2.3",
-    "formik": "^2.4.6",
-    "react-datepicker": "^6.3.0",
-    "react-focus-lock": "^2.13.2",
-    "react-modal": "^3.16.1",
-    "react-popper": "^2.3.0",
-    "react-remove-scroll": "^2.5.10",
-    "react-router-dom": "^6.26.1",
-    "react-select": "^5.8.0",
-    "react-select-event": "^5.5.1"
   }
 }

package/src/components/Box/Box.stories.tsx

@@ -1060,6 +1060,9 @@ export const WidthPercentages = () => (
     <Box background="tertiary" width="60">
       60%
     </Box>
+    <Box background="tertiary" width="66">
+      66%
+    </Box>
     <Box background="tertiary" width="70">
       70%
     </Box>
@@ -1343,6 +1346,15 @@ export const HeightPercentages = () => (
     >
       60%
     </Box>
+    <Box
+      flex="auto"
+      justifyContent="center"
+      alignItems="center"
+      background="tertiary"
+      height="66"
+    >
+      66%
+    </Box>
     <Box
       flex="auto"
       justifyContent="center"

package/src/components/Button/Button.tsx

@@ -55,10 +55,10 @@ export interface BaseButtonProps {
   variant?: ButtonVariant;
 }
 
-export type ButtonMergedProps = BaseButtonProps &
+export type ButtonProps = BaseButtonProps &
   ButtonHTMLAttributes<HTMLButtonElement>;
 
-export const Button = forwardRef<HTMLButtonElement, ButtonMergedProps>(
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       asChild,

package/src/components/Drawer/Drawer.tsx

@@ -16,7 +16,7 @@ import classNames from 'classnames';
 import { DimensionSize, CssDimensionValue } from '../../types';
 import { Box, BoxProps } from '../Box/Box';
 import styles from './Drawer.module.scss';
-import { Button, ButtonMergedProps } from '../Button/Button';
+import { Button, ButtonProps } from '../Button/Button';
 
 interface DrawerContextProps {
   open: boolean;
@@ -356,7 +356,7 @@ const DrawerTitle = React.forwardRef<HTMLDivElement, BoxProps>(
 
 const DrawerCloseButton = forwardRef<
   HTMLButtonElement,
-  ButtonMergedProps & { onClose?: () => void }
+  ButtonProps & { onClose?: () => void }
 >(({ className, onClick, onClose, ...rest }, ref) => {
   const context = useContext(DrawerContext);
   const isStandalone = !context;