@povio/ui 0.0.8 → 0.0.9

package/{src → dist}/components/text/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
-import { TagVariantProps } from '#ui/components/text/Tag/tag.cva';
+import { TagVariantProps } from './tag.cva';
 export interface TagProps extends TagVariantProps, AriaButtonProps {
     className?: string;
     children: string;

package/dist/components/text/Tag/Tag.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { TooltipEllipsis } from "../../overlays/Tooltip/TooltipEllipsis.js";
+import { tag } from "./tag.cva.js";
+import { Typography } from "../Typography/Typography.js";
+import { ns } from "../../../config/i18n.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const Tag = ({ color, className, children, dismissable, isDisabled, onDismiss, ...props }) => {
+  const uiStyle = UIStyle.useConfig();
+  const tagCva = uiStyle?.tag?.cva ?? tag;
+  const { t } = useTranslation(ns);
+  const buttonProps = { isDisabled, onPress: onDismiss, label: t(($) => $.ui.tag.dismiss), ...props };
+  return /* @__PURE__ */ jsx(TooltipEllipsis, { text: children, children: (onContentRef) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: tagCva({
+        color,
+        className: clsx("pointer-events-none", className)
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            ref: onContentRef,
+            variant: "default",
+            size: "label-2",
+            as: "span",
+            className: "truncate",
+            children
+          }
+        ),
+        dismissable && /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...buttonProps,
+            className: "pointer-events-auto shrink-0",
+            children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  Tag
+};

package/dist/components/text/Tag/tag.cva.js

@@ -0,0 +1,59 @@
+import { cva } from "class-variance-authority";
+import { uiOutlineClass } from "../../outline.clsx.js";
+const tag = cva(
+  [
+    uiOutlineClass,
+    "inline-flex items-center gap-list-gap-icon-to-label",
+    "p-pill-height-default px-1-5",
+    "rounded-pill-rounding-default",
+    "overflow-hidden",
+    "disabled:cursor-default"
+  ],
+  {
+    variants: {
+      color: {
+        primary: [
+          "bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
+          "hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
+          "pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
+          "disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus"
+        ],
+        secondary: [
+          "bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
+          "hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+          "pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+          "disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus"
+        ],
+        success: [
+          "bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
+          "hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
+          "pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
+          "disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus"
+        ],
+        warning: [
+          "bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
+          "hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
+          "pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
+          "disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus"
+        ],
+        error: [
+          "bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
+          "hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
+          "pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
+          "disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus"
+        ]
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  }
+);
+export {
+  tag
+};

package/{src → dist}/components/text/Typography/Typography.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, Ref } from 'react';
-import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+import { TypographyVariantProps } from './typography.cva';
 type TypographyTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
 interface TypographyPropsCva extends Omit<TypographyVariantProps, "size">, Required<Pick<TypographyVariantProps, "size">> {
 }

package/dist/components/text/Typography/Typography.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { typography } from "./typography.cva.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const Typography = ({ as = "p", className, ...props }) => {
+  const uiStyle = UIStyle.useConfig();
+  const typographyCva = uiStyle?.typography?.cva ?? typography;
+  const Tag = as;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: typographyCva({
+        ...props,
+        sizeMobile: props.sizeMobile ?? props.size,
+        className
+      }),
+      ...props
+    }
+  );
+};
+export {
+  Typography
+};

package/dist/components/text/Typography/typography.cva.js

