azamat-ui-kit 0.1.1 → 0.2.0

package/dist/components/display/statistic.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Card } from "@/components/ui/card";
+export type StatisticTrend = "up" | "down" | "neutral";
+export type StatisticProps = React.ComponentProps<"div"> & {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    description?: React.ReactNode;
+    trend?: StatisticTrend;
+    change?: React.ReactNode;
+    loading?: boolean;
+};
+declare function Statistic({ label, value, prefix, suffix, description, trend, change, loading, className, ...props }: StatisticProps): React.JSX.Element;
+export type StatisticCardProps = React.ComponentProps<typeof Card> & StatisticProps & {
+    action?: React.ReactNode;
+};
+declare function StatisticCard({ action, label, value, prefix, suffix, description, trend, change, loading, className, ...props }: StatisticCardProps): React.JSX.Element;
+export type StatisticGridProps = React.ComponentProps<"div"> & {
+    columns?: 1 | 2 | 3 | 4;
+};
+declare function StatisticGrid({ columns, className, ...props }: StatisticGridProps): React.JSX.Element;
+export { Statistic, StatisticCard, StatisticGrid };

package/dist/components/display/tag-list.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Badge } from "@/components/ui/badge";
+export type TagListItem = {
+    key: string;
+    label: React.ReactNode;
+    variant?: React.ComponentProps<typeof Badge>["variant"];
+    disabled?: boolean;
+};
+export type TagListProps = React.ComponentProps<"div"> & {
+    items: TagListItem[];
+    max?: number;
+    removable?: boolean;
+    onRemove?: (item: TagListItem) => void;
+    overflowLabel?: (count: number) => React.ReactNode;
+};
+declare function TagList({ items, max, removable, onRemove, overflowLabel, className, ...props }: TagListProps): React.JSX.Element;
+export { TagList };

package/dist/components/display/tree-view.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export type TreeViewItem = {
+    key: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    extra?: React.ReactNode;
+    children?: TreeViewItem[];
+    disabled?: boolean;
+};
+export type TreeViewProps = React.ComponentProps<"div"> & {
+    items: TreeViewItem[];
+    defaultExpandedKeys?: string[];
+    expandedKeys?: string[];
+    onExpandedKeysChange?: (keys: string[]) => void;
+    selectedKey?: string;
+    onSelect?: (item: TreeViewItem) => void;
+};
+declare function TreeView({ items, defaultExpandedKeys, expandedKeys, onExpandedKeysChange, selectedKey, onSelect, className, ...props }: TreeViewProps): React.JSX.Element;
+export { TreeView };

package/dist/components/display/user-card.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { type AvatarProps } from "@/components/display/avatar";
+import { Card } from "@/components/ui/card";
+export type UserCardProps = React.ComponentProps<typeof Card> & {
+    name: React.ReactNode;
+    description?: React.ReactNode;
+    meta?: React.ReactNode;
+    avatar?: AvatarProps;
+    actions?: React.ReactNode;
+    selected?: boolean;
+};
+declare function UserCard({ name, description, meta, avatar, actions, selected, className, ...props }: UserCardProps): React.JSX.Element;
+export { UserCard };

package/dist/components/feedback/alert.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type AlertTone = "info" | "success" | "warning" | "destructive" | "muted";
+export type AlertProps = React.ComponentProps<"div"> & {
+    tone?: AlertTone;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+};
+declare function Alert({ tone, title, description, icon, action, className, children, ...props }: AlertProps): React.JSX.Element;
+export { Alert };

package/dist/components/feedback/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./empty-state";
 export * from "./loading-state";
 export * from "./status-badge";
+export * from "./alert";
+export * from "./page-state";

package/dist/components/feedback/page-state.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export type PageStateTone = "empty" | "loading" | "error" | "success" | "info";
+export type PageStateProps = React.ComponentProps<"div"> & {
+    tone?: PageStateTone;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    compact?: boolean;
+};
+declare function PageState({ tone, title, description, icon, action, compact, className, ...props }: PageStateProps): React.JSX.Element;
+export type InlineStateProps = Omit<PageStateProps, "compact"> & {
+    retryLabel?: React.ReactNode;
+    onRetry?: () => void;
+};
+declare function InlineState({ retryLabel, onRetry, action, className, ...props }: InlineStateProps): React.JSX.Element;
+export { InlineState, PageState };

package/dist/components/inputs/async-select.d.ts

@@ -3,6 +3,7 @@ export type AsyncSelectOption<TValue extends string = string, TData = unknown> =
     value: TValue;
     label: React.ReactNode;
     disabled?: boolean;
