@itilite/lumina-ui 0.0.324 → 1.0.0-alpha

package/README.md

@@ -22,6 +22,43 @@ npm install react antd
 
 ## Usage
 
+### Prerequisites
+
+This component library requires Tailwind CSS to be set up in your consuming application. The components use Tailwind utility classes and will not be styled without it.
+
+#### Setting up Tailwind CSS in your app
+
+1. Install Tailwind CSS:
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init
+```
+
+2. Configure Tailwind to scan your app (you don't need to scan the component library):
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    // No need to scan node_modules - component utilities are pre-compiled
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+3. Add Tailwind directives to your main CSS file:
+```css
+/* app.css or index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+**Important:** The component library includes only the Tailwind utilities it uses. Your app must provide the base/reset styles via `@tailwind base`.
+
 ### Importing Components
 
 You can import components individually (recommended for tree-shaking):
@@ -29,21 +66,20 @@ You can import components individually (recommended for tree-shaking):
 ```tsx
 import { Button } from '@itilite/lumina-ui/button';
 import { Checkbox } from '@itilite/lumina-ui/checkbox';
-import '@itilite/lumina-ui/styles.css';
+import '@itilite/lumina-ui/styles.css'; // Import component styles
 ```
 
 Or import all components from the main entry point:
 
 ```tsx
 import { Button, Checkbox } from '@itilite/lumina-ui';
-import '@itilite/lumina-ui/styles.css';
+import '@itilite/lumina-ui/styles.css'; // Import component styles
 ```
 
 ### Button Component
 
 ```tsx
 import { Button } from '@itilite/lumina-ui/button';
-import '@itilite/lumina-ui/styles.css';
 
 function App() {
   return (
@@ -58,7 +94,6 @@ function App() {
 
 ```tsx
 import { Checkbox } from '@itilite/lumina-ui/checkbox';
-import '@itilite/lumina-ui/styles.css';
 
 function App() {
   return (
@@ -69,13 +104,11 @@ function App() {
 }
 ```
 
-## Styling
+## Requirements
 
-The package exports a `styles.css` file that includes all component styles. Import it in your application:
-
-```tsx
-import '@itilite/lumina-ui/styles.css';
-```
+- **Tailwind CSS**: This library requires Tailwind CSS to be configured in your consuming application
+- **React**: 18+
+- **Ant Design**: 5.13.1
 
 ## Available Components
 

package/dist/AdvancedDateRangePicker-CN9WN0rH.d.mts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+interface TimeValue {
+    hour: string;
+    minute: string;
+    period: "AM" | "PM";
+}
+interface DateRangeValue {
+    startDate: Date | null;
+    endDate: Date | null;
+    startTime: TimeValue;
+    endTime: TimeValue;
+    timezone: string;
+}
+interface PresetOption {
+    label: string;
+    key: string;
+    getRange: () => [Date, Date];
+}
+interface TimezoneOption {
+    label: string;
+    value: string;
+}
+interface DateRangePickerProps {
+    /** Controlled value for the date range */
+    value?: DateRangeValue;
+    /** Called when the user clicks "Done" */
+    onChange?: (value: DateRangeValue) => void;
+    /** Called on every selection change (live) */
+    onRangeChange?: (value: DateRangeValue) => void;
+    /** Label for the confirm button. Defaults to "Done" */
+    confirmLabel?: string;
+    /** Additional class name for the root wrapper */
+    className?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Disable dates before today */
+    disablePastDates?: boolean;
+    /** Minimum selectable date (ISO string) */
+    minDate?: string | null;
+    /** Maximum selectable date (ISO string) */
+    maxDate?: string | null;
+    /** Show a single calendar instead of two */
+    showSingleCalendar?: boolean;
+    /** Id prefix for accessibility */
+    id?: string;
+    defaultTimezone?: string;
+    isTimezoneDisabled?: boolean;
+}
+
+declare function AdvancedDateRangePicker({ value, onChange, confirmLabel, className, disabled, disablePastDates, minDate, maxDate, showSingleCalendar, id, }: DateRangePickerProps): React.JSX.Element;
+declare namespace AdvancedDateRangePicker {
+    var displayName: string;
+}
+
+export { AdvancedDateRangePicker as A, type DateRangeValue as D, type PresetOption as P, type TimeValue as T, type TimezoneOption as a, type DateRangePickerProps as b };

