wini-web-components 0.1.0

package/src/component/progress-circle/progress-circle.css

@@ -0,0 +1,47 @@
+.progress-bar-container {
+    row-gap: 1.2rem;
+    width: 38.2rem;
+}
+
+.progress-bar-container>.progress-bar-title {
+    justify-content: space-between;
+    width: 100%;
+}
+
+.progress-bar-container>.progress-bar-title>.heading-text {
+    font: 600 1.4rem/2.2rem 'Inter';
+    color: #00204D;
+}
+
+.progress-bar-container>.progress-bar-tile {
+    column-gap: 1.6rem;
+    width: 100%;
+    height: 2.2rem;
+}
+
+.progress-bar-container>.progress-bar-tile>.progress-bar-value {
+    border-radius: 10rem;
+    width: 100%;
+    flex: 1;
+    height: 0.6rem;
+    position: relative;
+    overflow: hidden;
+    background-color: var(--full-color);
+}
+
+.progress-bar-container>.progress-bar-tile>.progress-bar-value::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--percent);
+    height: 0.6rem;
+    border-radius: 10rem;
+    background-color: var(--percent-color);
+    transition: width ease-in-out 1s;
+}
+
+.progress-bar-container>.progress-bar-tile>.text-value {
+    font: 400 1.4rem/2.2rem 'Inter';
+    color: #00204DE5;
+}

package/src/component/progress-circle/progress-circle.tsx

@@ -0,0 +1,24 @@
+import { CSSProperties } from 'react'
+import './progress-circle.css'
+import React from 'react'
+
+export function ProgressCircle({ percent, style, fillColor, percentColor, strokeWidth, strokeColor, textStyle }: {
+    /** value:  0 - 100 (%)*/
+    percent?: number,
+    style?: CSSProperties,
+    fillColor?: string,
+    percentColor?: string,
+    strokeWidth?: number,
+    strokeColor?: string,
+    textStyle?: CSSProperties
+}) {
+    const radius = 30 - (strokeWidth ?? 4)
+    const diameter = Math.PI * 2 * radius;
+    const strokeOffset = (1 - ((percent ?? 0) / 100)) * diameter;
+    return <svg width="100%" height="100%" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: 60, height: 60, ...(style ?? {}) }} >
+        <path d={`M 30,30 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`} style={{ fill: "none", stroke: strokeColor ?? "#E6EAF0", strokeWidth: strokeWidth ?? '4px', }} />
+        <path d={`M 30,30 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`} style={{ fill: fillColor ?? "none", stroke: percentColor ?? "var(--infor-color)", strokeWidth: strokeWidth ?? '4px', strokeLinecap: 'round', strokeDasharray: `${diameter}px ${diameter}px`, strokeDashoffset: `${strokeOffset}px` }} />
+        <text x="50%" y="50%" fill="#00204D" dy=".3em" textAnchor="middle" fontSize={16} fontWeight={'600'} style={textStyle}>{percent ?? 0}%</text>
+    </svg>
+}
+

package/src/component/radio-button/radio-button.css

