quickit-ui 0.1.10 → 0.1.13

package/dist/quickit-ui.d.ts

@@ -2,6 +2,8 @@ import * as React from "react";
 
 export declare const QUICKIT_SEMANTIC_COLORS: readonly [
   "neutral",
+  "slate",
+  "zinc",
   "primary",
   "brand",
   "success",
@@ -10,9 +12,12 @@ export declare const QUICKIT_SEMANTIC_COLORS: readonly [
   "info",
   "light",
   "dark",
+  "black",
 ];
 export declare const QUICKIT_ACCENT_COLORS: readonly [
   "neutral",
+  "slate",
+  "zinc",
   "primary",
   "brand",
   "success",
@@ -55,6 +60,13 @@ export declare const QUICKIT_LINK_UNDERLINES: readonly [
   "none",
 ];
 export declare const QUICKIT_TAB_SIZES: readonly ["xs", "sm", "md", "lg"];
+export declare const QUICKIT_BREAKPOINTS: Readonly<{
+  sm: 640;
+  md: 768;
+  lg: 1024;
+  xl: 1280;
+  "2xl": 1536;
+}>;
 export declare const QUICKIT_CONTROL_RADIUS_TOKENS: Record<string, string>;
 export declare const QUICKIT_AVATAR_RADIUS_TOKENS: Record<
   string,
@@ -81,7 +93,15 @@ export type QuickitLinkTextVariant =
 export type QuickitLinkUnderline =
   (typeof QUICKIT_LINK_UNDERLINES)[number];
 export type QuickitTabSize = (typeof QUICKIT_TAB_SIZES)[number];
+export type QuickitBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 export type QuickitFloatingColor = "default" | QuickitSemanticColor;
+export interface QuickitBreakpoints {
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  "2xl": number;
+}
 
 export declare function isQuickitTokenValue(
   collection: readonly string[],
@@ -108,6 +128,29 @@ export declare function QuickitProvider(
   props: QuickitProviderProps,
 ): React.JSX.Element;
 export declare function useQuickitTheme(): QuickitThemeMode;
+export interface UseBreakpointOptions {
+  breakpoints?: Partial<QuickitBreakpoints>;
+}
+export interface UseBreakpointResult {
+  breakpoint: QuickitBreakpoint | null;
+  breakpoints: QuickitBreakpoints;
+  height: number | null;
+  isDesktop: boolean;
+  isMobile: boolean;
+  isTablet: boolean;
+  ready: boolean;
+  width: number | null;
+}
+export declare function useBreakpoint(
+  options?: UseBreakpointOptions,
+): UseBreakpointResult;
+export interface UseMediaQueryOptions {
+  defaultValue?: boolean;
+}
+export declare function useMediaQuery(
+  query: string,
+  options?: UseMediaQueryOptions,
+): boolean;
 
 export interface QuickitFormControlContextValue {
   controlId: string;
@@ -342,11 +385,15 @@ type RadioInputProps = Omit<
 >;
 
 export interface CheckboxProps extends CheckboxInputProps {
-  color?: QuickitAccentColor;
+  color?: QuickitSemanticColor;
   containerClassName?: string;
   invalid?: boolean;
   label?: React.ReactNode;
   labelClassName?: string;
+  onCheckedChange?: (
+    checked: boolean,
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => void;
   required?: boolean;
   size?: QuickitCompactControlSize;
 }
@@ -355,11 +402,15 @@ export declare const Checkbox: React.ForwardRefExoticComponent<
 >;
 
 export interface RadioProps extends RadioInputProps {
-  color?: QuickitAccentColor;
+  color?: QuickitSemanticColor;
   containerClassName?: string;
   invalid?: boolean;
   label?: React.ReactNode;
   labelClassName?: string;
+  onCheckedChange?: (
+    checked: boolean,
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => void;
   required?: boolean;
   size?: QuickitCompactControlSize;
 }
@@ -369,18 +420,19 @@ export declare const Radio: React.ForwardRefExoticComponent<
 
 type SwitchButtonProps = Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
-  "color" | "size" | "value"
+  "color" | "onChange" | "size" | "value"
 >;
 
 export interface SwitchProps extends SwitchButtonProps {
   checked?: boolean;
-  color?: QuickitAccentColor;
+  color?: QuickitSemanticColor;
   containerClassName?: string;
   defaultChecked?: boolean;
   invalid?: boolean;
   label?: React.ReactNode;
   labelClassName?: string;
   name?: string;
+  onChange?: (event: QuickitCheckedChangeEvent) => void;
   onCheckedChange?: (checked: boolean) => void;
   required?: boolean;
   size?: QuickitCompactControlSize;
@@ -407,6 +459,25 @@ export interface QuickitSelectChangeEvent {
   stopPropagation(): void;
 }
 
+export interface QuickitCheckedChangeEvent {
+  type: "change";
+  nativeEvent?: Event;
+  target: {
+    checked: boolean;
+    id?: string;
+    name?: string;
+    value?: string;
+  };
+  currentTarget: {
+    checked: boolean;
+    id?: string;
+    name?: string;
+    value?: string;
+  };
+  preventDefault(): void;
+  stopPropagation(): void;
+}
+
 export interface SelectProps
   extends Omit<React.HTMLAttributes<HTMLButtonElement>, "onChange"> {
   children?: React.ReactNode;