pallote-react 0.16.13 → 0.16.16

package/dist/components/Button.d.ts

@@ -11,8 +11,8 @@ export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 't
     size?: ButtonSize;
     color?: ButtonColor;
     fullWidth?: boolean;
-    iconLeft?: ReactNode;
-    iconRight?: ReactNode;
+    iconStart?: ReactNode;
+    iconEnd?: ReactNode;
     type?: ButtonType;
     to?: string;
     [key: string]: unknown;

package/dist/components/Card.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes, ReactNode } from 'react';
 type CardSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type CardFill = 'default' | 'paper' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
 type CardDirection = 'portrait' | 'landscape';
-type CardAlign = 'left' | 'center' | 'right';
+type CardAlign = 'start' | 'center' | 'end';
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     size?: CardSize;
     fill?: CardFill;

package/dist/components/CardHeader.d.ts

@@ -1,12 +1,15 @@
 import React, { HTMLAttributes, ReactElement } from 'react';
+type CardHeaderTitleComponent = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
     icon?: ReactElement<{
         className?: string;
     }>;
     label?: string;
     title: string;
+    titleComponent?: CardHeaderTitleComponent;
     subtitle?: React.ReactNode;
     actions?: React.ReactNode;
     className?: string;
 }
-export declare const CardHeader: ({ icon, label, title, subtitle, actions, className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardHeader: ({ icon, label, title, titleComponent, subtitle, actions, className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NavBar.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 import { SectionProps } from './Section';
-type NavBarAlign = 'left' | 'right';
+type NavBarAlign = 'start' | 'end';
 export interface NavBarProps extends Omit<SectionProps, 'children'> {
     logo?: ReactNode;
-    align?: NavBarAlign;
+    logoPosition?: NavBarAlign;
     className?: string;
     children: ReactNode;
 }
-export declare const NavBar: ({ logo, align, className, children, ...props }: NavBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavBar: ({ logo, logoPosition, className, children, ...props }: NavBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Section.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-type SectionAlign = 'left' | 'center' | 'right';
+type SectionAlign = 'start' | 'center' | 'end';
 type SectionColor = 'default' | 'paper' | 'primary' | 'primaryLight';
 export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
     align?: SectionAlign;

package/dist/components/SectionContent.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-type SectionContentAlign = 'left' | 'center' | 'right';
+type SectionContentAlign = 'start' | 'center' | 'end';
 export interface SectionContentProps extends HTMLAttributes<HTMLDivElement> {
     align?: SectionContentAlign;
     className?: string;

package/dist/components/SectionHeader.d.ts

@@ -6,7 +6,7 @@ export interface SectionHeaderProps extends HTMLAttributes<HTMLDivElement> {
     titleLevel?: TitleLevel;
     subtitle?: ReactNode;
     actions?: ReactNode;
-    actionsPosition?: 'right' | 'bottom';
+    actionsPosition?: 'inline' | 'end';
     className?: string;
 }
 export declare const SectionHeader: ({ label, title, titleLevel, subtitle, actions, actionsPosition, className, ...props }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as e$9 from 'react';
-import e__default, { useState, useEffect, createContext, Children, isValidElement, cloneElement, useContext, useRef, forwardRef, useId, useMemo } from 'react';
+import e__default, { useState, useEffect, createContext, Children, isValidElement, cloneElement, useContext, useRef, forwardRef, useId, useMemo, useCallback } from 'react';
 import classnames from 'classnames';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -319,14 +319,14 @@ const Breadcrumbs = ({ items, separator = "slash", className }) => (jsx("nav", {
         className
     ]), children: jsx("ol", { children: items.map((item, index) => (jsx("li", { className: 'breadcrumbs_item', children: index === items.length - 1 ? (jsx("p", { "aria-current": "page", children: item.label })) : (jsx("a", { href: item.href, children: item.label })) }, index))) }) }));
 
-const Button = forwardRef(({ component = 'button', kind, variant = 'fill', size = 'md', color = 'primary', fullWidth, disabled, iconLeft, iconRight, className, children = 'button', type = 'button', ...props }, ref) => {
+const Button = forwardRef(({ component = 'button', kind, variant = 'fill', size = 'md', color = 'primary', fullWidth, disabled, iconStart, iconEnd, className, children = 'button', type = 'button', ...props }, ref) => {
     const Component = component;
     let content;
     if (kind === 'icon') {
         content = children;
     }
     else {
-        content = (jsxs(Fragment, { children: [iconLeft && iconLeft, children, iconRight && iconRight] }));
+        content = (jsxs(Fragment, { children: [iconStart && iconStart, children, iconEnd && iconEnd] }));
     }
     return (jsx(Component, { className: classnames([
             'button',
@@ -355,7 +355,7 @@ const Buttons = ({ direction = 'landscape', fullWidth, wide, className, children
         ]), ...props, children: children }));
 };
 
-const Card = ({ size = 'md', fill = 'paper', direction = 'portrait', align = 'left', hasShadow = false, transparent = false, className, children, ...props }) => {
+const Card = ({ size = 'md', fill = 'paper', direction = 'portrait', align = 'start', hasShadow = false, transparent = false, className, children, ...props }) => {
     return (jsx(Color, { fill: transparent ? undefined : fill, children: jsx("div", { className: classnames([
                 'card',
                 {
@@ -389,11 +389,11 @@ const CardContent = ({ fullWidth, className, children, ...props }) => {
         ]), ...props, children: children }));
 };
 
-const CardHeader = ({ icon, label, title, subtitle, actions, className, ...props }) => {
+const CardHeader = ({ icon, label, title, titleComponent = 'h3', subtitle, actions, className, ...props }) => {
     return (jsxs("div", { className: classnames([
             'card_header',
             className
-        ]), ...props, children: [actions && (jsx("div", { className: "card_headerActions", children: actions })), icon ? e__default.cloneElement(icon, { className: `${icon.props.className ?? ''} card_icon` }) : null, label ? (jsx(Text, { className: classnames('card_label'), children: label })) : null, jsx(Text, { className: classnames('card_title'), children: title }), subtitle ? (jsx(Text, { className: classnames('card_subtitle'), children: subtitle })) : null] }));
+        ]), ...props, children: [actions && (jsx("div", { className: "card_headerActions", children: actions })), icon ? e__default.cloneElement(icon, { className: `${icon.props.className ?? ''} card_icon` }) : null, label ? (jsx(Text, { className: classnames('card_label'), children: label })) : null, jsx(Text, { component: titleComponent, className: classnames('card_title'), children: title }), subtitle ? (jsx(Text, { className: classnames('card_subtitle'), children: subtitle })) : null] }));
 };
 
 const CardMedia = ({ width, height, image, fullWidth, className, ...props }) => {
@@ -405,7 +405,7 @@ const CardMedia = ({ width, height, image, fullWidth, className, ...props }) =>
             className
         ]), ...props, children: jsx("div", { className: 'card_mediaInner', style: {
                 width: width ? width + 'px' : undefined,
-                paddingBottom: height,
+                paddingBlockEnd: height,
                 backgroundImage: `url(${image})`
             } }) }));
 };
@@ -911,7 +911,7 @@ const Link = ({ component = 'a', icon, color, isExternal, href, className, child
             'link',
             { [`text-${color}`]: color },
             className
-        ]), href: isExternal ? href : undefined, target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noopener noreferrer' : undefined, ...props, children: [children, icon && !isExternal && jsx("span", { className: 'link_icon', "aria-hidden": "true", children: icon }), isExternal && (jsxs(Fragment, { children: [jsx("span", { className: "sr-only", children: " (opens in new tab)" }), jsx("span", { className: 'link_icon', "aria-hidden": "true", children: jsx(o$1, {}) })] }))] }));
+        ]), href: href, target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noopener noreferrer' : undefined, ...props, children: [children, icon && !isExternal && jsx("span", { className: 'link_icon', "aria-hidden": "true", children: icon }), isExternal && (jsxs(Fragment, { children: [jsx("span", { className: "sr-only", children: " (opens in new tab)" }), jsx("span", { className: 'link_icon', "aria-hidden": "true", children: jsx(o$1, {}) })] }))] }));
 };
 
 const List = ({ dense, className, children, ...props }) => {
@@ -952,10 +952,10 @@ const SectionHeader = ({ label, title, titleLevel = 2, subtitle, actions, action
             'section_header',
             `section_header-${titleLevel}`,
             className
-        ]), ...props, children: [label ? jsx(Text, { className: classnames('section_label'), children: label }) : null, jsxs("div", { className: "section_titleWrapper", children: [jsx(Text, { className: "section_title", variant: titleVariant, component: titleComponent, children: title }), actions && actionsPosition === 'right' ? (jsx(Display, { hide: "tablet", children: jsx("div", { className: "section_actions", children: actions }) })) : null] }), subtitle ? jsx("div", { className: classnames('section_subtitle'), children: subtitle }) : null, actions ? (actionsPosition === 'right' ? (jsx(Display, { show: "tablet", children: jsx("div", { className: "section_actions", children: actions }) })) : (jsx("div", { className: "section_actions", children: actions }))) : null] }));
+        ]), ...props, children: [label ? jsx(Text, { className: classnames('section_label'), children: label }) : null, jsxs("div", { className: "section_titleWrapper", children: [jsx(Text, { className: "section_title", variant: titleVariant, component: titleComponent, children: title }), actions && actionsPosition === 'inline' ? (jsx(Display, { hide: "tablet", children: jsx("div", { className: "section_actions", children: actions }) })) : null] }), subtitle ? jsx("div", { className: classnames('section_subtitle'), children: subtitle }) : null, actions ? (actionsPosition === 'inline' ? (jsx(Display, { show: "tablet", children: jsx("div", { className: "section_actions", children: actions }) })) : (jsx("div", { className: "section_actions", children: actions }))) : null] }));
 };
 