package/dist/AdvancedDateRangePicker-CN9WN0rH.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+interface TimeValue {
+    hour: string;
+    minute: string;
+    period: "AM" | "PM";
+}
+interface DateRangeValue {
+    startDate: Date | null;
+    endDate: Date | null;
+    startTime: TimeValue;
+    endTime: TimeValue;
+    timezone: string;
+}
+interface PresetOption {
+    label: string;
+    key: string;
+    getRange: () => [Date, Date];
+}
+interface TimezoneOption {
+    label: string;
+    value: string;
+}
+interface DateRangePickerProps {
+    /** Controlled value for the date range */
+    value?: DateRangeValue;
+    /** Called when the user clicks "Done" */
+    onChange?: (value: DateRangeValue) => void;
+    /** Called on every selection change (live) */
+    onRangeChange?: (value: DateRangeValue) => void;
+    /** Label for the confirm button. Defaults to "Done" */
+    confirmLabel?: string;
+    /** Additional class name for the root wrapper */
+    className?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Disable dates before today */
+    disablePastDates?: boolean;
+    /** Minimum selectable date (ISO string) */
+    minDate?: string | null;
+    /** Maximum selectable date (ISO string) */
+    maxDate?: string | null;
+    /** Show a single calendar instead of two */
+    showSingleCalendar?: boolean;
+    /** Id prefix for accessibility */
+    id?: string;
+    defaultTimezone?: string;
+    isTimezoneDisabled?: boolean;
+}
+
+declare function AdvancedDateRangePicker({ value, onChange, confirmLabel, className, disabled, disablePastDates, minDate, maxDate, showSingleCalendar, id, }: DateRangePickerProps): React.JSX.Element;
+declare namespace AdvancedDateRangePicker {
+    var displayName: string;
+}
+
+export { AdvancedDateRangePicker as A, type DateRangeValue as D, type PresetOption as P, type TimeValue as T, type TimezoneOption as a, type DateRangePickerProps as b };

package/dist/AdvancedDateRangePicker-CzN1HGsC.d.mts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+interface TimeValue {
+    hour: string;
+    minute: string;
+    period: "AM" | "PM";
+}
+interface DateRangeValue {
+    startDate: Date | null;
+    endDate: Date | null;
+    startTime: TimeValue;
+    endTime: TimeValue;
+    timezone: string;
+}
+interface PresetOption {
+    label: string;
+    key: string;
+    getRange: () => (Date | null)[];
+}
+interface TimezoneOption {
+    label: string;
+    value: string;
+}
+interface DateRangePickerProps {
+    /** Controlled value for the date range */
+    value?: DateRangeValue;
+    /** Called when the user clicks "Done" */
+    onChange?: (value: DateRangeValue) => void;
+    /** Called on every selection change (live) */
+    onRangeChange?: (value: DateRangeValue) => void;
+    /** Label for the confirm button. Defaults to "Done" */
+    confirmLabel?: string;
+    /** Additional class name for the root wrapper */
+    className?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Disable dates before today */
+    disablePastDates?: boolean;
+    /** Minimum selectable date (ISO string) */
+    minDate?: string | null;
+    /** Maximum selectable date (ISO string) */
+    maxDate?: string | null;
+    /** Show a single calendar instead of two */
+    showSingleCalendar?: boolean;
+    /** Id prefix for accessibility */
+    id?: string;
+    defaultTimezone?: string;
+    isTimezoneDisabled?: boolean;
+    timezoneOptions?: TimezoneOption[];
+}
+
+declare function AdvancedDateRangePicker({ value, onChange, confirmLabel, className, disabled, disablePastDates, minDate, maxDate, showSingleCalendar, id, defaultTimezone, isTimezoneDisabled, }: DateRangePickerProps): React.JSX.Element;
+declare namespace AdvancedDateRangePicker {
+    var displayName: string;
+}
+
+export { AdvancedDateRangePicker as A, type DateRangeValue as D, type PresetOption as P, type TimeValue as T, type TimezoneOption as a, type DateRangePickerProps as b };

