@yakad/ui 2.0.2 → 2.0.3

package/dist/Button/Button.module.css

@@ -1,190 +0,0 @@
-.button {
-    display: flex;
-    position: relative;
-    text-align: center;
-    align-items: center;
-    line-height: 2rem;
-    font-weight: 700;
-    padding: 0.5rem var(--padding);
-    border: none;
-    background: none;
-    color: inherit;
-    fill: inherit;
-    user-select: none;
-    cursor: pointer;
-    box-sizing: border-box;
-    text-decoration: none;
-}
-.small {
-    min-width: 3rem;
-    min-height: 3rem;
-    --padding: 2rem;
-    gap: 0.4rem;
-    font-size: 1.2rem;
-    --border-radius: 1.5rem;
-}
-.medium {
-    min-width: 4rem;
-    min-height: 4rem;
-    --padding: 2.4rem;
-    gap: 0.8rem;
-    font-size: 1.4rem;
-    --border-radius: 2rem;
-}
-.large {
-    min-width: 5rem;
-    min-height: 5rem;
-    --padding: 3.2rem;
-    gap: 1.1rem;
-    font-size: 1.8rem;
-    --border-radius: 2.5rem;
-}
-
-.iconButton {
-    padding: 0;
-    justify-content: center;
-}
-
-.none {
-    border-radius: 0;
-}
-.semi {
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-}
-[dir="rtl"] .semi {
-    border-radius: var(--border-radius) 0 0 var(--border-radius);
-}
-.squircle {
-    border-radius: calc(var(--border-radius) / 2);
-}
-.rounded {
-    border-radius: var(--border-radius);
-}
-
-@media (pointer: fine) {
-    .button:hover {
-        cursor: pointer;
-        box-shadow: inset 0 0 10rem #00000010;
-        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-    }
-}
-.button:active {
-    box-shadow: inset 0 0 10rem #7d7d7d30;
-}
-.button:invalid {
-    border: 0.1rem solid rgb(var(--errorColor, 179 38 30));
-}
-.text {
-    color: rgb(var(--primaryColor, 11 87 208));
-    fill: rgb(var(--primaryColor, 11 87 208));
-}
-
-.outlined {
-    color: rgb(var(--primaryColor, 11 87 208));
-    fill: rgb(var(--primaryColor, 11 87 208));
-    border: 0.1rem solid #7d7d7d70;
-}
-.filled {
-    background: rgb(var(--primaryColor, 11 87 208));
-    color: rgb(var(--onPrimaryColor, 255 255 255));
-    fill: rgb(var(--onPrimaryColor, 255 255 255));
-}
-.filledtonal {
-    background: rgb(var(--primaryContainerColor, 211 227 253));
-    color: rgb(var(--onPrimaryContainerColor, 4 30 73));
-    fill: rgb(var(--onPrimaryContainerColor, 4 30 73));
-}
-.tonal {
-    background: rgb(var(--tertiaryColor, 196 238 208));
-    color: rgb(var(--onTertiaryColor, 7 39 17));
-    fill: rgb(var(--onTertiaryColor, 7 39 17));
-}
-.elevated {
-    background-color: rgb(var(--onSecondaryColor, 255 255 255));
-    color: rgb(var(--primaryColor, 11 87 208));
-    fill: rgb(var(--primaryColor, 11 87 208));
-    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-}
-.link {
-    background: transparent;
-    display: flex;
-    position: relative;
-    transition: 0.3s;
-}
-
-.small.fab {
-    border-radius: 1.1rem;
-    height: 4.6rem;
-    min-width: 4.6rem;
-    --padding: 1.2rem;
-    font-size: 1.4rem;
-}
-.medium.fab {
-    border-radius: 1.3rem;
-    height: 5.6rem;
-    min-width: 5.6rem;
-    --padding: 1.6rem;
-    font-size: 1.6rem;
-}
-.large.fab {
-    border-radius: 1.5rem;
-    height: 6.6rem;
-    min-width: 6.6rem;
-    --padding: 1.8rem;
-    font-size: 1.8rem;
-}
-.fab {
-    justify-content: center;
-    background: rgb(var(--primaryContainerColor, 211 227 253));
-    color: rgb(var(--onPrimaryContainerColor, 4 30 73));
-    fill: rgb(var(--onPrimaryContainerColor, 4, 30, 73));
-}
-.link:before {
-    content: "";
-    position: absolute;
-    bottom: 0.5rem;
-    left: 0;
-    right: 0;
-    width: 0;
-    height: 0.1rem;
-    padding: 0;
-    margin: 0 auto;
-    background-color: rgb(var(--primaryColor, 30 100 212));
-    transition: 0.3s;
-}
-
-.link:hover {
-    box-shadow: none;
-}
-.link:hover:before {
-    width: calc(100% - var(--padding));
-}
-
-.loading.loadingPositionCenter:disabled {
-    color: transparent;
-    fill: transparent;
-}
-.loading.loadingPositionCenter {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%);
-}
-
-.button:disabled {
-    cursor: default;
-    box-shadow: none;
-    box-shadow: inset 0 0 10rem #7d7d7d20;
-}
-.button.link:disabled:before {
-    display: none;
-}
-
-.loading .displayOnDisabled {
-    display: none;
-}
-.loading:disabled .displayOnDisabled {
-    display: block;
-}
-.loading:disabled .hideOnDisabled {
-    display: none;
-}

