@geneui/components 3.0.0-next-524bb85-15102024 → 3.0.0-next-5981a23-15102024

package/Divider/index.js

@@ -1,16 +1,23 @@
-import { _ as __rest } from '../tslib.es6-f211516f.js';
-import React__default, { useMemo } from 'react';
+import React__default from 'react';
 import { c as classnames } from '../index-031ff73c.js';
 import { s as styleInject } from '../style-inject.es-746bb8ed.js';
 
-var css_248z = "[data-gene-ui-version=\"2.16.1\"] .divider{background:rgba(var(--background-sc-rgb),.05);height:2.6rem;width:1px}[data-gene-ui-version=\"2.16.1\"] .divider:not(.divider-withNoSpace){margin:0 1.5rem}[data-gene-ui-version=\"2.16.1\"] .divider:not(.divider-withNoSpace).type-horizontal{margin:1.5rem 0}[data-gene-ui-version=\"2.16.1\"] .divider.type-horizontal{height:1px;width:2.6rem}[data-gene-ui-version=\"2.16.1\"] .divider.type-horizontal.full-width{width:100%}";
+var css_248z = "[data-gene-ui-version=\"2.16.1\"] .divider{display:inline-flex;gap:var(--guit-ref-spacing-xsmall);overflow:hidden}[data-gene-ui-version=\"2.16.1\"] .divider:before{content:\"\";display:block;flex:1;pointer-events:none}[data-gene-ui-version=\"2.16.1\"] .divider_horizontal{align-items:center;width:100%}[data-gene-ui-version=\"2.16.1\"] .divider_horizontal.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_horizontal.divider:before{border-block-start:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid);min-width:var(--guit-sem-dimension-width-medium)}[data-gene-ui-version=\"2.16.1\"] .divider_horizontal.divider_inset{padding-inline:var(--guit-ref-spacing-large)}[data-gene-ui-version=\"2.16.1\"] .divider_horizontal.divider:empty:after{display:none}[data-gene-ui-version=\"2.16.1\"] .divider_vertical{align-items:center;flex-direction:column;height:100%}[data-gene-ui-version=\"2.16.1\"] .divider_vertical.divider:before{border-inline-start:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid)}[data-gene-ui-version=\"2.16.1\"] .divider_vertical.divider:after{display:none}[data-gene-ui-version=\"2.16.1\"] .divider_vertical.divider_inset{padding-block:var(--guit-ref-spacing-large)}[data-gene-ui-version=\"2.16.1\"] .divider_color_default .divider__icon,[data-gene-ui-version=\"2.16.1\"] .divider_color_default .divider__text,[data-gene-ui-version=\"2.16.1\"] .divider_color_strong .divider__icon,[data-gene-ui-version=\"2.16.1\"] .divider_color_strong .divider__text{color:var(--guit-sem-color-foreground-neutral-1)}[data-gene-ui-version=\"2.16.1\"] .divider_color_default.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_color_default.divider:before{border-block-color:var(--guit-sem-color-border-neutral-2);border-inline-color:var(--guit-sem-color-border-neutral-2)}[data-gene-ui-version=\"2.16.1\"] .divider_color_strong.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_color_strong.divider:before{border-block-color:var(--guit-sem-color-border-neutral-3);border-inline-color:var(--guit-sem-color-border-neutral-3)}[data-gene-ui-version=\"2.16.1\"] .divider_color_brand.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_color_brand.divider:before{border-block-color:var(--guit-sem-color-border-brand);border-inline-color:var(--guit-sem-color-border-brand)}[data-gene-ui-version=\"2.16.1\"] .divider_color_brand .divider__icon,[data-gene-ui-version=\"2.16.1\"] .divider_color_brand .divider__text{color:var(--guit-sem-color-foreground-brand)}[data-gene-ui-version=\"2.16.1\"] .divider_color_inverse.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_color_inverse.divider:before{border-block-color:var(--guit-sem-color-border-inverse);border-inline-color:var(--guit-sem-color-border-inverse)}[data-gene-ui-version=\"2.16.1\"] .divider_color_inverse .divider__icon,[data-gene-ui-version=\"2.16.1\"] .divider_color_inverse .divider__text{color:var(--guit-sem-color-foreground-inverse)}[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_before.divider:before{display:none}[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_before.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_center.divider:after{content:\"\";flex:1}[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_center .divider__element{max-width:calc(100% - var(--guit-sem-dimension-width-medium)*4)}[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_after.divider:before{flex:1}[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_after .divider__element,[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_before .divider__element{max-width:calc(100% - var(--guit-sem-dimension-width-medium)*2.8)}[data-gene-ui-version=\"2.16.1\"] .divider__label{align-items:center;display:flex;gap:var(--guit-ref-spacing-3xsmall);overflow:hidden}[data-gene-ui-version=\"2.16.1\"] .divider__text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}[data-gene-ui-version=\"2.16.1\"] .divider__icon{flex:0 0 auto}[data-gene-ui-version=\"2.16.1\"] .divider__element{display:flex;flex:0 0 auto;min-width:0;order:1}";
 styleInject(css_248z);
 
