@yakad/ui 1.3.110 → 1.3.112

package/dist/AppBar/AppBar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface AppBarProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     overflow?: "shrink" | "wrap" | "scroll";
     position?: "initial" | "sticky" | "scroll";
     size?: "xs" | "sm" | "md" | "lg" | "xl";

package/dist/Button/Button.d.ts

@@ -2,11 +2,11 @@
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     size?: "small" | "medium" | "large";
     variant?: "text" | "outlined" | "filled" | "filledtonal" | "tonal" | "elevated" | "link" | "fab";
-    borderstyle?: "none" | "semi" | "squircle" | "rounded";
+    borderStyle?: "none" | "semi" | "squircle" | "rounded";
     icon?: React.ReactNode;
-    iconposition?: "start" | "end";
-    loadingposition?: "auto" | "center";
-    loadingvariant?: "scaleOut" | "dots" | "spinner";
+    iconPosition?: "start" | "end";
+    loadingPosition?: "auto" | "center";
+    loadingVariant?: "scaleOut" | "dots" | "spinner";
     children?: React.ReactNode;
 }
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Button/Button.js

@@ -15,12 +15,12 @@ import classNames from "classnames";
 import { LoadingIcon } from "..";
 import styles from "./Button.module.css";
 export const Button = forwardRef((_a, ref) => {
-    var { size = "medium", variant = "text", borderstyle = "rounded", icon, iconposition = "start", loadingposition = "auto", loadingvariant, className, children } = _a, restProps = __rest(_a, ["size", "variant", "borderstyle", "icon", "iconposition", "loadingposition", "loadingvariant", "className", "children"]);
-    const childrenFirst = Boolean(iconposition === "end");
-    const isLoadingPositionCenter = Boolean(!icon || loadingposition === "center");
-    const joinedClassNames = classNames(styles.button, styles[variant], { [styles.loading]: loadingvariant }, { [styles.loadingPositionCenter]: isLoadingPositionCenter }, styles[size], styles[borderstyle], { [styles.iconButton]: !children && icon }, className);
-    return (_jsxs("button", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: [childrenFirst && children, loadingvariant && (_jsx("div", { className: classNames(styles.displayOnDisabled, {
+    var { size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children } = _a, restProps = __rest(_a, ["size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children"]);
+    const childrenFirst = Boolean(iconPosition === "end");
+    const isLoadingPositionCenter = Boolean(!icon || loadingPosition === "center");
+    const joinedClassNames = classNames(styles.button, styles[variant], { [styles.loading]: loadingVariant }, { [styles.loadingPositionCenter]: isLoadingPositionCenter }, styles[size], styles[borderStyle], { [styles.iconButton]: !children && icon }, className);
+    return (_jsxs("button", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: [childrenFirst && children, loadingVariant && (_jsx("div", { className: classNames(styles.displayOnDisabled, {
                     [styles.positionCenter]: isLoadingPositionCenter,
-                }), children: _jsx(LoadingIcon, { size: size, variant: loadingvariant }) })), icon, !childrenFirst && children] })));
+                }), children: _jsx(LoadingIcon, { size: size, variant: loadingVariant }) })), icon, !childrenFirst && children] })));
 });
 Button.displayName = "Button";

package/dist/Card/Card.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     blur?: boolean;
     children?: React.ReactNode;
 }

package/dist/CodeBox/CodeBox.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface CodeBoxProps extends React.HTMLAttributes<HTMLDivElement> {
-    copybutton?: boolean;
+    copyButton?: boolean;
     children?: React.ReactNode;
 }
 export declare const CodeBox: import("react").ForwardRefExoticComponent<CodeBoxProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/CodeBox/CodeBox.js

@@ -16,8 +16,8 @@ import { Symbol } from "@yakad/symbols";
 import { Button, Card } from "..";
 import styles from "./CodeBox.module.css";
 export const CodeBox = forwardRef((_a, ref) => {
-    var { copybutton, className, children } = _a, restProps = __rest(_a, ["copybutton", "className", "children"]);
+    var { copyButton, className, children } = _a, restProps = __rest(_a, ["copyButton", "className", "children"]);
     const joinedClassNames = classNames("fullWidthLover", styles.ZZZZZZZZZZ, className);
-    return (_jsxs(Card, Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: [_jsx("pre", { children: children }), copybutton && _jsx(Button, { icon: _jsx(Symbol, { icon: "copy_all" }) })] })));
+    return (_jsxs(Card, Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: [_jsx("pre", { children: children }), copyButton && _jsx(Button, { icon: _jsx(Symbol, { icon: "copy_all" }) })] })));
 });
 CodeBox.displayName = "CodeBox";

package/dist/CodeField/CodeField.d.ts

@@ -2,7 +2,7 @@
 type ExcludedTypes = "minLength" | "maxLength" | "type";
 export interface CodeFieldsProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedTypes> {
     length?: number;
-    onfilled?: () => void;
+    onFilled?: () => void;
     children?: React.ReactNode;
 }
 export declare const CodeField: import("react").ForwardRefExoticComponent<CodeFieldsProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/CodeField/CodeField.js

