@povio/ui 0.1.0 → 2.1.1

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
 import { RadioGroup as RadioGroup$1, Radio } from "react-aria-components";
 import { Controller } from "react-hook-form";
 import { FormField } from "../FormField/FormField.js";
@@ -62,16 +61,7 @@ const RadioGroupBase = (props) => {
                 className: radioCva({
                   variant,
                   ...rest
-                }),
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "absolute hidden size-1 rounded-full group-selected:block",
-                      "bg-interactive-contained-primary-on-idle group-hover:bg-interactive-contained-primary-on-hover"
-                    )
-                  }
-                )
+                })
               }
             ),
             /* @__PURE__ */ jsx(CheckContent, { typography: radioTypographyMap({ variant, ...rest }), children: option.label })

package/dist/components/inputs/RadioGroup/radio.cva.js

@@ -2,7 +2,12 @@ import { cva } from "class-variance-authority";
 import { uiGroupOutlineClass } from "../../outline.clsx.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 const radio = cva(
-  ["flex items-center justify-center border-2", "relative size-3-5 rounded-full p-1-5", uiGroupOutlineClass],
+  [
+    "flex items-center justify-center border-2",
+    "relative size-3-5 rounded-full p-1-5",
+    "before:absolute before:hidden before:size-1 before:rounded-full",
+    uiGroupOutlineClass
+  ],
   {
     variants: {
       variant: {
@@ -17,6 +22,8 @@ const radio = cva(
           "group-selected:group-hover:border-interactive-contained-primary-hover",
           "group-selected:group-pressed:bg-interactive-contained-primary-pressed",
           "group-selected:group-pressed:border-interactive-contained-primary-pressed",
+          "group-selected:group-disabled:bg-interactive-contained-primary-disabled",
+          "group-selected:group-disabled:border-interactive-contained-primary-disabled",
           "group-indeterminate:border-interactive-contained-primary-idle",
           "group-indeterminate:bg-interactive-contained-primary-idle",
           "group-indeterminate:group-hover:bg-interactive-contained-primary-hover",
@@ -24,7 +31,10 @@ const radio = cva(
           "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
           "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
           "group-invalid:border-interactive-contained-error-idle",
-          "group-focus-visible:outline-interactive-contained-primary-focus"
+          "group-focus-visible:outline-interactive-contained-primary-focus",
+          "before:bg-interactive-contained-primary-on-idle",
+          "group-hover:before:bg-interactive-contained-primary-on-hover",
+          "group-selected:before:block"
         ]
       }
     },

package/dist/components/inputs/Selection/shared/SelectListBoxItem.js

@@ -33,7 +33,7 @@ const SelectListBoxItem = ({
       isDisabled,
       className: clsx(
         selectListBoxItemClass,
-        !isMultiple && "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted",
+        !isMultiple && "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle",
         isNewItem ? "text-interactive-text-primary-idle" : "text-interactive-text-secondary-idle"
       ),
       children: [
@@ -41,7 +41,7 @@ const SelectListBoxItem = ({
           CheckboxCheckmark,
           {
             variant: "default",
-            className: "group-focus-visible:!outline-none"
+            className: "group-focus-visible:outline-none!"
           }
         ),
         isMultiple && isSearchable && /* @__PURE__ */ jsx(
@@ -54,7 +54,7 @@ const SelectListBoxItem = ({
               CheckboxCheckmark,
               {
                 variant: "default",
-                className: "group-focus-visible:!outline-none"
+                className: "group-focus-visible:outline-none!"
               }
             )
           }

package/dist/components/inputs/shared/input.cva.js

@@ -10,7 +10,13 @@ const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
     },
     as: {
       default: "rounded-input-rounding-default",
-      floating: "rounded-input-rounding-default",
+      floating: [
+        "rounded-input-rounding-default",
+        "py-floating-label-input-height-empty!",
+        "group-has-[input:not(:placeholder-shown)]/input-content:pb-floating-label-input-height-filled!",
+        "group-has-[input:not(:placeholder-shown)]/input-content:pt-[calc(var(--spacing-input-height-default)+14px)]!"
+        // TODO: remove this hardcoded value
+      ],
       filter: "rounded-input-rounding-default",
       inline: [
         "h-full",
@@ -110,10 +116,10 @@ const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
 const inputSize = cva("", {
   variants: {
     size: {
-      "extra-small": "px-input-side-xs py-input-height-extra-small text-label-1",
-      small: "px-input-side-s py-input-height-small text-label-1",
-      default: "px-input-side-m py-input-height-default text-label-1",
-      large: "px-input-side-l py-input-height-large text-label-1"
+      "extra-small": "px-input-side-default py-input-height-default text-label-1",
+      small: "px-input-side-default py-input-height-default text-label-1",
+      default: "px-input-side-default py-input-height-default text-label-1",
+      large: "px-input-side-default py-input-height-default text-label-1"
     }
   },
   defaultVariants: {
@@ -135,18 +141,18 @@ const inputSide = cva("", {
     }
   },
   compoundVariants: [
-    { type: "left", size: "extra-small", className: "left-input-side-xs" },
-    { type: "right", size: "extra-small", className: "right-input-side-xs" },
-    { type: "var", size: "extra-small", className: "--spacing-input-side-xs" },
-    { type: "left", size: "small", className: "left-input-side-s" },
-    { type: "right", size: "small", className: "right-input-side-s" },
-    { type: "var", size: "small", className: "--spacing-input-side-s" },
-    { type: "left", size: "default", className: "left-input-side-m" },
-    { type: "right", size: "default", className: "right-input-side-m" },
-    { type: "var", size: "default", className: "--spacing-input-side-m" },
-    { type: "left", size: "large", className: "left-input-side-l" },
-    { type: "right", size: "large", className: "right-input-side-l" },
-    { type: "var", size: "large", className: "--spacing-input-side-l" }
+    { type: "left", size: "extra-small", className: "left-input-side-default" },
+    { type: "right", size: "extra-small", className: "right-input-side-default" },
+    { type: "var", size: "extra-small", className: "--spacing-input-side-default" },
+    { type: "left", size: "small", className: "left-input-side-default" },
+    { type: "right", size: "small", className: "right-input-side-default" },
+    { type: "var", size: "small", className: "--spacing-input-side-default" },
+    { type: "left", size: "default", className: "left-input-side-default" },
+    { type: "right", size: "default", className: "right-input-side-default" },
+    { type: "var", size: "default", className: "--spacing-input-side-default" },
+    { type: "left", size: "large", className: "left-input-side-default" },
+    { type: "right", size: "large", className: "right-input-side-default" },
+    { type: "var", size: "large", className: "--spacing-input-side-default" }
   ],
   defaultVariants: {
     size: "default"

package/dist/components/inputs/shared/label.cva.js

@@ -7,6 +7,7 @@ const labelBase = cva("text-text-default-1", {
       filter: ["-translate-y-1/2 absolute top-1/2"],
       inline: ["flex items-start gap-1"],
       floating: [
+        "pointer-events-none",
         "absolute transition-all duration-75",
         "-translate-y-1/2 top-1/2",
         "text-text-default-2 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
@@ -19,17 +20,11 @@ const labelBase = cva("text-text-default-1", {
         // TextEditor default positioning
         "group-data-[text-editor]/text-editor:top-5 group-data-[text-editor]/text-editor:left-2 group-data-[text-editor]/text-editor:translate-y-0",
         // Text and Number Input
-        "group-focus/input-content:top-1 group-focus/input-content:translate-y-0",
-        "group-focus-within/input-content:top-1 group-focus-within/input-content:translate-y-0",
-        "group-has-[input:not(:placeholder-shown)]/input-content:top-1 group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
+        "group-has-[input:not(:placeholder-shown)]/input-content:top-floating-label-input-height-filled group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
         // TextArea
-        "group-focus/text-area:top-1 group-focus/text-area:translate-y-0",
-        "group-focus-within/text-area:top-1 group-focus-within/text-area:translate-y-0",
-        "group-has-[textarea:not(:placeholder-shown)]/text-area:top-1 group-has-[textarea:not(:placeholder-shown)]/text-area:translate-y-0",
+        "group-has-[textarea:not(:placeholder-shown)]/text-area:top-floating-label-input-height-filled group-has-[textarea:not(:placeholder-shown)]/text-area:translate-y-0",
         // TextEditor
-        "group-focus/text-editor:top-1 group-focus/text-editor:translate-y-0",
-        "group-focus-within/text-editor:top-1 group-focus-within/text-editor:translate-y-0",
-        "group-data-[is-filled=true]/text-editor:top-1 group-data-[is-filled=true]/text-editor:translate-y-0",
+        "group-data-[is-filled=true]/text-editor:top-floating-label-input-height-filled group-data-[is-filled=true]/text-editor:translate-y-0",
         // Date and Time Picker
         "group-data-[has-selection]/date-picker-content:top-1 group-data-[has-selection]/date-picker-content:translate-y-0",
         "group-focus-within/date-picker-content:top-1 group-focus-within/date-picker-content:translate-y-0",
@@ -40,12 +35,12 @@ const labelBase = cva("text-text-default-1", {
         // Text and Number Input
         "group-has-[input:placeholder-shown]/input-content:text-text-default-3",
         "group-has-[input:placeholder-shown]/input-content:!font-medium",
-        "group-has-[input:not(placeholder-shown)]/input-content:!font-semibold",
+        "group-has-[input:not(:placeholder-shown)]/input-content:!font-semibold",
         "group-has-[input:not(:placeholder-shown)]/input-content:!text-label-3",
-        "group-has-[input:not(placeholder-shown)]/input-content:text-text-default-1",
-        "group-focus-within/input-content:!text-text-default-1",
-        "group-focus-within/input-content:text-label-3",
-        "group-has-[input:focus-within]/input-content:!font-semibold",
+        "group-has-[input:not(:placeholder-shown)]/input-content:text-text-default-1",
+        // "group-focus-within/input-content:!text-text-default-1",
+        // "group-focus-within/input-content:text-label-3",
+        // "group-has-[input:focus-within]/input-content:!font-semibold",
         // TextArea
         "group-has-[textarea:placeholder-shown]/text-area:text-text-default-3",
         "group-has-[textarea:placeholder-shown]/text-area:!font-medium",

package/dist/components/overlays/Modal/Modal.d.ts

@@ -5,7 +5,8 @@ export interface ModalProps extends ModalVariantProps {
     portalContainerRef?: RefObject<HTMLElement>;
     onClose: () => void;
     modalClassName?: string;
+    closeIconClassName?: string;
     showCloseIcon?: boolean;
     isDismissable?: boolean;
 }
-export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, showCloseIcon, isDismissable, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, showCloseIcon, isDismissable, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/Modal/Modal.js

@@ -4,7 +4,7 @@ import { ModalOverlay, Modal as Modal$1, Dialog } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
-import { modalOverlay, modalContent, modalMain } from "./modal.cva.js";
+import { modalOverlay, modalMain, modalContent } from "./modal.cva.js";
 import { ns } from "../../../config/i18n.js";
 const Modal = ({
   isOpen,
@@ -13,6 +13,7 @@ const Modal = ({
   aside,
   children,
   modalClassName,
+  closeIconClassName,
   showCloseIcon,
   isDismissable = true
 }) => {
@@ -32,14 +33,17 @@ const Modal = ({
           onClose();
         }
       },
-      children: /* @__PURE__ */ jsx(Modal$1, { className: clsx(modalMain({ aside })), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContent({ aside, className: modalClassName }), children: [
+      children: /* @__PURE__ */ jsx(Modal$1, { className: modalMain({ aside }), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContent({ aside, className: modalClassName }), children: [
         showCloseIcon && /* @__PURE__ */ jsx(
           InlineIconButton,
           {
             color: "secondary",
             onPress: onClose,
             icon: CloseIcon,
-            className: "absolute top-0 right-0 p-2",
+            className: clsx(
+              "absolute top-0 right-0 p-modal-gap-desktop-modal-close-icon-top-right",
+              closeIconClassName
+            ),
             label: t(($) => $.ui.modal.closeBtn)
           }
         ),

package/dist/components/overlays/Tooltip/tooltip.cva.js

@@ -5,7 +5,7 @@ const tooltipCva = cva(
     variants: {
       color: {
         default: ["bg-interactive-contained-secondary-idle"],
-        error: ["w-max bg-text-error-1"]
+        error: ["w-max bg-elevation-fill-error-1"]
       }
     },
     defaultVariants: {
@@ -19,7 +19,7 @@ const tooltipPointerHorizontalCva = cva(
     variants: {
       color: {
         default: ["text-interactive-contained-secondary-idle"],
-        error: ["text-text-error-1"]
+        error: ["text-elevation-fill-error-1"]
       }
     },
     defaultVariants: {
@@ -33,7 +33,7 @@ const tooltipPointerVerticalCva = cva(
     variants: {
       color: {
         default: ["text-interactive-contained-secondary-idle"],
-        error: ["text-text-error-1"]
+        error: ["text-elevation-fill-error-1"]
       }
     },
     defaultVariants: {
@@ -45,7 +45,7 @@ const tooltipTextCva = cva([], {
   variants: {
     color: {
       default: ["text-text-inverted-3"],
-      error: ["text-interactive-text-secondary-idle-inverted"]
+      error: ["text-text-error-inverted-1"]
     }
   },
   defaultVariants: {

package/dist/components/segment/SegmentItem.js

@@ -11,16 +11,17 @@ const SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
       ...props,
       id,
       className: clsx(
-        "flex items-center justify-center gap-1 transition-all duration-200",
-        "border border-transparent",
+        "flex items-center justify-center gap-segmented-control-gap-content-icon-to-text transition-all duration-200",
+        "border border-support-transparent-outline",
         "py-segmented-control-height-segment",
-        iconOnly ? "px-segmented-control-height-segment" : "px-segmented-control-side-segment py-segmented-control-height-segment",
+        iconOnly ? "px-segmented-control-height-segment" : "px-segmented-control-side-segment",
         "rounded-segmented-control-rounding-segment",
-        "hover:bg-interactive-subtle-secondary-hover",
-        "pressed:bg-interactive-subtle-secondary-pressed",
-        "selected:text-interactive-subtle-secondary-on-toggled-idle text-interactive-subtle-secondary-on-idle hover:text-interactive-subtle-secondary-on-hover",
-        "disabled:selected:text-interactive-subtle-secondary-on-toggled-disabled disabled:text-interactive-subtle-secondary-on-disabled",
-        "selected:bg-interactive-subtle-secondary-toggled-idle disabled:selected:bg-interactive-subtle-secondary-toggled-disabled"
+        "text-interactive-subtle-secondary-on-idle",
+        "hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+        "pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+        "disabled:border-support-transparent-outline disabled:text-interactive-subtle-secondary-on-disabled",
+        "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
+        "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
       ),
       isDisabled,
       children: [

package/dist/components/shared/pagination/PaginationList.d.ts

@@ -6,7 +6,7 @@ export interface PaginationListProps {
     hideFirstLast?: boolean;
     hidePrevNext?: boolean;
     hideNumbers?: boolean;
-    size?: ButtonProps["size"];
+    size?: Exclude<ButtonProps["size"], "none">;
     color?: ButtonProps["color"];
     variant?: ButtonProps["variant"];
     className?: string;

package/dist/components/shared/pagination/minWidth.cva.d.ts

@@ -1,3 +1,3 @@
 export declare const minWidth: (props?: ({
-    size?: "xxs" | "xs" | "s" | "m" | "l" | null | undefined;
+    size?: "xs" | "s" | "m" | "l" | "xxs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/status/Toast/Toast.js

@@ -32,7 +32,8 @@ const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props })
           onPress,
           ...buttonColor({ ...props }),
           variant: "text",
-          size: "xs",
+          size: "none",
+          width: "hug",
           children: buttonText
         },
         buttonText

package/dist/config/theme.context.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { z } from 'zod';
+export declare namespace ThemeContext {
+    const ThemeSchema: z.ZodLiteral<"dark" | "light" | "system">;
+    export type Theme = z.infer<typeof ThemeSchema>;
+    interface ThemeContextValue {
+        theme: Theme;
+        systemTheme?: Exclude<Theme, "system">;
+        updateTheme: (theme: Theme) => void;
+    }
+    interface ThemeContextProviderProps {
+        storageKey?: string;
+    }
+    export const ThemeContextProvider: ({ children, storageKey, }: PropsWithChildren<ThemeContextProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    export const useTheme: () => ThemeContextValue;
+    export {};
+}

package/dist/config/theme.context.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useEffect, useMemo, use } from "react";
+import { z } from "zod";
+import { useLocalStorage } from "../hooks/useLocalStorage.js";
+var ThemeContext;
+((_ThemeContext) => {
+  const DEFAULT_STORAGE_KEY = "theme";
+  const ThemeSchema = z.literal(["light", "dark", "system"]);
+  const ThemeContext2 = createContext(null);
+  _ThemeContext.ThemeContextProvider = ({
+    children,
+    storageKey = DEFAULT_STORAGE_KEY
+  }) => {
+    const [systemTheme, setSystemTheme] = useState(() => {
+      if (typeof window === "undefined") {
+        return void 0;
+      }
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      return media.matches ? "dark" : "light";
+    });
+    const { value: theme, set } = useLocalStorage({
+      key: storageKey,
+      schema: ThemeSchema
+    });
+    const updateTheme = useCallback(
+      (theme2) => {
+        set(theme2);
+      },
+      [set]
+    );
+    useEffect(() => {
+      if (typeof window === "undefined") {
+        return;
+      }
+      const onChange = (event) => {
+        setSystemTheme(event.matches ? "dark" : "light");
+      };
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      media.addEventListener("change", onChange);
+      return () => {
+        media.removeEventListener("change", onChange);
+      };
+    }, []);
+    useEffect(() => {
+      document.documentElement.classList.remove("dark");
+      if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
+        document.documentElement.classList.add("dark");
+      } else if (theme === "light") {
+        document.documentElement.classList.add("light");
+      }
+    }, [theme, systemTheme]);
+    const contextValue = useMemo(
+      () => ({
+        theme: theme ?? "system",
+        systemTheme,
+        updateTheme
+      }),
+      [theme, systemTheme, updateTheme]
+    );
+    return /* @__PURE__ */ jsx(ThemeContext2.Provider, { value: contextValue, children });
+  };
+  _ThemeContext.useTheme = () => {
+    const context = use(ThemeContext2);
+    return context;
+  };
+})(ThemeContext || (ThemeContext = {}));
+export {
+  ThemeContext
+};

package/dist/hooks/useBreakpoint.js

@@ -1,17 +1,22 @@
 import { useMemo } from "react";
 import { useMediaQuery } from "react-responsive";
+let breakpoints = null;
 function getBreakpoints() {
+  if (breakpoints) {
+    return breakpoints;
+  }
   const cs = getComputedStyle(document.documentElement);
   const entries = ["sm", "md", "lg", "xl", "2xl"].map((k) => [k, cs.getPropertyValue(`--breakpoint-${k}`).trim()]).filter(([, v]) => !!v);
-  return Object.fromEntries(entries);
+  breakpoints = Object.fromEntries(entries);
+  return breakpoints;
 }
 function useBreakpoint(breakpointKey) {
-  const breakpoints = useMemo(() => getBreakpoints(), []);
-  if (!breakpoints) {
+  const breakpoints2 = useMemo(() => getBreakpoints(), []);
+  if (!breakpoints2) {
     throw new Error("Tailwind config is missing theme.screens");
   }
   const bool = useMediaQuery({
-    query: `(min-width: ${breakpoints[breakpointKey]})`
+    query: `(min-width: ${breakpoints2[breakpointKey]})`
   });
   return bool;
 }

package/dist/hooks/useLocalStorage.d.ts

@@ -7,7 +7,5 @@ export declare const useLocalStorage: <ZOutput, ZInput>({ key, schema }: IProps<
     value: ZOutput | null;
     set: (newValue: ZInput) => void;
     remove: () => void;
-    error: Error | null;
-    isInitialLoading: boolean;
 };
 export {};

package/dist/hooks/useLocalStorage.js

@@ -1,36 +1,27 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useCallback } from "react";
+const getValue = (key, schema) => {
+  if (!localStorage) {
+    return null;
+  }
+  const lsValue = localStorage.getItem(key);
+  if (!lsValue) {
+    return null;
+  }
+  let jsonOrString;
+  try {
+    jsonOrString = JSON.parse(lsValue);
+  } catch {
+    jsonOrString = lsValue;
+  }
+  const parsedValue = schema.safeParse(jsonOrString);
+  if (parsedValue.success) {
+    return parsedValue.data;
+  } else {
+    return null;
+  }
+};
 const useLocalStorage = ({ key, schema }) => {
-  const [value, setValue] = useState(null);
-  const [isInitialLoading, setIsInitialLoading] = useState(true);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!localStorage) {
-      setValue(null);
-      return;
-    }
-    try {
-      const lsValue = localStorage.getItem(key);
-      if (!lsValue) {
-        setValue(null);
-        return;
-      }
-      let jsonOrString;
-      try {
-        jsonOrString = JSON.parse(lsValue);
-      } catch {
-        jsonOrString = lsValue;
-      }
-      const parsedValue = schema.safeParse(jsonOrString);
-      if (parsedValue.success) {
-        setValue(parsedValue.data);
-      } else {
-        setError(parsedValue.error);
-        setValue(null);
-      }
-    } finally {
-      setIsInitialLoading(false);
-    }
-  }, [key, schema]);
+  const [value, setValue] = useState(() => getValue(key, schema));
   const set = useCallback(
     (newValue) => {
       if (!localStorage) {
@@ -56,7 +47,7 @@ const useLocalStorage = ({ key, schema }) => {
     localStorage.removeItem(key);
     setValue(null);
   }, [key]);
-  return { value, set, remove, error, isInitialLoading };
+  return { value, set, remove };
 };
 export {
   useLocalStorage

package/dist/index.d.ts

@@ -69,6 +69,7 @@ export type { FileUploadContainerProps } from './components/inputs/File/FileUplo
 export { FileUploadContainer } from './components/inputs/File/FileUploadContainer';
 export type { InputUploadProps } from './components/inputs/File/InputUpload';
 export { InputUpload } from './components/inputs/File/InputUpload';
+export { ProgressBar } from './components/inputs/File/shared/ProgressBar';
 export type { FormFieldProps } from './components/inputs/FormField/FormField';
 export { FormField } from './components/inputs/FormField/FormField';
 export type { ControlledNumberInputProps, NumberInputProps } from './components/inputs/Input/NumberInput/NumberInput';
@@ -156,6 +157,7 @@ export { Confirmation } from './config/confirmation.context';
 export { ns, resources } from './config/i18n';
 export { LinkContext } from './config/link.context';
 export { UIRouter } from './config/router.context';
+export { ThemeContext } from './config/theme.context';
 export { UIConfig } from './config/uiConfig.context';
 export { UIStyle } from './config/uiStyle.context';
 export type { DynamicColumnsOptions } from './helpers/dynamicColumns';

package/dist/index.js

@@ -51,6 +51,7 @@ import { TimePicker } from "./components/inputs/DateTime/TimePicker/TimePicker.j
 import { FileUpload } from "./components/inputs/File/FileUpload.js";
 import { FileUploadContainer } from "./components/inputs/File/FileUploadContainer.js";
 import { InputUpload } from "./components/inputs/File/InputUpload.js";
+import { ProgressBar } from "./components/inputs/File/shared/ProgressBar.js";
 import { FormField } from "./components/inputs/FormField/FormField.js";
 import { NumberInput } from "./components/inputs/Input/NumberInput/NumberInput.js";
 import { PasswordInput } from "./components/inputs/Input/PasswordInput/PasswordInput.js";
@@ -95,6 +96,7 @@ import { Confirmation } from "./config/confirmation.context.js";
 import { ns, resources } from "./config/i18n.js";
 import { LinkContext } from "./config/link.context.js";
 import { UIRouter } from "./config/router.context.js";
+import { ThemeContext } from "./config/theme.context.js";
 import { UIConfig } from "./config/uiConfig.context.js";
 import { UIStyle } from "./config/uiStyle.context.js";
 import { dynamicColumns } from "./helpers/dynamicColumns.js";
@@ -216,6 +218,7 @@ export {
   PillButton,
   PointerHorizontalIcon,
   PointerVerticalIcon,
+  ProgressBar,
   QueriesUtils,
   QueryAutocomplete,
   RadioGroup,
@@ -238,6 +241,7 @@ export {
   TextColorIcon,
   TextEditor,
   TextInput,
+  ThemeContext,
   TimePicker,
   Toast,
   ToastContainer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "0.1.0",
+  "version": "2.1.1",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/inputs/File/shared/FileProgressBar.d.ts

@@ -1,3 +0,0 @@
-export declare const FileProgressBar: ({ progress }: {
-    progress?: number;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/File/shared/FileProgressBar.js

@@ -1,32 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Typography } from "../../../text/Typography/Typography.js";
-const FileProgressBar = ({ progress = 0 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex flex-fill flex-col items-start gap-2 py-progress-height-height", children: /* @__PURE__ */ jsxs("div", { className: "relative h-1 w-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-1 w-full flex-shrink-0 rounded-xs bg-input-filled-idle" }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute top-0 left-0 h-1 flex-shrink-0 rounded-xs bg-interactive-contained-primary-idle transition-all duration-300",
-          style: { width: `${progress}%` }
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxs(
-      Typography,
-      {
-        variant: "default",
-        size: "label-2",
-        as: "span",
-        className: "text-center text-text-default-1",
-        children: [
-          progress,
-          "%"
-        ]
-      }
-    )
-  ] });
-};
-export {
-  FileProgressBar
-};