@mittwald/flow-react-components 0.2.0-alpha.61 → 0.2.0-alpha.611

package/dist/js/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs

@@ -0,0 +1,48 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import * as Aria from 'react-aria-components';
+import '../../../OverlayTrigger/components/MenuTrigger/MenuTrigger.mjs';
+import { OverlayTrigger } from '../../../OverlayTrigger/OverlayTrigger.mjs';
+import '../../../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import locales from '../../../../../../_virtual/_.locale.json@df0c8534e2e4f7c6c3d4365218df7347.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import 'react';
+import '@tabler/icons-react';
+import '../../../Icon/Icon.mjs';
+import '../../../../views/IconView.mjs';
+import { IconInfo } from '../../../Icon/components/icons/IconInfo.mjs';
+import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
+
+const ContextualHelpTrigger = flowComponent(
+  "ContextualHelpTrigger",
+  (props) => {
+    const { children, ...triggerProps } = props;
+    const stringFormatter = useLocalizedStringFormatter(locales);
+    const propsContext = {
+      Button: {
+        "aria-label": stringFormatter.format(
+          "contextualHelpButton.moreInformation"
+        ),
+        children: /* @__PURE__ */ jsx(IconInfo, {}),
+        size: "s",
+        variant: "plain",
+        ariaSlot: null
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      OverlayTrigger,
+      {
+        overlayType: "ContextualHelp",
+        ...triggerProps,
+        component: Aria.DialogTrigger,
+        children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
+      }
+    );
+  },
+  { type: "provider" }
+);
+
+export { ContextualHelpTrigger, ContextualHelpTrigger as default };
+//# sourceMappingURL=ContextualHelpTrigger.mjs.map

package/dist/js/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextualHelpTrigger.mjs","sources":["../../../../../../../../src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { OverlayTriggerProps } from \"@/components/OverlayTrigger\";\nimport { OverlayTrigger } from \"@/components/OverlayTrigger\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { IconInfo } from \"@/components/Icon/components/icons\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport type ContextualHelpTriggerProps = OverlayTriggerProps;\n\n/** @flr-generate all */\nexport const ContextualHelpTrigger = flowComponent(\n  \"ContextualHelpTrigger\",\n  (props) => {\n    const { children, ...triggerProps } = props;\n    const stringFormatter = useLocalizedStringFormatter(locales);\n\n    const propsContext: PropsContext = {\n      Button: {\n        \"aria-label\": stringFormatter.format(\n          \"contextualHelpButton.moreInformation\",\n        ),\n        children: <IconInfo />,\n        size: \"s\",\n        variant: \"plain\",\n        ariaSlot: null,\n      },\n    };\n\n    return (\n      <OverlayTrigger\n        overlayType=\"ContextualHelp\"\n        {...triggerProps}\n        component={Aria.DialogTrigger}\n      >\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </OverlayTrigger>\n    );\n  },\n  { type: \"provider\" },\n);\n\nexport default ContextualHelpTrigger;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaO,MAAM,qBAAA,GAAwB,aAAA;AAAA,EACnC,uBAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,QAAA,EAAU,GAAG,YAAA,EAAa,GAAI,KAAA;AACtC,IAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,MAAA,EAAQ;AAAA,QACN,cAAc,eAAA,CAAgB,MAAA;AAAA,UAC5B;AAAA,SACF;AAAA,QACA,QAAA,sBAAW,QAAA,EAAA,EAAS,CAAA;AAAA,QACpB,IAAA,EAAM,GAAA;AAAA,QACN,OAAA,EAAS,OAAA;AAAA,QACT,QAAA,EAAU;AAAA;AACZ,KACF;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAY,gBAAA;AAAA,QACX,GAAG,YAAA;AAAA,QACJ,WAAW,IAAA,CAAK,aAAA;AAAA,QAEhB,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ,CAAA;AAAA,EACA,EAAE,MAAM,UAAA;AACV;;;;"}

package/dist/js/components/src/components/CopyButton/CopyButton.mjs

@@ -0,0 +1,50 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import copy from 'copy-to-clipboard';
+import { Button } from '../Button/Button.mjs';
+import 'react';
+import '@tabler/icons-react';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { IconCopy } from '../Icon/components/icons/IconCopy.mjs';
+import locales from '../../../../_virtual/_.locale.json@51592c7dce2c58889664b6822f25f6d1.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import { TooltipTrigger } from '../Tooltip/components/TooltipTrigger/TooltipTrigger.mjs';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
+import { onlyText } from 'react-children-utilities';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { Action } from '../Action/Action.mjs';
+import '@react-aria/live-announcer';
+
+const CopyButton = flowComponent("CopyButton", (props) => {
+  const {
+    text = "",
+    ref,
+    variant = "plain",
+    color = "secondary",
+    ...buttonProps
+  } = props;
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const tooltip = stringFormatter.format("copyButton.copy");
+  const copyValue = () => {
+    copy(onlyText(text));
+  };
+  return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+    /* @__PURE__ */ jsx(Action, { action: copyValue, showFeedback: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": tooltip,
+        ...buttonProps,
+        ref,
+        variant,
+        color,
+        children: /* @__PURE__ */ jsx(IconCopy, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip, { children: tooltip })
+  ] });
+});
+
+export { CopyButton, CopyButton as default };
+//# sourceMappingURL=CopyButton.mjs.map

