@uxf/ui 1.0.0-beta.98 → 1.0.1

package/utils/tailwind-config.js

@@ -1,32 +1,14 @@
-const plugin = require("tailwindcss/plugin");
-const { em } = require("@uxf/styles/units/em");
+const tailwindThemeDefaults = require("./tailwind-theme-defaults");
+const { colors, fontFamily } = require("tailwindcss/defaultTheme");
 const { rem } = require("@uxf/styles/units/rem");
 
-/** @type {Record<string, string>} */
-const CONTAINERS = {
-    xs: rem(540),
-    sm: rem(720),
-    md: rem(928),
-    lg: rem(1024),
-    xl: rem(1216),
-};
-
-/** @type {Record<string, string>} */
-const SCREENS = {
-    xs: em(576),
-    sm: em(768),
-    md: em(992),
-    lg: em(1200),
-    xl: em(1440),
-};
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: [],
     darkMode: "class",
     theme: {
-        containers: CONTAINERS,
-        screens: SCREENS,
+        containers: tailwindThemeDefaults.containers,
+        screens: tailwindThemeDefaults.screens,
         inputSize: {
             xs: "30px",
             sm: "34px",
@@ -38,8 +20,13 @@ module.exports = {
             borderRadius: {
                 inherit: "inherit",
             },
+            boxShadow: {
+                paper: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
+            },
             colors: {
                 inherit: "inherit",
+                transparent: "transparent",
+                current: "currentColor",
                 lightHigh: "#111827",
                 lightMedium: "#4b5563",
                 lightLow: "#9ca3af",
@@ -49,6 +36,7 @@ module.exports = {
                 lightBorder: "#e5e7eb",
                 darkBorder: "#374151",
                 primary: {
+                    DEFAULT: "#3b82f6",
                     50: "#eff6ff",
                     100: "#dbeafe",
                     200: "#bfdbfe",
@@ -61,6 +49,7 @@ module.exports = {
                     900: "#1e3a8a",
                 },
                 success: {
+                    DEFAULT: "#22c55e",
                     50: "#f0fdf4",
                     100: "#dcfce7",
                     200: "#bbf7d0",
@@ -73,6 +62,7 @@ module.exports = {
                     900: "#14532d",
                 },
                 warning: {
+                    DEFAULT: "#f97316",
                     50: "#fff7ed",
                     100: "#ffedd5",
                     200: "#fed7aa",
@@ -85,6 +75,7 @@ module.exports = {
                     900: "#7c2d12",
                 },
                 error: {
+                    DEFAULT: "#ef4444",
                     50: "#fef2f2",
                     100: "#fee2e2",
                     200: "#fecaca",
@@ -97,8 +88,8 @@ module.exports = {
                     900: "#7f1d1d",
                 },
             },
-            boxShadow: {
-                paper: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
+            fontFamily: {
+                sans: ["var(--font-inter)", ...fontFamily.sans],
             },
             fontSize: {
                 desktopH1: [rem(96), 112 / 96],
@@ -132,58 +123,10 @@ module.exports = {
         },
     },
     corePlugins: {
-        aspectRatio: false,
         container: false,
     },
     plugins: [
-        require("@tailwindcss/aspect-ratio"),
-        require("@tailwindcss/line-clamp"),
-        plugin(
-            ({ addComponents, theme }) => {
-                const screens = theme("screens", SCREENS);
-                const containers = theme("containers", CONTAINERS);
-
-                const mqs = Object.entries(screens);
-                const widths = mqs
-                    .map((item) => {
-                        const key = item[0];
-                        const value = item[1];
-                        const width = containers[key];
-                        if (width) {
-                            return { [`@media (min-width: ${value})`]: { ".container": { "max-width": width } } };
-                        }
-                    })
-                    .filter((i) => i);
-
-                addComponents([
-                    {
-                        ".container": {
-                            "margin-left": "auto",
-                            "margin-right": "auto",
-                            width: "100%",
-                        },
-                    },
-                    ...widths,
-                ]);
-            },
-            {
-                content: [],
-                theme: {
-                    containers: CONTAINERS,
-                },
-            },
-        ),
-        plugin(({ addVariant }) => {
-            addVariant("is-active", "&.is-active");
-            addVariant("is-selected", "&.is-selected");
-            addVariant("is-hoverable", ["&.is-hoverable:active", "&.is-hoverable:hover"]);
-            addVariant("is-focused", "&.is-focused");
-            addVariant("is-required", ["&.is-required", "&:required"]);
-            addVariant("is-invalid", "&.is-invalid");
-            addVariant("is-loading", ["&.is-loading"]);
-            addVariant("is-readonly", ["&.is-readonly", "&:readonly"]);
-            addVariant("is-disabled", ["&.is-disabled", "&:disabled"]);
-            addVariant("is-empty", ["&.is-empty"]);
-        }),
+        require("./tailwind-plugins/container")(tailwindThemeDefaults.screens, tailwindThemeDefaults.containers),
+        require("./tailwind-plugins/variants"),
     ],
 };

package/utils/tailwind-plugins/container.js

@@ -0,0 +1,39 @@
+const plugin = require("tailwindcss/plugin");
+
+/** @type {(screens: Record<string, string>, containers: Record<string, string>) => import('tailwindcss').Plugin} */
+module.exports = (screens, containers) =>
+    plugin(
+        ({ addComponents, theme }) => {
+            const _screens = theme("screens", containers);
+            const _containers = theme("containers", screens);
+
+            const mqs = Object.entries(_screens);
+            const widths = mqs
+                .map((item) => {
+                    const key = item[0];
+                    const value = item[1];
+                    const width = _containers[key];
+                    if (width) {
+                        return { [`@media (min-width: ${value})`]: { ".container": { "max-width": width } } };
+                    }
+                })
+                .filter((i) => i);
+
+            addComponents([
+                {
+                    ".container": {
+                        "margin-left": "auto",
+                        "margin-right": "auto",
+                        width: "100%",
+                    },
+                },
+                ...widths,
+            ]);
+        },
+        {
+            content: [],
+            theme: {
+                containers,
+            },
+        },
+    );

package/utils/tailwind-plugins/variants.js

@@ -0,0 +1,15 @@
+const plugin = require("tailwindcss/plugin");
+
+/** @type {import('tailwindcss').Plugin} */
+module.exports = plugin(({ addVariant }) => {
+    addVariant("is-active", "&.is-active");
+    addVariant("is-selected", "&.is-selected");
+    addVariant("is-hoverable", ["&.is-hoverable:active", "&.is-hoverable:hover"]);
+    addVariant("is-focused", "&.is-focused");
+    addVariant("is-required", ["&.is-required", "&:required"]);
+    addVariant("is-invalid", "&.is-invalid");
+    addVariant("is-loading", ["&.is-loading"]);
+    addVariant("is-readonly", ["&.is-readonly", "&:readonly"]);
+    addVariant("is-disabled", ["&.is-disabled", "&:disabled"]);
+    addVariant("is-empty", ["&.is-empty"]);
+});

package/utils/tailwind-theme-defaults.js

@@ -0,0 +1,20 @@
+const { em } = require("@uxf/styles/units/em");
+const { rem } = require("@uxf/styles/units/rem");
+
+/** @type {{ containers: Record<string, string>; screens: Record<string, string>;}} */
+module.exports = {
+    containers: {
+        xs: rem(540),
+        sm: rem(720),
+        md: rem(928),
+        lg: rem(1024),
+        xl: rem(1216),
+    },
+    screens: {
+        xs: em(576),
+        sm: em(768),
+        md: em(992),
+        lg: em(1200),
+        xl: em(1440),
+    },
+};

package/checkbox-visual/checkbox-visual.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { FormControlProps } from "../types";
-import { CheckboxSizes } from "./theme";
-export declare type CheckboxSize = keyof CheckboxSizes;
-export interface CheckboxVisualProps extends FormControlProps<boolean> {
-    indeterminate?: boolean;
-    isFocused?: boolean;
-    size?: CheckboxSize;
-}
-export declare const CheckboxVisual: React.ForwardRefExoticComponent<CheckboxVisualProps & React.RefAttributes<HTMLDivElement>>;

package/checkbox-visual/checkbox-visual.js

@@ -1,17 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxVisual = void 0;
-const classes_1 = require("@uxf/core/constants/classes");
-const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const react_1 = __importDefault(require("react"));
-const icon_1 = require("../icon");
-exports.CheckboxVisual = (0, forwardRef_1.forwardRef)("CheckboxVisual", (props, ref) => {
-    var _a;
-    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-checkbox", `uxf-checkbox--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, props.indeterminate && classes_1.CLASSES.IS_INDETERMINATE, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isFocused && classes_1.CLASSES.IS_FOCUSED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED), onClick: () => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, !props.value); }, ref: ref },
-        react_1.default.createElement("span", { className: "uxf-checkbox__icon" },
-            react_1.default.createElement(icon_1.Icon, { name: "check" }))));
-});

package/checkbox-visual/index.d.ts

@@ -1 +0,0 @@
-export * from "./checkbox-visual";

package/checkbox-visual/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./checkbox-visual"), exports);

package/color-radio-group/color-radio.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { FormControlProps, HexColor } from "../types";
-export interface ColorRadioProps extends FormControlProps<boolean> {
-    color: HexColor;
-    colorLabel: string;
-}
-export declare const ColorRadio: React.ForwardRefExoticComponent<ColorRadioProps & React.RefAttributes<HTMLDivElement>>;

package/color-radio-group/color-radio.js

@@ -1,22 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorRadio = void 0;
-const classes_1 = require("@uxf/core/constants/classes");
-const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const color2k_1 = require("color2k");
-const react_1 = __importDefault(require("react"));
-function CheckIcon() {
-    return (react_1.default.createElement("svg", { fill: "none", viewBox: "0 0 16 16" },
-        react_1.default.createElement("path", { d: "M13.333 4 6 11.333 2.667 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" })));
-}
-exports.ColorRadio = (0, forwardRef_1.forwardRef)("ColorRadio", (props, ref) => {
-    const colorRadioStyle = { "--bg-color": props.color };
-    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-color-radio", props.value && classes_1.CLASSES.IS_SELECTED), onClick: () => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, !props.value); }, ref: ref, style: colorRadioStyle },
-        react_1.default.createElement("span", { className: "uxf-color-radio__label" }, props.colorLabel),
-        react_1.default.createElement("span", { className: `uxf-color-radio__icon ${(0, color2k_1.readableColorIsBlack)(props.color) ? "uxf-color-radio__icon--dark" : ""}` },
-            react_1.default.createElement(CheckIcon, null))));
-});

package/css/avatar-file-input.css

@@ -1,7 +0,0 @@
-.uxf-avatar-file-input {
-    @apply overflow-hidden relative mx-auto h-24 w-24 rounded-full bg-gray-300 text-gray-300 transition
-        before:absolute before:inset-0 before:border before:border-dashed before:border-current before:rounded-full
-        hover:before:border-2 is-focused:text-gray-800 is-focused:bg-white
-        is-disabled:opacity-50 is-disabled:pointer-events-none is-readonly:pointer-events-none
-        is-invalid:text-red-600 is-invalid:is-focused:ring-red-300;
-}

package/css/avatar.css

@@ -1,15 +0,0 @@
-.uxf-avatar {
-    @apply relative inline-flex items-center justify-center h-10 w-10 rounded-full;
-
-    &__image {
-        @apply absolute left-0 top-0 block h-full w-full rounded-inherit object-cover;
-    }
-
-    :root .light & {
-        @apply text-gray-700 bg-gray-200;
-    }
-
-    :root .dark & {
-        @apply text-gray-200 bg-gray-800;
-    }
-}

package/css/badge.css

@@ -1,23 +0,0 @@
-.uxf-badge {
-    @apply inline-flex items-center justify-center font-bold;
-
-    &--size-small {
-        @apply h-6 min-w-[24px] text-sm rounded-[12px] px-1.5;
-    }
-
-    &--size-medium {
-        @apply h-8 min-w-[32px] text-base rounded-[16px] px-2;
-    }
-
-    &--size-large {
-        @apply h-10 min-w-[40px] text-lg rounded-[20px] px-2;
-    }
-
-    :root .light & {
-        @apply text-white bg-primary-500;
-    }
-
-    :root .dark & {
-        @apply text-gray-900 bg-white;
-    }
-}

package/css/button.css

@@ -1,221 +0,0 @@
-@keyframes spinner {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.uxf-button {
-    @apply inline-flex items-center justify-center rounded-md font-medium shadow-sm
-        focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
-
-    .uxf-icon {
-        @apply h-6;
-    }
-
-    &__text {
-        @apply truncate;
-    }
-
-    &--full-width {
-        @apply w-full flex flex-row justify-center;
-    }
-
-    &.is-disabled {
-        @apply pointer-events-none;
-    }
-
-    &.uxf-button--icon-button.is-loading {
-        &::after {
-            @apply ml-0;
-        }
-    }
-
-    &.is-loading {
-        @apply pointer-events-none;
-
-        &::after {
-            animation: spinner 0.8s linear infinite;
-            border-radius: 50%;
-            border-right: 2px solid transparent;
-            border-top: 2px solid;
-            content: "";
-            height: 20px;
-            margin-left: 8px;
-            width: 20px;
-        }
-
-        &.uxf-button--icon-button::after {
-            margin-left: 0;
-        }
-
-        .uxf-icon {
-            @apply hidden;
-        }
-    }
-
-    &--size-xs {
-        height: theme("inputSize.xs");
-
-        @apply px-2.5 text-xs rounded;
-
-        &.is-loading::after {
-            height: 14px;
-            width: 14px;
-        }
-
-        &.uxf-button--icon-button {
-            width: theme("inputSize.xs");
-
-            @apply p-0;
-        }
-
-        .uxf-icon {
-            @apply h-4 w-4;
-        }
-    }
-
-    &--size-sm {
-        height: theme("inputSize.sm");
-
-        @apply px-3 text-sm leading-4;
-
-        &.is-loading::after {
-            height: 16px;
-            width: 16px;
-        }
-
-        &.uxf-button--icon-button {
-            width: theme("inputSize.sm");
-
-            @apply p-0;
-        }
-
-        .uxf-icon {
-            @apply h-4 w-4;
-        }
-    }
-
-    &--size-default {
-        height: theme("inputSize.default");
-
-        @apply px-4 text-sm;
-
-        &.uxf-button--icon-button {
-            width: theme("inputSize.default");
-
-            @apply p-0;
-        }
-    }
-
-    &--size-lg {
-        height: theme("inputSize.lg");
-
-        @apply px-4 text-base;
-
-        &.uxf-button--icon-button {
-            width: theme("inputSize.lg");
-
-            @apply p-0;
-        }
-    }
-
-    &--size-xl {
-        height: theme("inputSize.xl");
-
-        @apply px-6 text-base;
-
-        &.uxf-button--icon-button {
-            width: theme("inputSize.xl");
-
-            @apply p-0;
-        }
-    }
-
-    &--variant-outlined {
-        @apply border bg-white;
-
-        &.uxf-button--color-default {
-            @apply text-primary-600 border-primary-500 hover:bg-primary-50;
-        }
-
-        &.uxf-button--color-success {
-            @apply text-success-600 border-success-500 hover:bg-success-50;
-        }
-
-        &.uxf-button--color-error {
-            @apply text-error-600 border-error-500 hover:bg-error-50;
-        }
-
-        &.is-disabled {
-            @apply border-gray-300 text-gray-400;
-        }
-    }
-
-    &--variant-default {
-        @apply text-white;
-
-        &.uxf-button--color-default {
-            @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500;
-
-            &.is-disabled {
-                @apply bg-gray-100 text-gray-400;
-            }
-        }
-
-        &.uxf-button--color-success {
-            @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500;
-
-            &.is-disabled {
-                @apply bg-gray-100 text-gray-400;
-            }
-        }
-
-        &.uxf-button--color-error {
-            @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500;
-
-            &.is-disabled {
-                @apply bg-gray-100 text-gray-400;
-            }
-        }
-    }
-
-    &--variant-white {
-        @apply border border-gray-300 bg-white hover:bg-gray-50;
-
-        &.uxf-button--color-default {
-            @apply text-primary-600;
-        }
-
-        &.uxf-button--color-success {
-            @apply text-success-600;
-        }
-
-        &.uxf-button--color-error {
-            @apply text-error-600;
-        }
-
-        &.is-disabled {
-            @apply border-gray-300 text-gray-400;
-        }
-    }
-
-    &--variant-text {
-        @apply shadow-none;
-
-        &.uxf-button--color-default {
-            @apply text-primary-600 hover:text-primary-800;
-        }
-
-        &.uxf-button--color-success {
-            @apply text-success-600 hover:text-success-800;
-        }
-
-        &.uxf-button--color-error {
-            @apply text-error-600 hover:text-error-800;
-        }
-
-        &.is-disabled {
-            @apply text-gray-400;
-        }
-    }
-}