funda-ui 4.6.399 → 4.7.101

package/lib/css/Stepper/index.css

@@ -0,0 +1,167 @@
+/* ======================================================
+   <!-- Stepper -->
+/* ====================================================== */
+.stepper-container {
+  --stepper-color-default: #333;
+  --stepper-color-active: white;
+  --stepper-color-complete: #2563eb;
+  --stepper-bg-default: white;
+  --stepper-bg-active: #2563eb;
+  --stepper-bg-complete: #22c55e;
+  --stepper-border-default: #ccc;
+  --stepper-border-active: #2563eb;
+  --stepper-border-complete: #22c55e;
+  --stepper-indicator-size: 0.875rem;
+  --stepper-title-size: 0.875rem;
+  position: relative;
+  /* NAvigation Header (only horizontal) */
+  /* Main Navigation */
+  /* Each step item (with circle + title)  */
+  /* Step Indicator */
+  /* Title */
+  /* Panels Area */
+  /* Buttons */
+  /* Panel */
+}
+.stepper-container .stepper-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: nowrap;
+}
+.stepper-container .step-item {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100px;
+  position: relative;
+  z-index: 1;
+}
+.stepper-container .step-item.step-item--clickable {
+  cursor: pointer;
+}
+.stepper-container .step-line {
+  flex: 1;
+  height: 2px;
+  background-color: #ddd;
+  margin: 0 4px;
+  position: relative;
+  top: -10px;
+  z-index: 0;
+}
+.stepper-container .step-line--complete {
+  background-color: var(--stepper-bg-complete);
+}
+.stepper-container .step-line--active {
+  background-color: var(--stepper-bg-complete);
+}
+.stepper-container .step-indicator {
+  width: 32px;
+  height: 32px;
+  margin: 0 auto 0.25rem;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #ccc;
+  font-size: var(--stepper-indicator-size);
+  /* default */
+  background-color: var(--stepper-bg-default);
+  color: var(--stepper-color-default);
+  border-color: var(--stepper-border-default);
+}
+.stepper-container .step-indicator--active {
+  background-color: var(--stepper-bg-active);
+  color: var(--stepper-color-active);
+  border-color: var(--stepper-border-active);
+}
+.stepper-container .step-indicator--complete {
+  background-color: var(--stepper-bg-complete);
+  color: var(--stepper-color-active);
+  border-color: var(--stepper-border-complete);
+}
+.stepper-container .step-title {
+  font-size: var(--stepper-title-size);
+  /* default */
+  color: var(--stepper-color-default);
+}
+.stepper-container .step-title--active {
+  font-weight: bold;
+}
+.stepper-container .stepper-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+.stepper-container .stepper-panel {
+  width: 100%;
+}
+.stepper-container .stepper-panel-header {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+  display: none;
+}
+.stepper-container .stepper-panel-content {
+  width: 100%;
+}
+
+/*------ Verticle ------*/
+.stepper-container.stepper-container--vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.stepper-container.stepper-container--vertical .vertical-step-row {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+.stepper-container.stepper-container--vertical .vertical-step-left {
+  flex-shrink: 0;
+  width: 50px;
+  position: relative;
+}
+.stepper-container.stepper-container--vertical .vertical-step-left .step-item {
+  margin-top: 20px;
+}
+.stepper-container.stepper-container--vertical .vertical-step-left .step-line {
+  position: absolute;
+  left: 20px;
+}
+.stepper-container.stepper-container--vertical .vertical-step-right {
+  flex: 1;
+  left: 70px;
+  width: calc(100% - 70px);
+  position: absolute;
+  top: 1.5rem;
+}
+.stepper-container.stepper-container--vertical .step-title {
+  display: none;
+  margin-left: 0.3rem;
+}
+.stepper-container.stepper-container--vertical .stepper-panel-header {
+  display: block;
+}
+.stepper-container.stepper-container--vertical .stepper-header {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding-left: 2rem;
+}
+.stepper-container.stepper-container--vertical .stepper-header .step-item {
+  flex-direction: row;
+  max-width: 150px;
+}
+.stepper-container.stepper-container--vertical .stepper-header .step-item:not(:first-child) {
+  margin-top: 8px;
+}
+.stepper-container.stepper-container--vertical .step-line {
+  flex: auto;
+  width: 2px;
+  height: 40px;
+  margin-top: 4px;
+  top: auto;
+  left: -24px;
+}

package/lib/css/Table/index.css

@@ -516,7 +516,7 @@
     min-width: auto !important;
     width: auto !important;
   }