package/dist/js/components/src/components/CopyButton/CopyButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.mjs","sources":["../../../../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import copy from \"copy-to-clipboard\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { Button } from \"@/components/Button\";\nimport { IconCopy } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport { onlyText } from \"react-children-utilities\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Action } from \"@/components/Action\";\n\nexport interface CopyButtonProps\n  extends Omit<ButtonProps, \"onPress\" | \"aria-label\" | \"render\">,\n    FlowComponentProps<HTMLButtonElement> {\n  /** The text to copy. */\n  text?: string;\n}\n\n/** @flr-generate all */\nexport const CopyButton = flowComponent(\"CopyButton\", (props) => {\n  const {\n    text = \"\",\n    ref,\n    variant = \"plain\",\n    color = \"secondary\",\n    ...buttonProps\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const tooltip = stringFormatter.format(\"copyButton.copy\");\n\n  const copyValue = () => {\n    copy(onlyText(text));\n  };\n\n  return (\n    <TooltipTrigger>\n      <Action action={copyValue} showFeedback>\n        <Button\n          aria-label={tooltip}\n          {...buttonProps}\n          ref={ref}\n          variant={variant}\n          color={color}\n        >\n          <IconCopy />\n        </Button>\n      </Action>\n      <Tooltip>{tooltip}</Tooltip>\n    </TooltipTrigger>\n  );\n});\n\nexport default CopyButton;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAoBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM;AAAA,IACJ,IAAA,GAAO,EAAA;AAAA,IACP,GAAA;AAAA,IACA,OAAA,GAAU,OAAA;AAAA,IACV,KAAA,GAAQ,WAAA;AAAA,IACR,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,OAAA,GAAU,eAAA,CAAgB,MAAA,CAAO,iBAAiB,CAAA;AAExD,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,IAAA,CAAK,QAAA,CAAS,IAAI,CAAC,CAAA;AAAA,EACrB,CAAA;AAEA,EAAA,4BACG,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,MAAA,EAAQ,SAAA,EAAW,YAAA,EAAY,IAAA,EACrC,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,OAAA;AAAA,QACX,GAAG,WAAA;AAAA,QACJ,GAAA;AAAA,QACA,OAAA;AAAA,QACA,KAAA;AAAA,QAEA,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,KACZ,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,WAAS,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EACpB,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/CounterBadge/CounterBadge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CounterBadge.mjs","sources":["../../../../../../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CounterBadge.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CounterBadgeProps\n  extends PropsWithElementType<\"span\">,\n    FlowComponentProps {\n  /** The number displayed inside the badge. */\n  count?: number;\n}\n\n/** @flr-generate all */\nexport const CounterBadge = flowComponent(\"CounterBadge\", (props) => {\n  const { className, count, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.counterBadge, className);\n\n  return (\n    <span className={rootClassName} {...rest} aria-hidden ref={ref}>\n      {count && count > 99 ? \"99+\" : count}\n    </span>\n  );\n});\n\nexport default CounterBadge;\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,YAAA,GAAe,aAAA,CAAc,cAAA,EAAgB,CAAC,KAAA,KAAU;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAO,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE3C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,aAAA,EAAW,IAAA,EAAC,GAAA,EACnD,QAAA,EAAA,KAAA,IAAS,KAAA,GAAQ,EAAA,GAAK,QAAQ,KAAA,EACjC,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/CountryOptions/CountryOptions.mjs

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useLocalizedStringFormatter } from 'react-aria';
+import locales from '../../../../_virtual/_.locale.json@bcca9730cf4e50042f33f85088c4be64.mjs';
+import OptionView from '../../views/OptionView.mjs';
+
+const countryCodes = Object.keys(locales["de-DE"]).filter((key) => key.startsWith("countries.")).map((key) => key.replace("countries.", ""));
+const defaultSortBy = (left, right) => left.name.localeCompare(right.name);
+const voidSortBy = () => 0;
+const defaultFilterBy = () => true;
+const CountryOptions = (props) => {
+  const { filterBy = defaultFilterBy, sortBy = voidSortBy } = props;
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const countries = useMemo(
+    () => countryCodes.map((code) => ({
+      code,
+      name: stringFormatter.format(`countries.${code}`)
+    })).filter(filterBy).sort(defaultSortBy).sort(sortBy),
+    [stringFormatter, filterBy, sortBy]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: countries.map((country) => /* @__PURE__ */ jsx(OptionView, { value: country.code, children: country.name }, country.code)) });
+};
+
+export { CountryOptions, CountryOptions as default };
+//# sourceMappingURL=CountryOptions.mjs.map

