h2o-library 1.3.9 → 1.4.0

package/dist/components/index.d.ts

@@ -33,3 +33,4 @@ export * from "./src/chart-line";
 export * from "./src/chart-bar";
 export * from "./src/chart-pie";
 export * from "./src/chart-stat";
+export * from "./src/date-range-picker";

package/dist/components/src/calendar.d.ts

@@ -8,6 +8,12 @@ interface CalendarProps {
     maxDate?: Date;
     forceWeek?: boolean;
     disabledDates?: Date[];
+    month?: Date;
+    hideHeader?: boolean;
+    hideOutsideDays?: boolean;
+    hoverDate?: Date | null;
+    onDayMouseEnter?: (date: Date) => void;
+    onDayMouseLeave?: () => void;
 }
-declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, disabledDates, }: CalendarProps) => JSX.Element | null;
+declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, disabledDates, month, hideHeader, hideOutsideDays, hoverDate: externalHoverDate, onDayMouseEnter, onDayMouseLeave, }: CalendarProps) => JSX.Element | null;
 export { Calendar };

package/dist/components/src/date-range-picker.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface DateRangePickerProps {
+    value?: [Date | null, Date | null];
+    onChange?: (value: [Date | null, Date | null]) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+}
+export declare const DateRangePicker: ({ value, onChange, ...calendarProps }: DateRangePickerProps) => React.JSX.Element;
+export {};

package/dist/components/src/dropdown.d.ts

@@ -16,5 +16,6 @@ export interface DropdownProps extends Omit<React.ButtonHTMLAttributes<HTMLButto
     value?: string;
     onChange?: (value: string) => void;
     enableSearch?: boolean;
+    direction?: "top" | "bottom" | "auto";
 }
 export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/css/index.css

@@ -1 +1 @@
-:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";
+:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";

package/dist/css/src/calendar.css

@@ -8,6 +8,13 @@
   padding: 0 1rem;
 }
 
+.calendar-container--no-header {
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  max-width: none;
+}
+
 .calendar-header {
   display: flex;
   align-items: center;

package/dist/css/src/date-range-picker.css

@@ -0,0 +1,73 @@
+.date-range-picker {
+  display: flex;
+  background-color: hsl(var(--background));
+  border-radius: 0.5rem;
+  box-shadow: var(--primary-shadow);
+  border: 1px solid hsl(var(--primary-muted));
+  font-family: sans-serif;
+}
+
+.date-range-picker__presets {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border-right: 1px solid hsl(var(--muted) / 50%);
+  width: 14rem;
+  font-size: 0.875rem;
+}
+
+.date-range-picker__presets .radio-label {
+  width: 100%;
+}
+
+.date-range-picker__main {
+  padding: 1rem;
+  flex-grow: 1;
+}
+
+.date-range-picker__display {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+  padding: 0 0.5rem;
+}
+
+.date-range-picker__calendars {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+  grid-template-areas:
+    "header1 header2"
+    "cal1 cal2";
+}
+
+.date-range-picker__calendars .calendar-container {
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  max-width: none;
+}
+
+.date-range-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.5rem;
+}
+
+.date-range-picker__header:nth-of-type(1) {
+  grid-area: header1;
+}
+
+.date-range-picker__header:nth-of-type(2) {
+  grid-area: header2;
+}
+
+.date-range-picker__calendars .calendar-container:nth-of-type(1) {
+  grid-area: cal1;
+}
+
+.date-range-picker__calendars .calendar-container:nth-of-type(2) {
+  grid-area: cal2;
+} 

package/dist/css/src/index.css

@@ -37,6 +37,7 @@
 @import "./src/calendar.css";
 @import "./src/checkbox.css";
 @import "./src/content-switch.css";
+@import "./src/date-range-picker.css";
 @import "./src/dropdown.css";
 @import "./src/input.css";
 @import "./src/modal.css";

package/dist/esm/components/index.d.ts

@@ -33,3 +33,4 @@ export * from "./src/chart-line";
 export * from "./src/chart-bar";
 export * from "./src/chart-pie";
 export * from "./src/chart-stat";
+export * from "./src/date-range-picker";

package/dist/esm/components/src/calendar.d.ts

@@ -8,6 +8,12 @@ interface CalendarProps {
     maxDate?: Date;
     forceWeek?: boolean;
     disabledDates?: Date[];
+    month?: Date;
+    hideHeader?: boolean;
+    hideOutsideDays?: boolean;
+    hoverDate?: Date | null;
+    onDayMouseEnter?: (date: Date) => void;
+    onDayMouseLeave?: () => void;
 }
-declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, disabledDates, }: CalendarProps) => JSX.Element | null;
+declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, disabledDates, month, hideHeader, hideOutsideDays, hoverDate: externalHoverDate, onDayMouseEnter, onDayMouseLeave, }: CalendarProps) => JSX.Element | null;
 export { Calendar };

package/dist/esm/components/src/date-range-picker.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface DateRangePickerProps {
+    value?: [Date | null, Date | null];
+    onChange?: (value: [Date | null, Date | null]) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+}
+export declare const DateRangePicker: ({ value, onChange, ...calendarProps }: DateRangePickerProps) => React.JSX.Element;
+export {};

package/dist/esm/components/src/dropdown.d.ts

@@ -16,5 +16,6 @@ export interface DropdownProps extends Omit<React.ButtonHTMLAttributes<HTMLButto
     value?: string;
     onChange?: (value: string) => void;
     enableSearch?: boolean;
+    direction?: "top" | "bottom" | "auto";
 }
 export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/css/index.css

@@ -1 +1 @@
-:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";
+:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";