wini-web-components 2.8.2 → 2.8.4

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "wini-web-components",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "styles",
+    "*.css"
   ],
   "scripts": {
     "build": "tsc && vite build",
@@ -38,6 +41,7 @@
     "globals": "^15.15.0",
     "path": "^0.12.7",
     "sass": "^1.85.1",
+    "tsup": "^8.4.0",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.24.1",
     "url": "^0.11.4",

package/src/component/button/button.module.css

@@ -0,0 +1,210 @@
+.button-container {
+    padding: 0.4rem 1.2rem;
+    border-radius: 0.8rem;
+    gap: 0.8rem;
+    justify-content: center;
+    color: var(--neutral-text-subtitle-color, #61616B);
+    width: fit-content;
+    border: 1px solid transparent;
+    outline: none;
+}
+
+.button-container[class~="border"] {
+    border: var(--neutral-bolder-border);
+}
+
+.button-container[class~="dashed"] {
+    border-style: dashed;
+    color: hsla(hue, saturation, lightness, alpha);
+}
+
+.button-container[class~="size64"] {
+    padding: 1.9rem 2.4rem;
+}
+
+.button-container[class~="size56"] {
+    padding: 1.5rem 2rem;
+}
+
+.button-container[class~="size48"] {
+    padding: 1.1rem 2rem;
+}
+
+.button-container[class~="size40"] {
+    padding: 0.8rem 1.6rem;
+}
+
+.button-container[class~="size24"] {
+    padding: 0.3rem 0.8rem;
+}
+
+.button-container>.button-label {
+    color: inherit;
+    font: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    text-align: inherit;
+    letter-spacing: inherit;
+    text-decoration: inherit;
+    font-style: inherit;
+}
+
+button[class~="button-grey"],
+a[class~="button-grey"] {
+    background-color: var(--neutral-main-background-color) !important;
+    border-color: var(--neutral-main-background-color) !important;
+}
+
+button[class~="button-grey"] *,
+a[class~="button-grey"] * {
+    color: var(--neutral-text-subtitle-color) !important;
+    --color: var(--neutral-text-subtitle-color) !important;
+}
+
+button[class~="button-primary"],
+a[class~="button-primary"] {
+    background-color: var(--primary-main-color) !important;
+    border-color: var(--primary-main-color) !important;
+}
+
+button[class~="button-primary"] *,
+a[class~="button-primary"] * {
+    color: var(--neutral-text-stable-color) !important;
+    --color: var(--neutral-text-stable-color) !important;
+}
+
+button[class~="button-neutral"],
+a[class~="button-neutral"] {
+    border-color: var(--neutral-bolder-border-color) !important;
+}
+
+button[class~="button-neutral"] *,
+a[class~="button-neutral"] * {
+    color: var(--neutral-text-subtitle-color) !important;
+    --color: var(--neutral-text-subtitle-color) !important;
+}
+
+button[class~="button-neutral"],
+a[class~="button-neutral"] {
+    border-color: var(--neutral-bolder-border-color) !important;
+}
+
+button[class~="button-black"] *,
+a[class~="button-black"] * {
+    color: var(--neutral-text-title-reverse-color) !important;
+    --color: var(--neutral-text-title-reverse-color) !important;
+}
+
+button[class~="button-black"],
+a[class~="button-black"] {
+    background-color: var(--neutral-absolute-reverse-background-color) !important;
+    border-color: var(--neutral-bolder-reverse-border-color) !important;
+}
+
+button[class~="button-white"] *,
+a[class~="button-white"] * {
+    color: var(--neutral-text-title-reverse-color) !important;
+    --color: var(--neutral-text-title-reverse-color) !important;
+}
+
+button[class~="button-white"],
+a[class~="button-white"] {
+    background-color: var(--neutral-absolute-background-color) !important;
+    border-color: var(--neutral-bolder-border-color) !important;
+}
+
+button[class~="button-infor"] *,
+a[class~="button-infor"] * {
+    color: var(--infor-main-color) !important;
+    --color: var(--infor-main-color) !important;
+}
+
+button[class~="button-warning"],
+a[class~="button-warning"] {
+    border-color: var(--warning-main-color) !important;
+}
+
+button[class~="button-warning"] *,
+a[class~="button-warning"] * {
+    color: var(--warning-main-color) !important;
+    --color: var(--warning-main-color) !important;
+}
+
+button[class~="button-error"],
+a[class~="button-error"] {
+    border-color: var(--error-main-color) !important;
+}
+
+button[class~="button-error"] *,
+a[class~="button-error"] * {
+    color: var(--error-main-color) !important;
+    --color: var(--error-main-color) !important;
+}
+
+button[class~="button-success"],
+a[class~="button-success"] {
+    border-color: var(--success-main-color) !important;
+}
+
+button[class~="button-success"] *,
+a[class~="button-success"] * {
+    color: var(--success-main-color) !important;
+    --color: var(--success-main-color) !important;
+}
+
+button[class~="button-infor-main"],
+a[class~="button-infor-main"] {
+    background-color: var(--infor-main-color) !important;
+    border: var(--infor-main-color) !important;
+}
+
+button[class~="button-warning-main"],
+a[class~="button-warning-main"] {
+    background-color: var(--warning-main-color) !important;
+    border: var(--warning-main-color) !important;
+}
+
+button[class~="button-error-main"],
+a[class~="button-error-main"] {
+    background-color: var(--error-main-color) !important;
+    border: var(--error-main-color) !important;
+}
+
+button[class~="button-success-main"],
+a[class~="button-success-main"] {
+    background-color: var(--success-main-color) !important;
+    border-color: var(--success-main-color) !important;
+}
+
+button[class~="button-infor-main"] *,
+a[class~="button-infor-main"] *,
+button[class~="button-warning-main"] *,
+a[class~="button-warning-main"] *,
+button[class~="button-error-main"] *,
+a[class~="button-error-main"] *,
+button[class~="button-success-main"] *,
+a[class~="button-success-main"] * {
+    color: var(--neutral-text-stable-color) !important;
+    --color: var(--neutral-text-stable-color) !important;
+}
+
+button.button-container:hover {
+    opacity: 0.86;
+}
+
+button.button-container:focus {
+    box-shadow: 0px 4px 20px 0px #0000001A inset;
+}
+
+.button-container:disabled {
+    pointer-events: none;
+    background-color: var(--neutral-disable-background-color, #dddde1) !important;
+    border-color: var(--neutral-bolder-border-color, #D7D7DB) !important;
+}
+
+.button-container:disabled * {
+    color: var(--neutral-text-disabled-color) !important;
+    --color: var(--neutral-text-disabled-color) !important;
+}

package/src/component/button/button.tsx

@@ -0,0 +1,57 @@
+import React, { CSSProperties, ReactNode, useEffect, useRef } from 'react';
+import { Text } from '../text/text';
+import styles from './button.module.css'
+
+interface ButtonProps {
+    id?: string,
+    label: string,
+    prefix?: ReactNode,
+    suffix?: ReactNode,
+    disabled?: boolean,
+    linkTo?: string,
+    target?: string,
+    style?: CSSProperties,
+    type?: "button" | "reset" | "submit",
+    /** 
+     * default: size32: button-text-3 \
+     * recommend: size64: button-text-1 | size56: button-text-1 | size48: button-text-1 | size40: button-text-3 | size32: button-text-3 | size24: button-text-5 \
+     * status button: button-primary | button-infor | button-warning | button-error | button-success | button-grey | button-neutral | button-infor-main | button-warning-main | button-error-main | button-success-main
+     * */
+    className?: string,
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
+}
+
+export function Button(props: ButtonProps) {
+    const btnRef = useRef<HTMLButtonElement>(null)
+
+    useEffect(() => {
+        if (btnRef.current) {
+            switch (props.type) {
+                case "submit":
+                    function handleSubmit(ev: any) {
+                        switch (ev.key.toLowerCase()) {
+                            case "enter":
+                                btnRef.current!.click()
+                                break;
+                            default:
+                                break;
+                        }
+                    }
+                    window.addEventListener("keydown", handleSubmit)
+                    return () => { window.removeEventListener("keydown", handleSubmit) }
+                default:
+                    break;
+            }
+        }
+    }, [props.type, btnRef.current])
+
+    return props.linkTo ? <a id={props.id} href={props.disabled ? undefined : props.linkTo} target={props.target} className={`${styles['button-container']} row ${props.className ?? "button-text-3"}`} style={props.style} onClick={props.onClick}>
+        {props.prefix}
+        <Text maxLine={1} className={styles['button-label']}>{props.label}</Text>
+        {props.suffix}
+    </a> : <button ref={btnRef} id={props.id} type={props.type ?? "button"} disabled={props.disabled} className={`${styles['button-container']} row ${props.className ?? "button-text-3"}`} style={props.style} onClick={props.onClick}>
+        {props.prefix}
+        <Text maxLine={1} className={styles['button-label']}>{props.label}</Text>
+        {props.suffix}
+    </button>
+}

package/src/component/calendar/calendar.module.css

@@ -0,0 +1,153 @@
+.calendar-container {
+    background-color: var(--neutral-absolute-background-color);
+    border-radius: 0.8rem;
+    align-items: stretch;
+    border: var(--neutral-main-border);
+    width: fit-content;
+}
+
+.calendar-sidebar-options {
+    padding: 0.8rem 2.4rem 0.8rem 0;
+    border-right: var(--neutral-main-border);
+}
+
+.calendar-sidebar-options>.calendar-sidebar-option-buttton {
+    color: var(--neutral-text-title-color);
+    padding: 0.8rem 1.6rem;
+}
+
+.picker-time-container {
+    border-left: var(--neutral-main-border);
+    height: 34.2rem;
+    align-items: center;
+}
+
+.picker-time-container>div[class*="heading-7"]:first-child {
+    width: 100%;
+    padding: 1.2rem 1.6rem;
+    border-bottom: var(--neutral-main-border);
+    text-align: center;
+}
+
+.picker-time-container div[class*="scroll-picker-"] {
+    flex: 1;
+    height: 100%;
+    gap: 0.4rem;
+    padding: 0.4rem 0;
+    overflow: hidden auto;
+    scrollbar-width: thin;
+}
+
+.picker-time-container .scroll-picker-minutes {
+    border-left: var(--neutral-main-border);
+    border-right: var(--neutral-main-border);
+}
+
+.picker-time-container div[class*="scroll-picker-"]>button {
+    width: 5.6rem;
+    padding: 0.4rem 0;
+}
+
+.picker-time-container div[class*="scroll-picker-"]>button.selected {
+    background-color: var(--primary-background);
+    color: var(--primary-main-color);
+}
+
+.picker-date-header {
+    padding: 1.2rem 1.6rem;
+    gap: 1.2rem;
+    background-color: transparent !important;
+    border-bottom: var(--neutral-main-border);
+    justify-content: space-between;
+}
+
+.picker-date-header>span {
+    width: 100%;
+    max-width: 15rem;
+    flex: 1;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 0.8rem;
+}
+
+.picker-date-header>span:hover {
+    background-color: var(--neutral-hover-background-color);
+}
+
+.picker-date-header>button {
+    width: 1.6rem;
+    height: 1.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.picker-date-header>button>svg {
+    font-size: 1.4rem;
+    color: var(--neutral-text-title-color);
+    pointer-events: none;
+}
+
+.picker-date-body {
+    padding: 1.2rem 1.6rem;
+    width: 31.2rem;
+    flex-wrap: wrap;
+    gap: 0.8rem 0;
+}
+
+.picker-date-body>div {
+    height: 3.2rem;
+    padding: 0 0.4rem;
+    display: flex;
+}
+
+.picker-date-body>div>* {
+    border: 1px solid transparent;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+}
+
+.date-picker-circle {
+    width: calc(100% / 7);
+}
+
+.date-picker-circle>* {
+    border-radius: 50%;
+}
+
+.month-picker-circle,
+.year-picker-circle {
+    width: calc(100% / 3);
+}
+
+.month-picker-circle>*,
+.year-picker-circle>* {
+    border-radius: 2.4rem;
+}
+
+.picker-date-body>.in-range {
+    background-color: var(--neutral-main-background-color);
+}
+
+.picker-date-body:has(>.in-range, >.end-range)>.start-range {
+    background-image: linear-gradient(to right, transparent 50%, var(--neutral-main-background-color) 50%);
+}
+
+.end-range {
+    background-image: linear-gradient(to left, transparent 50%, var(--neutral-main-background-color) 50%) !important;
+}
+
+.picker-date-body>.today>* {
+    border-color: var(--primary-main-color)
+}
+
+.picker-date-body>.selected>* {
+    background-color: var(--primary-main-color);
+    color: var(--neutral-absolute-background-color);
+}
+
+.picker-date-body>.invalid {
+    opacity: 0.24 !important;
+    pointer-events: none !important;
+}