@koobiq/react-components 0.0.1-beta.2 → 0.0.1-beta.20

package/dist/components/layout/flex/flex.d.ts

@@ -13,13 +13,24 @@ export type FlexPropDirection = (typeof flexPropDirection)[number];
 export declare const flexPropOrder: readonly [-1, 0, 1];
 export type FlexPropOrder = (typeof flexPropOrder)[number];
 export type FlexProps = {
-    alignItems?: FlexPropAlignItems;
-    justifyContent?: FlexPropJustifyContent;
+    /** Defines the `gap` property. */
+    gap?: FlexPropGap;
+    /** Defines the `column-gap` property. */
+    colGap?: FlexPropGap;
+    /** Defines the `row-gap` property. */
+    rowGap?: FlexPropGap;
+    /** Defines the `display` property with `flex` or `inline-flex` value. */
     flex?: FlexPropFlex;
+    /** Defines the `flex-wrap` property. */
     wrap?: FlexPropWrap;
-    direction?: FlexPropDirection;
-    gap?: FlexPropGap;
+    /** Defines the `order` property. */
     order?: FlexPropOrder;
+    /** Defines the `flex-direction` property. */
+    direction?: FlexPropDirection;
+    /** Defines the `align-items` property. */
+    alignItems?: FlexPropAlignItems;
+    /** Defines the `justify-content` property. */
+    justifyContent?: FlexPropJustifyContent;
 };
 export type FlexParams = (props: FlexProps, className?: string) => string;
 export declare const flex: FlexParams;

package/dist/components/layout/flex/flex.js

@@ -47,15 +47,20 @@ const flex = (props, className) => {
     wrap,
     direction,
     gap,
+    rowGap: rowGapProp,
+    colGap: colGapProp,
     order: orderProp
   } = props;
   const order = String(orderProp);