package/dist/AdvancedDateRangePicker-CzN1HGsC.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+interface TimeValue {
+    hour: string;
+    minute: string;
+    period: "AM" | "PM";
+}
+interface DateRangeValue {
+    startDate: Date | null;
+    endDate: Date | null;
+    startTime: TimeValue;
+    endTime: TimeValue;
+    timezone: string;
+}
+interface PresetOption {
+    label: string;
+    key: string;
+    getRange: () => (Date | null)[];
+}
+interface TimezoneOption {
+    label: string;
+    value: string;
+}
+interface DateRangePickerProps {
+    /** Controlled value for the date range */
+    value?: DateRangeValue;
+    /** Called when the user clicks "Done" */
+    onChange?: (value: DateRangeValue) => void;
+    /** Called on every selection change (live) */
+    onRangeChange?: (value: DateRangeValue) => void;
+    /** Label for the confirm button. Defaults to "Done" */
+    confirmLabel?: string;
+    /** Additional class name for the root wrapper */
+    className?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Disable dates before today */
+    disablePastDates?: boolean;
+    /** Minimum selectable date (ISO string) */
+    minDate?: string | null;
+    /** Maximum selectable date (ISO string) */
+    maxDate?: string | null;
+    /** Show a single calendar instead of two */
+    showSingleCalendar?: boolean;
+    /** Id prefix for accessibility */
+    id?: string;
+    defaultTimezone?: string;
+    isTimezoneDisabled?: boolean;
+    timezoneOptions?: TimezoneOption[];
+}
+
+declare function AdvancedDateRangePicker({ value, onChange, confirmLabel, className, disabled, disablePastDates, minDate, maxDate, showSingleCalendar, id, defaultTimezone, isTimezoneDisabled, }: DateRangePickerProps): React.JSX.Element;
+declare namespace AdvancedDateRangePicker {
+    var displayName: string;
+}
+
+export { AdvancedDateRangePicker as A, type DateRangeValue as D, type PresetOption as P, type TimeValue as T, type TimezoneOption as a, type DateRangePickerProps as b };

package/dist/AdvancedDateRangePicker-DAPxgRl3.d.mts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+interface TimeValue {
+    hour: string;
+    minute: string;
+    period: "AM" | "PM";
+}
+interface DateRangeValue {
+    startDate: Date | null;
+    endDate: Date | null;
+    startTime: TimeValue;
+    endTime: TimeValue;
+    timezone: string;
+}
+interface PresetOption {
+    label: string;
+    key: string;
+    getRange: () => [Date, Date];
+}
+interface TimezoneOption {
+    label: string;
+    value: string;
+}
+interface DateRangePickerProps {
+    /** Controlled value for the date range */
+    value?: DateRangeValue;
+    /** Called when the user clicks "Done" */
+    onChange?: (value: DateRangeValue) => void;
+    /** Called on every selection change (live) */
+    onRangeChange?: (value: DateRangeValue) => void;
+    /** Label for the confirm button. Defaults to "Done" */
+    confirmLabel?: string;
+    /** Additional class name for the root wrapper */
+    className?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Disable dates before today */
+    disablePastDates?: boolean;
+    /** Minimum selectable date (ISO string) */
+    minDate?: string | null;
+    /** Maximum selectable date (ISO string) */
+    maxDate?: string | null;
+    /** Show a single calendar instead of two */
+    showSingleCalendar?: boolean;
+    /** Id prefix for accessibility */
+    id?: string;
+}
+
+declare function AdvancedDateRangePicker({ value, onChange, confirmLabel, className, disabled, disablePastDates, minDate, maxDate, showSingleCalendar, id, }: DateRangePickerProps): React.JSX.Element;
+declare namespace AdvancedDateRangePicker {
+    var displayName: string;
+}
+
+export { AdvancedDateRangePicker as A, type DateRangeValue as D, type PresetOption as P, type TimeValue as T, type TimezoneOption as a, type DateRangePickerProps as b };

package/dist/AdvancedDateRangePicker-DAPxgRl3.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+interface TimeValue {
+    hour: string;
+    minute: string;
+    period: "AM" | "PM";
+}
+interface DateRangeValue {
+    startDate: Date | null;
+    endDate: Date | null;
+    startTime: TimeValue;
+    endTime: TimeValue;
+    timezone: string;
+}
+interface PresetOption {
+    label: string;
+    key: string;
+    getRange: () => [Date, Date];
+}
+interface TimezoneOption {
+    label: string;
+    value: string;
+}
+interface DateRangePickerProps {
+    /** Controlled value for the date range */
+    value?: DateRangeValue;
+    /** Called when the user clicks "Done" */
+    onChange?: (value: DateRangeValue) => void;
+    /** Called on every selection change (live) */
+    onRangeChange?: (value: DateRangeValue) => void;
+    /** Label for the confirm button. Defaults to "Done" */
+    confirmLabel?: string;
+    /** Additional class name for the root wrapper */
+    className?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Disable dates before today */
+    disablePastDates?: boolean;
+    /** Minimum selectable date (ISO string) */
+    minDate?: string | null;
+    /** Maximum selectable date (ISO string) */
+    maxDate?: string | null;
+    /** Show a single calendar instead of two */
+    showSingleCalendar?: boolean;
+    /** Id prefix for accessibility */
+    id?: string;
+}
+
+declare function AdvancedDateRangePicker({ value, onChange, confirmLabel, className, disabled, disablePastDates, minDate, maxDate, showSingleCalendar, id, }: DateRangePickerProps): React.JSX.Element;
+declare namespace AdvancedDateRangePicker {
+    var displayName: string;
+}
+
+export { AdvancedDateRangePicker as A, type DateRangeValue as D, type PresetOption as P, type TimeValue as T, type TimezoneOption as a, type DateRangePickerProps as b };

