@allxsmith/bestax-bulma 5.24.0 → 5.25.0

package/dist/index.esm.js

@@ -267,6 +267,35 @@ const validSchemeColors = [
  * @example '0', '1', 'auto'
  */
 const validSizes$1 = ['0', '1', '2', '3', '4', '5', '6', 'auto'];
+/**
+ * Valid Bulma gap steps, taken by `gap`, `columnGap` and `rowGap`. Each whole
+ * step is 0.5rem, so `2` is 1rem and `8` is 4rem, and the half steps sit
+ * between them. They render `is-gap-<value>`, `is-column-gap-<value>` and
+ * `is-row-gap-<value>`.
+ *
+ * This is a different scale from `validSizes`: `gap="2"` is 1rem where
+ * `m="2"` is 0.5rem.
+ * @example '0', '0.5', '2', '8'
+ */
+const validGaps = [
+    '0',
+    '0.5',
+    '1',
+    '1.5',
+    '2',
+    '2.5',
+    '3',
+    '3.5',
+    '4',
+    '4.5',
+    '5',
+    '5.5',
+    '6',
+    '6.5',
+    '7',
+    '7.5',
+    '8',
+];
 /**
  * Valid Bulma text size classes.
  * @example '1', '2', '3'
@@ -649,7 +678,13 @@ const useColorStyles = (props) => {
 };
 
 /**
- * A hook that generates Bulma margin and padding helper classes.
+ * A gap step as the class reads it. Numbers are accepted for the steps, so
+ * `2` and `'2'` both become `'2'`; anything else is checked against
+ * `validGaps` by the caller.
+ */
+const gapValue = (value) => typeof value === 'number' ? String(value) : value;
+/**
+ * A hook that generates Bulma margin, padding and gap helper classes.
  *
  * @function useSpacingClasses
  * @param props - Spacing-related Bulma helper props.
@@ -660,9 +695,9 @@ const useColorStyles = (props) => {
  */
 const useSpacingClasses = (props) => {
     const { classPrefix } = useConfig();
-    const { m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py } = props;
+    const { m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, gap, columnGap, rowGap, gapless, } = props;
     return useMemo(() => {
-        const { classes, addClassNoViewport } = createBulmaClassHelpers(classPrefix);
+        const { classes, addClassNoViewport, addPrefixedClass } = createBulmaClassHelpers(classPrefix);
         // Spacing (no viewport support in Bulma)
         addClassNoViewport('m', m, validSizes$1);
         addClassNoViewport('mt', mt, validSizes$1);
@@ -678,8 +713,42 @@ const useSpacingClasses = (props) => {
         addClassNoViewport('pl', pl, validSizes$1);
         addClassNoViewport('px', px, validSizes$1);
         addClassNoViewport('py', py, validSizes$1);
+        // Gap (no viewport support in Bulma). `gapless` and `is-gap-*` both set
+        // the `gap` shorthand at one class of specificity, so beside each other
+        // the stylesheet's rule order would decide. A valid `gap` settles it on
+        // its own. The axis props need no such care: Bulma declares every
+        // `is-column-gap-*` and `is-row-gap-*` after the shorthands, so each wins
+        // its own axis over `gap` and `gapless` alike.
+        const gapStep = gapValue(gap);
+        const hasGap = validGaps.some(v => v === gapStep);
+        addClassNoViewport('is-gap', gapStep, validGaps);
+        if (gapless && !hasGap) {
+            addPrefixedClass('is-gapless');
+        }
+        addClassNoViewport('is-column-gap', gapValue(columnGap), validGaps);
+        addClassNoViewport('is-row-gap', gapValue(rowGap), validGaps);
         return classNames(classes);
-    }, [classPrefix, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py]);
+    }, [
+        classPrefix,
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        mx,
+        my,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        px,
+        py,
+        gap,
+        columnGap,
+        rowGap,
+        gapless,
+    ]);
 };
 
 /**
@@ -1111,7 +1180,7 @@ const useOtherClasses = (props) => {
  * // rest: { className: 'custom-class' }
  */
 const useBulmaClasses = (props) => {
-    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overflowX, overflowY, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, skeleton, clearfix, pos, relative, fullHeight, aspectRatio, ...rest } = props;
+    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, gap, columnGap, rowGap, gapless, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overflowX, overflowY, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, skeleton, clearfix, pos, relative, fullHeight, aspectRatio, ...rest } = props;
     const colorClasses = useColorClasses({
         color,
         colorShade,
@@ -1134,6 +1203,10 @@ const useBulmaClasses = (props) => {
         pl,
         px,
         py,
+        gap,
+        columnGap,
+        rowGap,
+        gapless,
     });
     const typographyClasses = useTypographyClasses({
         textSize,
@@ -1302,10 +1375,13 @@ const ColumnsComponent = ({ className, textColor, color: _fieldColor, bgColor, i
     const resolvedGapDesktop = gapDesktop ?? gapSizeDesktop;
     const resolvedGapWidescreen = gapWidescreen ?? gapSizeWidescreen;
     const resolvedGapFullhd = gapFullhd ?? gapSizeFullhd;
+    // Untyped code can still pass the gap helpers ColumnsProps leaves out. They
+    // are dropped here, so they render no class and never reach the DOM.
+    const { columnGap: _columnGap, rowGap: _rowGap, ...helperProps } = props;
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
-        ...props,
+        ...helperProps,
     });
     const mainClass = usePrefixedClassNames('columns');
     // Build gap classes with prefixes
@@ -15863,5 +15939,5 @@ const Section = ({ size, className, children, color, bgColor, textColor, style,
     return (jsx("section", { className: sectionClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
-export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, ClientOnly, Code, Collapse, Collapses, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loader, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Popover, PopoverBody, PopoverClose, PopoverFooter, PopoverHeader, Portal, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useFocusTrap, useIconLibrary, useInsideControl, useInsideField, useIsHydrated, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
+export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, ClientOnly, Code, Collapse, Collapses, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loader, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Popover, PopoverBody, PopoverClose, PopoverFooter, PopoverHeader, Portal, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useFocusTrap, useIconLibrary, useInsideControl, useInsideField, useIsHydrated, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validGaps, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
 //# sourceMappingURL=index.esm.js.map