@uxf/ui 1.0.0-beta.6 → 1.0.0-beta.61

package/utils/tailwind-config.js

@@ -0,0 +1,152 @@
+const plugin = require("tailwindcss/plugin");
+const { em } = require("@uxf/styles/units/em");
+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: [],
+    theme: {
+        containers: CONTAINERS,
+        screens: SCREENS,
+        extend: {
+            borderRadius: {
+                inherit: "inherit",
+            },
+            colors: {
+                inherit: "inherit",
+                primary: {
+                    50: "#eff6ff",
+                    100: "#dbeafe",
+                    200: "#bfdbfe",
+                    300: "#93c5fd",
+                    400: "#60a5fa",
+                    500: "#3b82f6",
+                    600: "#2563eb",
+                    700: "#1d4ed8",
+                    800: "#1e40af",
+                    900: "#1e3a8a",
+                },
+                success: {
+                    50: "#f0fdf4",
+                    100: "#dcfce7",
+                    200: "#bbf7d0",
+                    300: "#86efac",
+                    400: "#4ade80",
+                    500: "#22c55e",
+                    600: "#16a34a",
+                    700: "#15803d",
+                    800: "#166534",
+                    900: "#14532d",
+                },
+                warning: {
+                    50: "#fff7ed",
+                    100: "#ffedd5",
+                    200: "#fed7aa",
+                    300: "#fdba74",
+                    400: "#fb923c",
+                    500: "#f97316",
+                    600: "#ea580c",
+                    700: "#c2410c",
+                    800: "#9a3412",
+                    900: "#7c2d12",
+                },
+                error: {
+                    50: "#fef2f2",
+                    100: "#fee2e2",
+                    200: "#fecaca",
+                    300: "#fca5a5",
+                    400: "#f87171",
+                    500: "#ef4444",
+                    600: "#dc2626",
+                    700: "#b91c1c",
+                    800: "#991b1b",
+                    900: "#7f1d1d",
+                },
+            },
+            zIndex: {
+                1: "1",
+                focus: "5",
+                fixed: "10",
+                menu: "25",
+                header: "50",
+                modal: "100",
+                dropdown: "200",
+                flashMessage: "250",
+                tooltip: "300",
+            },
+        },
+    },
+    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"]);
+        }),
+    ],
+};

package/stories/button.stories.tsx

@@ -1,29 +0,0 @@
-import Button from "./button";
-import { useTheme } from "@uxf/ui/theme";
-
-export default {
-  title: "UI/Button",
-  component: Button,
-};
-
-export function Default() {
-  const theme = useTheme().Button;
-
-  return (
-    <div className="space-y-2">
-      {Object.keys(theme.variant).map((variant: any) => (
-        <>
-          {Object.keys(theme.color).map((color: any) => (
-            <div className="space-x-2">
-              {Object.keys(theme.size).map((size: any) => (
-                <Button variant={variant} color={color} size={size}>
-                  Button
-                </Button>
-              ))}
-            </div>
-          ))}
-        </>
-      ))}
-    </div>
-  );
-}

package/theme/index.d.ts

@@ -1,2 +0,0 @@
-export * from "@uxf/ui/theme/theme-context";
-export * from "@uxf/ui/theme/theme";

package/theme/theme-context.d.ts

@@ -1,9 +0,0 @@
-import { Theme } from "./theme";
-import { ReactNode } from "react";
-interface ThemeProviderProps {
-    children: ReactNode;
-    theme: Theme;
-}
-export declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
-export declare const useTheme: () => Theme;
-export {};

package/theme/theme-context.js

