@povio/ui 2.1.9 → 2.1.11

package/dist/components/inputs/File/FileUpload.js

@@ -184,7 +184,7 @@ const FileUploadBase = (props) => {
                   title: emptyText,
                   uploadText,
                   browseText,
-                  className: "-translate-x-1/2 -translate-y-1/2 group-drop-target/file-upload-drop-zone:flex! absolute top-1/2 left-1/2 z-50 hidden flex-col"
+                  className: "group-drop-target/file-upload-drop-zone:flex! absolute top-1/2 left-1/2 z-50 hidden -translate-x-1/2 -translate-y-1/2 flex-col"
                 }
               )
             ] }) : /* @__PURE__ */ jsx(

package/dist/components/inputs/Input/shared/InputContent.js

@@ -60,7 +60,7 @@ const InputContent = ({
           {
             ref: leadingContentRef,
             className: clsx(
-              "-translate-y-1/2 absolute top-1/2",
+              "absolute top-1/2 -translate-y-1/2",
               !isLeadingIconElement && "pointer-events-none",
               inputSideCva({ size, type: "left" })
             ),
@@ -72,7 +72,7 @@ const InputContent = ({
           {
             ref: trailingContentRef,
             className: clsx(
-              "-translate-y-1/2 absolute top-1/2 flex items-center gap-2",
+              "absolute top-1/2 flex -translate-y-1/2 items-center gap-2",
               !isTrailingIconElement && !action && !showClear && "pointer-events-none",
               inputSideCva({ size, type: "right" })
             ),

package/dist/components/inputs/Slider/Slider.js

@@ -69,7 +69,7 @@ const SliderBase = (props) => {
           }
         ),
         /* @__PURE__ */ jsx(SliderTrack, { className: "relative mx-2 h-6 w-full", children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "-translate-y-1/2 absolute top-1/2 h-1 w-full overflow-hidden rounded-full bg-elevation-outline-default-1", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 h-1 w-full -translate-y-1/2 overflow-hidden rounded-full bg-elevation-outline-default-1", children: /* @__PURE__ */ jsx(
             "div",
             {
               className: clsx(

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

@@ -4,12 +4,12 @@ const labelBase = cva("text-text-default-1", {
   variants: {
     as: {
       default: ["flex items-start gap-1"],
-      filter: ["-translate-y-1/2 absolute top-1/2"],
+      filter: ["absolute top-1/2 -translate-y-1/2"],
       inline: ["flex items-start gap-1"],
       floating: [
         "pointer-events-none",
         "absolute transition-all duration-75",
-        "-translate-y-1/2 top-1/2",
+        "top-1/2 -translate-y-1/2",
         "text-text-default-2 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
         "group-disabled/date-picker-content:text-interactive-text-secondary-disabled",
         "group-disabled/text-editor:text-interactive-text-secondary-disabled",

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

@@ -4,8 +4,9 @@ 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, modalMain, modalContent } from "./modal.cva.js";
+import { modalMain, modalContent, modalOverlay } from "./modal.cva.js";
 import { ns } from "../../../config/i18n.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
 const Modal = ({
   isOpen,
   portalContainerRef,
@@ -18,11 +19,15 @@ const Modal = ({
   isDismissable = true
 }) => {
   const { t } = useTranslation(ns);
+  const uiStyle = UIStyle.useConfig();
+  const modalMainCva = uiStyle?.modal?.mainCva ?? modalMain;
+  const modalContentCva = uiStyle?.modal?.contentCva ?? modalContent;
+  const modalOverlayCva = uiStyle?.modal?.overlayCva ?? modalOverlay;
   return /* @__PURE__ */ jsx(
     ModalOverlay,
     {
       UNSTABLE_portalContainer: portalContainerRef?.current,
-      className: modalOverlay({ aside }),
+      className: modalOverlayCva({ aside }),
       isDismissable,
       isOpen,
       shouldCloseOnInteractOutside: () => {
@@ -33,7 +38,7 @@ const Modal = ({
           onClose();
         }
       },
-      children: /* @__PURE__ */ jsx(Modal$1, { className: modalMain({ aside }), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContent({ aside, className: modalClassName }), children: [
+      children: /* @__PURE__ */ jsx(Modal$1, { className: modalMainCva({ aside }), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContentCva({ aside, className: modalClassName }), children: [
         showCloseIcon && /* @__PURE__ */ jsx(
           InlineIconButton,
           {

package/dist/components/segment/Segment.js

@@ -7,6 +7,8 @@ import { ToggleButtonGroup } from "react-aria-components";
 import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
 import { FormField } from "../inputs/FormField/FormField.js";
+import { segmentCva } from "./segment.cva.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
 import { SegmentItem } from "./SegmentItem.js";
 const SegmentBase = ({
   className,
@@ -23,8 +25,10 @@ const SegmentBase = ({
     selectedKeys: value ? Array.isArray(value) ? value : [value] : void 0
   };
   const buttonGroupRef = useRef(null);
+  const uiStyle = UIStyle.useConfig();
   const state = useToggleGroupState(props);
   const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
+  const segmentCva$1 = uiStyle?.segment?.cva ?? segmentCva;
   const formFieldProps = {
     error,
     label: "",
@@ -53,12 +57,7 @@ const SegmentBase = ({
           ...groupProps,
           ref: buttonGroupRef,
           onSelectionChange,
-          className: clsx(
-            "group/segment grid w-fit items-center gap-segmented-control-side-segmented-control p-segmented-control-side-segmented-control",
-            "bg-elevation-fill-default-3",
-            "rounded-segmented-control-rounding-segmented-control",
-            className
-          ),
+          className: segmentCva$1({ ...props, className }),
           style: {
             gridTemplateColumns
           },

package/dist/components/segment/SegmentItem.js

@@ -1,28 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { ToggleButton } from "react-aria-components";
+import { segmentItemCva } from "./segment.cva.js";
 import { Typography } from "../text/Typography/Typography.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
 const SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
   const IconComponent = icon;
-  const iconOnly = icon && !label;
+  const iconOnly = !!(icon && !label);
+  const uiStyle = UIStyle.useConfig();
+  const segmentItemCva$1 = uiStyle?.segment?.itemCva ?? segmentItemCva;
   return /* @__PURE__ */ jsxs(
     ToggleButton,
     {
       ...props,
       id,
-      className: clsx(
-        "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",
-        "rounded-segmented-control-rounding-segment",
-        "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"
-      ),
+      className: segmentItemCva$1({ iconOnly }),
       isDisabled,
       children: [
         icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }),

package/dist/components/segment/segment.cva.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const segmentCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface SegmentVariantProps extends VariantProps<typeof segmentCva> {
+}
+export declare const segmentItemCva: (props?: ({
+    iconOnly?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SegmentItemVariantProps extends VariantProps<typeof segmentItemCva> {
+}

package/dist/components/segment/segment.cva.js

@@ -0,0 +1,35 @@
+import { cva } from "class-variance-authority";
+const segmentCva = cva([
+  "group/segment grid w-fit items-center gap-segmented-control-side-segmented-control p-segmented-control-side-segmented-control",
+  "bg-elevation-fill-default-3",
+  "rounded-segmented-control-rounding-segmented-control"
+]);
+const segmentItemCva = cva(
+  [
+    "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",
+    "rounded-segmented-control-rounding-segment",
+    "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"
+  ],
+  {
+    variants: {
+      iconOnly: {
+        true: "px-segmented-control-height-segment",
+        false: "px-segmented-control-side-segment"
+      }
+    },
+    defaultVariants: {
+      iconOnly: false
+    }
+  }
+);
+export {
+  segmentCva,
+  segmentItemCva
+};

package/dist/components/segment/segment.types.d.ts

@@ -2,7 +2,8 @@ import { FC, ReactElement, Ref, SVGProps } from 'react';
 import { Key, ToggleButtonGroupProps, ToggleButtonProps } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { ControlProps } from '../inputs/shared/form.types';
-export interface SegmentItem<TKey extends Key = Key> extends ToggleButtonProps {
+import { SegmentItemVariantProps, SegmentVariantProps } from './segment.cva';
+export interface SegmentItem<TKey extends Key = Key> extends ToggleButtonProps, SegmentItemVariantProps {
     id: TKey;
     label?: string;
     icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
@@ -25,7 +26,7 @@ export type GroupedSegmentControlProps<TFieldValues extends FieldValues, TKey ex
 } & ControlProps<MultiSegmentProps<TKey>, TFieldValues>) | ({
     selectionMode?: SingleSegmentProps["selectionMode"];
 } & ControlProps<SingleSegmentProps<TKey>, TFieldValues>);
-export type SegmentProps<TKey extends Key = Key> = Omit<ToggleButtonGroupProps, "children" | "onSelectionChange" | "selectedKeys" | "defaultSelectedKeys"> & {
+export type SegmentProps<TKey extends Key = Key> = Omit<ToggleButtonGroupProps & SegmentVariantProps, "children" | "onSelectionChange" | "selectedKeys" | "defaultSelectedKeys"> & {
     ref?: Ref<HTMLElement>;
     items: SegmentItem<TKey>[];
     className?: string;

package/dist/components/text/Tag/Tag.d.ts

@@ -7,4 +7,4 @@ export interface TagProps extends TagVariantProps, AriaButtonProps {
     isDisabled?: boolean;
     onDismiss?: () => void;
 }
-export declare const Tag: ({ color, className, children, dismissable, isDisabled, onDismiss, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ className, children, dismissable, isDisabled, onDismiss, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -8,7 +8,7 @@ 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 Tag = ({ className, children, dismissable, isDisabled, onDismiss, ...props }) => {
   const uiStyle = UIStyle.useConfig();
   const tagCva = uiStyle?.tag?.cva ?? tag;
   const { t } = useTranslation(ns);
@@ -17,7 +17,7 @@ const Tag = ({ color, className, children, dismissable, isDisabled, onDismiss, .
     "div",
     {
       className: tagCva({
-        color,
+        ...props,
         className: clsx("pointer-events-none", className)
       }),
       children: [

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

@@ -7,7 +7,10 @@ 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 { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from '../components/Menu/menu.cva';
+import { ModalVariantProps } from '../components/overlays/Modal/modal.cva';
 import { TooltipPointerHorizontalVariantProps, TooltipPointerVerticalVariantProps, TooltipTextVariantProps, TooltipVariantProps } from '../components/overlays/Tooltip/tooltip.cva';
+import { SegmentItemVariantProps, SegmentVariantProps } from '../components/segment/segment.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';
@@ -82,6 +85,21 @@ export declare namespace UIStyle {
             pointerVerticalCva?: Cva<TooltipPointerVerticalVariantProps>;
             textCva?: Cva<TooltipTextVariantProps>;
         };
+        modal: {
+            contentCva?: Cva<ModalVariantProps>;
+            overlayCva?: Cva<ModalVariantProps>;
+            mainCva?: Cva<ModalVariantProps>;
+        };
+        menu: {
+            cva?: Cva<MenuCvaVariantProps>;
+            itemCva?: Cva<MenuItemVariantProps>;
+            popoverCva?: Cva<MenuPopoverVariantProps>;
+            popoverWrapperCva?: Cva<MenuPopoverWrapperVariantProps>;
+        };
+        segment: {
+            cva?: Cva<SegmentVariantProps>;
+            itemCva?: Cva<SegmentItemVariantProps>;
+        };
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/package.json

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