@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/icon-button/IconButton.variants.d.cts

@@ -0,0 +1,589 @@
+import { VariantProps } from 'tailwind-variants';
+export declare const iconButtonPrimary: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: string;
+    };
+    color: {
+        primary: string;
+        danger: string;
+        warning: string;
+        inverted: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        primary: string;
+    };
+    color: {
+        primary: string;
+        danger: string;
+        warning: string;
+        inverted: string;
+    };
+}, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}>, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}>, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}>, unknown, unknown, undefined>>>;
+export declare const iconButtonSecondary: import('tailwind-variants').TVReturnType<{
+    variant: {
+        secondary: {
+            button: string;
+        };
+    };
+    color: {
+        primary: string;
+        inverted: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        secondary: {
+            button: string;
+        };
+    };
+    color: {
+        primary: string;
+        inverted: string;
+    };
+}, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}>, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}>, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}>, unknown, unknown, undefined>>>;
+export declare const iconButtonGhost: import('tailwind-variants').TVReturnType<{
+    variant: {
+        ghost: string;
+    };
+    color: {
+        neutral: string;
+        primary: string;
+        danger: string;
+        warning: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        ghost: string;
+    };
+    color: {
+        neutral: string;
+        primary: string;
+        danger: string;
+        warning: string;
+    };
+}, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}>, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}>, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}>, unknown, unknown, undefined>>>;
+export type IconButtonPrimary = VariantProps<typeof iconButtonPrimary>;
+export type IconButtonSecondary = VariantProps<typeof iconButtonSecondary>;
+export type IconButtonGhost = VariantProps<typeof iconButtonGhost>;

