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

package/dist/cjs/components/pill/Pill.d.ts

@@ -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/cjs/components/pill/Pill.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),o=require("react"),y=require("tailwind-variants"),d=y.tv({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=(e,i)=>{const t=10**i-1;return e>t?`${t}+`:e.toString()},a=o.forwardRef(({variant:e="critical",isVisible:i=!0,maxDigits:t=2,value:l,...n},u)=>{const r=p(Math.abs(l),t),s=d({variant:e,isVisible:i,shape:r.length===1?"circle":"pill"});return c.jsx("span",{...n,ref:u,role:"status",className:s,"aria-atomic":"true",children:r})});a.displayName="Pill";exports.Pill=a;

package/dist/cjs/components/progress-bar/ProgressBar.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),m=require("react-aria-components"),f=require("tailwind-variants"),b=f.tv({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}}),a=d.forwardRef(({value:r,range:t=[0,100],...u},l)=>{const[n,s]=t,o=r>=s,{base:i,meter:y}=b({isFull:o});return e.jsx(m.ProgressBar,{ref:l,value:r,minValue:n,maxValue:s,"aria-label":u["aria-label"],children:({percentage:c})=>e.jsx("div",{className:i(),children:e.jsx("div",{className:y(),style:{width:`${c}%`}})})})});a.displayName="ProgressBar";exports.ProgressBar=a;

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

@@ -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/cjs/components/select/Select.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("react-aria-components"),v=require("tailwind-variants"),q=require("./parts/SearchInput.js"),w=require("./parts/SelectButton.js"),N=v.tv({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"}}),B=({children:s,items:o,placeholder:r,name:p,isDisabled:n,isInvalid:c,isReadOnly:u,value:y,onChange:d,isSearchable:x=!1,...f},S)=>{const[b,m]=a.useState(!1),{contains:g}=t.useFilter({sensitivity:"base"}),{base:h,popover:j,listbox:l}=N();return e.jsxs(t.Select,{onOpenChange:m,...f,ref:S,className:h(),placeholder:n?void 0:r,name:p,isDisabled:n||u,isInvalid:c,selectedKey:y,onSelectionChange:d,children:[e.jsx(w.SelectButton,{isDisabled:n,isInvalid:c,isReadOnly:u,isOpen:b}),e.jsx(t.Popover,{offset:1,containerPadding:8,className:j(),children:x?e.jsxs(t.Autocomplete,{filter:g,children:[e.jsx(q.SearchInput,{}),e.jsx(t.ListBox,{items:o,className:l(),children:s})]}):e.jsx(t.ListBox,{items:o,className:l(),children:s})})]})},i=a.forwardRef(function(o,r){return B(o,r)});i.displayName="Select";exports.Select=i;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),t=require("react-aria-components"),l=require("react-intl"),y=require("tailwind-variants"),d=require("../../icon-button/CircularIconButton.js"),m=require("../../icon/Icon.js"),p=y.tv({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"}}),r=i.forwardRef((b,n)=>{const u=l.useIntl(),{base:a,input:s,button:o,separator:c}=p();return e.jsxs(e.Fragment,{children:[e.jsxs(t.SearchField,{className:a(),ref:n,children:[e.jsx(m.Icon,{src:"MagnifyingGlassOutlined","aria-hidden":"true"}),e.jsx(t.Input,{className:s()}),e.jsx(d.CircularIconButton,{title:u.formatMessage({id:"unity:component:form-field:form-input:clear:title",defaultMessage:"Clear"}),className:o(),icon:"CloseOutlined"})]}),e.jsx("div",{"aria-hidden":"true",className:c()})]})});r.displayName="SearchInput";exports.SearchInput=r;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),o=require("react-aria-components"),m=require("react-intl"),p=require("tailwind-variants"),a=require("../../icon/Icon.js"),v=p.tv({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}}),n=b.forwardRef(({isDisabled:r,isInvalid:t,isReadOnly:s,isOpen:u},l)=>{const i=m.useIntl(),{base:c,selectValue:d,iconWrapper:y,icon:f}=v({isDisabled:r,isInvalid:t,isReadOnly:s});return e.jsxs(o.Button,{className:c(),ref:l,isDisabled:r,children:[e.jsx(o.SelectValue,{className:d()}),e.jsxs("div",{className:y(),children:[t&&e.jsx(a.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:i.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),e.jsx(a.Icon,{className:f(),"aria-hidden":"true",src:u?"CaretUpOutlined":"CaretDownOutlined"})]})]})});n.displayName="SelectButton";exports.SelectButton=n;

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

