@dreamstack-us/kaal 0.0.1

package/lib/typescript/utils/validation.d.ts

@@ -0,0 +1,40 @@
+import * as v from 'valibot';
+/**
+ * Validates an ISO 8601 date string (YYYY-MM-DD)
+ */
+export declare const isoDateSchema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>;
+/**
+ * Validates an ISO 8601 datetime string with timezone offset
+ */
+export declare const isoDateTimeSchema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.IsoTimestampAction<string, undefined>]>;
+/**
+ * Validates a date range where start <= end
+ */
+export declare const dateRangeSchema: v.SchemaWithPipe<readonly [v.ObjectSchema<{
+    readonly start: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>;
+    readonly end: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>;
+}, undefined>, v.CheckAction<{
+    start: string;
+    end: string;
+}, "Start date must be before or equal to end date">]>;
+/**
+ * Validates date picker configuration
+ */
+export declare const datePickerValueSchema: v.ObjectSchema<{
+    readonly selectedDate: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>;
+    readonly minDate: v.OptionalSchema<v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>, undefined>;
+    readonly maxDate: v.OptionalSchema<v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>, undefined>;
+    readonly disabledDates: v.OptionalSchema<v.ArraySchema<v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>, undefined>, undefined>;
+}, undefined>;
+/**
+ * Parses an ISO date string to a Date object
+ * @deprecated Use parseISODate from date utils instead. Kept for backward compatibility.
+ */
+export declare const dateSchema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.TransformAction<string, Date>]>;
+/**
+ * @deprecated Alias for dateSchema for backward compatibility
+ */
+export declare const temporalDateSchema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.TransformAction<string, Date>]>;
+export type DatePickerValue = v.InferOutput<typeof datePickerValueSchema>;
+export type DateRange = v.InferOutput<typeof dateRangeSchema>;
+//# sourceMappingURL=validation.d.ts.map