package/dist/js/components/src/components/CountryOptions/CountryOptions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountryOptions.mjs","sources":["../../../../../../src/components/CountryOptions/CountryOptions.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { useMemo } from \"react\";\nimport type { ListBoxProps } from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport locales from \"./locales/*.locale.json\";\nimport OptionView from \"@/views/OptionView\";\n\nexport interface Country {\n  code: string;\n  name: string;\n}\n\nexport type CountryFilterFn = (country: Country) => boolean;\nexport type CountrySortFn = (left: Country, right: Country) => number;\n\nexport interface CountryOptionsProps<T = object>\n  extends PropsWithChildren<Omit<ListBoxProps<T>, \"children\">>,\n    FlowComponentProps {\n  filterBy?: CountryFilterFn;\n  sortBy?: CountrySortFn;\n}\n\nconst countryCodes = Object.keys(locales[\"de-DE\"])\n  .filter((key) => key.startsWith(\"countries.\"))\n  .map((key) => key.replace(\"countries.\", \"\"));\n\nconst defaultSortBy: CountrySortFn = (left, right) =>\n  left.name.localeCompare(right.name);\nconst voidSortBy: CountrySortFn = () => 0;\nconst defaultFilterBy: CountryFilterFn = () => true;\n\nexport const CountryOptions: FC<CountryOptionsProps> = (props) => {\n  const { filterBy = defaultFilterBy, sortBy = voidSortBy } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const countries = useMemo(\n    () =>\n      countryCodes\n        .map((code) => ({\n          code,\n          name: stringFormatter.format(`countries.${code}`),\n        }))\n        .filter(filterBy)\n        .sort(defaultSortBy)\n        .sort(sortBy),\n    [stringFormatter, filterBy, sortBy],\n  );\n\n  return (\n    <>\n      {countries.map((country) => (\n        <OptionView key={country.code} value={country.code}>\n          {country.name}\n        </OptionView>\n      ))}\n    </>\n  );\n};\n\nexport default CountryOptions;\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,YAAA,GAAe,OAAO,IAAA,CAAK,OAAA,CAAQ,OAAO,CAAC,CAAA,CAC9C,MAAA,CAAO,CAAC,GAAA,KAAQ,GAAA,CAAI,WAAW,YAAY,CAAC,EAC5C,GAAA,CAAI,CAAC,QAAQ,GAAA,CAAI,OAAA,CAAQ,YAAA,EAAc,EAAE,CAAC,CAAA;AAE7C,MAAM,aAAA,GAA+B,CAAC,IAAA,EAAM,KAAA,KAC1C,KAAK,IAAA,CAAK,aAAA,CAAc,MAAM,IAAI,CAAA;AACpC,MAAM,aAA4B,MAAM,CAAA;AACxC,MAAM,kBAAmC,MAAM,IAAA;AAExC,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAE,QAAA,GAAW,eAAA,EAAiB,MAAA,GAAS,YAAW,GAAI,KAAA;AAE5D,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MACE,YAAA,CACG,GAAA,CAAI,CAAC,IAAA,MAAU;AAAA,MACd,IAAA;AAAA,MACA,IAAA,EAAM,eAAA,CAAgB,MAAA,CAAO,CAAA,UAAA,EAAa,IAAI,CAAA,CAAE;AAAA,KAClD,CAAE,EACD,MAAA,CAAO,QAAQ,EACf,IAAA,CAAK,aAAa,CAAA,CAClB,IAAA,CAAK,MAAM,CAAA;AAAA,IAChB,CAAC,eAAA,EAAiB,QAAA,EAAU,MAAM;AAAA,GACpC;AAEA,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA,SAAA,CAAU,GAAA,CAAI,CAAC,4BACd,GAAA,CAAC,UAAA,EAAA,EAA8B,KAAA,EAAO,OAAA,CAAQ,MAC3C,QAAA,EAAA,OAAA,CAAQ,IAAA,EAAA,EADM,OAAA,CAAQ,IAEzB,CACD,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/CountryOptions/lib/sortBy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortBy.mjs","sources":["../../../../../../../src/components/CountryOptions/lib/sortBy.ts"],"sourcesContent":["import type { CountrySortFn } from \"@/components/CountryOptions/CountryOptions\";\n\nconst dachCountries = [\"DE\", \"AT\", \"CH\"];\n\nexport const sortByDachFirst: CountrySortFn = (left, right) =>\n  dachCountries.includes(right.code)\n    ? 1\n    : 0 - (dachCountries.includes(left.code) ? 1 : 0);\n"],"names":[],"mappings":"AAEA,MAAM,aAAA,GAAgB,CAAC,IAAA,EAAM,IAAA,EAAM,IAAI,CAAA;AAEhC,MAAM,kBAAiC,CAAC,IAAA,EAAM,KAAA,KACnD,aAAA,CAAc,SAAS,KAAA,CAAM,IAAI,CAAA,GAC7B,CAAA,GACA,KAAK,aAAA,CAAc,QAAA,CAAS,IAAA,CAAK,IAAI,IAAI,CAAA,GAAI,CAAA;;;;"}

package/dist/js/components/src/components/DateInput/DateInput.mjs

@@ -0,0 +1,20 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import * as Aria from 'react-aria-components';
+
+const DateInput = (props) => {
+  const { ref, ...inputProps } = props;
+  const firstSegmentType = useRef(null);
+  return /* @__PURE__ */ jsx(Aria.DateInput, { ...inputProps, children: (segment) => {
+    if (firstSegmentType.current === null && segment.type !== "literal") {
+      firstSegmentType.current = segment.type;
+    }
+    const firstSegmentRef = segment.type === firstSegmentType.current ? ref : null;
+    return /* @__PURE__ */ jsx(Aria.DateSegment, { segment, ref: firstSegmentRef });
+  } });
+};
+
+export { DateInput, DateInput as default };
+//# sourceMappingURL=DateInput.mjs.map