package/dist/AdvancedDateRangePicker-DW94285G.d.mts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+interface TimeValue {
+    hour: string;
+    minute: string;
+    period: "AM" | "PM";
+}
+interface DateRangeValue {
+    startDate: Date | null;
+    endDate: Date | null;
+    startTime: TimeValue;
+    endTime: TimeValue;
+    timezone: string;
+}
+interface PresetOption {
+    label: string;
+    key: string;
+    getRange: () => (Date | null)[];
+}
+interface TimezoneOption {
+    label: string;
+    value: string;
+}
+interface DateRangePickerProps {
+    /** Controlled value for the date range */
+    value?: DateRangeValue;
+    /** Called when the user clicks "Done" */
+    onChange?: (value: DateRangeValue) => void;
+    /** Called on every selection change (live) */
+    onRangeChange?: (value: DateRangeValue) => void;
+    /** Label for the confirm button. Defaults to "Done" */
+    confirmLabel?: string;
+    /** Additional class name for the root wrapper */
+    className?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Disable dates before today */
+    disablePastDates?: boolean;
+    /** Minimum selectable date (ISO string) */
+    minDate?: string | null;
+    /** Maximum selectable date (ISO string) */
+    maxDate?: string | null;
+    /** Show a single calendar instead of two */
+    showSingleCalendar?: boolean;
+    /** Id prefix for accessibility */
+    id?: string;
+    defaultTimezone?: string;
+    isTimezoneDisabled?: boolean;
+}
+
+declare function AdvancedDateRangePicker({ value, onChange, confirmLabel, className, disabled, disablePastDates, minDate, maxDate, showSingleCalendar, id, defaultTimezone, isTimezoneDisabled, }: DateRangePickerProps): React.JSX.Element;
+declare namespace AdvancedDateRangePicker {
+    var displayName: string;
+}
+
+export { AdvancedDateRangePicker as A, type DateRangeValue as D, type PresetOption as P, type TimeValue as T, type TimezoneOption as a, type DateRangePickerProps as b };

package/dist/AdvancedDateRangePicker-DW94285G.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+interface TimeValue {
+    hour: string;
+    minute: string;
+    period: "AM" | "PM";
+}
+interface DateRangeValue {
+    startDate: Date | null;
+    endDate: Date | null;
+    startTime: TimeValue;
+    endTime: TimeValue;
+    timezone: string;
+}
+interface PresetOption {
+    label: string;
+    key: string;
+    getRange: () => (Date | null)[];
+}
+interface TimezoneOption {
+    label: string;
+    value: string;
+}
+interface DateRangePickerProps {
+    /** Controlled value for the date range */
+    value?: DateRangeValue;
+    /** Called when the user clicks "Done" */
+    onChange?: (value: DateRangeValue) => void;
+    /** Called on every selection change (live) */
+    onRangeChange?: (value: DateRangeValue) => void;
+    /** Label for the confirm button. Defaults to "Done" */
+    confirmLabel?: string;
+    /** Additional class name for the root wrapper */
+    className?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Disable dates before today */
+    disablePastDates?: boolean;
+    /** Minimum selectable date (ISO string) */
+    minDate?: string | null;
+    /** Maximum selectable date (ISO string) */
+    maxDate?: string | null;
+    /** Show a single calendar instead of two */
+    showSingleCalendar?: boolean;
+    /** Id prefix for accessibility */
+    id?: string;
+    defaultTimezone?: string;
+    isTimezoneDisabled?: boolean;
+}
+
+declare function AdvancedDateRangePicker({ value, onChange, confirmLabel, className, disabled, disablePastDates, minDate, maxDate, showSingleCalendar, id, defaultTimezone, isTimezoneDisabled, }: DateRangePickerProps): React.JSX.Element;
+declare namespace AdvancedDateRangePicker {
+    var displayName: string;
+}
+
+export { AdvancedDateRangePicker as A, type DateRangeValue as D, type PresetOption as P, type TimeValue as T, type TimezoneOption as a, type DateRangePickerProps as b };

