@uxf/ui 1.0.0-beta.10 → 1.0.0-beta.11

package/styles/button.css

@@ -0,0 +1,75 @@
+.button {
+  @apply inline-flex items-center rounded font-medium shadow-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
+
+  &.button--disabled {
+    @apply pointer-events-none opacity-40;
+  }
+
+  &.button--size-xs {
+    @apply px-2.5 py-1.5 text-xs;
+  }
+
+  &.button--size-sm {
+    @apply px-3 py-2 text-sm leading-4;
+  }
+
+  &.button--size-default {
+    @apply px-4 py-2 text-sm;
+  }
+
+  &.button--size-lg {
+    @apply px-4 py-2 text-base;
+  }
+
+  &.button--size-xl {
+    @apply border px-6 py-3 text-base;
+  }
+
+  &.button--variant-outlined {
+    @apply border bg-white;
+
+    &.button--color-default {
+      @apply border-primary-500 text-primary-700 hover:bg-primary-50 focus:ring-primary-500;
+    }
+
+    &.button--color-white {
+      @apply border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
+    }
+
+    &.button--color-success {
+      @apply border-success-500 text-success-700 hover:bg-success-50 focus:ring-success-500;
+    }
+
+    &.button--color-warning {
+      @apply border-warning-500 text-warning-700 hover:bg-warning-50 focus:ring-warning-500;
+    }
+
+    &.button--color-error {
+      @apply border-error-500 text-error-700 hover:bg-error-50 focus:ring-error-500;
+    }
+  }
+
+  &.button--variant-default {
+    @apply border-transparent text-white;
+
+    &.button--color-default {
+      @apply bg-primary-500 hover:bg-primary-600 focus:ring-primary-400;
+    }
+
+    &.button--color-white {
+      @apply bg-gray-50 text-gray-700 shadow-none hover:bg-gray-100 focus:ring-gray-500;
+    }
+
+    &.button--color-success {
+      @apply bg-success-500 hover:bg-success-600 focus:ring-success-400;
+    }
+
+    &.button--color-warning {
+      @apply bg-warning-500 hover:bg-warning-600 focus:ring-warning-400;
+    }
+
+    &.button--color-error {
+      @apply bg-error-500 hover:bg-error-600 focus:ring-error-400;
+    }
+  }
+}

package/styles/component-structure-analyzer.css

@@ -0,0 +1,28 @@
+.uxf-component-structure-analyzer {
+  padding-bottom: 32px;
+
+  * {
+    padding: 32px !important;
+    border: 2px solid black !important;
+    position: relative !important;
+    color: lightgray !important;
+    background-color: white !important;
+    border-radius: initial !important;
+    margin: 4px !important;
+    font-family: monospace;
+    font-size: 12px;
+    min-width: 200px;
+    height: auto !important;
+
+    &::before {
+      position: absolute;
+      left: 4px;
+      top: 2px;
+      content: attr(class);
+      font-size: 12px;
+      line-height: 14px;
+      color: black;
+      font-weight: 500;
+    }
+  }
+}

package/styles/input-basic.css

@@ -0,0 +1,18 @@
+.uxf-input-group {
+  @apply flex flex-row;
+
+  .uxf-input-wrapper {
+    @apply flex w-full flex-row;
+  }
+
+  .uxf-input {
+    @apply w-full px-2;
+  }
+
+  .uxf-input-left-element,
+  .uxf-input-right-element,
+  .uxf-input-left-addon,
+  .uxf-input-right-addon {
+    @apply flex flex-row items-center whitespace-nowrap;
+  }
+}

package/styles/input.css

@@ -0,0 +1,74 @@
+.uxf-input-group {
+  @apply rounded-md text-sm shadow-sm;
+
+  .uxf-input-wrapper {
+    @apply h-10 rounded-md border border-gray-300;
+  }
+
+  .uxf-input {
+    @apply bg-transparent outline-none;
+  }
+
+  .uxf-input-left-element,
+  .uxf-input-right-element {
+    @apply text-gray-400;
+  }
+
+  .uxf-input-left-element {
+    @apply pl-2;
+  }
+  .uxf-input-right-element {
+    @apply pr-2;
+  }
+
+  .uxf-input-left-addon,
+  .uxf-input-right-addon {
+    @apply border border-gray-300 bg-gray-50 px-2 text-gray-500;
+  }
+
+  .uxf-input-left-addon {
+    @apply rounded-l-md border-r-0;
+  }
+
+  .uxf-input-right-addon {
+    @apply rounded-r-md border-l-0;
+  }
+
+  &--has-right-addon {
+    .uxf-input-wrapper {
+      @apply rounded-r-none;
+    }
+  }
+
+  &--has-left-addon {
+    .uxf-input-wrapper {
+      @apply rounded-l-none;
+    }
+  }
+
+  &--focused {
+    .uxf-input-wrapper {
+      @apply border-primary-500 ring-1 ring-inset ring-primary-500 ring-offset-0;
+    }
+  }
+
+  &--invalid {
+    &.uxf-input-group--focused {
+      .uxf-input-wrapper {
+        @apply ring-1 ring-inset ring-error-500 ring-offset-0;
+      }
+    }
+    .uxf-input-wrapper {
+      @apply border-error-500 placeholder-error-300;
+
+      .uxf-input-left-element,
+      .uxf-input-right-element {
+        @apply text-error-500;
+      }
+
+      .uxf-input {
+        @apply text-error-900 placeholder-error-300;
+      }
+    }
+  }
+}