package/dist/Card/Card.module.css

@@ -1,48 +0,0 @@
-/* BackgroundColor Levels */
-.yakadCardAutoLevel,
-.yakadCardLowLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerColor);
-}
-.yakadCardAutoLevel .yakadCardAutoLevel,
-.yakadCardLowLevel .yakadCardAutoLevel,
-.yakadCardMidLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerHighColor);
-    --yakadCardBackgroundColor: var(--surfaceContainerHighColor);
-}
-.yakadCardAutoLevel .yakadCardAutoLevel .yakadCardAutoLevel,
-.yakadCardLowLevel .yakadCardAutoLevel .yakadCardAutoLevel,
-.yakadCardMidLevel .yakadCardAutoLevel,
-.yakadCardHighLevel,
-.yakadCardHighLevel .yakadCardAutoLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerHighestColor);
-}
-
-.card {
-    padding: 2rem;
-    border-radius: 2rem;
-    transition: box-shadow 0.3s ease, background-color 0.3s ease;
-}
-
-.card.elevated {
-    box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
-        0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
-    background-color: rgb(var(--yakadCardBackgroundColor, 230 224 233));
-    color: rgb(var(--onSurfaceColor, 28 27 31));
-    fill: rgb(var(--onSurfaceColor, 28 27 31));
-}
-
-.card.hoverEffect:hover {
-    box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
-        0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
-    background-color: rgb(var(--surfaceContainerHighestColor, 230 224 233));
-    cursor: pointer;
-}
-
-.card.blur {
-    background-color: color-mix(
-        in srgb,
-        rgb(var(--yakadCardBackgroundColor, 230 224 233)) 85%,
-        transparent
-    );
-    backdrop-filter: blur(0.5rem);
-}

package/dist/CheckBox/CheckBox.module.css

@@ -1,50 +0,0 @@
-.label {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 4rem;
-    height: 4rem;
-    line-height: 4rem;
-    font-size: 1.6rem;
-    box-sizing: border-box;
-    user-select: none;
-    cursor: pointer;
-}
-.label.disabled {
-    cursor: default;
-}
-
-.label .input {
-    display: none;
-}
-
-.label .symbolContainer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 3.6rem;
-    height: 3.6rem;
-    border-radius: 1.8rem;
-    margin: 0.1rem;
-    margin-inline-start: auto;
-}
-.label:hover .symbolContainer {
-    box-shadow: inset 0 0 10rem #00000010;
-    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-}
-.label:active .symbolContainer {
-    box-shadow: inset 0 0 10rem #7d7d7d30;
-}
-.label.disabled .symbolContainer {
-    box-shadow: none;
-    box-shadow: inset 0 0 10rem #7d7d7d20;
-}
-
-.label .symbolContainer .symbolChecked,
-.label .input:checked + .symbolContainer .symbolUnChecked {
-    display: none;
-}
-.label .symbolContainer .symbolUnChecked,
-.label .input:checked + .symbolContainer .symbolChecked {
-    display: block;
-}

package/dist/CodeBox/CodeBox.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-export interface CodeBoxProps extends React.HTMLAttributes<HTMLDivElement> {
-    copyButton?: boolean;
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function CodeBox({ copyButton, className, children, ...restProps }: CodeBoxProps): React.JSX.Element;

package/dist/CodeBox/CodeBox.js

@@ -1,22 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import { Material } from "@yakad/symbols";
-import { Button, Card } from "..";
-import boxingStyles from "../boxing.module.css";
-import styles from "./CodeBox.module.css";
-export function CodeBox(_a) {
-    var { copyButton, className, children } = _a, restProps = __rest(_a, ["copyButton", "className", "children"]);
-    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.ZZZZZZZZZZ, className);
-    return (_jsxs(Card, Object.assign({}, restProps, { className: joinedClassNames, children: [_jsx("pre", { children: children }), copyButton && _jsx(Button, { icon: _jsx(Material, { icon: "copy_all" }) })] })));
-}

