@povio/ui 0.0.5 → 0.0.6

package/dist/components/inputs/TextEditor/Toolbar/HyperlinkAction.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { LinkIcon } from "../../../../assets/icons/Link.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { TextInput } from "../../Input/TextInput/TextInput.js";
+import { ResponsivePopover } from "../../../overlays/ResponsivePopover/ResponsivePopover.js";
+import { ns } from "../../../../config/i18n.js";
+const HyperlinkAction = ({ editor }) => {
+  const { t } = useTranslation(ns);
+  const [isOpen, setIsOpen] = useState(false);
+  const [url, setUrl] = useState("");
+  const isLinkEnabled = !!editor.extensionManager.extensions.find((extension) => extension.name === "link");
+  const linkHref = editor.getAttributes("link")?.href;
+  useEffect(() => {
+    setUrl(linkHref || "");
+  }, [linkHref]);
+  if (!isLinkEnabled) {
+    return null;
+  }
+  const onRemove = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    setIsOpen(false);
+  };
+  const onApply = () => {
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    ResponsivePopover,
+    {
+      isOpen,
+      onOpenChange: setIsOpen,
+      sheetLabel: t(($) => $.ui.textEditor.link.label),
+      trigger: /* @__PURE__ */ jsx(
+        InlineIconButton,
+        {
+          color: "secondary",
+          label: t(($) => $.ui.textEditor.link.label),
+          icon: LinkIcon,
+          className: clsx(editor.isActive("link") && "!text-interactive-text-primary-idle"),
+          isDisabled: !editor.isEditable
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            variant: "outlined",
+            hideLabel: true,
+            label: t(($) => $.ui.textEditor.link.urlLabel),
+            placeholder: t(($) => $.ui.textEditor.link.urlPlaceholder),
+            value: url,
+            onChange: setUrl,
+            className: "mb-4"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "contained",
+              color: "secondary",
+              size: "xs",
+              width: "hug",
+              onPress: onApply,
+              isDisabled: !url,
+              children: t(($) => $.ui.textEditor.link.apply)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              color: "secondary",
+              size: "xs",
+              width: "hug",
+              onPress: onRemove,
+              isDisabled: !editor.isActive("link"),
+              children: t(($) => $.ui.textEditor.link.remove)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  HyperlinkAction
+};

package/dist/components/inputs/TextEditor/Toolbar/TextAlignSelect.d.ts

@@ -0,0 +1,2 @@
+import { TextEditorSharedProps } from '#ui/components/inputs/TextEditor/textEditor.types';
+export declare const TextAlignSelect: ({ editor }: TextEditorSharedProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/inputs/TextEditor/Toolbar/TextAlignSelect.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { AlignCenterIcon } from "../../../../assets/icons/AlignCenter.js";
+import { AlignLeftIcon } from "../../../../assets/icons/AlignLeft.js";
+import { AlignLeftRightIcon } from "../../../../assets/icons/AlignLeftRight.js";
+import { AlignRightIcon } from "../../../../assets/icons/AlignRight.js";
+import { Select } from "../../Selection/Select/Select.js";
+import { ns } from "../../../../config/i18n.js";
+const TextAlignSelect = ({ editor }) => {
+  const { t } = useTranslation(ns);
+  const isAlignEnabled = !!editor.extensionManager.extensions.find((extension) => extension.name === "textAlign");
+  if (!isAlignEnabled) {
+    return null;
+  }
+  const onChange = (val) => {
+    if (val) {
+      editor.chain().focus().setTextAlign(val).run();
+    } else {
+      editor.chain().focus().unsetTextAlign().run();
+    }
+  };
+  const getItem = (id, Icon) => {
+    return {
+      id,
+      label: t(($) => $.ui.textEditor.textAlign[id]),
+      content: /* @__PURE__ */ jsx(Icon, { className: "size-6" }),
+      isActive: editor.isActive({ textAlign: id }),
+      can: editor.can().setTextAlign(id)
+    };
+  };
+  const items = [
+    getItem("left", AlignLeftIcon),
+    getItem("center", AlignCenterIcon),
+    getItem("right", AlignRightIcon),
+    getItem("justify", AlignLeftRightIcon)
+  ];
+  const enabledItems = items.filter((item) => item.can);
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      as: "inline",
+      label: t(($) => $.ui.textEditor.textAlign.label),
+      placeholder: t(($) => $.ui.textEditor.textAlign.label),
+      hideLabel: true,
+      ignoreTriggerWidth: true,
+      showSelectionContent: true,
+      onChange,
+      items: enabledItems,
+      value: enabledItems.find((item) => item.isActive)?.id || "left",
+      isDisabled: !editor.isEditable
+    }
+  );
+};
+export {
+  TextAlignSelect
+};

package/dist/components/inputs/TextEditor/Toolbar/TextColorSelect.d.ts

@@ -0,0 +1,2 @@
+import { TextEditorSharedProps } from '#ui/components/inputs/TextEditor/textEditor.types';
+export declare const TextColorSelect: ({ editor }: TextEditorSharedProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/inputs/TextEditor/Toolbar/TextColorSelect.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { TextColorIcon } from "../../../../assets/icons/TextColor.js";
+import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
+import { defaultColors } from "../textEditor.types.js";
+const TextColorSelect = ({ editor }) => {
+  const isColorEnabled = editor.extensionManager.extensions.some((extension) => extension.name === "color");
+  if (!isColorEnabled) {
+    return null;
+  }
+  const onChange = (color) => {
+    editor.chain().focus().setColor(color).run();
+  };
+  const textColor = editor.getAttributes("textStyle").color || "#000000";
+  return /* @__PURE__ */ jsx(
+    ColorPickerDropdown,
+    {
+      value: textColor,
+      onChange,
+      colors: defaultColors,
+      isDisabled: !editor.isEditable,
+      children: /* @__PURE__ */ jsx(
+        TextColorIcon,
+        {
+          className: "size-6",
+          textColor
+        }
+      )
+    }
+  );
+};
+export {
+  TextColorSelect
+};

package/dist/components/inputs/TextEditor/Toolbar/TextEditorToolbar.d.ts

@@ -0,0 +1,6 @@
+import { Editor } from '@tiptap/react';
+interface Props {
+    editor: Editor | null;
+}
+export declare const TextEditorToolbar: ({ editor }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/inputs/TextEditor/Toolbar/TextEditorToolbar.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { HyperlinkAction } from "./HyperlinkAction.js";
+import { TextAlignSelect } from "./TextAlignSelect.js";
+import { TextColorSelect } from "./TextColorSelect.js";
+import { TextHighlightSelect } from "./TextHighlightSelect.js";
+import { TextListActions } from "./TextListActions.js";
+import { TextMarksActions } from "./TextMarksActions.js";
+import { TextStyleSelect } from "./TextStyleSelect.js";
+const TextEditorToolbar = ({ editor }) => {
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap items-center gap-x-7 gap-y-1 border-elevation-outline-default-2 border-b border-solid p-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(TextStyleSelect, { editor }),
+        /* @__PURE__ */ jsx(TextAlignSelect, { editor })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(TextColorSelect, { editor }),
+        /* @__PURE__ */ jsx(TextHighlightSelect, { editor })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TextMarksActions, { editor }),
+    /* @__PURE__ */ jsx(TextListActions, { editor }),
+    /* @__PURE__ */ jsx(HyperlinkAction, { editor })
+  ] });
+};
+export {
+  TextEditorToolbar
+};

