@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.7

package/dist/esm/components/payfit-brand/PayFitBrand.mjs

@@ -0,0 +1,76 @@
+import { jsxs as y, jsx as c } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { tv as f } from "tailwind-variants";
+import g from "../../hooks/use-id.mjs";
+const u = f({
+  slots: {
+    base: "uy-min-w-[104px] uy-aspect-[13/4]",
+    monogram: "",
+    logotype: ""
+  },
+  variants: {
+    color: {
+      original: {
+        monogram: "uy-fill-content-primary",
+        logotype: "uy-fill-content-primary"
+      },
+      dark: {
+        monogram: "uy-fill-content-neutral",
+        logotype: "uy-fill-content-neutral"
+      },
+      light: {
+        monogram: "uy-fill-content-inverted",
+        logotype: "uy-fill-content-inverted"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "original"
+  }
+}), Z = p(
+  ({ color: l, label: n, description: a, ...r }, i) => {
+    const o = g(), t = `payfit-brand-title-${o}`, e = `payfit-brand-desc-${o}`, { base: h, monogram: m, logotype: s } = u({ color: l }), d = {
+      focusable: !1,
+      role: "img",
+      "aria-labelledby": t,
+      ...a && { "aria-describedby": e }
+    }, v = {
+      ...r,
+      ...d
+    };
+    return /* @__PURE__ */ y(
+      "svg",
+      {
+        ...v,
+        ref: i,
+        fill: "none",
+        viewBox: "0 0 104 32",
+        className: h(),
+        children: [
+          /* @__PURE__ */ c("title", { id: t, children: n ?? "PayFit Logo" }),
+          a && /* @__PURE__ */ c("desc", { id: e, children: a }),
+          /* @__PURE__ */ c(
+            "path",
+            {
+              fillRule: "evenodd",
+              className: m(),
+              d: "M16 32C7.164 32 0 24.836 0 16S7.164 0 16 0s16 7.164 16 16-7.164 16-16 16Zm-.218-10.31v-3.18c0-.092.072-.183.163-.183h3.746a4.885 4.885 0 0 0 4.69-5.09 4.893 4.893 0 0 0-4.708-4.692h-9.127c-.2 0-.364.164-.364.364v12.836a2.801 2.801 0 0 0 5.6 0c.018-.036.018-.054 0-.054Zm.182-7.545h3.527a.73.73 0 0 0 .727-.727.73.73 0 0 0-.727-.727h-4.782c-.2 0-.364.163-.364.364v8.672c0 .746-.618 1.364-1.363 1.364a1.374 1.374 0 0 1-1.364-1.364V10.164c0-.091.073-.182.164-.182h7.708c1.91-.037 3.492 1.49 3.51 3.382.036 1.909-1.49 3.49-3.382 3.509h-3.654c-.091 0-.182-.073-.182-.164V14.327c0-.09.072-.163.182-.181Z",
+              clipRule: "evenodd"
+            }
+          ),
+          /* @__PURE__ */ c(
+            "path",
+            {
+              className: s(),
+              d: "M76.49 11.945h-1.472c-.163 0-.309.11-.345.255-.073.218-.128.364-.146.455-.582 1.781-1.472 4.472-2.636 8.054-.018.055-.091.255-.237.582-.036.09-.145.127-.236.09a.219.219 0 0 1-.09-.09 7.862 7.862 0 0 1-.237-.582c-1.2-3.69-2.091-6.454-2.673-8.31-.018-.054-.036-.126-.054-.18a.372.372 0 0 0-.346-.255h-1.454a.365.365 0 0 0-.346.472c.018.055.036.091.055.146.909 2.582 2.272 6.436 4.09 11.582 0 .018 0 .018.019.036a.443.443 0 0 1 0 .218c0 .018 0 .018-.018.037-.019.072-.055.163-.073.236a1.805 1.805 0 0 1-1.691 1.2h-1.527c-.2 0-.364.164-.364.364v1.218c0 .2.164.363.364.363H68.6a3.72 3.72 0 0 0 3.418-2.236c.018-.055.037-.11.073-.164.018-.054 1.09-3.09 4.673-13.109.054-.127-.019-.29-.146-.345H76.6c-.055-.018-.073-.037-.11-.037ZM57.11 22.291c.345.109.708.163 1.072.163a4.232 4.232 0 0 0 2.89-1.2 2.949 2.949 0 0 0 .855-2.145v-.945a.163.163 0 0 0-.163-.164h-.037c-.182.018-.272.018-.272.018l-1.146.146-2.273.345c-1.218.2-1.963.69-2.2 1.455a1.923 1.923 0 0 0-.09.563c.018.818.581 1.527 1.363 1.764Zm6.854.8v.727c0 .2-.164.364-.364.364h-1.182a.365.365 0 0 1-.364-.364l-.018-1.2c0-.018-.018-.036-.018-.054a.088.088 0 0 0-.127 0 1.04 1.04 0 0 0-.2.2c-.946.945-2.236 1.418-3.91 1.418-1.2 0-2.181-.327-2.945-.964-.763-.636-1.127-1.527-1.127-2.654A3.316 3.316 0 0 1 54.036 19c.2-.418.491-.764.873-1.018a3.876 3.876 0 0 1 1.055-.546A5.45 5.45 0 0 1 57 17.164c1.764-.255 2.71-.382 2.89-.419.146-.018.728-.09 1.728-.236.073-.018.127-.018.2-.018.091-.018.164-.091.164-.182v-.51c0-.763-.2-1.363-.6-1.78-.4-.42-1.146-.637-2.218-.637-.491 0-.982.054-1.455.2-.364.109-.673.309-.927.6-.164.218-.31.436-.4.69-.018.055-.037.11-.055.183 0 .018 0 .036-.018.054a.371.371 0 0 1-.364.29h-1.363a.378.378 0 0 1-.346-.38v-.074c.019-.145.037-.254.055-.345.09-.345.236-.691.418-1a3.54 3.54 0 0 1 .818-.91c.437-.29.91-.508 1.418-.654a8.41 8.41 0 0 1 2.128-.254c3.29 0 4.89 1.309 4.89 3.963v7.346Zm26.963-10.873v11.564c0 .2.164.363.364.363h1.473c.2 0 .363-.163.363-.363V12.218c0-.2-.163-.364-.363-.364H91.29c-.2 0-.364.164-.364.364Zm0-3.673v1.473c0 .2.164.364.364.364h1.473c.2 0 .363-.164.363-.364V8.545c0-.2-.163-.363-.363-.363H91.29c-.2 0-.364.163-.364.363ZM100 13.782h3.109c.2 0 .364-.164.364-.364V12.2c0-.2-.164-.364-.364-.364H100c-.09 0-.182-.072-.182-.163V8.545c0-.2-.163-.363-.364-.363h-1.472c-.2 0-.364.163-.364.363v3.128c0 .09-.073.181-.163.181H96.09c-.2 0-.364.164-.364.364v1.218c0 .2.164.364.364.364h1.345c.091 0 .182.073.182.164V20.545c.073 2 1.71 3.6 3.709 3.6h1.655c.2 0 .363-.163.363-.363v-1.218c0-.2-.163-.364-.363-.364h-1.655a1.525 1.525 0 0 1-1.527-1.527v-6.71c.018-.108.09-.181.2-.181Zm-47.964-.637a4.96 4.96 0 0 0-4.854-4.963h-7c-.2 0-.364.163-.364.363v15.237c0 .2.164.363.364.363h1.472c.2 0 .364-.163.364-.363v-5.473c0-.09.073-.182.164-.182h5a4.975 4.975 0 0 0 4.854-4.982Zm-1.927 0a3.01 3.01 0 0 1-3.018 3.019h-4.873c-.09 0-.182-.073-.182-.164v-5.691c0-.09.073-.182.164-.182h4.891a3.01 3.01 0 0 1 3.018 3.018Zm31.2 4.928h5.527c.2 0 .364-.164.364-.364v-1.218c0-.2-.164-.364-.364-.364H81.31c-.09 0-.182-.072-.182-.163v-5.655c0-.09.073-.182.164-.182h6.8c.2 0 .364-.163.364-.363V8.545c0-.2-.164-.363-.364-.363h-8.8c-.2 0-.364.163-.364.363v15.237c0 .2.164.363.364.363h1.473c.2 0 .363-.163.363-.363v-5.527c0-.11.073-.182.182-.182Z"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "PayFitBrand";
+export {
+  Z as PayFitBrand
+};

package/dist/esm/components/payfit-brand/PayFitPreprod.d.mts

@@ -0,0 +1,10 @@
+import { PayFitBrandProps } from './PayFitBrand.mjs';
+/**
+ * The `PayFitBrandPreprod` component represents the PayFit brand used in pre-production environments, such as staging and development.
+ */
+export declare const PayFitBrandPreprod: import('react').ForwardRefExoticComponent<Omit<PayFitBrandProps, "color" | "width"> & {
+    /**
+     * The brand's environment, shown in the right badge.
+     */
+    env: string;
+} & import('react').RefAttributes<SVGSVGElement>>;

package/dist/esm/components/payfit-brand/PayFitPreprod.mjs

@@ -0,0 +1,57 @@
+import { jsxs as i, jsx as c } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import m from "../../hooks/use-id.mjs";
+import { Badge as p } from "../badge/Badge.mjs";
+const f = n(
+  ({ label: d, description: a, env: l, ...t }, o) => {
+    const e = m(), h = `payfit-preprod-title-${e}`, r = `payfit-preprod-desc-${e}`, v = {
+      focusable: !1,
+      role: "img",
+      "aria-labelledby": h,
+      ...a && { "aria-describedby": r }
+    }, s = {
+      ...t,
+      ...v
+    };
+    return /* @__PURE__ */ i("span", { className: "uy-flex uy-gap-200 uy-items-center", children: [
+      /* @__PURE__ */ i(
+        "svg",
+        {
+          ...s,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 104 32",
+          fill: "none",
+          ref: o,
+          width: 104,
+          height: 32,
+          className: "uy-min-w-[104px]",
+          children: [
+            /* @__PURE__ */ c("title", { id: h, children: d }),
+            a && /* @__PURE__ */ c("desc", { id: r, children: a }),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                fillRule: "evenodd",
+                fill: "#F76B15",
+                d: "M16 32C7.164 32 0 24.836 0 16S7.164 0 16 0s16 7.164 16 16-7.164 16-16 16Zm-.218-10.31v-3.18c0-.092.072-.183.163-.183h3.746a4.885 4.885 0 0 0 4.69-5.09 4.893 4.893 0 0 0-4.708-4.692h-9.127c-.2 0-.364.164-.364.364v12.836a2.801 2.801 0 0 0 5.6 0c.018-.036.018-.054 0-.054Zm.182-7.545h3.527a.73.73 0 0 0 .727-.727.73.73 0 0 0-.727-.727h-4.782c-.2 0-.364.163-.364.364v8.672c0 .746-.618 1.364-1.363 1.364a1.374 1.374 0 0 1-1.364-1.364V10.164c0-.091.073-.182.164-.182h7.708c1.91-.037 3.492 1.49 3.51 3.382.036 1.909-1.49 3.49-3.382 3.509h-3.654c-.091 0-.182-.073-.182-.164V14.327c0-.09.072-.163.182-.181Z",
+                clipRule: "evenodd"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                fill: "#1C2024",
+                d: "M76.49 11.945h-1.472c-.163 0-.309.11-.345.255-.073.218-.128.364-.146.455-.582 1.781-1.472 4.472-2.636 8.054-.018.055-.091.255-.237.582-.036.09-.145.127-.236.09a.219.219 0 0 1-.09-.09 7.862 7.862 0 0 1-.237-.582c-1.2-3.69-2.091-6.454-2.673-8.31-.018-.054-.036-.126-.054-.18a.372.372 0 0 0-.346-.255h-1.454a.365.365 0 0 0-.346.472c.018.055.036.091.055.146.909 2.582 2.272 6.436 4.09 11.582 0 .018 0 .018.019.036a.443.443 0 0 1 0 .218c0 .018 0 .018-.018.037-.019.072-.055.163-.073.236a1.805 1.805 0 0 1-1.691 1.2h-1.527c-.2 0-.364.164-.364.364v1.218c0 .2.164.363.364.363H68.6a3.72 3.72 0 0 0 3.418-2.236c.018-.055.037-.11.073-.164.018-.054 1.09-3.09 4.673-13.109.054-.127-.019-.29-.146-.345H76.6c-.055-.018-.073-.037-.11-.037ZM57.11 22.291c.345.109.708.163 1.072.163a4.232 4.232 0 0 0 2.89-1.2 2.949 2.949 0 0 0 .855-2.145v-.945a.163.163 0 0 0-.163-.164h-.037c-.182.018-.272.018-.272.018l-1.146.146-2.273.345c-1.218.2-1.963.69-2.2 1.455a1.923 1.923 0 0 0-.09.563c.018.818.581 1.527 1.363 1.764Zm6.854.8v.727c0 .2-.164.364-.364.364h-1.182a.365.365 0 0 1-.364-.364l-.018-1.2c0-.018-.018-.036-.018-.054a.088.088 0 0 0-.127 0 1.04 1.04 0 0 0-.2.2c-.946.945-2.236 1.418-3.91 1.418-1.2 0-2.181-.327-2.945-.964-.763-.636-1.127-1.527-1.127-2.654A3.316 3.316 0 0 1 54.036 19c.2-.418.491-.764.873-1.018a3.876 3.876 0 0 1 1.055-.546A5.45 5.45 0 0 1 57 17.164c1.764-.255 2.71-.382 2.89-.419.146-.018.728-.09 1.728-.236.073-.018.127-.018.2-.018.091-.018.164-.091.164-.182v-.51c0-.763-.2-1.363-.6-1.78-.4-.42-1.146-.637-2.218-.637-.491 0-.982.054-1.455.2-.364.109-.673.309-.927.6-.164.218-.31.436-.4.69-.018.055-.037.11-.055.183 0 .018 0 .036-.018.054a.371.371 0 0 1-.364.29h-1.363a.378.378 0 0 1-.346-.38v-.074c.019-.145.037-.254.055-.345.09-.345.236-.691.418-1a3.54 3.54 0 0 1 .818-.91c.437-.29.91-.508 1.418-.654a8.41 8.41 0 0 1 2.128-.254c3.29 0 4.89 1.309 4.89 3.963v7.346Zm26.963-10.873v11.564c0 .2.164.363.364.363h1.473c.2 0 .363-.163.363-.363V12.218c0-.2-.163-.364-.363-.364H91.29c-.2 0-.364.164-.364.364Zm0-3.673v1.473c0 .2.164.364.364.364h1.473c.2 0 .363-.164.363-.364V8.545c0-.2-.163-.363-.363-.363H91.29c-.2 0-.364.163-.364.363ZM100 13.782h3.109c.2 0 .364-.164.364-.364V12.2c0-.2-.164-.364-.364-.364H100c-.09 0-.182-.072-.182-.163V8.545c0-.2-.163-.363-.364-.363h-1.472c-.2 0-.364.163-.364.363v3.128c0 .09-.073.181-.163.181H96.09c-.2 0-.364.164-.364.364v1.218c0 .2.164.364.364.364h1.345c.091 0 .182.073.182.164V20.545c.073 2 1.71 3.6 3.709 3.6h1.655c.2 0 .363-.163.363-.363v-1.218c0-.2-.163-.364-.363-.364h-1.655a1.525 1.525 0 0 1-1.527-1.527v-6.71c.018-.108.09-.181.2-.181Zm-47.964-.637a4.96 4.96 0 0 0-4.854-4.963h-7c-.2 0-.364.163-.364.363v15.237c0 .2.164.363.364.363h1.472c.2 0 .364-.163.364-.363v-5.473c0-.09.073-.182.164-.182h5a4.975 4.975 0 0 0 4.854-4.982Zm-1.927 0a3.01 3.01 0 0 1-3.018 3.019h-4.873c-.09 0-.182-.073-.182-.164v-5.691c0-.09.073-.182.164-.182h4.891a3.01 3.01 0 0 1 3.018 3.018Zm31.2 4.928h5.527c.2 0 .364-.164.364-.364v-1.218c0-.2-.164-.364-.364-.364H81.31c-.09 0-.182-.072-.182-.163v-5.655c0-.09.073-.182.164-.182h6.8c.2 0 .364-.163.364-.363V8.545c0-.2-.164-.363-.364-.363h-8.8c-.2 0-.364.163-.364.363v15.237c0 .2.164.363.364.363h1.473c.2 0 .363-.163.363-.363v-5.527c0-.11.073-.182.182-.182Z"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ c(p, { variant: "warning", children: l })
+    ] });
+  }
+);
+f.displayName = "PayFitBrandPreprod";
+export {
+  f as PayFitBrandPreprod
+};

package/dist/esm/components/pill/Pill.d.mts

@@ -0,0 +1,143 @@
+import { AriaAttributes } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const pill: import('tailwind-variants').TVReturnType<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy-min-w-200 uy-max-w-400 uy-inline-flex uy-items-center uy-justify-center uy-text-center uy-typography-body-small", import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}>, {
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy-min-w-200 uy-max-w-400 uy-inline-flex uy-items-center uy-justify-center uy-text-center uy-typography-body-small", import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type PillProps = Partial<Pick<HTMLDivElement, 'id'>> & Required<Pick<AriaAttributes, 'aria-label'>> & Pick<AriaAttributes, 'aria-details' | 'aria-describedby' | 'aria-live'> & {
+    /** The value to be displayed inside the Pill */
+    value: number;
+    /**
+     * The variant of the Pill, determining its color scheme
+     * @default 'critical'
+     */
+    variant?: VariantProps<typeof pill>['variant'];
+    /**
+     * Determines if the Pill is visible or not
+     * @default true
+     */
+    isVisible?: VariantProps<typeof pill>['isVisible'];
+    /**
+     * The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
+     * @default 2
+     */
+    maxDigits?: number;
+};
+/**
+ * The Pill component displays a count of notifications or other numerical values.
+ */
+declare const Pill: import('react').ForwardRefExoticComponent<Partial<Pick<HTMLDivElement, "id">> & Required<Pick<AriaAttributes, "aria-label">> & Pick<AriaAttributes, "aria-describedby" | "aria-details" | "aria-live"> & {
+    /** The value to be displayed inside the Pill */
+    value: number;
+    /**
+     * The variant of the Pill, determining its color scheme
+     * @default 'critical'
+     */
+    variant?: VariantProps<typeof pill>["variant"];
+    /**
+     * Determines if the Pill is visible or not
+     * @default true
+     */
+    isVisible?: VariantProps<typeof pill>["isVisible"];
+    /**
+     * The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
+     * @default 2
+     */
+    maxDigits?: number;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { Pill };

package/dist/esm/components/pill/Pill.mjs

@@ -0,0 +1,52 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { tv as o } from "tailwind-variants";
+const y = o({
+  base: "uy-min-w-200 uy-max-w-400 uy-inline-flex uy-items-center uy-justify-center uy-text-center uy-typography-body-small",
+  variants: {
+    variant: {
+      critical: "uy-bg-surface-danger uy-text-content-inverted",
+      info: "uy-bg-surface-primary uy-text-content-inverted",
+      neutral: "uy-bg-surface-neutral-lowest uy-text-content-neutral"
+    },
+    shape: {
+      circle: "uy-rounded-circle",
+      pill: "uy-rounded-pill uy-px-50"
+    },
+    isVisible: {
+      true: "uy-visible",
+      false: "uy-invisible"
+    }
+  },
+  defaultVariants: {
+    variant: "critical",
+    shape: "pill",
+    isVisible: !0
+  }
+}), p = (t, i) => {
+  const e = 10 ** i - 1;
+  return t > e ? `${e}+` : t.toString();
+}, m = c(
+  ({ variant: t = "critical", isVisible: i = !0, maxDigits: e = 2, value: a, ...l }, n) => {
+    const r = p(Math.abs(a), e), u = y({
+      variant: t,
+      isVisible: i,
+      shape: r.length === 1 ? "circle" : "pill"
+    });
+    return /* @__PURE__ */ s(
+      "span",
+      {
+        ...l,
+        ref: n,
+        role: "status",
+        className: u,
+        "aria-atomic": "true",
+        children: r
+      }
+    );
+  }
+);
+m.displayName = "Pill";
+export {
+  m as Pill
+};

package/dist/esm/components/progress-bar/ProgressBar.mjs

@@ -0,0 +1,39 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { ProgressBar as d } from "react-aria-components";
+import { tv as f } from "tailwind-variants";
+const c = f({
+  slots: {
+    base: "uy-rounded-150 uy-bg-surface-neutral-disabled uy-h-150 uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-w-full",
+    meter: "uy-rounded-l-150 uy-absolute uy-h-full uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-rounded-full uy-bg-surface-success"
+  },
+  variants: {
+    isFull: {
+      true: {
+        meter: "uy-rounded-r-150"
+      }
+    }
+  },
+  defaultVariants: {
+    isFull: !1
+  }
+}), p = y(
+  ({ value: s, range: e = [0, 100], ...u }, l) => {
+    const [t, a] = e, o = s >= a, { base: n, meter: i } = c({ isFull: o });
+    return /* @__PURE__ */ r(
+      d,
+      {
+        ref: l,
+        value: s,
+        minValue: t,
+        maxValue: a,
+        "aria-label": u["aria-label"],
+        children: ({ percentage: m }) => /* @__PURE__ */ r("div", { className: n(), children: /* @__PURE__ */ r("div", { className: i(), style: { width: `${m}%` } }) })
+      }
+    );
+  }
+);
+p.displayName = "ProgressBar";
+export {
+  p as ProgressBar
+};

package/dist/esm/components/select/Select.d.mts

@@ -0,0 +1,52 @@
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { SelectProps as AriaSelectProps } from 'react-aria-components';
+export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'style' | 'className' | 'selectedKey' | 'onSelectionChange'> {
+    /** In static mode, contains <SelectOption /> and <SelectOptionGroup /> components, in dynamic mode, contains a function to render items passed to the component*/
+    children: ReactNode | ((item: T) => ReactNode);
+    /** In dynamic mode, contains the items to display in the select */
+    items?: Iterable<T>;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** The value of the selected item */
+    value?: AriaSelectProps<T>['selectedKey'];
+    /** Function trigger when a item is selected */
+    onChange?: AriaSelectProps<T>['onSelectionChange'];
+    /** Whether the search input should be displayed or not */
+    isSearchable?: boolean;
+}
+type SelectComponent = (<TItems extends object>(props: SelectProps<TItems> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `Select` component is used to render a list of options
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *  vegetable: z.string()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form, FormField } = useUnityForm(schema)
+ *
+ *   return (
+ *    <Form action={handleSubmit}>
+ *      <FormField name="vegetable">
+ *        <FormLabel>Vegetables</FormLabel>
+ *        <FormHelperText>Select your favorite vegetable</FormHelperText>
+ *        <FormControl>
+ *          <Select>
+ *            <SelectOption id="Cabbage">Cabbage</SelectOption>
+ *            <SelectOption id="Broccoli">Broccoli</SelectOption>
+ *           <SelectOption id="Carrots">Carrots</SelectOption>
+ *          </Select>
+ *        </FormControl>
+ *      </FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ */
+declare const Select: SelectComponent;
+export { Select };

package/dist/esm/components/select/Select.mjs

@@ -0,0 +1,63 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { forwardRef as v, useState as w } from "react";
+import { useFilter as N, Select as j, Popover as B, Autocomplete as C, ListBox as u } from "react-aria-components";
+import { tv as F } from "tailwind-variants";
+import { SearchInput as O } from "./parts/SearchInput.mjs";
+import { SelectButton as P } from "./parts/SelectButton.mjs";
+const A = F({
+  slots: {
+    base: "uy-flex uy-flex-col uy-gap-100 uy-w-full",
+    popover: "uy-rounded-75 uy-border uy-border-border-neutral uy-w-[var(--trigger-width)] uy-bg-surface-neutral",
+    listbox: "uy-overflow-y-auto uy-max-h-[296px] uy-pt-100 uy-pb-100 uy-pl-100 uy-pr-100"
+  }
+}), I = ({
+  children: o,
+  items: t,
+  placeholder: r,
+  name: p,
+  isDisabled: l,
+  isInvalid: s,
+  isReadOnly: n,
+  value: i,
+  onChange: f,
+  isSearchable: m = !1,
+  ...y
+}, d) => {
+  const [x, S] = w(!1), { contains: b } = N({ sensitivity: "base" }), { base: h, popover: g, listbox: c } = A();
+  return /* @__PURE__ */ a(
+    j,
+    {
+      onOpenChange: S,
+      ...y,
+      ref: d,
+      className: h(),
+      placeholder: l ? void 0 : r,
+      name: p,
+      isDisabled: l || n,
+      isInvalid: s,
+      selectedKey: i,
+      onSelectionChange: f,
+      children: [
+        /* @__PURE__ */ e(
+          P,
+          {
+            isDisabled: l,
+            isInvalid: s,
+            isReadOnly: n,
+            isOpen: x
+          }
+        ),
+        /* @__PURE__ */ e(B, { offset: 1, containerPadding: 8, className: g(), children: m ? /* @__PURE__ */ a(C, { filter: b, children: [
+          /* @__PURE__ */ e(O, {}),
+          /* @__PURE__ */ e(u, { items: t, className: c(), children: o })
+        ] }) : /* @__PURE__ */ e(u, { items: t, className: c(), children: o }) })
+      ]
+    }
+  );
+}, K = v(function(t, r) {
+  return I(t, r);
+});
+K.displayName = "Select";
+export {
+  K as Select
+};

package/dist/esm/components/select/parts/SearchInput.mjs

@@ -0,0 +1,39 @@
+import { jsxs as e, Fragment as s, jsx as t } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { SearchField as m, Input as c } from "react-aria-components";
+import { useIntl as p } from "react-intl";
+import { tv as y } from "tailwind-variants";
+import { CircularIconButton as d } from "../../icon-button/CircularIconButton.mjs";
+import { Icon as f } from "../../icon/Icon.mjs";
+const b = y({
+  slots: {
+    base: "uy-flex uy-gap-100 uy-border uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-75 uy-border-border-form-active uy-text-content-form-active uy-mt-100 uy-mb-100 uy-ml-100 uy-mr-100",
+    input: "uy-flex-grow uy-outline-none [&::-webkit-search-cancel-button]:uy-hidden",
+    button: "uy-text-content-neutral-enabled",
+    separator: "uy-h-[1px] uy-bg-surface-neutral-lowest uy-w-full uy-mt-100"
+  }
+}), h = l((g, r) => {
+  const o = p(), { base: u, input: n, button: a, separator: i } = b();
+  return /* @__PURE__ */ e(s, { children: [
+    /* @__PURE__ */ e(m, { className: u(), ref: r, children: [
+      /* @__PURE__ */ t(f, { src: "MagnifyingGlassOutlined", "aria-hidden": "true" }),
+      /* @__PURE__ */ t(c, { className: n() }),
+      /* @__PURE__ */ t(
+        d,
+        {
+          title: o.formatMessage({
+            id: "unity:component:form-field:form-input:clear:title",
+            defaultMessage: "Clear"
+          }),
+          className: a(),
+          icon: "CloseOutlined"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { "aria-hidden": "true", className: i() })
+  ] });
+});
+h.displayName = "SearchInput";
+export {
+  h as SearchInput
+};

package/dist/esm/components/select/parts/SelectButton.mjs

@@ -0,0 +1,87 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { Button as b, SelectValue as m } from "react-aria-components";
+import { useIntl as p } from "react-intl";
+import { tv as v } from "tailwind-variants";
+import { Icon as a } from "../../icon/Icon.mjs";
+const x = v({
+  slots: {
+    base: "uy-flex uy-flex-row uy-gap-100 uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100 focus-visible:uy-ring-2 focus-visible:uy-ring-utility-focus-ring focus-visible:uy-ring-offset-2 uy-outline-none uy-border",
+    selectValue: "uy-whitespace-nowrap uy-text-ellipsis uy-typography-body uy-flex-grow uy-text-left data-[placeholder]:uy-text-content-neutral-lowest",
+    iconWrapper: "uy-flex uy-gap-50",
+    icon: ""
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
+        selectValue: "uy-text-content-form-disabled"
+      }
+    },
+    isInvalid: {
+      true: {
+        base: "uy-border-border-form-error uy-bg-surface-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy-border-border-form-disabled",
+        selectValue: "uy-text-content-form-readonly",
+        icon: "uy-text-content-primary-disabled"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isDisabled: !1,
+      isInvalid: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy-border-border-form-enabled hover:uy-border-border-form-hover uy-bg-surface-form-enabled hover:uy-bg-surface-form-hover active:uy-border-border-form-active",
+        selectValue: "uy-text-content-neutral-enabled hover:uy-text-content-neutral-hover",
+        icon: "uy-text-content-form-enabled hover:uy-text-content-form-hover"
+      }
+    }
+  ],
+  defaultVariants: {
+    isDisabled: !1,
+    isInvalid: !1,
+    isReadOnly: !1
+  }
+}), g = y(
+  ({ isDisabled: r, isInvalid: t, isReadOnly: l, isOpen: s }, n) => {
+    const u = p(), { base: i, selectValue: d, iconWrapper: c, icon: f } = x({
+      isDisabled: r,
+      isInvalid: t,
+      isReadOnly: l
+    });
+    return /* @__PURE__ */ o(b, { className: i(), ref: n, isDisabled: r, children: [
+      /* @__PURE__ */ e(m, { className: d() }),
+      /* @__PURE__ */ o("div", { className: c(), children: [
+        t && /* @__PURE__ */ e(
+          a,
+          {
+            src: "WarningCircleOutlined",
+            color: "content.form.invalid",
+            alt: u.formatMessage({
+              id: "unity:component:form-field:form-input:error:alt",
+              defaultMessage: "Error"
+            })
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            className: f(),
+            "aria-hidden": "true",
+            src: s ? "CaretUpOutlined" : "CaretDownOutlined"
+          }
+        )
+      ] })
+    ] });
+  }
+);
+g.displayName = "SelectButton";
+export {
+  g as SelectButton
+};

package/dist/esm/components/select/parts/SelectOption.d.mts

@@ -0,0 +1,6 @@
+import { default as React, ReactNode } from 'react';
+import { ListBoxItemProps } from 'react-aria-components';
+declare const SelectOption: React.ForwardRefExoticComponent<Omit<ListBoxItemProps<object>, "children"> & {
+    children: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { SelectOption };