@@ -1,59 +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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.ThemeProvider = void 0;
-var React = __importStar(require("react"));
-var react_1 = require("react");
-var theme = {
-    Button: {
-        size: {
-            xs: "button--xs",
-            sm: "button--sm",
-            md: "button--md",
-            lg: "button--lg",
-            xl: "button--xl",
-        },
-        color: {
-            primary: "button--primary",
-            secondary: "button--secondary",
-        },
-        variant: {
-            outlined: "button--outlined",
-            contained: "button--contained",
-        },
-        disabled: "button--disabled",
-        defaultColor: "primary",
-        defaultSize: "md",
-        defaultVariant: "outlined",
-    },
-};
-var ThemeContext = React.createContext(theme);
-function ThemeProvider(props) {
-    return (React.createElement(ThemeContext.Provider, { value: props.theme }, props.children));
-}
-exports.ThemeProvider = ThemeProvider;
-var useTheme = function () { return (0, react_1.useContext)(ThemeContext); };
-exports.useTheme = useTheme;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUtY29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy90aGVtZS90aGVtZS1jb250ZXh0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLDJDQUErQjtBQUUvQiwrQkFBOEM7QUFFOUMsSUFBTSxLQUFLLEdBQVU7SUFDbkIsTUFBTSxFQUFFO1FBQ04sSUFBSSxFQUFFO1lBQ0osRUFBRSxFQUFFLFlBQVk7WUFDaEIsRUFBRSxFQUFFLFlBQVk7WUFDaEIsRUFBRSxFQUFFLFlBQVk7WUFDaEIsRUFBRSxFQUFFLFlBQVk7WUFDaEIsRUFBRSxFQUFFLFlBQVk7U0FDakI7UUFDRCxLQUFLLEVBQUU7WUFDTCxPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLFNBQVMsRUFBRSxtQkFBbUI7U0FDL0I7UUFDRCxPQUFPLEVBQUU7WUFDUCxRQUFRLEVBQUUsa0JBQWtCO1lBQzVCLFNBQVMsRUFBRSxtQkFBbUI7U0FDL0I7UUFDRCxRQUFRLEVBQUUsa0JBQWtCO1FBQzVCLFlBQVksRUFBRSxTQUFTO1FBQ3ZCLFdBQVcsRUFBRSxJQUFJO1FBQ2pCLGNBQWMsRUFBRSxVQUFVO0tBQzNCO0NBQ0YsQ0FBQztBQUVGLElBQU0sWUFBWSxHQUFHLEtBQUssQ0FBQyxhQUFhLENBQVEsS0FBSyxDQUFDLENBQUM7QUFNdkQsU0FBZ0IsYUFBYSxDQUFDLEtBQXlCO0lBQ3JELE9BQU8sQ0FDTCxvQkFBQyxZQUFZLENBQUMsUUFBUSxJQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsS0FBSyxJQUN0QyxLQUFLLENBQUMsUUFBUSxDQUNPLENBQ3pCLENBQUM7QUFDSixDQUFDO0FBTkQsc0NBTUM7QUFFTSxJQUFNLFFBQVEsR0FBRyxjQUFNLE9BQUEsSUFBQSxrQkFBVSxFQUFDLFlBQVksQ0FBQyxFQUF4QixDQUF3QixDQUFDO0FBQTFDLFFBQUEsUUFBUSxZQUFrQyJ9

package/theme/theme.d.ts

@@ -1,14 +0,0 @@
-import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button";
-import { Classes } from "@uxf/ui/types";
-export declare type ButtonTheme = {
-    disabled: string;
-    size: Classes<keyof ButtonSizes>;
-    color: Classes<keyof ButtonColors>;
-    variant: Classes<keyof ButtonVariants>;
-    defaultSize: keyof ButtonSizes;
-    defaultColor: keyof ButtonColors;
-    defaultVariant: keyof ButtonVariants;
-};
-export interface Theme {
-    Button: ButtonTheme;
-}

package/theme/theme.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdGhlbWUvdGhlbWUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9

package/types.d.ts

@@ -1,3 +0,0 @@
-export declare type Classes<T extends string> = {
-    [key in T]: string;
-};

package/types.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9