@yakad/ui 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "2.0.0",
+    "version": "2.0.2",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -23,15 +23,18 @@
     "homepage": "https://yakad.natiq.net",
     "scripts": {
         "clean": "rimraf dist/",
+        "generate:color": "tsx src/Theme/color/generator.ts",
         "copy-files:css": "copyfiles -u 1 src/*.css src/**/*.css dist/",
         "copy-files:svg": "copyfiles -u 1 src/*.svg src/**/*.svg dist/",
-        "build": "npm run clean && tsc && npm run copy-files:css && npm run copy-files:svg",
+        "build": "npm run clean && tsc && npm run generate:color && npm run copy-files:css && npm run copy-files:svg",
         "typecheck": "tsc --noEmit",
         "lint": "eslint src/**/*.{ts,tsx}",
         "test": "echo \"No tests specified\" && exit 0",
         "prepublishOnly": "npm run lint && npm run test && npm run build && npm run typecheck"
     },
     "dependencies": {
+        "@material/material-color-utilities": "^0.4.0",
+        "@radix-ui/react-separator": "^1.1.15",
         "@yakad/lib": "1.0.23",
         "@yakad/symbols": "1.0.42",
         "@yakad/use-interactions": "1.0.0",
@@ -49,6 +52,7 @@
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "tsx": "^4.23.13"
     }
 }

package/dist/Dropdown/Dropdown.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { CardProps, OverlayProps } from "..";
-export interface DropdownProps extends CardProps, OverlayProps {
-    teleport?: boolean;
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function Dropdown({ fullWidthOnParentDemand, // Def in Card is True
-blur, level, triggerref, onClose, className, style, children, teleport, ref, ...restProps }: DropdownProps): import("react").JSX.Element;

package/dist/Dropdown/Dropdown.js

@@ -1,99 +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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useImperativeHandle } from "react";
-import classNames from "classnames";
-import { Card } from "..";
-import styles from "./Dropdown.module.css";
-import { createPortal } from "react-dom";
-import { useOnOutsideClick } from "@yakad/use-interactions";
-export function Dropdown(_a) {
-    var { fullWidthOnParentDemand = false, // Def in Card is True
-    blur, level = "high", triggerref, onClose, className, style, children, teleport = false, ref } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "blur", "level", "triggerref", "onClose", "className", "style", "children", "teleport", "ref"]);
-    const fallbackTriggerRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const placementTargetRef = triggerref || fallbackTriggerRef;
-    // Let the parent access our DOM node
-    useImperativeHandle(ref, () => dropdownRef.current);
-    const [arrowPosition, setArrowPosition] = useState({
-        top: 0,
-        left: 0,
-    });
-    const [dropdownPosition, setDropdownPosition] = useState({
-        top: 0,
-        left: 0,
-    });
-    const [isPlacedAbove, setIsPlacedAbove] = useState(false);
-    const [isPlaced, setIsPlaced] = useState(false);
-    useEffect(() => {
-        document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = "initial";
-        };
-    }, []);
-    const doTeleport = () => {
-        const portalRoot = document.getElementsByClassName("portalRoot")[0] || document;
-        const t = portalRoot && createPortal(dropdown(), portalRoot);
-        return t;
-    };
-    useEffect(() => {
-        if ((placementTargetRef === null || placementTargetRef === void 0 ? void 0 : placementTargetRef.current) && dropdownRef.current) {
-            const placementTarget = placementTargetRef.current.getBoundingClientRect();
-            const dropdownRect = dropdownRef.current.getBoundingClientRect();
-            const padding = 10;
-            let dropdownY = placementTarget.bottom + padding;
-            let dropdownXPos = placementTarget.left + placementTarget.width / 2;
-            let arrowY = dropdownY;
-            const arrowX = dropdownXPos;
-            // Prevent overflow bottom
-            if (dropdownY + dropdownRect.height > window.innerHeight &&
-                placementTarget.top > dropdownRect.height) {
-                dropdownY = placementTarget.top - padding;
-                arrowY = placementTarget.top - padding;
-                setIsPlacedAbove(true);
-            }
-            else
-                setIsPlacedAbove(false);
-            // Prevent overflow right
-            if (dropdownXPos + dropdownRect.width / 2 >
-                window.innerWidth - padding) {
-                dropdownXPos =
-                    window.innerWidth - dropdownRect.width / 2 - padding;
-            }
-            // Prevent overflow left
-            if (dropdownXPos - dropdownRect.width / 2 < padding) {
-                dropdownXPos = dropdownRect.width / 2 + padding;
-            }
-            setDropdownPosition({
-                top: dropdownY,
-                left: dropdownXPos,
-            });
-            setArrowPosition({
-                top: arrowY,
-                left: arrowX,
-            });
-            setIsPlaced(true);
-        }
-    }, [children, placementTargetRef]);
-    useOnOutsideClick(() => {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, dropdownRef);
-    const dropdown = () => (_jsxs(_Fragment, { children: [!triggerref && _jsx("div", { ref: fallbackTriggerRef }), _jsx(Card, Object.assign({ ref: dropdownRef, fullWidthOnParentDemand: fullWidthOnParentDemand, blur: blur, level: level }, restProps, { className: classNames(styles.dropdownCard, { [styles.isPlacedAbove]: isPlacedAbove }, className), style: Object.assign({ top: dropdownPosition.top, left: dropdownPosition.left, visibility: isPlaced ? "visible" : "hidden" }, style), children: children })), _jsx("span", { className: classNames(styles.arrow, {
-                    [styles.isPlacedAbove]: isPlacedAbove,
-                }, { [styles.blur]: blur }), style: {
-                    top: arrowPosition.top,
-                    left: arrowPosition.left,
-                    visibility: isPlaced ? "visible" : "hidden",
-                } })] }));
-    return teleport ? doTeleport() : dropdown();
-}

