@coffer-org/web-ui 4.0.0

package/dist/components/ui/input-group.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+function InputGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30', 'h-9 min-w-0 has-[>textarea]:h-auto', 'has-[>[data-align=inline-start]]:[&>input]:pl-2', 'has-[>[data-align=inline-end]]:[&>input]:pr-2', 'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3', 'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3', 'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50', 'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40', className), ...props }));
+}
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    variants: {
+        align: {
+            'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+            'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+            'block-start': 'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
+            'block-end': 'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
+        },
+    },
+    defaultVariants: {
+        align: 'inline-start',
+    },
+});
+function InputGroupAddon({ className, align = 'inline-start', ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            if (e.target.closest('button')) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector('input')?.focus();
+        }, ...props }));
+}
+const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
+            'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+        },
+    },
+    defaultVariants: {
+        size: 'xs',
+    },
+});
+function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
+    return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupText({ className, ...props }) {
+    return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-control", className: cn('flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent', className), ...props }));
+}
+function InputGroupTextarea({ className, ...props }) {
+    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn('flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent', className), ...props }));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };

package/dist/components/ui/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/ui/input.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from "../../lib/utils.js";
+const Input = React.forwardRef(({ className, type, ...props }, ref) => (_jsx("input", { type: type, ref: ref, className: cn('flex h-9 w-full rounded-lg border border-input bg-background px-2 py-1 text-sm text-foreground transition-colors', 'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props })));
+Input.displayName = 'Input';
+export { Input };

package/dist/components/ui/label.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist/components/ui/label.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from "../../lib/utils.js";
+const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: cn('text-sm font-medium text-text leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className), ...props })));
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label };

package/dist/components/ui/mask-input.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+interface TransformOptions {
+    currency?: string;
+    locale?: string;
+}
+interface ValidateOptions {
+    min?: number;
+    max?: number;
+}
+interface MaskPattern {
+    pattern: string;
+    transform?: (value: string, opts?: TransformOptions) => string;
+    validate?: (value: string, opts?: ValidateOptions) => boolean;
+}
+type MaskPatternKey = 'phone' | 'ssn' | 'date' | 'time' | 'creditCard' | 'creditCardExpiry' | 'zipCode' | 'zipCodeExtended' | 'currency' | 'percentage' | 'licensePlate' | 'ipv4' | 'macAddress' | 'isbn' | 'ein';
+declare const MASK_PATTERNS: Record<MaskPatternKey, MaskPattern>;
+declare function applyMask(opts: {
+    value: string;
+    pattern: string;
+    currency?: string;
+    locale?: string;
+    mask?: MaskPatternKey | MaskPattern;
+}): string;
+declare function applyCurrencyMask(opts: {
+    value: string;
+    currency?: string;
+    locale?: string;
+}): string;
+declare function applyPercentageMask(value: string): string;
+declare function getUnmaskedValue(opts: {
+    value: string;
+    currency?: string;
+    locale?: string;
+    transform?: (value: string, opts?: TransformOptions) => string;
+}): string;
+declare function toUnmaskedIndex(opts: {
+    masked: string;
+    pattern: string;
+    caret: number;
+}): number;
+declare function fromUnmaskedIndex(opts: {
+    masked: string;
+    pattern: string;
+    unmaskedIndex: number;
+}): number;
+interface MaskInputProps extends React.ComponentProps<'input'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (maskedValue: string, unmaskedValue: string) => void;
+    onValidate?: (isValid: boolean, unmaskedValue: string) => void;
+    validationMode?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+    mask?: MaskPatternKey | MaskPattern;
+    maskPlaceholder?: string;
+    currency?: string;
+    locale?: string;
+    asChild?: boolean;
+    invalid?: boolean;
+    withoutMask?: boolean;
+}
+declare function MaskInput(props: MaskInputProps): React.JSX.Element;
+export { applyCurrencyMask, applyMask, applyPercentageMask, fromUnmaskedIndex, getUnmaskedValue, MASK_PATTERNS, MaskInput, type MaskInputProps, type MaskPattern, toUnmaskedIndex, };