package/dist/CodeField/CodeField.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-type ExcludedTypes = "minLength" | "maxLength" | "type";
-export interface CodeFieldsProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedTypes> {
-    length?: number;
-    onFilled?: () => void;
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLInputElement>;
-}
-export declare function CodeField({ length, onFilled, autoComplete, pattern, onInput, className, style, ...restProps }: CodeFieldsProps): import("react").JSX.Element;
-export {};

package/dist/CodeField/CodeField.js

@@ -1,43 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import boxingStyles from "../boxing.module.css";
-import styles from "./CodeField.module.css";
-function isInputFilled(event, inputLength) {
-    const targetInputElement = event.target;
-    removeUnNumberChars(targetInputElement);
-    if (inputLength === targetInputElement.value.length)
-        return true;
-    sliceOverLength(targetInputElement, inputLength);
-    return false;
-}
-function sliceOverLength(inputElement, inputLength) {
-    const targetLength = inputElement.value.length;
-    if (targetLength > inputLength)
-        inputElement.value = inputElement.value.slice(0, inputLength);
-}
-function removeUnNumberChars(inputElement) {
-    inputElement.value = inputElement.value.replace(/[^0-9]+/, "");
-}
-export function CodeField(_a) {
-    var { length = 6, onFilled, autoComplete, pattern, onInput, className, style } = _a, restProps = __rest(_a, ["length", "onFilled", "autoComplete", "pattern", "onInput", "className", "style"]);
-    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.input, className);
-    const joinedStyles = Object.assign(Object.assign({}, style), { width: `calc(1.5ch * ${length})` });
-    return (_jsx("input", Object.assign({}, restProps, { className: joinedClassNames, style: joinedStyles, type: "number", minLength: length, maxLength: length, autoComplete: autoComplete || "off", pattern: pattern || "[0-9]", onInput: (event) => {
-            if (isInputFilled(event, length)) {
-                onFilled === null || onFilled === void 0 ? void 0 : onFilled();
-            }
-            onInput === null || onInput === void 0 ? void 0 : onInput(event);
-        } })));
-}

package/dist/CodeField/CodeField.module.css

@@ -1,27 +0,0 @@
-.input {
-    box-sizing: border-box;
-    display: block;
-    border: none;
-    padding: 0;
-    margin: auto;
-    background: repeating-linear-gradient(
-            90deg,
-            #7d7d7d 0,
-            #7d7d7d 1ch,
-            transparent 0,
-            transparent 1.5ch
-        )
-        0 100%/100% 0.2rem no-repeat;
-    color: transparent;
-    text-shadow: 0 0 0 rgb(var(--secondaryColor, 98 91 113));
-    letter-spacing: 0.5ch;
-    font-size: 4rem;
-}
-.input:focus {
-    outline: none;
-}
-.input::-webkit-outer-spin-button,
-.input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}

package/dist/Form/Form.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
-    align?: "start" | "space" | "center" | "end";
-    fullWidthOnParentDemand?: boolean;
-    children?: React.ReactNode;
-}
-export declare function Form({ align, fullWidthOnParentDemand, className, children, ...restProps }: FormProps & {
-    ref?: React.Ref<HTMLFormElement>;
-}): import("react").JSX.Element;

package/dist/Form/Form.js

