addon-ui 0.9.2 → 0.11.0

package/src/components/Popover/PopoverAnchor.tsx

@@ -0,0 +1,23 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {Anchor, PopoverAnchorProps} from "@radix-ui/react-popover";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./popover.module.scss";
+
+export type {PopoverAnchorProps};
+
+const PopoverAnchor: ForwardRefRenderFunction<HTMLDivElement, PopoverAnchorProps> = (props, ref) => {
+    const {className, children, ...other} = {...useComponentProps("popoverAnchor"), ...props};
+
+    return (
+        <Anchor ref={ref} className={classnames(styles["popover__anchor"], className)} {...other}>
+            {children}
+        </Anchor>
+    );
+};
+
+export default memo(forwardRef(PopoverAnchor));

package/src/components/Popover/PopoverClose.tsx

@@ -0,0 +1,23 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {Close, PopoverCloseProps} from "@radix-ui/react-popover";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./popover.module.scss";
+
+export type {PopoverCloseProps};
+
+const PopoverClose: ForwardRefRenderFunction<HTMLButtonElement, PopoverCloseProps> = (props, ref) => {
+    const {className, children, ...other} = {...useComponentProps("popoverClose"), ...props};
+
+    return (
+        <Close ref={ref} className={classnames(styles["popover__close"], className)} {...other}>
+            {children}
+        </Close>
+    );
+};
+
+export default memo(forwardRef(PopoverClose));

package/src/components/Popover/PopoverContent.tsx

@@ -0,0 +1,73 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {
+    Arrow,
+    Content,
+    PopoverContentProps as PopoverContentRadixProps,
+    PopoverPortalProps,
+    Portal,
+} from "@radix-ui/react-popover";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./popover.module.scss";
+
+export interface PopoverContentProps extends PopoverContentRadixProps, PopoverPortalProps {
+    maxWidth?: number;
+    minWidth?: number;
+    fullWidth?: boolean;
+    arrow?: boolean;
+    arrowWidth?: number;
+    arrowHeight?: number;
+    overlay?: boolean;
+    overlayClassname?: string;
+}
+
+const PopoverContent: ForwardRefRenderFunction<HTMLDivElement, PopoverContentProps> = (props, ref) => {
+    const {
+        maxWidth,
+        minWidth,
+        arrow,
+        arrowWidth,
+        arrowHeight,
+        fullWidth,
+        overlay,
+        overlayClassname,
+        container,
+        className,
+        style,
+        children,
+        ...other
+    } = {...useComponentProps("popoverContent"), ...props};
+
+    return (
+        <Portal container={container}>
+            <>
+                {overlay && <div className={classnames(styles["popover__overlay"], overlayClassname)} />}
+                <Content
+                    ref={ref}
+                    className={classnames(
+                        styles["popover__content"],
+                        {
+                            [styles["popover__content--full-width"]]: fullWidth,
+                        },
+                        className
+                    )}
+                    {...other}
+                    style={{
+                        minWidth: minWidth ? minWidth : undefined,
+                        maxWidth: maxWidth ? maxWidth : undefined,
+                        ...style,
+                    }}
+                >
+                    {children}
+                    {arrow && <Arrow className={styles["popover__arrow"]} width={arrowWidth} height={arrowHeight} />}
+                </Content>
+            </>
+        </Portal>
+    );
+};
+
+export default memo(forwardRef(PopoverContent));

package/src/components/Popover/PopoverTrigger.tsx

@@ -0,0 +1,35 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {PopoverTriggerProps as PopoverTriggerRadixProps, Trigger} from "@radix-ui/react-popover";
+
+import {useComponentProps} from "../../providers";
+
+import styles from "./popover.module.scss";
+
+export interface PopoverTriggerProps extends PopoverTriggerRadixProps {
+    center?: boolean;
+}
+
+const PopoverTrigger: ForwardRefRenderFunction<HTMLButtonElement, PopoverTriggerProps> = (props, ref) => {
+    const {center, className, children, ...other} = {...useComponentProps("popoverTrigger"), ...props};
+
+    return (
+        <Trigger
+            ref={ref}
+            className={classnames(
+                styles["popover__trigger"],
+                {
+                    [styles["popover__trigger--center"]]: center,
+                },
+                className
+            )}
+            {...other}
+        >
+            {children}
+        </Trigger>
+    );
+};
+
+export default memo(forwardRef(PopoverTrigger));

package/src/components/Popover/index.ts

