@uxf/ui 1.0.0-beta.2 → 1.0.0-beta.22

package/avatar/avatar.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { AvatarSizes } from "./theme";
+interface FileResponse {
+    uuid: string;
+    namespace?: string;
+    extension: string;
+}
+export interface AvatarProps {
+    src: FileResponse | string | null | undefined;
+    size?: keyof AvatarSizes;
+    rounded?: boolean;
+}
+export declare function Avatar(props: AvatarProps): JSX.Element;
+export {};

package/avatar/avatar.jsx

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+function Avatar(props) {
+    var _a;
+    const className = (0, cx_1.cx)("avatar", `avatar--size-${props.size}`, `avatar--variant-${(_a = props.circular) !== null && _a !== void 0 ? _a : "default"}`);
+    return <img src={props.src} className={className}/>;
+}
+exports.Avatar = Avatar;

package/avatar/avatar.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Avatar } from "./avatar";
+declare const _default: {
+    title: string;
+    component: typeof Avatar;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/avatar/avatar.stories.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
+const avatar_1 = require("./avatar");
+exports.default = {
+    title: "UI/Avatar",
+    component: avatar_1.Avatar,
+};
+function Default() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    return (<div className="space-y-4">
+      <div className="flex flex-row items-center space-x-4">
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="8"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="10"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="12"/>
+      </div>
+      <div className="flex flex-row items-center space-x-4">
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="8" variant="circular"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="10" variant="circular"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="12" variant="circular"/>
+      </div>
+    </div>);
+}
+exports.Default = Default;

package/avatar/theme.d.ts

@@ -0,0 +1,5 @@
+export interface AvatarSizes {
+    "8": true;
+    "10": true;
+    "12": true;
+}

package/avatar/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,44 +1,21 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.2",
-  "description": "UXF UI components",
-  "main": "index.js",
+  "version": "1.0.0-beta.22",
+  "description": "",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "concurrently \"tailwindcss -i ./global.css -o ./.storybook/generated.css --watch\" \"start-storybook -p 6006\" ",
-    "build": "npm run-script clean && npm run-script compile",
-    "clean": "rm -rf ./dist",
-    "compile": "tsc -P tsconfig.build.json",
-    "typecheck": "tsc --noEmit --skipLibCheck"
+    "build": "npm run-script compile",
+    "compile": "tsc -P tsconfig.json",
+    "typecheck": "tsc --noEmit --skipLibCheck",
+    "prepublish": "npm run-script build"
   },
   "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack4": "^6.5.9",
-    "@storybook/manager-webpack4": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@storybook/testing-library": "^0.0.13",
-    "@types/react": "^18.0.15",
-    "autoprefixer": "^10.4.8",
-    "babel-loader": "^8.2.5",
-    "concurrently": "^7.3.0",
-    "postcss": "^8.4.14",
-    "postcss-nesting": "^10.1.10",
-    "prettier": "^2.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "tailwindcss": "^3.1.6",
-    "typescript": "^4.7.4"
-  },
+  "license": "MIT",
   "dependencies": {
-    "@uxf/core": "^2.2.4"
+    "@floating-ui/react-dom": "^0.6.0",
+    "@headlessui/react": "^1.6.6",
+    "@uxf/core": "latest"
   }
 }

package/components/button/button.d.ts

@@ -1,14 +0,0 @@
-import { ReactNode } from "react";
-import { ButtonColors, ButtonSizes, ButtonVariants } from "../../theme/theme";
-interface ButtonProps {
-    variant?: keyof ButtonVariants;
-    color?: keyof ButtonColors;
-    size?: keyof ButtonSizes;
-    disabled?: boolean;
-    loading?: boolean;
-    startAdornment?: ReactNode;
-    endAdornment?: ReactNode;
-    children: ReactNode;
-}
-declare function Button(props: ButtonProps): JSX.Element;
-export default Button;

