@snapdragonsnursery/react-components 1.4.0 → 1.6.0

package/README.md

@@ -6,13 +6,14 @@ A collection of reusable React components for Snapdragons Nursery applications.
 
 - **ChildSearchModal**: Advanced child search and selection component with filtering, pagination, and multi-select capabilities
 - **ChildSearchFilters**: Advanced filtering component with date range picker, status, site, and age filters (includes Apply button for better UX)
-- **DateRangePicker**: Shadcn-style date range picker component
+- **DateRangePicker**: Shadcn-style date range picker component (supports optional presets)
 - **DatePicker**: Shadcn-style single date picker component
 - **Calendar**: Official shadcn calendar component
 - **Popover**: Official shadcn popover component
 - **AuthButtons**: Authentication buttons for MSAL integration
 - **ThemeToggle**: Dark/light theme toggle component
 - **LandingPage**: Landing page component with authentication
+- **SoftWarningAlert**: Soft-styled alert for non-blocking warnings with optional action
 
 ## Installation
 
@@ -39,6 +40,25 @@ function MyComponent() {
 }
 ```
 
+### SoftWarningAlert Example
+
+```jsx
+import { SoftWarningAlert } from '@snapdragonsnursery/react-components';
+import { AlertTriangle } from 'lucide-react';
+
+function Notice() {
+  return (
+    <SoftWarningAlert
+      icon={AlertTriangle}
+      title="Unsubmitted claims"
+      description="You have 3 unsubmitted mileage claims. Create a report to submit."
+      actionLabel="Create report"
+      onAction={() => console.log('clicked')}
+    />
+  );
+}
+```
+
 ## Shadcn Components
 
 This package includes official shadcn components with proper styling. The components use shadcn CSS variables, so make sure your consuming project has the shadcn CSS variables defined in your CSS file.
@@ -118,11 +138,28 @@ function MyComponent() {
   };
 
   return (
-    <DateRangePicker
-      selectedRange={selectedRange}
-      onSelect={handleDateRangeChange}
-      placeholder="Select a date range"
-    />
+    <>
+      <DateRangePicker
+        selectedRange={selectedRange}
+        onSelect={handleDateRangeChange}
+        placeholder="Select a date range"
+        numberOfMonths={2}
+      />
+      {/* With presets */}
+      <DateRangePicker
+        selectedRange={selectedRange}
+        onSelect={handleDateRangeChange}
+        presetsEnabled
+        presets={[
+          { key: 'thisWeek', label: 'This week', getRange: () => ({ from: startOfWeek(new Date(), { weekStartsOn: 1 }), to: new Date() }) },
+          { key: 'lastWeek', label: 'Last week', getRange: () => { const ref = subWeeks(new Date(), 1); return { from: startOfWeek(ref, { weekStartsOn: 1 }), to: endOfWeek(ref, { weekStartsOn: 1 }) } } },
+          { key: 'thisMonth', label: 'This month', getRange: () => ({ from: startOfMonth(new Date()), to: new Date() }) },
+          { key: 'lastMonth', label: 'Last month', getRange: () => { const ref = subMonths(new Date(), 1); return { from: startOfMonth(ref), to: endOfMonth(ref) } } },
+          { key: 'thisYear', label: 'This year', getRange: () => ({ from: startOfYear(new Date()), to: new Date() }) },
+          { key: 'lastYear', label: 'Last year', getRange: () => { const ref = subYears(new Date(), 1); return { from: startOfYear(ref), to: endOfYear(ref) } } },
+        ]}
+      />
+    </>
   );
 }
 ```
@@ -162,6 +199,7 @@ VITE_COMMON_API_BASE_URL=https://snaps-common-api.azurewebsites.net
 - [ChildSearchModal Documentation](./CHILD_SEARCH_MODAL_DOCUMENTATION.md)
 - [ChildSearchModal README](./CHILD_SEARCH_README.md)
 - [Release Guide](./RELEASE.md)