+  const colGap = colGapProp ?? gap;
+  const rowGap = rowGapProp ?? gap;
   return clsx(
     s.base,
-    gap && s[`gap_${gap}`],
     flex2 && s[`flex_${flex2}`],
     wrap && s[`wrap_${wrap}`],
     order && s[`order_${order}`],
+    rowGap && s[`gap_row_${rowGap}`],
+    colGap && s[`gap_column_${colGap}`],
     direction && s[`direction_${direction}`],
     alignItems && s[`alignItems_${alignItems}`],
     justifyContent && s[`justifyContent_${justifyContent}`],

package/dist/components/layout/flex/flex.module.css.js

@@ -10,19 +10,32 @@ const direction_row = "kbq-flex-direction_row-8fff0d";
 const direction_column = "kbq-flex-direction_column-29b97b";
 const order_0 = "kbq-flex-order_0-4a6164";
 const order_1 = "kbq-flex-order_1-b5e24c";
-const gap_3xs = "kbq-flex-gap_3xs-5c9d4e";
-const gap_xxs = "kbq-flex-gap_xxs-035614";
-const gap_xs = "kbq-flex-gap_xs-970b31";
-const gap_s = "kbq-flex-gap_s-e9d292";
-const gap_m = "kbq-flex-gap_m-21a099";
-const gap_l = "kbq-flex-gap_l-47c05c";
-const gap_xl = "kbq-flex-gap_xl-d76274";
-const gap_xxl = "kbq-flex-gap_xxl-0e68cb";
-const gap_3xl = "kbq-flex-gap_3xl-497012";
-const gap_4xl = "kbq-flex-gap_4xl-0b7c71";
-const gap_5xl = "kbq-flex-gap_5xl-ed56fe";
-const gap_6xl = "kbq-flex-gap_6xl-0749d1";
-const gap_7xl = "kbq-flex-gap_7xl-0a1536";
+const gap_column_3xs = "kbq-flex-gap_column_3xs-2aea22";
+const gap_column_xxs = "kbq-flex-gap_column_xxs-7586e8";
+const gap_column_xs = "kbq-flex-gap_column_xs-911f68";
+const gap_column_s = "kbq-flex-gap_column_s-a389c1";
+const gap_column_m = "kbq-flex-gap_column_m-21736b";
+const gap_column_l = "kbq-flex-gap_column_l-390cf2";
+const gap_column_xl = "kbq-flex-gap_column_xl-47b33c";
+const gap_column_xxl = "kbq-flex-gap_column_xxl-2f762a";
+const gap_column_3xl = "kbq-flex-gap_column_3xl-e81ba4";
+const gap_column_4xl = "kbq-flex-gap_column_4xl-502e67";
+const gap_column_5xl = "kbq-flex-gap_column_5xl-028451";
+const gap_column_6xl = "kbq-flex-gap_column_6xl-2f1bfa";
+const gap_column_7xl = "kbq-flex-gap_column_7xl-057b8a";
+const gap_row_3xs = "kbq-flex-gap_row_3xs-ea5984";
+const gap_row_xxs = "kbq-flex-gap_row_xxs-a520f4";
+const gap_row_xs = "kbq-flex-gap_row_xs-e62321";
+const gap_row_s = "kbq-flex-gap_row_s-2dab73";
+const gap_row_m = "kbq-flex-gap_row_m-6423db";
+const gap_row_l = "kbq-flex-gap_row_l-f312fe";
+const gap_row_xl = "kbq-flex-gap_row_xl-e85171";
+const gap_row_xxl = "kbq-flex-gap_row_xxl-c2548b";
+const gap_row_3xl = "kbq-flex-gap_row_3xl-34ef28";
+const gap_row_4xl = "kbq-flex-gap_row_4xl-29ec96";
+const gap_row_5xl = "kbq-flex-gap_row_5xl-c7e969";
+const gap_row_6xl = "kbq-flex-gap_row_6xl-afc87a";
+const gap_row_7xl = "kbq-flex-gap_row_7xl-d67bcc";
 const s = {
   base,
   "alignItems_flex-start": "kbq-flex-alignItems_flex-start-56df74",
@@ -48,19 +61,32 @@ const s = {
   "order_-1": "kbq-flex-order_-1-4f5108",
   order_0,
   order_1,
-  gap_3xs,
-  gap_xxs,
-  gap_xs,
-  gap_s,
-  gap_m,
-  gap_l,
-  gap_xl,
-  gap_xxl,
-  gap_3xl,
-  gap_4xl,
-  gap_5xl,
-  gap_6xl,
-  gap_7xl
+  gap_column_3xs,
+  gap_column_xxs,
+  gap_column_xs,
+  gap_column_s,
+  gap_column_m,
+  gap_column_l,
+  gap_column_xl,
+  gap_column_xxl,
+  gap_column_3xl,
+  gap_column_4xl,
+  gap_column_5xl,
+  gap_column_6xl,
+  gap_column_7xl,
+  gap_row_3xs,
+  gap_row_xxs,
+  gap_row_xs,
+  gap_row_s,
+  gap_row_m,
+  gap_row_l,
+  gap_row_xl,
+  gap_row_xxl,
+  gap_row_3xl,
+  gap_row_4xl,
+  gap_row_5xl,
+  gap_row_6xl,
+  gap_row_7xl
 };
 export {
   alignItems_baseline,
@@ -71,19 +97,32 @@ export {
   direction_column,
   direction_row,
   flex_flex,
-  gap_3xl,
-  gap_3xs,
-  gap_4xl,
-  gap_5xl,
-  gap_6xl,
-  gap_7xl,
-  gap_l,
-  gap_m,
-  gap_s,
-  gap_xl,
-  gap_xs,
-  gap_xxl,
-  gap_xxs,
+  gap_column_3xl,
+  gap_column_3xs,
+  gap_column_4xl,
+  gap_column_5xl,
+  gap_column_6xl,
+  gap_column_7xl,
+  gap_column_l,
+  gap_column_m,
+  gap_column_s,
+  gap_column_xl,
+  gap_column_xs,
+  gap_column_xxl,
+  gap_column_xxs,
+  gap_row_3xl,
+  gap_row_3xs,
+  gap_row_4xl,
+  gap_row_5xl,
+  gap_row_6xl,
+  gap_row_7xl,
+  gap_row_l,
+  gap_row_m,
+  gap_row_s,
+  gap_row_xl,
+  gap_row_xs,
+  gap_row_xxl,
+  gap_row_xxs,
   justifyContent_center,
   order_0,
   order_1,

package/dist/index.js

@@ -3,6 +3,7 @@ import { Provider, defaultBreakpoints } from "./components/Provider/Provider.js"
 import { BreakpointsProvider } from "./components/Provider/BreakpointsProvider.js";
 import { ProviderContext, useProvider } from "./components/Provider/ProviderContext.js";
 import { BreakpointsContext, useBreakpoints, useMatchedBreakpoints } from "./components/Provider/BreakpointsContext.js";
+import { FlexBox } from "./components/FlexBox/FlexBox.js";
 import { Container } from "./components/Container/Container.js";
 import { containerMarginsProp, containerPositionProp } from "./components/Container/types.js";
 import { Alert } from "./components/Alert/Alert.js";
@@ -42,34 +43,45 @@ import { Grid } from "./components/Grid/Grid.js";
 import { GridItem } from "./components/Grid/components/GridItem/GridItem.js";
 import { SkeletonBlock } from "./components/SkeletonBlock/SkeletonBlock.js";
 import { SkeletonTypography } from "./components/SkeletonTypography/SkeletonTypography.js";
-import { DialogHeader, DialogHeader as DialogHeader2, DialogHeader as DialogHeader3, DialogHeader as DialogHeader4 } from "./components/Dialog/components/DialoglHeader.js";
-import { DialogFooter, DialogFooter as DialogFooter2, DialogFooter as DialogFooter3, DialogFooter as DialogFooter4 } from "./components/Dialog/components/DialogFooter.js";
-import { DialogContent, DialogContent as DialogContent2, DialogContent as DialogContent3, DialogContent as DialogContent4 } from "./components/Dialog/components/DialogContent.js";
 import { Modal } from "./components/Modal/Modal.js";
 import { modalPropSize } from "./components/Modal/types.js";
+import { ModalContent, ModalFooter, ModalHeader } from "./components/Modal/index.js";
 import { SidePanel } from "./components/SidePanel/SidePanel.js";
 import { sidePanelPropPosition, sidePanelPropSize } from "./components/SidePanel/types.js";
-import { Popover } from "./components/Popover/Popover.js";
-import { popoverPropPlacement, popoverPropSize } from "./components/Popover/types.js";
+import { SidePanelContent, SidePanelFooter, SidePanelHeader } from "./components/SidePanel/index.js";
+import { Popover, PopoverInner } from "./components/Popover/Popover.js";
+import { popoverPropPlacement, popoverPropSize, popoverPropType } from "./components/Popover/types.js";
+import { PopoverContent, PopoverFooter, PopoverHeader } from "./components/Popover/index.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
 import { tooltipPropPlacement, tooltipPropVariant } from "./components/Tooltip/types.js";
-import { List, ListRender } from "./components/List/List.js";
+import { Item } from "./components/Collections/Item.js";
+import { Section } from "./components/Collections/Section.js";
+import { List, ListInner } from "./components/List/List.js";
+import { ListItemText } from "./components/List/components/ListItemText/ListItemText.js";
 import { listPropSelectionMode } from "./components/List/types.js";
-import { ListItem } from "./components/List/ListItem.js";
-import { ListSection } from "./components/List/ListSection.js";
+import { AnimatedIcon } from "./components/AnimatedIcon/AnimatedIcon.js";
+import { Select } from "./components/Select/Select.js";
+import { Divider } from "./components/Divider/Divider.js";
+import { dividerPropDisplay, dividerPropOrientation } from "./components/Divider/types.js";
+import { Menu } from "./components/Menu/Menu.js";
+import { menuPropSelectionMode } from "./components/Menu/types.js";
+import { ButtonToggleGroup } from "./components/ButtonToggleGroup/ButtonToggleGroup.js";
+import { ButtonToggle } from "./components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
   Alert,
+  AnimatedIcon,
   Badge,
   BreakpointsContext,
   BreakpointsProvider,
   Button,
+  ButtonToggle,
+  ButtonToggleGroup,
   Checkbox,
   Container,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
+  Divider,
+  FlexBox,
   Grid,
   GridItem,
   IconButton,
@@ -77,17 +89,20 @@ export {
   InputNumber,
   Link,
   List,
-  ListItem,
-  ListRender,
-  ListSection,
+  ListInner,
+  Item as ListItem,
+  ListItemText,
+  Section as ListSection,
+  Menu,
   Modal,
-  DialogContent2 as ModalContent,
-  DialogFooter2 as ModalFooter,
-  DialogHeader2 as ModalHeader,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
   Popover,
-  DialogContent3 as PopoverContent,
-  DialogFooter3 as PopoverFooter,
-  DialogHeader3 as PopoverHeader,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverInner,
   ProgressBar,
   ProgressSpinner,
   Provider,
@@ -97,10 +112,11 @@ export {
   RadioGroupContext,
   RadioGroupDescription,
   RadioGroupLabel,
+  Select,
   SidePanel,
-  DialogContent4 as SidePanelContent,
-  DialogFooter4 as SidePanelFooter,
-  DialogHeader4 as SidePanelHeader,
+  SidePanelContent,
+  SidePanelFooter,
+  SidePanelHeader,
   SkeletonBlock,
   SkeletonTypography,
   Textarea,
@@ -116,6 +132,8 @@ export {
   containerMarginsProp,
   containerPositionProp,
   defaultBreakpoints,
+  dividerPropDisplay,
+  dividerPropOrientation,
   flex,
   flexPropAlignItems,
   flexPropDirection,
@@ -130,9 +148,11 @@ export {
   inputNumberPropVariant,
   inputPropVariant,
   listPropSelectionMode,
+  menuPropSelectionMode,
   modalPropSize,
   popoverPropPlacement,
   popoverPropSize,
+  popoverPropType,
   progressBarPropVariant,
   progressSpinnerPropSize,
   progressSpinnerPropVariant,