@povio/ui 0.0.2 → 0.0.4

package/src/assets/icons/Info.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+export const InfoIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14m-9 7a9 9 0 1 1 18 0 9 9 0 0 1-18 0"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12 7.8a1 1 0 0 1 1 1V12a1 1 0 1 1-2 0V8.8a1 1 0 0 1 1-1M11 15.2a1 1 0 0 1 1-1h.008a1 1 0 1 1 0 2H12a1 1 0 0 1-1-1"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/assets/icons/Italic.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const ItalicIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M6.743 19a.92.92 0 0 1-.678-.277.92.92 0 0 1-.277-.679q0-.401.277-.678a.92.92 0 0 1 .678-.276H9.82l3.424-10.18h-3.078a.92.92 0 0 1-.678-.277.92.92 0 0 1-.277-.679.92.92 0 0 1 .277-.678.92.92 0 0 1 .678-.276h7.762q.4 0 .678.277a.92.92 0 0 1 .277.679.92.92 0 0 1-.277.678.92.92 0 0 1-.678.276h-2.754l-3.423 10.18h2.753q.4 0 .678.277.277.277.277.679a.92.92 0 0 1-.277.678.92.92 0 0 1-.678.276z"
+    />
+  </svg>
+);

package/src/assets/icons/Link.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const LinkIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M7.039 16.538q-1.884 0-3.211-1.327Q2.5 13.883 2.5 12q0-1.883 1.328-3.212 1.328-1.328 3.21-1.328h3.02q.318 0 .534.216a.73.73 0 0 1 .216.535q0 .318-.216.534a.73.73 0 0 1-.534.215h-3.02q-1.26 0-2.149.89A2.93 2.93 0 0 0 4 12q0 1.26.89 2.149.888.89 2.147.89h3.02q.32 0 .535.215a.73.73 0 0 1 .216.535q0 .318-.216.534a.73.73 0 0 1-.534.215zM9 12.75a.73.73 0 0 1-.534-.216A.73.73 0 0 1 8.25 12q0-.32.216-.535A.73.73 0 0 1 9 11.25h6q.319 0 .534.216a.73.73 0 0 1 .216.534q0 .319-.216.534a.73.73 0 0 1-.534.216zm4.942 3.788a.73.73 0 0 1-.534-.215.73.73 0 0 1-.216-.535q0-.319.216-.534a.73.73 0 0 1 .534-.216h3.02q1.26 0 2.148-.89Q20 13.26 20 12t-.89-2.15a2.93 2.93 0 0 0-2.147-.889h-3.02a.73.73 0 0 1-.535-.215.73.73 0 0 1-.216-.535q0-.318.216-.534a.73.73 0 0 1 .534-.216h3.02q1.883 0 3.21 1.328 1.328 1.328 1.328 3.21 0 1.884-1.328 3.211-1.327 1.328-3.21 1.328z"
+    />
+  </svg>
+);

package/src/assets/icons/Menu.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const MenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M2 12a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1M2 18a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/assets/icons/NumberedList.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const NumberedListIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M4.432 21.5a.58.58 0 0 1-.596-.596.58.58 0 0 1 .596-.596h1.904V19.25h-.904a.58.58 0 0 1-.596-.596.58.58 0 0 1 .596-.596h.904V17H4.432a.58.58 0 0 1-.596-.596.58.58 0 0 1 .596-.596h2.25q.36 0 .603.243a.82.82 0 0 1 .243.603v1.192q0 .36-.243.603a.82.82 0 0 1-.603.243q.36 0 .603.244a.82.82 0 0 1 .243.602v1.116q0 .36-.243.603a.82.82 0 0 1-.603.243zm.087-6.654a.66.66 0 0 1-.485-.198.66.66 0 0 1-.198-.484V12.25q0-.36.243-.603a.82.82 0 0 1 .603-.243h1.654v-1.058H4.432a.58.58 0 0 1-.596-.595.58.58 0 0 1 .596-.597h2.25q.36 0 .603.243a.82.82 0 0 1 .243.603v1.75a.82.82 0 0 1-.243.603.82.82 0 0 1-.603.243H5.028v1.058h1.904a.58.58 0 0 1 .596.595.58.58 0 0 1-.596.597zm1.414-6.654a.58.58 0 0 1-.597-.596V3.692h-.904a.58.58 0 0 1-.596-.595.58.58 0 0 1 .596-.597h1.423q.286 0 .48.193a.65.65 0 0 1 .193.48v4.423a.58.58 0 0 1-.595.596m4.46 10.558a.73.73 0 0 1-.534-.216.73.73 0 0 1-.215-.534q0-.32.215-.535a.73.73 0 0 1 .535-.215h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm0-6a.73.73 0 0 1-.534-.216.73.73 0 0 1-.215-.534q0-.32.215-.534a.73.73 0 0 1 .535-.216h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm0-6a.73.73 0 0 1-.534-.216A.73.73 0 0 1 9.644 6q0-.32.215-.535a.73.73 0 0 1 .535-.215h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215z"
+    />
+  </svg>
+);

