@ufoui/core 0.0.4 → 0.0.12

package/components/collapse/collapse.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { BoxBaseProps } from '../base';
+import { MotionAnimation, MotionStyle } from '../../types';
+/**
+ * Props for the Collapse component.
+ *
+ * @category Collapse
+ */
+export interface CollapseProps extends Omit<BoxBaseProps, 'elevation'> {
+    /** Motion animation key. Default: slideDown. */
+    animation?: MotionAnimation;
+    /** Content rendered inside the container. */
+    children?: ReactNode;
+    /** Additional root class name. */
+    className?: string;
+    /** Animation duration in milliseconds. Default: 220. */
+    duration?: number;
+    /** Motion style variant. */
+    motionStyle?: MotionStyle;
+    /** Controls whether the container is expanded. */
+    open: boolean;
+}
+/**
+ * Animated container that expands and collapses vertically.
+ *
+ * Animates height and integrates with the UUI motion system.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Collapse
+ */
+export declare const Collapse: import('react').ForwardRefExoticComponent<CollapseProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/dialogs/bottomSheet.d.ts

@@ -0,0 +1,23 @@
+import { DialogBaseProps } from '../base/dialogBase';
+/**
+ * Props for {@link BottomSheet}.
+ * Extends {@link DialogBaseProps}.
+ *
+ * @category BottomSheet
+ */
+export type BottomSheetProps = Omit<DialogBaseProps, 'elementClass' | 'type'>;
+/**
+ * Bottom sheet component used to display supplementary content anchored to the bottom of the screen.
+ *
+ * Use for actions, filters, or contextual mobile interactions.
+ *
+ * @category BottomSheet
+ * @function
+ * @param props - All bottom sheet props inherited from {@link DialogBase}.
+ *
+ * @example
+ * <BottomSheet open onClose={() => setOpen(false)}>
+ *   Content
+ * </BottomSheet>
+ */
+export declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/dialogs/dialog.d.ts