+- [SoftWarningAlert](./SOFT_WARNING_ALERT.md)
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -59,11 +59,14 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "module": "src/index.js",
+  "types": "src/index.d.ts",
   "files": [
     "src",
     "src/index.css"
   ],
   "devDependencies": {
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@testing-library/jest-dom": "^6.6.4",

package/src/EmployeeSearchPage.test.jsx

@@ -31,22 +31,19 @@ jest.mock('./lib/utils', () => ({
 // Mock fetch
 global.fetch = jest.fn();
 
-// Mock process.env and import.meta.env
+// Mock process.env
 process.env.VITE_COMMON_API_FUNCTION_KEY = 'test-key';
 process.env.VITE_COMMON_API_BASE_URL = 'https://test-api.example.com';
 
 // Mock import.meta.env for Vite environment variables
-Object.defineProperty(globalThis, 'import', {
-  value: {
-    meta: {
-      env: {
-        VITE_COMMON_API_FUNCTION_KEY: 'test-key',
-        VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
-      },
+global.import = {
+  meta: {
+    env: {
+      VITE_COMMON_API_FUNCTION_KEY: 'test-key',
+      VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
     },
   },
-  writable: true,
-});
+};
 
 // Mock the UI components
 jest.mock('./components/ui/input', () => ({

package/src/__mocks__/EmployeeSearchPage.jsx

@@ -0,0 +1,87 @@
+// Mock EmployeeSearchPage component for testing
+// This avoids the import.meta.env issue by providing a comprehensive mock
+
+import React from 'react';
+
+const EmployeeSearchPage = (props) => {
+  const {
+    title = "Employee Search",
+    searchPlaceholder = "Search by name, employee ID, or email...",
+    onSelect,
+    multiSelect = false,
+    selectedEmployees = [],
+    sites = [],
+    roles = [],
+    managers = [],
+    activeOnly = true,
+    status = null,
+    startDateFrom = null,
+    startDateTo = null,
+    endDateFrom = null,
+    endDateTo = null,
+    sortBy = "full_name",
+    sortOrder = "asc",
+    applicationContext = "employee-search",
+    bypassPermissions = false,
+    maxSelections = null,
+    showRoleFilter = true,
+    showManagerFilter = true,
+    showTermTimeFilter = true,
+    showMaternityFilter = true,
+    showStartDateFilter = true,
+    showEndDateFilter = false,
+    showWorkingHoursFilter = true,
+    loadAllResults = false,
+  } = props;
+
+  return (
+    <div data-testid="employee-search-page">
+      <h1>{title}</h1>
+      
+      {/* Search Input */}
+      <input
+        type="text"
+        placeholder={searchPlaceholder}
+        data-testid="search-input"
+        aria-label="Search employees"
+      />
+      
+      {/* Employee Search Filters */}
+      <div data-testid="employee-search-filters">
+        <button>Change Status</button>
+        <button>Apply Filters</button>
+        <button>Clear Filters</button>
+      </div>
+      
+      {/* Loading State */}
+      <div role="status" aria-live="polite">
+        Loading employees...
+      </div>
+      
+      {/* Mock Table */}
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>John Doe</td>
+            <td>john@example.com</td>
+            <td>Active</td>
+          </tr>
+        </tbody>
+      </table>
+      
+      {/* Props Display for debugging */}
+      <div style={{ display: 'none' }}>
+        Props: {JSON.stringify(props)}
+      </div>
+    </div>
+  );
+};
+
+export default EmployeeSearchPage; 

package/src/__mocks__/importMetaEnv.js

@@ -0,0 +1,5 @@
+// Mock for import.meta.env to handle Vite environment variables in Jest tests
+export default {
+  VITE_COMMON_API_FUNCTION_KEY: 'test-key',
+  VITE_COMMON_API_BASE_URL: 'https://test-api.example.com',
+}; 

package/src/components/EmployeeSearchFilters.jsx

@@ -33,6 +33,7 @@ const EmployeeSearchFilters = ({
   showStartDateFilter = true,
   showEndDateFilter = true,
   showWorkingHoursFilter = true,
+  showDbsFilter = true,
 }) => {
   // Local state for filters that haven't been applied yet
   const [localFilters, setLocalFilters] = React.useState(filters);
@@ -310,6 +311,22 @@ const EmployeeSearchFilters = ({
                 </div>
               )}
 
+              {/* DBS Number Filter */}
+              {showDbsFilter && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    DBS Number
+                  </label>
+                  <Input
+                    type="text"
+                    value={localFilters.dbsNumber}
+                    onChange={(e) => handleFilterChange("dbsNumber", e.target.value)}
+                    placeholder="Enter DBS number"
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  />
+                </div>
+              )}
+
               {/* Working Hours Filter */}
               {showWorkingHoursFilter && (
                 <div>
@@ -330,6 +347,42 @@ const EmployeeSearchFilters = ({
 
             </div>
 
+            {/* Sorting Options */}
+            <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Sorting Options</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Sort By
+                  </label>
+                  <Select
+                    value={localFilters.sortBy}
+                    onChange={(e) => handleFilterChange("sortBy", e.target.value)}
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  >
+                    <SelectOption value="surname">Surname</SelectOption>
+                    <SelectOption value="first_name">First Name</SelectOption>
+                    <SelectOption value="full_name">Full Name</SelectOption>
+                    <SelectOption value="date_of_birth">Date of Birth</SelectOption>
+                    <SelectOption value="site_name">Site Name</SelectOption>
+                  </Select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Sort Order
+                  </label>
+                  <Select
+                    value={localFilters.sortOrder}
+                    onChange={(e) => handleFilterChange("sortOrder", e.target.value)}
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  >
+                    <SelectOption value="asc">Ascending</SelectOption>
+                    <SelectOption value="desc">Descending</SelectOption>
+                  </Select>
+                </div>
+              </div>
+            </div>
+
             {/* Apply/Cancel Buttons */}
             {hasUnsavedChanges && (
               <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">

package/src/components/EmployeeSearchFilters.test.jsx

@@ -233,7 +233,7 @@ describe('EmployeeSearchFilters', () => {
     it('updates DBS number filter when changed', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
-      const dbsInput = screen.getAllByTestId('input')[0];
+      const dbsInput = screen.getByPlaceholderText('Enter DBS number');
       fireEvent.change(dbsInput, { target: { value: 'DBS123456' } });
       
       expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
@@ -245,7 +245,7 @@ describe('EmployeeSearchFilters', () => {
     it('updates working hours filter when changed', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
-      const hoursInput = screen.getAllByTestId('input')[1];
+      const hoursInput = screen.getByPlaceholderText('0');
       fireEvent.change(hoursInput, { target: { value: '30' } });
       
       expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
@@ -459,7 +459,7 @@ describe('EmployeeSearchFilters', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
       const sortBySelect = screen.getAllByTestId('select').find(select => 
-        select.querySelector('option[value="first_name"]')
+        select.querySelector('option[value="surname"]')
       );
       fireEvent.change(sortBySelect, { target: { value: 'first_name' } });
       
@@ -471,7 +471,7 @@ describe('EmployeeSearchFilters', () => {
       render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
       
       const sortOrderSelect = screen.getAllByTestId('select').find(select => 
-        select.querySelector('option[value="desc"]')
+        select.querySelector('option[value="asc"]')
       );
       fireEvent.change(sortOrderSelect, { target: { value: 'desc' } });
       
@@ -541,6 +541,7 @@ describe('EmployeeSearchFilters', () => {
       const statusLabels = screen.getAllByText('Status');
       expect(statusLabels.length).toBeGreaterThan(0);
       expect(screen.getByText('Sort By')).toBeInTheDocument();
+      expect(screen.getByText('Sort Order')).toBeInTheDocument();
     });
   });
 }); 

package/src/components/ui/date-range-picker.jsx

@@ -3,20 +3,29 @@
 // Features cycling behavior: start date -> end date -> start date -> end date...
 // Usage: <DateRangePicker selectedRange={range} onSelect={setRange} />
 
-import { useState, useEffect, useRef } from 'react'
-import { format } from 'date-fns'
+import React, { useState, useEffect, useRef } from 'react'
+import { format, addDays, addMonths, endOfMonth, endOfYear, startOfMonth, startOfYear, subDays, subMonths, subYears } from 'date-fns'
 import { CalendarIcon } from '@heroicons/react/24/outline'
 import { Popover, PopoverContent, PopoverTrigger } from './popover'
 import { Calendar } from './calendar'
 import { Button } from './button'
 import { cn } from '../../lib/utils'
 
+// Optional preset type: { key: string, label: string, getRange: () => ({ from: Date, to: Date }) }
 export function DateRangePicker({ 
   selectedRange, 
   onSelect, 
   className,
   placeholder = "Select a date range",
   disabled,
+  // New: optional presets support (backwards compatible)
+  presetsEnabled = false,
+  presets,
+  // New: allow consumers to control month count
+  numberOfMonths = 2,
+  // New: allow styling popover content and calendar for layout control
+  contentClassName,
+  calendarClassName,
   ...props 
 }) {
   const [isOpen, setIsOpen] = useState(false)
@@ -185,8 +194,8 @@ export function DateRangePicker({
           )}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <div className="relative">
+      <PopoverContent className={cn('w-[90vw] p-3 sm:w-auto', contentClassName)} align="start">
+        <div className="relative w-full sm:w-[520px]">
           <Calendar
             mode="range"
             defaultMonth={internalRange?.from}
@@ -197,8 +206,47 @@ export function DateRangePicker({
                 handleSelect(range)
               }
             }}
-            numberOfMonths={2}
+            numberOfMonths={numberOfMonths}
+            className={cn('w-full', calendarClassName)}
           />
+          {presetsEnabled && (
+            <div className="mt-2 flex flex-wrap gap-2 p-2">
+              {(presets && presets.length > 0 ? presets : defaultPresets()).map((p) => {
+                const r = p.getRange()
+                return (
+                  <Button
+                    key={p.key}
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      setInternalRange(r)
+                      isSelectingRange.current = false
+                      onSelect(r)
+                    }}
+                  >
+                    {p.label}
+                  </Button>
+                )
+              })}
+            </div>
+          )}
+          {/* Always-present footer actions for clarity on mobile/desktop */}
+          <div className="mt-3 flex items-center justify-between px-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setInternalRange(null)
+                isSelectingRange.current = false
+                onSelect(null)
+              }}
+            >
+              Clear
+            </Button>
+            <Button size="sm" onClick={() => setIsOpen(false)}>
+              Done
+            </Button>
+          </div>
           {internalRange?.from && (
             <div className="absolute top-2 right-2 flex gap-1">
               <button
@@ -227,6 +275,23 @@ export function DateRangePicker({
   )
 }
 
+// Provide a default preset set similar to app usage, but minimal
+function defaultPresets() {
+  const today = new Date()
+  const last7Days = { from: subDays(today, 6), to: today }
+  const monthToDate = { from: startOfMonth(today), to: today }
+  const yearToDate = { from: startOfYear(today), to: today }
+  const lastMonth = { from: startOfMonth(subMonths(today, 1)), to: endOfMonth(subMonths(today, 1)) }
+  const lastYear = { from: startOfYear(subYears(today, 1)), to: endOfYear(subYears(today, 1)) }
+  return [
+    { key: 'last7', label: 'Last 7 days', getRange: () => last7Days },
+    { key: 'mtd', label: 'Month to date', getRange: () => monthToDate },
+    { key: 'lastMonth', label: 'Last month', getRange: () => lastMonth },
+    { key: 'ytd', label: 'Year to date', getRange: () => yearToDate },
+    { key: 'lastYear', label: 'Last year', getRange: () => lastYear },
+  ]
+}
+
 // Single date picker variant
 export function DatePicker({ 
   selectedDate, 

package/src/components/ui/date-range-picker.test.jsx

@@ -38,7 +38,7 @@ describe('DateRangePicker', () => {
     fireEvent.click(button)
     
     await waitFor(() => {
-      expect(screen.getAllByRole('grid')).toHaveLength(2) // Two months for range picker
+      expect(screen.getAllByRole('grid')).toHaveLength(2) // Two months default
     })
   })
 
@@ -64,6 +64,24 @@ describe('DateRangePicker', () => {
   })
 })
 
+describe('DateRangePicker presets', () => {
+  it('renders presets when enabled and selects a range on click', async () => {
+    const onSelect = jest.fn()
+    render(<DateRangePicker selectedRange={null} onSelect={onSelect} presetsEnabled numberOfMonths={1} />)
+    // Open popover
+    fireEvent.click(screen.getByRole('button'))
+    // Default preset button e.g. Last 7 days should appear
+    await waitFor(() => {
+      expect(screen.getByText(/last 7 days/i)).toBeInTheDocument()
+    })
+    fireEvent.click(screen.getByText(/last 7 days/i))
+    expect(onSelect).toHaveBeenCalled()
+    const arg = onSelect.mock.calls[0][0]
+    expect(arg?.from).toBeInstanceOf(Date)
+    expect(arg?.to).toBeInstanceOf(Date)
+  })
+})
+
 describe('DatePicker', () => {
   it('renders with placeholder text', () => {
     const mockOnSelect = jest.fn()

package/src/components/ui/soft-warning-alert.jsx

@@ -0,0 +1,112 @@
+//
+// soft-warning-alert.jsx
+// -----------------------
+// A soft-styled warning alert built on shadcn-like primitives used in this package.
+// Use this for non-blocking warnings with an optional action button.
+//
+// Example:
+// import { SoftWarningAlert } from '@snapdragonsnursery/react-components'
+// import { AlertTriangle } from 'lucide-react'
+//
+// export default function Example() {
+//   return (
+//     <SoftWarningAlert
+//       icon={AlertTriangle}
+//       title="Unsubmitted claims"
+//       description="You have 3 unsubmitted mileage claims. Create a report to submit."
+//       actionLabel="Create report"
+//       onAction={() => console.log('clicked')}
+//     />
+//   )
+// }
+
+import React from 'react'
+import { cn } from '../../lib/utils'
+
+// Lightweight Alert primitives compatible with package styling
+function Alert({ className, children }) {
+  return (
+    <div
+      className={cn(
+        'w-full rounded-lg border p-4 text-sm',
+        'bg-amber-600/10 text-amber-700 border-amber-200',
+        'dark:bg-amber-400/10 dark:text-amber-300 dark:border-amber-300/20',
+        className
+      )}
+      role="alert"
+    >
+      {children}
+    </div>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+function AlertTitle({ className, children }) {
+  return <div className={cn('font-medium', className)}>{children}</div>
+}
+
+// Prop types omitted to avoid runtime dependency
+
+function AlertDescription({ className, children }) {
+  return (
+    <div className={cn('mt-1 text-amber-700/80 dark:text-amber-300/80', className)}>
+      {children}
+    </div>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+function Button({ className, children, ...props }) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium',
+        'bg-amber-600 text-white hover:bg-amber-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500',
+        'dark:bg-amber-500 dark:text-black dark:hover:bg-amber-400',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+export function SoftWarningAlert({
+  title,
+  description,
+  icon: Icon,
+  className,
+  actionLabel,
+  onAction,
+}) {
+  return (
+    <Alert className={className}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-start gap-3">
+          {Icon ? <Icon className="h-5 w-5 mt-0.5 shrink-0" /> : null}
+          <div>
+            <AlertTitle>{title}</AlertTitle>
+            {description ? (
+              <AlertDescription>{description}</AlertDescription>
+            ) : null}
+          </div>
+        </div>
+        {typeof onAction === 'function' && actionLabel ? (
+          <Button onClick={onAction}>{actionLabel}</Button>
+        ) : null}
+      </div>
+    </Alert>
+  )
+}
+
+// Prop types omitted to avoid runtime dependency
+
+export default SoftWarningAlert
+
+

package/src/index.d.ts

@@ -0,0 +1,48 @@
+//
+// index.d.ts
+// -------------
+// TypeScript declarations for @snapdragonsnursery/react-components
+// This provides minimal typings for components used in consuming TypeScript apps.
+
+import * as React from 'react'
+
+export interface SoftWarningAlertProps {
+  title: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ComponentType<any>
+  className?: string
+  actionLabel?: string
+  onAction?: () => void
+}
+
+export const SoftWarningAlert: React.FC<SoftWarningAlertProps>
+
+// Existing components (typed as any for now)
+export const AuthButtons: React.ComponentType<any>
+export const ThemeToggle: React.ComponentType<any>
+export const ChildSearchModal: React.ComponentType<any>
+export const ChildSearchPage: React.ComponentType<any>
+export const ChildSearchPageDemo: React.ComponentType<any>
+export const ThemeToggleTest: React.ComponentType<any>
+export const LandingPage: React.ComponentType<any>
+export const ChildSearchFilters: React.ComponentType<any>
+export const DateRangePickerDemo: React.ComponentType<any>
+export const CalendarDemo: React.ComponentType<any>
+export const DateRangePickerTest: React.ComponentType<any>
+export const ApplyButtonDemo: React.ComponentType<any>
+export const EmployeeSearchPage: React.ComponentType<any>
+export const EmployeeSearchModal: React.ComponentType<any>
+export const EmployeeSearchDemo: React.ComponentType<any>
+export const EmployeeSearchFilters: React.ComponentType<any>
+
+export const DateRangePicker: React.ComponentType<any>
+export const DatePicker: React.ComponentType<any>
+export const Calendar: React.ComponentType<any>
+export const SimpleCalendar: React.ComponentType<any>
+export const Popover: React.ComponentType<any>
+export const PopoverContent: React.ComponentType<any>
+export const PopoverTrigger: React.ComponentType<any>
+
+export function configureTelemetry(...args: any[]): any
+
+

package/src/index.js

@@ -24,3 +24,4 @@ export { DateRangePicker, DatePicker } from "./components/ui/date-range-picker";
 export { Calendar } from "./components/ui/calendar";
 export { SimpleCalendar } from "./components/ui/simple-calendar";
 export { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover";
+export { default as SoftWarningAlert } from "./components/ui/soft-warning-alert";