@@ -0,0 +1,49 @@
+.radio-btn-container {
+    height: max(var(--size), 14px);
+    width: max(var(--size), 14px);
+    aspect-ratio: 1 / 1 !important;
+    border-radius: 50%;
+    box-sizing: border-box;
+    border: 2px solid var(--off-color);
+    background-color: transparent !important;
+    transition: border-color ease-in-out 0.5s;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.radio-btn-container>input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.radio-btn-container>.checkmark {
+    height: calc(max(var(--size), 14px) / 2);
+    width: calc(max(var(--size), 14px) / 2);
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility, opacity ease-in-out 0.5s;
+}
+
+.radio-btn-container>input:checked~.checkmark {
+    visibility: visible;
+    opacity: 1;
+    background-color: var(--active-color);
+}
+
+.radio-btn-container:has(> input:checked) {
+    border-color: var(--active-color) !important;
+}
+
+.radio-btn-container:has(input:disabled) {
+    pointer-events: none !important;
+    border-color: var(--off-color) !important;
+    background-color: #0035800A !important;
+}
+
+.radio-btn-container>input:disabled~.checkmark {
+    display: block !important;
+    background-color: #00204D40;
+}

package/src/component/radio-button/radio-button.tsx

@@ -0,0 +1,59 @@
+import React, { CSSProperties } from 'react';
+import './radio-button.css';
+import { UseFormRegister } from 'react-hook-form';
+
+interface RadioButtonProps {
+    onChange?: React.ChangeEventHandler<HTMLInputElement>,
+    value?: string | number | readonly string[],
+    disabled: false,
+    style: CSSProperties,
+    size?: number | string,
+    defaultChecked?: boolean,
+    name?: string,
+    activeColor?: string,
+    offColor?: string,
+    className?: string,
+    register?: UseFormRegister<{}>,
+}
+
+
+export class RadioButton extends React.Component<RadioButtonProps> {
+    render(): React.ReactNode {
+        let convertStyle: CSSProperties = {
+            '--off-color': this.props.offColor ?? '#ccd7e6',
+            '--active-color': this.props.activeColor ?? 'var(--infor-color)',
+            '--size': this.props.size ? (typeof this.props.size === 'number') ? `${this.props.size}px` : this.props.size : '20px'
+        } as CSSProperties
+        if (this.props.style) {
+            delete this.props.style.width
+            delete this.props.style.minWidth
+            delete this.props.style.maxWidth
+            delete this.props.style.height
+            delete this.props.style.minHeight
+            delete this.props.style.maxHeight
+            convertStyle = {
+                ...this.props.style,
+                ...convertStyle,
+            }
+        }
+
+        return <label className={`radio-btn-container row ${this.props.className ?? ''}`} style={convertStyle} >
+            {this.props.register ?
+                <input
+                    {...this.props.register}
+                    type="radio"
+                    value={this.props.value}
+                    disabled={this.props.disabled}
+                /> :
+                <input type="radio"
+                    name={this.props.name}
+                    value={this.props.value}
+                    defaultChecked={this.props.defaultChecked}
+                    disabled={this.props.disabled}
+                    onChange={this.props.onChange}
+                />
+            }
+            <span className="checkmark"></span>
+        </label>
+    }
+}

package/src/component/rating/rating.css

@@ -0,0 +1,11 @@
+.rating-container {
+    gap: 0.8rem;
+}
+
+.rating-container svg {
+    cursor: pointer;
+}
+
+.rating-container svg > * {
+    pointer-events: none !important;
+}

package/src/component/rating/rating.tsx

@@ -0,0 +1,65 @@
+import React, { CSSProperties } from "react"
+import './rating.css'
+
+interface RatingProps {
+    /**
+    value: 0-5
+    */
+    value?: number,
+    size?: number | string,
+    onChange?: (e: number) => {}
+    className?: string,
+    style?: CSSProperties,
+    strokeColor?: string,
+    fillColor?: string,
+}
+
+interface RatingState {
+    value: number,
+}
+
+const autoKeyId = () => (`${1e7 + -1e3 + -4e3 + -8e3 + -1e11}`).replace(/[018]/g, c =>
+    (parseFloat(c) ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (parseFloat(c) / 4)))).toString(16))
+
+export class Rating extends React.Component<RatingProps, RatingState> {
+    state: Readonly<RatingState> = {
+        value: this.props.value ?? 0
+    }
+
+    componentDidUpdate(prevProps: Readonly<RatingProps>): void {
+        if (prevProps.value !== this.props.value) {
+            this.setState({ value: this.props.value ?? 0 })
+        }
+    }
+    render(): React.ReactNode {
+        return <div className={`row rating-container ${this.props.className ?? ''}`} style={this.props.style}>
+            {Array.from({ length: 5 }).map((_, i) => {
+                let uniqueId = 'rating-star-grad-0'
+                let stopValue = 0
+                if (this.state.value >= 5) {
+                    uniqueId = 'rating-star-grad-5'
+                    stopValue = 100
+                } else if (this.state.value >= i) {
+                    uniqueId = autoKeyId()
+                    stopValue = (this.state.value - i) * 100
+                }
+                return <svg onClick={() => {
+                    if (this.props.onChange) {
+                        this.setState({ value: i + 1 })
+                        this.props.onChange(i + 1)
+                    }
+                }} key={'rate-' + i} width={"100%"} height={"100%"} style={{ width: this.props.size ?? '2rem', height: this.props.size ?? '2rem' }} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                        <linearGradient id={uniqueId} x1="0%" x2="100%" y1="0%" y2="0%">
+                            <stop offset="0%" stopColor={this.props.fillColor ?? '#FC6B03'} />
+                            <stop offset={`${stopValue}%`} stopColor={this.props.fillColor ?? '#FC6B03'} />
+                            <stop offset={`${stopValue}%`} stopColor="#00000000" />
+                        </linearGradient>
+                    </defs>
+                    <path fillRule="evenodd" clipRule="evenodd" d="M10 1.66667C10.2884 1.66667 10.5518 1.82993 10.6794 2.0878L12.844 6.46194L17.6847 7.16325C17.97 7.20459 18.2071 7.4039 18.2962 7.67736C18.3853 7.95082 18.311 8.25101 18.1045 8.45172L14.6018 11.8563L15.4285 16.6636C15.4772 16.947 15.3604 17.2334 15.127 17.4024C14.8937 17.5714 14.5844 17.5937 14.3292 17.4599L10 15.1897L5.67081 17.4599C5.41557 17.5937 5.10627 17.5714 4.87295 17.4024C4.63964 17.2334 4.52278 16.947 4.57151 16.6636L5.39815 11.8563L1.89545 8.45172C1.68896 8.25101 1.61465 7.95082 1.70377 7.67736C1.79288 7.4039 2.02996 7.20459 2.31533 7.16325L7.15599 6.46194L9.32063 2.0878C9.44825 1.82993 9.71162 1.66667 10 1.66667ZM10 4.12915L8.33846 7.48665C8.22811 7.70963 8.01479 7.86418 7.76802 7.89993L4.05223 8.43827L6.74094 11.0517C6.91947 11.2252 7.00094 11.4752 6.95881 11.7203L6.3243 15.4102L9.64738 13.6676C9.86813 13.5519 10.1319 13.5519 10.3526 13.6676L13.6757 15.4102L13.0412 11.7203C12.9991 11.4752 13.0805 11.2252 13.2591 11.0517L15.9478 8.43827L12.232 7.89993C11.9852 7.86418 11.7719 7.70963 11.6615 7.48665L10 4.12915Z" fill={this.props.strokeColor ?? '#667994'} />
+                    <path d="M17.738 7.18949L12.8212 6.47499L10.6249 2.02268C10.5611 1.91426 10.47 1.82438 10.3608 1.76194C10.2515 1.6995 10.1279 1.66666 10.0021 1.66666C9.87623 1.66666 9.75259 1.6995 9.64335 1.76194C9.53411 1.82438 9.44306 1.91426 9.37921 2.02268L7.17875 6.47499L2.26191 7.18949C2.13368 7.208 2.0132 7.26201 1.91406 7.34542C1.81493 7.42882 1.74111 7.5383 1.70095 7.66147C1.66078 7.78463 1.65588 7.91658 1.68678 8.04239C1.71769 8.1682 1.78317 8.28286 1.87583 8.3734L5.43449 11.8411L4.59499 16.7385C4.57311 16.8662 4.58739 16.9975 4.63622 17.1175C4.68505 17.2375 4.76648 17.3414 4.8713 17.4175C4.97612 17.4937 5.10016 17.539 5.22938 17.5483C5.3586 17.5577 5.48785 17.5306 5.60252 17.4704L9.99998 15.1588L14.3974 17.4704C14.5121 17.5306 14.6414 17.5577 14.7706 17.5483C14.8998 17.539 15.0238 17.4937 15.1286 17.4175C15.2335 17.3414 15.3149 17.2375 15.3637 17.1175C15.4126 16.9975 15.4268 16.8662 15.405 16.7385L14.5655 11.8411L18.1241 8.3734C18.2168 8.28295 18.2823 8.16841 18.3132 8.0427C18.3442 7.91699 18.3394 7.78512 18.2994 7.66199C18.2594 7.53886 18.1858 7.42937 18.0868 7.34587C17.9879 7.26238 17.8675 7.20822 17.7394 7.18949H17.738Z" fill={`url(#${uniqueId})`} />
+                </svg>
+            })}
+        </div>
+    }
+}