package/dist/Dropdown/Dropdown.module.css

@@ -1,39 +0,0 @@
-.dropdownCard {
-    position: fixed;
-    min-width: 6rem;
-    min-height: 10rem;
-    max-width: calc(100vw - 10rem);
-    max-height: min(50vh, 40rem);
-    transform: translate(-50%, 1rem);
-    overflow-x: auto;
-    visibility: hidden;
-    z-index: 4;
-}
-.dropdownCard.isPlacedAbove {
-    transform: translate(-50%, calc(-100% - 1rem));
-}
-
-/* Arrow */
-.arrow {
-    position: fixed;
-    width: 0;
-    height: 0;
-    border-left: 0.8rem solid transparent;
-    border-right: 0.8rem solid transparent;
-    border-bottom: 1rem solid
-        rgb(var(--surfaceContainerHighestColor, 230 224 233));
-    transform: translate(-50%, calc(-100% + 1rem));
-    visibility: hidden;
-    z-index: 4;
-}
-.arrow.isPlacedAbove {
-    transform: translate(-50%, -1rem) rotate(180deg);
-}
-.arrow.blur {
-    border-bottom: 1rem solid
-        color-mix(
-            in srgb,
-            rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
-            transparent
-        );
-}

package/dist/InputField/InputField.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-import { Input } from "./input";
-declare const inputFieldVariants: (props?: ({
-    variant?: "filled" | "outlined" | null | undefined;
-    boxSize?: "small" | "normal" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface InputFieldProps extends Omit<React.ComponentProps<typeof Input>, "size">, VariantProps<typeof inputFieldVariants> {
-    ref?: React.Ref<HTMLInputElement>;
-}
-export declare function InputField({ variant, boxSize, placeholder, className, id, ref, ...restProps }: InputFieldProps): React.JSX.Element;
-export declare namespace InputField {
-    var displayName: string;
-}
-export { inputFieldVariants };

package/dist/InputField/InputField.js

@@ -1,82 +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 * as React from "react";
-import { cva } from "class-variance-authority";
-import { cn } from "./cn";
-import { Input } from "./input";
-const inputFieldVariants = cva([
-    "peer",
-    "w-full",
-    "transition-colors",
-    "placeholder:text-transparent",
-    "focus-visible:ring-offset-0",
-], {
-    variants: {
-        variant: {
-            outlined: [
-                "border",
-                "border-input",
-                "bg-transparent",
-                "focus-visible:ring-1",
-                "focus-visible:ring-ring",
-            ],
-            filled: [
-                "rounded-b-none",
-                "border-0",
-                "border-b-2",
-                "border-input",
-                "bg-muted",
-                "focus-visible:ring-0",
-                "focus-visible:border-primary",
-            ],
-        },
-        boxSize: {
-            small: "h-8 px-2 text-sm",
-            normal: "h-10 px-3 text-base",
-        },
-    },
-    defaultVariants: {
-        variant: "outlined",
-        boxSize: "normal",
-    },
-});
-const labelVariants = cva([
-    "pointer-events-none",
-    "absolute",
-    "left-3",
-    "top-1/2",
-    "-translate-y-1/2",
-    "text-muted-foreground",
-    "transition-all",
-], {
-    variants: {
-        boxSize: {
-            small: "text-sm",
-            normal: "text-base",
-        },
-    },
-    defaultVariants: {
-        boxSize: "normal",
-    },
-});
-export function InputField(_a) {
-    var { variant = "outlined", boxSize = "normal", placeholder, className, id, ref } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className", "id", "ref"]);
-    const generatedId = React.useId();
-    const inputId = id !== null && id !== void 0 ? id : generatedId;
-    return (_jsxs("div", { className: "relative w-full", children: [_jsx(Input, Object.assign({ id: inputId, ref: ref, placeholder: " ", className: cn(inputFieldVariants({
-                    variant,
-                    boxSize,
-                }), className) }, restProps)), placeholder && (_jsx("label", { htmlFor: inputId, className: cn(labelVariants({ boxSize }), "peer-focus:top-0", "peer-focus:-translate-y-1/2", "peer-focus:bg-background", "peer-focus:px-1", "peer-focus:text-xs", "peer-focus:text-primary", "peer-[:not(:placeholder-shown)]:top-0", "peer-[:not(:placeholder-shown)]:-translate-y-1/2", "peer-[:not(:placeholder-shown)]:bg-background", "peer-[:not(:placeholder-shown)]:px-1", "peer-[:not(:placeholder-shown)]:text-xs"), children: placeholder }))] }));
-}
-InputField.displayName = "InputField";
-export { inputFieldVariants };

package/dist/InputField/cn.d.ts

@@ -1,2 +0,0 @@
-import { type ClassValue } from "clsx";
-export declare function cn(...inputs: ClassValue[]): string;

package/dist/InputField/cn.js

@@ -1,5 +0,0 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-export function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}

package/dist/InputField/input.d.ts

@@ -1,7 +0,0 @@
-import * as React from "react";
-export interface InputProps extends React.ComponentProps<"input"> {
-}
-export declare function Input({ className, type, ...props }: InputProps): React.JSX.Element;
-export declare namespace Input {
-    var displayName: string;
-}

package/dist/InputField/input.js

@@ -1,18 +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 { cn } from "./cn";
-export function Input(_a) {
-    var { className, type } = _a, props = __rest(_a, ["className", "type"]);
-    return (_jsx("input", Object.assign({ type: type, "data-slot": "input", className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className) }, props)));
-}
-Input.displayName = "Input";

package/dist/Popup/Popup.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { CardProps, OverlayProps } from "..";
-export interface PopupProps extends CardProps, OverlayProps {
-    heading?: string;
-    teleport?: boolean;
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function Popup({ align, onClose, heading, className, children, teleport, ref, ...restProps }: PopupProps): import("react").JSX.Element;

package/dist/Popup/Popup.js

@@ -1,40 +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 { useEffect, useImperativeHandle } from "react";
-import classNames from "classnames";
-import { Material } from "@yakad/symbols";
-import { Button, Card, Row, Screen, Spacer, Stack, Text, } from "..";
-import styles from "./Popup.module.css";
-import { createPortal } from "react-dom";
-import { useOnOutsideClick } from "@yakad/use-interactions";
-export function Popup(_a) {
-    var { align, onClose, heading, className, children, teleport = false, ref } = _a, restProps = __rest(_a, ["align", "onClose", "heading", "className", "children", "teleport", "ref"]);
-    const localRef = useOnOutsideClick(() => {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    });
-    const doTeleport = () => {
-        const portalRoot = document.getElementsByClassName("portalRoot")[0] || document;
-        const t = portalRoot && createPortal(popup(), portalRoot);
-        return t;
-    };
-    useEffect(() => {
-        document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = "initial";
-        };
-    }, []);
-    useImperativeHandle(ref, () => localRef.current);
-    const popup = () => (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsxs(Card, Object.assign({ ref: localRef }, restProps, { className: classNames(styles.popup, className), children: [_jsxs(Row, { style: { marginBottom: "2rem" }, children: [_jsx(Text, { variant: "heading4", children: heading }), _jsx(Spacer, {}), _jsx(Button, { title: "Close", icon: _jsx(Material, { icon: "close" }), onClick: onClose })] }), _jsx(Stack, { align: align, style: { width: "100%", overflowY: "auto" }, children: children })] })) }));
-    return teleport ? doTeleport() : popup();
-}