@@ -1,20 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import styles from "./Form.module.css";
-import boxingStyles from "../boxing.module.css";
-export function Form(_a) {
-    var { align, fullWidthOnParentDemand = true, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, { [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, styles.form, className);
-    return (_jsx("form", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
-}

package/dist/Form/Form.module.css

@@ -1,3 +0,0 @@
-.form {
-    gap: 2rem;
-}

package/dist/Navigation/Navigation.module.css

@@ -1,61 +0,0 @@
-.navigation {
-    position: fixed;
-    max-width: 100%;
-    padding: 1rem 0;
-    background: rgb(var(--surfaceContainerColor, 243 237 247));
-    color: rgb(var(--onSurfaceColor, 28 27 31));
-    fill: rgb(var(--onSurfaceColor, 28 27 31));
-    transition: transform 0.3s;
-    overflow-y: auto;
-    z-index: 3;
-}
-
-.auto,
-.left {
-    top: 6rem;
-    left: 0;
-    width: 21.9rem;
-    height: calc(100% - 6rem);
-    max-height: 100%;
-    border-inline-end: 0.2rem solid rgb(var(--outlineColor, 121 116 126));
-    transform: translate(-100%, 0);
-}
-[dir="rtl"] .auto,
-.right {
-    right: 0;
-    top: 6rem;
-    width: 21.9rem;
-    height: calc(100% - 6rem);
-    max-height: 100%;
-    border-inline-end: 0.2rem solid rgb(var(--outlineColor, 121 116 126));
-
-    transform: translate(100%, 0);
-}
-
-.top {
-    top: 0;
-    width: 100%;
-    height: auto;
-    border-bottom: 0.2rem solid rgb(var(--outlineColor, 121 116 126));
-    transform: translate(0, -100%);
-}
-.bottom {
-    bottom: 0;
-    width: 100%;
-    height: auto;
-    border-top: 0.2rem solid rgb(var(--outlineColor, 121 116 126));
-    transform: translate(0, 100%);
-}
-
-.open {
-    transform: translate(0, 0);
-}
-
-@media screen and (max-width: 1000px) {
-    .auto,
-    .left,
-    .right {
-        top: 0;
-        height: 100%;
-    }
-}

package/dist/RadioButton/RadioButton.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-type ExcludedTypes = "type" | "name" | "defaultValue" | "defaultChecked" | "checked";
-export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedTypes> {
-    value: string | number;
-    label?: string;
-    dataFromRadioGroup?: {
-        name: string;
-        onSelect: () => void;
-        checked: boolean;
-    };
-    ref?: React.Ref<HTMLInputElement>;
-}
-export declare function RadioButton({ dataFromRadioGroup, label, onClick, className, ...restProps }: RadioButtonProps): import("react").JSX.Element;
-export {};

package/dist/RadioButton/RadioButton.js

@@ -1,31 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import { Material } from "@yakad/symbols";
-import { Button } from "..";
-import styles from "./RadioButton.module.css";
-export function RadioButton(_a) {
-    var { dataFromRadioGroup, label, onClick, className } = _a, restProps = __rest(_a, ["dataFromRadioGroup", "label", "onClick", "className"]);
-    const joinedClassNames = classNames(styles.radiobutton, {
-        [styles.labeled]: label,
-        className,
-    });
-    const onClickRadioButtonHandler = () => {
-        dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.onSelect();
-        onClick;
-    };
-    return (_jsxs("div", { className: joinedClassNames, children: [label && (_jsx("label", { className: styles.label, htmlFor: dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.name, children: label })), _jsx(Button, { icon: _jsx(Material, { icon: (dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.checked)
-                        ? "radio_button_checked"
-                        : "radio_button_unchecked" }), onClick: onClickRadioButtonHandler, disabled: restProps.disabled }), _jsx("input", Object.assign({}, restProps, { className: styles.input, type: "radio", name: dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.name, checked: dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.checked }))] }));
-}

package/dist/RadioButton/RadioButton.module.css

@@ -1,22 +0,0 @@
-.radiobutton {
-    display: flex;
-    flex-direction: row;
-    width: 4rem;
-    height: 4rem;
-}
-.radiobutton.labeled {
-    width: 100%;
-}
-
-.input {
-    display: none;
-}
-
-.label {
-    display: block;
-    width: auto;
-    margin: 0.9rem 1rem;
-    margin-inline-end: auto;
-    line-height: 2.2rem;
-    font-size: 2rem;
-}

package/dist/Table/Table.module.css

@@ -1,41 +0,0 @@
-.table {
-    border-collapse: unset;
-    border-spacing: unset;
-    border-radius: 0.7rem;
-    overflow: hidden;
-}
-
-.table .tbody .tr:nth-child(even) {
-    background-color: #7d7d7d20;
-}
-.table .tbody .tr:hover {
-    background-color: #7d7d7d30;
-}
-
-.table .thead .tr .th,
-.table .tfoot .tr .td {
-    padding: 1rem;
-    background-color: rgb(var(--surfaceContainerColor, 243 237 247));
-    border-inline-start: 0.1rem solid #7d7d7d15;
-    font-size: 1.5rem;
-    line-height: 3rem;
-    text-align: start;
-}
-.table .thead .tr .th {
-    border-bottom: 0.2rem solid #7d7d7d40;
-}
-.table .tfoot .tr .td {
-    border-top: 0.2rem solid #7d7d7d40;
-}
-
-.table .tbody .tr .td {
-    padding: 0.5rem 1rem;
-    border-inline-start: 0.1rem solid #7d7d7d15;
-    font-size: 1.4rem;
-    line-height: 3rem;
-}
-.table .thead .tr .th:nth-child(1),
-.table .tbody .tr .td:nth-child(1),
-.table .tfoot .tr .td:nth-child(1) {
-    border-inline-start: initial;
-}