package/dist/js/components/src/components/DateInput/DateInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.mjs","sources":["../../../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import { useRef, type FC, type Ref } from \"react\";\nimport * as Aria from \"react-aria-components\";\n\ninterface DateInputProps extends Omit<Aria.DateInputProps, \"children\" | \"ref\"> {\n  ref?: Ref<HTMLSpanElement | null>;\n}\n\nexport const DateInput: FC<DateInputProps> = (props) => {\n  const { ref, ...inputProps } = props;\n\n  const firstSegmentType = useRef<string | null>(null);\n\n  return (\n    <Aria.DateInput {...inputProps}>\n      {(segment) => {\n        if (firstSegmentType.current === null && segment.type !== \"literal\") {\n          firstSegmentType.current = segment.type;\n        }\n\n        const firstSegmentRef =\n          segment.type === firstSegmentType.current ? ref : null;\n\n        return <Aria.DateSegment segment={segment} ref={firstSegmentRef} />;\n      }}\n    </Aria.DateInput>\n  );\n};\n\nexport default DateInput;\n"],"names":[],"mappings":";;;;AAOO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,GAAA,EAAK,GAAG,UAAA,EAAW,GAAI,KAAA;AAE/B,EAAA,MAAM,gBAAA,GAAmB,OAAsB,IAAI,CAAA;AAEnD,EAAA,2BACG,IAAA,CAAK,SAAA,EAAL,EAAgB,GAAG,UAAA,EACjB,WAAC,OAAA,KAAY;AACZ,IAAA,IAAI,gBAAA,CAAiB,OAAA,KAAY,IAAA,IAAQ,OAAA,CAAQ,SAAS,SAAA,EAAW;AACnE,MAAA,gBAAA,CAAiB,UAAU,OAAA,CAAQ,IAAA;AAAA,IACrC;AAEA,IAAA,MAAM,eAAA,GACJ,OAAA,CAAQ,IAAA,KAAS,gBAAA,CAAiB,UAAU,GAAA,GAAM,IAAA;AAEpD,IAAA,2BAAQ,IAAA,CAAK,WAAA,EAAL,EAAiB,OAAA,EAAkB,KAAK,eAAA,EAAiB,CAAA;AAAA,EACnE,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/DatePicker/DatePicker.mjs

@@ -0,0 +1,67 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import * as Aria from 'react-aria-components';
+import { DateInput } from './components/DateInput/DateInput.mjs';
+import formFieldStyles from '../FormField/FormField.module.scss.mjs';
+import { Popover } from '../Popover/Popover.mjs';
+import 'mobx';
+import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { Calendar } from '../Calendar/Calendar.mjs';
+import '../Button/Button.mjs';
+import '@tabler/icons-react';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+
+const DatePicker = flowComponent("DatePicker", (props) => {
+  const { children, className, onChange, ref, ...rest } = props;
+  const {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldProps,
+    fieldPropsContext
+  } = useFieldComponent(props);
+  const rootClassName = clsx(formFieldStyles.formField, className);
+  const popoverController = useOverlayController("Popover");
+  return /* @__PURE__ */ jsxs(
+    Aria.DatePicker,
+    {
+      ...rest,
+      ...fieldProps,
+      className: clsx(fieldProps.className, rootClassName),
+      onOpenChange: (v) => popoverController.setOpen(v),
+      isOpen: popoverController.isOpen,
+      onChange: (value) => {
+        if (onChange) {
+          onChange(value);
+        }
+        popoverController.close();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
+          /* @__PURE__ */ jsx(DateInput, { isDisabled: props.isDisabled, ref }),
+          /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children }),
+          /* @__PURE__ */ jsx(
+            Popover,
+            {
+              placement: "bottom end",
+              isDialogContent: true,
+              controller: popoverController,
+              children: /* @__PURE__ */ jsx(Calendar, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ]
+    }
+  );
+});
+
+export { DatePicker, DatePicker as default };
+//# sourceMappingURL=DatePicker.mjs.map

package/dist/js/components/src/components/DatePicker/DatePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.mjs","sources":["../../../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { DateInput } from \"./components/DateInput\";\nimport styles from \"../FormField/FormField.module.scss\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Calendar } from \"@/components/Calendar\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(styles.formField, className);\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  return (\n    <Aria.DatePicker\n      {...rest}\n      {...fieldProps}\n      className={clsx(fieldProps.className, rootClassName)}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <FieldErrorCaptureContext>\n        <DateInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <Calendar />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAExD,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAKA,eAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,aAAa,CAAA;AAAA,MACnD,YAAA,EAAc,CAAC,CAAA,KAAM,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAA,CAAkB,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB;AACA,QAAA,iBAAA,CAAkB,KAAA,EAAM;AAAA,MAC1B,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,wBAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,EAAA,EAAU,UAAA,EAAY,KAAA,CAAM,UAAA,EAAY,GAAA,EAAU,CAAA;AAAA,0BACnD,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,YAAA;AAAA,cACV,eAAA,EAAe,IAAA;AAAA,cACf,UAAA,EAAY,iBAAA;AAAA,cAEZ,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA;AACZ,SAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/DatePicker/components/DateInput/DateInput.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import styles from './DateInput.module.scss.mjs';
+import * as Aria from 'react-aria-components';
+import { Button } from '../../../Button/Button.mjs';
+import '@tabler/icons-react';
+import '../../../Icon/Icon.mjs';
+import '../../../../views/IconView.mjs';
+import { IconDate } from '../../../Icon/components/icons/IconDate.mjs';
+import { DateInput as DateInput$1 } from '../../../DateInput/DateInput.mjs';
+
+const DateInput = (props) => {
+  const { isDisabled, ref } = props;
+  return /* @__PURE__ */ jsxs(Aria.Group, { className: styles.dateInput, children: [
+    /* @__PURE__ */ jsx(DateInput$1, { ref }),
+    /* @__PURE__ */ jsx(Button, { variant: "plain", color: "secondary", isDisabled, children: /* @__PURE__ */ jsx(IconDate, {}) })
+  ] });
+};
+
+export { DateInput, DateInput as default };
+//# sourceMappingURL=DateInput.mjs.map

package/dist/js/components/src/components/DatePicker/components/DateInput/DateInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.mjs","sources":["../../../../../../../../src/components/DatePicker/components/DateInput/DateInput.tsx"],"sourcesContent":["import { type FC, type Ref } from \"react\";\nimport styles from \"./DateInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport Input from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n  isDisabled?: boolean;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport const DateInput: FC<DateInputProps> = (props) => {\n  const { isDisabled, ref } = props;\n\n  return (\n    <Aria.Group className={styles.dateInput}>\n      <Input ref={ref} />\n      <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n        <IconDate />\n      </Button>\n    </Aria.Group>\n  );\n};\n\nexport default DateInput;\n"],"names":["Input"],"mappings":";;;;;;;;;;;AAYO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,UAAA,EAAY,GAAA,EAAI,GAAI,KAAA;AAE5B,EAAA,4BACG,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,OAAO,SAAA,EAC5B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAACA,eAAM,GAAA,EAAU,CAAA;AAAA,oBACjB,GAAA,CAAC,UAAO,OAAA,EAAQ,OAAA,EAAQ,OAAM,WAAA,EAAY,UAAA,EACxC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA,EACZ;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs

