quickit-ui 0.1.16 → 0.1.19

package/dist/quickit-ui.d.ts

@@ -82,6 +82,19 @@ export declare const QUICKIT_FOCUS_RING_COMPONENTS: readonly [
   "dropdown",
   "modal",
 ];
+export declare const QUICKIT_RIPPLE_COMPONENTS: readonly [
+  "button",
+  "link",
+];
+export declare const QUICKIT_PRESS_EFFECTS: readonly [
+  "transform",
+  "ripple",
+];
+export declare const QUICKIT_THEME_OPTIONS: readonly [
+  "system",
+  "light",
+  "dark",
+];
 export declare const QUICKIT_CONTROL_RADIUS_TOKENS: Record<string, string>;
 export declare const QUICKIT_AVATAR_RADIUS_TOKENS: Record<
   string,
@@ -89,6 +102,7 @@ export declare const QUICKIT_AVATAR_RADIUS_TOKENS: Record<
 >;
 
 export type QuickitThemeMode = "light" | "dark";
+export type QuickitThemeOption = (typeof QUICKIT_THEME_OPTIONS)[number];
 export type QuickitSemanticColor = (typeof QUICKIT_SEMANTIC_COLORS)[number];
 export type QuickitAccentColor = (typeof QUICKIT_ACCENT_COLORS)[number];
 export type QuickitControlSize = (typeof QUICKIT_CONTROL_SIZES)[number];
@@ -112,6 +126,10 @@ export type QuickitBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 export type QuickitFloatingColor = "default" | QuickitSemanticColor;
 export type QuickitFocusRingComponent =
   (typeof QUICKIT_FOCUS_RING_COMPONENTS)[number];