-const Section = ({ align = 'left', color = 'default', landing, className, children, ...props }) => {
+const Section = ({ align = 'start', color = 'default', landing, className, children, ...props }) => {
     return (jsx("div", { className: classnames([
             'section',
             {
@@ -975,20 +975,29 @@ const Section = ({ align = 'left', color = 'default', landing, className, childr
             }) }) }));
 };
 
-const NavBar = ({ logo, align, className, children, ...props }) => {
+const NavBar = ({ logo, logoPosition, className, children, ...props }) => {
     const [isOpen, setIsOpen] = useState(false);
     const toggleNav = () => {
         setIsOpen(!isOpen);
         document.body.classList.toggle('js-navbar', !isOpen);
     };
+    const closeNav = useCallback(() => {
+        setIsOpen(false);
+        document.body.classList.remove('js-navbar');
+    }, []);
+    const handleNavClick = useCallback((e) => {
+        const target = e.target.closest('a, [role="link"]');
+        if (target)
+            closeNav();
+    }, [closeNav]);
     return (jsx("header", { children: jsxs(Section, { className: classnames([
                 'navbar',
                 {
-                    [`navbar-${align}`]: align,
+                    [`navbar-${logoPosition}`]: logoPosition,
                     'js-opened': isOpen
                 },
                 className
-            ]), ...props, children: [jsxs("div", { className: "navbar_main", children: [jsx("div", { className: "navbar_logo", children: logo }), jsx("button", { type: "button", "aria-label": isOpen ? "Close mobile menu" : "Open mobile menu", "aria-expanded": isOpen, "aria-controls": "navbar-nav", className: classnames('navbar_button', { 'js-opened': isOpen }), onClick: toggleNav, children: jsx("span", { "aria-hidden": "true" }) })] }), jsx("nav", { id: "navbar-nav", "aria-label": "Main navigation", className: classnames('navbar_nav nav', { 'js-opened': isOpen }), children: jsx("div", { className: 'nav_container', children: children }) })] }) }));
+            ]), ...props, children: [jsxs("div", { className: "navbar_main", children: [jsx("div", { className: "navbar_logo", children: logo }), jsx("button", { type: "button", "aria-label": isOpen ? "Close mobile menu" : "Open mobile menu", "aria-expanded": isOpen, "aria-controls": "navbar-nav", className: classnames('navbar_button', { 'js-opened': isOpen }), onClick: toggleNav, children: jsx("span", { "aria-hidden": "true" }) })] }), jsx("nav", { id: "navbar-nav", "aria-label": "Main navigation", className: classnames('navbar_nav nav', { 'js-opened': isOpen }), onClick: handleNavClick, children: jsx("div", { className: 'nav_container', children: children }) })] }) }));
 };
 
 const NavItem = ({ component, label, active, dropdown, icon, end, to, className, ...props }) => {
@@ -1054,7 +1063,7 @@ const RadioButtons = ({ id, label = 'Label', direction = 'portrait', error, disa
                 ]), children: children })] }));
 };
 
-const SectionContent = ({ align = 'left', className, children, ...props }) => {
+const SectionContent = ({ align = 'start', className, children, ...props }) => {
     return (jsx("div", { className: classnames([
             'section_content',
             {

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.16.13",
+  "version": "0.16.3",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/utilities/Text.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle' | 'body' | 'caption' | 'overline';
-type TextAlign = 'left' | 'center' | 'right' | 'justify';
+type TextAlign = 'start' | 'center' | 'end' | 'justify';
 type TextWeight = 'regular' | 'bold';
 type TextTransform = 'none' | 'capitalize' | 'uppercase' | 'lowercase' | 'initial' | 'inherit';
 type TextColor = 'default' | 'alt' | 'disabled' | 'contrast' | 'contrastAlt' | 'contrastDisabled' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.16.13",
+  "version": "0.16.16",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "classnames": "^2.5.1",
     "react-syntax-highlighter": "^15.6.1",
     "sass": "^1.71.1",
-    "pallote-css": "^0.10.8"
+    "pallote-css": "^0.10.11"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",