@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/segmented-button-group/SegmentedButtonGroup.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { RadioGroupProps } from 'react-aria-components';
+export interface BasedSegmentedButtonGroupProps extends Omit<RadioGroupProps, 'children' | 'style' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'validationBehavior' | 'isRequired' | 'validate' | 'defaultValue'> {
+    /**
+     * The content of the `SegmentedButtonGroup`. Should contain `ToggleButton` components as children.
+     */
+    children: ReactNode;
+}
+export interface UncontrolledSegmentedButtonGroupProps extends BasedSegmentedButtonGroupProps, Required<Pick<RadioGroupProps, 'defaultValue'>> {
+}
+/**
+ * The `SegmentedButtonGroup` component is an accessible control that allows users to select one option from a set of mutually exclusive options.
+ * It's similar to a radio group but styled as connected buttons, providing a more compact and visually distinct selection mechanism.
+ * Use this component when you need to:
+ * - Present a small set of related but mutually exclusive options
+ * - Create a toggle between different views or modes
+ * - Provide a compact alternative to radio buttons or tabs
+ * - Allow users to switch between different states of the same content*
+ * The component supports both controlled and uncontrolled usage patterns.
+ * @see {@link ToggleButton} - The child component used within SegmentedButtonGroup
+ * @see {@link https://react-spectrum.adobe.com/react-aria/useRadioGroup.html|React Aria useRadioGroup} - The underlying hook used for accessibility
+ * @see {@link https://www.payfit.design/24f360409/p/2745fe-segmented-control|Design System Documentation}
+ * @example
+ * Basic usage:
+ * ```tsx
+ * import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
+ *
+ * function Example() {
+ *   return (
+ *     <SegmentedButtonGroup>
+ *       <ToggleButton value="option1">Option 1</ToggleButton>
+ *       <ToggleButton value="option2">Option 2</ToggleButton>
+ *       <ToggleButton value="option3">Option 3</ToggleButton>
+ *     </SegmentedButtonGroup>
+ *   )
+ * }
+ * ```
+ */
+declare const SegmentedButtonGroup: {
+    (props: UncontrolledSegmentedButtonGroupProps | BasedSegmentedButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SegmentedButtonGroup };

package/dist/esm/components/segmented-button-group/SegmentedButtonGroup.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useRadioGroup as n } from "react-aria";
+import { useRadioGroupState as i } from "react-stately";
+import { SegmentedButtonGroupProvider as a } from "./SegmentedButtonGroups.context.js";
+const p = (o) => {
+  const { children: e } = o, t = i(o), { radioGroupProps: u } = n(
+    { ...o, orientation: "horizontal" },
+    t
+  );
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...u,
+      className: "uy-bg-surface-neutral-lowest uy-pl-50 uy-pr-50 uy-pt-50 uy-pb-50 uy-flex uy-gap-50 uy-rounded-75 uy-w-fit",
+      children: /* @__PURE__ */ r(a, { state: t, children: e })
+    }
+  );
+};
+p.displayName = "SegmentedButtonGroup";
+export {
+  p as SegmentedButtonGroup
+};

package/dist/esm/components/segmented-button-group/SegmentedButtonGroups.context.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { RadioGroupState } from 'react-stately';
+interface SegmentedButtonGroupContextValue {
+    state: RadioGroupState;
+}
+export declare const SegmentedButtonGroupContext: import('react').Context<SegmentedButtonGroupContextValue>;
+export declare function SegmentedButtonGroupProvider({ children, state, }: PropsWithChildren<SegmentedButtonGroupContextValue>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/segmented-button-group/SegmentedButtonGroups.context.js

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as r } from "react";
+const n = r({
+  state: {}
+});
+function i({
+  children: t,
+  state: e
+}) {
+  return /* @__PURE__ */ o(n.Provider, { value: { state: e }, children: t });
+}
+export {
+  n as SegmentedButtonGroupContext,
+  i as SegmentedButtonGroupProvider
+};

package/dist/esm/components/segmented-button-group/parts/ToggleButton.d.ts