package/dist/components/inputs/TextEditor/Toolbar/TextHighlightSelect.d.ts

@@ -0,0 +1,2 @@
+import { TextEditorSharedProps } from '#ui/components/inputs/TextEditor/textEditor.types';
+export declare const TextHighlightSelect: ({ editor }: TextEditorSharedProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/inputs/TextEditor/Toolbar/TextHighlightSelect.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { HighlightOnIcon } from "../../../../assets/icons/HighlightOn.js";
+import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
+import { defaultColors } from "../textEditor.types.js";
+const TextHighlightSelect = ({ editor }) => {
+  const isHighlightEnabled = editor.extensionManager.extensions.some((extension) => extension.name === "highlight");
+  if (!isHighlightEnabled) {
+    return null;
+  }
+  const onChange = (color) => {
+    if (color === "#FFFFFF") {
+      editor.chain().focus().unsetHighlight().run();
+    } else {
+      editor.chain().focus().setHighlight({ color }).run();
+    }
+  };
+  const highlightColor = editor.getAttributes("highlight").color || "#FFFFFF";
+  return /* @__PURE__ */ jsx(
+    ColorPickerDropdown,
+    {
+      value: highlightColor,
+      onChange,
+      colors: defaultColors,
+      isDisabled: !editor.isEditable,
+      children: /* @__PURE__ */ jsx(
+        HighlightOnIcon,
+        {
+          className: "size-6",
+          highlightColor
+        }
+      )
+    }
+  );
+};
+export {
+  TextHighlightSelect
+};

package/dist/components/inputs/TextEditor/Toolbar/TextListActions.d.ts

@@ -0,0 +1,2 @@
+import { TextEditorSharedProps } from '#ui/components/inputs/TextEditor/textEditor.types';
+export declare const TextListActions: ({ editor }: TextEditorSharedProps) => import("react/jsx-runtime").JSX.Element | null;

package/{src/components/inputs/TextEditor/Toolbar/TextListActions.tsx → dist/components/inputs/TextEditor/Toolbar/TextListActions.js}

@@ -1,15 +1,12 @@
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
-
-import { BulletedListIcon } from "#ui/assets/icons/BulletedList";
-import { NumberedListIcon } from "#ui/assets/icons/NumberedList";
-import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
-import type { TextEditorSharedProps } from "#ui/components/inputs/TextEditor/textEditor.types";
-import { ns } from "#ui/config/i18n";
-
-export const TextListActions = ({ editor }: TextEditorSharedProps) => {
+import { BulletedListIcon } from "../../../../assets/icons/BulletedList.js";
+import { NumberedListIcon } from "../../../../assets/icons/NumberedList.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../../config/i18n.js";
+const TextListActions = ({ editor }) => {
   const { t } = useTranslation(ns);
-
   const actions = [
     {
       can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bulletList"),
@@ -19,7 +16,7 @@ export const TextListActions = ({ editor }: TextEditorSharedProps) => {
       onPress: () => {
         editor.chain().focus().toggleBulletList().run();
       },
-      isActive: () => editor.isActive("bulletList"),
+      isActive: () => editor.isActive("bulletList")
     },
     {
       can: !!editor.extensionManager.extensions.find((extension) => extension.name === "orderedList"),
@@ -29,29 +26,26 @@ export const TextListActions = ({ editor }: TextEditorSharedProps) => {
       onPress: () => {
         editor.chain().focus().toggleOrderedList().run();
       },
-      isActive: () => editor.isActive("orderedList"),
-    },
+      isActive: () => editor.isActive("orderedList")
+    }
   ];
-
   const enabledActions = actions.filter((action) => action.can);
-
   if (enabledActions.length === 0) {
     return null;
   }
-
-  return (
-    <div className="flex h-full items-center gap-3">
-      {enabledActions.map((action) => (
-        <InlineIconButton
-          key={action.label}
-          color="secondary"
-          label={action.label}
-          onPress={action.onPress}
-          icon={action.icon}
-          isDisabled={!action.isEnabled()}
-          className={clsx(action.isActive() && "!text-interactive-text-primary-idle")}
-        />
-      ))}
-    </div>
-  );
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center gap-3", children: enabledActions.map((action) => /* @__PURE__ */ jsx(
+    InlineIconButton,
+    {
+      color: "secondary",
+      label: action.label,
+      onPress: action.onPress,
+      icon: action.icon,
+      isDisabled: !action.isEnabled(),
+      className: clsx(action.isActive() && "!text-interactive-text-primary-idle")
+    },
+    action.label
+  )) });
+};
+export {
+  TextListActions
 };