package/types/form-control-props.d.ts

@@ -0,0 +1,24 @@
+import { ChangeEvent, FocusEventHandler } from "react";
+export interface FormControlProps<ValueType, ElementType = HTMLInputElement, RestParams extends unknown[] = []> {
+    value: ValueType;
+    onChange?: (value: ValueType, event?: ChangeEvent<ElementType>, ...args: RestParams) => void;
+    onBlur?: FocusEventHandler<ElementType>;
+    onFocus?: FocusEventHandler<ElementType>;
+    name?: string;
+    /**
+     * @about
+     * The input element will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * @about
+     * It prevents the user from changing the value of the field (not from interacting with the field).
+     */
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+}
+export declare type OptionType<ValueType = string, LabelType = string> = {
+    value: ValueType;
+    label: LabelType;
+};

package/types/form-control-props.js

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

package/utils/component-structure-analyzer.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+interface ComponentStructureAnalyzerProps {
+    children: ReactNode;
+}
+declare function ComponentStructureAnalyzer(props: ComponentStructureAnalyzerProps): JSX.Element;
+export default ComponentStructureAnalyzer;

package/utils/component-structure-analyzer.js

@@ -0,0 +1,11 @@
+"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"));
+function ComponentStructureAnalyzer(props) {
+    return (react_1.default.createElement("div", { className: "uxf-component-structure-analyzer" }, props.children));
+}
+exports.default = ComponentStructureAnalyzer;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LXN0cnVjdHVyZS1hbmFseXplci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy91dGlscy9jb21wb25lbnQtc3RydWN0dXJlLWFuYWx5emVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLGdEQUF5QztBQUt6QyxTQUFTLDBCQUEwQixDQUFDLEtBQXNDO0lBQ3hFLE9BQU8sQ0FDTCx1Q0FBSyxTQUFTLEVBQUMsa0NBQWtDLElBQUUsS0FBSyxDQUFDLFFBQVEsQ0FBTyxDQUN6RSxDQUFDO0FBQ0osQ0FBQztBQUVELGtCQUFlLDBCQUEwQixDQUFDIn0=

package/utils/cx.d.ts

@@ -0,0 +1,3 @@
+export declare type ClassArray = ClassValue[];
+export declare type ClassValue = ClassArray | Record<string, any> | string | number | null | boolean | undefined;
+export declare function cx(...classes: ClassValue[]): string;

package/utils/cx.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cx = void 0;
+function toVal(mix) {
+    var k;
+    var y;
+    var str = "";
+    if (typeof mix === "string" || typeof mix === "number") {
+        str += mix;
+    }
+    else if (typeof mix === "object") {
+        if (Array.isArray(mix)) {
+            for (k = 0; k < mix.length; k++) {
+                if (mix[k]) {
+                    if ((y = toVal(mix[k]))) {
+                        if (str) {
+                            str += " ";
+                        }
+                        str += y;
+                    }
+                }
+            }
+        }
+        else {
+            for (k in mix) {
+                if (mix === null || mix === void 0 ? void 0 : mix[k]) {
+                    if (str) {
+                        str += " ";
+                    }
+                    str += k;
+                }
+            }
+        }
+    }
+    return str;
+}
+function cx() {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    var i = 0;
+    var tmp;
+    var x;
+    var str = "";
+    while (i < classes.length) {
+        if ((tmp = classes[i++])) {
+            if ((x = toVal(tmp))) {
+                if (str) {
+                    str += " ";
+                }
+                str += x;
+            }
+        }
+    }
+    return str;
+}
+exports.cx = cx;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3guanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdXRpbHMvY3gudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBR0EsU0FBUyxLQUFLLENBQUMsR0FBZTtJQUMxQixJQUFJLENBQUMsQ0FBQztJQUNOLElBQUksQ0FBQyxDQUFDO0lBQ04sSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDO0lBRWIsSUFBSSxPQUFPLEdBQUcsS0FBSyxRQUFRLElBQUksT0FBTyxHQUFHLEtBQUssUUFBUSxFQUFFO1FBQ3BELEdBQUcsSUFBSSxHQUFHLENBQUM7S0FDZDtTQUFNLElBQUksT0FBTyxHQUFHLEtBQUssUUFBUSxFQUFFO1FBQ2hDLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsRUFBRTtZQUNwQixLQUFLLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxFQUFFLEVBQUU7Z0JBQzdCLElBQUksR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFO29CQUNSLElBQUksQ0FBQyxDQUFDLEdBQUcsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUU7d0JBQ3JCLElBQUksR0FBRyxFQUFFOzRCQUNMLEdBQUcsSUFBSSxHQUFHLENBQUM7eUJBQ2Q7d0JBQ0QsR0FBRyxJQUFJLENBQUMsQ0FBQztxQkFDWjtpQkFDSjthQUNKO1NBQ0o7YUFBTTtZQUNILEtBQUssQ0FBQyxJQUFJLEdBQUcsRUFBRTtnQkFDWCxJQUFJLEdBQUcsYUFBSCxHQUFHLHVCQUFILEdBQUcsQ0FBRyxDQUFDLENBQUMsRUFBRTtvQkFDVixJQUFJLEdBQUcsRUFBRTt3QkFDTCxHQUFHLElBQUksR0FBRyxDQUFDO3FCQUNkO29CQUNELEdBQUcsSUFBSSxDQUFDLENBQUM7aUJBQ1o7YUFDSjtTQUNKO0tBQ0o7SUFFRCxPQUFPLEdBQUcsQ0FBQztBQUNmLENBQUM7QUFFRCxTQUFnQixFQUFFO0lBQUMsaUJBQXdCO1NBQXhCLFVBQXdCLEVBQXhCLHFCQUF3QixFQUF4QixJQUF3QjtRQUF4Qiw0QkFBd0I7O0lBQ3ZDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNWLElBQUksR0FBRyxDQUFDO0lBQ1IsSUFBSSxDQUFDLENBQUM7SUFDTixJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUM7SUFFYixPQUFPLENBQUMsR0FBRyxPQUFPLENBQUMsTUFBTSxFQUFFO1FBQ3ZCLElBQUksQ0FBQyxHQUFHLEdBQUcsT0FBTyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRTtZQUN0QixJQUFJLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFO2dCQUNsQixJQUFJLEdBQUcsRUFBRTtvQkFDTCxHQUFHLElBQUksR0FBRyxDQUFDO2lCQUNkO2dCQUNELEdBQUcsSUFBSSxDQUFDLENBQUM7YUFDWjtTQUNKO0tBQ0o7SUFFRCxPQUFPLEdBQUcsQ0FBQztBQUNmLENBQUM7QUFsQkQsZ0JBa0JDIn0=