@@ -0,0 +1,47 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { AriaRadioProps } from 'react-aria';
+import { IconName } from '../../../types/utils.js';
+export interface ToggleButtonProps extends AriaRadioProps {
+    /**
+     * The icon to display before the button text.
+     * The icon will automatically switch between outlined and filled variants based on the selection state:
+     * - When selected: Uses the filled variant (`${prefixIcon}Filled`)
+     * - When not selected: Uses the outlined variant (`${prefixIcon}Outlined`)
+     */
+    prefixIcon?: IconName<UnityIcon>;
+    /**
+     * Whether the button is in a loading state.
+     * When `true`, the button content is replaced with a spinner and the button becomes non-interactive.
+     * Use this prop to indicate that an action is being processed after the button is clicked.
+     * @default false
+     */
+    isLoading?: boolean;
+}
+/**
+ * The `ToggleButton` component is a specialized button used within a `SegmentedButtonGroup`.
+ * It functions like a radio button but is styled as a button, providing a more visual selection mechanism.
+ *
+ * `ToggleButton`s can display text, icons, or both, and support various states including selected, loading, and focused.
+ * They should always be used as children of a `SegmentedButtonGroup` component, which manages their selection state.
+ * @remarks
+ * This component must be used inside a SegmentedButtonGroup component
+ * @see {@link SegmentedButtonGroup} - The parent component required for ToggleButton
+ * @see {@link https://react-spectrum.adobe.com/react-aria/useRadio.html|React Aria useRadio} - The underlying hook used for accessibility
+ * @example
+ * Basic usage within a SegmentedButtonGroup:
+ * ```tsx
+ * import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
+ *
+ * function Example() {
+ *   return (
+ *     <SegmentedButtonGroup defaultValue="option1">
+ *       <ToggleButton value="option1">Option 1</ToggleButton>
+ *       <ToggleButton value="option2">Option 2</ToggleButton>
+ *       <ToggleButton value="option3">Option 3</ToggleButton>
+ *     </SegmentedButtonGroup>
+ *   )
+ * }
+ * ```
+ */
+declare const ToggleButton: import('react').ForwardRefExoticComponent<ToggleButtonProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { ToggleButton };

package/dist/esm/components/segmented-button-group/parts/ToggleButton.js

