@uxf/ui 11.45.1 → 11.47.0

package/alert-bubble/alert-bubble.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./alert-bubble").AlertBubbleProps>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/alert-bubble/alert-bubble.stories.js

@@ -27,10 +27,6 @@ exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const storybook_config_1 = require("../utils/storybook-config");
 const alert_bubble_1 = require("./alert-bubble");
-exports.default = {
-    title: "UI/AlertBubble",
-    component: alert_bubble_1.AlertBubble,
-};
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("AlertBubble");
     const storyAlertBubbles = config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { className: "space-y-2 pb-4", key: `${size}${color}` },

package/badge/badge.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./badge").BadgeProps & React.RefAttributes<HTMLDivElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/badge/badge.stories.js

@@ -7,10 +7,6 @@ exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const icon_1 = require("../icon");
 const badge_1 = require("./badge");
-exports.default = {
-    title: "UI/Badge",
-    component: badge_1.Badge,
-};
 function Default() {
     const testBadges = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(badge_1.Badge, { size: "small" }, "5"),

package/button-group/button-group.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.FC<React.PropsWithChildren<import("./button-group").ButtonGroupProps>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/button-group/button-group.stories.js

@@ -9,10 +9,6 @@ const button_1 = require("../button");
 const icon_1 = require("../icon");
 const tooltip_1 = require("../tooltip");
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/ButtonGroup",
-    component: index_1.ButtonGroup,
-};
 function Default() {
     // eslint-disable-next-line no-console
     const onClick = console.log;

package/button-list/button-list.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./button-list").ButtonListProps>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/button-list/button-list.stories.js

@@ -7,10 +7,6 @@ exports.Default = Default;
 const empty_object_1 = require("@uxf/core/constants/empty-object");
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/ButtonList",
-    component: index_1.ButtonList,
-};
 function Default() {
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(index_1.ButtonList, { buttons: [

package/calendar/calendar.stories.d.ts

@@ -1,10 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./calendar").CalendarProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        docs: {};
-    };
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/calendar/calendar.stories.js

@@ -26,17 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
-const calendar_1 = require("./calendar");
 const calendar_provider_1 = require("./calendar-provider");
-exports.default = {
-    title: "UI/Calendar",
-    component: calendar_1.Calendar,
-    parameters: {
-        docs: {
-        // page: Docs,
-        },
-    },
-};
 function Default() {
     const [date, setDate] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setDate);

package/checkbox/checkbox.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./checkbox").CheckboxProps & React.RefAttributes<HTMLDivElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/checkbox/checkbox.stories.js

@@ -27,10 +27,6 @@ exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const checkbox_1 = require("./checkbox");
-exports.default = {
-    title: "UI/Checkbox",
-    component: checkbox_1.Checkbox,
-};
 function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));

package/checkbox-button/checkbox-button.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./checkbox-button").CheckboxButtonProps & React.RefAttributes<HTMLButtonElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/checkbox-button/checkbox-button.stories.js

@@ -27,10 +27,6 @@ exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/CheckboxButton",
-    component: index_1.CheckboxButton,
-};
 function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));

package/checkbox-input/checkbox-input.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./checkbox-input").CheckboxInputProps & React.RefAttributes<HTMLDivElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/checkbox-input/checkbox-input.stories.js

@@ -27,10 +27,6 @@ exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const checkbox_input_1 = require("./checkbox-input");
-exports.default = {
-    title: "UI/CheckboxInput",
-    component: checkbox_input_1.CheckboxInput,
-};
 function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));

package/chip/chip.stories.d.ts

@@ -1,10 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("@uxf/ui/chip").ChipProps & React.RefAttributes<HTMLAnchorElement>>;
-    parameters: {
-        docs: {};
-    };
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/chip/chip.stories.js

@@ -27,15 +27,6 @@ exports.Default = Default;
 const chip_1 = require("@uxf/ui/chip");
 const react_1 = __importStar(require("react"));
 const storybook_config_1 = require("../utils/storybook-config");
