@native-systems/ui 1.1.1 → 1.2.0

package/dist/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
+var react = require('@headlessui/react');
 var utility = require('@native-systems/utility');
 
 function _interopNamespaceDefault(e) {
@@ -80,7 +81,7 @@ function ChevronDoubleLeftIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef$5 = /*#__PURE__*/ React__namespace.forwardRef(
+const ForwardRef$7 = /*#__PURE__*/ React__namespace.forwardRef(
   ChevronDoubleLeftIcon
 );
 
@@ -115,10 +116,43 @@ function ChevronDoubleRightIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef$4 = /*#__PURE__*/ React__namespace.forwardRef(
+const ForwardRef$6 = /*#__PURE__*/ React__namespace.forwardRef(
   ChevronDoubleRightIcon
 );
 
+function ChevronDownIcon({ title, titleId, ...props }, svgRef) {
+  return /*#__PURE__*/ React__namespace.createElement(
+    'svg',
+    Object.assign(
+      {
+        'xmlns': 'http://www.w3.org/2000/svg',
+        'viewBox': '0 0 20 20',
+        'fill': 'currentColor',
+        'aria-hidden': 'true',
+        'data-slot': 'icon',
+        'ref': svgRef,
+        'aria-labelledby': titleId,
+      },
+      props
+    ),
+    title
+      ? /*#__PURE__*/ React__namespace.createElement(
+          'title',
+          {
+            id: titleId,
+          },
+          title
+        )
+      : null,
+    /*#__PURE__*/ React__namespace.createElement('path', {
+      fillRule: 'evenodd',
+      d: 'M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z',
+      clipRule: 'evenodd',
+    })
+  );
+}
+const ForwardRef$5 = /*#__PURE__*/ React__namespace.forwardRef(ChevronDownIcon);
+
 function ChevronLeftIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React__namespace.createElement(
     'svg',
@@ -150,7 +184,7 @@ function ChevronLeftIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef$3 = /*#__PURE__*/ React__namespace.forwardRef(ChevronLeftIcon);
+const ForwardRef$4 = /*#__PURE__*/ React__namespace.forwardRef(ChevronLeftIcon);
 
 function ChevronRightIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React__namespace.createElement(
@@ -183,7 +217,7 @@ function ChevronRightIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef$2 =
+const ForwardRef$3 =
   /*#__PURE__*/ React__namespace.forwardRef(ChevronRightIcon);
 
 function Pagination({
@@ -208,7 +242,7 @@ function Pagination({
         'aria-label': 'Zur ersten Seite',
         'className':
           'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsxRuntime.jsx(ForwardRef$5, {
+        'children': jsxRuntime.jsx(ForwardRef$7, {
           className: 'w-5 h-auto',
         }),
       }),
@@ -218,7 +252,7 @@ function Pagination({
         'aria-label': 'Zur vorherigen Seite',
         'className':
           'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsxRuntime.jsx(ForwardRef$3, {
+        'children': jsxRuntime.jsx(ForwardRef$4, {
           className: 'w-5 h-auto',
         }),
       }),
@@ -233,7 +267,7 @@ function Pagination({
         'aria-label': 'Zur nächsten Seite',
         'className':
           'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsxRuntime.jsx(ForwardRef$2, {
+        'children': jsxRuntime.jsx(ForwardRef$3, {
           className: 'w-5 h-5',
         }),
       }),
@@ -248,7 +282,7 @@ function Pagination({
         'aria-label': 'Zur letzten Seite',
         'className':
           'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsxRuntime.jsx(ForwardRef$4, {
+        'children': jsxRuntime.jsx(ForwardRef$6, {
           className: 'w-5 h-5',
         }),
       }),
@@ -256,31 +290,40 @@ function Pagination({
   });
 }
 
-function CancelButton({ onClick }) {
-  return jsxRuntime.jsx('button', {
-    type: 'button',
-    className:
-      'px-5 py-1.5 isolate text-sm font-semibold text-white bg-zinc-500 rounded-lg transition-colors cursor-pointer hover:bg-zinc-400 ',
-    onClick: onClick,
-    children: 'Cancel',
-  });
-}
-
-function ErrorDisplay({ error }) {
-  if (!error) return null;
-  return jsxRuntime.jsx('div', {
-    className:
-      'error-display p-4 mb-4 text-red-700 bg-red-100 border rounded border-red-400',
-    children: error,
-  });
-}
-
-function HowToCloseText() {
-  return jsxRuntime.jsx('p', {
-    className: 'absolute top-full mt-2 text-xs text-black dark:text-white',
-    children: 'Schließen: außerhalb klicken oder die Esc-Taste drücken',
-  });
+function CheckIcon({ title, titleId, ...props }, svgRef) {
+  return /*#__PURE__*/ React__namespace.createElement(
+    'svg',
+    Object.assign(
+      {
+        'xmlns': 'http://www.w3.org/2000/svg',
+        'fill': 'none',
+        'viewBox': '0 0 24 24',
+        'strokeWidth': 1.5,
+        'stroke': 'currentColor',
+        'aria-hidden': 'true',
+        'data-slot': 'icon',
+        'ref': svgRef,
+        'aria-labelledby': titleId,
+      },
+      props
+    ),
+    title
+      ? /*#__PURE__*/ React__namespace.createElement(
+          'title',
+          {
+            id: titleId,
+          },
+          title
+        )
+      : null,
+    /*#__PURE__*/ React__namespace.createElement('path', {
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      d: 'm4.5 12.75 6 6 9-13.5',
+    })
+  );
 }
+const ForwardRef$2 = /*#__PURE__*/ React__namespace.forwardRef(CheckIcon);
 
 function EyeSlashIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React__namespace.createElement(
@@ -357,6 +400,186 @@ function EyeIcon({ title, titleId, ...props }, svgRef) {
 }
 const ForwardRef = /*#__PURE__*/ React__namespace.forwardRef(EyeIcon);
 
+function r(e) {
+  var t,
+    f,
+    n = '';
+  if ('string' == typeof e || 'number' == typeof e) n += e;
+  else if ('object' == typeof e)
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0; t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += ' '), (n += f));
+    } else for (f in e) e[f] && (n && (n += ' '), (n += f));
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = '', o = arguments.length; f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += ' '), (n += t));
+  return n;
+}
+
+function countryCodeToFlag(countryCode) {
+  return countryCode
+    .toUpperCase()
+    .replace(/./g, (char) =>
+      String.fromCodePoint(0x1f1e6 + char.charCodeAt(0) - 65)
+    );
+}
+function LocaleSelect({
+  locales,
+  value,
+  set,
+  className,
+  buttonClassName,
+  listClassName,
+  disabled,
+  ariaLabel = 'Select language',
+}) {
+  const selected = React.useMemo(() => {
+    var _locales_find, _ref;
+    return (_ref =
+      (_locales_find = locales.find((l) => l.locale === value)) !== null &&
+      _locales_find !== void 0
+        ? _locales_find
+        : locales[0]) !== null && _ref !== void 0
+      ? _ref
+      : null;
+  }, [locales, value]);
+  if (!locales.length) return null;
+  var _selected_locale;
+  return jsxRuntime.jsx('div', {
+    className: clsx('relative inline-block', className),
+    children: jsxRuntime.jsx(react.Listbox, {
+      value:
+        (_selected_locale =
+          selected === null || selected === void 0
+            ? void 0
+            : selected.locale) !== null && _selected_locale !== void 0
+          ? _selected_locale
+          : null,
+      onChange: (nextLocale) => {
+        set(nextLocale);
+      },
+      disabled: disabled,
+      children: ({ open }) => {
+        var _selected_label;
+        return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [
+            jsxRuntime.jsxs(react.ListboxButton, {
+              'aria-label': ariaLabel,
+              'className': clsx(
+                'inline-flex items-center gap-2 px-3 py-2 text-sm border rounded-md',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+                buttonClassName
+              ),
+              'children': [
+                jsxRuntime.jsx('span', {
+                  'aria-hidden': 'true',
+                  'className': 'text-base leading-none',
+                  'children': selected
+                    ? countryCodeToFlag(selected.countryCode)
+                    : '🏳️',
+                }),
+                jsxRuntime.jsx('span', {
+                  className: 'whitespace-nowrap',
+                  children:
+                    (_selected_label =
+                      selected === null || selected === void 0
+                        ? void 0
+                        : selected.label) !== null && _selected_label !== void 0
+                      ? _selected_label
+                      : '',
+                }),
+                jsxRuntime.jsx(ForwardRef$5, {
+                  'aria-hidden': 'true',
+                  'className': 'size-4 ml-1',
+                }),
+              ],
+            }),
+            jsxRuntime.jsx(react.Transition, {
+              as: React.Fragment,
+              show: open,
+              enter: 'transition ease-out duration-100',
+              enterFrom: 'opacity-0 translate-y-1',
+              enterTo: 'opacity-100 translate-y-0',
+              leave: 'transition ease-in duration-75',
+              leaveFrom: 'opacity-100 translate-y-0',
+              leaveTo: 'opacity-0 translate-y-1',
+              children: jsxRuntime.jsx(react.ListboxOptions, {
+                className: clsx(
+                  'z-50 absolute min-w-[12rem] mt-2 overflow-hidden bg-white border rounded-md shadow-lg focus:outline-none',
+                  listClassName
+                ),
+                children: locales.map((opt) =>
+                  jsxRuntime.jsx(
+                    react.ListboxOption,
+                    {
+                      value: opt.locale,
+                      className: ({ focus }) =>
+                        clsx(
+                          'cursor-pointer select-none px-3 py-2 text-sm',
+                          focus && 'bg-black/5'
+                        ),
+                      children: ({ selected: isSelected }) =>
+                        jsxRuntime.jsxs('div', {
+                          className: 'flex items-center gap-2',
+                          children: [
+                            jsxRuntime.jsx('span', {
+                              'aria-hidden': 'true',
+                              'className': 'text-base leading-none',
+                              'children': countryCodeToFlag(opt.countryCode),
+                            }),
+                            jsxRuntime.jsx('span', {
+                              className: 'flex-1',
+                              children: opt.label,
+                            }),
+                            isSelected &&
+                              jsxRuntime.jsx(ForwardRef$2, {
+                                'aria-hidden': 'true',
+                                'className': 'size-4',
+                              }),
+                          ],
+                        }),
+                    },
+                    opt.locale
+                  )
+                ),
+              }),
+            }),
+          ],
+        });
+      },
+    }),
+  });
+}
+
+function CancelButton({ onClick }) {
+  return jsxRuntime.jsx('button', {
+    type: 'button',
+    className:
+      'px-5 py-1.5 isolate text-sm font-semibold text-white bg-zinc-500 rounded-lg transition-colors cursor-pointer hover:bg-zinc-400 ',
+    onClick: onClick,
+    children: 'Cancel',
+  });
+}
+
+function ErrorDisplay({ error }) {
+  if (!error) return null;
+  return jsxRuntime.jsx('div', {
+    className:
+      'error-display p-4 mb-4 text-red-700 bg-red-100 border rounded border-red-400',
+    children: error,
+  });
+}
+
+function HowToCloseText() {
+  return jsxRuntime.jsx('p', {
+    className: 'absolute top-full mt-2 text-xs text-black dark:text-white',
+    children: 'Schließen: außerhalb klicken oder die Esc-Taste drücken',
+  });
+}
+
 function InputField({
   id,
   label,
@@ -424,25 +647,6 @@ function InputField({
   });
 }
 
-function r(e) {
-  var t,
-    f,
-    n = '';
-  if ('string' == typeof e || 'number' == typeof e) n += e;
-  else if ('object' == typeof e)
-    if (Array.isArray(e)) {
-      var o = e.length;
-      for (t = 0; t < o; t++)
-        e[t] && (f = r(e[t])) && (n && (n += ' '), (n += f));
-    } else for (f in e) e[f] && (n && (n += ' '), (n += f));
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = '', o = arguments.length; f < o; f++)
-    (e = arguments[f]) && (t = r(e)) && (n && (n += ' '), (n += t));
-  return n;
-}
-
 function LoadingSpinner({ className, innerClassName }) {
   return jsxRuntime.jsx('div', {
     className: clsx(
@@ -493,10 +697,12 @@ var Util = /*#__PURE__*/ Object.freeze({
   HowToCloseText: HowToCloseText,
   InputField: InputField,
   LoadingSpinner: LoadingSpinner,
+  LocaleSelect: LocaleSelect,
   MainContentFrame: MainContentFrame,
   Pagination: Pagination,
   SaveButton: SaveButton,
   Textarea: Textarea,
+  countryCodeToFlag: countryCodeToFlag,
 });
 
 const SigninForm = ({
@@ -707,6 +913,7 @@ exports.ErrorDisplay = ErrorDisplay;
 exports.HowToCloseText = HowToCloseText;
 exports.InputField = InputField;
 exports.LoadingSpinner = LoadingSpinner;
+exports.LocaleSelect = LocaleSelect;
 exports.MainContentFrame = MainContentFrame;
 exports.Pagination = Pagination;
 exports.SaveButton = SaveButton;
@@ -714,5 +921,6 @@ exports.SigninForm = SigninForm;
 exports.SigninLayout = SigninLayout;
 exports.TemplateParserProvider = TemplateParserProvider;
 exports.Textarea = Textarea;
+exports.countryCodeToFlag = countryCodeToFlag;
 exports.default = index;
 exports.useTemplateParser = useTemplateParser;

package/dist/index.d.ts

@@ -21,6 +21,26 @@ declare module "@native-systems/ui" {
     export function Pagination({ currentPage, totalPages, hasPrevPage, hasNextPage, goToFirstPage, goToPreviousPage, goToNextPage, goToLastPage, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
 }
 
+declare module "@native-systems/ui" {
+    export type LocaleSelectOption = {
+        locale: string;
+        countryCode: string;
+        label: string;
+    };
+    type LocaleSelectProps = {
+        locales: Array<LocaleSelectOption>;
+        value: string | null | undefined;
+        set: (locale: string) => void;
+        className?: string;
+        buttonClassName?: string;
+        listClassName?: string;
+        disabled?: boolean;
+        ariaLabel?: string;
+    };
+    export function countryCodeToFlag(countryCode: string): string;
+    export function LocaleSelect({ locales, value, set, className, buttonClassName, listClassName, disabled, ariaLabel, }: LocaleSelectProps): import("react/jsx-runtime").JSX.Element;
+}
+
 declare module "@native-systems/ui" {
     type CancelButtonProps = {
         onClick: () => void;
@@ -144,6 +164,8 @@ declare module "@native-systems/ui" {
         };
         MainContentFrame: typeof Util.MainContentFrame;
         Pagination: typeof Util.Pagination;
+        LocaleSelect: typeof Util.LocaleSelect;
+        countryCodeToFlag: typeof Util.countryCodeToFlag;
         CancelButton: typeof Util.CancelButton;
         ErrorDisplay: typeof Util.ErrorDisplay;
         HowToCloseText: typeof Util.HowToCloseText;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/util/layout/MainContentFrame.tsx","src/components/util/widgets/Pagination.tsx","src/components/util/views/CancelButton.tsx","src/components/util/views/ErrorDisplay.tsx","src/components/util/views/HowToCloseText.tsx","src/components/util/views/Input.tsx","src/components/util/views/LoadingSpinner.tsx","src/components/util/views/SaveButton.tsx","src/components/util/views/Textarea.tsx","src/components/auth/widgets/SigninForm.tsx","src/components/auth/layout/SigninLayout.tsx","src/context/TemplateParserContext.tsx","src/index.ts"],"names":[],"mappings":";IAAA,OAAO,EAAE,SAAS,EAAE,cAAc;IAElC,KAAK,qBAAqB,GAAG;QAC3B,QAAQ,EAAE,SAAS,CAAC;KACrB,CAAC;IAEF,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,qBAAqB,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAQ5D;IAED,OAAO,EAAE,gBAAgB,EAAE,CAAC;;;;ICX5B,KAAK,eAAe,GAAG;QACrB,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,WAAW,EAAE,OAAO,CAAC;QACrB,WAAW,EAAE,OAAO,CAAC;QACrB,aAAa,EAAE,MAAM,IAAI,CAAC;QAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;KAC1C,CAAC;IAEF,MAAM,UAAU,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,EAAE,eAAe,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CA4CjB;;;;ICrED,KAAK,iBAAiB,GAAG;QACvB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IAEF,SAAS,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAUnD;IAED,OAAO,EAAE,YAAY,EAAE,CAAC;;;;IChBxB,KAAK,iBAAiB,GAAG;QACvB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;IAEF,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,iBAAiB,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAQjD;IAED,OAAO,EAAE,YAAY,EAAE,CAAC;;;;ICdxB,SAAS,cAAc,IAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAMtB;IAED,OAAO,EAAE,cAAc,EAAE,CAAC;;;;ICJ1B,KAAK,eAAe,GAAG;QACrB,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,QAAQ,EAAE,GAAG,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IAEF,MAAM,UAAU,UAAU,CAAC,EACzB,EAAE,EACF,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,IAAI,EACJ,QAAgB,EAChB,QAAQ,EACR,cAAsB,EACtB,eAAuB,GACxB,EAAE,eAAe,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAwDjB;;;;IChFD,KAAK,mBAAmB,GAAG;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IAEF,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,mBAAmB,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAoBzE;IAED,OAAO,EAAE,cAAc,EAAE,CAAC;;;;IC3B1B,KAAK,eAAe,GAAG;QACrB,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IAEF,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAWnE;IAED,OAAO,EAAE,UAAU,EAAE,CAAC;;;;ICnBtB,KAAK,aAAa,CAAC,CAAC,IAAI;QACtB,KAAK,EAAE,CAAC,CAAC;QACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;QAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IAEF,SAAS,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EAClC,KAAK,EACL,QAAQ,EACR,IAAQ,GACT,EAAE,aAAa,CAAC,CAAC,CAAC,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAWlB;IAED,OAAO,EAAE,QAAQ,EAAE,CAAC;;;;;;;;ICdpB,KAAK,gBAAgB,GAAG;QACtB,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;QACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;QAChC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KAC5C,CAAC;IAEF,MAAM,CAAC,MAAM,UAAU,EAAA,CAAA,EAAA,OAAA,EAAA,QAAA,EAAA,YAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,EAAuE,gBAAgB,KAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAqE7G,CAAC;;;;;;;;IClFF,UAAU,iBAAiB;QACzB,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;QACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;QACpD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;KAC3C;IAED,MAAM,UAAU,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,UAAU,EACV,gBAAgB,GACjB,EAAE,iBAAiB,GAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OAAA,CAyBnB;;;;IC/CD,OAAO,EAAiB,KAAK,SAAS,EAAsB,cAAc;IAE1E,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,gCAAgC;IAEjC,KAAK,0BAA0B,GAAG;QAChC,KAAK,EAAE,SAAS,CAAC;QACjB,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KAC1D,CAAC;IAOF,MAAM,MAAM,2BAA2B,GAAG;QACxC,cAAc,EAAE,WAAW,CAAC;QAC5B,QAAQ,EAAE,SAAS,CAAC;KACrB,CAAC;IAEF,MAAM,CAAC,MAAM,sBAAsB,EAAA,CAAA,KAAA,EAAW,2BAA2B,KAAA,OAAA,mBAAA,EAAA,GAAA,CAAA,OA+CxE,CAAC;IAEF,MAAM,CAAC,MAAM,iBAAiB,EAAA,MAAA,0BAQ7B,CAAC;;;;IC/EF,OAAO,KAAK,EAAE,2BAA0B;IACxC,OAAO,KAAK,IAAI,2BAA0B;IAC1C,OAAO,KAAK,GAAG,2BAAkB;;;;;;;;;;;;;;;;;;;;;;;;;IAEjC,eAAA,QAAA,CAIE","file":"index.d.ts","sourceRoot":".."}
+{"version":3,"sources":["src/components/util/layout/MainContentFrame.tsx","src/components/util/widgets/Pagination.tsx","src/components/util/widgets/LocaleSelect.tsx","src/components/util/views/CancelButton.tsx","src/components/util/views/ErrorDisplay.tsx","src/components/util/views/HowToCloseText.tsx","src/components/util/views/Input.tsx","src/components/util/views/LoadingSpinner.tsx","src/components/util/views/SaveButton.tsx","src/components/util/views/Textarea.tsx","src/components/auth/widgets/SigninForm.tsx","src/components/auth/layout/SigninLayout.tsx","src/context/TemplateParserContext.tsx","src/index.ts"],"names":[],"mappings":"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","file":"index.d.ts","sourceRoot":".."}

package/dist/index.esm.js

@@ -1,7 +1,21 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useState, createContext, useRef, useContext } from 'react';
+import {
+  useMemo,
+  Fragment as Fragment$1,
+  useState,
+  createContext,
+  useRef,
+  useContext,
+} from 'react';
 import { useForm } from 'react-hook-form';
+import {
+  Listbox,
+  ListboxButton,
+  Transition,
+  ListboxOptions,
+  ListboxOption,
+} from '@headlessui/react';
 import {
   PatternCompiler,
   eqPlugin,
@@ -57,7 +71,7 @@ function ChevronDoubleLeftIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef$5 = /*#__PURE__*/ React.forwardRef(ChevronDoubleLeftIcon);
+const ForwardRef$7 = /*#__PURE__*/ React.forwardRef(ChevronDoubleLeftIcon);
 
 function ChevronDoubleRightIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React.createElement(
@@ -90,7 +104,40 @@ function ChevronDoubleRightIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef$4 = /*#__PURE__*/ React.forwardRef(ChevronDoubleRightIcon);
+const ForwardRef$6 = /*#__PURE__*/ React.forwardRef(ChevronDoubleRightIcon);
+
+function ChevronDownIcon({ title, titleId, ...props }, svgRef) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        'xmlns': 'http://www.w3.org/2000/svg',
+        'viewBox': '0 0 20 20',
+        'fill': 'currentColor',
+        'aria-hidden': 'true',
+        'data-slot': 'icon',
+        'ref': svgRef,
+        'aria-labelledby': titleId,
+      },
+      props
+    ),
+    title
+      ? /*#__PURE__*/ React.createElement(
+          'title',
+          {
+            id: titleId,
+          },
+          title
+        )
+      : null,
+    /*#__PURE__*/ React.createElement('path', {
+      fillRule: 'evenodd',
+      d: 'M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z',
+      clipRule: 'evenodd',
+    })
+  );
+}
+const ForwardRef$5 = /*#__PURE__*/ React.forwardRef(ChevronDownIcon);
 
 function ChevronLeftIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React.createElement(
@@ -123,7 +170,7 @@ function ChevronLeftIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef$3 = /*#__PURE__*/ React.forwardRef(ChevronLeftIcon);
+const ForwardRef$4 = /*#__PURE__*/ React.forwardRef(ChevronLeftIcon);
 
 function ChevronRightIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React.createElement(
@@ -156,7 +203,7 @@ function ChevronRightIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef$2 = /*#__PURE__*/ React.forwardRef(ChevronRightIcon);
+const ForwardRef$3 = /*#__PURE__*/ React.forwardRef(ChevronRightIcon);
 
 function Pagination({
   currentPage,
@@ -180,7 +227,7 @@ function Pagination({
         'aria-label': 'Zur ersten Seite',
         'className':
           'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsx(ForwardRef$5, {
+        'children': jsx(ForwardRef$7, {
           className: 'w-5 h-auto',
         }),
       }),
@@ -190,7 +237,7 @@ function Pagination({
         'aria-label': 'Zur vorherigen Seite',
         'className':
           'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsx(ForwardRef$3, {
+        'children': jsx(ForwardRef$4, {
           className: 'w-5 h-auto',
         }),
       }),
@@ -205,7 +252,7 @@ function Pagination({
         'aria-label': 'Zur nächsten Seite',
         'className':
           'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsx(ForwardRef$2, {
+        'children': jsx(ForwardRef$3, {
           className: 'w-5 h-5',
         }),
       }),
@@ -220,7 +267,7 @@ function Pagination({
         'aria-label': 'Zur letzten Seite',
         'className':
           'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsx(ForwardRef$4, {
+        'children': jsx(ForwardRef$6, {
           className: 'w-5 h-5',
         }),
       }),
@@ -228,31 +275,40 @@ function Pagination({
   });
 }
 
-function CancelButton({ onClick }) {
-  return jsx('button', {
-    type: 'button',
-    className:
-      'px-5 py-1.5 isolate text-sm font-semibold text-white bg-zinc-500 rounded-lg transition-colors cursor-pointer hover:bg-zinc-400 ',
-    onClick: onClick,
-    children: 'Cancel',
-  });
-}
-
-function ErrorDisplay({ error }) {
-  if (!error) return null;
-  return jsx('div', {
-    className:
-      'error-display p-4 mb-4 text-red-700 bg-red-100 border rounded border-red-400',
-    children: error,
-  });
-}
-
-function HowToCloseText() {
-  return jsx('p', {
-    className: 'absolute top-full mt-2 text-xs text-black dark:text-white',
-    children: 'Schließen: außerhalb klicken oder die Esc-Taste drücken',
-  });
+function CheckIcon({ title, titleId, ...props }, svgRef) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        'xmlns': 'http://www.w3.org/2000/svg',
+        'fill': 'none',
+        'viewBox': '0 0 24 24',
+        'strokeWidth': 1.5,
+        'stroke': 'currentColor',
+        'aria-hidden': 'true',
+        'data-slot': 'icon',
+        'ref': svgRef,
+        'aria-labelledby': titleId,
+      },
+      props
+    ),
+    title
+      ? /*#__PURE__*/ React.createElement(
+          'title',
+          {
+            id: titleId,
+          },
+          title
+        )
+      : null,
+    /*#__PURE__*/ React.createElement('path', {
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      d: 'm4.5 12.75 6 6 9-13.5',
+    })
+  );
 }
+const ForwardRef$2 = /*#__PURE__*/ React.forwardRef(CheckIcon);
 
 function EyeSlashIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React.createElement(
@@ -329,6 +385,186 @@ function EyeIcon({ title, titleId, ...props }, svgRef) {
 }
 const ForwardRef = /*#__PURE__*/ React.forwardRef(EyeIcon);
 
+function r(e) {
+  var t,
+    f,
+    n = '';
+  if ('string' == typeof e || 'number' == typeof e) n += e;
+  else if ('object' == typeof e)
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0; t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += ' '), (n += f));
+    } else for (f in e) e[f] && (n && (n += ' '), (n += f));
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = '', o = arguments.length; f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += ' '), (n += t));
+  return n;
+}
+
+function countryCodeToFlag(countryCode) {
+  return countryCode
+    .toUpperCase()
+    .replace(/./g, (char) =>
+      String.fromCodePoint(0x1f1e6 + char.charCodeAt(0) - 65)
+    );
+}
+function LocaleSelect({
+  locales,
+  value,
+  set,
+  className,
+  buttonClassName,
+  listClassName,
+  disabled,
+  ariaLabel = 'Select language',
+}) {
+  const selected = useMemo(() => {
+    var _locales_find, _ref;
+    return (_ref =
+      (_locales_find = locales.find((l) => l.locale === value)) !== null &&
+      _locales_find !== void 0
+        ? _locales_find
+        : locales[0]) !== null && _ref !== void 0
+      ? _ref
+      : null;
+  }, [locales, value]);
+  if (!locales.length) return null;
+  var _selected_locale;
+  return jsx('div', {
+    className: clsx('relative inline-block', className),
+    children: jsx(Listbox, {
+      value:
+        (_selected_locale =
+          selected === null || selected === void 0
+            ? void 0
+            : selected.locale) !== null && _selected_locale !== void 0
+          ? _selected_locale
+          : null,
+      onChange: (nextLocale) => {
+        set(nextLocale);
+      },
+      disabled: disabled,
+      children: ({ open }) => {
+        var _selected_label;
+        return jsxs(Fragment, {
+          children: [
+            jsxs(ListboxButton, {
+              'aria-label': ariaLabel,
+              'className': clsx(
+                'inline-flex items-center gap-2 px-3 py-2 text-sm border rounded-md',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+                buttonClassName
+              ),
+              'children': [
+                jsx('span', {
+                  'aria-hidden': 'true',
+                  'className': 'text-base leading-none',
+                  'children': selected
+                    ? countryCodeToFlag(selected.countryCode)
+                    : '🏳️',
+                }),
+                jsx('span', {
+                  className: 'whitespace-nowrap',
+                  children:
+                    (_selected_label =
+                      selected === null || selected === void 0
+                        ? void 0
+                        : selected.label) !== null && _selected_label !== void 0
+                      ? _selected_label
+                      : '',
+                }),
+                jsx(ForwardRef$5, {
+                  'aria-hidden': 'true',
+                  'className': 'size-4 ml-1',
+                }),
+              ],
+            }),
+            jsx(Transition, {
+              as: Fragment$1,
+              show: open,
+              enter: 'transition ease-out duration-100',
+              enterFrom: 'opacity-0 translate-y-1',
+              enterTo: 'opacity-100 translate-y-0',
+              leave: 'transition ease-in duration-75',
+              leaveFrom: 'opacity-100 translate-y-0',
+              leaveTo: 'opacity-0 translate-y-1',
+              children: jsx(ListboxOptions, {
+                className: clsx(
+                  'z-50 absolute min-w-[12rem] mt-2 overflow-hidden bg-white border rounded-md shadow-lg focus:outline-none',
+                  listClassName
+                ),
+                children: locales.map((opt) =>
+                  jsx(
+                    ListboxOption,
+                    {
+                      value: opt.locale,
+                      className: ({ focus }) =>
+                        clsx(
+                          'cursor-pointer select-none px-3 py-2 text-sm',
+                          focus && 'bg-black/5'
+                        ),
+                      children: ({ selected: isSelected }) =>
+                        jsxs('div', {
+                          className: 'flex items-center gap-2',
+                          children: [
+                            jsx('span', {
+                              'aria-hidden': 'true',
+                              'className': 'text-base leading-none',
+                              'children': countryCodeToFlag(opt.countryCode),
+                            }),
+                            jsx('span', {
+                              className: 'flex-1',
+                              children: opt.label,
+                            }),
+                            isSelected &&
+                              jsx(ForwardRef$2, {
+                                'aria-hidden': 'true',
+                                'className': 'size-4',
+                              }),
+                          ],
+                        }),
+                    },
+                    opt.locale
+                  )
+                ),
+              }),
+            }),
+          ],
+        });
+      },
+    }),
+  });
+}
+
+function CancelButton({ onClick }) {
+  return jsx('button', {
+    type: 'button',
+    className:
+      'px-5 py-1.5 isolate text-sm font-semibold text-white bg-zinc-500 rounded-lg transition-colors cursor-pointer hover:bg-zinc-400 ',
+    onClick: onClick,
+    children: 'Cancel',
+  });
+}
+
+function ErrorDisplay({ error }) {
+  if (!error) return null;
+  return jsx('div', {
+    className:
+      'error-display p-4 mb-4 text-red-700 bg-red-100 border rounded border-red-400',
+    children: error,
+  });
+}
+
+function HowToCloseText() {
+  return jsx('p', {
+    className: 'absolute top-full mt-2 text-xs text-black dark:text-white',
+    children: 'Schließen: außerhalb klicken oder die Esc-Taste drücken',
+  });
+}
+
 function InputField({
   id,
   label,
@@ -396,25 +632,6 @@ function InputField({
   });
 }
 
-function r(e) {
-  var t,
-    f,
-    n = '';
-  if ('string' == typeof e || 'number' == typeof e) n += e;
-  else if ('object' == typeof e)
-    if (Array.isArray(e)) {
-      var o = e.length;
-      for (t = 0; t < o; t++)
-        e[t] && (f = r(e[t])) && (n && (n += ' '), (n += f));
-    } else for (f in e) e[f] && (n && (n += ' '), (n += f));
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = '', o = arguments.length; f < o; f++)
-    (e = arguments[f]) && (t = r(e)) && (n && (n += ' '), (n += t));
-  return n;
-}
-
 function LoadingSpinner({ className, innerClassName }) {
   return jsx('div', {
     className: clsx(
@@ -465,10 +682,12 @@ var Util = /*#__PURE__*/ Object.freeze({
   HowToCloseText: HowToCloseText,
   InputField: InputField,
   LoadingSpinner: LoadingSpinner,
+  LocaleSelect: LocaleSelect,
   MainContentFrame: MainContentFrame,
   Pagination: Pagination,
   SaveButton: SaveButton,
   Textarea: Textarea,
+  countryCodeToFlag: countryCodeToFlag,
 });
 
 const SigninForm = ({
@@ -680,6 +899,7 @@ export {
   HowToCloseText,
   InputField,
   LoadingSpinner,
+  LocaleSelect,
   MainContentFrame,
   Pagination,
   SaveButton,
@@ -687,6 +907,7 @@ export {
   SigninLayout,
   TemplateParserProvider,
   Textarea,
+  countryCodeToFlag,
   index as default,
   useTemplateParser,
 };

package/package.json

@@ -10,7 +10,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "MIT",
   "private": false,
   "engines": {
@@ -60,6 +60,7 @@
   "dependencies": {
   },
   "devDependencies": {
+    "@headlessui/react": "^2.2.9",
     "@heroicons/react": "^2.1.5",
     "@native-systems/utility": "^2.1.0",
     "@rollup/plugin-commonjs": "^22.0.2",
@@ -88,8 +89,8 @@
     "@heroicons/react": "^2.1.5",
     "@native-systems/utility": "^2.1.0",
     "handlebars": "^4",
-    "react-hook-form": "^7",
     "react": ">=19",
-    "react-dom": ">=19"
+    "react-dom": ">=19",
+    "react-hook-form": "^7"
   }
 }