@@ -0,0 +1,21 @@
+import { DialogBaseProps } from '../base';
+/**
+ * Props for {@link Dialog}.
+ * Extends {@link DialogBaseProps}.
+ *
+ * @category Dialog
+ */
+export type DialogProps = Omit<DialogBaseProps, 'elementClass'>;
+/**
+ * Dialog component used to display modal or non-modal content above the app layer.
+ *
+ * @category Dialog
+ * @function
+ * @param props - All dialog props inherited from {@link DialogBase}.
+ *
+ * @example
+ * <Dialog open onClose={() => setOpen(false)}>
+ *   Content
+ * </Dialog>
+ */
+export declare const Dialog: import('react').ForwardRefExoticComponent<DialogProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/{dialog → dialogs}/dialogActions.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { ElementOutline } from '../../utils/utils.ts';
-import { BorderColor, SurfaceColor } from '../../utils/color';
+import { BorderColor, ElementOutline, SurfaceColor } from '../../utils';
 export interface DialogActionsProps {
     children?: ReactNode;
     className?: string;

package/components/{dialog → dialogs}/dialogTitle.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { ElementFont } from '../../utils/utils.ts';
-import { SurfaceColor } from '../../utils/color';
+import { ElementFont, SurfaceColor } from '../../utils';
 export interface DialogTitleProps {
     icon?: ReactNode;
     label?: string;
@@ -11,6 +10,6 @@ export interface DialogTitleProps {
     textColor?: SurfaceColor;
 }
 export declare const DialogTitle: {
-    ({ icon, label, children, className, font, }: DialogTitleProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ icon, label, children, className, font }: DialogTitleProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/components/dialogs/drawer.d.ts

@@ -0,0 +1,23 @@
+import { DialogBaseProps } from '../base';
+/**
+ * Props for {@link Drawer}.
+ * Extends {@link DialogBaseProps}.
+ *
+ * @category Drawer
+ */
+export type DrawerProps = Omit<DialogBaseProps, 'elementClass' | 'type'>;
+/**
+ * Drawer component used to display side content that slides in from the edge of the screen.
+ *
+ * Use for navigation panels, filters, or contextual content.
+ *
+ * @category Drawer
+ * @function
+ * @param props - All drawer props inherited from {@link DialogBase}.
+ *
+ * @example
+ * <Drawer open onClose={() => setOpen(false)}>
+ *   Content
+ * </Drawer>
+ */
+export declare const Drawer: import('react').ForwardRefExoticComponent<DrawerProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/dialogs/index.d.ts

@@ -0,0 +1,6 @@
+export * from './dialog';
+export * from './dialogActions';
+export * from './dialogContent';
+export * from './dialogTitle';
+export * from './drawer';
+export * from './bottomSheet';

package/components/divider/divider.d.ts

@@ -1,5 +1,5 @@
 import { HTMLProps } from 'react';
-import { BorderColor, ElementBorder, ElementElevation, ElementInset, ElementShape } from '../../index.ts';
+import { BorderColor, ElementBorder, ElementElevation, ElementInset, ElementShape } from '../../utils';
 import { IS_DIVIDER } from './divider.guards';
 /**
  * Props for the {@link Divider} component.

package/components/divider/divider.guards.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { DividerProps } from '../../index.ts';
+import { DividerProps } from './divider';
 export declare const IS_DIVIDER: unique symbol;
 /**
  * Type guard that checks whether a React node is a Divider component.

package/components/fab/fab.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { ButtonBaseProps } from '../../index.ts';
+import { ButtonBaseProps } from '../base/buttonBase';
 /**
  * Props for {@link Fab}.
  * Extends {@link ButtonBaseProps}.

package/components/fields/dateField.d.ts

@@ -0,0 +1,24 @@
+import { FieldBaseProps } from '../base/fieldBase';
+/**
+ * Props for {@link DateField}.
+ * Extends {@link FieldBaseProps}.
+ *
+ * @category DateField
+ */
+export type DateFieldProps = Omit<FieldBaseProps, 'elementClass' | 'type'>;
+/**
+ * Date field component used to enter date values.
+ *
+ * Use for selecting calendar dates in forms.
+ *
+ * @category DateField
+ * @function
+ * @param props - All field props inherited from {@link FieldBase}.
+ *
+ * @example
+ * <DateField label="Label" />
+ *
+ * @example
+ * <DateField required />
+ */
+export declare const DateField: import('react').ForwardRefExoticComponent<DateFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fields/dateTimeField.d.ts

@@ -0,0 +1,24 @@
+import { FieldBaseProps } from '../base/fieldBase';
+/**
+ * Props for {@link DateTimeField}.
+ * Extends {@link FieldBaseProps}.
+ *
+ * @category DateTimeField
+ */
+export type DateTimeFieldProps = Omit<FieldBaseProps, 'elementClass' | 'type'>;
+/**
+ * Date and time field component used to enter combined date and time values.
+ *
+ * Use for scheduling and time-based form input.
+ *
+ * @category DateTimeField
+ * @function
+ * @param props - All field props inherited from {@link FieldBase}.
+ *
+ * @example
+ * <DateTimeField label="Label" />
+ *
+ * @example
+ * <DateTimeField required />
+ */
+export declare const DateTimeField: import('react').ForwardRefExoticComponent<DateTimeFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fields/emailField.d.ts

@@ -0,0 +1,24 @@
+import { FieldBaseProps } from '../base/fieldBase';
+/**
+ * Props for {@link EmailField}.
+ * Extends {@link FieldBaseProps}.
+ *
+ * @category EmailField
+ */
+export type EmailFieldProps = Omit<FieldBaseProps, 'elementClass' | 'type'>;
+/**
+ * Email field component used to enter email addresses.
+ *
+ * Use for collecting email contact information in forms.
+ *
+ * @category EmailField
+ * @function
+ * @param props - All field props inherited from {@link FieldBase}.
+ *
+ * @example
+ * <EmailField label="Label" />
+ *
+ * @example
+ * <EmailField required />
+ */
+export declare const EmailField: import('react').ForwardRefExoticComponent<EmailFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fields/index.d.ts

@@ -0,0 +1,11 @@
+export * from './textField';
+export * from './numberField';
+export * from './emailField';
+export * from './phoneField';
+export * from './passwordField';
+export * from './dateField';
+export * from './dateTimeField';
+export * from './timeField';
+export * from './monthField';
+export * from './weekField';
+export * from './urlField';

package/components/fields/monthField.d.ts

@@ -0,0 +1,24 @@
+import { FieldBaseProps } from '../base/fieldBase';
+/**
+ * Props for {@link MonthField}.
+ * Extends {@link FieldBaseProps}.
+ *
+ * @category MonthField
+ */
+export type MonthFieldProps = Omit<FieldBaseProps, 'elementClass' | 'type'>;
+/**
+ * Month field component used to enter month and year values.
+ *
+ * Use for selecting calendar months in forms.
+ *
+ * @category MonthField
+ * @function
+ * @param props - All field props inherited from {@link FieldBase}.
+ *
+ * @example
+ * <MonthField label="Label" />
+ *
+ * @example
+ * <MonthField required />
+ */
+export declare const MonthField: import('react').ForwardRefExoticComponent<MonthFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fields/numberField.d.ts

@@ -0,0 +1,24 @@
+import { FieldBaseProps } from '../base/fieldBase';
+/**
+ * Props for {@link NumberField}.
+ * Extends {@link FieldBaseProps}.
+ *
+ * @category NumberField
+ */
+export type NumberFieldProps = Omit<FieldBaseProps, 'elementClass' | 'type'>;
+/**
+ * Number field component used to enter numeric values.
+ *
+ * Use for quantities, amounts, and other number-based input.
+ *
+ * @category NumberField
+ * @function
+ * @param props - All field props inherited from {@link FieldBase}.
+ *
+ * @example
+ * <NumberField label="Label" />
+ *
+ * @example
+ * <NumberField required />
+ */
+export declare const NumberField: import('react').ForwardRefExoticComponent<NumberFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fields/passwordField.d.ts

@@ -0,0 +1,24 @@
+import { FieldBaseProps } from '../base/fieldBase';
+/**
+ * Props for {@link PasswordField}.
+ * Extends {@link FieldBaseProps}.
+ *
+ * @category PasswordField
+ */
+export type PasswordFieldProps = Omit<FieldBaseProps, 'elementClass' | 'type'>;
+/**
+ * Password field component used to enter secure text input.
+ *
+ * Use for authentication and protected form data.
+ *
+ * @category PasswordField
+ * @function
+ * @param props - All field props inherited from {@link FieldBase}.
+ *
+ * @example
+ * <PasswordField label="Label" />
+ *
+ * @example
+ * <PasswordField required />
+ */
+export declare const PasswordField: import('react').ForwardRefExoticComponent<PasswordFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fields/phoneField.d.ts

@@ -0,0 +1,24 @@
+import { FieldBaseProps } from '../base/fieldBase';
+/**
+ * Props for {@link PhoneField}.
+ * Extends {@link FieldBaseProps}.
+ *
+ * @category PhoneField
+ */
+export type PhoneFieldProps = Omit<FieldBaseProps, 'elementClass' | 'type'>;
+/**
+ * Phone field component used to enter telephone numbers.
+ *
+ * Use for collecting contact phone information in forms.
+ *
+ * @category PhoneField
+ * @function
+ * @param props - All field props inherited from {@link FieldBase}.
+ *
+ * @example
+ * <PhoneField label="Label" />
+ *
+ * @example
+ * <PhoneField required />
+ */
+export declare const PhoneField: import('react').ForwardRefExoticComponent<PhoneFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fields/textField.d.ts

@@ -0,0 +1,24 @@
+import { FieldBaseProps } from '../base';
+/**
+ * Props for {@link TextField}.
+ * Extends {@link FieldBaseProps}.
+ *
+ * @category TextField
+ */
+export type TextFieldProps = Omit<FieldBaseProps, 'elementClass'>;
+/**
+ * Text field component used to collect user input.
+ *
+ * Use for forms, search, and general data entry.
+ *
+ * @category TextField
+ * @function
+ * @param props - All field props inherited from {@link FieldBase}.
+ *
+ * @example
+ * <TextField label="Label" />
+ *
+ * @example
+ * <TextField placeholder="Enter value" />
+ */
+export declare const TextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fields/timeField.d.ts

@@ -0,0 +1,24 @@
+import { FieldBaseProps } from '../base/fieldBase';
+/**
+ * Props for {@link TimeField}.
+ * Extends {@link FieldBaseProps}.
+ *
+ * @category TimeField
+ */
+export type TimeFieldProps = Omit<FieldBaseProps, 'elementClass' | 'type'>;
+/**
+ * Time field component used to enter time values.
+ *
+ * Use for selecting hours and minutes in forms.
+ *
+ * @category TimeField
+ * @function
+ * @param props - All field props inherited from {@link FieldBase}.
+ *
+ * @example
+ * <TimeField label="Label" />
+ *
+ * @example
+ * <TimeField required />
+ */
+export declare const TimeField: import('react').ForwardRefExoticComponent<TimeFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fields/urlField.d.ts

@@ -0,0 +1,24 @@
+import { FieldBaseProps } from '../base/fieldBase';
+/**
+ * Props for {@link UrlField}.
+ * Extends {@link FieldBaseProps}.
+ *
+ * @category UrlField
+ */
+export type UrlFieldProps = Omit<FieldBaseProps, 'elementClass' | 'type'>;
+/**
+ * URL field component used to enter web addresses.
+ *
+ * Use for collecting links and website references in forms.
+ *
+ * @category UrlField
+ * @function
+ * @param props - All field props inherited from {@link FieldBase}.
+ *
+ * @example
+ * <UrlField label="Label" />
+ *
+ * @example
+ * <UrlField required />
+ */
+export declare const UrlField: import('react').ForwardRefExoticComponent<UrlFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fields/weekField.d.ts

@@ -0,0 +1,24 @@
+import { FieldBaseProps } from '../base/fieldBase';
+/**
+ * Props for {@link WeekField}.
+ * Extends {@link FieldBaseProps}.
+ *
+ * @category WeekField
+ */
+export type WeekFieldProps = Omit<FieldBaseProps, 'elementClass' | 'type'>;
+/**
+ * Week field component used to enter week and year values.
+ *
+ * Use for selecting calendar weeks in forms.
+ *
+ * @category WeekField
+ * @function
+ * @param props - All field props inherited from {@link FieldBase}.
+ *
+ * @example
+ * <WeekField label="Label" />
+ *
+ * @example
+ * <WeekField required />
+ */
+export declare const WeekField: import('react').ForwardRefExoticComponent<WeekFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fieldset/fieldset.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
-import { BoxBaseProps, ElementFont, SurfaceColor } from '../../index.ts';
+import { ElementFont, SurfaceColor } from '../../utils';
+import { BoxBaseProps } from '../base';
 /**
  * Props for {@link Fieldset}.
  * Extends {@link BoxBaseProps} except for `elementClass` and `component`.

package/components/iconButton/iconButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBaseProps } from '../../index.ts';
+import { ButtonBaseProps } from '../base/buttonBase';
 /**
  * Props for {@link IconButton}.
  * Extends {@link ButtonBaseProps} except for text and trailing content.

package/components/{article → layout}/article.d.ts

@@ -1,4 +1,4 @@
-import { BoxBaseProps } from '../../index.ts';
+import { BoxBaseProps } from '../base/boxBase';
 /**
  * Props for {@link Article}.
  * Extends {@link BoxBaseProps} except for `elementClass` and `component`.

package/components/{aside → layout}/aside.d.ts

@@ -1,4 +1,4 @@
-import { BoxBaseProps } from '../../index.ts';
+import { BoxBaseProps } from '../base/boxBase';
 /**
  * Props for {@link Aside}.
  * Extends {@link BoxBaseProps} except for `elementClass` and `component`.

package/components/{content → layout}/content.d.ts

@@ -1,4 +1,4 @@
-import { BoxBaseProps } from '../../index.ts';
+import { BoxBaseProps } from '../base/boxBase';
 /**
  * Props for {@link Content}.
  * Extends {@link BoxBaseProps} except for `elementClass` and `component`.

package/components/{div → layout}/div.d.ts

@@ -1,4 +1,4 @@
-import { BoxBaseProps } from '../../index.ts';
+import { BoxBaseProps } from '../base/boxBase';
 /**
  * Props for the {@link Div} component.
  *

package/components/{flex → layout}/flex.d.ts

@@ -1,4 +1,4 @@
-import { BoxBaseProps } from '../../index.ts';
+import { BoxBaseProps } from '../base/boxBase';
 /**
  * Props for the {@link Flex} component.
  *

package/components/{footer → layout}/footer.d.ts

@@ -1,4 +1,4 @@
-import { BoxBaseProps } from '../../index.ts';
+import { BoxBaseProps } from '../base/boxBase';
 /**
  * Props for {@link Footer}.
  * Extends {@link BoxBaseProps} except for `elementClass` and `component`.

package/components/{grid → layout}/grid.d.ts

@@ -1,4 +1,4 @@
-import { BoxBaseProps } from '../../index.ts';
+import { BoxBaseProps } from '../base/boxBase';
 /**
  * Props for the {@link Grid} component.
  *

package/components/{header → layout}/header.d.ts

@@ -1,4 +1,4 @@
-import { BoxBaseProps } from '../../index.ts';
+import { BoxBaseProps } from '../base/boxBase';
 /**
  * Props for {@link Header}.
  * Extends {@link BoxBaseProps} except for `elementClass` and `component`.

package/components/layout/index.d.ts

@@ -0,0 +1,11 @@
+export * from './article';
+export * from './aside';
+export * from './content';
+export * from './div';
+export * from './flex';
+export * from './footer';
+export * from './grid';
+export * from './header';
+export * from './main';
+export * from './nav';
+export * from './section';

package/components/{main → layout}/main.d.ts

@@ -1,4 +1,4 @@
-import { BoxBaseProps } from '../../index.ts';
+import { BoxBaseProps } from '../base/boxBase';
 /**
  * Props for {@link Main}.
  * Extends {@link BoxBaseProps} except for `elementClass` and `component`.

package/components/{nav → layout}/nav.d.ts

@@ -1,4 +1,4 @@
-import { BoxBaseProps } from '../../index.ts';
+import { BoxBaseProps } from '../base/boxBase';
 /**
  * Props for {@link Nav}.
  * Extends {@link BoxBaseProps} except for `elementClass` and `component`.

package/components/{section → layout}/section.d.ts

@@ -1,4 +1,4 @@
-import { BoxBaseProps } from '../../index.ts';
+import { BoxBaseProps } from '../base/boxBase';
 /**
  * Props for {@link Section}.
  * Extends {@link BoxBaseProps} except for `elementClass` and `component`.

package/components/link/link.d.ts

@@ -0,0 +1,58 @@
+import { default as React, ElementType, ReactNode } from 'react';
+import { ElementFocusEffect, ElementFont, ElementHoverEffect, ElementPressedEffect, SurfaceColor } from '../../utils';
+/**
+ * Props for the Link component.
+ *
+ * Inline link element with optional leading and trailing content and animated underline.
+ *
+ * @category Link
+ */
+export type LinkProps<T extends ElementType = 'a'> = {
+    /** Underlying element or router component. */
+    as?: T;
+    /** Link content. */
+    children?: ReactNode;
+    /** Fallback text when children is not provided. */
+    label?: string;
+    /** Leading visual element. */
+    leading?: ReactNode;
+    /** Trailing visual element. */
+    trailing?: ReactNode;
+    /** Surface color token applied to text. */
+    color?: SurfaceColor;
+    /** Underline visibility behavior. */
+    underline?: 'none' | 'hover' | 'always';
+    /** Font token applied to content. */
+    font?: ElementFont;
+    /** Opens link in new tab with security attributes. */
+    isExternal?: boolean;
+    /** Accessibility label override. */
+    'aria-label'?: string;
+    /** Additional class applied to the root element. */
+    className?: string;
+    /** Disables interaction and focus. */
+    disabled?: boolean;
+    /** Hover visual effects. */
+    hoverEffects?: ElementHoverEffect[];
+    /** Focus visual effects. */
+    focusEffects?: ElementFocusEffect[];
+    /** Pressed visual effects. */
+    pressedEffects?: ElementPressedEffect[];
+    /** Underline animation origin. */
+    underlineOrigin?: 'left' | 'center';
+    /** Underline animation type. */
+    underlineAnimation?: 'scale' | 'fade';
+} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'color' | 'children' | 'className'>;
+export interface LinkComponent {
+    <T extends ElementType = 'a'>(props: LinkProps<T>): ReactNode;
+    displayName?: string;
+}
+/**
+ * Inline link component with optional leading and trailing content and animated underline.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Link
+ */
+export declare const Link: LinkComponent;

package/components/list/list.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { BoxBaseProps } from '../base/boxBase';
+export interface ListProps extends Omit<BoxBaseProps, 'type'> {
+    type?: 'single' | 'multiple';
+    defaultValue?: string;
+    children: ReactNode;
+}
+export declare const List: ({ type, defaultValue, children }: ListProps) => import("react/jsx-runtime").JSX.Element;

package/components/{listItem → list}/listItem.d.ts

@@ -1,7 +1,6 @@
 import { default as React, HTMLProps, ReactNode } from 'react';
-import { ElementDensity, ElementFocusEffect, ElementFont, ElementSelectedEffect, ElementShape, ElementTouchEffect } from '../../utils/utils.ts';
-import { SurfaceColor } from '../../utils/color';
-import { MenuVariant } from '../../index.ts';
+import { ElementDensity, ElementFocusEffect, ElementFont, ElementSelectedEffect, ElementShape, ElementTouchEffect, SurfaceColor } from '../../utils';
+import { MenuVariant } from '../menu/menu';
 /**
  * Visual variant of a ListItem.
  *

package/components/{listItem → list}/listItem.guards.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactElement } from 'react';
-import { ListItemInternalProps, ListItemProps } from '../../index.ts';
+import { ListItemInternalProps, ListItemProps } from './listItem';
 export declare const IS_LIST_ITEM: unique symbol;
 /**
  * Type guard that checks whether a React node is a MenuItem component.