package/dist/cjs/components/input/Input.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("react"),h=require("react-aria-components"),j=require("react-intl"),I=require("tailwind-variants"),q=require("../icon-button/CircularIconButton.cjs"),N=require("../icon/Icon.cjs"),M=require("../spinner/Spinner.cjs"),S=I.tv({slots:{base:"uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-border-border-form-active",prefix:"uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-r uy-border-solid uy-rounded-l-100 active:uy-border-border-form-active",inputWrapper:"uy-flex uy-gap-50 uy-flex-grow uy-flex-nowrap uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-75 uy-max-w-full uy-justify-between",input:"uy-w-full uy-flex-1 uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest uy-min-w-0 uy-max-w-full",state:"uy-flex uy-gap-50 uy-items-center uy-shrink-0",suffix:"uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100 active:uy-border-border-form-active"},variants:{isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error",prefix:"uy-bg-surface-form-error uy-border-border-form-error",inputWrapper:"uy-bg-surface-form-error",input:"uy-bg-surface-form-error",state:"uy-text-content-form-error",suffix:"uy-bg-surface-form-error uy-border-border-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",prefix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-readonly",inputWrapper:"uy-border-border-form-disabled uy-bg-surface-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-readonly",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-readonly"}},isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",prefix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled",inputWrapper:"uy-bg-surface-form-disabled uy-text-content-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",prefix:"uy-bg-surface-neutral-low uy-border-border-form-enabled uy-text-content-form-enabled",inputWrapper:"uy-border-border-form-enabled uy-bg-surface-form-enabled",input:"uy-text-content-form-enabled uy-bg-surface-form-enabled",state:"uy-text-content-neutral-disabled",suffix:"uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"}}]}),l=v.forwardRef(({type:y="text",prefix:d,suffix:s,isInvalid:i,isLoading:r,isDisabled:u,isReadOnly:o,onClearButtonPress:t,...a},f)=>{const n=j.useIntl(),{base:b,prefix:c,inputWrapper:m,input:p,state:x,suffix:g}=S({isInvalid:!!i,isReadOnly:!!o,isDisabled:!!u}),w=a.value&&!r&&!o&&!u;return delete a.isRequired,e.jsxs("div",{className:b(),children:[d?e.jsx("span",{className:c(),children:d}):null,e.jsxs("div",{className:m(),children:[e.jsx(h.Input,{"data-dd-privacy":"mask",...a,ref:f,type:y,className:p(),"aria-busy":r,readOnly:o,disabled:u}),e.jsxs("div",{className:x(),children:[r&&e.jsx(M.Spinner,{color:"inherit",size:"small",label:n.formatMessage({id:"unity:component:common:loading:label",defaultMessage:"Loading..."})}),i&&e.jsx(N.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:n.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),w&&e.jsx(q.CircularIconButton,{title:n.formatMessage({id:"unity:component:common:clear:title",defaultMessage:"Clear"}),className:"uy-text-content-neutral-enabled",icon:"CloseOutlined",onPress:()=>{t==null||t()}})]})]}),s?e.jsx("span",{className:g(),children:s}):null]})});l.displayName="Input";exports.Input=l;

package/dist/cjs/components/input/Input.d.cts

@@ -0,0 +1,48 @@
+import { ReactElement } from 'react';
+import { InputProps as AriaInputProps } from 'react-aria-components';
+export interface InputProps extends Omit<AriaInputProps, 'prefix' | 'style' | 'className'> {
+    /**
+     * The type of the input field
+     * @default 'text'
+     */
+    type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
+    /** Element to display before the input field */
+    prefix?: ReactElement;
+    /** Element to display after the input field */
+    suffix?: ReactElement;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /**
+     * Clear button click handler
+     */
+    onClearButtonPress?: () => void;
+}
+/**
+ * The `Input` components displays a styled, single HTML `<input>` field whose type is text-compatible (`text`, `password`, `email`, `tel`, `url`, `search`), and follows the Unity design system language. It supports multiple states out of the box and can be used as a controlled or uncontrolled component. It is also compatible with the `Form` and `FormField` component as a form control.
+ * @param {InputProps} props - Regular props from the `<input>` HTML element, plus state-related props
+ * @see {@link InputProps} for all available props
+ * @example
+ * ```tsx
+ * import { Input } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const [value, setValue] = useState()
+ *
+ *   const handleInputChange = (e) => {
+ *     setValue(e.target.value)
+ *   }
+ *
+ *   return <Input type="text" placeholder="write something..." value={value} onChange={handleInputChange} />
+ * }
+ * ```
+ */
+declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/cjs/components/label/Label.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),m=require("react-aria"),s=require("react-aria-components"),q=require("react-intl"),f=require("tailwind-variants"),x=f.tv({slots:{base:"uy-typography-body-strong uy-text-content-form-enabled uy-flex uy-gap-25",asterisk:"uy-text-content-danger",optionalTag:"uy-typography-body"},variants:{variant:{strong:{base:"uy-typography-body-strong"},body:{base:"uy-typography-body"}}},defaultVariants:{variant:"strong"}}),i=g.forwardRef(({children:l,...a},c)=>{const r=q.useIntl(),t=s.useSlottedContext(s.InputContext),d=m.mergeProps({isRequired:t==null?void 0:t["aria-required"]},a),{isRequired:n=!1,requiredVariant:o="required",...u}=d,{base:y,asterisk:p,optionalTag:b}=x();return e.jsxs(s.Label,{"data-dd-privacy":"allow",...u,ref:c,className:y({className:a.className}),children:[l,o==="required"&&n&&e.jsxs("span",{className:p(),children:["*",e.jsx("span",{className:"uy-sr-only",children:r.formatMessage({id:"unity:component:label:required",defaultMessage:"required"})})]}),o==="optional"&&!n&&e.jsx("span",{className:b({className:a.className}),children:r.formatMessage({id:"unity:component:label:optional",defaultMessage:"(optional)"})})]})});i.displayName="Label";exports.Label=i;

package/dist/cjs/components/label/Label.d.cts

@@ -0,0 +1,17 @@
+import { LabelProps as AriaLabelProps } from 'react-aria-components';
+export interface LabelProps extends AriaLabelProps {
+    /**
+     * Whether the field is required.
+     */
+    isRequired?: boolean;
+    /**
+     * The variant of the required label.
+     */
+    requiredVariant?: 'required' | 'optional';
+}
+/**
+ * FormLabel is a component that displays a label for a form field.
+ * It is used to provide context for the form field.
+ */
+declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist/cjs/components/link/Link.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),g=require("react"),f=require("@payfit/unity-icons"),w=require("react-aria-components"),x=require("../../providers/router/RouterProvider.cjs"),L=require("./Link.variants.cjs"),R=require("./utils.cjs"),l=g.forwardRef(({href:t,children:a,variant:u="inline",color:d="primary",isDisabled:o=!1,isExact:y=!1,isCurrent:p=void 0,isExternal:v,maxCharactersTruncation:n,...e},k)=>{const s=x.useRouter(),r=v??R.isExternalUrl(t),i=!r&&s?s.isActive(t.toString(),y):p,m=L.link({variant:u,color:d,isDisabled:o,isTruncated:!!n}),q=!!n;return c.jsxs(w.Link,{"data-dd-privacy":"allow",...e,href:t,ref:k,style:q?{"--uy-link-max-w":`${n}ch`}:{},className:m,isDisabled:o,target:r?"_blank":e.target,rel:r&&!e.rel?"noopener noreferrer":e.rel,...i!==void 0&&{"data-current":i,"aria-current":i?"page":void 0},children:[a,r&&c.jsx(f.IconSprite,{src:"ArrowSquareOutOutlined",color:"currentColor",width:"1em",height:"1em",role:"presentation",className:"uy-self-center uy-inline"})]})});l.displayName="Link";exports.Link=l;