@opexa/portal-components 0.0.1 → 0.0.3

package/dist/ui/Field/Field.d.ts

@@ -0,0 +1,303 @@
+import { Field } from '@ark-ui/react';
+export declare const Root: import("react").ComponentType<import("@ark-ui/react").Assign<Field.RootProps & import("react").RefAttributes<HTMLDivElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, {
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+export declare const Label: import("react").ComponentType<import("@ark-ui/react").Assign<Field.LabelProps & import("react").RefAttributes<HTMLLabelElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, {
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+export declare const Input: import("react").ComponentType<import("@ark-ui/react").Assign<Field.InputProps & import("react").RefAttributes<HTMLInputElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, {
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+export declare const HelperText: import("react").ComponentType<import("@ark-ui/react").Assign<Field.HelperTextProps & import("react").RefAttributes<HTMLSpanElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, {
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+export declare const ErrorText: import("react").ComponentType<import("@ark-ui/react").Assign<Field.ErrorTextProps & import("react").RefAttributes<HTMLSpanElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, {
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+export declare const Select: import("react").ComponentType<import("@ark-ui/react").Assign<Field.SelectProps & import("react").RefAttributes<HTMLSelectElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, {
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+export declare const Textarea: import("react").ComponentType<import("@ark-ui/react").Assign<Field.TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, {
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+export declare const Context: (props: Field.ContextProps) => import("react").ReactNode;

package/dist/ui/Field/Field.jsx

@@ -0,0 +1,13 @@
+'use client';
+import { Field } from '@ark-ui/react';
+import { createRecipeContext } from '../../utils/createRecipeContext';
+import { fieldRecipe } from './field.recipe';
+var _a = createRecipeContext(fieldRecipe), withContext = _a.withContext, withProvider = _a.withProvider;
+export var Root = withProvider(Field.Root, 'root');
+export var Label = withContext(Field.Label, 'label');
+export var Input = withContext(Field.Input, 'input');
+export var HelperText = withContext(Field.HelperText, 'helperText');
+export var ErrorText = withContext(Field.ErrorText, 'errorText');
+export var Select = withContext(Field.Select, 'select');
+export var Textarea = withContext(Field.Textarea, 'textarea');
+export var Context = Field.Context;

package/dist/ui/Field/field.recipe.d.ts

@@ -0,0 +1,43 @@
+export declare const fieldRecipe: import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, {
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            input: string;
+            select: string;
+            textarea: string;
+        };
+    };
+    variant: {
+        outline: {};
+    };
+    colorScheme: {
+        gray: {};
+    };
+}, Record<"select" | "input" | "label" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", string | string[]>, undefined, unknown, unknown, undefined>>;

package/dist/ui/Field/field.recipe.js

@@ -0,0 +1,47 @@
+import { fieldAnatomy } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { tv } from 'tailwind-variants';
+import { anatomyToRecipeSlots } from '../../utils/anatomyToRecipeSlots';
+var outlineGrayInputStyle = twMerge('border', 'bg-white', 'shadow-xs', 'border-gray-200', 'placeholder:text-gray-400', 'ui-invalid:border-red-400', 'disabled:opacity-50', 'disabled:shadow-none', 'read-only:opacity-50', 'read-only:shadow-none');
+export var fieldRecipe = tv({
+    slots: anatomyToRecipeSlots(fieldAnatomy, {
+        input: 'outer-spin:appearance-none inner-spin:appearance-none block w-full rounded-md outline-none',
+        select: 'block w-full rounded-md outline-none',
+        textarea: 'block w-full rounded-md outline-none',
+        label: 'text-gray-600 mb-sm inline-block text-sm font-medium',
+        errorText: 'text-red-600 mt-sm inline-block text-sm',
+        helperText: 'text-gray-500',
+        requiredIndicator: 'text-red-500 text-sm',
+    }),
+    variants: {
+        size: {
+            md: {
+                input: 'h-11 px-3.5',
+                select: 'h-11 px-3.5',
+                textarea: 'px-3.5 py-2.5',
+            },
+        },
+        variant: {
+            outline: {},
+        },
+        colorScheme: {
+            gray: {},
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'outline',
+            colorScheme: 'gray',
+            className: {
+                input: outlineGrayInputStyle,
+                select: outlineGrayInputStyle,
+                textarea: outlineGrayInputStyle,
+            },
+        },
+    ],
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+        colorScheme: 'gray',
+    },
+});

package/dist/ui/Field/index.d.ts

@@ -0,0 +1 @@
+export * as Field from './Field';

package/dist/ui/Field/index.js

@@ -0,0 +1 @@
+export * as Field from './Field';

package/dist/ui/IconButton/IconButton.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { Merge } from 'type-fest';
+import { type IconButtonRecipeProps } from './iconButton.recipe';
+export interface IconButtonProps extends Merge<ComponentPropsWithRef<'button'>, IconButtonRecipeProps> {
+    asChild?: boolean;
+}
+export declare function IconButton(props: IconButtonProps): import("react").JSX.Element;

package/dist/ui/IconButton/IconButton.jsx

@@ -0,0 +1,20 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { ark } from '@ark-ui/react';
+import { createSplitProps } from '../../utils/createSplitProps';
+import { dataAttr } from '../../utils/dataAttr';
+import { iconButtonRecipe, } from './iconButton.recipe';
+export function IconButton(props) {
+    var _a = createSplitProps(iconButtonRecipe.variantKeys)(props), recipeProps = _a[0], localProps = _a[1];
+    return (<ark.button type="button" {...localProps} className={iconButtonRecipe(__assign(__assign({}, recipeProps), { className: localProps.className }))} data-disabled={dataAttr(localProps.disabled)}/>);
+}

package/dist/ui/IconButton/iconButton.recipe.d.ts

@@ -0,0 +1,80 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const iconButtonRecipe: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, undefined, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+    };
+    colorScheme: {
+        primary: string;
+        danger: string;
+        gray: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+    };
+    colorScheme: {
+        primary: string;
+        danger: string;
+        gray: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, "shadow-xs inline-flex items-center justify-center rounded-md font-semibold disabled:shadow-none", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+    };
+    colorScheme: {
+        primary: string;
+        danger: string;
+        gray: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+    };
+    variant: {
+        solid: string;
+        outline: string;
+    };
+    colorScheme: {
+        primary: string;
+        danger: string;
+        gray: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, "shadow-xs inline-flex items-center justify-center rounded-md font-semibold disabled:shadow-none", unknown, unknown, undefined>>>;
+export type IconButtonRecipeProps = VariantProps<typeof iconButtonRecipe>;

package/dist/ui/IconButton/iconButton.recipe.js

@@ -0,0 +1,17 @@
+import { tv } from 'tailwind-variants';
+import { buttonRecipe } from '../Button/button.recipe';
+export var iconButtonRecipe = tv({
+    extend: buttonRecipe,
+    variants: {
+        size: {
+            sm: 'h-10 min-w-10 px-0',
+            md: 'h-11 min-w-11 px-0',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'solid',
+        colorScheme: 'primary',
+        fullWidth: false,
+    },
+});

package/dist/ui/IconButton/index.d.ts

@@ -0,0 +1 @@
+export * from './IconButton';

package/dist/ui/IconButton/index.js

@@ -0,0 +1 @@
+export * from './IconButton';

package/dist/ui/Menu/Menu.d.ts

@@ -0,0 +1,2 @@
+import { Menu } from '@ark-ui/react';
+export declare const Root: (props: Menu.RootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Menu/Menu.jsx

@@ -0,0 +1,3 @@
+'use client';
+import { Menu } from '@ark-ui/react';
+export var Root = Menu.Root;

package/dist/ui/Menu/index.d.ts

@@ -0,0 +1 @@
+export * as Menu from './Menu';

package/dist/ui/Menu/index.js

@@ -0,0 +1 @@
+export * as Menu from './Menu';

package/dist/ui/Menu/menu.recipe.js

@@ -0,0 +1 @@
+"use strict";