-exports.default = {
-    title: "UI/Chip",
-    component: chip_1.Chip,
-    parameters: {
-        docs: {
-        // page: Docs,
-        },
-    },
-};
 const getChipsForSize = (colors) => {
     const sizes = ["small", "default", "large"];
     const variants = ["low", "medium", "default"];

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

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./color-radio").ColorRadioProps<string | number> & React.RefAttributes<HTMLDivElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/color-radio/color-radio.stories.js

@@ -6,10 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const color_radio_1 = require("./color-radio");
-exports.default = {
-    title: "UI/ColorRadio",
-    component: color_radio_1.ColorRadio,
-};
 function Default() {
     const radios = (react_1.default.createElement("div", { className: "dark:text-white" },
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "Default"),

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

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./color-radio-group").ColorRadioGroupProps & React.RefAttributes<HTMLLabelElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

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

@@ -27,10 +27,6 @@ exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/ColorRadioGroup",
-    component: index_1.ColorRadioGroup,
-};
 const options = [
     {
         value: "#ff0000",

package/components.d.ts

@@ -29,6 +29,7 @@ import * as formComponentStories from "./form-component/form-component.stories";
 import * as iconStories from "./icon/icon.stories";
 import * as iconButtonStories from "./icon-button/icon-button.stories";
 import * as imageGalleryStories from "./image-gallery/image-gallery.stories";
+import * as infoboxStories from "./info-box/info-box.stories";
 import * as inputStories from "./input/input.stories";
 import * as labelStories from "./label/label.stories";
 import * as layoutStories from "./layout/layout.stories";
@@ -181,6 +182,10 @@ export declare const components: {
         readonly title: "ImageGallery";
         readonly stories: typeof imageGalleryStories;
     };
+    readonly infobox: {
+        readonly title: "Infobox";
+        readonly stories: typeof infoboxStories;
+    };
     readonly input: {
         readonly title: "Input";
         readonly stories: typeof inputStories;

package/components.js

@@ -56,6 +56,7 @@ const formComponentStories = __importStar(require("./form-component/form-compone
 const iconStories = __importStar(require("./icon/icon.stories"));
 const iconButtonStories = __importStar(require("./icon-button/icon-button.stories"));
 const imageGalleryStories = __importStar(require("./image-gallery/image-gallery.stories"));
+const infoboxStories = __importStar(require("./info-box/info-box.stories"));
 const inputStories = __importStar(require("./input/input.stories"));
 const labelStories = __importStar(require("./label/label.stories"));
 const layoutStories = __importStar(require("./layout/layout.stories"));
@@ -208,6 +209,10 @@ exports.components = {
         title: "ImageGallery",
         stories: imageGalleryStories
     },
+    "infobox": {
+        title: "Infobox",
+        stories: infoboxStories
+    },
     "input": {
         title: "Input",
         stories: inputStories

package/create-component-preview-page/create-component-preview-page.d.ts

@@ -1,8 +1,13 @@
 import React from "react";
-export declare function createComponentPreviewPage(): {
-    (props: any): React.JSX.Element;
-    getInitialProps(ctx: any): {
+import { components } from "../components";
+type Components = typeof components;
+interface CreateComponentPreviewPageProps {
+    componentName: keyof Components | null;
+}
+export declare function CreateComponentPreviewPage(props: CreateComponentPreviewPageProps): React.JSX.Element;
+export declare function getServerSideProps(ctx: any): {
+    props: {
         componentName: any;
-        storyName: any;
     };
 };
+export {};

package/create-component-preview-page/create-component-preview-page.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createComponentPreviewPage = createComponentPreviewPage;
+exports.CreateComponentPreviewPage = CreateComponentPreviewPage;
+exports.getServerSideProps = getServerSideProps;
 const empty_array_1 = require("@uxf/core/constants/empty-array");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const react_1 = __importDefault(require("react"));
@@ -16,25 +17,27 @@ function ComponentPreview(props) {
         return react_1.default.createElement(Story, { key: key });
     })));
 }
-function createComponentPreviewPage() {
-    const component = (props) => {
-        const { componentName } = props;
-        if ((0, is_nil_1.isNil)(componentName)) {
-            return (react_1.default.createElement("div", { style: { padding: 32 } }, Object.entries(components_1.components).map(([key, config]) => (react_1.default.createElement("div", { key: key, style: { marginTop: 32, marginBottom: 32 } },
+function CreateComponentPreviewPage(props) {
+    if ((0, is_nil_1.isNil)(props.componentName)) {
+        return (react_1.default.createElement("div", { style: { padding: 32 } }, Object.entries(components_1.components).map(([key, config]) => {
+            return (react_1.default.createElement("div", { key: key, style: { marginTop: 32, marginBottom: 32 } },
                 react_1.default.createElement("h2", null, config.title),
                 react_1.default.createElement("div", { style: { border: "2px dashed gray", padding: 32, borderRadius: 4 } },
-                    react_1.default.createElement(ComponentPreview, { stories: config.stories })))))));
-        }
-        const componentConfig = components_1.components[componentName]; // TODO @vejvis
-        if ((0, is_nil_1.isNil)(componentConfig)) {
-            return react_1.default.createElement("div", null, "component not found");
-        }
-        return react_1.default.createElement(ComponentPreview, { stories: componentConfig.stories });
-    };
-    component.getInitialProps = (ctx) => {
-        var _a;
-        const [componentName, storyName] = (_a = ctx.query.slug) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY;
-        return { componentName, storyName };
+                    react_1.default.createElement(ComponentPreview, { stories: config.stories }))));
+        })));
+    }
+    const componentConfig = components_1.components[props.componentName];
+    if ((0, is_nil_1.isNil)(componentConfig)) {
+        return react_1.default.createElement("div", null, "component not found");
+    }
+    return react_1.default.createElement(ComponentPreview, { stories: componentConfig.stories });
+}
+function getServerSideProps(ctx) {
+    var _a;
+    const [componentName] = (_a = ctx.query.slug) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY;
+    return {
+        props: {
+            componentName: componentName || null,
+        },
     };
-    return component;
 }

package/css/info-box.css

@@ -0,0 +1,74 @@
+.uxf-infobox {
+    --infobox-bg-color: transparent;
+    --infobox-border-color: transparent;
+    --i-w: theme("spacing.5");
+    --i-h: theme("spacing.5");
+
+    @apply transition;
+
+    background-color: var(--infobox-bg-color);
+    border: 1px solid var(--infobox-border-color);
+    border-radius: theme("borderRadius.lg");
+    color: theme("colors.base_text_high_emphasis");
+    display: flex;
+    font-size: theme("fontSize.sm");
+    font-weight: theme("fontWeight.medium");
+    gap: theme("spacing.2");
+    padding: theme("spacing.2");
+
+    &__text-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        justify-content: center;
+        min-height: theme("height.8");
+
+        .uxf-info-box__title {
+            font-size: theme("fontSize.medium");
+            font-weight: theme("fontWeight.semibold");
+            margin-top: 6px;
+        }
+
+        .uxf-info-box__text {
+            font-weight: theme("fontWeight.normal");
+            margin-right: theme("spacing.2");
+            padding: theme("spacing.1") 0;
+        }
+    }
+
+    &--brand {
+        --uxf-icon-color: theme("colors.brand_icon_on_muted");
+        --infobox-bg-color: theme("colors.brand_surface_muted");
+        --infobox-border-color: theme("colors.brand_border");
+    }
+
+    &--info {
+        --uxf-icon-color: theme("colors.info_icon_on_muted");
+        --infobox-bg-color: theme("colors.info_surface_muted");
+        --infobox-border-color: theme("colors.info_border");
+    }
+
+    &--negative {
+        --uxf-icon-color: theme("colors.negative_icon_on_muted");
+        --infobox-bg-color: theme("colors.negative_surface_muted");
+        --infobox-border-color: theme("colors.negative_border");
+    }
+
+    &--neutral {
+        --uxf-icon-color: theme("colors.neutral_icon_on_muted");
+        --infobox-bg-color: theme("colors.neutral_surface_muted");
+        --infobox-border-color: theme("colors.neutral_border");
+    }
+
+    &--positive {
+        --uxf-icon-color: theme("colors.positive_icon_on_muted");
+        --infobox-bg-color: theme("colors.positive_surface_muted");
+        --infobox-border-color: theme("colors.positive_border");
+    }
+
+    &--warning {
+        --uxf-icon-color: theme("colors.warning_icon_on_muted");
+        --infobox-bg-color: theme("colors.warning_surface_muted");
+        --infobox-border-color: theme("colors.warning_border");
+    }
+}

package/css/input.css

@@ -253,3 +253,17 @@
         }
     }
 }
+
+.uxf-input--no-spin-buttons {
+    .uxf-input__element {
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            appearance: none;
+            margin: 0;
+        }
+
+        &[type="number"] {
+            appearance: textfield;
+        }
+    }
+}

package/css/layout.css

@@ -1,47 +1,93 @@
-body {
-    @apply bg-neutral-100;
+:root {
+    --uxf-layout-overlay-z-index: 1;
+
+    /* sidebar */
+    --uxf-layout-sidebar-width: theme("spacing.64");
+    --uxf-layout-sidebar-border-color: theme("colors.neutral.200");
+    --uxf-layout-sidebar-border-width: 1px;
+    --uxf-layout-sidebar-background-color: theme("colors.white");
+    --uxf-layout-sidebar-z-index: 2;
+
+    /* appbar */
+    --uxf-layout-app-bar-height: theme("spacing.14");
+    --uxf-layout-app-bar-border-color: theme("colors.neutral.200");
+    --uxf-layout-app-bar-border-width: 1px;
+    --uxf-layout-app-bar-background-color: theme("colors.white");
 }
 
 .uxf-layout {
     &__content {
-        @apply flex flex-1 flex-col pt-14 md:pl-64;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        padding-top: var(--uxf-layout-app-bar-height);
+
+        @screen md {
+            padding-left: var(--uxf-layout-sidebar-width);
+        }
     }
 }
 
 .uxf-app-bar {
-    @apply bg-primary-600 fixed left-0 top-0 flex h-14 w-full items-center;
+    background-color: theme("colors.white");
+    border-bottom: var(--uxf-layout-app-bar-border-width) solid var(--uxf-layout-app-bar-border-color);
+    display: flex;
+    height: var(--uxf-layout-app-bar-height);
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
 
-    &__left-container {
-        @apply flex grow items-center;
+    @screen md {
+        width: calc(100% - var(--uxf-layout-sidebar-width));
     }
 
     &__menu-button {
-        @apply px-5 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden;
+        --uxf-button-height: var(--uxf-layout-app-bar-height);
+
+        border: 0;
+        border-radius: 0;
+        border-right: var(--uxf-layout-app-bar-border-width) solid var(--uxf-layout-sidebar-border-color);
+
+        @screen md {
+            display: none;
+        }
     }
 
-    &__logo {
-        @apply md:px-2;
+    &__content {
+        flex-grow: 1;
     }
 }
 
 .uxf-sidebar {
-    @apply hidden bg-white md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col;
+    background-color: theme("colors.white");
+    border-right: var(--uxf-layout-sidebar-border-width) solid var(--uxf-layout-sidebar-border-color);
+    bottom: 0;
+    display: none;
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: var(--uxf-layout-sidebar-width);
+    z-index: var(--uxf-layout-sidebar-z-index);
 
-    &__content {
-        @apply flex flex-grow flex-col overflow-y-auto border-r border-r-gray-200 pt-14;
+    &--is-open {
+        display: block;
     }
 
-    &__logo {
-        @apply flex justify-center;
+    @screen md {
+        display: block;
     }
-}
 
-.uxf-drawer {
     &__content {
-        @apply flex flex-grow flex-col overflow-y-auto border-r border-r-gray-200;
+        height: 100%;
+        overflow-y: auto;
     }
+}
 
-    &__logo {
-        @apply flex justify-center;
-    }
+.uxf-sidebar-overlay {
+    background-color: #0003;
+    inset: 0;
+    position: fixed;
+    z-index: var(--uxf-layout-overlay-z-index);
 }

package/date-picker/date-picker.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./date-picker").DatePickerProps>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/date-picker/date-picker.stories.js

@@ -31,10 +31,6 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_picker_1 = require("./date-picker");
-exports.default = {
-    title: "UI/DatePicker",
-    component: date_picker_1.DatePicker,
-};
 const today = (0, dayjs_1.default)();
 const unavailableDates = [
     today.toDate(),

package/date-picker-input/date-picker-input.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./date-picker-input").DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/date-picker-input/date-picker-input.stories.js

@@ -28,10 +28,6 @@ const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 const action_1 = require("../utils/action");
 const date_picker_input_1 = require("./date-picker-input");
-exports.default = {
-    title: "UI/DatePickerInput",
-    component: date_picker_input_1.DatePickerInput,
-};
 function Default() {
     const [date, setDate] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setDate);

package/date-range-picker/date-range-picker.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.FC<React.PropsWithChildren<import("./date-range-picker").DateRangePickerProps>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/date-range-picker/date-range-picker.stories.js

@@ -28,10 +28,6 @@ const noop_1 = require("@uxf/core/utils/noop");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_range_picker_1 = require("./date-range-picker");
-exports.default = {
-    title: "UI/DateRangePicker",
-    component: date_range_picker_1.DateRangePicker,
-};
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);

package/date-range-picker-input/date-range-picker-input.stories.d.ts

@@ -1,10 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./date-range-picker-input").DateRangePickerInputProps & React.RefAttributes<HTMLInputElement>>;
-    parameters: {
-        docs: {};
-    };
-};
-export default _default;
 export declare function Default(): React.JSX.Element;