@ufoui/core 0.0.1 → 0.0.4

package/README.md

@@ -21,14 +21,40 @@ pnpm add @ufoui/core
 ```
 
 ## Usage
-```ts
-import { Button } from '@ufoui/core';
-```
+
+Import the global styles **once** at your application entry point:
 
 ```ts
 import '@ufoui/core/style.css';
 ```
 
+Wrap your application with `ThemeProvider` and use components:
+
+```tsx
+import { ThemeProvider, Button } from '@ufoui/core';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Button label="Save" filled />
+    </ThemeProvider>
+  );
+}
+```
+
+`ThemeProvider` is responsible for providing theme tokens and color schemes.
+All components rely on CSS variables defined in the global stylesheet.
+
+### Theming
+
+You can customize the theme by providing a seed color:
+
+```tsx
+<ThemeProvider seedColor="#6750A4">
+  <App />
+</ThemeProvider>
+```
+
 ## License
 Apache License 2.0
 

package/components/article/article.d.ts

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

package/components/aside/aside.d.ts

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

package/components/avatar/avatar.d.ts

@@ -1,5 +1,5 @@
 import { HTMLProps } from 'react';
-import { ElementBorder, ElementElevation, ElementShape, ElementSize } from '../utils';
+import { ElementBorder, ElementElevation, ElementShape, ElementSize } from '../../utils/utils.ts';
 import { BorderColor, SemanticColor } from '../../utils/color';
 /**
  * Props for the {@link Badge} component.

package/components/badge/badge.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { ElementAlign, ElementBorder, ElementElevation, ElementFont, ElementShape, ElementSize } from '../utils';
+import { ElementAlign, ElementBorder, ElementElevation, ElementFont, ElementShape, ElementSize } from '../../utils/utils.ts';
 import { BorderColor, SemanticColor } from '../../utils/color';
 /**
  * Props for the Badge component.

package/components/base/boxBase/boxBase.d.ts

@@ -1,5 +1,5 @@
 import { default as React, HTMLAttributes, ReactNode } from 'react';
-import { ElementBorder, ElementElevation, ElementShape } from '../../utils';
+import { ElementBorder, ElementElevation, ElementShape } from '../../../utils/utils.ts';
 import { BorderColor, SurfaceColor } from '../../../utils/color';
 /**
  * Layout mode for {@link BoxBase}.

package/components/base/buttonBase/buttonBase.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactNode } from 'react';
-import { ElementAlign, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTouchEffect } from '../../utils';
+import { ElementAlign, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTouchEffect } from '../../../utils/utils.ts';
 import { BorderColor, SemanticColor, SurfaceColor } from '../../../utils/color';
 /**
  * Props for the ButtonBase component.

package/components/base/checkboxBase/checkboxBase.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ReactNode } from 'react';
-import { ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect } from '../../utils';
-import { MotionAnimation, MotionStyle } from '../../types';
+import { ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect } from '../../../utils/utils.ts';
+import { MotionAnimation, MotionStyle } from '../../../types/index.ts';
 import { BorderColor, SemanticColor, SurfaceColor } from '../../../utils/color';
 /**
  * Props for the CheckboxBase component.

package/components/base/dialogBase/dialog.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ReactNode } from 'react';
-import { ElementElevation, ElementOutline, ElementShape, ElementSize } from '../../utils';
-import { MotionAnimation, MotionStyle } from '../../types';
+import { ElementElevation, ElementOutline, ElementShape, ElementSize } from '../../../utils/utils.ts';
+import { MotionAnimation, MotionStyle } from '../../../types/index.ts';
 import { BorderColor, SurfaceColor } from '../../../utils/color';
 export type DialogType = 'basic' | 'fullscreen' | 'dockRight' | 'dockLeft' | 'dockTop' | 'dockBottom';
 export type DialogAnimation = 'auto' | 'none' | MotionAnimation;

package/components/base/fieldBase/fieldBase.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ElementBorder, ElementDensity, ElementFont, ElementShape } from '../../utils';
+import { ElementBorder, ElementDensity, ElementFont, ElementShape } from '../../../utils/utils.ts';
 import { BorderColor, SemanticColor, SurfaceColor } from '../../../utils/color';
 type FieldVariant = 'filled' | 'outlined' | 'classic';
 export interface FieldBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'children'> {

package/components/base/inlineBase/inlineBase.d.ts

@@ -1,5 +1,5 @@
 import { default as React, HTMLAttributes, ReactNode } from 'react';
-import { ElementBorder, ElementElevation, ElementFont, ElementShape } from '../../utils';
+import { ElementBorder, ElementElevation, ElementFont, ElementShape } from '../../../utils/utils.ts';
 import { BorderColor, SurfaceColor } from '../../../utils/color';
 /**
  * Props for {@link InlineBase}.

package/components/button/button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBaseProps } from '../core';
+import { ButtonBaseProps } from '../../index.ts';
 /**
  * Props for {@link Button}.
  * Extends {@link ButtonBaseProps}.

package/components/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxBaseProps } from '../base/checkboxBase/checkboxBase';
+import { CheckboxBaseProps } from '../../index.ts';
 /**
  * Props for the Checkbox component.
  *

package/components/chip/chip.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBaseProps } from '../core';
+import { ButtonBaseProps } from '../../index.ts';
 export type ChipType = 'assist' | 'filter' | 'input' | 'suggestion';
 export interface ChipProps extends Omit<ButtonBaseProps, 'elementClass' | 'iconClass' | 'labelClass'> {
     /** Defines the visual style and behavior of the chip. @default 'assist' */

package/components/content/content.d.ts

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

package/components/dateInput/dateInput.d.ts

@@ -1,2 +1,2 @@
-import { FieldBaseProps } from '../base/fieldBase/fieldBase';
+import { FieldBaseProps } from '../../index.ts';
 export declare const DateInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/dateTimeInput/dateTimeInput.d.ts

@@ -1,2 +1,2 @@
-import { FieldBaseProps } from '../base/fieldBase/fieldBase';
+import { FieldBaseProps } from '../../index.ts';
 export declare const DateTimeInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/dialog/dialogActions.d.ts

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

package/components/dialog/dialogTitle.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ElementFont } from '../utils';
+import { ElementFont } from '../../utils/utils.ts';
 import { SurfaceColor } from '../../utils/color';
 export interface DialogTitleProps {
     icon?: ReactNode;
@@ -11,6 +11,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/div/div.d.ts

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

package/components/divider/divider.d.ts

@@ -1,5 +1,5 @@
 import { HTMLProps } from 'react';
-import { BorderColor, ElementBorder, ElementElevation, ElementInset, ElementShape } from '../core';
+import { BorderColor, ElementBorder, ElementElevation, ElementInset, ElementShape } from '../../index.ts';
 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 '../core';
+import { DividerProps } from '../../index.ts';
 export declare const IS_DIVIDER: unique symbol;
 /**
  * Type guard that checks whether a React node is a Divider component.

package/components/emailInput/emailInput.d.ts

@@ -1,2 +1,2 @@
-import { FieldBaseProps } from '../base/fieldBase/fieldBase';
+import { FieldBaseProps } from '../../index.ts';
 export declare const EmailInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fab/fab.d.ts

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

package/components/fieldset/fieldset.d.ts

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

package/components/flex/flex.d.ts

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

package/components/footer/footer.d.ts

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

package/components/grid/grid.d.ts

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

package/components/header/header.d.ts

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

package/components/iconButton/iconButton.d.ts

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

package/components/listItem/listItem.d.ts

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

package/components/listItem/listItem.guards.d.ts

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

package/components/main/main.d.ts

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

package/components/menu/menu.d.ts

@@ -1,6 +1,6 @@
 import { default as React, HTMLAttributes, ReactNode, RefObject } from 'react';
-import { ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementSelectedEffect, ElementShape, ElementTouchEffect } from '../utils';
-import { MotionAnimation, MotionStyle } from '../types';
+import { ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementSelectedEffect, ElementShape, ElementTouchEffect } from '../../utils/utils.ts';
+import { MotionAnimation, MotionStyle } from '../../types/index.ts';
 import { BorderColor, SurfaceColor } from '../../utils/color';
 import { ElementFloatingMode } from '../../utils/calculateFloatingPosition';
 /**

package/components/menu/menu.guards.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactElement } from 'react';
-import { MenuInternalProps, MenuProps } from '../core';
+import { MenuInternalProps, MenuProps } from '../../index.ts';
 export declare const IS_MENU: unique symbol;
 /**
  * Type guard that checks whether a React node is a Menu component.

package/components/menuItem/menuItem.d.ts

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

package/components/menuItem/menuItem.guards.d.ts

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

package/components/nav/nav.d.ts

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

package/components/numberInput/numberInput.d.ts

@@ -1,2 +1,2 @@
-import { FieldBaseProps } from '../base/fieldBase/fieldBase';
+import { FieldBaseProps } from '../../index.ts';
 export declare const NumberInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/option/option.d.ts

@@ -1,5 +1,5 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-import { MenuItemInternalProps, MenuItemProps } from '../core';
+import { MenuItemInternalProps, MenuItemProps } from '../../index.ts';
 export interface OptionProps extends Omit<MenuItemProps, 'type' | 'checked'> {
     selected?: boolean;
 }

package/components/option/option.guards.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ReactElement } from 'react';
 import { OptionProps } from './option';
-import { MenuItemInternalProps } from '../menuItem/menuItem';
+import { MenuItemInternalProps } from '../../index.ts';
 export declare const IS_OPTION: unique symbol;
 /**
  * Type guard that checks whether a React node is an Option component.

package/components/radio/radio.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxBaseProps } from '../core';
+import { CheckboxBaseProps } from '../../index.ts';
 /**
  * Props for the Radio component.
  *

package/components/radiogroup/radioGroup.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactNode } from 'react';
-import { FieldsetProps } from '../fieldset/fieldset';
+import { FieldsetProps } from '../../index.ts';
 /**
  * Props for the RadioGroup component.
  *

package/components/section/section.d.ts

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

package/components/select/select.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FieldBaseProps } from '../core';
+import { FieldBaseProps } from '../../index.ts';
 /**
  * Props for {@link Select}.
  *

package/components/spinner/spinner.d.ts

@@ -4,4 +4,4 @@ export interface SpinnerProps {
     className?: string;
     inline?: boolean;
 }
-export declare function Spinner({ variant, inline, className }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Spinner({ variant, inline, className, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/components/switch/switch.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactNode } from 'react';
-import { ElementAlign, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect } from '../utils';
+import { ElementAlign, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect } from '../../utils/utils.ts';
 import { BorderColor, SemanticColor, SurfaceColor } from '../../utils/color';
 /**
  * Props for the Switch component.

package/components/telInput/telInput.d.ts

@@ -1,2 +1,2 @@
-import { FieldBaseProps } from '../base/fieldBase/fieldBase';
+import { FieldBaseProps } from '../../index.ts';
 export declare const TelInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/textField/textField.d.ts

@@ -1,4 +1,4 @@
-import { FieldBaseProps } from '../core';
+import { FieldBaseProps } from '../../index.ts';
 /**
  * Props for {@link TextField}.
  * Extends {@link FieldBaseProps}.

package/components/themeProvider/themeProvider.d.ts

@@ -51,4 +51,4 @@ export interface ThemeProviderProps {
  * @category Components
  * @group Theme
  */
-export declare const ThemeProvider: ({ children, colorMode, seedColor, extraColors }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ children, colorMode, seedColor, extraColors, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/components/timeInput/timeInput.d.ts

@@ -1,2 +1,2 @@
-import { FieldBaseProps } from '../base/fieldBase/fieldBase';
+import { FieldBaseProps } from '../../index.ts';
 export declare const TimeInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/toggleButton/toggleButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBaseProps } from '../core';
+import { ButtonBaseProps } from '../../index.ts';
 export interface ToggleButtonProps extends Omit<ButtonBaseProps, 'filled' | 'controlClass' | 'iconClass'> {
     selected?: boolean;
     iconPosition?: 'start' | 'end';

package/components/tooltip/tooltip.d.ts

@@ -1,5 +1,5 @@
 import { HTMLProps, ReactNode } from 'react';
-import { ElementAlign } from '../utils';
+import { ElementAlign } from '../../utils/utils.ts';
 export interface TooltipProps extends HTMLProps<HTMLDivElement> {
     title: string;
     children?: ReactNode;

package/components/urlInput/urlInput.d.ts

@@ -1,2 +1,2 @@
-import { FieldBaseProps } from '../base/fieldBase/fieldBase';
+import { FieldBaseProps } from '../../index.ts';
 export declare const UrlInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/context/themeContext.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from '../components/types';
-import { ThemeColor } from '../components/core';
+import { Theme } from '../types/index.ts';
+import { ThemeColor } from '../index.ts';
 /**
  * Provides shape for the theme context shared across the application.
  * Allows reading and updating theme configuration and resolving token values.

package/hooks/useTheme.d.ts

@@ -1,4 +1,4 @@
-import { ThemeContextValue } from '../components/context/themeContext';
+import { ThemeContextValue } from '../context/themeContext';
 /**
  * Hook to access the current theme context.
  *