@campxdev/react-native-blueprint 0.1.1 → 0.1.3

package/lib/typescript/src/components/ui/Toggle.d.ts

@@ -1,11 +1,53 @@
+import { Icon } from './Icon';
+import * as TogglePrimitive from '@rn-primitives/toggle';
+import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-import { ViewProps } from 'react-native';
-
-export interface ToggleProps extends ViewProps {
-  className?: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const Toggle: React.ComponentType<ToggleProps>;
-export default Toggle;
+/**
+ * Toggle button style variants using class-variance-authority
+ *
+ * @variant default - Standard toggle with transparent background
+ * @variant outline - Toggle with border and background
+ *
+ * @size default - Standard size (40px/36px)
+ * @size sm - Small size (36px/32px)
+ * @size lg - Large size (44px/40px)
+ */
+declare const toggleVariants: (props?: {
+    variant?: "default" | "outline";
+    size?: "default" | "sm" | "lg";
+} & import("class-variance-authority/types").ClassProp) => string;
+/**
+ * Toggle button component for on/off states
+ *
+ * A two-state button that can be toggled between pressed and unpressed states.
+ * Supports multiple variants and sizes.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Toggle pressed={isBold} onPressedChange={setIsBold}>
+ *   <ToggleIcon as={Bold} />
+ *   <Text>Bold</Text>
+ * </Toggle>
+ *
+ * <Toggle variant="outline" size="sm">
+ *   <ToggleIcon as={Italic} />
+ * </Toggle>
+ * ```
+ *
+ * @accessibility
+ * - Uses proper ARIA pressed state
+ * - Disabled state prevents interaction
+ * - Focus visible states on web
+ */
+declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.RootProps & VariantProps<typeof toggleVariants> & React.RefAttributes<TogglePrimitive.RootRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Icon component for use within Toggle buttons
+ *
+ * Automatically inherits text styling from the toggle context.
+ *
+ * @component
+ */
+declare function ToggleIcon({ className, ...props }: React.ComponentProps<typeof Icon>): import("react/jsx-runtime").JSX.Element;
+export { Toggle, ToggleIcon, toggleVariants };
+//# sourceMappingURL=Toggle.d.ts.map

package/lib/typescript/src/components/ui/Tooltip.d.ts

@@ -1,11 +1,71 @@
+import * as TooltipPrimitive from '@rn-primitives/tooltip';
 import * as React from 'react';
-import { ViewProps } from 'react-native';
-
-export interface TooltipProps extends ViewProps {
-  className?: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const Tooltip: React.ComponentType<TooltipProps>;
-export default Tooltip;
+/**
+ * Root tooltip component - provides context for trigger and content
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button variant="outline">
+ *       <Text>Hover me</Text>
+ *     </Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <Text>Helpful tooltip text</Text>
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: React.ForwardRefExoticComponent<import("react-native").ViewProps & {
+    asChild?: boolean;
+} & {
+    onOpenChange?: (open: boolean) => void;
+    delayDuration?: number;
+    skipDelayDuration?: number;
+    disableHoverableContent?: boolean;
+} & React.RefAttributes<(props: Omit<import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").ViewProps, keyof {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}> & {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}) => React.ReactNode>>;
+/**
+ * Trigger component that shows tooltip on hover/press
+ *
+ * @component
+ */
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps & React.RefAttributes<(props: Omit<import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").ViewProps, keyof {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}> & {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}) => React.ReactNode>, "ref"> & {
+    asChild?: boolean;
+} & {
+    onKeyDown?: (ev: React.KeyboardEvent) => void;
+    onKeyUp?: (ev: React.KeyboardEvent) => void;
+} & React.RefAttributes<import("@rn-primitives/tooltip").TriggerRef>>;
+/**
+ * Tooltip content component
+ *
+ * Displays helpful text in a small popup when hovering or pressing the trigger.
+ * Includes directional animations based on positioning.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TooltipContent side="top" sideOffset={8}>
+ *   <Text>Add to favorites</Text>
+ * </TooltipContent>
+ * ```
+ *
+ * @accessibility
+ * - Content is announced by screen readers
+ * - Proper ARIA attributes for tooltips
+ * - Dismissible on escape key (web)
+ */
+declare function TooltipContent({ className, sideOffset, portalHost, side, ...props }: TooltipPrimitive.ContentProps & React.RefAttributes<TooltipPrimitive.ContentRef> & {
+    portalHost?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipContent, TooltipTrigger };
+//# sourceMappingURL=Tooltip.d.ts.map

package/lib/typescript/src/components/ui/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,OAAO;;;;;;;;OAAD,CAAC;;OAG8B,CAAA;uBAHN,CAAC;AAEtC;;;;GAIG;AACH,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAPR,CAAC;;OAG8B,CAAA;;;;;;qEAII,CAAC;AAQhD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAc,EACd,UAAU,EACV,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,YAAY,GAC9B,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAG;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CA4CF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,OAAO;;;;;;;;OAAD,CAAC;;OAG8B,CAAA;uBAHN,CAAC;AAEtC;;;;GAIG;AACH,QAAA,MAAM,cAAc;OAPR,CAAC;;OAG8B,CAAA;;;;;;qEAII,CAAC;AAQhD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAc,EACd,UAAU,EACV,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,YAAY,GAC9B,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAG;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CA4CF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC"}

package/lib/typescript/src/components/ui/index.d.ts

@@ -1,30 +1,34 @@
-// Re-export all UI components
 export * from './Accordion';
 export * from './Alert';
 export * from './Alert-Dialog';
+export * from './AppBar';
+export * from './Aspect-Ratio';
 export * from './Avatar';
 export * from './Badge';
 export * from './Bottom-Sheet';
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
+export * from './Collapsible';
 export * from './Context-Menu';
 export * from './Custom-Card';
 export * from './Dialog';
 export * from './Dropdown-Menu';
-export * from './Floating-Action-Button';
+export * from './Floating-Action';
 export * from './Greeting-Card';
 export * from './Hover-Card';
 export * from './Icon';
 export * from './Input';
 export * from './Label';
 export * from './Menubar';
+export * from './Native-Only-Animated-View';
 export * from './NavBar';
 export * from './Popover';
 export * from './Progress';
 export * from './Radio-Group';
 export * from './Select';
 export * from './Separator';
+export * from './SizedBox';
 export * from './Skeleton';
 export * from './Slider';
 export * from './Switch';
@@ -37,3 +41,4 @@ export * from './Toast';
 export * from './Toggle';
 export * from './Toggle-Group';
 export * from './Tooltip';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -1,95 +1,9 @@
-// Type definitions for @campxdev/react-native-blueprint
-// Project: https://github.com/campx-org/react-native-blueprint
-// Definitions by: CAMPX <https://github.com/Sri-Satya-M>
-
-import * as React from 'react';
-import { ViewProps, TextProps, TouchableOpacityProps } from 'react-native';
-
-// Re-export all UI components
 export * from './components/ui';
-
-// Root Layout
 export { default as RootLayout } from './app/_layout';
-
-// Utilities
-export function cn(...inputs: any[]): string;
-
-// Theme
-export const THEME: {
-  light: Record<string, string>;
-  dark: Record<string, string>;
-};
-
-export const NAV_THEME: {
-  light: Record<string, string>;
-  dark: Record<string, string>;
-};
-
-// Theme Provider
-export interface ThemeContextType {
-  colorScheme: 'light' | 'dark';
-  setColorScheme: (colorScheme: 'light' | 'dark') => void;
-  toggleColorScheme: () => void;
-  isDarkColorScheme: boolean;
-}
-
-export function ThemeProvider(props: {
-  children: React.ReactNode;
-}): React.ReactElement;
-
-export function useTheme(): ThemeContextType;
-
-// Corner Radius
-export interface RadiusPreset {
-  topLeft: number;
-  topRight: number;
-  bottomLeft: number;
-  bottomRight: number;
-}
-
-export function getRadiusForHeight(height: number, preset?: string): RadiusPreset;
-export function getRadiusForDimensions(
-  width: number,
-  height: number,
-  preset?: string
-): RadiusPreset;
-export function getCustomRadius(
-  size: number,
-  config?: Partial<RadiusPreset>
-): RadiusPreset;
-
-export const RADIUS: Record<string, number>;
-export const RADIUS_PRESET: Record<string, any>;
-export const CORNER_SMOOTHING: number;
-
-// Fonts
-export type FontName =
-  | 'Heebo_100Thin'
-  | 'Heebo_200ExtraLight'
-  | 'Heebo_300Light'
-  | 'Heebo_400Regular'
-  | 'Heebo_500Medium'
-  | 'Heebo_600SemiBold'
-  | 'Heebo_700Bold'
-  | 'Heebo_800ExtraBold'
-  | 'Heebo_900Black'
-  | 'Poppins_100Thin'
-  | 'Poppins_100Thin_Italic'
-  | 'Poppins_200ExtraLight'
-  | 'Poppins_200ExtraLight_Italic'
-  | 'Poppins_300Light'
-  | 'Poppins_300Light_Italic'
-  | 'Poppins_400Regular'
-  | 'Poppins_400Regular_Italic'
-  | 'Poppins_500Medium'
-  | 'Poppins_500Medium_Italic'
-  | 'Poppins_600SemiBold'
-  | 'Poppins_600SemiBold_Italic'
-  | 'Poppins_700Bold'
-  | 'Poppins_700Bold_Italic'
-  | 'Poppins_800ExtraBold'
-  | 'Poppins_800ExtraBold_Italic'
-  | 'Poppins_900Black'
-  | 'Poppins_900Black_Italic';
-
-export const fonts: Record<FontName, any>;
+export { cn } from './lib/utils';
+export { THEME, NAV_THEME } from './lib/theme';
+export { ThemeProvider, useTheme } from './lib/ThemeProvider';
+export { getRadiusForHeight, getRadiusForDimensions, getCustomRadius, RADIUS, RADIUS_PRESET, CORNER_SMOOTHING, } from './lib/cornerRadius';
+export { fonts } from './lib/fonts';
+export type { FontName } from './lib/fonts';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/lib/ThemeProvider.d.ts

@@ -1,14 +1,137 @@
 import * as React from 'react';
-
-export interface ThemeContextType {
-  colorScheme: 'light' | 'dark';
-  setColorScheme: (colorScheme: 'light' | 'dark') => void;
-  toggleColorScheme: () => void;
-  isDarkColorScheme: boolean;
-}
-
-export function ThemeProvider(props: {
-  children: React.ReactNode;
-}): React.ReactElement;
-
-export function useTheme(): ThemeContextType;
+/**
+ * Available theme modes for the application
+ * @typedef {'light' | 'dark' | 'system'} ThemeMode
+ * - `light`: Force light theme regardless of system preference
+ * - `dark`: Force dark theme regardless of system preference
+ * - `system`: Automatically follow device system theme preference (default)
+ */
+export type ThemeMode = 'light' | 'dark' | 'system';
+/**
+ * Context type for theme management
+ * @internal
+ */
+type ThemeContextType = {
+    /** Current theme mode setting */
+    mode: ThemeMode;
+    /** Whether dark mode is currently active (computed from mode and system preference) */
+    isDark: boolean;
+    /** Function to change the theme mode */
+    setMode: (mode: ThemeMode) => void;
+    /** Theme color tokens for the current mode */
+    colors: typeof import('./theme').THEME.light;
+};
+/**
+ * Props for ThemeProvider component
+ */
+type ThemeProviderProps = {
+    /** Application content to provide theme context to */
+    children: React.ReactNode;
+    /**
+     * Initial theme mode
+     * @default 'system'
+     */
+    defaultMode?: ThemeMode;
+    /**
+     * Storage key for persisting theme preference (not yet implemented)
+     * @deprecated Currently not used - will be implemented in future version
+     */
+    storageKey?: string;
+};
+/**
+ * Theme Provider component that manages application theme state
+ *
+ * Provides theme context to all child components, enabling dark mode support
+ * throughout the application. Automatically responds to system theme changes
+ * when mode is set to 'system'.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with system theme
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ *
+ * // Start with dark mode
+ * function App() {
+ *   return (
+ *     <ThemeProvider defaultMode="dark">
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @param {ThemeProviderProps} props - Component props
+ * @returns {JSX.Element} Provider component wrapping children with theme context
+ *
+ * @see {@link useTheme} for accessing theme in child components
+ * @see {@link useThemeMode} for optional theme access without error
+ */
+export declare function ThemeProvider({ children, defaultMode, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access theme context and controls
+ *
+ * Provides access to the current theme state and methods to change the theme.
+ * Must be used within a ThemeProvider component tree.
+ *
+ * @returns {ThemeContextType} Theme context object
+ * @throws {Error} If used outside of ThemeProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { mode, isDark, setMode, colors } = useTheme();
+ *
+ *   return (
+ *     <View style={{ backgroundColor: colors.background }}>
+ *       <Text style={{ color: colors.foreground }}>
+ *         Current mode: {mode} (Dark: {isDark ? 'Yes' : 'No'})
+ *       </Text>
+ *       <Button onPress={() => setMode(isDark ? 'light' : 'dark')}>
+ *         <Text>Toggle Theme</Text>
+ *       </Button>
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link ThemeProvider} for setup
+ * @see {@link useThemeMode} for optional access without error throwing
+ */
+export declare function useTheme(): ThemeContextType;
+/**
+ * Optional hook to get current dark mode state
+ *
+ * Similar to useTheme but only returns the isDark boolean and doesn't throw
+ * an error if used outside ThemeProvider. Useful for components that want
+ * to adapt to theme but don't require it.
+ *
+ * @returns {boolean | undefined} Whether dark mode is active, or undefined if no provider
+ *
+ * @example
+ * ```tsx
+ * function OptionalThemedComponent() {
+ *   const isDark = useThemeMode();
+ *
+ *   // Component works with or without ThemeProvider
+ *   const backgroundColor = isDark ? '#000' : '#fff';
+ *
+ *   return (
+ *     <View style={{ backgroundColor }}>
+ *       <Text>This component adapts if theme is available</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useTheme} for full theme access (requires provider)
+ */
+export declare function useThemeMode(): boolean | undefined;
+export {};
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/lib/typescript/src/lib/cornerRadius.d.ts

@@ -1,21 +1,112 @@
-export interface RadiusPreset {
-  topLeft: number;
-  topRight: number;
-  bottomLeft: number;
-  bottomRight: number;
-}
-
-export function getRadiusForHeight(height: number, preset?: string): RadiusPreset;
-export function getRadiusForDimensions(
-  width: number,
-  height: number,
-  preset?: string
-): RadiusPreset;
-export function getCustomRadius(
-  size: number,
-  config?: Partial<RadiusPreset>
-): RadiusPreset;
-
-export const RADIUS: Record<string, number>;
-export const RADIUS_PRESET: Record<string, any>;
-export const CORNER_SMOOTHING: number;
+/**
+ * Corner Radius System
+ *
+ * Automatically calculates the appropriate corner radius based on element dimensions.
+ *
+ * Design Rule:
+ * - Elements < 80px height → 12px radius
+ * - Elements ≥ 80px height → 20px radius
+ * - All corners use 100% smoothing (Apple-style squircles)
+ *
+ * Examples:
+ * - Button (50px height) → 12px
+ * - Chip (24px height) → 12px
+ * - Checkbox (16px height) → 4px (special case for very small)
+ * - Small card (60px height) → 12px
+ * - Large card (200px height) → 20px
+ * - Dialog (400px height) → 20px
+ */
+/**
+ * Primitive radius values from your design system
+ * Your exact values: 0, 2, 4, 8, 12, 20, 24, 32, 48
+ */
+export declare const RADIUS: {
+    readonly R0: 0;
+    readonly R1: 2;
+    readonly R2: 4;
+    readonly R3: 8;
+    readonly R4: 12;
+    readonly R5: 20;
+    readonly R6: 24;
+    readonly R7: 32;
+    readonly R8: 48;
+};
+/**
+ * Calculate corner radius based on element height
+ *
+ * @param height - Element height in pixels
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Button (50px height)
+ * const radius = getRadiusForHeight(50); // Returns 12
+ *
+ * // Checkbox (16px height)
+ * const radius = getRadiusForHeight(16); // Returns 4
+ *
+ * // Card (160px height)
+ * const radius = getRadiusForHeight(160); // Returns 20
+ * ```
+ */
+export declare function getRadiusForHeight(height: number): number;
+/**
+ * Calculate corner radius based on smallest dimension (width or height)
+ * Useful for square or nearly-square elements
+ *
+ * @param width - Element width in pixels
+ * @param height - Element height in pixels
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Square checkbox (16×16)
+ * const radius = getRadiusForDimensions(16, 16); // Returns 4
+ *
+ * // Wide button (200×50)
+ * const radius = getRadiusForDimensions(200, 50); // Returns 12 (based on height)
+ *
+ * // Tall card (300×200)
+ * const radius = getRadiusForDimensions(300, 200); // Returns 20 (based on width)
+ * ```
+ */
+export declare function getRadiusForDimensions(width: number, height: number): number;
+/**
+ * Get corner radius with custom thresholds
+ * Advanced usage when you need different breakpoints
+ *
+ * @param height - Element height in pixels
+ * @param options - Custom threshold options
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Use 20px radius for elements ≥ 100px instead of 80px
+ * const radius = getCustomRadius(90, { largeThreshold: 100 });
+ * ```
+ */
+export declare function getCustomRadius(height: number, options?: {
+    tinyThreshold?: number;
+    smallThreshold?: number;
+    tinyRadius?: number;
+    smallRadius?: number;
+    largeRadius?: number;
+}): number;
+/**
+ * Corner smoothing value (0-1)
+ * 1.0 = 100% smoothing (Apple-style squircles)
+ */
+export declare const CORNER_SMOOTHING = 1;
+/**
+ * Preset radius values for common use cases
+ * Use these when you know the exact size you want
+ */
+export declare const RADIUS_PRESET: {
+    readonly none: 0;
+    readonly tiny: 4;
+    readonly small: 12;
+    readonly large: 20;
+    readonly pill: 24;
+    readonly circle: 9999;
+};
+//# sourceMappingURL=cornerRadius.d.ts.map

package/lib/typescript/src/lib/fonts.d.ts

@@ -1,30 +1,21 @@
-export type FontName =
-  | 'Heebo_100Thin'
-  | 'Heebo_200ExtraLight'
-  | 'Heebo_300Light'
-  | 'Heebo_400Regular'
-  | 'Heebo_500Medium'
-  | 'Heebo_600SemiBold'
-  | 'Heebo_700Bold'
-  | 'Heebo_800ExtraBold'
-  | 'Heebo_900Black'
-  | 'Poppins_100Thin'
-  | 'Poppins_100Thin_Italic'
-  | 'Poppins_200ExtraLight'
-  | 'Poppins_200ExtraLight_Italic'
-  | 'Poppins_300Light'
-  | 'Poppins_300Light_Italic'
-  | 'Poppins_400Regular'
-  | 'Poppins_400Regular_Italic'
-  | 'Poppins_500Medium'
-  | 'Poppins_500Medium_Italic'
-  | 'Poppins_600SemiBold'
-  | 'Poppins_600SemiBold_Italic'
-  | 'Poppins_700Bold'
-  | 'Poppins_700Bold_Italic'
-  | 'Poppins_800ExtraBold'
-  | 'Poppins_800ExtraBold_Italic'
-  | 'Poppins_900Black'
-  | 'Poppins_900Black_Italic';
-
-export const fonts: Record<FontName, any>;
+/**
+ * Font configuration for CampX Design System
+ *
+ * Fonts:
+ * - Poppins: Used for headings, buttons, labels, subtitles
+ * - Heebo: Used for body text, inputs, captions
+ *
+ * Weights:
+ * - 400 (Regular): Body text, labels, captions
+ * - 600 (Semi Bold): Subtitles, buttons, emphasized body
+ * - 800 (Extra Bold): Headings
+ */
+export declare const fonts: {
+    Poppins_400Regular: number;
+    Poppins_600SemiBold: number;
+    Poppins_800ExtraBold: number;
+    Heebo_400Regular: number;
+    Heebo_600SemiBold: number;
+};
+export type FontName = keyof typeof fonts;
+//# sourceMappingURL=fonts.d.ts.map