package/components/button/button.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var theme_context_1 = require("../../theme/theme-context");
-var cx_1 = require("@uxf/core/utils/cx");
-function Button(props) {
-    var _a, _b, _c;
-    var theme = (0, theme_context_1.useTheme)().Button;
-    var className = (0, cx_1.cx)("button", theme.color[(_a = props.color) !== null && _a !== void 0 ? _a : theme.defaultColor], theme.size[(_b = props.size) !== null && _b !== void 0 ? _b : theme.defaultSize], theme.variant[(_c = props.variant) !== null && _c !== void 0 ? _c : theme.defaultVariant], props.disabled && theme.disabled);
-    return (react_1.default.createElement("button", { type: "button", className: className },
-        props.startAdornment,
-        props.children,
-        props.endAdornment));
-}
-exports.default = Button;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxnREFBeUM7QUFDekMsMkRBQXFEO0FBRXJELHlDQUF3QztBQWF4QyxTQUFTLE1BQU0sQ0FBQyxLQUFrQjs7SUFDaEMsSUFBTSxLQUFLLEdBQUcsSUFBQSx3QkFBUSxHQUFFLENBQUMsTUFBTSxDQUFDO0lBRWhDLElBQU0sU0FBUyxHQUFHLElBQUEsT0FBRSxFQUNsQixRQUFRLEVBQ1IsS0FBSyxDQUFDLEtBQUssQ0FBQyxNQUFBLEtBQUssQ0FBQyxLQUFLLG1DQUFJLEtBQUssQ0FBQyxZQUFZLENBQUMsRUFDOUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFBLEtBQUssQ0FBQyxJQUFJLG1DQUFJLEtBQUssQ0FBQyxXQUFXLENBQUMsRUFDM0MsS0FBSyxDQUFDLE9BQU8sQ0FBQyxNQUFBLEtBQUssQ0FBQyxPQUFPLG1DQUFJLEtBQUssQ0FBQyxjQUFjLENBQUMsRUFDcEQsS0FBSyxDQUFDLFFBQVEsSUFBSSxLQUFLLENBQUMsUUFBUSxDQUNqQyxDQUFDO0lBRUYsT0FBTyxDQUNMLDBDQUFRLElBQUksRUFBQyxRQUFRLEVBQUMsU0FBUyxFQUFFLFNBQVM7UUFDdkMsS0FBSyxDQUFDLGNBQWM7UUFDcEIsS0FBSyxDQUFDLFFBQVE7UUFDZCxLQUFLLENBQUMsWUFBWSxDQUNaLENBQ1YsQ0FBQztBQUNKLENBQUM7QUFFRCxrQkFBZSxNQUFNLENBQUMifQ==

package/components/button/index.d.ts

@@ -1 +0,0 @@
-export { default as Button } from "./button";

package/components/button/index.js

@@ -1,9 +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.Button = void 0;
-var button_1 = require("./button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9idXR0b24vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUEsbUNBQTZDO0FBQXBDLGlIQUFBLE9BQU8sT0FBVSJ9

package/theme/theme-context.d.ts

@@ -1,10 +0,0 @@
-import { Theme } from "./theme";
-import { ReactNode } from "react";
-export declare const theme: Theme;
-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 = exports.theme = void 0;
-var React = __importStar(require("react"));
-var react_1 = require("react");
-exports.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(exports.theme);
-function ThemeProvider(props) {
-    return (React.createElement(ThemeContext.Provider, { value: exports.theme }, props.children));
-}
-exports.ThemeProvider = ThemeProvider;
-var useTheme = function () { return (0, react_1.useContext)(ThemeContext); };
-exports.useTheme = useTheme;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUtY29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy90aGVtZS90aGVtZS1jb250ZXh0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLDJDQUErQjtBQUUvQiwrQkFBOEM7QUFFakMsUUFBQSxLQUFLLEdBQVU7SUFDMUIsTUFBTSxFQUFFO1FBQ04sSUFBSSxFQUFFO1lBQ0osRUFBRSxFQUFFLFlBQVk7WUFDaEIsRUFBRSxFQUFFLFlBQVk7WUFDaEIsRUFBRSxFQUFFLFlBQVk7WUFDaEIsRUFBRSxFQUFFLFlBQVk7WUFDaEIsRUFBRSxFQUFFLFlBQVk7U0FDakI7UUFDRCxLQUFLLEVBQUU7WUFDTCxPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLFNBQVMsRUFBRSxtQkFBbUI7U0FDL0I7UUFDRCxPQUFPLEVBQUU7WUFDUCxRQUFRLEVBQUUsa0JBQWtCO1lBQzVCLFNBQVMsRUFBRSxtQkFBbUI7U0FDL0I7UUFDRCxRQUFRLEVBQUUsa0JBQWtCO1FBQzVCLFlBQVksRUFBRSxTQUFTO1FBQ3ZCLFdBQVcsRUFBRSxJQUFJO1FBQ2pCLGNBQWMsRUFBRSxVQUFVO0tBQzNCO0NBQ0YsQ0FBQztBQUVGLElBQU0sWUFBWSxHQUFHLEtBQUssQ0FBQyxhQUFhLENBQVEsYUFBSyxDQUFDLENBQUM7QUFNdkQsU0FBZ0IsYUFBYSxDQUFDLEtBQXlCO0lBQ3JELE9BQU8sQ0FDTCxvQkFBQyxZQUFZLENBQUMsUUFBUSxJQUFDLEtBQUssRUFBRSxhQUFLLElBQ2hDLEtBQUssQ0FBQyxRQUFRLENBQ08sQ0FDekIsQ0FBQztBQUNKLENBQUM7QUFORCxzQ0FNQztBQUVNLElBQU0sUUFBUSxHQUFHLGNBQU0sT0FBQSxJQUFBLGtCQUFVLEVBQUMsWUFBWSxDQUFDLEVBQXhCLENBQXdCLENBQUM7QUFBMUMsUUFBQSxRQUFRLFlBQWtDIn0=

package/theme/theme.d.ts

@@ -1,31 +0,0 @@
-declare type Classes<T extends string> = {
-    [key in T]: string;
-};
-export interface ButtonVariants {
-    outlined: true;
-    contained: true;
-}
-export interface ButtonSizes {
-    xs: true;
-    sm: true;
-    md: true;
-    lg: true;
-    xl: true;
-}
-export interface ButtonColors {
-    primary: true;
-    secondary: true;
-}
-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;
-}
-export {};

package/theme/theme.js

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