@@ -0,0 +1,61 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import * as Aria from 'react-aria-components';
+import { Popover } from '../Popover/Popover.mjs';
+import { RangeCalendar } from '../Calendar/RangeCalendar.mjs';
+import { DateRangeInput } from './components/DateRangeInput/DateRangeInput.mjs';
+import 'mobx';
+import 'react';
+import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+
+const DateRangePicker = flowComponent("DateRangePicker", (props) => {
+  const { children, className, onChange, ref, ...rest } = props;
+  const {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldProps,
+    fieldPropsContext
+  } = useFieldComponent(props);
+  const rootClassName = clsx(fieldProps.className, className);
+  const popoverController = useOverlayController("Popover");
+  return /* @__PURE__ */ jsxs(
+    Aria.DateRangePicker,
+    {
+      ...rest,
+      className: rootClassName,
+      onOpenChange: (v) => popoverController.setOpen(v),
+      isOpen: popoverController.isOpen,
+      onChange: (value) => {
+        if (onChange) {
+          onChange(value);
+        }
+        popoverController.close();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
+          /* @__PURE__ */ jsx(DateRangeInput, { isDisabled: props.isDisabled, ref }),
+          /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children }),
+          /* @__PURE__ */ jsx(
+            Popover,
+            {
+              placement: "bottom end",
+              isDialogContent: true,
+              controller: popoverController,
+              children: /* @__PURE__ */ jsx(RangeCalendar, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ]
+    }
+  );
+});
+
+export { DateRangePicker, DateRangePicker as default };
+//# sourceMappingURL=DateRangePicker.mjs.map

package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.mjs","sources":["../../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { RangeCalendar } from \"../Calendar/RangeCalendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<\n      Omit<Aria.DateRangePickerProps<T>, \"children\" | \"ref\">\n    >,\n    FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  return (\n    <Aria.DateRangePicker\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <FieldErrorCaptureContext>\n        <DateRangeInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <RangeCalendar />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqBO,MAAM,eAAA,GAAkB,aAAA,CAAc,iBAAA,EAAmB,CAAC,KAAA,KAAU;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAExD,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,SAAS,CAAA;AAE1D,EAAA,MAAM,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,eAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,YAAA,EAAc,CAAC,CAAA,KAAM,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAA,CAAkB,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB;AACA,QAAA,iBAAA,CAAkB,KAAA,EAAM;AAAA,MAC1B,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,wBAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,cAAA,EAAA,EAAe,UAAA,EAAY,KAAA,CAAM,UAAA,EAAY,GAAA,EAAU,CAAA;AAAA,0BACxD,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,YAAA;AAAA,cACV,eAAA,EAAe,IAAA;AAAA,cACf,UAAA,EAAY,iBAAA;AAAA,cAEZ,8BAAC,aAAA,EAAA,EAAc;AAAA;AAAA;AACjB,SAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.mjs

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import styles from './DateRangeInput.module.scss.mjs';
+import * as Aria from 'react-aria-components';
+import { Button } from '../../../Button/Button.mjs';
+import '@tabler/icons-react';
+import '../../../Icon/Icon.mjs';
+import '../../../../views/IconView.mjs';
+import { IconDate } from '../../../Icon/components/icons/IconDate.mjs';
+import { DateInput } from '../../../DateInput/DateInput.mjs';
+
+const DateRangeInput = (props) => {
+  const { isDisabled, ref } = props;
+  return /* @__PURE__ */ jsxs(Aria.Group, { className: styles.dateRangeInput, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(DateInput, { slot: "start", ref }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "–" }),
+      /* @__PURE__ */ jsx(DateInput, { slot: "end" })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { variant: "plain", color: "secondary", isDisabled, children: /* @__PURE__ */ jsx(IconDate, {}) })
+  ] });
+};
+
+export { DateRangeInput, DateRangeInput as default };
+//# sourceMappingURL=DateRangeInput.mjs.map