+    disabledReason?: React.ReactNode;
     description?: React.ReactNode;
     data?: TData;
 };
@@ -37,8 +38,8 @@ export type AsyncSelectProps<TValue extends string = string, TData = unknown, TO
     value?: TValue;
     selectedOption?: TOption | null;
     onValueChange?: (value: TValue | undefined, option?: TOption) => void;
-    loadOptions: (search: string) => Promise<AsyncSelectOptionsResult<TValue, TData, TOption>>;
-    loadSelectedOption?: (value: TValue) => Promise<TOption | null | undefined>;
+    loadOptions: (search: string, signal?: AbortSignal) => Promise<AsyncSelectOptionsResult<TValue, TData, TOption>>;
+    loadSelectedOption?: (value: TValue, signal?: AbortSignal) => Promise<TOption | null | undefined>;
     defaultOptions?: AsyncSelectOptionsResult<TValue, TData, TOption>;
     disabled?: boolean;
     clearable?: boolean;
@@ -67,8 +68,8 @@ export type AsyncMultiSelectProps<TValue extends string = string, TData = unknow
     value?: TValue[];
     selectedOptions?: TOption[];
     onValueChange?: (value: TValue[], options: TOption[]) => void;
-    loadOptions: (search: string) => Promise<AsyncSelectOptionsResult<TValue, TData, TOption>>;
-    loadSelectedOptions?: (values: TValue[]) => Promise<TOption[]>;
+    loadOptions: (search: string, signal?: AbortSignal) => Promise<AsyncSelectOptionsResult<TValue, TData, TOption>>;
+    loadSelectedOptions?: (values: TValue[], signal?: AbortSignal) => Promise<TOption[]>;
     defaultOptions?: AsyncSelectOptionsResult<TValue, TData, TOption>;
     disabled?: boolean;
     clearable?: boolean;

package/dist/components/inputs/color-input.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type ColorInputProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    swatchClassName?: string;
+};
+declare function ColorInput({ value, defaultValue, onValueChange, label, description, swatchClassName, className, disabled, ...props }: ColorInputProps): React.JSX.Element;
+export { ColorInput };

package/dist/components/inputs/index.d.ts

@@ -1,14 +1,18 @@
-export * from "./simple-select";
-export * from "./async-select";
-export * from "./clearable-input";
-export * from "./search-input";
-export * from "./password-input";
-export * from "./number-input";
-export * from "./date-input";
-export * from "./date-range-input";
-export * from "./money-input";
-export * from "./quantity-input";
-export * from "./masked-input";
-export * from "./phone-input";
-export * from "./tag-input";
-export * from "./combobox";
+export * from './simple-select';
+export * from './async-select';
+export * from './clearable-input';
+export * from './search-input';
+export * from './password-input';
+export * from './number-input';
+export * from './date-input';
+export * from './date-range-input';
+export * from './money-input';
+export * from './quantity-input';
+export * from './masked-input';
+export * from './phone-input';
+export * from './tag-input';
+export * from './combobox';
+export * from './rating';
+export * from './slider';
+export * from './otp-input';
+export * from './color-input';

package/dist/components/inputs/otp-input.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export type OtpInputProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    length?: number;
+    disabled?: boolean;
+    inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
+    pattern?: string;
+    mask?: boolean;
+    labels?: {
+        group?: string;
+        cell?: (index: number) => string;
+    };
+};
+declare function OtpInput({ value, defaultValue, onValueChange, length, disabled, inputMode, pattern, mask, labels, className, ...props }: OtpInputProps): React.JSX.Element;
+export { OtpInput };

package/dist/components/inputs/rating.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export type RatingProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    count?: number;
+    allowClear?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    labels?: {
+        rate?: (value: number) => string;
+        clear?: string;
+    };
+    icon?: React.ReactNode;
+};
+declare function Rating({ value, defaultValue, onValueChange, count, allowClear, disabled, readOnly, labels, icon, className, ...props }: RatingProps): React.JSX.Element;
+export { Rating };

package/dist/components/inputs/slider.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export type SliderProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    showValue?: boolean;
+    formatValue?: (value: number) => React.ReactNode;
+};
+declare function Slider({ value, defaultValue, onValueChange, min, max, step, label, description, showValue, formatValue, className, disabled, ...props }: SliderProps): React.JSX.Element;
+export type RangeSliderValue = [number, number];
+export type RangeSliderProps = Omit<SliderProps, "value" | "defaultValue" | "onValueChange" | "showValue" | "formatValue"> & {
+    value?: RangeSliderValue;
+    defaultValue?: RangeSliderValue;
+    onValueChange?: (value: RangeSliderValue) => void;
+    showValue?: boolean;
+    formatValue?: (value: RangeSliderValue) => React.ReactNode;
+};
+declare function RangeSlider({ value, defaultValue, onValueChange, min, max, step, label, description, showValue, formatValue, className, disabled, }: RangeSliderProps): React.JSX.Element;
+export { RangeSlider, Slider };