package/dist/components/inputs/TextEditor/Toolbar/TextMarksActions.d.ts

@@ -0,0 +1,2 @@
+import { TextEditorSharedProps } from '#ui/components/inputs/TextEditor/textEditor.types';
+export declare const TextMarksActions: ({ editor }: TextEditorSharedProps) => import("react/jsx-runtime").JSX.Element | null;

package/{src/components/inputs/TextEditor/Toolbar/TextMarksActions.tsx → dist/components/inputs/TextEditor/Toolbar/TextMarksActions.js}

@@ -1,17 +1,14 @@
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
-
-import { BoldIcon } from "#ui/assets/icons/Bold";
-import { ItalicIcon } from "#ui/assets/icons/Italic";
-import { StrikethroughIcon } from "#ui/assets/icons/Strikethrough";
-import { UnderlinedIcon } from "#ui/assets/icons/Underlined";
-import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
-import type { TextEditorSharedProps } from "#ui/components/inputs/TextEditor/textEditor.types";
-import { ns } from "#ui/config/i18n";
-
-export const TextMarksActions = ({ editor }: TextEditorSharedProps) => {
+import { BoldIcon } from "../../../../assets/icons/Bold.js";
+import { ItalicIcon } from "../../../../assets/icons/Italic.js";
+import { StrikethroughIcon } from "../../../../assets/icons/Strikethrough.js";
+import { UnderlinedIcon } from "../../../../assets/icons/Underlined.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../../config/i18n.js";
+const TextMarksActions = ({ editor }) => {
   const { t } = useTranslation(ns);
-
   const actions = [
     {
       can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bold"),
@@ -21,7 +18,7 @@ export const TextMarksActions = ({ editor }: TextEditorSharedProps) => {
       onPress: () => {
         editor.chain().focus().toggleBold().run();
       },
-      isActive: () => editor.isActive("bold"),
+      isActive: () => editor.isActive("bold")
     },
     {
       can: !!editor.extensionManager.extensions.find((extension) => extension.name === "italic"),
@@ -31,7 +28,7 @@ export const TextMarksActions = ({ editor }: TextEditorSharedProps) => {
       onPress: () => {
         editor.chain().focus().toggleItalic().run();
       },
-      isActive: () => editor.isActive("italic"),
+      isActive: () => editor.isActive("italic")
     },
     {
       can: !!editor.extensionManager.extensions.find((extension) => extension.name === "strike"),
@@ -41,7 +38,7 @@ export const TextMarksActions = ({ editor }: TextEditorSharedProps) => {
       onPress: () => {
         editor.chain().focus().toggleStrike().run();
       },
-      isActive: () => editor.isActive("strike"),
+      isActive: () => editor.isActive("strike")
     },
     {
       can: !!editor.extensionManager.extensions.find((extension) => extension.name === "underline"),
@@ -51,29 +48,26 @@ export const TextMarksActions = ({ editor }: TextEditorSharedProps) => {
       onPress: () => {
         editor.chain().focus().toggleUnderline().run();
       },
-      isActive: () => editor.isActive("underline"),
-    },
+      isActive: () => editor.isActive("underline")
+    }
   ];
-
   const enabledActions = actions.filter((action) => action.can);
-
   if (enabledActions.length === 0) {
     return null;
   }
-
-  return (
-    <div className="flex h-full items-center gap-3">
-      {enabledActions.map((action) => (
-        <InlineIconButton
-          key={action.label}
-          color="secondary"
-          label={action.label}
-          onPress={action.onPress}
-          icon={action.icon}
-          isDisabled={!action.isEnabled()}
-          className={clsx(action.isActive() && "!text-interactive-text-primary-idle")}
-        />
-      ))}
-    </div>
-  );
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center gap-3", children: enabledActions.map((action) => /* @__PURE__ */ jsx(
+    InlineIconButton,
+    {
+      color: "secondary",
+      label: action.label,
+      onPress: action.onPress,
+      icon: action.icon,
+      isDisabled: !action.isEnabled(),
+      className: clsx(action.isActive() && "!text-interactive-text-primary-idle")
+    },
+    action.label
+  )) });
+};
+export {
+  TextMarksActions
 };