package/src/assets/icons/PointerHorizontal.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const PointerHorizontalIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 10"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8.586 1.414a2 2 0 0 1 2.828 0L20 10H0z"
+    />
+  </svg>
+);

package/src/assets/icons/PointerVertical.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const PointerVerticalIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 10 20"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M1.414 11.414a2 2 0 0 1 0-2.828L10 0v20z"
+    />
+  </svg>
+);

package/src/assets/icons/Send.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const SendIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M5.105 7.59c-1.092-1.712.764-3.773 2.58-2.865l10.973 5.486c1.474.737 1.474 2.84 0 3.578L7.685 19.276c-1.816.907-3.672-1.154-2.58-2.865L7.92 12zM17.764 12 6.79 6.513l2.815 4.411a2 2 0 0 1 0 2.152l-2.815 4.41z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/assets/icons/Strikethrough.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const StrikethroughIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M3.833 13.624a.68.68 0 0 1-.498-.2.68.68 0 0 1-.202-.5q0-.297.202-.499.201-.2.498-.2h16.334q.297 0 .498.2.202.202.202.5a.68.68 0 0 1-.202.498q-.201.201-.498.201zm7.18-3.248V6.983H6.929a.95.95 0 0 1-.699-.288.95.95 0 0 1-.288-.7q0-.412.288-.703A.95.95 0 0 1 6.93 5h10.15q.411 0 .699.288a.95.95 0 0 1 .288.7q0 .413-.288.704a.95.95 0 0 1-.7.291h-4.083v3.393zm0 5.097h1.983v2.54a.95.95 0 0 1-.288.7.95.95 0 0 1-.7.287.96.96 0 0 1-.703-.29.96.96 0 0 1-.292-.706z"
+    />
+  </svg>
+);

package/src/assets/icons/TextColor.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+  textColor?: string;
+}
+
+export const TextColorIcon = ({ textColor, ...props }: Props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      d="M7.40305 17C7.11588 17 6.8903 16.8807 6.7263 16.6423C6.56213 16.4039 6.53072 16.1495 6.63205 15.879L11.282 4.01925C11.3397 3.86292 11.4365 3.73725 11.5723 3.64225C11.7083 3.54742 11.8577 3.5 12.0205 3.5H12.651C12.8242 3.5 12.9762 3.54742 13.107 3.64225C13.2377 3.73725 13.3319 3.86292 13.3896 4.01925L18.0453 15.8655C18.1466 16.1423 18.1136 16.4007 17.9463 16.6405C17.779 16.8802 17.5517 17 17.2646 17C17.0891 17 16.9269 16.951 16.778 16.853C16.6294 16.7548 16.523 16.6179 16.4588 16.4423L15.3205 13.3808H9.34355L8.1743 16.4672C8.11013 16.6366 8.00947 16.7677 7.8723 16.8605C7.73513 16.9535 7.57872 17 7.40305 17ZM9.8703 11.9H14.7628L12.3858 5.6H12.2666L9.8703 11.9Z"
+      fill="currentColor"
+    />
+    <path
+      d="M3.09457 23.741C3.2669 23.9135 3.48198 23.9998 3.73982 23.9998H20.9318C21.1896 23.9998 21.4047 23.9135 21.5771 23.741C21.7496 23.5687 21.8358 23.3537 21.8358 23.096V21.1728C21.8358 20.9151 21.7496 20.7001 21.5771 20.5278C21.4047 20.3553 21.1896 20.269 20.9318 20.269H3.73982C3.48198 20.269 3.2669 20.3553 3.09457 20.5278C2.92207 20.7001 2.83582 20.9151 2.83582 21.1728V23.096C2.83582 23.3537 2.92207 23.5687 3.09457 23.741Z"
+      fill={textColor || "black"}
+    />
+  </svg>
+);

package/src/assets/icons/Today.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const TodayIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M9.184 9.672v-.945h5.628v.945h-2.27V16H11.45V9.672z"
+    />
+  </svg>
+);