@@ -31,11 +31,11 @@ function removeUnNumberChars(inputElement) {
     inputElement.value = inputElement.value.replace(/[^0-9]+/, "");
 }
 export const CodeField = forwardRef((_a, ref) => {
-    var { length = 6, onfilled, autoComplete, pattern, onInput, className, style } = _a, restProps = __rest(_a, ["length", "onfilled", "autoComplete", "pattern", "onInput", "className", "style"]);
+    var { length = 6, onFilled, autoComplete, pattern, onInput, className, style } = _a, restProps = __rest(_a, ["length", "onFilled", "autoComplete", "pattern", "onInput", "className", "style"]);
     const joinedClassNames = classNames("fullWidthLover", styles.input, className);
     const joinedStyles = Object.assign(Object.assign({}, style), { width: `calc(1.5ch * ${length})` });
     return (_jsx("input", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, style: joinedStyles, type: "number", minLength: length, maxLength: length, autoComplete: autoComplete || "off", pattern: pattern || "[0-9]", onInput: (event) => {
-            isInputFilled(event, length) && onfilled;
+            isInputFilled(event, length) && onFilled;
             onInput;
         } })));
 });

package/dist/Container/Container.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     children?: React.ReactNode;
 }

package/dist/Footer/Footer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     overflow?: "shrink" | "wrap" | "scroll";
     position?: "initial" | "sticky" | "scroll";
     size?: "xs" | "sm" | "md" | "lg" | "xl";

package/dist/Form/Form.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     children?: React.ReactNode;
 }
 export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;

package/dist/GridItem/GridItem.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 type GridColumn = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     xs?: GridColumn;
     sm?: GridColumn;
     md?: GridColumn;

package/dist/InputField/InputField.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
     variant?: "outlined" | "filled";
-    boxsize?: "small" | "normal";
+    boxSize?: "small" | "normal";
 }
 export declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/InputField/InputField.js

@@ -14,8 +14,8 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./InputField.module.css";
 export const InputField = forwardRef((_a, ref) => {
-    var { variant = "outlined", boxsize = "normal", placeholder, className } = _a, restProps = __rest(_a, ["variant", "boxsize", "placeholder", "className"]);
-    const joinedClassNames = classNames(styles.input, styles[variant], styles[boxsize], placeholder && styles.havePlaceHolder, className);
+    var { variant = "outlined", boxSize = "normal", placeholder, className } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className"]);
+    const joinedClassNames = classNames(styles.input, styles[variant], styles[boxSize], placeholder && styles.havePlaceHolder, className);
     return (_jsxs("div", { className: classNames("fullWidthLover", styles.div), children: [_jsx("input", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, placeholder: " " })), placeholder && (_jsx("label", { className: styles.label, children: placeholder }))] }));
 });
 InputField.displayName = "InputField";

package/dist/ListItem/ListItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
 }
 export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/Main/Main.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
-    navopen?: boolean;
+    align?: "start" | "space" | "center" | "end";
+    navOpen?: boolean;
     children?: React.ReactNode;
 }
 export declare const Main: import("react").ForwardRefExoticComponent<MainProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Main/Main.js

@@ -15,8 +15,8 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Main.module.css";
 export const Main = forwardRef((_a, ref) => {
-    var { align, navopen = false, className, children } = _a, restProps = __rest(_a, ["align", "navopen", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.main, { [styles.navOpen]: navopen }, className);
+    var { align, navOpen = false, className, children } = _a, restProps = __rest(_a, ["align", "navOpen", "className", "children"]);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.main, { [styles.navOpen]: navOpen }, className);
     return (_jsx("main", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 Main.displayName = "Main";

package/dist/Navigation/Navigation.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     anchor?: "left" | "right" | "top" | "bottom" | "auto";
     open: boolean;
     children?: React.ReactNode;

package/dist/RadioButton/RadioButton.d.ts

@@ -3,7 +3,7 @@ type ExcludedTypes = "type" | "name" | "defaultValue" | "defaultChecked" | "chec
 export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedTypes> {
     value: string | number;
     label?: string;
-    datafromradiogroup?: {
+    dataFromRadioGroup?: {
         name: string;
         onSelect: () => void;
         checked: boolean;

package/dist/RadioButton/RadioButton.js

@@ -17,17 +17,17 @@ import { Symbol } from "@yakad/symbols";
 import { Button } from "..";
 import styles from "./RadioButton.module.css";
 export const RadioButton = forwardRef((_a, ref) => {
-    var { datafromradiogroup, label, onClick, className } = _a, restProps = __rest(_a, ["datafromradiogroup", "label", "onClick", "className"]);
+    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();
+        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(Symbol, { icon: (datafromradiogroup === null || datafromradiogroup === void 0 ? void 0 : datafromradiogroup.checked)
+    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(Symbol, { 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({ ref: ref }, 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 }))] }));
+                        : "radio_button_unchecked" }), onClick: onClickRadioButtonHandler, disabled: restProps.disabled }), _jsx("input", Object.assign({ ref: ref }, 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 }))] }));
 });
 RadioButton.displayName = "RadioButton";