package/src/component/select1/select1.css

@@ -0,0 +1,155 @@
+.select1-container {
+    border-radius: 0.4rem;
+    align-items: center;
+    justify-content: start;
+    width: 100%;
+    height: 4rem;
+    max-height: 100%;
+    box-sizing: border-box;
+    padding: 0.8rem;
+    gap: 0.8rem;
+    width: 16rem;
+    position: relative;
+    border: 0.5px solid #00358033;
+    cursor: context-menu;
+}
+
+.select1-container.disabled {
+    background-color: var(--disabled-background) !important;
+    pointer-events: none !important;
+}
+
+.select1-container.helper-text {
+    overflow: visible !important;
+    border-color: var(--helper-text-color) !important;
+}
+
+.select1-container.helper-text::after {
+    content: attr(helper-text);
+    color: var(--helper-text-color);
+    position: absolute;
+    left: 0;
+    bottom: -0.4rem;
+    width: max-content;
+    font: 400 1.2rem/1.6rem 'Inter';
+    transform: translate(-7.5%, 92.5%) scale(0.85);
+}
+
+.select1-container::-webkit-scrollbar {
+    display: none;
+}
+
+.selected-item-value>* {
+    pointer-events: none;
+}
+
+.select1-container>.select1-placeholder {
+    font: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-align: inherit;
+    text-overflow: inherit;
+    color: #c5c5c5 !important;
+    flex: 1;
+}
+
+.select1-container>.select1-value-name {
+    font: inherit;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-align: inherit;
+    text-overflow: inherit;
+    flex: 1;
+}
+
+.select1-container>.selected-item-value {
+    border-radius: 4px;
+    padding: 4px 8px;
+    background-color: #c5c5c5;
+    column-gap: 4px;
+}
+
+.select1-container>.selected-item-value>.selected-value-title {
+    font: 400 1.2rem/1.6rem "Inter";
+    color: #1C2430;
+}
+
+.select1-popup {
+    position: absolute;
+    z-index: 10;
+    background-color: white;
+    border-radius: 8px;
+    height: fit-content;
+    box-shadow: 0 0 12px 0 #00204d1f;
+    align-items: center;
+    padding: 8px 0;
+    overflow: hidden;
+    /* border: 0.5px solid #00358033; */
+    box-shadow: -20px 20px 40px -4px rgba(145, 158, 171, 0.24), 0px 0px 2px 0px rgba(145, 158, 171, 0.24);
+}
+
+.select1-popup>.header-search {
+    width: 100%;
+    padding: 0.8rem 1.6rem;
+    box-sizing: border-box;
+    align-items: center;
+    border-bottom: var(--border-grey1);
+}
+
+.select1-popup>.header-search>input {
+    outline: none;
+    padding: 0;
+    border: 0;
+    font: 400 1.4rem/2.2rem "Inter";
+    color: #1C2430;
+    min-width: 0;
+    flex: 1;
+    max-width: 100%;
+}
+
+.select1-popup>.select1-body {
+    width: 100%;
+    align-items: start;
+    row-gap: 2px;
+    overflow: hidden;
+}
+
+.select1-popup>.select1-body>.select1-scroll-view {
+    overflow: hidden auto;
+    max-height: 26rem;
+    min-height: 8rem;
+    width: 100%;
+    align-items: start;
+}
+
+.select1-popup>.select1-body .select1-tile * {
+    pointer-events: none;
+}
+
+.select1-popup>.select1-body .select1-tile {
+    justify-content: start;
+    align-items: center;
+    padding: 1.2rem 1.6rem;
+    gap: 0.8rem;
+    width: 100%;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    text-align: start;
+}
+
+.select1-popup>.select1-body .select1-tile:hover {
+    background-color: var(--infor-color) !important;
+    color: white;
+}
+
+.no-results-found {
+    padding: 8px;
+    font: 400 1.4rem/2rem "Inter";
+    color: #1C2430;
+}