package/src/assets/icons/Underlined.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const UnderlinedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth={0.2}
+      d="M6.872 18.89q.212.21.518.21h9.892q.306 0 .518-.21.21-.212.21-.518a.7.7 0 0 0-.21-.518.7.7 0 0 0-.518-.21H7.39a.7.7 0 0 0-.518.209.7.7 0 0 0-.21.518q0 .308.21.519ZM8.353 5.155a.83.83 0 0 0-.264.615v5.851c0 1.348.371 2.434 1.123 3.248.754.815 1.8 1.218 3.124 1.218s2.37-.403 3.124-1.218c.752-.814 1.123-1.9 1.123-3.248v-5.85a.84.84 0 0 0-.255-.615.84.84 0 0 0-.613-.256.87.87 0 0 0-.62.255.83.83 0 0 0-.265.615V11.7c0 .828-.22 1.48-.65 1.968-.427.484-1.037.732-1.844.732s-1.417-.248-1.844-.732c-.43-.487-.65-1.14-.65-1.968V5.77a.84.84 0 0 0-.255-.614.84.84 0 0 0-.613-.256.87.87 0 0 0-.62.255Z"
+    />
+  </svg>
+);

package/src/assets/icons/Upload.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+export const UploadIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M19.502 13.6a.9.9 0 0 1 .9.9v3.333a2.57 2.57 0 0 1-2.567 2.567H6.169a2.57 2.57 0 0 1-2.555-2.313l-.012-.254V14.5a.9.9 0 0 1 1.795-.092l.005.092v3.333l.015.15a.766.766 0 0 0 .752.617h11.666a.766.766 0 0 0 .767-.767V14.5a.9.9 0 0 1 .9-.9"
+    />
+    <path
+      fill="currentColor"
+      d="M12.041 3.602h.008q.078.003.151.02.006 0 .01.003c.17.04.32.127.436.247l4.159 4.158.061.069a.9.9 0 0 1-1.265 1.266l-.069-.062-2.63-2.63V14.5a.9.9 0 0 1-1.8 0V6.672l-2.63 2.63-.069.063A.901.901 0 0 1 7.198 8.03l4.167-4.167.069-.061a.9.9 0 0 1 .432-.192l.027-.004a1 1 0 0 1 .109-.006z"
+    />
+  </svg>
+);

package/src/assets/icons/View.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const ViewIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M21.338 11.788A10.43 10.43 0 0 0 12 5.124a10.43 10.43 0 0 0-9.337 6.663.63.63 0 0 0 0 .425A10.43 10.43 0 0 0 12 18.875a10.43 10.43 0 0 0 9.337-6.662.62.62 0 0 0 0-.425M12 17.624c-3.312 0-6.812-2.456-8.081-5.625C5.188 8.831 8.688 6.375 12 6.375c3.313 0 6.813 2.456 8.081 5.625-1.268 3.169-4.768 5.625-8.081 5.625" />
+      <path d="M12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5m0 6.25a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5" />
+    </g>
+  </svg>
+);

package/src/assets/icons/ViewOff.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const ViewOffIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="m5.275 16.069.894-.888A8.8 8.8 0 0 1 3.919 12C5.188 8.831 8.688 6.375 12 6.375a7.7 7.7 0 0 1 2.5.45l.969-.975A9.2 9.2 0 0 0 12 5.125a10.43 10.43 0 0 0-9.337 6.663.63.63 0 0 0 0 .425 10 10 0 0 0 2.612 3.856" />
+      <path d="M9.5 11.831a2.5 2.5 0 0 1 2.313-2.312l1.13-1.138a3.75 3.75 0 0 0-4.58 4.582zM21.338 11.788a10.25 10.25 0 0 0-3.588-4.65l3-3.007-.881-.881L3.25 19.869l.881.881 3.188-3.187A9.56 9.56 0 0 0 12 18.875a10.43 10.43 0 0 0 9.337-6.662.62.62 0 0 0 0-.425M14.5 12a2.5 2.5 0 0 1-3.75 2.15l3.4-3.4A2.5 2.5 0 0 1 14.5 12M12 17.625a8.16 8.16 0 0 1-3.75-.988l1.588-1.587a3.75 3.75 0 0 0 5.218-5.219l1.794-1.793A9.1 9.1 0 0 1 20.081 12c-1.268 3.169-4.768 5.625-8.081 5.625" />
+    </g>
+  </svg>
+);

