@idealyst/components 1.2.40 → 1.2.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.40",
+  "version": "1.2.42",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.40",
+    "@idealyst/theme": "^1.2.42",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -106,7 +106,8 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.40",
+    "@idealyst/blur": "^1.2.40",
+    "@idealyst/theme": "^1.2.42",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/Dialog/Dialog.native.tsx

@@ -18,6 +18,7 @@ const Dialog = forwardRef<View, DialogProps>(({
   style,
   testID,
   id,
+  BackdropComponent,
   // Accessibility props
   accessibilityLabel,
   accessibilityHint,
@@ -124,6 +125,56 @@ const Dialog = forwardRef<View, DialogProps>(({
   const closeButtonTextStyle = (dialogStyles.closeButtonText as any)({});
   const contentStyle = (dialogStyles.content as any)({});
 
+  // Style for custom backdrop wrapper (no default backdrop styling)
+  const customBackdropWrapperStyle = {
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: 'flex' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+  };
+
+  // Style for custom backdrop component container (fills entire backdrop area)
+  const customBackdropContainerStyle = {
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  };
+
+  const dialogContainer = (
+    <TouchableWithoutFeedback onPress={(e: GestureResponderEvent) => e.stopPropagation()}>
+      <Animated.View ref={ref as any} style={[containerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
+        {(title || showCloseButton) && (
+          <View style={headerStyle}>
+            {title && (
+              <Text style={titleStyle}>
+                {title}
+              </Text>
+            )}
+            {showCloseButton && (
+              <TouchableOpacity
+                style={closeButtonStyle}
+                onPress={handleClosePress}
+                accessibilityLabel="Close dialog"
+                accessibilityRole="button"
+              >
+                <Text style={closeButtonTextStyle}>×</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        )}
+        <View style={contentStyle}>
+          {children}
+        </View>
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  );
+
   return (
     <Modal
       visible={open}
@@ -134,34 +185,18 @@ const Dialog = forwardRef<View, DialogProps>(({
       testID={testID}
     >
       <TouchableWithoutFeedback onPress={handleBackdropPress}>
-        <Animated.View style={[backdropStyle, backdropAnimatedStyle]}>
-          <TouchableWithoutFeedback onPress={(e: GestureResponderEvent) => e.stopPropagation()}>
-            <Animated.View ref={ref as any} style={[containerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
-              {(title || showCloseButton) && (
-                <View style={headerStyle}>
-                  {title && (
-                    <Text style={titleStyle}>
-                      {title}
-                    </Text>
-                  )}
-                  {showCloseButton && (
-                    <TouchableOpacity
-                      style={closeButtonStyle}
-                      onPress={handleClosePress}
-                      accessibilityLabel="Close dialog"
-                      accessibilityRole="button"
-                    >
-                      <Text style={closeButtonTextStyle}>×</Text>
-                    </TouchableOpacity>
-                  )}
-                </View>
-              )}
-              <View style={contentStyle}>
-                {children}
-              </View>
+        {BackdropComponent ? (
+          <View style={customBackdropWrapperStyle}>
+            <Animated.View style={[customBackdropContainerStyle, backdropAnimatedStyle]}>
+              <BackdropComponent isVisible={open} />
             </Animated.View>
-          </TouchableWithoutFeedback>
-        </Animated.View>
+            {dialogContainer}
+          </View>
+        ) : (
+          <Animated.View style={[backdropStyle, backdropAnimatedStyle]}>
+            {dialogContainer}
+          </Animated.View>
+        )}
       </TouchableWithoutFeedback>
     </Modal>
   );

package/src/Dialog/Dialog.web.tsx

@@ -24,6 +24,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   style,
   testID,
   id,
+  BackdropComponent,
   // Accessibility props
   accessibilityLabel,
   accessibilityHint,
@@ -154,7 +155,73 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
 
   const mergedBackdropRef = useMergeRefs(ref, backdropProps.ref);
 
-  const dialogContent = (
+  // Styles for the custom backdrop wrapper (no default backdrop styling)
+  const customBackdropWrapperStyle: React.CSSProperties = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000,
+  };
+
+  // Styles for the custom backdrop component container (fills the entire backdrop area)
+  const customBackdropStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  };
+
+  const dialogContent = BackdropComponent ? (
+    <div
+      ref={mergedBackdropRef}
+      style={customBackdropWrapperStyle}
+      onClick={handleBackdropClick}
+      data-testid={testID}
+    >
+      <div style={customBackdropStyle}>
+        <BackdropComponent isVisible={isVisible} />
+      </div>
+      <div
+        {...containerProps}
+        {...ariaProps}
+        ref={dialogRef}
+        id={dialogId}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {(title || showCloseButton) && (
+          <div {...headerProps}>
+            {title && (
+              <h2 {...titleProps} id={titleId}>
+                {title}
+              </h2>
+            )}
+            {showCloseButton && (
+              <button
+                {...closeButtonProps}
+                onClick={handleCloseClick}
+                aria-label="Close dialog"
+                type="button"
+              >
+                <Icon name="close" />
+              </button>
+            )}
+          </div>
+        )}
+        <div {...contentProps}>
+          {children}
+        </div>
+      </div>
+    </div>
+  ) : (
     <div
       {...backdropProps}
       ref={mergedBackdropRef}

package/src/Dialog/types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, ComponentType } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { BaseProps } from '../utils/viewStyleProps';
 import { InteractiveAccessibilityProps } from '../utils/accessibility';
@@ -8,6 +8,16 @@ export type DialogSizeVariant = 'sm' | 'md' | 'lg' | 'fullscreen';
 export type DialogType = 'default' | 'alert' | 'confirmation';
 export type DialogAnimationType = 'slide' | 'fade' | 'none';
 
+/**
+ * Props passed to custom backdrop components
+ */
+export interface BackdropComponentProps {
+  /**
+   * Whether the dialog is visible (for animation purposes)
+   */
+  isVisible: boolean;
+}
+
 /**
  * Modal dialog component for focused interactions requiring user attention.
  * Supports multiple sizes, animation types, and configurable close behaviors.
@@ -72,4 +82,11 @@ export interface DialogProps extends BaseProps, InteractiveAccessibilityProps {
    * Test ID for testing
    */
   testID?: string;
+
+  /**
+   * Custom backdrop component that replaces the default backdrop.
+   * The component will be rendered as a full-screen overlay behind the dialog.
+   * It receives isVisible for animation coordination.
+   */
+  BackdropComponent?: ComponentType<BackdropComponentProps>;
 }

package/src/Screen/Screen.native.tsx

@@ -26,9 +26,13 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
 }, ref) => {
   const insets = useSafeAreaInsets();
 
+  // Handle 'transparent' background separately since it's not a surface color key
+  // The $surface iterator only expands to actual surface color keys
+  const backgroundVariant = background === 'transparent' ? undefined : background;
+
   // Set active variants for this render
   screenStyles.useVariants({
-    background,
+    background: backgroundVariant,
     safeArea,
     gap,
     padding,

package/src/Screen/Screen.styles.tsx

@@ -5,6 +5,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
 import type { Theme as BaseTheme } from '@idealyst/theme';
 import { ViewStyleSize } from '../utils/viewStyleProps';
+import type { Surface } from '@idealyst/theme';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
 void StyleSheet;
@@ -12,7 +13,8 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-type ScreenBackground = 'screen' | 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-secondary' | 'inverse-tertiary' | 'transparent';
+// Background type is derived from Surface color keys plus 'transparent'
+type ScreenBackground = Surface | 'transparent';
 
 export type ScreenDynamicProps = {
     background?: ScreenBackground;
@@ -27,23 +29,19 @@ export type ScreenDynamicProps = {
 };
 
 /**
- * Screen styles with $iterator expansion for spacing variants.
+ * Screen styles with $iterator expansion for spacing and background variants.
  *
  * NOTE: Top-level theme access required for Unistyles reactivity.
+ * The background variant uses $surface iterator to expand to all surface color keys.
  */
 export const screenStyles = defineStyle('Screen', (theme: Theme) => ({
     screen: (_props: ScreenDynamicProps) => ({
         flex: 1,
         variants: {
+            // $iterator expands for each surface color key
             background: {
-                screen: { backgroundColor: theme.colors.surface.screen },
-                primary: { backgroundColor: theme.colors.surface.primary },
-                secondary: { backgroundColor: theme.colors.surface.secondary },
-                tertiary: { backgroundColor: theme.colors.surface.tertiary },
-                inverse: { backgroundColor: theme.colors.surface.inverse },
-                'inverse-secondary': { backgroundColor: theme.colors.surface['inverse-secondary'] },
-                'inverse-tertiary': { backgroundColor: theme.colors.surface['inverse-tertiary'] },
-                transparent: { backgroundColor: 'transparent' },
+                backgroundColor: theme.colors.$surface,
+                // 'transparent' is handled separately via compound variant or default
             },
             safeArea: {
                 true: {},
@@ -81,15 +79,9 @@ export const screenStyles = defineStyle('Screen', (theme: Theme) => ({
 
     screenContent: (_props: ScreenDynamicProps) => ({
         variants: {
+            // $iterator expands for each surface color key
             background: {
-                screen: { backgroundColor: theme.colors.surface.screen },
-                primary: { backgroundColor: theme.colors.surface.primary },
-                secondary: { backgroundColor: theme.colors.surface.secondary },
-                tertiary: { backgroundColor: theme.colors.surface.tertiary },
-                inverse: { backgroundColor: theme.colors.surface.inverse },
-                'inverse-secondary': { backgroundColor: theme.colors.surface['inverse-secondary'] },
-                'inverse-tertiary': { backgroundColor: theme.colors.surface['inverse-tertiary'] },
-                transparent: { backgroundColor: 'transparent' },
+                backgroundColor: theme.colors.$surface,
             },
             safeArea: {
                 true: {},

package/src/Screen/Screen.web.tsx

@@ -29,8 +29,12 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
 }, ref) => {
   const layoutRef = useWebLayout<HTMLDivElement>(onLayout);
 
+  // Handle 'transparent' background separately since it's not a surface color key
+  // The $surface iterator only expands to actual surface color keys
+  const backgroundVariant = background === 'transparent' ? undefined : background;
+
   screenStyles.useVariants({
-    background,
+    background: backgroundVariant,
     safeArea,
     gap,
     padding,

package/src/View/View.native.tsx

@@ -47,9 +47,13 @@ const View = forwardRef<IdealystElement, ViewProps>(({
   id,
   onLayout,
 }, ref) => {
+  // Handle 'transparent' background separately since it's not a surface color key
+  // The $surface iterator only expands to actual surface color keys
+  const backgroundVariant = background === 'transparent' ? undefined : background;
+
   // Set active variants for this render
   viewStyles.useVariants({
-    background,
+    background: backgroundVariant,
     radius,
     border,
     gap,

package/src/View/View.styles.tsx

@@ -29,10 +29,12 @@ export type ViewVariants = {
 export type ViewDynamicProps = Partial<ViewVariants>;
 
 /**
- * View styles with $iterator expansion for spacing variants.
+ * View styles with $iterator expansion for spacing and background variants.
  *
  * NOTE: At least one top-level theme access is required for Unistyles to trace
  * theme dependencies. We use a transparent borderColor as a marker.
+ *
+ * The background variant uses $surface iterator to expand to all surface color keys.
  */
 export const viewStyles = defineStyle('View', (theme: Theme) => ({
     view: (_props: ViewDynamicProps) => ({
@@ -41,14 +43,10 @@ export const viewStyles = defineStyle('View', (theme: Theme) => ({
         borderColor: theme.colors.border.primary,
         borderWidth: 0,
         variants: {
+            // $iterator expands for each surface color key
             background: {
-                transparent: { backgroundColor: 'transparent' },
-                primary: { backgroundColor: theme.colors.surface.primary },
-                secondary: { backgroundColor: theme.colors.surface.secondary },
-                tertiary: { backgroundColor: theme.colors.surface.tertiary },
-                inverse: { backgroundColor: theme.colors.surface.inverse },
-                'inverse-secondary': { backgroundColor: theme.colors.surface['inverse-secondary'] },
-                'inverse-tertiary': { backgroundColor: theme.colors.surface['inverse-tertiary'] },
+                backgroundColor: theme.colors.$surface,
+                // 'transparent' is handled as a special case
             },
             radius: {
                 none: { borderRadius: 0 },

package/src/View/View.web.tsx

@@ -36,8 +36,12 @@ const View = forwardRef<IdealystElement, ViewProps>(({
 }, ref) => {
   const layoutRef = useWebLayout<HTMLDivElement>(onLayout);
 
+  // Handle 'transparent' background separately since it's not a surface color key
+  // The $surface iterator only expands to actual surface color keys
+  const backgroundVariant = background === 'transparent' ? undefined : background;
+
   viewStyles.useVariants({
-    background,
+    background: backgroundVariant,
     radius,
     border,
     gap,

package/src/examples/DialogExamples.tsx

@@ -1,11 +1,30 @@
 import { useState } from 'react';
 import { Screen, View, Button, Text, Dialog } from '../index';
+import { BlurView } from '@idealyst/blur';
+import type { BackdropComponentProps } from '../Dialog/types';
+
+/**
+ * Custom blur backdrop component for dialogs.
+ * Uses @idealyst/blur to create a frosted glass effect over the content.
+ */
+const BlurBackdrop = ({ isVisible }: BackdropComponentProps) => (
+  <BlurView
+    intensity={isVisible ? 80 : 0}
+    blurType="dark"
+    style={{
+      flex: 1,
+      width: '100%',
+      height: '100%',
+    }}
+  />
+);
 
 export const DialogExamples = () => {
   const [basicOpen, setBasicOpen] = useState(false);
   const [alertOpen, setAlertOpen] = useState(false);
   const [confirmationOpen, setConfirmationOpen] = useState(false);
   const [sizesOpen, setSizesOpen] = useState<string | null>(null);
+  const [blurBackdropOpen, setBlurBackdropOpen] = useState(false);
 
   return (
     <Screen background="primary" padding="lg">
@@ -22,7 +41,7 @@ export const DialogExamples = () => {
           </Button>
           <Dialog
             open={basicOpen}
-            onOpenChange={setBasicOpen}
+            onClose={() => setBasicOpen(false)}
             title="Basic Dialog"
           >
             <Text>This is a basic dialog with a title and some content.</Text>
@@ -53,7 +72,7 @@ export const DialogExamples = () => {
           {/* Alert Dialog */}
           <Dialog
             open={alertOpen}
-            onOpenChange={setAlertOpen}
+            onClose={() => setAlertOpen(false)}
             title="Important Alert"
             type="alert"
           >
@@ -72,7 +91,7 @@ export const DialogExamples = () => {
           {/* Confirmation Dialog */}
           <Dialog
             open={confirmationOpen}
-            onOpenChange={setConfirmationOpen}
+            onClose={() => setConfirmationOpen(false)}
             title="Confirm Action"
             type="confirmation"
             closeOnBackdropClick={false}
@@ -114,7 +133,7 @@ export const DialogExamples = () => {
           {sizesOpen && (
             <Dialog
               open={!!sizesOpen}
-              onOpenChange={() => setSizesOpen(null)}
+              onClose={() => setSizesOpen(null)}
               title={`${sizesOpen === 'sm' ? 'Small' : sizesOpen === 'md' ? 'Medium' : 'Large'} Dialog`}
               size={sizesOpen as 'sm' | 'md' | 'lg'}
             >
@@ -135,6 +154,41 @@ export const DialogExamples = () => {
         </View>
 
 
+        {/* Custom Blur Backdrop */}
+        <View gap="md">
+          <Text typography="subtitle1">Custom Blur Backdrop</Text>
+          <Text typography="caption" color="secondary">
+            Use the BackdropComponent prop to create a custom blur backdrop using @idealyst/blur.
+          </Text>
+          <Button onPress={() => setBlurBackdropOpen(true)}>
+            Open Dialog with Blur Backdrop
+          </Button>
+          <Dialog
+            open={blurBackdropOpen}
+            onClose={() => setBlurBackdropOpen(false)}
+            title="Blur Backdrop Dialog"
+            BackdropComponent={BlurBackdrop}
+          >
+            <Text>
+              This dialog uses a custom backdrop component with @idealyst/blur to create
+              a frosted glass effect over the background content.
+            </Text>
+            <View gap="md" style={{ marginTop: 16 }}>
+              <Text typography="caption" color="secondary">
+                The blur intensity animates based on the isVisible prop passed to the
+                BackdropComponent.
+              </Text>
+              <Button
+                type="contained"
+                intent="primary"
+                onPress={() => setBlurBackdropOpen(false)}
+              >
+                Close
+              </Button>
+            </View>
+          </Dialog>
+        </View>
+
         {/* Dialog Options */}
         <View gap="md">
           <Text typography="subtitle1">Dialog Options</Text>
@@ -150,6 +204,9 @@ export const DialogExamples = () => {
           <Text typography="caption" color="secondary">
             • Focus management: Automatic focus trapping and restoration (web only)
           </Text>
+          <Text typography="caption" color="secondary">
+            • Custom backdrop: Use BackdropComponent prop for custom effects like blur
+          </Text>
         </View>
       </View>
     </Screen>