package/dist/js/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeInput.mjs","sources":["../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport styles from \"./DateRangeInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n  isDisabled?: boolean;\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\nexport const DateRangeInput: FC<DateInputProps> = (props) => {\n  const { isDisabled, ref } = props;\n\n  return (\n    <Aria.Group className={styles.dateRangeInput}>\n      <div>\n        <DateInput slot=\"start\" ref={ref} />\n        <span aria-hidden=\"true\">–</span>\n        <DateInput slot=\"end\" />\n      </div>\n      <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n        <IconDate />\n      </Button>\n    </Aria.Group>\n  );\n};\n\nexport default DateRangeInput;\n"],"names":[],"mappings":";;;;;;;;;;;AAaO,MAAM,cAAA,GAAqC,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,GAAA,EAAI,GAAI,KAAA;AAE5B,EAAA,4BACG,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,OAAO,cAAA,EAC5B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,GAAA,EAAU,CAAA;AAAA,sBAClC,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,sBAC1B,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,KAAA,EAAM;AAAA,KAAA,EACxB,CAAA;AAAA,oBACA,GAAA,CAAC,UAAO,OAAA,EAAQ,OAAA,EAAQ,OAAM,WAAA,EAAY,UAAA,EACxC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA,EACZ;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/Div/Div.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Div.mjs","sources":["../../../../../../src/components/Div/Div.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface DivProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    RefAttributes<HTMLDivElement> {}\n\n/** @flr-generate all */\nexport const Div: FC<DivProps> = (props) => {\n  const { children, ...restProps } = props;\n  return <div {...restProps}>{children}</div>;\n};\n\nexport default Div;\n"],"names":[],"mappings":";;AASO,MAAM,GAAA,GAAoB,CAAC,KAAA,KAAU;AAC1C,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,SAAA,EAAU,GAAI,KAAA;AACnC,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,SAAA,EAAY,QAAA,EAAS,CAAA;AACvC;;;;"}

package/dist/js/components/src/components/DonutChart/DonutChart.mjs

@@ -0,0 +1,73 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as Aria from 'react-aria-components';
+import clsx from 'clsx';
+import styles from './DonutChart.module.scss.mjs';
+import { DonutChartValue } from './components/DonutChartValue.mjs';
+import { Donut } from './components/Donut.mjs';
+import { Wrap } from '../Wrap/Wrap.mjs';
+import { DonutChartLegend } from './components/DonutChartLegend.mjs';
+
+const DonutChart = (props) => {
+  const {
+    size = "m",
+    status = "info",
+    className,
+    value,
+    segments,
+    maxValue,
+    formatOptions,
+    showLegend = true,
+    legendPosition = "right",
+    children,
+    ...rest
+  } = props;
+  const rootClassName = clsx(
+    styles.donutChart,
+    size === "l" && styles["size-l"],
+    styles[status],
+    className
+  );
+  const segmentsTotalValue = segments ? segments.map((s) => s.value).reduce((a, b) => a + b, 0) : void 0;
+  return /* @__PURE__ */ jsx(Wrap, { if: showLegend && segments, children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.donutChartContainer, styles[legendPosition]), children: [
+    /* @__PURE__ */ jsxs(
+      Aria.ProgressBar,
+      {
+        className: rootClassName,
+        value: segmentsTotalValue ?? value,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            Donut,
+            {
+              value: segmentsTotalValue ?? value,
+              segments,
+              size,
+              maxValue
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DonutChartValue,
+            {
+              value: segmentsTotalValue ?? value,
+              formatOptions,
+              children
+            }
+          )
+        ]
+      }
+    ),
+    showLegend && segments && /* @__PURE__ */ jsx(
+      DonutChartLegend,
+      {
+        showLegend,
+        segments,
+        formatOptions
+      }
+    )
+  ] }) });
+};
+
+export { DonutChart, DonutChart as default };
+//# sourceMappingURL=DonutChart.mjs.map