package/src/assets/icons/Warningfilled.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const WarningFilledIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12.163 3.52a2.57 2.57 0 0 1 1.94 1.091l.09.139.001.004 7.059 11.783.008.013.079.147a2.57 2.57 0 0 1-2.274 3.702H4.93a2.568 2.568 0 0 1-2.195-3.85l.007-.012L9.801 4.754l.002-.004.09-.139a2.57 2.57 0 0 1 2.105-1.097zm-.165 11.747a.9.9 0 0 0 0 1.8h.008l.092-.005a.9.9 0 0 0 0-1.79l-.092-.005zm0-6.667a.9.9 0 0 0-.9.9v3.333l.004.093a.9.9 0 0 0 1.792 0l.004-.093V9.5l-.004-.092a.9.9 0 0 0-.896-.808"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/assets/locales/en/translation.json

@@ -0,0 +1,156 @@
+{
+  "ui": {
+    "openAlt": "Open",
+    "closeAlt": "Close",
+    "clearAlt": "Clear",
+    "loadingState": {
+      "text": "Loading..."
+    },
+    "select": {
+      "closeAlt": "Close the menu",
+      "selectAll": "Select all",
+      "clearSelection": "Clear",
+      "allOption": "All",
+      "search": "Search",
+      "clearSearch": "Clear search"
+    },
+    "datePicker": {
+      "today": "Today",
+      "clear": "Clear",
+      "save": "Save",
+      "presets": {
+        "thisWeek": "This week",
+        "lastWeek": "Last week",
+        "thisAndLastWeek": "This & Last week",
+        "thisMonth": "This month",
+        "thisAndLastMonth": "This & Last month",
+        "thisYear": "This year",
+        "lastYear": "Last year",
+        "thisAndLastYear": "This & Last year",
+        "soFar": "So far"
+      },
+      "errors": {
+        "endDateBeforeStart": "End date cannot be before start date"
+      }
+    },
+    "modal": {
+      "closeBtn": "Close"
+    },
+    "autocomplete": {
+      "createNewBtn": "Create"
+    },
+    "password": {
+      "reveal": "Reveal password",
+      "hide": "Hide password"
+    },
+    "textEditor": {
+      "textStyle": {
+        "label": "Text style",
+        "normal": "Normal text",
+        "heading1": "Heading 1",
+        "heading2": "Heading 2",
+        "heading3": "Heading 3",
+        "heading4": "Heading 4",
+        "heading5": "Heading 5",
+        "heading6": "Heading 6"
+      },
+      "marks": {
+        "bold": "Bold",
+        "italic": "Italic",
+        "underline": "Underline",
+        "strikethrough": "Strikethrough"
+      },
+      "textAlign": {
+        "label": "Text align",
+        "left": "Left",
+        "center": "Center",
+        "right": "Right",
+        "justify": "Justify"
+      },
+      "link": {
+        "label": "Hyperlink",
+        "apply": "Apply",
+        "remove": "Remove",
+        "urlLabel": "URL",
+        "urlPlaceholder": "Enter the URL"
+      }
+    },
+    "tag": {
+      "dismiss": "Dismiss"
+    },
+    "clearInput": "Clear input",
+    "pagination": {
+      "nextBtn": "Next",
+      "backBtn": "Previous",
+      "firstBtn": "First",
+      "lastBtn": "Last",
+      "resultsPerPage": "Results per page"
+    },
+    "confirmation": {
+      "cancel": "Cancel",
+      "confirm": "Confirm"
+    },
+    "fileUpload": {
+      "emptyText": "Upload file",
+      "uploadText": "Drag & drop files here or",
+      "browse": "Browse",
+      "noFileUploaded": "No file uploaded",
+      "upload": "Upload",
+      "uploadFile": "Upload file",
+      "or": "or",
+      "removeFile": "Remove file",
+      "cancel": "Cancel"
+    },
+    "table": {
+      "column": "Column",
+      "show": "Show",
+      "configureColumns": "Configure columns"
+    }
+  },
+  "zodErrors": {
+    "required": "Required",
+    "invalid": "Invalid",
+    "string": {
+      "includes": "Must include \"{{text}}\"",
+      "startsWith": "Must start with \"{{text}}\"",
+      "endsWith": "Must end with \"{{text}}\"",
+      "constraint": "Invalid {{text}}",
+      "contains": "Must contain exactly {{count}} character(s)",
+      "containsAtLeast": "Must contain at least {{count}} character(s)",
+      "containsOver": "Must contain over {{count}} character(s)",
+      "containsAtMost": "Must contain at most {{count}} character(s)",
+      "containsUnder": "Must contain under {{count}} character(s)"
+    },
+    "array": {
+      "contains": "Array must contain exactly {{count}} element(s)",
+      "containsAtLeast": "Array must contain at least {{count}} element(s)",
+      "containsMoreThan": "Array must contain more than {{count}} element(s)",
+      "containsAtMost": "Array must contain at most {{count}} element(s)",
+      "containsLessThan": "Array must contain less than {{count}} element(s)"
+    },
+    "number": {
+      "exact": "Number must be exactly equal to {{number}}",
+      "greaterThanOrEqual": "Number must be greater than or equal to {{number}}",
+      "greaterThan": "Number must be greater than {{number}}",
+      "over": "Number must be over {{number}}",
+      "lessThanOrEqual": "Number must be less than or equal to {{number}}",
+      "lessThan": "Number must be less than {{number}}",
+      "multipleOf": "Number must be a multiple of {{multipleOf}}"
+    },
+    "date": {
+      "invalid": "Invalid date",
+      "exact": "Date must be exactly equal to {{date}}",
+      "greaterThanOrEqual": "Date must be greater than or equal to {{date}}",
+      "greaterThan": "Date must be greater than {{date}}",
+      "smallerThanOrEqual": "Date must be smaller than or equal to {{date}}",
+      "smallerThan": "Date must be smaller than {{date}}"
+    }
+  },
+  "sharedErrors": {
+    "dataValidation": "An error occurred while validating the data",
+    "internalError": "An internal error occurred. This is most likely a bug on our end. Please try again later.",
+    "networkError": "A network error occurred. Are you connected to the internet?",
+    "canceledError": "The request was canceled.",
+    "unknownError": "An unknown error occurred. Please try again later."
+  }
+}