@@ -0,0 +1,100 @@
+import { cva } from "class-variance-authority";
+const typography = cva("", {
+  variants: {
+    size: {
+      "headline-1": "md:text-desktop-headline-1",
+      "title-1": "md:text-desktop-title-1",
+      "title-2": "md:text-desktop-title-2",
+      "title-3": "md:text-desktop-title-3",
+      "title-4": "md:text-desktop-title-4",
+      "title-5": "md:text-desktop-title-5",
+      "title-6": "md:text-desktop-title-6",
+      "body-1": "md:text-desktop-body-1",
+      "body-2": "md:text-desktop-body-2",
+      "body-3": "md:text-desktop-body-3",
+      "body-4": "md:text-desktop-body-4",
+      "label-1": "md:text-label-1",
+      "label-2": "md:text-label-2",
+      "label-3": "md:text-label-3"
+    },
+    sizeMobile: {
+      "headline-1": "text-mobile-headline-1",
+      "title-1": "text-mobile-title-1",
+      "title-2": "text-mobile-title-2",
+      "title-3": "text-mobile-title-3",
+      "title-4": "text-mobile-title-4",
+      "title-5": "text-mobile-title-5",
+      "title-6": "text-mobile-title-6",
+      "body-1": "text-mobile-body-1",
+      "body-2": "text-mobile-body-2",
+      "body-3": "text-mobile-body-3",
+      "body-4": "text-mobile-body-4",
+      "label-1": "text-label-1",
+      "label-2": "text-label-2",
+      "label-3": "text-label-3"
+    },
+    variant: {
+      default: "",
+      "prominent-1": "",
+      "default-italic": "italic",
+      "prominent-1-italic": "italic",
+      "prominent-2": "",
+      "prominent-2-italic": "italic"
+    }
+  },
+  compoundVariants: [
+    {
+      size: ["headline-1", "title-1", "title-2", "title-3", "title-4", "title-5", "title-6"],
+      className: "font-geist"
+    },
+    {
+      size: ["body-1", "body-2", "body-3", "body-4", "label-1", "label-2", "label-3"],
+      className: "font-inter"
+    },
+    {
+      size: [
+        "headline-1",
+        "title-1",
+        "title-2",
+        "title-3",
+        "title-4",
+        "title-5",
+        "title-6",
+        "label-1",
+        "label-2",
+        "label-3"
+      ],
+      variant: ["default", "default-italic"],
+      className: "font-medium"
+    },
+    {
+      size: [
+        "headline-1",
+        "title-1",
+        "title-2",
+        "title-3",
+        "title-4",
+        "title-5",
+        "title-6",
+        "label-1",
+        "label-2",
+        "label-3"
+      ],
+      variant: ["prominent-1", "prominent-1-italic"],
+      className: "font-semibold"
+    },
+    {
+      size: ["body-1", "body-2", "body-3", "body-4"],
+      variant: ["prominent-1", "prominent-1-italic"],
+      className: "font-medium"
+    },
+    {
+      size: ["body-1", "body-2", "body-3", "body-4"],
+      variant: ["prominent-2", "prominent-2-italic"],
+      className: "font-semibold"
+    }
+  ]
+});
+export {
+  typography
+};