-const Divider = (_a) => {
-    var { type = 'vertical', className, size, withSpace = true } = _a, restProps = __rest(_a, ["type", "className", "size", "withSpace"]);
-    const modifiedSize = useMemo(() => (typeof size === 'number' ? `${size / 10}rem` : size), [size]);
-    const styles = useMemo(() => (type === 'vertical' ? { height: modifiedSize } : { width: modifiedSize }), [modifiedSize, type]);
-    return (React__default.createElement("div", Object.assign({ className: classnames('divider', `type-${type}`, { 'divider-withNoSpace': !withSpace }, className), style: styles }, restProps)));
+/**
+ * A divider separates sections of content to establish visual rhythm and hierarchy. Combine dividers with appropriate spacing and text hierarchy to effectively organize content within your layout.
+ */
+const Divider = ({ appearance = 'default', Icon, vertical, label, labelPosition = 'before', content, inset = false, className }) => {
+    return (React__default.createElement("div", { className: classnames(`divider divider_${inset ? 'inset' : 'block'} divider_color_${appearance}  `, className, {
+            divider_horizontal: !vertical,
+            divider_vertical: vertical,
+            [` divider_withLabel_${labelPosition}`]: (label || Icon) && !vertical
+        }) }, !vertical && (React__default.createElement(React__default.Fragment, null,
+        content && React__default.createElement("div", { className: "divider__element" }, content),
+        (label || Icon) && (React__default.createElement("div", { className: "divider__label" },
+            label && React__default.createElement("span", { className: "divider__text ellipsis-text" }, label),
+            Icon && React__default.createElement(Icon, { className: "divider__icon", size: 20 })))))));
 };
 
 export { Divider as default };

package/Products/index.js

@@ -12,7 +12,6 @@ import { s as styleInject } from '../style-inject.es-746bb8ed.js';
 import '../_commonjsHelpers-24198af3.js';
 import '../hooks/useWindowSize.js';
 import '../hooks/useDebounce.js';
-import '../tslib.es6-f211516f.js';
 
 var css_248z = "[data-gene-ui-version=\"2.16.1\"] .products-switcher-holder{display:flex;flex-wrap:wrap;justify-content:flex-start;padding:.5rem 2rem;text-align:center;width:100%}[data-gene-ui-version=\"2.16.1\"] .products-switcher-holder .divider{margin-left:auto;margin-right:auto}[data-gene-ui-version=\"2.16.1\"] .product-item{border:1px solid #0000;border-radius:1rem;cursor:pointer;display:flex;flex-wrap:wrap;font:600 1.2rem/1.42 var(--font-family);justify-content:center;margin:.5rem 0;padding:1rem .5rem;text-align:center;width:33.3333333333%}[data-gene-ui-version=\"2.16.1\"] .product-item .icon{align-items:center;background:rgba(var(--background-sc-rgb),.05);border-radius:100%;display:flex;height:5rem;justify-content:center;margin:0 0 .5rem;transition:color .2s,background .2s;width:5rem}[data-gene-ui-version=\"2.16.1\"] .product-item p{width:100%}@media (hover:hover){[data-gene-ui-version=\"2.16.1\"] .product-item:hover .icon{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.16.1\"] .product-item.active .icon{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.1\"] .product-item.active{pointer-events:none}@media (hover:hover){[data-gene-ui-version=\"2.16.1\"] .product-item:hover{border-color:rgba(var(--background-sc-rgb),.11)}}";
 styleInject(css_248z);

package/lib/atoms/Divider/Divider.d.ts

@@ -1,24 +1,48 @@
-import { FC, HTMLAttributes } from 'react';
+import { FC, JSX } from 'react';
+import { IconProps } from '@geneui/icons';
 import './Divider.scss';
-export interface IDividerProps extends HTMLAttributes<HTMLDivElement> {
+interface IDividerProps {
     /**
-     * Divider direction. <br>
-     * Possible values: `horizontal | vertical`
+     * Divider visual style <br/>
+     * Possible values: `default | strong | brand | inverse`
      */
-    type: 'horizontal' | 'vertical';
+    appearance?: 'default' | 'strong' | 'brand' | 'inverse';
     /**
-     * Divider additional className
+     * Divider content <br/>
+     * The `alignContent` prop accepts a JSX element that will be displayed alongside the divider
      */
-    className?: string;
+    content?: JSX.Element;
+    /**
+     * Divider direction <br/>
+     * If the `vertical` prop is `true`, the `Divider` will be displayed vertically otherwise the `Divider` will be displayed horizontally
+     */
+    vertical?: boolean;
+    /**
+     * The `Icon` prop accepts a React Functional Component that will be displayed alongside the divider.
+     */
+    Icon?: FC<IconProps> | null;
     /**
-     * Divider size will be applied to height(when "type" is set to "vertical") or to width(when "type" is set to "horizontal"). <br>
-     * Possible values: `string | number`
+     * Divider label <br/>
+     * Text which will be displayed with `Divider`. The position of the `label` depends on `labelPosition` prop
      */
-    size?: string | number;
+    label?: string;
     /**
-     * withSpace by default true. If you want to remove the divider`s spacing, switch to false
+     * Divider `label` position <br/>
+     * Possible values: `before | after | center`
      */
-    withSpace: boolean;
+    labelPosition?: 'before' | 'after' | 'center';
+    /**
+     * provides space between the edge and the divider
+     */
+    inset?: boolean;
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
 }
+/**
+ * A divider separates sections of content to establish visual rhythm and hierarchy. Combine dividers with appropriate spacing and text hierarchy to effectively organize content within your layout.
+ */
 declare const Divider: FC<IDividerProps>;
-export default Divider;
+export { IDividerProps, Divider as default };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-524bb85-15102024",
+    "version": "3.0.0-next-5981a23-15102024",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {