@hyphen/hyphen-components 2.9.0 → 2.9.2

package/dist/css/variables.css

@@ -0,0 +1,418 @@
+/*!*********************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/@hyphen/hyphen-design-tokens/build/css/variables.css ***!
+  \*********************************************************************************************************************/
+/**
+ * Do not edit directly
+ * Generated on Fri, 24 May 2024 23:56:23 GMT
+ */
+
+:root {
+  --assets-font-family-monospace: 'geist-mono', ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  --assets-font-family-body: 'geist', 'Source Sans', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif;;
+  --assets-font-family-brand: 'geist', 'Source Sans', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif;;
+  --color-background-primary: #ffffff;
+  --color-background-secondary: #f5f5f5;
+  --color-background-tertiary: #e5e5e5;
+  --color-background-success: #f0fdf4;
+  --color-background-danger: #fef2f2;
+  --color-background-error: #ef4444;
+  --color-background-warning: #fefce8;
+  --color-background-info: #f0f9ff;
+  --color-background-inverse: #262626;
+  --color-background-transparent: rgba(0, 0, 0, 0);
+  --color-background-button-primary: #171717;
+  --color-background-button-primary-hover: #262626;
+  --color-background-button-primary-active: #171717;
+  --color-background-button-secondary: #ffffff;
+  --color-background-button-secondary-hover: #e9e9e9;
+  --color-background-button-secondary-active: #e5e5e5;
+  --color-background-button-tertiary: rgba(0, 0, 0, 0);
+  --color-background-button-tertiary-hover: #e5e5e5;
+  --color-background-button-tertiary-active: #d4d4d4;
+  --color-background-button-danger: #ef4444;
+  --color-background-button-danger-hover: #dc2626;
+  --color-background-button-danger-active: #b91c1c;
+  --color-background-brand-gradient: linear-gradient(60deg, #eab308 0%, #fa0a64 100%);
+  --color-background-brand-gradient-purple: linear-gradient(60deg, #b47dff 0%, #4b32aa 100%);
+  --color-background-brand-gradient-cyan: linear-gradient(60deg, #00b4ff 0%, #dc50ff 100%);
+  --color-background-brand-yellow: #ffd200;
+  --color-background-brand-orange: #ff911e;
+  --color-background-brand-magenta: #ff3278;
+  --color-background-brand-dark-grey: #323237;
+  --color-background-brand-cyan: #00b4ff;
+  --color-background-brand-pink: #dc50ff;
+  --color-background-brand-light-purple: #b47dff;
+  --color-background-brand-medium-purple: #4b32aa;
+  --color-background-brand-dark-purple: #1e1e5a;
+  --color-base-black: #000000;
+  --color-base-white: #ffffff;
+  --color-base-magenta: #fa0a64;
+  --color-base-primary-50: #e9e9e9;
+  --color-base-primary-100: #b9b9b9;
+  --color-base-primary-200: #989898;
+  --color-base-primary-300: #686868;
+  --color-base-primary-400: #4b4b4b;
+  --color-base-primary-500: #1e1e1e;
+  --color-base-primary-600: #1b1b1b;
+  --color-base-primary-700: #151515;
+  --color-base-primary-800: #111111;
+  --color-base-primary-900: #0d0d0d;
+  --color-base-green-50: #f0fdf4;
+  --color-base-green-100: #dcfce7;
+  --color-base-green-200: #bbf7d0;
+  --color-base-green-300: #86efac;
+  --color-base-green-400: #4ade80;
+  --color-base-green-500: #16a34a;
+  --color-base-green-600: #15803d;
+  --color-base-green-700: #166534;
+  --color-base-green-800: #12622f;
+  --color-base-green-900: #14532d;
+  --color-base-blue-50: #f0f9ff;
+  --color-base-blue-100: #dbeafe;
+  --color-base-blue-200: #bfdbfe;
+  --color-base-blue-300: #93c5fd;
+  --color-base-blue-400: #60a5fa;
+  --color-base-blue-500: #3b82f6;
+  --color-base-blue-600: #2563eb;
+  --color-base-blue-700: #1d4ed8;
+  --color-base-blue-800: #1e40af;
+  --color-base-blue-900: #1e3a8a;
+  --color-base-purple-50: #faf5ff;
+  --color-base-purple-100: #f3e8ff;
+  --color-base-purple-200: #e9d5ff;
+  --color-base-purple-300: #d8b4fe;
+  --color-base-purple-400: #c084fc;
+  --color-base-purple-500: #a855f7;
+  --color-base-purple-600: #9333ea;
+  --color-base-purple-700: #7e22ce;
+  --color-base-purple-800: #6b21a8;
+  --color-base-purple-900: #581c87;
+  --color-base-yellow-50: #fefce8;
+  --color-base-yellow-100: #fef9c3;
+  --color-base-yellow-200: #fef08a;
+  --color-base-yellow-300: #fde047;
+  --color-base-yellow-400: #ffc800;
+  --color-base-yellow-500: #eab308;
+  --color-base-yellow-600: #ca8a04;
+  --color-base-yellow-700: #a16207;
+  --color-base-yellow-800: #854d0e;
+  --color-base-yellow-900: #713f12;
+  --color-base-red-50: #fef2f2;
+  --color-base-red-100: #fee2e2;
+  --color-base-red-200: #fecaca;
+  --color-base-red-300: #fca5a5;
+  --color-base-red-400: #f87171;
+  --color-base-red-500: #ef4444;
+  --color-base-red-600: #dc2626;
+  --color-base-red-700: #b91c1c;
+  --color-base-red-800: #991b1b;
+  --color-base-red-900: #7f1d1d;
+  --color-base-grey-50: #f5f5f5;
+  --color-base-grey-100: #e5e5e5;
+  --color-base-grey-200: #d4d4d4;
+  --color-base-grey-300: #a3a3a3;
+  --color-base-grey-400: #737373;
+  --color-base-grey-500: #525252;
+  --color-base-grey-600: #404040;
+  --color-base-grey-700: #262626;
+  --color-base-grey-800: #171717;
+  --color-base-grey-900: #0a0a0a;
+  --color-border-default: #d4d4d4;
+  --color-border-subtle: #e5e5e5;
+  --color-border-hover: #a3a3a3;
+  --color-border-active: #737373;
+  --color-border-danger: #fca5a5;
+  --color-border-warning: #fde047;
+  --color-border-inverse: #262626;
+  --color-border-info: #bfdbfe;
+  --color-border-button-secondary: #b9b9b9;
+  --color-border-button-secondary-hover: #b9b9b9;
+  --color-border-button-secondary-active: #989898;
+  --color-border-button-tertiary: rgba(0, 0, 0, 0);
+  --color-border-button-tertiary-hover: rgba(0, 0, 0, 0);
+  --color-border-button-tertiary-active: rgba(0, 0, 0, 0);
+  --color-border-brand-yellow: #ffd200;
+  --color-border-brand-orange: #ff911e;
+  --color-border-brand-magenta: #ff3278;
+  --color-border-brand-dark-grey: #323237;
+  --color-border-brand-cyan: #00b4ff;
+  --color-border-brand-pink: #dc50ff;
+  --color-border-brand-light-purple: #b47dff;
+  --color-border-brand-medium-purple: #4b32aa;
+  --color-border-brand-dark-purple: #1e1e5a;
+  --color-brand-yellow: #ffd200;
+  --color-brand-orange: #ff911e;
+  --color-brand-magenta: #ff3278;
+  --color-brand-dark-grey: #323237;
+  --color-brand-cyan: #00b4ff;
+  --color-brand-pink: #dc50ff;
+  --color-brand-light-purple: #b47dff;
+  --color-brand-medium-purple: #4b32aa;
+  --color-brand-dark-purple: #1e1e5a;
+  --color-font-base: #404040;
+  --color-font-secondary: #737373;
+  --color-font-tertiary: #a3a3a3;
+  --color-font-white: #ffffff;
+  --color-font-inverse: #e5e5e5;
+  --color-font-disabled: #a3a3a3;
+  --color-font-success: #15803d;
+  --color-font-success-disabled: #bbf7d0;
+  --color-font-info: #2563eb;
+  --color-font-warn: #ca8a04;
+  --color-font-warn-disabled: #fef08a;
+  --color-font-danger: #dc2626;
+  --color-font-danger-disabled: #fecaca;
+  --color-font-button-primary: #ffffff;
+  --color-font-button-primary-hover: #ffffff;
+  --color-font-button-primary-active: #ffffff;
+  --color-font-button-secondary: #1e1e1e;
+  --color-font-button-secondary-hover: #1e1e1e;
+  --color-font-button-secondary-active: #1e1e1e;
+  --color-font-button-tertiary: #1e1e1e;
+  --color-font-button-tertiary-hover: #1e1e1e;
+  --color-font-button-tertiary-active: #1e1e1e;
+  --color-font-button-danger: #ffffff;
+  --color-font-button-danger-hover: #ffffff;
+  --color-font-button-danger-active: #ffffff;
+  --color-font-placeholder: #a3a3a3; /* Placeholder color for input fields */
+  --color-font-brand-yellow: #ffd200;
+  --color-font-brand-orange: #ff911e;
+  --color-font-brand-magenta: #ff3278;
+  --color-font-brand-dark-grey: #323237;
+  --color-font-brand-cyan: #00b4ff;
+  --color-font-brand-pink: #dc50ff;
+  --color-font-brand-light-purple: #b47dff;
+  --color-font-brand-medium-purple: #4b32aa;
+  --color-font-brand-dark-purple: #1e1e5a;
+  --size-border-width-0: 0rem;
+  --size-border-width-sm: 0.0625rem;
+  --size-border-width-md: 0.125rem;
+  --size-border-width-lg: 0.25rem;
+  --size-border-radius-0: 0rem;
+  --size-border-radius-xs: 0.125rem;
+  --size-border-radius-sm: 0.25rem;
+  --size-border-radius-md: 0.5rem;
+  --size-border-radius-lg: 0.625rem;
+  --size-border-radius-xl: 1rem;
+  --size-border-radius-2xl: 1.25rem;
+  --size-border-radius-3xl: 2rem;
+  --size-box-shadow-0: 0 0 #000000;
+  --size-box-shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --size-box-shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --size-box-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
+  --size-box-shadow-md: 0 1px 5px 0 rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
+  --size-box-shadow-lg: 0 10px 12px -4px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.06);
+  --size-box-shadow-xl: 0 16px 20px -4px rgba(0, 0, 0, 0.1), 0 8px 12px rgba(0, 0, 0, 0.05);
+  --size-box-shadow-2xl: 0 20px 40px -5px rgba(0, 0, 0, 0.16);
+  --size-breakpoint-tablet: 680px;
+  --size-breakpoint-desktop: 992px;
+  --size-breakpoint-hd: 1280px;
+  --size-dimension-0: 0rem;
+  --size-dimension-2xs: 0.125rem;
+  --size-dimension-xs: 0.25rem;
+  --size-dimension-sm: 0.5rem;
+  --size-dimension-md: 0.625rem;
+  --size-dimension-lg: 0.75rem;
+  --size-dimension-xl: 1rem;
+  --size-dimension-2xl: 1.25rem;
+  --size-dimension-3xl: 1.5rem;
+  --size-dimension-4xl: 2rem;
+  --size-dimension-5xl: 4rem;
+  --size-dimension-6xl: 8rem;
+  --size-dimension-7xl: 12rem;
+  --size-dimension-8xl: 16rem;
+  --size-dimension-9xl: 32rem;
+  --size-dimension-10xl: 64rem;
+  --size-percentage-0: 0%;
+  --size-percentage-10: 10%;
+  --size-percentage-15: 15%;
+  --size-percentage-20: 20%;
+  --size-percentage-25: 25%;
+  --size-percentage-30: 30%;
+  --size-percentage-33: 33%;
+  --size-percentage-34: 34%;
+  --size-percentage-40: 40%;
+  --size-percentage-50: 50%;
+  --size-percentage-60: 60%;
+  --size-percentage-70: 70%;
+  --size-percentage-75: 75%;
+  --size-percentage-80: 80%;
+  --size-percentage-90: 90%;
+  --size-percentage-100: 100%;
+  --size-font-weight-light: 300;
+  --size-font-weight-normal: 400;
+  --size-font-weight-medium: 500;
+  --size-font-weight-semibold: 600;
+  --size-font-weight-bold: 700;
+  --size-font-size-2xs: 0.625rem;
+  --size-font-size-xs: 0.75rem;
+  --size-font-size-sm: 0.875rem;
+  --size-font-size-md: 1rem;
+  --size-font-size-lg: 1.125rem;
+  --size-font-size-xl: 1.25rem;
+  --size-font-size-2xl: 1.5rem;
+  --size-font-size-3xl: 2rem;
+  --size-font-size-4xl: 2.5rem;
+  --size-font-size-5xl: 3rem;
+  --size-font-size-6xl: 3.5rem;
+  --size-font-size-7xl: 4rem;
+  --size-font-size-base: 1rem; /* the base size of the font */
+  --size-heading-sm: 1rem;
+  --size-heading-md: 1.25rem;
+  --size-heading-lg: 1.5rem;
+  --size-heading-xl: 2rem;
+  --size-heading-2xl: 2.5rem;
+  --size-heading-3xl: 3rem;
+  --size-heading-4xl: 3.5rem;
+  --size-heading-5xl: 4rem;
+  --size-heading-6xl: 4.5rem;
+  --size-line-height-base: 1.25;
+  --size-line-height-input: 1.15; /* for use by form inputs */
+  --size-line-height-heading: 1.25; /* the line-height for headings */
+  --size-line-height-text: 1.5; /* for paragraphs of text */
+  --size-spacing-0: 0rem;
+  --size-spacing-2xs: 0.125rem;
+  --size-spacing-xs: 0.25rem;
+  --size-spacing-sm: 0.5rem;
+  --size-spacing-md: 0.625rem;
+  --size-spacing-lg: 0.75rem;
+  --size-spacing-xl: 1rem;
+  --size-spacing-2xl: 1.25rem;
+  --size-spacing-3xl: 1.5rem;
+  --size-spacing-4xl: 2rem;
+  --size-spacing-5xl: 4rem;
+  --size-spacing-auto: auto;
+  --size-z-index-0: 0;
+  --size-z-index-popover: 9000;
+  --size-z-index-modal: 8000;
+  --size-z-index-overlay: 7000;
+  --size-z-index-drawer: 200;
+  --size-z-index-sticky: 100;
+}
+
+/*!*******************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/@hyphen/hyphen-design-tokens/build/css/variables-root-dark.css ***!
+  \*******************************************************************************************************************************/
+/**
+ * Do not edit directly
+ * Generated on Fri, 24 May 2024 23:56:23 GMT
+ */
+
+:root.dark {
+  --color-background-primary: #262626;
+  --color-background-secondary: #171717;
+  --color-background-tertiary: #0a0a0a;
+  --color-background-success: #f0fdf4;
+  --color-background-danger: #fef2f2;
+  --color-background-error: #ef4444;
+  --color-background-warning: #fefce8;
+  --color-background-info: #f0f9ff;
+  --color-background-inverse: #e5e5e5;
+  --color-background-transparent: transparent;
+  --color-background-button-primary: #ffffff;
+  --color-background-button-primary-hover: #e5e5e5;
+  --color-background-button-primary-active: #e5e5e5;
+  --color-background-button-secondary: #171717;
+  --color-background-button-secondary-hover: #404040;
+  --color-background-button-secondary-active: #262626;
+  --color-background-button-tertiary: transparent;
+  --color-background-button-tertiary-hover: #404040;
+  --color-background-button-tertiary-active: #525252;
+  --color-background-button-danger: #ef4444;
+  --color-background-button-danger-hover: #dc2626;
+  --color-background-button-danger-active: #b91c1c;
+  --color-border-default: #525252;
+  --color-border-subtle: #404040;
+  --color-border-hover: #404040;
+  --color-border-active: #262626;
+  --color-border-danger: #fecaca;
+  --color-border-warning: #fef08a;
+  --color-border-inverse: #d4d4d4;
+  --color-border-info: #bfdbfe;
+  --color-border-button-secondary: #686868;
+  --color-border-button-secondary-hover: #686868;
+  --color-border-button-secondary-active: #4b4b4b;
+  --color-border-button-tertiary: transparent;
+  --color-border-button-tertiary-hover: transparent;
+  --color-border-button-tertiary-active: transparent;
+  --color-font-base: #f5f5f5;
+  --color-font-secondary: #d4d4d4;
+  --color-font-white: #ffffff;
+  --color-font-inverse: #404040;
+  --color-font-disabled: #525252;
+  --color-font-success: #16a34a;
+  --color-font-success-disabled: #16a34a;
+  --color-font-info: #3b82f6;
+  --color-font-warn: #eab308;
+  --color-font-warn-disabled: #fef08a;
+  --color-font-danger: #ef4444;
+  --color-font-danger-disabled: #fecaca;
+  --color-font-button-primary: #1e1e1e;
+  --color-font-button-primary-hover: #1e1e1e;
+  --color-font-button-primary-active: #1e1e1e;
+  --color-font-button-secondary: #ffffff;
+  --color-font-button-secondary-hover: #ffffff;
+  --color-font-button-secondary-active: #ffffff;
+  --color-font-button-tertiary: #ffffff;
+  --color-font-button-tertiary-hover: #ffffff;
+  --color-font-button-tertiary-active: #ffffff;
+  --color-font-placeholder: #737373; /* Placeholder color for input fields */
+}
+
+/*!********************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/styles/variables/index.scss ***!
+  \********************************************************************************************************************************************************************/
+.hyphen-components__variables__form-control {
+  --INTERNAL_form-control-box-shadow-focus: 0 0 0 3px var(--color-border-subtle);
+  --INTERNAL_form-control-label-margin: var(--size-spacing-xs);
+  --INTERNAL_form-control-help-margin: var(--size-spacing-2xs);
+  --INTERNAL_form-control-line-height: var(--size-line-height-input);
+  --INTERNAL_form-control-label-font-weight: var(--size-font-weight-medium);
+  --INTERNAL_form-control-legend-font-weight: var(--size-font-weight-medium);
+  --INTERNAL_form-control-help-font-weight: var(--size-font-weight-normal);
+  --INTERNAL_form-control-box-shadow: 0 3px 0 rgb(0 0 0 / 5%);
+  --INTERNAL_form-control-font-family: var(--assets-font-family-body);
+  --INTERNAL_form-control-size-sm-border-radius: var(--size-border-radius-sm);
+  --INTERNAL_form-control-size-sm-font-size: var(--size-font-size-xs);
+  --INTERNAL_form-control-size-sm-padding: var(--size-spacing-sm);
+  --INTERNAL_form-control-size-md-label-size: var(--size-font-size-sm);
+  --INTERNAL_form-control-size-md-border-radius: var(--size-border-radius-sm);
+  --INTERNAL_form-control-size-md-font-size: var(--size-font-size-sm);
+  --INTERNAL_form-control-size-md-padding: var(--size-spacing-lg);
+  --INTERNAL_form-control-size-lg-border-radius: var(--size-border-radius-sm);
+  --INTERNAL_form-control-size-lg-font-size: var(--size-font-size-md);
+  --INTERNAL_form-control-size-lg-padding: var(--size-spacing-lg);
+  --INTERNAL_form-control-background-color: var(--color-background-primary);
+  --INTERNAL_form-control-background-color-disabled: var(--color-base-grey-50);
+  --INTERNAL_form-control-background-color-error: var(
+    --color-background-danger
+  );
+  --INTERNAL_form-control-border-color: var(--color-border-default);
+  --INTERNAL_form-control-border-color-error: var(--color-base-red-100);
+  --INTERNAL_form-control-border-color-error-disabled: var(
+    --color-base-red-100
+  );
+  --INTERNAL_form-control-border-color-focus: var(--color-border-hover);
+  --INTERNAL_form-control-border-color-hover: var(--color-border-hover);
+  --INTERNAL_form-control-font-color: var(--color-font-base);
+  --INTERNAL_form-control-font-color-disabled: var(--color-font-disabled);
+  --INTERNAL_form-control-font-color-error: var(--color-font-danger);
+  --INTERNAL_form-control-font-color-error-disabled: var(
+    --color-font-danger-disabled
+  );
+  --INTERNAL_form-control-description-color: var(--color-font-secondary);
+  --INTERNAL_form-control-icon-color: var(--color-base-grey-300);
+  --INTERNAL_form-control-icon-color-hover: var(--color-base-grey);
+  --INTERNAL_form-control-placeholder-color: var(--color-font-placeholder);
+  --INTERNAL_form-control-radio-group-description-spacing: var(
+    --size-spacing-xs
+  );
+  --INTERNAL_form-control-radio-group-options-spacing: var(--size-spacing-md);
+  --INTERNAL_form-control-select-sm-icon-size: 20px;
+  --INTERNAL_form-control-select-md-icon-size: 32px;
+  --INTERNAL_form-control-select-lg-icon-size: 34px;
+  --INTERNAL_form-control-select-padding: var(--size-spacing-2xs);
+  --INTERNAL_form-control-select-clear-icon-margin: var(--size-spacing-xs);
+  --INTERNAL_form-control-text-clear-icon-margin: var(--size-spacing-xs);
+  --INTERNAL_form-control-text-clear-icon-font-size: var(--size-font-size-md);
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useBreakpoint/useBreakpoint';
+export * from './useOpenClose/useOpenClose';
+export * from './useWindowSize/useWindowSize';
+export * from './useIsomorphicLayoutEffect/useIsomorphicLayouEffect';

package/dist/hooks/useBreakpoint/useBreakpoint.d.ts

@@ -0,0 +1,9 @@
+import { Breakpoint } from '../../types';
+export interface BreakpointState {
+    isPhone: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    isHd: boolean;
+    activeBreakpoint: Breakpoint;
+}
+export declare const useBreakpoint: () => BreakpointState;

package/dist/hooks/useBreakpoint/useBreakpoint.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { useBreakpoint } from './useBreakpoint';
+declare const meta: Meta<typeof useBreakpoint>;
+export default meta;
+export declare const BasicUsage: () => React.JSX.Element;

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayouEffect.d.ts

@@ -0,0 +1,2 @@
+import { useLayoutEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/dist/hooks/useOpenClose/useOpenClose.d.ts

@@ -0,0 +1,39 @@
+export interface UseOpenCloseProps {
+    /**
+     * Initial visibility of the component
+     */
+    defaultIsOpen?: boolean;
+    /**
+     * If defined, visibility of the component is assumed to be controlled
+     */
+    isOpen?: boolean;
+    /**
+     * Callback function when component is closed
+     * @returns void
+     */
+    onClose?: () => void;
+    /**
+     * Callback function when component is opened
+     * @returns void
+     */
+    onOpen?: () => void;
+}
+export interface UseOpenCloseState {
+    /**
+     * If true, sets the controlled component to its visible state
+     */
+    isOpen: boolean;
+    /**
+     * Callback function to set a falsy value for the `isOpen` parameter.
+     */
+    handleClose: () => void;
+    /**
+     * Callback function to set a truthy value for the `isOpen` parameter.
+     */
+    handleOpen: () => void;
+    /**
+     * Callback function to toggle the value of the `isOpen` parameter.
+     */
+    handleToggle: () => void;
+}
+export declare const useOpenClose: (props?: UseOpenCloseProps) => UseOpenCloseState;

package/dist/hooks/useOpenClose/useOpenClose.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { UseOpenCloseProps, useOpenClose } from './useOpenClose';
+declare const meta: Meta<typeof useOpenClose>;
+export default meta;
+export declare const BasicUsage: React.FC<UseOpenCloseProps>;

package/dist/hooks/useWindowSize/useWindowSize.d.ts

@@ -0,0 +1,7 @@
+export interface HookWindowSize {
+    innerWidth?: number;
+    innerHeight?: number;
+    outerWidth?: number;
+    outerHeight?: number;
+}
+export declare const useWindowSize: () => HookWindowSize;

package/dist/hooks/useWindowSize/useWindowSize.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { useWindowSize } from './useWindowSize';
+declare const meta: Meta<typeof useWindowSize>;
+export default meta;
+export declare const BasicUsage: () => React.JSX.Element;