package/src/assets/locales/sl/translation.json

@@ -0,0 +1,152 @@
+{
+  "ui": {
+    "openAlt": "Odpri",
+    "closeAlt": "Zapri",
+    "clearAlt": "Sprazni",
+    "loadingState": {
+      "text": "Nalaganje..."
+    },
+    "select": {
+      "closeAlt": "Zapri meni",
+      "selectAll": "Izberi vse",
+      "clearSelection": "Sprazni",
+      "allOption": "Vse",
+      "search": "Išči",
+      "clearSearch": "Sprazni iskanje"
+    },
+    "datePicker": {
+      "today": "Danes",
+      "clear": "Sprazni",
+      "save": "Shrani",
+      "presets": {
+        "thisWeek": "Ta teden",
+        "lastWeek": "Prejšnji teden",
+        "thisAndLastWeek": "Ta in prejšnji teden",
+        "thisMonth": "Ta mesec",
+        "thisAndLastMonth": "Ta in prejšnji mesec",
+        "thisYear": "Ta leto",
+        "lastYear": "Prejšnje leto",
+        "thisAndLastYear": "Ta in prejšnje leto",
+        "soFar": "Od začetka"
+      },
+      "errors": {
+        "endDateBeforeStart": "Datum konca ne more biti pred datumom začetka"
+      }
+    },
+    "modal": {
+      "closeBtn": "Zapri"
+    },
+    "autocomplete": {
+      "createNewBtn": "Ustvari"
+    },
+    "password": {
+      "reveal": "Prikaži geslo",
+      "hide": "Skrij geslo"
+    },
+    "textEditor": {
+      "textStyle": {
+        "label": "Vrsta besedila",
+        "normal": "Normalni tekst",
+        "heading1": "Naslov 1",
+        "heading2": "Naslov 2",
+        "heading3": "Naslov 3",
+        "heading4": "Naslov 4",
+        "heading5": "Naslov 5",
+        "heading6": "Naslov 6"
+      },
+      "marks": {
+        "bold": "Krepko",
+        "italic": "Poševno",
+        "underline": "Podčrtano",
+        "strikethrough": "Prečrtano"
+      },
+      "textAlign": {
+        "label": "Poravnava besedila",
+        "left": "Levo",
+        "center": "Sredina",
+        "right": "Desno",
+        "justify": "Obojestransko"
+      },
+      "link": {
+        "label": "Povezava",
+        "apply": "Ustvari",
+        "remove": "Odstrani",
+        "urlLabel": "URL",
+        "urlPlaceholder": "Vnesite URL"
+      }
+    },
+    "pagination": {
+      "nextBtn": "Naprej",
+      "backBtn": "Nazaj",
+      "firstBtn": "Prva",
+      "lastBtn": "Zadnja",
+      "resultsPerPage": "Rezultatov na stran"
+    },
+    "confirmation": {
+      "cancel": "Prekliči",
+      "confirm": "Potrdi"
+    },
+    "fileUpload": {
+      "emptyText": "Naloži datoteko",
+      "uploadText": "Povlecite datoteke sem ali",
+      "browse": "Izberi",
+      "noFileUploaded": "Ni datotek",
+      "upload": "Naloži",
+      "uploadFile": "Naloži datoteko",
+      "or": "ali",
+      "removeFile": "Odstrani datoteko",
+      "cancel": "Prekliči"
+    },
+    "table": {
+      "column": "Stolpec",
+      "show": "Prikaži",
+      "configureColumns": "Nastavi stolpce"
+    }
+  },
+  "zodErrors": {
+    "required": "Obvezno",
+    "invalid": "Neveljavno",
+    "string": {
+      "includes": "Mora vključevati \"{{text}}\"",
+      "startsWith": "Se mora začeti z \"{{text}}\"",
+      "endsWith": "Se mora končati z \"{{text}}\"",
+      "constraint": "Neveljaven {{text}}",
+      "contains": "Mora vsebovati natančno {{count}} znak(ov)",
+      "containsAtLeast": "Mora vsebovati vsaj {{count}} znak(ov)",
+      "containsOver": "Mora vsebovati več kot {{count}} znak(ov)",
+      "containsAtMost": "Mora vsebovati največ {{count}} znak(ov)",
+      "containsUnder": "Mora vsebovati manj kot {{count}} znak(ov)"
+    },
+    "array": {
+      "contains": "Polje mora vsebovati natančno {{count}} element(ov)",
+      "containsAtLeast": "Polje mora vsebovati vsaj {{count}} element(ov)",
+      "containsMoreThan": "Polje mora vsebovati več kot {{count}} element(ov)",
+      "containsAtMost": "Polje mora vsebovati največ {{count}} element(ov)",
+      "containsLessThan": "Polje mora vsebovati manj kot {{count}} element(ov)"
+    },
+    "number": {
+      "exact": "Število mora biti natančno enako {{number}}",
+      "greaterThanOrEqual": "Število mora biti večje ali enako {{number}}",
+      "greaterThan": "Število mora biti večje od {{number}}",
+      "over": "Število mora biti nad {{number}}",
+      "lessThanOrEqual": "Število mora biti manjše ali enako {{number}}",
+      "lessThan": "Število mora biti manjše od {{number}}",
+      "multipleOf": "Število mora biti večkratnik števila {{multipleOf}}"
+    },
+    "date": {
+      "invalid": "Neveljaven datum",
+      "exact": "Datum mora biti natančno enak {{date}}",
+      "greaterThanOrEqual": "Datum mora biti večji ali enak {{date}}",
+      "greaterThan": "Datum mora biti večji od {{date}}",
+      "smallerThanOrEqual": "Datum mora biti manjši ali enak {{date}}",
+      "smallerThan": "Datum mora biti manjši od {{date}}"
+    }
+  },
+  "sharedErrors": {
+    "dataValidation": "Pri preverjanju podatkov je prišlo do napake",
+    "internalError": "Prišlo je do notranje napake. ",
+    "networkError": "Prišlo je do napake v omrežju. ",
+    "canceledError": "Zahteva je bila preklicana.",
+    "unknownError": "Prišlo je do neznane napake. "
+  }
+}

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,29 @@
+import type { ReactElement } from "react";
+import type { MenuItemProps } from "react-aria-components";
+
+import { MenuDesktop } from "#ui/components/Menu/MenuDesktop";
+import { MenuMobile } from "#ui/components/Menu/MenuMobile";
+import { useBreakpoint } from "#ui/hooks/useBreakpoint";
+
+export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children"> {
+  label: string;
+  content?: string | ReactElement;
+  children?: MenuItem[];
+}
+
+export interface MenuProps {
+  trigger: ReactElement;
+  items: MenuItem[];
+  triggerOnHover?: boolean;
+  closeDelay?: number;
+}
+
+export const Menu = (props: MenuProps) => {
+  const isDesktop = useBreakpoint("md");
+
+  if (isDesktop) {
+    return <MenuDesktop {...props} />;
+  }
+
+  return <MenuMobile {...props} />;
+};