@@ -0,0 +1,122 @@
+import { jsxs as c, jsx as s, Fragment as b } from "react/jsx-runtime";
+import { forwardRef as h, useContext as x, useRef as v } from "react";
+import { useRadio as P, useFocusRing as w, VisuallyHidden as L, mergeProps as I } from "react-aria";
+import { useIntl as N } from "react-intl";
+import { tv as S } from "tailwind-variants";
+import { Icon as V } from "../../icon/Icon.js";
+import { Spinner as F } from "../../spinner/Spinner.js";
+import { SegmentedButtonGroupContext as R } from "../SegmentedButtonGroups.context.js";
+const B = S({
+  slots: {
+    base: [
+      "uy-rounded-50 uy-pt-50 uy-pb-50 uy-pr-150 uy-flex uy-gap-25",
+      "active:uy-gb-surface-neutral-pressed"
+    ],
+    wrapper: [
+      "uy-flex uy-gap-50 uy-items-center uy-typography-action",
+      "active:uy-text-content-neutral-pressed"
+    ]
+  },
+  variants: {
+    isSelected: {
+      true: { base: "uy-bg-surface-neutral-enabled uy-shadow-raising" }
+    },
+    isLoading: {
+      true: {
+        base: "uy-bg-surface-neutral-disabled uy-cursor-not-allowed",
+        wrapper: "uy-text-content-inverted-disabled"
+      }
+    },
+    isFocusVisible: {
+      true: {
+        base: "uy-outline-none uy-ring-2 uy-ring-ring uy-ring-offset-2 uy-ring-utility-focus-ring"
+      }
+    },
+    hasPrefixIcon: { true: "", false: "" }
+  },
+  compoundVariants: [
+    {
+      isLoading: !1,
+      isSelected: !1,
+      className: {
+        base: "hover:uy-bg-surface-neutral-hover",
+        wrapper: "uy-text-content-neutral-enabled hover:uy-text-content-neutral-hover"
+      }
+    },
+    {
+      isLoading: !0,
+      hasPrefixIcon: !1,
+      className: { base: "uy-pl-150 uy-cursor-not-allowed" }
+    },
+    {
+      isLoading: !0,
+      hasPrefixIcon: !0,
+      className: { base: "uy-pl-150 uy-cursor-not-allowed" }
+    },
+    {
+      isLoading: !1,
+      hasPrefixIcon: !1,
+      className: { base: "uy-pl-150 uy-cursor-pointer" }
+    },
+    {
+      isLoading: !1,
+      hasPrefixIcon: !0,
+      className: { base: "uy-pl-50 uy-cursor-pointer" }
+    }
+  ],
+  defaultVariants: {
+    isSelected: !1,
+    isLoading: !1,
+    hasPrefixIcon: !1
+  }
+}), C = ({
+  intl: t,
+  children: n,
+  isLoading: o,
+  prefixIcon: e,
+  isSelected: r
+}) => o ? /* @__PURE__ */ s(
+  F,
+  {
+    label: t.formatMessage({
+      id: "unity:component:common:loading:label",
+      defaultMessage: "Loading..."
+    }),
+    color: "inherit",
+    size: "small"
+  }
+) : /* @__PURE__ */ c(b, { children: [
+  e ? /* @__PURE__ */ s(
+    V,
+    {
+      src: r ? `${e}Filled` : `${e}Outlined`,
+      color: "inherit",
+      role: "presentation"
+    }
+  ) : null,
+  n
+] }), j = h(
+  (t, n) => {
+    const { children: o, value: e, prefixIcon: r, isLoading: a } = t, { state: i } = x(R), u = v(null), { inputProps: d } = P(t, i, u), { focusProps: f, isFocusVisible: p } = w(), y = N(), l = i.selectedValue === e, { base: g, wrapper: m } = B({
+      isSelected: l,
+      hasPrefixIcon: !!r,
+      isLoading: a,
+      isFocusVisible: p
+    });
+    return /* @__PURE__ */ c("label", { ref: n, className: g(), "aria-disabled": a, children: [
+      /* @__PURE__ */ s(L, { children: /* @__PURE__ */ s(
+        "input",
+        {
+          ...I(d, f),
+          ref: u,
+          disabled: a
+        }
+      ) }),
+      /* @__PURE__ */ s("span", { className: m(), children: C({ intl: y, children: o, isLoading: a, isSelected: l, prefixIcon: r }) })
+    ] });
+  }
+);
+j.displayName = "ToggleButton";
+export {
+  j as ToggleButton
+};

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

@@ -0,0 +1,54 @@
+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'];
+    /** The default value of the selected item in uncontrolled mode */
+    defaultValue?: AriaSelectProps<T>['defaultSelectedKey'];
+    /** 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.js

@@ -0,0 +1,68 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { forwardRef as C, useState as P } from "react";
+import { useFilter as j, Select as B, Popover as F, Autocomplete as K, ListBox as i } from "react-aria-components";
+import { tv as O } from "tailwind-variants";
+import { SearchInput as A } from "./parts/SearchInput.js";
+import { SelectButton as I } from "./parts/SelectButton.js";
+const L = O({
+  slots: {
+    base: "uy-flex uy-flex-col uy-gap-100 uy-w-full",
+    popover: "uy-rounded-75 uy-border uy-border-solid 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"
+  }
+}), U = ({
+  children: t,
+  items: o,
+  placeholder: r,
+  name: d,
+  isDisabled: l,
+  isInvalid: s,
+  isReadOnly: c,
+  value: n,
+  defaultValue: y,
+  onChange: u,
+  isSearchable: f = !1,
+  onBlur: m,
+  ...S
+}, b) => {
+  const [x, v] = P(!1), { contains: h } = j({ sensitivity: "base" }), { base: g, popover: w, listbox: a } = L(), N = n !== void 0 || u !== void 0 ? {
+    selectedKey: n,
+    onSelectionChange: u
+  } : { defaultSelectedKey: y };
+  return /* @__PURE__ */ p(
+    B,
+    {
+      onOpenChange: v,
+      ...S,
+      ref: b,
+      className: g(),
+      name: d,
+      placeholder: l ? void 0 : r,
+      isDisabled: l || c,
+      isInvalid: s,
+      onBlur: m,
+      ...N,
+      children: [
+        /* @__PURE__ */ e(
+          I,
+          {
+            isDisabled: l,
+            isInvalid: s,
+            isReadOnly: c,
+            isOpen: x
+          }
+        ),
+        /* @__PURE__ */ e(F, { offset: 1, containerPadding: 8, className: w(), children: f ? /* @__PURE__ */ p(K, { filter: h, children: [
+          /* @__PURE__ */ e(A, {}),
+          /* @__PURE__ */ e(i, { items: o, className: a(), children: t })
+        ] }) : /* @__PURE__ */ e(i, { items: o, className: a(), children: t }) })
+      ]
+    }
+  );
+}, $ = C(function(o, r) {
+  return U(o, r);
+});
+$.displayName = "Select";
+export {
+  $ as Select
+};