@@ -0,0 +1,5 @@
+export {default as Popover, type PopoverProps} from "./Popover";
+export {default as PopoverClose, type PopoverCloseProps} from "./PopoverClose";
+export {default as PopoverAnchor, type PopoverAnchorProps} from "./PopoverAnchor";
+export {default as PopoverTrigger, type PopoverTriggerProps} from "./PopoverTrigger";
+export {default as PopoverContent, type PopoverContentProps} from "./PopoverContent";

package/src/components/Popover/popover.module.scss

@@ -0,0 +1,77 @@
+$root: popover;
+
+.#{$root} {
+  &__overlay {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: var(--popover-overlay-bg, var(--overlay-bg, rgba(0, 0, 0, 0.5)));
+  }
+
+  &__anchor {
+    height: 100%;
+  }
+
+  &__trigger {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    box-sizing: border-box;
+    color: var(--popover-trigger-color);
+    background: var(--popover-trigger-bg-color, var(--bg-secondary-color));
+    box-shadow: var(--popover-trigger-shadow-offset) var(--popover-trigger-shadow-color);
+
+    border-width: var(--popover-trigger-border-width, 1px);
+    border-style: var(--popover-trigger-border-style, solid);
+    border-color: var(--popover-trigger-border-color, var(--border-color));
+    border-radius: var(--popover-trigger-border-radius, 10px);
+
+    font-size: var(--popover-trigger-font-size, var(--popover-font-size, 14px));
+    font-weight: var(--popover-trigger-font-weight, 500);
+    padding: var(--popover-trigger-padding, 8px 12px);
+    height: var(--popover-trigger-height);
+    gap: var(--popover-trigger-gap, 5px);
+    transition:
+      color var(--popover-speed-color, var(--speed-color)),
+      background var(--popover-speed-background, var(--speed-color)),
+      box-shadow var(--popover-speed-shadow, var(--speed-color)),
+      border-color var(--popover-speed-border-color, var(--speed-color));
+
+    &--center {
+      justify-content: center;
+    }
+
+    &:hover {
+      box-shadow: var(--popover-trigger-shadow-offset-hover) var(--popover-trigger-shadow-color);
+      border-width: var(--popover-trigger-border-width-hover, var(--popover-trigger-border-width, 1px));
+      border-color: var(--popover-trigger-border-color-hover, var(--popover-trigger-border-color, var(--border-color)));
+    }
+  }
+
+  &__content {
+    overflow: hidden;
+    padding: var(--popover-content-padding, 16px);
+    background: var(--popover-content-bg-color, var(--bg-primary-color));
+    border-radius: var(--popover-content-border-radius, 8px);
+    box-shadow: var(--popover-content-shadow-offset, 0 0 5px 0) var(--popover-content-shadow-color, rgba(0, 0, 0, 0.25));
+    height: var(--popover-content-height);
+    max-height: var(--popover-content-max-height, var(--radix-popover-content-available-height));
+    transition:
+      background var(--popover-speed-background, var(--speed-color)),
+      box-shadow var(--popover-speed-shadow, var(--speed-color));
+
+    &--full-width {
+      width: var(--popover-content-full-width, var(--radix-popover-content-available-width));
+    }
+  }
+
+  &__arrow {
+    & > polygon {
+      fill: var(--popover-arrow-bg-color, var(--popover-content-bg-color, var(--bg-primary-color)));
+    }
+  }
+}

package/src/components/Select/Select.tsx

@@ -6,7 +6,7 @@ import {Root, SelectProps} from "@radix-ui/react-select";
 
 import {useComponentProps} from "../../providers";
 
-export {SelectProps};
+export {type SelectProps};
 
 const Select: FC<SelectProps> = props => {
     const {...other} = {...useComponentProps("select"), ...props};

package/src/components/Select/SelectContent.tsx

@@ -33,7 +33,8 @@ const SelectContent: ForwardRefRenderFunction<HTMLDivElement, SelectContentProps
         arrow,
         arrowWidth,
         arrowHeight,
-        fullWidth,
+        fullWidth = true,
+        position = "popper",
         container,
         viewportProps,
         scrollUpButton,
@@ -54,6 +55,7 @@ const SelectContent: ForwardRefRenderFunction<HTMLDivElement, SelectContentProps
                     },
                     className
                 )}
+                position={position}
                 {...other}
             >
                 {scrollUpButton && (
@@ -75,7 +77,7 @@ const SelectContent: ForwardRefRenderFunction<HTMLDivElement, SelectContentProps
                     </SelectScrollDownButton>
                 )}
 