-  .syntable__wrapper.table-enhanced-responsive-scrolled table thead th:not(last-child) {
+  .syntable__wrapper.table-enhanced-responsive-scrolled table thead th:not(:last-child) {
     border-bottom: 0;
   }
   .syntable__wrapper.table-enhanced-responsive-scrolled table tbody {
@@ -568,9 +568,9 @@
   .syntable__wrapper.table-enhanced-responsive-scrolled table tbody th:first-child {
     border-top: 0;
   }
-  .syntable__wrapper.table-enhanced-responsive-scrolled table th:not(last-child),
-  .syntable__wrapper.table-enhanced-responsive-scrolled table tbody td:not(last-child),
-  .syntable__wrapper.table-enhanced-responsive-scrolled table tbody th:not(last-child) {
+  .syntable__wrapper.table-enhanced-responsive-scrolled table th:not(:last-child),
+  .syntable__wrapper.table-enhanced-responsive-scrolled table tbody td:not(:last-child),
+  .syntable__wrapper.table-enhanced-responsive-scrolled table tbody th:not(:last-child) {
     border-bottom: 0;
     border-right: 0;
   }

package/lib/esm/Stepper/index.scss

@@ -0,0 +1,206 @@
+
+/* ======================================================
+   <!-- Stepper -->
+/* ====================================================== */
+
+.stepper-container {
+
+    --stepper-color-default: #333;
+    --stepper-color-active: white;
+    --stepper-color-complete: #2563eb;
+    --stepper-bg-default: white;
+    --stepper-bg-active: #2563eb;
+    --stepper-bg-complete: #22c55e;
+    --stepper-border-default: #ccc;
+    --stepper-border-active: #2563eb;
+    --stepper-border-complete: #22c55e;
+    --stepper-indicator-size: 0.875rem;
+    --stepper-title-size: 0.875rem;
+    
+
+    position: relative;
+
+    /* NAvigation Header (only horizontal) */
+    .stepper-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 1.5rem;
+        flex-wrap: nowrap;
+    }
+
+    /* Main Navigation */
+    /* Each step item (with circle + title)  */
+    .step-item {
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        max-width: 100px;
+        position: relative;
+        z-index: 1;
+
+        &.step-item--clickable {
+            cursor: pointer;
+        }
+        
+    }
+
+    .step-line {
+        flex: 1;
+        height: 2px;
+        background-color: #ddd;
+        margin: 0 4px;
+        position: relative;
+        top: -10px;
+        z-index: 0;
+
+        &--complete {
+            background-color: var(--stepper-bg-complete);
+        }
+        
+        &--active {
+            background-color: var(--stepper-bg-complete);
+        }
+            
+    }
+
+    /* Step Indicator */
+    .step-indicator {
+        width: 32px;
+        height: 32px;
+        margin: 0 auto 0.25rem;
+        border-radius: 9999px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid #ccc;
+        font-size: var(--stepper-indicator-size);
+
+        /* default */
+        background-color: var(--stepper-bg-default);
+        color: var(--stepper-color-default);
+        border-color: var(--stepper-border-default);
+
+        &--active {
+            background-color: var(--stepper-bg-active);
+            color: var(--stepper-color-active);
+            border-color: var(--stepper-border-active);
+        } 
+
+        &--complete {
+            background-color: var(--stepper-bg-complete);
+            color: var(--stepper-color-active);
+            border-color: var(--stepper-border-complete);
+        }
+
+    }
+
+
+    /* Title */
+    .step-title {
+        font-size: var(--stepper-title-size);
+
+        /* default */
+        color: var(--stepper-color-default);
+
+        &--active {
+            font-weight: bold;
+        }
+    }
+
+
+
+    /* Panels Area */
+    .stepper-panels {
+
+    }
+
+    /* Buttons */
+    .stepper-buttons {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1rem;
+    }
+
+    /* Panel */
+    .stepper-panel {
+        width: 100%;
+    }
+    .stepper-panel-header {
+        font-size: 1.25rem;
+        font-weight: bold;
+        margin-bottom: 1rem;
+        display: none;
+    }
+    .stepper-panel-content {
+        width: 100%;
+    }
+
+
+
+}
+
+
+/*------ Verticle ------*/
+.stepper-container.stepper-container--vertical {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+
+    .vertical-step-row {
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: 1rem;
+    }
+    .vertical-step-left {
+        flex-shrink: 0;
+        width: 50px;
+        position: relative;
+        
+        .step-item {
+            margin-top: 20px;
+        }
+        .step-line {
+            position: absolute;
+            left: 20px;
+        }
+    }
+    
+    .vertical-step-right {
+        flex: 1;
+        left: 70px;
+        width: calc(100% - 70px);
+        position: absolute;
+        top: 1.5rem;
+    }
+
+    .step-title {
+        display: none;
+        margin-left: .3rem;
+    }
+    .stepper-panel-header {
+        display: block;
+    }
+    .stepper-header {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        padding-left: 2rem;
+        .step-item {
+            flex-direction: row;
+            max-width: 150px;
+            &:not(:first-child) {
+                margin-top: 8px;
+            }
+        }
+    }
+    .step-line {
+        flex: auto;
+        width: 2px;
+        height: 40px;
+        margin-top: 4px;
+        top: auto;
+        left: -24px;
+    }
+}

package/lib/esm/Stepper/index.tsx

@@ -0,0 +1,264 @@
+import React, { useRef, useEffect, forwardRef, useImperativeHandle, useState } from 'react';
+
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+interface StepperPanelProps {
+    header: React.ReactNode;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+
+interface StepperProps {
+    wrapperClassName?: string;
+    indicatorClickAllowed?: boolean;
+    style?: React.CSSProperties;
+    initialStep?: number;
+    layout?: 'horizontal' | 'vertical';
+    completeIcon?: React.ReactNode;
+    disableCompleteIcon?: boolean;
+    onChange?: (index: number, isLastStepComplete: boolean) => void;
+    children: React.ReactElement<StepperPanelProps>[];
+}
+
+interface StepperRef {
+    goto: (index: number) => void;
+    next: () => void;
+    prev: () => void;
+}
+
+const StepperPanel: React.FC<StepperPanelProps> = (props) => {
+    const {
+        header, 
+        children, 
+        style
+    } = props;
+
+    return (
+        <div className="stepper-panel" style={style}>
+            <div className="stepper-panel-header">{header}</div>
+            <div className="stepper-panel-content">{children}</div>
+        </div>
+    );
+};
+
+const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
+    const {
+        wrapperClassName,
+        indicatorClickAllowed = false,
+        style,
+        initialStep = 0,
+        layout = 'horizontal',
+        completeIcon = <><svg width="20px" height="20px" viewBox="0 0 20 20" fill="none"><path d="M15.3742 5.98559L10.3742 14.9856C9.72664 16.1511 7.97832 15.1798 8.62585 14.0143L13.6258 5.01431C14.2734 3.84876 16.0217 4.82005 15.3742 5.98559Z" fill="#fff"/><path d="M5.1247 9.71907L10.1247 13.7191C11.1659 14.552 9.91646 16.1137 8.87531 15.2808L3.87531 11.2808C2.83415 10.4479 4.08354 8.88615 5.1247 9.71907Z" fill="#fff"/></svg></>,
+        disableCompleteIcon = true,
+        onChange,
+        children
+    } = props;
+
+
+    const [isLastStepComplete, setIsLastStepComplete] = useState<boolean>(false);
+    const [activeIndex, setActiveIndex] = useState<number>(initialStep);
+    const panels = React.Children.toArray(children) as React.ReactElement<StepperPanelProps>[];
+    const isVertical: boolean = layout === 'vertical';
+    const prevActiveIndexRef = useRef<number>(activeIndex);
+    const prevIsLastStepCompleteRef = useRef<boolean>(isLastStepComplete);
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            goto: (index: number) => {
+                if (index >= 0 && index < panels.length) {
+                    setActiveIndex(index);
+                }
+            },
+            next: () => {
+                setActiveIndex((prevState) => {
+                    const _val = Math.min(prevState + 1, panels.length - 1);
+                    return _val;
+                });
+            },
+            prev: () => {
+                setActiveIndex((prevState) => {
+                    const _val = Math.max(prevState - 1, 0);
+                    return _val;
+                });
+
+                setIsLastStepComplete(false);
+            },
+            setLastStepComplete: (val: boolean) => {
+                setIsLastStepComplete(val);
+            },
+        }),
+        [panels.length],
+    );
+
+    const horizontalPanelsGenerator = (): JSX.Element => {
+        return <>
+            <div className="stepper-header">
+                {panels.map((panel, index) => {
+                    const { header } = panel.props;
+                    const isActive = index === activeIndex;
+                    const isCompleted = index < activeIndex || (index === panels.length - 1 && isLastStepComplete); 
+
+                    return (
+                        <React.Fragment key={index}>
+                            <div 
+                                data-step-index={index}
+                                className={combinedCls(
+                                    'step-item',
+                                    {
+                                        'step-item--clickable': indicatorClickAllowed && !isLastStepComplete
+                                    }
+                                )} 
+                                onClick={indicatorClickAllowed && !isLastStepComplete ? () => {
+                                    setActiveIndex(index);
+                                    setIsLastStepComplete(false);
+                                } : undefined}
+                            >
+                                <div
+                                    className={combinedCls(
+                                        'step-indicator',
+                                        {
+                                            'step-indicator--active': isActive,
+                                            'step-indicator--complete': isCompleted
+                                        }
+                                    )} 
+                                >
+                                    {isCompleted ? <>{disableCompleteIcon ? index + 1 : completeIcon}</> : index + 1}
+                                </div>
+                                <div
+                                    className={combinedCls(
+                                        'step-title',
+                                        {
+                                            'step-title--active': isActive
+                                        }
+                                    )} 
+                                >
+                                    {header}
+                                </div>
+                            </div>
+                            {index < panels.length - 1 && (
+                                <div
+                                    className={combinedCls(
+                                        'step-line',
+                                        {
+                                            'step-line--active': index === activeIndex - 1,
+                                            'step-line--complete': index < activeIndex - 1
+                                        }
+                                    )} 
+                                />
+                            )}
+                        </React.Fragment>
+                    );
+                })}
+            </div>
+
+            <div className="stepper-panels">
+                {panels[activeIndex]}
+            </div>
+        </>;
+    };
+
+    const verticalPanelsGenerator = (): JSX.Element => {
+        return <>
+            {panels.map((panel, index) => {
+                const { header } = panel.props;
+                const isActive = index === activeIndex;
+                const isCompleted = index < activeIndex || (index === panels.length - 1 && isLastStepComplete);
+
+                return (
+                    <div key={index} className="vertical-step-row">
+                        {/* Left */}
+                        <div className="vertical-step-left">
+                            <div
+                                data-step-index={index}
+                                className={combinedCls(
+                                    'step-item',
+                                    {
+                                        'step-item--clickable': indicatorClickAllowed && !isLastStepComplete
+                                    }
+                                )} 
+                                onClick={indicatorClickAllowed && !isLastStepComplete ? () => {
+                                    setActiveIndex(index);
+                                    setIsLastStepComplete(false);
+                                } : undefined}
+                            >
+                                <div
+                                    className={combinedCls(
+                                        'step-indicator',
+                                        {
+                                            'step-indicator--active': isActive,
+                                            'step-indicator--complete': isCompleted
+                                        }
+                                    )} 
+                                >
+                                    {isCompleted ?  <>{disableCompleteIcon ? index + 1 : completeIcon}</> : index + 1}
+                                </div>
+                                <div
+                                    className={combinedCls(
+                                        'step-title',
+                                        {
+                                            'step-title--active': isActive
+                                        }
+                                    )} 
+                                >
+                                    {header}
+                                </div>
+                            </div>
+
+                            {index < panels.length - 1 && (
+                                <div
+                                    className={combinedCls(
+                                        'step-line',
+                                        {
+                                            'step-line--active': index === activeIndex - 1,
+                                            'step-line--complete': index < activeIndex - 1
+                                        }
+                                    )} 
+                                />
+                            )}
+                        </div>
+
+                        {/* Right */}
+                        {isActive && (
+                            <div className="vertical-step-right">
+                                {panels[activeIndex]}
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </>;
+    };
+
+
+    useEffect(() => {
+        // Only trigger onChange if values actually changed from previous values
+        if (prevActiveIndexRef.current !== activeIndex || 
+            prevIsLastStepCompleteRef.current !== isLastStepComplete) {
+            
+            prevActiveIndexRef.current = activeIndex;
+            prevIsLastStepCompleteRef.current = isLastStepComplete;
+            
+            onChange?.(activeIndex, isLastStepComplete);
+        }
+    }, [activeIndex, isLastStepComplete]);
+
+    return (
+        <div 
+            className={combinedCls(
+                'stepper-container',
+                clsWrite(wrapperClassName, ''),
+                {
+                    'stepper-container--vertical': isVertical
+                }
+            )} 
+            style={style}
+        >
+            {!isVertical && horizontalPanelsGenerator()}
+            {isVertical && verticalPanelsGenerator()}
+        </div>
+    );
+});
+
+export { Stepper, StepperPanel };
+export type { StepperProps, StepperPanelProps, StepperRef };

package/lib/esm/Table/index.scss

@@ -330,7 +330,7 @@
                         min-width: auto !important;
                         width: auto !important;
 
-                        &:not(last-child) {
+                        &:not(:last-child) {
                             border-bottom: 0;
                         }
 
@@ -390,7 +390,7 @@
                         border-top: 0;
                     }
 
-                    &:not(last-child) {
+                    &:not(:last-child) {
                         border-bottom: 0;
                         border-right: 0;
                     }

package/lib/esm/index.js

@@ -33,6 +33,7 @@ export { default as Scrollbar } from './Scrollbar';
 export { default as SearchBar } from './SearchBar';
 export { default as Select } from './Select';
 export { default as ShowMoreLess } from './ShowMoreLess';
+export { default as Stepper } from './Stepper';
 export { default as Switch } from './Switch';
 export { default as Table } from './Table';
 export { default as Tabs } from './Tabs';

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.6.399",
+  "version": "4.7.101",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",