@@ -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 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),f=require("react-aria-components"),x=require("tailwind-variants"),p=require("../../icon/Icon.js"),b=require("./SelectOption.context.js"),m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=m(i),v=x.tv({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"}]}),l=i.forwardRef((t,a)=>{const{children:s,isDisabled:u}=t,o=typeof r.default.Children.toArray(s)[0]=="string"?r.default.Children.toArray(s)[0]:void 0;return e.jsx(f.ListBoxItem,{ref:a,...t,textValue:o,className:({isHovered:n,isPressed:c,isFocusVisible:d,isSelected:y})=>v({isHovered:n,isPressed:c,isFocusVisible:d,isSelected:y,isDisabled:u}),children:({isSelected:n})=>e.jsx(b.SelectOptionProvider,{isDisabled:u,children:n?e.jsxs("div",{className:"uy-flex uy-justify-between",children:[e.jsx("div",{className:"uy-flex uy-flex-col",children:e.jsx(e.Fragment,{children:s})}),e.jsx(p.Icon,{src:"CheckOutlined"})]}):e.jsx(e.Fragment,{children:s})})})});l.displayName="SelectOption";exports.SelectOption=l;

package/dist/cjs/components/select/parts/SelectOptionHelper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),l=require("tailwind-variants"),a=require("./SelectOption.context.js"),c=l.tv({base:"uy-typography-body",variants:{isDisabled:{true:"uy-text-content-neutral-disabled",false:"uy-text-content-neutral-low"}}}),e=i.forwardRef(({children:t},n)=>{const{isDisabled:s}=a.useSelectOptionContext(),o=c({isDisabled:s});return r.jsx("span",{className:o,ref:n,children:t})});e.displayName="SelectOptionHelper";exports.SelectOptionHelper=e;

package/dist/cjs/components/select-field/SelectField.d.ts

@@ -0,0 +1,50 @@
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod/lib/types';
+import { Schema } from '../../hooks/use-form.types.js';
+import { LabelProps } from '../label/Label.js';
+import { SelectProps } from '../select/Select.js';
+interface SelectFieldProps<TItems extends object, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, Omit<SelectProps<TItems>, 'name' | 'value'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the select field. */
+    label: string;
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the text field. */
+    feedbackText?: ReactNode;
+}
+type SelectFieldComponent = (<TItems extends object, TSchema extends Schema>(props: SelectFieldProps<TItems, ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `SelectField` component renders a list of options to select one, it is fully integrated with the `Form` component.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *  vegetable: z.string()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *    <Form action={handleSubmit}>
+ *      <SelectField<typeof schema>
+ *        name="vegetable"
+ *        label="Vegetables"
+ *        >
+ *        <SelectOption id="Cabbage">Cabbage</SelectOption>
+ *        <SelectOption id="Broccoli">Broccoli</SelectOption>
+ *        <SelectOption id="Carrots">Carrots</SelectOption>
+ *        </SelectField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
+ */
+declare const SelectField: SelectFieldComponent;
+export { SelectField };

package/dist/cjs/components/select-field/SelectField.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),y=require("react-hook-form"),f=require("tailwind-variants"),p=require("../form-field/FormField.js"),h=require("../form-field/parts/FormControl.js"),T=require("../form-field/parts/FormFeedbackText.js"),g=require("../form-field/parts/FormHelperText.js"),k=require("../form-field/parts/FormLabel.js"),C=require("../select/Select.js"),H=f.tv({base:"uy-flex uy-flex-col uy-gap-100"}),R=({children:o,feedbackText:t,helperText:r,isRequired:n,label:i,name:c,requiredVariant:s,isDisabled:F,isInvalid:u,isReadOnly:d,placeholder:m,items:a,...x},q)=>{const{control:S}=y.useFormContext(),j={isRequired:n,isInvalid:u,isDisabled:F,isReadOnly:d};return e.jsxs(p.FormField,{control:S,name:c,className:H(),...j,children:[e.jsx(k.FormLabel,{requiredVariant:s,children:i}),r&&e.jsx(g.FormHelperText,{children:r}),e.jsx(h.FormControl,{children:e.jsx(C.Select,{ref:q,name:c,placeholder:m,items:a,...x,children:o})}),e.jsx(T.FormFeedbackText,{children:t})]})},l=b.forwardRef(function(t,r){return R(t,r)});l.displayName="SelectField";exports.SelectField=l;

package/dist/cjs/components/spinner/Spinner.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),p=require("tailwind-variants"),m=require("../../hooks/use-id.js"),x=p.tv({slots:{base:"uy-flex uy-flex-col uy-items-center uy-gap-200",indicator:"",label:"uy-typography-body uy-text-left uy-truncate"},variants:{size:{small:{indicator:"uy-w-200 uy-h-200",label:"uy-hidden"},medium:{indicator:"uy-w-300 uy-h-300"}},color:{primary:{indicator:"uy-text-content-primary"},inverted:{indicator:"uy-text-content-inverted",label:"uy-text-content-inverted"},inherit:{indicator:""}}},defaultVariants:{size:"small",color:"primary"}});function r({label:a,color:s,size:i,role:t="status",...l},c){const n=`uy-spinner-label-${m()}`,{base:o,indicator:d,label:u}=x({size:i,color:s});return e.jsxs("div",{...l,ref:c,role:t,className:o(),"aria-labelledby":t==="status"?n:void 0,"aria-live":"polite",children:[e.jsxs("svg",{viewBox:"0 0 100 100","aria-hidden":"true",className:d(),children:[e.jsx("title",{children:"Loading"}),e.jsx("circle",{cx:"50",cy:"50",r:"45",fill:"none",stroke:"currentColor",style:{"--r":"45px","--1deg":"calc(2 * pi * var(--r) / 360)",strokeWidth:"9.6px",shapeRendering:"geometricPrecision",strokeDasharray:"calc(40 * var(--1deg)) calc(80 * var(--1deg))",transformOrigin:"50% 50%",animation:"arc-shrink 1.4s ease-in-out infinite, spin 2s linear infinite"}})]}),e.jsx("span",{id:n,className:u(),"aria-hidden":i!=="small",children:a})]})}r.displayName="Spinner";const h=y.forwardRef(r);exports.Spinner=h;