package/dist/components/layout/index.d.ts

@@ -6,3 +6,5 @@ export * from "./stat-card";
 export * from "./sidebar-nav";
 export * from "./breadcrumbs";
 export * from "./page-container";
+export * from "./section";
+export * from "./sticky-footer-bar";

package/dist/components/layout/section.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export type SectionProps = React.ComponentProps<"section"> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    padded?: boolean;
+    bordered?: boolean;
+};
+declare function Section({ title, description, actions, padded, bordered, className, children, ...props }: SectionProps): React.JSX.Element;
+export type ToolbarProps = React.ComponentProps<"div"> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    filters?: React.ReactNode;
+    actions?: React.ReactNode;
+};
+declare function Toolbar({ title, description, filters, actions, className, children, ...props }: ToolbarProps): React.JSX.Element;
+export type SplitLayoutProps = React.ComponentProps<"div"> & {
+    aside: React.ReactNode;
+    asidePosition?: "start" | "end";
+    asideClassName?: string;
+    contentClassName?: string;
+};
+declare function SplitLayout({ aside, asidePosition, asideClassName, contentClassName, className, children, ...props }: SplitLayoutProps): React.JSX.Element;
+export { Section, SplitLayout, Toolbar };

package/dist/components/layout/sticky-footer-bar.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type StickyFooterBarProps = React.ComponentProps<"div"> & {
+    start?: React.ReactNode;
+    end?: React.ReactNode;
+};
+declare function StickyFooterBar({ start, end, className, children, ...props }: StickyFooterBarProps): React.JSX.Element;
+export { StickyFooterBar };

package/dist/components/navigation/anchor-nav.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type AnchorNavItem = {
+    key: string;
+    label: React.ReactNode;
+    href: string;
+    active?: boolean;
+    disabled?: boolean;
+};
+export type AnchorNavProps = React.ComponentProps<"nav"> & {
+    items: AnchorNavItem[];
+    orientation?: "vertical" | "horizontal";
+    title?: React.ReactNode;
+};
+declare function AnchorNav({ items, orientation, title, className, ...props }: AnchorNavProps): React.JSX.Element;
+export { AnchorNav };

package/dist/components/navigation/index.d.ts

@@ -1,3 +1,4 @@
-export * from "./pagination";
-export * from "./page-tabs";
-export * from "./stepper-tabs";
+export * from './pagination';
+export * from './page-tabs';
+export * from './stepper-tabs';
+export * from './anchor-nav';

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+export type CollapseProps = React.ComponentProps<"details"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare function Collapse({ open, defaultOpen, onOpenChange, onToggle, className, children, ...props }: CollapseProps): React.JSX.Element;
+export type CollapseTriggerProps = React.ComponentProps<"summary"> & {
+    icon?: React.ReactNode;
+    hideIcon?: boolean;
+};
+declare function CollapseTrigger({ icon, hideIcon, className, children, ...props }: CollapseTriggerProps): React.JSX.Element;
+declare function CollapseContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export type CollapseItem = {
+    key: string;
+    title: React.ReactNode;
+    content: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+};
+export type CollapseGroupProps = React.ComponentProps<"div"> & {
+    items: CollapseItem[];
+    type?: "single" | "multiple";
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+};
+declare function CollapseGroup({ items, type, value, defaultValue, onValueChange, className, ...props }: CollapseGroupProps): React.JSX.Element;
+export { Collapse, CollapseContent, CollapseGroup, CollapseTrigger };

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+export type DividerProps = React.ComponentProps<"div"> & {
+    orientation?: "horizontal" | "vertical";
+    dashed?: boolean;
+    label?: React.ReactNode;
+    labelPosition?: "start" | "center" | "end";
+};
+declare function Divider({ orientation, dashed, label, labelPosition, className, ...props }: DividerProps): React.JSX.Element;
+export { Divider };