package/{src → dist}/config/confirmation.context.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { ActionModalProps } from '#ui/components/overlays/ActionModal/ActionModal';
+import { ActionModalProps } from '../components/overlays/ActionModal/ActionModal';
 export declare namespace Confirmation {
     type ContextState = Pick<ActionModalProps, "heading" | "description" | "buttonSize" | "textAlign" | "primaryAction" | "secondaryAction" | "modalClassName"> & {
         isOpen: boolean;

package/dist/config/confirmation.context.js

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo, use } from "react";
+import { useTranslation } from "react-i18next";
+import { ActionModal } from "../components/overlays/ActionModal/ActionModal.js";
+import { ns } from "./i18n.js";
+var Confirmation;
+((Confirmation2) => {
+  const DEFAULT_STATE = {
+    heading: "",
+    description: "",
+    isOpen: false,
+    primaryAction: {
+      label: "",
+      onPress: () => {
+      }
+    },
+    secondaryAction: {
+      label: "",
+      onPress: () => {
+      }
+    }
+  };
+  const Context = createContext(null);
+  Confirmation2.Provider = ({ children }) => {
+    const [state, setState] = useState(DEFAULT_STATE);
+    const { t } = useTranslation(ns);
+    const onCancel = () => setState(DEFAULT_STATE);
+    const confirm = useCallback(
+      async ({
+        heading,
+        description,
+        buttonSize,
+        textAlign,
+        modalClassName,
+        cancelLabel = t(($) => $.ui.confirmation.cancel),
+        confirmLabel = t(($) => $.ui.confirmation.confirm),
+        confirmVariant,
+        confirmColor,
+        cancelVariant,
+        cancelColor
+      }) => {
+        return new Promise((resolve) => {
+          setState({
+            heading,
+            description,
+            buttonSize,
+            textAlign,
+            modalClassName,
+            primaryAction: {
+              label: confirmLabel,
+              onPress() {
+                setState({
+                  ...state,
+                  isOpen: false,
+                  heading: "",
+                  description: ""
+                });
+                resolve(true);
+              },
+              variant: confirmVariant,
+              color: confirmColor
+            },
+            secondaryAction: {
+              label: cancelLabel,
+              onPress() {
+                onCancel();
+                resolve(false);
+              },
+              variant: cancelVariant,
+              color: cancelColor
+            },
+            isOpen: !state.isOpen
+          });
+        });
+      },
+      [state, t]
+    );
+    const value = useMemo(
+      () => ({
+        confirm
+      }),
+      [confirm]
+    );
+    return /* @__PURE__ */ jsxs(Context.Provider, { value, children: [
+      /* @__PURE__ */ jsx(
+        ActionModal,
+        {
+          ...state,
+          onClose: state.secondaryAction?.onPress ?? onCancel,
+          primaryAction: state.primaryAction,
+          secondaryAction: state.secondaryAction
+        }
+      ),
+      children
+    ] });
+  };
+  Confirmation2.useConfirmation = () => {
+    const context = use(Context);
+    if (!context) {
+      throw new Error("Confirmation.useConfirmation must be used within a Confirmation.Provider");
+    }
+    return context;
+  };
+})(Confirmation || (Confirmation = {}));
+export {
+  Confirmation
+};

package/dist/config/i18n.js

@@ -0,0 +1,15 @@
+import translationEN from "../assets/locales/en/translation.json.js";
+import translationSL from "../assets/locales/sl/translation.json.js";
+const ns = "ui";
+const resources = {
+  en: {
+    [ns]: translationEN
+  },
+  sl: {
+    [ns]: translationSL
+  }
+};
+export {
+  ns,
+  resources
+};

package/dist/config/router.context.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+import { RouterProvider } from "react-aria";
+var UIRouter;
+((UIRouter2) => {
+  const UIRouterContext = createContext(null);
+  UIRouter2.UIRouterProvider = ({
+    children,
+    pathname,
+    push,
+    query,
+    replace
+  }) => {
+    const searchParams = new URLSearchParams();
+    for (const [k, v] of Object.entries(query)) {
+      if (Array.isArray(v)) {
+        for (const item of v) {
+          searchParams.append(k, item);
+        }
+      } else {
+        searchParams.set(k, v);
+      }
+    }
+    const value = {
+      searchParams,
+      pathname,
+      push,
+      query,
+      replace
+    };
+    return /* @__PURE__ */ jsx(UIRouterContext, { value, children: /* @__PURE__ */ jsx(RouterProvider, { navigate: (href) => push(href), children }) });
+  };
+  UIRouter2.useUIRouter = () => {
+    const context = use(UIRouterContext);
+    if (!context) {
+      throw new Error("useUIRouter must be used within a UIRouterContext");
+    }
+    return context;
+  };
+})(UIRouter || (UIRouter = {}));
+export {
+  UIRouter
+};

package/{src → dist}/config/uiConfig.context.d.ts

@@ -1,12 +1,12 @@
 import { PropsWithChildren } from 'react';
-import { CheckboxProps } from '#ui/components/inputs/Checkbox/Checkbox';
-import { DatePickerProps } from '#ui/components/inputs/DateTime/DatePicker/DatePicker';
-import { NumberInputProps } from '#ui/components/inputs/Input/NumberInput/NumberInput';
-import { TextInputProps } from '#ui/components/inputs/Input/TextInput/TextInput';
-import { RadioGroupProps } from '#ui/components/inputs/RadioGroup/RadioGroup';
-import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
-import { SliderProps } from '#ui/components/inputs/Slider/Slider';
-import { ToggleProps } from '#ui/components/inputs/Toggle/Toggle';
+import { CheckboxProps } from '../components/inputs/Checkbox/Checkbox';
+import { DatePickerProps } from '../components/inputs/DateTime/DatePicker/DatePicker';
+import { NumberInputProps } from '../components/inputs/Input/NumberInput/NumberInput';
+import { TextInputProps } from '../components/inputs/Input/TextInput/TextInput';
+import { RadioGroupProps } from '../components/inputs/RadioGroup/RadioGroup';
+import { SelectBaseProps } from '../components/inputs/Selection/shared/SelectBase';
+import { SliderProps } from '../components/inputs/Slider/Slider';
+import { ToggleProps } from '../components/inputs/Toggle/Toggle';
 export declare namespace UIConfig {
     type DeepRequired<T> = {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;

package/dist/config/uiConfig.context.js

@@ -0,0 +1,67 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+import { useDeepCompareMemo } from "../hooks/useDeepCompare.js";
+import { ObjectUtils } from "../utils/object.utils.js";
+var UIConfig;
+((UIConfig2) => {
+  const DEFAULT_CONFIG = {
+    input: {
+      variant: "outlined",
+      as: "default",
+      size: "default",
+      isClearable: false,
+      hideLabel: false
+    },
+    numberInput: {
+      formatOptions: {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 3
+      }
+    },
+    radioGroup: {
+      variant: "default",
+      hideLabel: false
+    },
+    checkbox: {
+      variant: "default"
+    },
+    select: {
+      selectionMode: "single",
+      isSearchable: false,
+      selectedTagsType: "list"
+    },
+    toggle: {
+      variant: "default"
+    },
+    slider: {
+      minValue: 0,
+      maxValue: 100
+    },
+    dateInput: {
+      todayIcon: false,
+      shouldForceLeadingZeros: false
+    }
+  };
+  const Context = createContext(DEFAULT_CONFIG);
+  UIConfig2.Provider = ({ config = {}, children }) => {
+    const parentConfig = use(Context) || DEFAULT_CONFIG;
+    const value = useDeepCompareMemo(() => {
+      return ObjectUtils.deepConditionalMerge(
+        parentConfig,
+        config,
+        (val) => val !== null && val !== void 0
+      );
+    }, [config, parentConfig]);
+    return /* @__PURE__ */ jsx(Context.Provider, { value, children });
+  };
+  UIConfig2.useConfig = () => {
+    const context = use(Context);
+    if (!context) {
+      throw new Error("UIConfig.useConfig must be used within a UIConfig.Provider");
+    }
+    return context;
+  };
+})(UIConfig || (UIConfig = {}));
+export {
+  UIConfig
+};

package/{src → dist}/config/uiStyle.context.d.ts

@@ -1,19 +1,19 @@
 import { ClassProp } from 'class-variance-authority/types';
 import { PropsWithChildren } from 'react';
-import { ButtonVariantProps } from '#ui/components/buttons/Button/button.cva';
-import { PillButtonVariants } from '#ui/components/buttons/PillButton/pillButton.cva';
-import { CheckboxVariantProps } from '#ui/components/inputs/Checkbox/checkbox.cva';
-import { RadioVariantProps } from '#ui/components/inputs/RadioGroup/radio.cva';
-import { InputBaseProps, InputSideProps, InputSizeProps } from '#ui/components/inputs/shared/input.cva';
-import { LabelBaseProps } from '#ui/components/inputs/shared/label.cva';
-import { ToggleVariantProps } from '#ui/components/inputs/Toggle/toggle.cva';
-import { AlertVariantProps } from '#ui/components/status/Alert/alert.cva';
-import { ToastVariantProps } from '#ui/components/status/Toast/toast.cva';
-import { TableDataVariantProps, TableHeadDataVariantProps, TableHeadRowVariantProps, TableRowVariantProps } from '#ui/components/table/table.cva';
-import { LinkVariantProps } from '#ui/components/text/Link/link.cva';
-import { TagVariantProps } from '#ui/components/text/Tag/tag.cva';
-import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
-import { CompoundMapper } from '#ui/utils/compoundMapper';
+import { ButtonVariantProps } from '../components/buttons/Button/button.cva';
+import { PillButtonVariants } from '../components/buttons/PillButton/pillButton.cva';
+import { CheckboxVariantProps } from '../components/inputs/Checkbox/checkbox.cva';
+import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
+import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
+import { LabelBaseProps } from '../components/inputs/shared/label.cva';
+import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
+import { AlertVariantProps } from '../components/status/Alert/alert.cva';
+import { ToastVariantProps } from '../components/status/Toast/toast.cva';
+import { TableDataVariantProps, TableHeadDataVariantProps, TableHeadRowVariantProps, TableRowVariantProps } from '../components/table/table.cva';
+import { LinkVariantProps } from '../components/text/Link/link.cva';
+import { TagVariantProps } from '../components/text/Tag/tag.cva';
+import { TypographyVariantProps } from '../components/text/Typography/typography.cva';
+import { CompoundMapper } from '../utils/compoundMapper';
 export declare namespace UIStyle {
     export type Cva<T> = (props: T & ClassProp) => string;
     interface Options {

package/dist/config/uiStyle.context.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+var UIStyle;
+((UIStyle2) => {
+  const Context = createContext(null);
+  UIStyle2.Provider = ({ children, config }) => {
+    return /* @__PURE__ */ jsx(Context.Provider, { value: config, children });
+  };
+  UIStyle2.useConfig = () => {
+    const context = use(Context);
+    return context;
+  };
+})(UIStyle || (UIStyle = {}));
+export {
+  UIStyle
+};