package/dist/js/components/src/components/DonutChart/DonutChart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.mjs","sources":["../../../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./DonutChart.module.scss\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport type { CategoricalColor } from \"@/lib/tokens/CategoricalColors\";\nimport { DonutChartValue } from \"@/components/DonutChart/components/DonutChartValue\";\nimport { Donut } from \"@/components/DonutChart/components/Donut\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { DonutChartLegend } from \"@/components/DonutChart/components/DonutChartLegend\";\n\nexport interface DonutChartSegment {\n  value: number;\n  title: string;\n  color?: CategoricalColor;\n  valueText?: string;\n}\n\nexport interface DonutChartProps\n  extends Omit<Aria.ProgressBarProps, \"children\" | \"valueLabel\">,\n    PropsWithStatus,\n    PropsWithChildren {\n  /** The size variant of the donut chart. @default \"m\" */\n  size?: \"m\" | \"l\";\n  /** Divides the fill of the donut chart into segments */\n  segments?: DonutChartSegment[];\n  /**\n   * Whether the legend component is shown when segments are used. @default:\n   * true\n   */\n  showLegend?: boolean;\n  /** The position of the legend. @default \"right\" */\n  legendPosition?: \"top\" | \"left\" | \"bottom\" | \"right\";\n}\n\n/** @flr-generate all */\nexport const DonutChart: FC<DonutChartProps> = (props) => {\n  const {\n    size = \"m\",\n    status = \"info\",\n    className,\n    value,\n    segments,\n    maxValue,\n    formatOptions,\n    showLegend = true,\n    legendPosition = \"right\",\n    children,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.donutChart,\n    size === \"l\" && styles[\"size-l\"],\n    styles[status],\n    className,\n  );\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  return (\n    <Wrap if={showLegend && segments}>\n      <div className={clsx(styles.donutChartContainer, styles[legendPosition])}>\n        <Aria.ProgressBar\n          className={rootClassName}\n          value={segmentsTotalValue ?? value}\n          {...rest}\n        >\n          <Donut\n            value={segmentsTotalValue ?? value}\n            segments={segments}\n            size={size}\n            maxValue={maxValue}\n          />\n          <DonutChartValue\n            value={segmentsTotalValue ?? value}\n            formatOptions={formatOptions}\n          >\n            {children}\n          </DonutChartValue>\n        </Aria.ProgressBar>\n\n        {showLegend && segments && (\n          <DonutChartLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        )}\n      </div>\n    </Wrap>\n  );\n};\n\nexport default DonutChart;\n"],"names":[],"mappings":";;;;;;;;;AAoCO,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM;AAAA,IACJ,IAAA,GAAO,GAAA;AAAA,IACP,MAAA,GAAS,MAAA;AAAA,IACT,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAA,GAAa,IAAA;AAAA,IACb,cAAA,GAAiB,OAAA;AAAA,IACjB,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,UAAA;AAAA,IACP,IAAA,KAAS,GAAA,IAAO,MAAA,CAAO,QAAQ,CAAA;AAAA,IAC/B,OAAO,MAAM,CAAA;AAAA,IACb;AAAA,GACF;AAEA,EAAA,MAAM,qBAAqB,QAAA,GACvB,QAAA,CAAS,GAAA,CAAI,CAAC,MAAM,CAAA,CAAE,KAAK,CAAA,CAAE,MAAA,CAAO,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,GAAI,CAAA,EAAG,CAAC,CAAA,GACtD,MAAA;AAEJ,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,UAAA,IAAc,UACtB,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,mBAAA,EAAqB,MAAA,CAAO,cAAc,CAAC,CAAA,EACrE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,IAAA,CAAK,WAAA;AAAA,MAAL;AAAA,QACC,SAAA,EAAW,aAAA;AAAA,QACX,OAAO,kBAAA,IAAsB,KAAA;AAAA,QAC5B,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,OAAO,kBAAA,IAAsB,KAAA;AAAA,cAC7B,QAAA;AAAA,cACA,IAAA;AAAA,cACA;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,eAAA;AAAA,YAAA;AAAA,cACC,OAAO,kBAAA,IAAsB,KAAA;AAAA,cAC7B,aAAA;AAAA,cAEC;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,IAEC,cAAc,QAAA,oBACb,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/DonutChart/DonutChart.module.scss.mjs

@@ -0,0 +1,38 @@
+"use client"
+/* */
+const donutChart = "flow--donut-chart";
+const border = "flow--donut-chart--border";
+const background = "flow--donut-chart--background";
+const value = "flow--donut-chart--value";
+const info = "flow--donut-chart--info";
+const fill = "flow--donut-chart--fill";
+const success = "flow--donut-chart--success";
+const danger = "flow--donut-chart--danger";
+const warning = "flow--donut-chart--warning";
+const donutChartContainer = "flow--donut-chart--donut-chart-container";
+const bottom = "flow--donut-chart--bottom";
+const top = "flow--donut-chart--top";
+const right = "flow--donut-chart--right";
+const legend = "flow--donut-chart--legend";
+const left = "flow--donut-chart--left";
+const styles = {
+	donutChart: donutChart,
+	border: border,
+	background: background,
+	value: value,
+	"size-l": "flow--donut-chart--size-l",
+	info: info,
+	fill: fill,
+	success: success,
+	danger: danger,
+	warning: warning,
+	donutChartContainer: donutChartContainer,
+	bottom: bottom,
+	top: top,
+	right: right,
+	legend: legend,
+	left: left
+};
+
+export { background, border, bottom, danger, styles as default, donutChart, donutChartContainer, fill, info, left, legend, right, success, top, value, warning };
+//# sourceMappingURL=DonutChart.module.scss.mjs.map