package/dist/components/inputs/TextEditor/Toolbar/TextStyleSelect.d.ts

@@ -0,0 +1,2 @@
+import { TextEditorSharedProps } from '#ui/components/inputs/TextEditor/textEditor.types';
+export declare const TextStyleSelect: ({ editor }: TextEditorSharedProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/inputs/TextEditor/Toolbar/TextStyleSelect.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Select } from "../../Selection/Select/Select.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+const TextStyleSelect = ({ editor }) => {
+  const { t } = useTranslation(ns);
+  const isHeadingEnabled = !!editor.extensionManager.extensions.find((extension) => extension.name === "heading");
+  if (!isHeadingEnabled) {
+    return null;
+  }
+  const getItem = (level) => {
+    return {
+      id: level,
+      label: t(($) => $.ui.textEditor.textStyle[`heading${level}`]),
+      content: /* @__PURE__ */ jsx(Typography, { size: `title-${level}`, children: t(($) => $.ui.textEditor.textStyle[`heading${level}`]) })
+    };
+  };
+  const onChange = (val) => {
+    if (!val) {
+      const currentLevel = editor.getAttributes("heading")?.level;
+      if (!currentLevel) {
+        return;
+      }
+      editor.chain().focus().toggleHeading({ level: currentLevel }).run();
+      return;
+    }
+    if (!editor.can().setHeading({ level: val })) {
+      return;
+    }
+    editor.chain().focus().setHeading({ level: val }).run();
+  };
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      as: "inline",
+      placeholder: t(($) => $.ui.textEditor.textStyle.label),
+      label: t(($) => $.ui.textEditor.textStyle.label),
+      hideLabel: true,
+      ignoreTriggerWidth: true,
+      onChange,
+      items: [
+        {
+          id: 0,
+          label: t(($) => $.ui.textEditor.textStyle.normal)
+        },
+        ...editor.can().toggleHeading({ level: 1 }) ? [getItem(1)] : [],
+        ...editor.can().toggleHeading({ level: 2 }) ? [getItem(2)] : [],
+        ...editor.can().toggleHeading({ level: 3 }) ? [getItem(3)] : [],
+        ...editor.can().toggleHeading({ level: 4 }) ? [getItem(4)] : [],
+        ...editor.can().toggleHeading({ level: 5 }) ? [getItem(5)] : [],
+        ...editor.can().toggleHeading({ level: 6 }) ? [getItem(6)] : []
+      ],
+      value: editor.getAttributes("heading")?.level || 0,
+      isDisabled: !editor.isEditable
+    }
+  );
+};
+export {
+  TextStyleSelect
+};