package/dist/AdvancedDateRangePicker-Eh6n4ne0.d.mts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+interface TimeValue {
+    hour: string;
+    minute: string;
+    period: "AM" | "PM";
+}
+interface DateRangeValue {
+    startDate: Date | null;
+    endDate: Date | null;
+    startTime: TimeValue;
+    endTime: TimeValue;
+    timezone: string;
+}
+interface PresetOption {
+    label: string;
+    key: string;
+    getRange: () => (Date | null)[];
+}
+interface TimezoneOption {
+    label: string;
+    value: string;
+}
+interface DateRangePickerProps {
+    /** Controlled value for the date range */
+    value?: DateRangeValue;
+    /** Called when the user clicks "Done" */
+    onChange?: (value: DateRangeValue) => void;
+    /** Called on every selection change (live) */
+    onRangeChange?: (value: DateRangeValue) => void;
+    /** Label for the confirm button. Defaults to "Done" */
+    confirmLabel?: string;
+    /** Additional class name for the root wrapper */
+    className?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Disable dates before today */
+    disablePastDates?: boolean;
+    /** Minimum selectable date (ISO string) */
+    minDate?: string | null;
+    /** Maximum selectable date (ISO string) */
+    maxDate?: string | null;
+    /** Show a single calendar instead of two */
+    showSingleCalendar?: boolean;
+    /** Id prefix for accessibility */
+    id?: string;
+    defaultTimezone?: string;
+    isTimezoneDisabled?: boolean;
+    timezoneOptions?: TimezoneOption[];
+}
+
+declare function AdvancedDateRangePicker({ value, onChange, confirmLabel, className, disabled, disablePastDates, minDate, maxDate, showSingleCalendar, id, defaultTimezone, isTimezoneDisabled, timezoneOptions, }: DateRangePickerProps): React.JSX.Element;
+declare namespace AdvancedDateRangePicker {
+    var displayName: string;
+}
+
+export { AdvancedDateRangePicker as A, type DateRangeValue as D, type PresetOption as P, type TimeValue as T, type TimezoneOption as a, type DateRangePickerProps as b };

package/dist/AdvancedDateRangePicker-Eh6n4ne0.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+interface TimeValue {
+    hour: string;
+    minute: string;
+    period: "AM" | "PM";
+}
+interface DateRangeValue {
+    startDate: Date | null;
+    endDate: Date | null;
+    startTime: TimeValue;
+    endTime: TimeValue;
+    timezone: string;
+}
+interface PresetOption {
+    label: string;
+    key: string;
+    getRange: () => (Date | null)[];
+}
+interface TimezoneOption {
+    label: string;
+    value: string;
+}
+interface DateRangePickerProps {
+    /** Controlled value for the date range */
+    value?: DateRangeValue;
+    /** Called when the user clicks "Done" */
+    onChange?: (value: DateRangeValue) => void;
+    /** Called on every selection change (live) */
+    onRangeChange?: (value: DateRangeValue) => void;
+    /** Label for the confirm button. Defaults to "Done" */
+    confirmLabel?: string;
+    /** Additional class name for the root wrapper */
+    className?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Disable dates before today */
+    disablePastDates?: boolean;
+    /** Minimum selectable date (ISO string) */
+    minDate?: string | null;
+    /** Maximum selectable date (ISO string) */
+    maxDate?: string | null;
+    /** Show a single calendar instead of two */
+    showSingleCalendar?: boolean;
+    /** Id prefix for accessibility */
+    id?: string;
+    defaultTimezone?: string;
+    isTimezoneDisabled?: boolean;
+    timezoneOptions?: TimezoneOption[];
+}
+
+declare function AdvancedDateRangePicker({ value, onChange, confirmLabel, className, disabled, disablePastDates, minDate, maxDate, showSingleCalendar, id, defaultTimezone, isTimezoneDisabled, timezoneOptions, }: DateRangePickerProps): React.JSX.Element;
+declare namespace AdvancedDateRangePicker {
+    var displayName: string;
+}
+
+export { AdvancedDateRangePicker as A, type DateRangeValue as D, type PresetOption as P, type TimeValue as T, type TimezoneOption as a, type DateRangePickerProps as b };

package/dist/Avatar-DX2JwvAs.d.mts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface AvatarProps {
+    img?: string;
+    className?: string;
+    name: string;
+    height?: number;
+    width?: number;
+    size?: "small" | "normal";
+}
+
+declare function Avatar({ img, className, name, height, width, size, }: AvatarProps): React.JSX.Element;
+declare namespace Avatar {
+    var displayName: string;
+}
+
+export { type AvatarProps as A, Avatar as a };