package/lib/typescript/utils/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../src/utils/validation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,SAAS,CAAC;AAW7B;;GAEG;AACH,eAAO,MAAM,aAAa,sKAYzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,iGAAuC,CAAC;AAEtE;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;sDAQ3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;;aAKhC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU,gJAOtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,gJAAa,CAAC;AAE7C,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC1E,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@dreamstack-us/kaal",
+  "version": "0.0.1",
+  "description": "High-performance React Native DatePicker with Unistyles v3",
+  "type": "module",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/index.d.ts",
+  "react-native": "./src/index.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "react-native": {
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": ["lib", "src", "!**/__tests__", "!**/*.test.*"],
+  "scripts": {
+    "build": "bob build",
+    "dev": "bob build --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src/",
+    "test": "bun test",
+    "clean": "rm -rf lib",
+    "size": "size-limit"
+  },
+  "dependencies": {
+    "valibot": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native": ">=0.78.0",
+    "react-native-unistyles": "^3.0.0",
+    "react-native-nitro-modules": "0.31.4",
+    "react-native-reanimated": ">=3.17.0",
+    "react-native-gesture-handler": ">=2.20.0",
+    "react-native-svg": ">=13.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@expo/ui": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@dreamstack-us/kaal-themes": "workspace:*",
+    "@types/react": "^18.3.0",
+    "react": "18.3.1",
+    "react-native": "0.78.0",
+    "react-native-builder-bob": "^0.35.0",
+    "react-native-gesture-handler": "^2.21.0",
+    "react-native-nitro-modules": "0.31.4",
+    "react-native-reanimated": "^3.17.0",
+    "react-native-svg": "^15.15.1",
+    "react-native-unistyles": "^3.0.0",
+    "typescript": "^5.7.0",
+    "typescript-config": "workspace:*"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ],
+    "exclude": "**/{__tests__,__fixtures__,__mocks__}/**"
+  },
+  "size-limit": [
+    {
+      "path": "lib/module/index.js",
+      "limit": "25 kB"
+    }
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DreamStack-us/kaal.git",
+    "directory": "packages/core"
+  },
+  "keywords": [
+    "react-native",
+    "datepicker",
+    "timepicker",
+    "calendar",
+    "unistyles",
+    "new-architecture"
+  ],
+  "license": "MIT"
+}

package/src/components/CalendarGrid/CalendarGrid.styles.ts

@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const styles = StyleSheet.create((theme) => ({
+  container: {
+    backgroundColor: theme.colors.background.default,
+    borderRadius: theme.radii.card,
+    padding: theme.spacing(4),
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: theme.spacing(4),
+    paddingHorizontal: theme.spacing(2),
+  },
+  navButton: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: theme.radii.button,
+  },
+  navText: {
+    fontSize: 24,
+    color: theme.colors.primary.default,
+    fontWeight: '600',
+  },
+  monthTitle: {
+    fontSize: theme.typography.monthHeader.fontSize,
+    fontWeight: theme.typography.monthHeader.fontWeight,
+    color: theme.colors.foreground.default,
+  },
+  weekDays: {
+    flexDirection: 'row',
+    marginBottom: theme.spacing(2),
+  },
+  weekDayText: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: theme.typography.dayHeader.fontSize,
+    fontWeight: theme.typography.dayHeader.fontWeight,
+    color: theme.colors.foreground.muted,
+  },
+}));

package/src/components/CalendarGrid/CalendarGrid.tsx

@@ -0,0 +1,151 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { FlatList, Pressable, Text, View } from 'react-native';
+import {
+  addMonths,
+  compareDates,
+  formatYearMonth,
+  getDayOfWeek,
+  getFirstDayOfMonth,
+  getMonthDays,
+  isSameDay,
+  today,
+} from '../../utils/date';
+import { styles } from './CalendarGrid.styles';
+import { DayCell } from './DayCell';
+
+interface CalendarGridProps {
+  value: Date;
+  onChange: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  disabledDates?: Date[];
+  themeMode: 'ios' | 'android' | 'custom';
+}
+
+const CELL_SIZE = 44;
+const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+const generateMonthDays = (currentMonth: Date): (Date | null)[] => {
+  const firstDay = getFirstDayOfMonth(currentMonth);
+  // getDayOfWeek returns 0 for Sunday, we want Monday = 0
+  const startOfWeek = getDayOfWeek(firstDay);
+  const paddingDays = startOfWeek === 0 ? 6 : startOfWeek - 1;
+
+  const days: (Date | null)[] = [];
+
+  for (let i = 0; i < paddingDays; i++) {
+    days.push(null);
+  }
+
+  const monthDays = getMonthDays(
+    currentMonth.getUTCFullYear(),
+    currentMonth.getUTCMonth(),
+  );
+  for (const day of monthDays) {
+    days.push(day);
+  }
+
+  const remaining = 7 - (days.length % 7);
+  if (remaining < 7) {
+    for (let i = 0; i < remaining; i++) {
+      days.push(null);
+    }
+  }
+
+  return days;
+};
+
+export const CalendarGrid: React.FC<CalendarGridProps> = memo(
+  ({ value, onChange, minDate, maxDate, disabledDates, themeMode }) => {
+    const [currentMonth, setCurrentMonth] = React.useState(() =>
+      getFirstDayOfMonth(value),
+    );
+
+    const days = useMemo(() => generateMonthDays(currentMonth), [currentMonth]);
+
+    const todayDate = useMemo(() => today(), []);
+
+    const isDisabled = useCallback(
+      (date: Date | null): boolean => {
+        if (!date) return true;
+        if (minDate && compareDates(date, minDate) < 0) return true;
+        if (maxDate && compareDates(date, maxDate) > 0) return true;
+        if (disabledDates?.some((d) => isSameDay(date, d))) return true;
+        return false;
+      },
+      [minDate, maxDate, disabledDates],
+    );
+
+    const navigateMonth = useCallback((direction: 1 | -1) => {
+      setCurrentMonth((prev) => addMonths(prev, direction));
+    }, []);
+
+    const renderDay = useCallback(
+      ({ item }: { item: Date | null }) => (
+        <DayCell
+          date={item}
+          isSelected={item ? isSameDay(item, value) : false}
+          isToday={item ? isSameDay(item, todayDate) : false}
+          isDisabled={isDisabled(item)}
+          isWeekend={
+            item ? getDayOfWeek(item) === 0 || getDayOfWeek(item) === 6 : false
+          }
+          onPress={item && !isDisabled(item) ? () => onChange(item) : undefined}
+        />
+      ),
+      [value, todayDate, isDisabled, onChange],
+    );
+
+    const keyExtractor = useCallback(
+      (item: Date | null, index: number) =>
+        item?.toISOString() ?? `empty-${index}`,
+      [],
+    );
+
+    const getItemLayout = useCallback(
+      (_data: ArrayLike<Date | null> | null | undefined, index: number) => ({
+        length: CELL_SIZE,
+        offset: CELL_SIZE * Math.floor(index / 7),
+        index,
+      }),
+      [],
+    );
+
+    return (
+      <View style={styles.container}>
+        <View style={styles.header}>
+          <Pressable onPress={() => navigateMonth(-1)} style={styles.navButton}>
+            <Text style={styles.navText}>‹</Text>
+          </Pressable>
+          <Text style={styles.monthTitle}>{formatYearMonth(currentMonth)}</Text>
+          <Pressable onPress={() => navigateMonth(1)} style={styles.navButton}>
+            <Text style={styles.navText}>›</Text>
+          </Pressable>
+        </View>
+
+        <View style={styles.weekDays}>
+          {WEEK_DAYS.map((day) => (
+            <Text key={day} style={styles.weekDayText}>
+              {day}
+            </Text>
+          ))}
+        </View>
+
+        <FlatList
+          data={days}
+          renderItem={renderDay}
+          keyExtractor={keyExtractor}
+          getItemLayout={getItemLayout}
+          numColumns={7}
+          scrollEnabled={false}
+          removeClippedSubviews={true}
+          maxToRenderPerBatch={14}
+          windowSize={3}
+          initialNumToRender={42}
+        />
+      </View>
+    );
+  },
+);
+
+CalendarGrid.displayName = 'CalendarGrid';

package/src/components/CalendarGrid/DayCell.tsx

@@ -0,0 +1,108 @@
+import type React from 'react';
+import { memo } from 'react';
+import { Pressable, Text } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+interface DayCellProps {
+  date: Date | null;
+  isSelected: boolean;
+  isToday: boolean;
+  isDisabled: boolean;
+  isWeekend: boolean;
+  onPress?: () => void;
+}
+
+const styles = StyleSheet.create((theme) => ({
+  cell: {
+    width: 44,
+    height: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.datepicker.cellBackground,
+    variants: {
+      state: {
+        selected: {
+          backgroundColor: theme.colors.datepicker.cellSelected,
+          borderRadius: theme.radii.cell,
+        },
+        today: {
+          backgroundColor: theme.colors.datepicker.cellToday,
+          borderRadius: theme.radii.cell,
+          borderWidth: 1,
+          borderColor: theme.colors.primary.default,
+        },
+        disabled: {
+          opacity: 0.4,
+        },
+        weekend: {},
+      },
+    },
+  },
+  text: {
+    fontSize: theme.typography.dayCell.fontSize,
+    fontWeight: theme.typography.dayCell.fontWeight,
+    color: theme.colors.datepicker.textDefault,
+    variants: {
+      state: {
+        selected: {
+          color: theme.colors.datepicker.textSelected,
+          fontWeight: '600',
+        },
+        today: {
+          color: theme.colors.primary.default,
+          fontWeight: '600',
+        },
+        disabled: {
+          color: theme.colors.datepicker.textDisabled,
+        },
+        weekend: {
+          color: theme.colors.datepicker.textWeekend,
+        },
+      },
+    },
+  },
+}));
+
+export const DayCell: React.FC<DayCellProps> = memo(
+  ({ date, isSelected, isToday, isDisabled, isWeekend, onPress }) => {
+    if (!date) {
+      return <Pressable style={styles.cell} disabled />;
+    }
+
+    const state = isDisabled
+      ? 'disabled'
+      : isSelected
+        ? 'selected'
+        : isToday
+          ? 'today'
+          : isWeekend
+            ? 'weekend'
+            : undefined;
+
+    styles.useVariants({ state });
+
+    return (
+      <Pressable
+        style={styles.cell}
+        onPress={onPress}
+        disabled={isDisabled}
+        accessibilityRole="button"
+        accessibilityLabel={new Intl.DateTimeFormat('en-US', {
+          weekday: 'long',
+          month: 'long',
+          day: 'numeric',
+        }).format(date)}
+        accessibilityState={{ selected: isSelected, disabled: isDisabled }}
+      >
+        <Text style={styles.text}>{date.getUTCDate()}</Text>
+      </Pressable>
+    );
+  },
+  (prev, next) =>
+    prev.date?.getTime() === next.date?.getTime() &&
+    prev.isSelected === next.isSelected &&
+    prev.isToday === next.isToday &&
+    prev.isDisabled === next.isDisabled,
+);
+
+DayCell.displayName = 'DayCell';

package/src/components/CalendarGrid/index.ts

@@ -0,0 +1 @@
+export { CalendarGrid } from './CalendarGrid';

package/src/components/DatePicker/DatePicker.android.tsx

@@ -0,0 +1,69 @@
+import React, { Suspense, useCallback } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { toISODateString } from '../../utils/date';
+import { CalendarGrid } from '../CalendarGrid';
+import type { KaalDatePickerProps } from './DatePicker';
+import { styles } from './DatePicker.styles';
+
+interface ExpoDatePickerProps {
+  value: Date;
+  onChange: (date: Date) => void;
+}
+
+// @ts-expect-error - React.lazy fallback returns null when @expo/ui unavailable
+const ExpoDatePicker = React.lazy(async () => {
+  try {
+    // @ts-expect-error - @expo/ui types not available
+    const { DateTimePicker } = await import('@expo/ui/jetpack-compose');
+    return {
+      default: ({ value, onChange }: ExpoDatePickerProps) => (
+        <DateTimePicker
+          onDateSelected={onChange}
+          displayedComponents="date"
+          initialDate={toISODateString(value)}
+          variant="picker"
+        />
+      ),
+    };
+  } catch {
+    // Fallback when @expo/ui is not available
+    return { default: (_props: ExpoDatePickerProps) => null };
+  }
+});
+
+export const DatePicker: React.FC<KaalDatePickerProps> = ({
+  value,
+  onChange,
+  theme = 'native',
+  minDate,
+  maxDate,
+  disabledDates,
+}) => {
+  const handleDateChange = useCallback(
+    (date: Date) => {
+      onChange(date);
+    },
+    [onChange],
+  );
+
+  if (theme === 'native') {
+    return (
+      <View style={styles.container}>
+        <Suspense fallback={<ActivityIndicator />}>
+          <ExpoDatePicker value={value} onChange={handleDateChange} />
+        </Suspense>
+      </View>
+    );
+  }
+
+  return (
+    <CalendarGrid
+      value={value}
+      onChange={onChange}
+      minDate={minDate}
+      maxDate={maxDate}
+      disabledDates={disabledDates}
+      themeMode={theme}
+    />
+  );
+};

package/src/components/DatePicker/DatePicker.ios.tsx

@@ -0,0 +1,78 @@
+import React, { Suspense, useCallback } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { toISODateString } from '../../utils/date';
+import { CalendarGrid } from '../CalendarGrid';
+import type { KaalDatePickerProps } from './DatePicker';
+import { styles } from './DatePicker.styles';
+
+interface ExpoDatePickerProps {
+  value: Date;
+  onChange: (date: Date) => void;
+  variant?: string;
+}
+
+// @ts-expect-error - React.lazy fallback returns null when @expo/ui unavailable
+const ExpoDatePicker = React.lazy(async () => {
+  try {
+    // @ts-expect-error - @expo/ui types not available
+    const { DateTimePicker, Host } = await import('@expo/ui/swift-ui');
+    return {
+      default: ({ value, onChange, variant }: ExpoDatePickerProps) => (
+        <Host matchContents>
+          <DateTimePicker
+            onDateSelected={onChange}
+            displayedComponents="date"
+            initialDate={toISODateString(value)}
+            variant={variant || 'wheel'}
+          />
+        </Host>
+      ),
+    };
+  } catch {
+    // Fallback when @expo/ui is not available
+    return { default: (_props: ExpoDatePickerProps) => null };
+  }
+});
+
+export const DatePicker: React.FC<KaalDatePickerProps> = ({
+  value,
+  onChange,
+  mode = 'date',
+  theme = 'native',
+  variant = 'wheel',
+  minDate,
+  maxDate,
+  disabledDates,
+}) => {
+  const handleDateChange = useCallback(
+    (date: Date) => {
+      onChange(date);
+    },
+    [onChange],
+  );
+
+  if (theme === 'native') {
+    return (
+      <View style={styles.container}>
+        <Suspense fallback={<ActivityIndicator />}>
+          <ExpoDatePicker
+            value={value}
+            onChange={handleDateChange}
+            variant={variant}
+          />
+        </Suspense>
+      </View>
+    );
+  }
+
+  return (
+    <CalendarGrid
+      value={value}
+      onChange={onChange}
+      minDate={minDate}
+      maxDate={maxDate}
+      disabledDates={disabledDates}
+      themeMode={theme}
+    />
+  );
+};

package/src/components/DatePicker/DatePicker.styles.ts

@@ -0,0 +1,35 @@
+import { Platform } from 'react-native';
+import { StyleSheet, type UnistylesVariants } from 'react-native-unistyles';
+
+export const styles = StyleSheet.create((theme) => ({
+  container: {
+    backgroundColor: theme.colors.background.default,
+    borderRadius: theme.radii.card,
+    overflow: 'hidden',
+    variants: {
+      size: {
+        compact: {
+          padding: theme.spacing(2),
+        },
+        default: {
+          padding: theme.spacing(4),
+        },
+        large: {
+          padding: theme.spacing(6),
+        },
+      },
+    },
+  },
+  backdrop: Platform.select({
+    web: {
+      backdropFilter: 'blur(20px) saturate(180%)',
+      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+      backgroundColor: 'rgba(255, 255, 255, 0.7)',
+    },
+    default: {
+      backgroundColor: theme.colors.background.elevated,
+    },
+  }),
+}));
+
+export type DatePickerVariants = UnistylesVariants<typeof styles>;

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,21 @@
+import type React from 'react';
+import type { DatePickerMode } from '../../types';
+
+export interface KaalDatePickerProps {
+  value: Date;
+  onChange: (date: Date) => void;
+  mode?: DatePickerMode;
+  theme?: 'native' | 'ios' | 'android' | 'custom';
+  variant?: 'wheel' | 'calendar' | 'compact';
+  minDate?: Date;
+  maxDate?: Date;
+  disabledDates?: Date[];
+  locale?: string;
+}
+
+// Platform-specific implementations are handled by Metro's file resolution
+// This file serves as the type definition and fallback
+export const DatePicker: React.FC<KaalDatePickerProps> = (_props) => {
+  // This should never be reached - Metro resolves platform-specific files
+  return null;
+};

package/src/components/DatePicker/DatePicker.web.tsx

@@ -0,0 +1,36 @@
+import type React from 'react';
+import { CalendarGrid } from '../CalendarGrid';
+import { WheelPicker } from '../WheelPicker';
+import type { KaalDatePickerProps } from './DatePicker';
+
+export const DatePicker: React.FC<KaalDatePickerProps> = ({
+  value,
+  onChange,
+  theme = 'ios',
+  variant = 'calendar',
+  minDate,
+  maxDate,
+  disabledDates,
+}) => {
+  if (theme === 'ios' && variant === 'wheel') {
+    return (
+      <WheelPicker
+        value={value}
+        onChange={onChange}
+        minDate={minDate}
+        maxDate={maxDate}
+      />
+    );
+  }
+
+  return (
+    <CalendarGrid
+      value={value}
+      onChange={onChange}
+      minDate={minDate}
+      maxDate={maxDate}
+      disabledDates={disabledDates}
+      themeMode={theme === 'native' ? 'ios' : theme}
+    />
+  );
+};