package/dist/components/inputs/TextEditor/textEditor.types.d.ts

@@ -0,0 +1,5 @@
+import { Editor } from '@tiptap/react';
+export interface TextEditorSharedProps {
+    editor: Editor;
+}
+export declare const defaultColors: string[];

package/{src/components/inputs/TextEditor/textEditor.types.ts → dist/components/inputs/TextEditor/textEditor.types.js}

@@ -1,10 +1,4 @@
-import type { Editor } from "@tiptap/react";
-
-export interface TextEditorSharedProps {
-  editor: Editor;
-}
-
-export const defaultColors = [
+const defaultColors = [
   "#000000",
   "#e60000",
   "#ff9900",
@@ -39,5 +33,8 @@ export const defaultColors = [
   "#666600",
   "#003700",
   "#002966",
-  "#3d1466",
+  "#3d1466"
 ];
+export {
+  defaultColors
+};

package/dist/components/inputs/Toggle/Toggle.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'react';
+import { SwitchProps as AriaSwitchProps } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { FormFieldErrorProps } from '#ui/components/inputs/FormField/FormFieldError';
+import { ControlProps } from '#ui/components/inputs/shared/form.types';
+import { ToggleVariantProps } from '#ui/components/inputs/Toggle/toggle.cva';
+interface ToggleBaseProps extends FormFieldErrorProps, ToggleVariantProps, Omit<AriaSwitchProps, "className"> {
+    ref?: Ref<HTMLLabelElement>;
+    children?: string;
+}
+export type ToggleProps = ToggleBaseProps;
+export type ControlledToggleProps<TFieldValues extends FieldValues> = ControlProps<ToggleProps, TFieldValues, "isSelected">;
+export declare const Toggle: <TFieldValues extends FieldValues>(props: ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Toggle/Toggle.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { Switch } from "react-aria-components";
+import { Controller } from "react-hook-form";
+import { FormFieldError } from "../FormField/FormFieldError.js";
+import { CheckContent } from "../shared/CheckContent.js";
+import { toggle, toggleTypography } from "./toggle.cva.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const ToggleBase = (props) => {
+  const ui = UIConfig.useConfig();
+  const uiStyle = UIStyle.useConfig();
+  const toggleCva = uiStyle?.toggle?.cva ?? toggle;
+  const toggleTypographyMap = uiStyle?.toggle?.typography ?? toggleTypography;
+  const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
+  const formFieldErrorProps = {
+    error,
+    isDisabled
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Switch,
+      {
+        ...rest,
+        isDisabled,
+        className: clsx("group flex items-center gap-2", !isDisabled && "cursor-pointer", className),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: toggleCva({ variant, ...rest }) }),
+          /* @__PURE__ */ jsx(CheckContent, { typography: toggleTypographyMap({ variant, ...rest }), children })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })
+  ] });
+};
+const Toggle = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          ToggleBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            isSelected: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            name: field.name,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(ToggleBase, { ...props });
+};
+export {
+  Toggle
+};

package/dist/components/inputs/Toggle/toggle.cva.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+export declare const toggle: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ToggleVariantProps extends VariantProps<typeof toggle> {
+}
+export declare const toggleTypography: (props: {
+    variant?: "default" | null | undefined;
+}) => TypographyVariantProps | undefined;