package/src/component/select1/select1.tsx

@@ -0,0 +1,241 @@
+import React, { CSSProperties, FocusEvent, ReactNode } from 'react'
+import {
+    faChevronDown,
+    faChevronUp,
+    faSearch,
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import ReactDOM from 'react-dom'
+import './select1.css'
+
+interface OptionsItem {
+    id: string | number,
+    name: string | ReactNode,
+    title?: string | ReactNode
+}
+
+interface Select1Props {
+    value?: any,
+    options: Required<Array<OptionsItem>>,
+    onChange?: (value?: OptionsItem) => void,
+    placeholder?: string,
+    disabled?: boolean,
+    className?: string,
+    helperText?: string,
+    helperTextColor?: string,
+    style?: CSSProperties,
+    searchPlaceholder?: string,
+    hideSearch?: boolean,
+    handleSearch?: (e: string) => Promise<Array<OptionsItem>>
+};
+
+interface Select1State {
+    value?: string | number,
+    offset: DOMRect,
+    isOpen: boolean,
+    onSelect: any,
+    search?: Array<OptionsItem>,
+    style?: Object
+};
+
+export class Select1 extends React.Component<Select1Props, Select1State> {
+    constructor(props: Select1Props) {
+        super(props)
+        this.state = {
+            value: this.props.value,
+            offset: {
+                x: 0,
+                y: 0,
+                height: 0,
+                width: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+                toJSON: function () {
+                    throw new Error('Function not implemented.')
+                }
+            },
+            isOpen: false,
+            onSelect: null,
+        }
+        this.parseValue = this.parseValue.bind(this)
+        this.onChangeValue = this.onChangeValue.bind(this)
+        this.search = this.search.bind(this)
+    }
+
+    private parseValue(value: any) {
+        if (value === null || value === undefined || value === '') {
+            return null
+        }
+        switch (typeof this.props.options[0].id) {
+            case 'number':
+                return parseFloat(value)
+            default:
+                return value
+        }
+    }
+
+    componentDidUpdate(prevProps: Select1Props, prevState: Select1State) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({
+                ...this.state,
+                value: this.props.value
+            })
+        }
+        if (prevState.isOpen !== this.state.isOpen && this.state.isOpen) {
+            const thisPopupRect = document.body.querySelector('.select1-popup')?.getBoundingClientRect()
+            if (thisPopupRect) {
+                let style: { top?: string, left?: string, right?: string, bottom?: string, width?: string, height?: string } | undefined;
+                if (thisPopupRect.right > document.body.offsetWidth) {
+                    style = {
+                        top: this.state.offset.y + this.state.offset.height + 2 + 'px',
+                        width: `${this.state.offset.width}px`,
+                        right: document.body.offsetWidth - this.state.offset.right + 'px'
+                    }
+                }
+                if (thisPopupRect.bottom > document.body.offsetHeight) {
+                    style = style ? {
+                        ...style,
+                        top: undefined,
+                        bottom: document.body.offsetHeight - this.state.offset.bottom + 'px'
+                    } : {
+                        left: this.state.offset.x + 'px',
+                        width: `${this.state.offset.width}px`,
+                        bottom: document.body.offsetHeight - this.state.offset.bottom + 'px'
+                    }
+                }
+                if (style) this.setState({ ...this.state, style: style })
+            }
+        }
+    }
+
+    private onChangeValue(ev: FocusEvent) {
+        if (this.state.onSelect?.classList?.contains('select1-tile')) {
+            const item = this.props.options.find(e => e.id === this.parseValue(this.state.onSelect.id))
+            this.setState({
+                ...this.state,
+                isOpen: false,
+                onSelect: null,
+                value: item?.id
+            })
+            if (this.props.onChange) this.props.onChange(item)
+        } else if (this.state.onSelect) {
+            (ev.target as HTMLInputElement).focus()
+        } else {
+            this.setState({
+                ...this.state,
+                isOpen: false,
+                onSelect: null
+            })
+        }
+    }
+
+    private search(ev: React.ChangeEvent<HTMLInputElement>) {
+        if (ev.target.value.trim().length) {
+            if (this.props.handleSearch) {
+                this.props.handleSearch(ev.target.value.trim()).then(res => {
+                    this.setState({
+                        ...this.state,
+                        search: res
+                    })
+                })
+            } else {
+                this.setState({
+                    ...this.state,
+                    search: this.props.options.filter(e => typeof e.name === 'string' && e.name.toLowerCase().includes(ev.target.value.trim().toLowerCase()))
+                })
+            }
+        } else {
+            this.setState({
+                ...this.state,
+                search: undefined
+            })
+        }
+    }
+
+    render() {
+        const selectedValue: OptionsItem | undefined = (this.props.options ?? []).find(e => e.id === this.state.value)
+        return <div
+            className={`select1-container row ${this.props.className ?? 'placeholder-2'} ${this.props.disabled ? 'disabled' : ''} ${this.props.helperText?.length && 'helper-text'}`}
+            helper-text={this.props.helperText}
+            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
+            onClick={ev => {
+                if (!this.state.isOpen) {
+                    let _offset = ((ev.target as HTMLElement).closest('.select1-container') ?? (ev.target as HTMLElement)).getBoundingClientRect()
+                    if (_offset.bottom + 32 > document.body.offsetHeight) {
+                        this.setState({
+                            ...this.state,
+                            isOpen: true,
+                            offset: _offset,
+                            style: {
+                                left: _offset.x + 'px',
+                                bottom: (document.body.offsetHeight - _offset.y) + 'px',
+                                width: `${_offset.width / 10}rem`
+                            }
+                        })
+                    } else {
+                        this.setState({
+                            ...this.state,
+                            isOpen: true,
+                            offset: _offset,
+                            style: undefined
+                        })
+                    }
+                }
+            }}
+        >
+            {selectedValue?.name ? (<div className='select1-value-name'>{selectedValue.name}</div>) : (<div className='select1-placeholder'>{this.props.placeholder}</div>)}
+            <FontAwesomeIcon
+                icon={this.state.isOpen ? faChevronUp : faChevronDown}
+                style={{ fontSize: '1.2rem', color: '#888' }}
+            />
+            {this.state.isOpen &&
+                ReactDOM.createPortal(
+                    <div
+                        className='select1-popup col'
+                        style={this.state.style ?? {
+                            top: this.state.offset.y + this.state.offset.height + 2 + 'px',
+                            left: this.state.offset.x + 'px',
+                            width: this.state.offset.width,
+                        }}
+                        onMouseOver={ev => {
+                            this.setState({
+                                ...this.state,
+                                onSelect: ev.target
+                            })
+                        }}
+                        onMouseOut={() =>
+                            this.setState({
+                                ...this.state,
+                                onSelect: null
+                            })
+                        }
+                    >
+                        <div className='row header-search' style={this.props.hideSearch ? { marginTop: '-4rem' } : undefined}>
+                            <input autoFocus={true} placeholder={this.props.searchPlaceholder ?? 'Tìm kiếm'}
+                                onChange={this.search}
+                                onBlur={ev => {
+                                    this.onChangeValue(ev)
+                                }}
+                            />
+                            <FontAwesomeIcon icon={faSearch} style={{ fontSize: '1.2rem', color: '#161D24D9' }} />
+                        </div>
+                        <div className='col select1-body'>
+                            <div className='col select1-scroll-view'>
+                                {(this.state.search ?? this.props.options).map(item => (
+                                    <button type='button' key={item.id} className='select1-tile label-3 row' id={`${item.id}`} style={{ backgroundColor: selectedValue?.id === item.id ? 'var(--selected-background)' : '#00000000' }}>
+                                        {item.title ?? item.name}
+                                    </button>
+                                ))}
+                                {(this.state.search?.length === 0 || this.props.options?.length === 0) && (
+                                    <div className='no-results-found'>No result found</div>
+                                )}
+                            </div>
+                        </div>
+                    </div>,
+                    document.body
+                )}
+        </div>
+    }
+}

package/src/component/slider/slider.css

@@ -0,0 +1,16 @@
+.custom-slider-container {
+    --content-background-color: #00000000 !important;
+}
+
+.custom-slider-container .awssld__content>* {
+    width: 100%;
+    height: 100%;
+}
+
+.custom-slider-container .awssld__controls button {
+    padding: 2.4rem;
+    width: fit-content;
+    height: fit-content;
+    top: 50%;
+    transform: translateY(-50%);
+}