package/dist/RadioGroup/RadioGroup.d.ts

@@ -4,7 +4,7 @@ type RadioButtonElement = React.ReactElement<RadioButtonProps>;
 type ExcludedTypes = "defaultValue" | "children";
 export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, ExcludedTypes> {
     name: string;
-    defaultvalue?: string;
+    defaultValue?: string;
     children?: RadioButtonElement | RadioButtonElement[];
 }
 export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/RadioGroup/RadioGroup.js

@@ -14,10 +14,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, forwardRef, Children } from "react";
 import { RadioButton } from "..";
 export const RadioGroup = forwardRef((_a, ref) => {
-    var { name, defaultvalue, className, children } = _a, restProps = __rest(_a, ["name", "defaultvalue", "className", "children"]);
-    const [selectedValue, setSelectedValue] = useState(defaultvalue || null);
+    var { name, defaultValue, className, children } = _a, restProps = __rest(_a, ["name", "defaultValue", "className", "children"]);
+    const [selectedValue, setSelectedValue] = useState(defaultValue || null);
     const arrayChildren = Children.toArray(children);
-    const renderChildrens = () => arrayChildren.map((child, index) => (_jsx(RadioButton, Object.assign({}, child.props, { datafromradiogroup: {
+    const renderChildrens = () => arrayChildren.map((child, index) => (_jsx(RadioButton, Object.assign({}, child.props, { dataFromRadioGroup: {
             name: name,
             onSelect: () => setSelectedValue(child.props.value),
             checked: selectedValue === child.props.value,

package/dist/Row/Row.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     overflow?: "shrink" | "wrap" | "scroll";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     children?: React.ReactNode;

package/dist/Screen/Screen.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface ScreenProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     children?: React.ReactNode;
 }
 export declare const Screen: import("react").ForwardRefExoticComponent<ScreenProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Stack/Stack.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     children?: React.ReactNode;
 }
 export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Theme/Theme.d.ts

@@ -3,8 +3,8 @@ import "./globals.css";
 export type DarkStyle = "light" | "dark" | "system";
 export type ThemeColor = "green" | "red" | "yellow" | "blue" | "purple";
 export interface ThemeProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
-    darkstyle?: DarkStyle;
+    align?: "start" | "space" | "center" | "end";
+    darkStyle?: DarkStyle;
     color?: ThemeColor;
     zoom?: number;
     children?: React.ReactNode;

package/dist/Theme/Theme.js

@@ -17,12 +17,12 @@ import "./globals.css";
 import styles from "./Theme.module.css";
 import boxingStyles from "../boxing.module.css";
 export const Theme = forwardRef((_a, ref) => {
-    var { align, darkstyle = "system", color = "blue", zoom = 100, className, children } = _a, restProps = __rest(_a, ["align", "darkstyle", "color", "zoom", "className", "children"]);
+    var { align, darkStyle = "system", color = "blue", zoom = 100, className, children } = _a, restProps = __rest(_a, ["align", "darkStyle", "color", "zoom", "className", "children"]);
     const zoomPercentage = zoom ? (zoom / 100) * 62.5 : 62.5;
     useEffect(() => {
         document.documentElement.style.setProperty("font-size", zoomPercentage + "%");
     }, [zoomPercentage]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.theme, styles[darkstyle], styles[color], className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.theme, styles[darkStyle], styles[color], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 Theme.displayName = "Theme";

package/dist/WithDropdawn/WithDropdawn.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface WithDropdawnProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     blur?: boolean;
     trigger?: "onClick" | "onRightClick";
     dropdawnChildren?: React.ReactElement;

package/dist/WithDropdawn/WithDropdawn.module.css

@@ -28,12 +28,12 @@
     height: 0;
     border-left: 0.6rem solid transparent;
     border-right: 0.6rem solid transparent;
-    border-bottom: 0.6rem solid
+    border-bottom: 0.8rem solid
         rgb(var(--surfaceContainerHighestColor, 230 224 233));
     transform: translate(-50%, -100%);
 }
 .arrow.blur {
-    border-bottom: 0.6rem solid
+    border-bottom: 0.8rem solid
         color-mix(
             in srgb,
             rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,

package/dist/boxing.module.css

@@ -10,6 +10,10 @@
     align-items: flex-start;
 }
 .flexColumnBox.center {
+    justify-content: center;
+    align-items: center;
+}
+.flexColumnBox.space {
     justify-content: space-evenly;
     align-items: center;
 }
@@ -37,6 +41,9 @@
 .flexRowBox.center {
     justify-content: center;
 }
+.flexRowBox.space {
+    justify-content: space-evenly;
+}
 .flexRowBox.end {
     justify-content: flex-end;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.110",
+    "version": "1.3.112",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",