package/dist/components/ui/segmented-control.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export type SegmentedControlOption<TValue extends string = string> = {
+    value: TValue;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+};
+export type SegmentedControlProps<TValue extends string = string> = Omit<React.ComponentProps<"div">, "onChange"> & {
+    value?: TValue;
+    defaultValue?: TValue;
+    onValueChange?: (value: TValue) => void;
+    options: SegmentedControlOption<TValue>[];
+    size?: "sm" | "md" | "lg";
+    fullWidth?: boolean;
+};
+declare function SegmentedControl<TValue extends string = string>({ value, defaultValue, onValueChange, options, size, fullWidth, className, ...props }: SegmentedControlProps<TValue>): React.JSX.Element;
+export { SegmentedControl };

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+export type SkeletonProps = React.ComponentProps<"div"> & {
+    rounded?: "sm" | "md" | "lg" | "full";
+    animated?: boolean;
+};
+declare function Skeleton({ rounded, animated, className, ...props }: SkeletonProps): React.JSX.Element;
+export type SkeletonTextProps = React.ComponentProps<"div"> & {
+    rows?: number;
+    lastRowWidth?: string;
+};
+declare function SkeletonText({ rows, lastRowWidth, className, ...props }: SkeletonTextProps): React.JSX.Element;
+export type SkeletonCardProps = React.ComponentProps<"div"> & {
+    avatar?: boolean;
+    rows?: number;
+};
+declare function SkeletonCard({ avatar, rows, className, ...props }: SkeletonCardProps): React.JSX.Element;
+export { Skeleton, SkeletonCard, SkeletonText };

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type SpinnerProps = React.ComponentProps<"span"> & {
+    size?: "xs" | "sm" | "md" | "lg";
+    label?: string;
+};
+declare function Spinner({ size, label, className, ...props }: SpinnerProps): React.JSX.Element;
+export type LoadingOverlayProps = React.ComponentProps<"div"> & {
+    loading?: boolean;
+    label?: string;
+};
+declare function LoadingOverlay({ loading, label, className, children, ...props }: LoadingOverlayProps): React.JSX.Element;
+export { LoadingOverlay, Spinner };

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+export type TooltipProps = React.ComponentProps<"span"> & {
+    content: React.ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    disabled?: boolean;
+};
+declare function Tooltip({ content, side, disabled, className, children, ...props }: TooltipProps): React.JSX.Element;
+export { Tooltip };

package/dist/components/upload/file-upload.d.ts

@@ -5,6 +5,14 @@ export type FileUploadRejectedFile = {
     reason: FileUploadRejectReason;
     message: string;
 };
+export type FileUploadRejectionMessageContext = {
+    file: File;
+    reason: FileUploadRejectReason;
+    maxFiles?: number;
+    maxSize?: number;
+    accept?: string;
+};
+export type FileUploadRejectionMessages = Partial<Record<FileUploadRejectReason, string | ((context: FileUploadRejectionMessageContext) => string)>>;
 export type FileUploadRenderFileState = {
     file: File;
     index: number;
@@ -33,6 +41,8 @@ export type FileUploadProps = NativeFileInputProps & {
     helperText?: React.ReactNode;
     clearLabel?: React.ReactNode;
     removeLabel?: string;
+    dropzoneAriaLabel?: string;
+    rejectionMessages?: FileUploadRejectionMessages;
     maxFiles?: number;
     maxSize?: number;
     appendFiles?: boolean;
@@ -57,5 +67,5 @@ export type FileUploadProps = NativeFileInputProps & {
 declare function formatBytes(bytes: number): string;
 declare function fileMatchesAccept(file: File, accept?: string): boolean;
 declare function getFileKey(file: File): string;
-declare function FileUpload({ files, onFilesChange, rejectedFiles, onRejectedFilesChange, buttonLabel, dropzoneLabel, dropzoneDescription, dragActiveLabel, helperText, clearLabel, removeLabel, maxFiles, maxSize, appendFiles, showFileList, showClearButton, loading, progress, renderFile, renderRejectedFile, renderActions, className, inputClassName, dropzoneClassName, fileListClassName, fileItemClassName, rejectedListClassName, accept, multiple, disabled, onDragEnter, onDragLeave, onDragOver, onDrop, ...props }: FileUploadProps): React.JSX.Element;
+declare function FileUpload({ files, onFilesChange, rejectedFiles, onRejectedFilesChange, buttonLabel, dropzoneLabel, dropzoneDescription, dragActiveLabel, helperText, clearLabel, removeLabel, dropzoneAriaLabel, rejectionMessages, maxFiles, maxSize, appendFiles, showFileList, showClearButton, loading, progress, renderFile, renderRejectedFile, renderActions, className, inputClassName, dropzoneClassName, fileListClassName, fileItemClassName, rejectedListClassName, accept, multiple, disabled, onDragEnter, onDragLeave, onDragOver, onDrop, ...props }: FileUploadProps): React.JSX.Element;
 export { FileUpload, fileMatchesAccept, formatBytes, getFileKey };