-                {arrow && <Arrow width={arrowWidth} height={arrowHeight} />}
+                {arrow && <Arrow className={styles["select__arrow"]} width={arrowWidth} height={arrowHeight} />}
             </Content>
         </Portal>
     );

package/src/components/Select/SelectIcon.tsx

@@ -8,7 +8,7 @@ import {useComponentProps} from "../../providers";
 
 import styles from "./select.module.scss";
 
-export {SelectIconProps};
+export {type SelectIconProps};
 
 const SelectIcon: ForwardRefRenderFunction<HTMLSpanElement, SelectIconProps> = (props, ref) => {
     const {className, ...other} = {...useComponentProps("selectIcon"), ...props};

package/src/components/Select/SelectItem.tsx

@@ -2,10 +2,13 @@ import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
 
 import classnames from "classnames";
 
-import {Item, ItemIndicator, ItemText, SelectItemProps as SelectItemRadixProps} from "@radix-ui/react-select";
+import {Item, SelectItemProps as SelectItemRadixProps} from "@radix-ui/react-select";
 
 import {useComponentProps} from "../../providers";
 
+import SelectItemIndicator from "./SelectItemIndicator";
+import SelectItemText from "./SelectItemText";
+
 import styles from "./select.module.scss";
 
 export interface SelectItemProps extends SelectItemRadixProps {
@@ -14,24 +17,20 @@ export interface SelectItemProps extends SelectItemRadixProps {
 }
 
 const SelectItem: ForwardRefRenderFunction<HTMLDivElement, SelectItemProps> = (props, ref) => {
-    const {indicator, textValue, className, indicatorClassname, children, ...other} = {
+    const {textValue, indicator, indicatorClassname, className, children, ...other} = {
         ...useComponentProps("selectItem"),
         ...props,
     };
 
     return (
-        <Item ref={ref} className={classnames(styles["select__item"], className)} textValue={textValue} {...other}>
+        <Item ref={ref} textValue={textValue} className={classnames(styles["select__item"], className)} {...other}>
             {children && children}
 
             {!children && (
                 <>
-                    {indicator && (
-                        <ItemIndicator className={classnames(styles["select__item__indicator"], indicatorClassname)}>
-                            {indicator}
-                        </ItemIndicator>
-                    )}
+                    {indicator && <SelectItemIndicator className={indicatorClassname}>{indicator}</SelectItemIndicator>}
 
-                    {textValue && <ItemText className={classnames(styles["select__item__text"])}>{textValue}</ItemText>}
+                    {textValue && <SelectItemText>{textValue}</SelectItemText>}
                 </>
             )}
         </Item>

package/src/components/Select/SelectItemIndicator.tsx

@@ -0,0 +1,17 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {ItemIndicator, SelectItemIndicatorProps} from "@radix-ui/react-select";
+
+import styles from "./select.module.scss";
+
+export {type SelectItemIndicatorProps};
+
+const SelectItemIndicator: ForwardRefRenderFunction<HTMLSpanElement, SelectItemIndicatorProps> = (props, ref) => {
+    const {className, ...other} = props;
+
+    return <ItemIndicator ref={ref} className={classnames(styles["select__item__indicator"], className)} {...other} />;
+};
+
+export default memo(forwardRef(SelectItemIndicator));

package/src/components/Select/SelectItemText.tsx

@@ -0,0 +1,17 @@
+import React, {forwardRef, ForwardRefRenderFunction, memo} from "react";
+
+import classnames from "classnames";
+
+import {ItemText, SelectItemTextProps} from "@radix-ui/react-select";
+
+import styles from "./select.module.scss";
+
+export {type SelectItemTextProps};
+
+const SelectItemText: ForwardRefRenderFunction<HTMLSpanElement, SelectItemTextProps> = (props, ref) => {
+    const {className, ...other} = props;
+
+    return <ItemText ref={ref} className={classnames(styles["select__item__text"], className)} {...other} />;
+};
+
+export default memo(forwardRef(SelectItemText));

package/src/components/Select/SelectValue.tsx

@@ -8,7 +8,7 @@ import {useComponentProps} from "../../providers";
 
 import styles from "./select.module.scss";
 
-export {SelectValueProps};
+export {type SelectValueProps};
 
 const SelectValue: ForwardRefRenderFunction<HTMLSpanElement, SelectValueProps> = (props, ref) => {
     const {className, ...other} = {...useComponentProps("selectValue"), ...props};

package/src/components/Select/index.ts

@@ -1,5 +1,7 @@
 export {default as Select, type SelectProps} from "./Select";
 export {default as SelectItem, type SelectItemProps} from "./SelectItem";
+export {default as SelectItemText, type SelectItemTextProps} from "./SelectItemText";
+export {default as SelectItemIndicator, type SelectItemIndicatorProps} from "./SelectItemIndicator";
 export {default as SelectIcon, type SelectIconProps} from "./SelectIcon";
 export {default as SelectValue, type SelectValueProps} from "./SelectValue";
 export {default as SelectTrigger, type SelectTriggerProps} from "./SelectTrigger";

package/src/components/Select/select.module.scss

@@ -46,7 +46,7 @@ $root: select;
     }
 
     &[data-placeholder] {
-      color: var(--text-disabled-color);
+      color: var(--select-placeholder-color, var(--placeholder-color));
     }
 
     @include theme.rtl {
@@ -147,4 +147,10 @@ $root: select;
       background-color: var(--select-scroll-btn-hover-bg-color, var(--bg-secondary-color));
     }
   }
+
+  &__arrow {
+    & > polygon {
+      fill: var(--select-arrow-bg-color, var(--select-content-bg-color, var(--bg-primary-color)));
+    }
+  }
 }

package/src/components/Shift/Shift.tsx

@@ -0,0 +1,98 @@
+import React, {
+    Children,
+    cloneElement,
+    ComponentProps,
+    createElement,
+    CSSProperties,
+    forwardRef,
+    ForwardRefRenderFunction,
+    isValidElement,
+    memo,
+    useImperativeHandle,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react";
+
+import classnames from "classnames";
+
+import styles from "./shift.module.scss";
+
+export interface ShiftProps extends ComponentProps<"div"> {
+    active?: number;
+    height?: number;
+    adaptiveHeight?: boolean;
+    itemClassName?: string;
+}
+
+const Shift: ForwardRefRenderFunction<HTMLDivElement, ShiftProps> = (props, ref) => {
+    const {
+        active = 1,
+        height,
+        adaptiveHeight = true,
+        itemClassName,
+        className,
+        style,
+        children: childrenProps,
+        ...other
+    } = props;
+
+    const [currentHeight, setCurrentHeight] = useState<number>();
+
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const children = Children.map(childrenProps, (child, index) => {
+        const item = index + 1;
+
+        const className = classnames(styles["shift-item"], itemClassName);
+
+        const style: CSSProperties = {
+            opacity: 0,
+        };
+
+        if (item > active) {
+            style.transform = `translate3d(0, ${(item - active) * 100}%, 0)`;
+        } else if (item < active) {
+            style.transform = `translate3d(0, -${(active - item) * 100}%, 0)`;
+        } else {
+            style.opacity = 1;
+            style.transform = "translate3d(0, 0, 0)";
+        }
+
+        if (!isValidElement<React.HTMLAttributes<HTMLElement>>(child)) {
+            return createElement("span", {className, style}, child);
+        }
+
+        return cloneElement(child, {
+            style: {...(child.props?.style ?? {}), ...style},
+            className: classnames(className, child.props.className),
+        });
+    });
+
+    useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);
+
+    useLayoutEffect(() => {
+        const el = containerRef.current?.children[active - 1] as HTMLElement;
+
+        if (el) {
+            setCurrentHeight(el.offsetHeight);
+        }
+    }, [active]);
+
+    return (
+        <div
+            ref={containerRef}
+            className={classnames(styles["shift"], className)}
+            style={{
+                ...style,
+                ...(adaptiveHeight ? {height: currentHeight} : {}),
+                ...(height ? {height} : {}),
+            }}
+            {...other}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default memo(forwardRef(Shift));

package/src/components/Shift/index.ts

@@ -0,0 +1 @@
+export {default as Shift, type ShiftProps} from "./Shift";

package/src/components/Shift/shift.module.scss

@@ -0,0 +1,21 @@
+.shift {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  transition: height var(--shift-speed-height, var(--speed-sm));
+
+  &-item {
+    position: absolute;
+    width: 100%;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    transition:
+      transform var(--shift-speed-transform, var(--speed-sm)),
+      opacity var(--shift-speed-opacity, var(--speed-sm));
+  }
+}

package/src/components/TextArea/text-area.module.scss

@@ -26,6 +26,11 @@ $root: text-area;
     cursor: not-allowed;
   }
 
+  &::placeholder {
+    color: var(--text-area-placeholder-color, var(--placeholder-color));
+    transition: color var(--text-area-speed-color, var(--speed-color));
+  }
+
   &--full-width {
     width: 100% !important;
   }