+export type QuickitRippleComponent =
+  (typeof QUICKIT_RIPPLE_COMPONENTS)[number];
+export type QuickitPressEffect =
+  (typeof QUICKIT_PRESS_EFFECTS)[number];
 export interface QuickitBreakpoints {
   sm: number;
   md: number;
@@ -123,6 +141,17 @@ export interface QuickitFocusRingConfig {
   disabledComponents?: QuickitFocusRingComponent[];
   enabled?: boolean;
 }
+export interface QuickitRippleConfig {
+  disabledComponents?: QuickitRippleComponent[];
+  enabled?: boolean;
+}
+export interface QuickitThemeControllerValue {
+  setTheme: (theme: QuickitThemeOption) => void;
+  resolvedTheme: QuickitThemeMode;
+  systemTheme: QuickitThemeMode;
+  theme: QuickitThemeOption;
+  toggleTheme: () => void;
+}
 
 export declare function isQuickitTokenValue(
   collection: readonly string[],
@@ -144,12 +173,28 @@ export declare function getAvatarRadius(
 export interface QuickitProviderProps {
   children?: React.ReactNode;
   focusRing?: boolean | QuickitFocusRingConfig;
+  pressEffect?: QuickitPressEffect;
+  ripple?: boolean | QuickitRippleConfig;
   theme?: QuickitThemeMode;
 }
 export declare function QuickitProvider(
   props: QuickitProviderProps,
 ): React.JSX.Element;
+export declare const QUICKIT_THEME_STORAGE_KEY: "quickit-ui-theme";
+export interface QuickitThemeProviderProps {
+  children?: React.ReactNode;
+  defaultTheme?: QuickitThemeOption;
+  focusRing?: boolean | QuickitFocusRingConfig;
+  pressEffect?: QuickitPressEffect;
+  ripple?: boolean | QuickitRippleConfig;
+  storageKey?: string;
+}
+export declare function QuickitThemeProvider(
+  props: QuickitThemeProviderProps,
+): React.JSX.Element;
 export declare function useQuickitTheme(): QuickitThemeMode;
+export declare function useQuickitThemeController():
+  QuickitThemeControllerValue;
 export declare function useQuickitFocusRing(
   component: QuickitFocusRingComponent,
 ): boolean;
@@ -157,6 +202,14 @@ export declare function useQuickitFocusRingConfig(): {
   disabledComponents: QuickitFocusRingComponent[];
   enabled: boolean;
 };
+export declare function useQuickitRipple(
+  component: QuickitRippleComponent,
+): boolean;
+export declare function useQuickitRippleConfig(): {
+  disabledComponents: QuickitRippleComponent[];
+  enabled: boolean;
+};
+export declare function useQuickitPressEffect(): QuickitPressEffect;
 export interface UseBreakpointOptions {
   breakpoints?: Partial<QuickitBreakpoints>;
 }
@@ -235,7 +288,9 @@ export interface ButtonProps extends ButtonBaseProps {
   fullWidth?: boolean;
   loading?: boolean;
   loadingText?: React.ReactNode;
+  pressEffect?: QuickitPressEffect;
   pressed?: boolean;
+  ripple?: boolean;
   shape?: QuickitButtonShape;
   size?: QuickitControlSize;
   spinner?: boolean;
@@ -255,6 +310,8 @@ export interface LinkProps extends LinkBaseProps {
   appearance?: "text" | "button";
   color?: QuickitSemanticColor;
   fullWidth?: boolean;
+  pressEffect?: QuickitPressEffect;
+  ripple?: boolean;
   shape?: QuickitButtonShape;
   size?: QuickitControlSize;
   underline?: QuickitLinkUnderline;
@@ -373,6 +430,11 @@ type InputBaseProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   "size"
 >;
+type InputGroupBaseProps = React.HTMLAttributes<HTMLDivElement>;
+type InputGroupActionBaseProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "color"
+>;
 type TextareaBaseProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 type LabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
 
@@ -386,10 +448,13 @@ export interface InputProps extends InputBaseProps {
   hidePasswordIcon?: React.ReactNode;
   hidePasswordLabel?: string;
   invalid?: boolean;
+  leftElement?: React.ReactNode;
   onClear?: () => void;
   onPasswordVisibilityChange?: (visible: boolean) => void;
   passwordToggle?: boolean;
   required?: boolean;
+  rightElement?: React.ReactNode;
+  shape?: "square" | "pill";
   size?: "sm" | "md" | "lg";
   showPasswordIcon?: React.ReactNode;
   showPasswordLabel?: string;
@@ -397,6 +462,47 @@ export interface InputProps extends InputBaseProps {
 export declare const Input: React.ForwardRefExoticComponent<
   InputProps & React.RefAttributes<HTMLInputElement>
 >;
+export interface InputGroupProps extends InputGroupBaseProps {
+  attached?: boolean;
+  children?: React.ReactNode;
+  color?: QuickitSemanticColor;
+  columns?: number | string;
+  fullWidth?: boolean;
+  layout?: "inline" | "grid";
+  shape?: "square" | "pill";
+  size?: "sm" | "md" | "lg";
+}
+export declare const InputGroup: React.ForwardRefExoticComponent<
+  InputGroupProps & React.RefAttributes<HTMLDivElement>
+>;
+export interface InputGroupItemProps extends InputGroupBaseProps {
+  children?: React.ReactNode;
+  grow?: boolean;
+  span?: number;
+}
+export declare const InputGroupItem: React.ForwardRefExoticComponent<
+  InputGroupItemProps & React.RefAttributes<HTMLDivElement>
+>;
+export interface InputGroupAddonProps extends InputGroupBaseProps {
+  align?: "start" | "center" | "end" | "inline-start" | "inline-end";
+  children?: React.ReactNode;
+  color?: QuickitSemanticColor;
+  shape?: "square" | "pill";
+  size?: "sm" | "md" | "lg";
+}
+export declare const InputGroupAddon: React.ForwardRefExoticComponent<
+  InputGroupAddonProps & React.RefAttributes<HTMLDivElement>
+>;
+export interface InputGroupActionProps extends InputGroupActionBaseProps {
+  activeMotion?: boolean;
+  color?: QuickitSemanticColor;
+  shape?: "square" | "pill";
+  size?: "sm" | "md" | "lg";
+  variant?: QuickitButtonVariant;
+}
+export declare const InputGroupAction: React.ForwardRefExoticComponent<
+  InputGroupActionProps & React.RefAttributes<HTMLButtonElement>
+>;
 
 export interface TextareaProps extends TextareaBaseProps {
   color?: QuickitSemanticColor;