package/dist/esm/components/select/parts/SearchInput.d.ts

@@ -0,0 +1,2 @@
+declare const SearchInput: import('react').ForwardRefExoticComponent<import('react').RefAttributes<HTMLDivElement>>;
+export { SearchInput };

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

@@ -0,0 +1,39 @@
+import { jsxs as e, Fragment as i, 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 y } from "react-intl";
+import { tv as d } from "tailwind-variants";
+import { CircularIconButton as p } from "../../icon-button/CircularIconButton.js";
+import { Icon as f } from "../../icon/Icon.js";
+const b = d({
+  slots: {
+    base: "uy-flex uy-gap-100 uy-border uy-border-solid 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 uy-typography-body",
+    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 = y(), { base: a, input: u, button: n, separator: s } = b();
+  return /* @__PURE__ */ e(i, { children: [
+    /* @__PURE__ */ e(m, { className: a(), ref: r, "data-dd-privacy": "mask", children: [
+      /* @__PURE__ */ t(f, { src: "MagnifyingGlassOutlined", "aria-hidden": "true" }),
+      /* @__PURE__ */ t(c, { className: u() }),
+      /* @__PURE__ */ t(
+        p,
+        {
+          title: o.formatMessage({
+            id: "unity:component:common:clear:title",
+            defaultMessage: "Clear"
+          }),
+          className: n(),
+          icon: "CloseOutlined"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { "aria-hidden": "true", className: s() })
+  ] });
+});
+h.displayName = "SearchInput";
+export {
+  h as SearchInput
+};

package/dist/esm/components/select/parts/SelectButton.d.ts

@@ -0,0 +1,8 @@
+export interface SelectButtonProps {
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    isOpen: boolean;
+}
+declare const SelectButton: import('react').ForwardRefExoticComponent<SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { SelectButton };

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

@@ -0,0 +1,96 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } 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.js";
+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-75 uy-border-solid 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 = f(
+  ({ isDisabled: r, isInvalid: o, isReadOnly: l, isOpen: s }, u) => {
+    const n = p(), { base: i, selectValue: d, iconWrapper: c, icon: y } = x({
+      isDisabled: r,
+      isInvalid: o,
+      isReadOnly: l
+    });
+    return /* @__PURE__ */ t(
+      b,
+      {
+        "data-dd-privacy": "mask",
+        className: i(),
+        ref: u,
+        isDisabled: r,
+        children: [
+          /* @__PURE__ */ e(m, { className: d() }),
+          /* @__PURE__ */ t("div", { className: c(), children: [
+            o && /* @__PURE__ */ e(
+              a,
+              {
+                src: "WarningCircleOutlined",
+                color: "content.form.invalid",
+                alt: n.formatMessage({
+                  id: "unity:component:form-field:form-input:error:alt",
+                  defaultMessage: "Error"
+                })
+              }
+            ),
+            /* @__PURE__ */ e(
+              a,
+              {
+                className: y(),
+                "aria-hidden": "true",
+                src: s ? "CaretUpOutlined" : "CaretDownOutlined"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+g.displayName = "SelectButton";
+export {
+  g as SelectButton
+};

package/dist/esm/components/select/parts/SelectOption.context.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+interface SelectOptionContextValue {
+    isDisabled: boolean | undefined;
+}
+export declare const SelectOptionContext: import('react').Context<SelectOptionContextValue>;
+export declare function SelectOptionProvider({ children, isDisabled, }: PropsWithChildren<SelectOptionContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useSelectOptionContext(): SelectOptionContextValue;
+export {};

package/dist/esm/components/select/parts/SelectOption.context.js

@@ -0,0 +1,24 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as r, useContext as i } from "react";
+const e = r({
+  isDisabled: void 0
+});
+function u({
+  children: t,
+  isDisabled: o
+}) {
+  return /* @__PURE__ */ n(e.Provider, { value: { isDisabled: o }, children: t });
+}
+function p() {
+  const t = i(e);
+  if (!t)
+    throw new Error(
+      "useSelectOptionContext must be used within an SelectOptionProvider"
+    );
+  return t;
+}
+export {
+  e as SelectOptionContext,
+  u as SelectOptionProvider,
+  p as useSelectOptionContext
+};

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

@@ -0,0 +1,13 @@
+import { default as React, ReactNode } from 'react';
+import { ListBoxItemProps } from 'react-aria-components';
+/**
+ * SelectOption component for displaying options in a Select dropdown.
+ * @note The `textValue` prop (inherited from ListBoxItemProps) is used for searching when the content
+ * of the option is more complex than a simple string (e.g., contains components
+ * like Avatar, Flex, etc.). Providing this prop enables search functionality
+ * for complex content options.
+ */
+declare const SelectOption: React.ForwardRefExoticComponent<Omit<ListBoxItemProps<object>, "children"> & {
+    children: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { SelectOption };

package/dist/esm/components/select/parts/SelectOption.js

@@ -0,0 +1,64 @@
+import { jsx as e, jsxs as d, Fragment as i } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { ListBoxItem as f } from "react-aria-components";
+import { tv as m } from "tailwind-variants";
+import { Icon as p } from "../../icon/Icon.js";
+import { SelectOptionProvider as b } from "./SelectOption.context.js";
+const x = m({
+  base: "uy-flex uy-flex-col uy-typography-body uy-rounded-50 uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-outline-none",
+  variants: {
+    isFocusVisible: {
+      true: "uy-outline-offset-2 uy-outline-2 uy-outline-utility-focus-ring"
+    },
+    isHovered: {
+      true: "uy-bg-surface-neutral-hover uy-text-content-neutral"
+    },
+    isPressed: {
+      true: "uy-bg-surface-neutral-pressed uy-text-content-neutral-pressed"
+    },
+    isSelected: {
+      true: "uy-bg-surface-neutral-active uy-text-content-neutral-active"
+    },
+    isDisabled: {
+      true: "uy-text-content-neutral-disabled"
+    }
+  },
+  compoundVariants: [
+    {
+      isFocusVisible: !1,
+      isHovered: !1,
+      isPressed: !1,
+      isSelected: !1,
+      isDisabled: !1,
+      class: "uy-bg-surface-neutral-enabled uy-text-content-neutral-enabled"
+    }
+  ]
+}), v = y(
+  (s, l) => {
+    const { children: r, isDisabled: u, textValue: n } = s;
+    return /* @__PURE__ */ e(
+      f,
+      {
+        ...s,
+        ref: l,
+        "data-dd-privacy": "mask",
+        textValue: n,
+        className: ({ isHovered: t, isPressed: a, isFocusVisible: o, isSelected: c }) => x({
+          isHovered: t,
+          isPressed: a,
+          isFocusVisible: o,
+          isSelected: c,
+          isDisabled: u
+        }),
+        children: ({ isSelected: t }) => /* @__PURE__ */ e(b, { isDisabled: u, children: t ? /* @__PURE__ */ d("div", { className: "uy-flex uy-justify-between", children: [
+          /* @__PURE__ */ e("div", { className: "uy-flex uy-flex-col", children: /* @__PURE__ */ e(i, { children: r }) }),
+          /* @__PURE__ */ e(p, { src: "CheckOutlined" })
+        ] }) : /* @__PURE__ */ e(i, { children: r }) })
+      }
+    );
+  }
+);
+v.displayName = "SelectOption";
+export {
+  v as SelectOption
+};

package/dist/esm/components/select/parts/SelectOptionGroup.d.ts

@@ -0,0 +1,12 @@
+import { ForwardedRef, JSX } from 'react';
+import { ListBoxSectionProps } from 'react-aria-components';
+export interface SelectOptionGroupProps<T extends object> extends ListBoxSectionProps<T> {
+    label: string;
+}
+type SelectOptionGroupComponent = (<TItems extends object>(props: SelectOptionGroupProps<TItems> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+declare const SelectOptionGroup: SelectOptionGroupComponent;
+export { SelectOptionGroup };