package/utils/forwardRef.d.ts

@@ -0,0 +1,12 @@
+import { ForwardedRef, ForwardRefExoticComponent, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+export declare type ForwardRefRenderFunction<T, P> = {
+    (props: P, ref: ForwardedRef<T>): ReactElement | null;
+    displayName?: string;
+    /** defaultProps are not supported on render functions */
+    defaultProps?: never;
+    /** propTypes are not supported on render functions */
+    propTypes?: never;
+    /** used by Chakra */
+    id?: string;
+};
+export declare const forwardRef: <T, P>(name: string, render: ForwardRefRenderFunction<T, P>) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

package/utils/forwardRef.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.forwardRef = void 0;
+var react_1 = require("react");
+var forwardRef = function (name, render) {
+    var Component = (0, react_1.forwardRef)(render);
+    Component.displayName = name;
+    return Component;
+};
+exports.forwardRef = forwardRef;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9yd2FyZFJlZi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy91dGlscy9mb3J3YXJkUmVmLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFBLCtCQU9lO0FBZVIsSUFBTSxVQUFVLEdBQUcsVUFDeEIsSUFBWSxFQUNaLE1BQXNDO0lBRXRDLElBQU0sU0FBUyxHQUFHLElBQUEsa0JBQWUsRUFBQyxNQUFNLENBQUMsQ0FBQztJQUMxQyxTQUFTLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztJQUM3QixPQUFPLFNBQVMsQ0FBQztBQUNuQixDQUFDLENBQUM7QUFQVyxRQUFBLFVBQVUsY0FPckIifQ==

package/tailwindui/button.css

@@ -1,51 +0,0 @@
-.button {
-    @apply inline-flex shadow-sm items-center shadow-sm font-medium rounded focus:outline-none focus:ring-2 focus:ring-offset-2;
-
-    &.button--disabled {
-        @apply pointer-events-none opacity-40;
-    }
-
-    &.button--size-xs {
-        @apply px-2.5 py-1.5 text-xs;
-    }
-
-    &.button--size-sm {
-        @apply px-3 py-2 text-sm leading-4;
-    }
-
-    &.button--size-default {
-        @apply px-4 py-2 text-sm;
-    }
-
-    &.button--size-lg {
-        @apply px-4 py-2 text-base;
-    }
-
-    &.button--size-xl {
-        @apply px-6 py-3 border text-base;
-    }
-
-    &.button--variant-outlined {
-        @apply border bg-white;
-
-        &.button--color-default {
-            @apply border-primary-300 text-primary-700 hover:bg-primary-50 focus:ring-primary-500;
-        }
-
-        &.button--color-secondary {
-            @apply border-secondary-300 text-secondary-700 hover:bg-secondary-50 focus:ring-secondary-500;
-        }
-    }
-
-    &.button--variant-default {
-        @apply border-transparent text-white;
-
-        &.button--color-default {
-            @apply bg-primary-500 hover:bg-primary-600 focus:ring-primary-400;
-        }
-
-        &.button--color-secondary {
-            @apply bg-secondary-500 hover:bg-secondary-600 focus:ring-secondary-400;
-        }
-    }
-}