package/dist/cjs/components/tabs/Tabs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),b=require("react-aria-components"),u=require("./Tabs.context.js"),T=require("./Tabs.variant.js"),t=c.forwardRef(({children:a,variant:e,scrollable:s=!1,...n},o)=>{const{base:i}=T.tabsVariant({variant:e,scrollable:s});return r.jsx(u.TabsProvider,{variant:e,scrollable:s,children:r.jsx(b.Tabs,{ref:o,className:i(),...n,children:a})})});t.displayName="Tabs";exports.Tabs=t;

package/dist/cjs/components/tabs/Tabs.variant.d.ts

@@ -0,0 +1,139 @@
+export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}>, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/cjs/components/tabs/Tabs.variant.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),t=e.tv({slots:{base:"uy-w-full",tabList:"uy-flex",tab:["uy-flex uy-relative uy-shrink-0 uy-gap-100 uy-whitespace-nowrap uy-min-w-[3ch] uy-text-center uy-text-content-form-enabled uy-text-action uy-pt-150 uy-pb-150 uy-pl-200 uy-pr-200 uy-rounded-25 uy-cursor-pointer",'data-[selected]:after:uy-content:" " data-[selected]:after:uy-w-full data-[selected]:after:uy-h-[4px] data-[selected]:after:uy-absolute data-[selected]:after:uy-bottom-[-1px] data-[selected]:after:uy-left-0 data-[selected]:after:uy-right-0',"hover:uy-cursor-pointer focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[4px]"]},variants:{variant:{primary:{tab:"data-[selected]:after:uy-bg-border-form-active"},neutral:{tab:"data-[selected]:after:uy-bg-content-neutral"}},scrollable:{true:{tabList:""},false:{base:"",tabList:"uy-border-b-[1.25px] uy-border-b-border-form-enabled"}}},defaultVariants:{variant:"primary",scrollable:!1}});exports.tabsVariant=t;

