@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/button/Button.variants.d.cts

@@ -0,0 +1,536 @@
+import { VariantProps } from 'tailwind-variants';
+declare const buttonBase: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const buttonFilled: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>>;
+export declare const buttonOutlined: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+    };
+}, undefined, "uy-border uy-border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+    color: {
+        primary: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>>;
+export declare const buttonGhost: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        neutral: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        neutral: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>>;
+export type ButtonBase = VariantProps<typeof buttonBase>;
+export type ButtonFilled = VariantProps<typeof buttonFilled>;
+export type ButtonOutlined = VariantProps<typeof buttonOutlined>;
+export type ButtonGhost = VariantProps<typeof buttonGhost>;
+export {};

package/dist/cjs/components/checkbox/Checkbox.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),S=require("react-aria"),I=require("react-aria-components"),b=require("../text/Text.cjs"),w=require("./Checkbox.variants.cjs"),R=require("./parts/CheckboxIndicator.cjs"),x=r.forwardRef(({children:y,helperText:i,feedbackText:s,...t},m)=>{const a=S.useId(),{isDisabled:u,isReadOnly:h,isInvalid:n,isRequired:l,requiredVariant:o="required"}=t,{base:j,wrapper:p,asterisk:v,optionalTag:g,descriptionsContainer:q,helperText:N,feedbackText:f}=w.checkbox({isDisabled:u,isReadOnly:h,isInvalid:n}),c=[t["aria-labelledby"],`${a}-label`].filter(Boolean),d=[t["aria-describedby"],typeof i=="string"?`${a}-helper-text`:void 0,typeof s=="string"?`${a}-feedback-text`:void 0].filter(Boolean),k=c.length>0?c.join(" "):void 0,C=d.length>0?d.join(" "):void 0;return e.jsxs("div",{className:j(),children:[e.jsx(I.Checkbox,{...t,ref:m,className:p(),"aria-labelledby":k,"aria-describedby":C,children:$=>e.jsxs(e.Fragment,{children:[e.jsx(R.CheckboxIndicator,{...$,className:"uy-mr-[6px]"}),e.jsx("span",{id:`${a}-label`,className:"uy-leading-100","data-dd-privacy":"allow",children:y}),o==="required"&&l&&e.jsxs("span",{className:v(),children:["*",e.jsx("span",{className:"uy-sr-only",children:"required"})]}),o==="optional"&&!l&&e.jsx("span",{className:g(),children:"(optional)"})]})}),(i||s)&&e.jsxs("div",{className:q(),"data-dd-privacy":"allow",children:[typeof i=="string"?e.jsx(b.Text,{variant:"bodySmall",color:"content.neutral.low",id:`${a}-helper-text`,children:i}):r.isValidElement(i)&&r.cloneElement(i,{"data-id":`${a}-helper-text`,className:N()}),n&&(typeof s=="string"?e.jsx(b.Text,{variant:"bodySmallStrong",color:"content.form.invalid",id:`${a}-feedback-text`,children:s}):r.isValidElement(s)&&r.cloneElement(s,{"data-id":`${a}-feedback-text`,className:f()}))]})]})});x.displayName="Checkbox";exports.Checkbox=x;

package/dist/cjs/components/checkbox/Checkbox.d.cts

@@ -0,0 +1,102 @@
+import { ReactNode } from 'react';
+import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className'> {
+    /**
+     * The content to display as the checkbox label.
+     * This is required for accessibility.
+     */
+    children: ReactNode;
+    /**
+     * Additional text displayed below the checkbox to provide context or guidance.
+     * Can contain rich content like links or formatted text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error message displayed when the checkbox is in an invalid state.
+     * Only shown when `isInvalid` is true.
+     */
+    feedbackText?: ReactNode;
+    /**
+     * Controls how the required state is displayed.
+     * - 'required': Shows an asterisk (*) when isRequired is true
+     * - 'optional': Shows "(optional)" text when isRequired is false
+     * @default 'required'
+     */
+    requiredVariant?: 'required' | 'optional';
+    /**
+     * Whether the checkbox is disabled.
+     * When true, the checkbox cannot be interacted with and appears dimmed.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the checkbox is in a read-only state.
+     * When true, the checkbox cannot be modified but maintains normal appearance and can be focused.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the checkbox is in an invalid state.
+     * Use this for form validation feedback.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the checkbox is required.
+     * This affects form validation and the display of required/optional indicators.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Whether the checkbox is selected (controlled).
+     * Use this with `onChange` for controlled checkbox state.
+     */
+    isSelected?: boolean;
+    /**
+     * The default selected state (uncontrolled).
+     * Use this when you don't need to control the checkbox state.
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     * Useful for parent checkboxes in a tree structure.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Handler called when the checkbox's selected state changes.
+     * @param isSelected The new selected state
+     */
+    onChange?: (isSelected: boolean) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: () => void;
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * The name of the checkbox when used in a form.
+     */
+    name?: string;
+    /**
+     * The value of the checkbox when used in a form.
+     */
+    value?: string;
+}
+/**
+ * The `Checkbox` component is an accessible form control that allows users to select multiple options from a set.
+ * It follows WAI-ARIA checkbox patterns and is built on top of React Aria Components.
+ * @param {CheckboxProps} props - The props for the `Checkbox` component
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@payfit/unity-components'
+ *
+ * <Checkbox>Accept terms and conditions</Checkbox>
+ * ```
+ * @see {@link CheckboxProps} for all available props
+ */
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { Checkbox };

package/dist/cjs/components/checkbox/Checkbox.variants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),a=e.tv({slots:{base:"uy-group uy-inline-flex uy-flex-col uy-gap-50 uy-py-[1px]",wrapper:"uy-inline-flex uy-items-center uy-gap-[2px] uy-typography-body uy-text-content-form-enabled data-[focus-visible]:uy-outline data-[focus-visible]:uy-outline-[2px] data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-outline-offset-2 uy-rounded-25",asterisk:"uy-text-content-danger",optionalTag:"uy-typography-body",descriptionsContainer:"uy-ml-300 uy-leading-0 uy-inline-flex uy-flex-col uy-gap-50",helperText:"uy-typography-body-small uy-text-content-neutral-low",feedbackText:"uy-typography-body-small-strong uy-text-content-form-invalid"},variants:{isDisabled:{true:{base:"!uy-text-content-form-disabled"}},isInvalid:{true:{}},isReadOnly:{true:{base:"uy-cursor-not-allowed"}}},defaultVariants:{isDisabled:!1,isInvalid:!1,isReadOnly:!1},compoundVariants:[{isDisabled:!1,isReadOnly:!1,className:{wrapper:"uy-cursor-pointer"}},{isDisabled:!0,isReadOnly:!1,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!1,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!0,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}}]});exports.checkbox=a;