package/dist/Popup/Popup.module.css

@@ -1,15 +0,0 @@
-.popupscreen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    background-color: rgba(var(--surfaceContainerColor, 243 237 247), 0.2);
-    backdrop-filter: blur(0.2rem);
-    z-index: 4;
-}
-
-.popup {
-    width: 90%;
-    max-width: 60rem;
-    min-height: 10rem;
-    max-height: 90vh;
-}

package/dist/Select/Select.d.ts

@@ -1,12 +0,0 @@
-import * as React from "react";
-export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-    variant?: "outlined" | "filled";
-    boxsize?: "small" | "normal";
-    placeholder?: string;
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLSelectElement>;
-}
-export declare function Select({ variant, boxsize, placeholder, className, children, ...restProps }: SelectProps): React.JSX.Element;
-export declare namespace Select {
-    var displayName: string;
-}

package/dist/Select/Select.js

@@ -1,23 +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 { cn } from "../InputField/cn";
-export function Select(_a) {
-    var { variant = "outlined", boxsize = "normal", placeholder, className, children } = _a, restProps = __rest(_a, ["variant", "boxsize", "placeholder", "className", "children"]);
-    return (_jsxs("div", { className: "relative w-full", children: [_jsx("select", Object.assign({}, restProps, { className: cn("peer w-full transition-colors", "border-input bg-background", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", {
-                    "h-8 px-2 text-sm": boxsize === "small",
-                    "h-10 px-3 text-base": boxsize === "normal",
-                    "rounded-md border bg-transparent": variant === "outlined",
-                    "rounded-b-none border-0 border-b-2 bg-muted": variant === "filled",
-                }, className), children: children })), placeholder && (_jsx("label", { className: cn("pointer-events-none absolute left-3 top-1/2", "-translate-y-1/2 text-muted-foreground", "transition-all", "peer-focus:top-0 peer-focus:-translate-y-1/2", "peer-focus:bg-background peer-focus:px-1", "peer-focus:text-xs peer-focus:text-primary"), children: placeholder }))] }));
-}
-Select.displayName = "Select";

package/dist/Select/Select.module.css

@@ -1,3 +0,0 @@
-.select * {
-    color: initial;
-}

package/dist/Spacer/Spacer.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface SpacerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function Spacer({ className, ...restProps }: SpacerProps): import("react").JSX.Element;

package/dist/Spacer/Spacer.module.css

@@ -1,5 +0,0 @@
-.spacer {
-    width: 0;
-    height: 100%;
-    margin: auto;
-}

package/dist/Theme/Theme.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export type DarkStyle = "light" | "dark" | "system";
-export type ThemeColor = "green" | "red" | "yellow" | "blue" | "purple";
-export interface ThemeProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "space" | "center" | "end";
-    darkStyle?: DarkStyle;
-    color?: ThemeColor;
-    zoom?: number;
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function Theme({ align, darkStyle, color, zoom, className, children, ...restProps }: ThemeProps): import("react").JSX.Element;

package/dist/Theme/Theme.js

@@ -1,26 +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 { useEffect } from "react";
-import classNames from "classnames";
-import styles from "./Theme.module.css";
-import boxingStyles from "../boxing.module.css";
-export function Theme(_a) {
-    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({ portalRoot: true }, boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.theme, styles[darkStyle], styles[color], className);
-    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
-}