package/dist/cjs/components/tabs/parts/NavigationButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react-aria-components"),s=require("tailwind-variants"),a=require("../../icon/Icon.js"),l=s.tv({slots:{base:"uy-absolute uy-pt-150 uy-pb-150",button:"uy-rounded-circle hover:uy-text-content-neutral-hover focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring",icon:"uy-text-content-neutral-enabled"},variants:{direction:{left:{base:"uy-top-0 uy-left-0 uy-z-10 uy-bg-gradient-to-r uy-from-surface-inverted/0 uy-from-surface-inverted/100 uy-pl-50 uy-pr-200"},right:{base:"uy-right-0 uy-top-0 uy-z-10 uy-bg-gradient-to-l uy-from-surface-inverted/100 uy-from-surface-inverted/0 uy-pl-200 uy-pr-50"}}}}),c=({direction:t,onPress:u})=>{const{base:r,button:n,icon:o}=l({direction:t});return e.jsx("div",{className:r(),children:e.jsx(i.Button,{id:`scroll-${t}`,className:n(),"aria-label":`Scroll ${t}`,onPress:u,children:e.jsx(a.Icon,{className:o(),"aria-labelledby":`scroll-${t}`,src:t==="left"?"CaretLeftOutlined":"CaretRightOutlined"})})})};exports.NavigationButton=c;

package/dist/cjs/components/tabs/parts/Tab.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),l=require("react-aria-components"),u=require("../Tabs.context.js"),T=require("../Tabs.variant.js"),a=b.forwardRef(({children:r,suffix:e,...s},n)=>{const{variant:o,scrollable:c}=u.useTabsContext(),{tab:i}=T.tabsVariant({variant:o,scrollable:c});return t.jsxs(l.Tab,{ref:n,...s,className:i(),children:[r,e?t.jsx("span",{children:e}):null]})});a.displayName="Tab";exports.Tab=a;

package/dist/cjs/components/tabs/parts/TabList.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),c=require("react-aria-components"),g=require("../Tabs.context.js"),L=require("../Tabs.variant.js"),u=require("./NavigationButton.js"),b=20,d=s.forwardRef(({children:o},a)=>{const r=s.useRef(null),[f,v]=s.useState(!1),[h,m]=s.useState(!0),{variant:x,scrollable:n}=g.useTabsContext(),{tabList:l}=L.tabsVariant({variant:x,scrollable:n}),y=t=>{const{scrollLeft:i,scrollWidth:S,clientWidth:T}=t.currentTarget;v(i>0),m(i+T<S)};return n?e.jsxs("div",{className:"uy-relative",children:[f&&e.jsx(u.NavigationButton,{direction:"left",onPress:()=>{var t;(t=r.current)==null||t.scrollBy({behavior:"smooth",left:-b})}}),e.jsx("div",{ref:r,"data-testid":"scrollable-tab-list",className:"uy-overflow-x-auto uy-overflow-y-hidden uy-border-b-[1.25px] uy-border-b-border-form-enabled",onScroll:y,children:e.jsx(c.TabList,{ref:a,className:l(),children:o})}),h&&e.jsx(u.NavigationButton,{direction:"right",onPress:()=>{var t;(t=r.current)==null||t.scrollBy({behavior:"smooth",left:b})}})]}):e.jsx(c.TabList,{ref:a,className:l(),children:o})});d.displayName="TabList";exports.TabList=d;

package/dist/cjs/components/text/Text.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),g=require("react"),u=require("./Text.variants.js"),b={inherit:"span",h1:"h1",h2:"h2",h3:"h3",h4:"h4",overline:"h6",subtitle:"h5",displayTitle:"h1",displayBody:"p",body:"p",bodyStrong:"strong",bodySmall:"small",bodySmallStrong:"strong",bodyLarge:"p",bodyLargeStrong:"strong",action:"span",actionLarge:"span",actionSmall:"span"},s=g.forwardRef(({children:o,variant:e,color:n,isTruncated:a,lineClamp:t,asElement:r,className:l,...i},c)=>{const d=t!==void 0,m=u.text({variant:e,color:n,isTruncated:a,isLineClamped:d,className:l}),y=b[e??"inherit"],h=r??y;return p.jsx(h,{...i,ref:c,className:m,style:{"--uy-text-line-clamp":t},children:o})});s.displayName="Text";exports.Text=s;