package/dist/js/components/src/components/DonutChart/DonutChart.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/src/components/DonutChart/components/Donut.mjs

@@ -0,0 +1,68 @@
+"use client"
+/* */
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import styles from '../DonutChart.module.scss.mjs';
+import { DonutChartFill } from './DonutChartFill.mjs';
+
+const Donut = (props) => {
+  const { value = 0, segments, size, maxValue } = props;
+  const strokeWidth = 0.5;
+  const fillWidth = size === "m" ? 8 : 12;
+  const center = fillWidth * 4;
+  const radius = center - fillWidth / 2;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: center * 4,
+      height: center * 4,
+      viewBox: `0 0 ${center * 2} ${center * 2}`,
+      fill: "none",
+      strokeWidth: fillWidth,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: styles.background,
+            cx: center,
+            cy: center,
+            r: radius,
+            strokeWidth: fillWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: styles.border,
+            cx: center,
+            cy: center,
+            r: center - strokeWidth / 2,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: styles.border,
+            cx: center,
+            cy: center,
+            r: center - fillWidth + strokeWidth / 2,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DonutChartFill,
+          {
+            radius,
+            center,
+            value,
+            segments,
+            maxValue: maxValue ?? 100
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+export { Donut };
+//# sourceMappingURL=Donut.mjs.map

package/dist/js/components/src/components/DonutChart/components/Donut.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.mjs","sources":["../../../../../../../src/components/DonutChart/components/Donut.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport { DonutChartFill } from \"@/components/DonutChart/components/DonutChartFill\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ninterface Props\n  extends Pick<DonutChartProps, \"segments\" | \"size\" | \"maxValue\"> {\n  value?: number;\n}\n\nexport const Donut: FC<Props> = (props) => {\n  const { value = 0, segments, size, maxValue } = props;\n\n  const strokeWidth = 0.5;\n  const fillWidth = size === \"m\" ? 8 : 12;\n  const center = fillWidth * 4;\n  const radius = center - fillWidth / 2;\n\n  return (\n    <>\n      <svg\n        width={center * 4}\n        height={center * 4}\n        viewBox={`0 0 ${center * 2} ${center * 2}`}\n        fill=\"none\"\n        strokeWidth={fillWidth}\n      >\n        <circle\n          className={styles.background}\n          cx={center}\n          cy={center}\n          r={radius}\n          strokeWidth={fillWidth}\n        />\n        <circle\n          className={styles.border}\n          cx={center}\n          cy={center}\n          r={center - strokeWidth / 2}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          className={styles.border}\n          cx={center}\n          cy={center}\n          r={center - fillWidth + strokeWidth / 2}\n          strokeWidth={strokeWidth}\n        />\n\n        <DonutChartFill\n          radius={radius}\n          center={center}\n          value={value}\n          segments={segments}\n          maxValue={maxValue ?? 100}\n        />\n      </svg>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;AAUO,MAAM,KAAA,GAAmB,CAAC,KAAA,KAAU;AACzC,EAAA,MAAM,EAAE,KAAA,GAAQ,CAAA,EAAG,QAAA,EAAU,IAAA,EAAM,UAAS,GAAI,KAAA;AAEhD,EAAA,MAAM,WAAA,GAAc,GAAA;AACpB,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,GAAA,GAAM,CAAA,GAAI,EAAA;AACrC,EAAA,MAAM,SAAS,SAAA,GAAY,CAAA;AAC3B,EAAA,MAAM,MAAA,GAAS,SAAS,SAAA,GAAY,CAAA;AAEpC,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACE,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAO,MAAA,GAAS,CAAA;AAAA,MAChB,QAAQ,MAAA,GAAS,CAAA;AAAA,MACjB,SAAS,CAAA,IAAA,EAAO,MAAA,GAAS,CAAC,CAAA,CAAA,EAAI,SAAS,CAAC,CAAA,CAAA;AAAA,MACxC,IAAA,EAAK,MAAA;AAAA,MACL,WAAA,EAAa,SAAA;AAAA,MAEb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAA,CAAO,UAAA;AAAA,YAClB,EAAA,EAAI,MAAA;AAAA,YACJ,EAAA,EAAI,MAAA;AAAA,YACJ,CAAA,EAAG,MAAA;AAAA,YACH,WAAA,EAAa;AAAA;AAAA,SACf;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAA,CAAO,MAAA;AAAA,YAClB,EAAA,EAAI,MAAA;AAAA,YACJ,EAAA,EAAI,MAAA;AAAA,YACJ,CAAA,EAAG,SAAS,WAAA,GAAc,CAAA;AAAA,YAC1B;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAA,CAAO,MAAA;AAAA,YAClB,EAAA,EAAI,MAAA;AAAA,YACJ,EAAA,EAAI,MAAA;AAAA,YACJ,CAAA,EAAG,MAAA,GAAS,SAAA,GAAY,WAAA,GAAc,CAAA;AAAA,YACtC;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,MAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAA;AAAA,YACA,UAAU,QAAA,IAAY;AAAA;AAAA;AACxB;AAAA;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}