h2o-library 1.2.0 → 1.3.1

package/dist/components/index.d.ts

@@ -23,3 +23,6 @@ export * from "./src/table";
 export * from "./src/toast";
 export * from "./src/logo";
 export * from "./src/calendar";
+export * from "./src/month-calendar";
+export * from "./src/loader";
+export * from "./src/message";

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

@@ -7,6 +7,7 @@ interface CalendarProps {
     minDate?: Date;
     maxDate?: Date;
     forceWeek?: boolean;
+    disabledDates?: Date[];
 }
-declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, }: CalendarProps) => JSX.Element | null;
+declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, disabledDates, }: CalendarProps) => JSX.Element | null;
 export { Calendar };

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

@@ -0,0 +1,5 @@
+import React from "react";
+declare const Loader: ({ className }: {
+    className?: string | undefined;
+}) => React.JSX.Element;
+export { Loader };

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

@@ -0,0 +1,9 @@
+import React from "react";
+export type MessageVariant = "info" | "muted" | "error" | "warning";
+interface MessageProps {
+    variant: MessageVariant;
+    className?: string;
+    message?: string | null;
+}
+export declare const Message: ({ variant, className, message }: MessageProps) => React.JSX.Element | null;
+export {};

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

@@ -1,7 +1,7 @@
 import React from "react";
 export interface ModalProps {
     isOpen: boolean;
-    onClose: () => void;
+    onClose?: () => void;
     title?: string;
     description?: string;
     children: React.ReactNode;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface MonthCalendarProps {
+    value?: Date;
+    onChange?: (value: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+}
+declare const MonthCalendar: ({ value, onChange, minDate, maxDate, disabledDates, }: MonthCalendarProps) => JSX.Element;
+export { MonthCalendar };

package/dist/components/src/multi-select.d.ts

@@ -11,6 +11,8 @@ interface MultiSelectProps {
     maxSelectedOptions?: number;
     toggleLabel?: string;
     onToggle?: (checked: boolean) => void;
+    showSearch?: boolean;
+    showSelectAll?: boolean;
 }
-declare const MultiSelect: ({ options, selectedOptions, setSelectedOptions, optionsType, maxSelectedOptions, toggleLabel, onToggle, }: MultiSelectProps) => React.JSX.Element;
+declare const MultiSelect: ({ options, selectedOptions, setSelectedOptions, optionsType, maxSelectedOptions, toggleLabel, onToggle, showSearch, showSelectAll, }: MultiSelectProps) => React.JSX.Element;
 export { MultiSelect };

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/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";
+: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/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";

package/dist/css/src/calendar.css

@@ -191,6 +191,12 @@
   color: hsl(var(--primary));
 }
 
+.calendar-day.today:not(.selected):not(.range-start):not(.range-end):not(
+    :disabled
+  ):hover {
+  color: white;
+}
+
 .today-indicator {
   z-index: 50;
   position: absolute;
@@ -201,6 +207,14 @@
   background-color: white;
 }
 
-.calendar-day.today:not(.selected):not(.range-start):not(.range-end) .today-indicator {
+.calendar-day.today:not(.selected):not(.range-start):not(.range-end)
+  .today-indicator {
   background-color: hsl(var(--primary));
 }
+
+.calendar-day.today:not(.selected):not(.range-start):not(.range-end):not(
+    :disabled
+  ):hover
+  .today-indicator {
+  background-color: white;
+}

package/dist/css/src/index.css

@@ -54,3 +54,6 @@
 @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";

package/dist/css/src/loader.css

@@ -0,0 +1,18 @@
+.h2o-loader {
+  width: 50px;
+  padding: 8px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: hsl(var(--primary));
+  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+  mask: var(--_m);
+  -webkit-mask-composite: source-out;
+  mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+@keyframes l3 {
+  to {
+    transform: rotate(1turn);
+  }
+}

package/dist/css/src/message.css

@@ -0,0 +1,34 @@
+.message {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+/* Variant styles */
+.message-info {
+  background-color: hsl(var(--primary-muted) / 0.7);
+  color: hsl(var(--primary-300));
+  border: 1px solid hsl(var(--primary) / 0.2);
+}
+
+.message-muted {
+  background-color: hsl(var(--muted-25) / 0.5);
+  color: hsl(var(--muted-200));
+  border: 1px solid hsl(var(--muted) / 0.2);
+}
+
+.message-error {
+  background-color: hsl(var(--destructive-bg) / 0.5);
+  color: hsl(var(--destructive));
+  border: 1px solid hsl(var(--destructive) / 0.2);
+}
+
+.message-warning {
+  background-color: hsl(var(--warning-bg) / 0.4);
+  color: hsl(var(--warning));
+  border: 1px solid hsl(var(--warning) / 0.3);
+}

package/dist/css/src/modal.css

@@ -5,7 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 50;
+  z-index: 500;
   animation: overlayShow 0.15s ease-out;
 }
 

package/dist/css/src/month-calendar.css

@@ -0,0 +1,92 @@
+.month-calendar-container {
+  width: 100%;
+  max-width: 24rem;
+  background-color: hsl(var(--background));
+  border-radius: 0.5rem;
+  box-shadow: var(--primary-shadow);
+  border: 1px solid hsl(var(--primary-muted));
+  padding: 0 1rem;
+}
+
+.month-calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.8rem 0.5rem;
+  border-bottom: 1px solid hsl(var(--muted) / 50%);
+}
+
+.month-calendar-title {
+  font-size: 1.2rem;
+  font-weight: 500;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+}
+
+.month-calendar-title:hover {
+  color: hsl(var(--primary));
+  transition: all 0.2s ease-in-out;
+}
+
+.month-calendar-nav-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+}
+
+.month-calendar-nav-button:hover {
+  background-color: hsl(var(--muted-50));
+  color: hsl(var(--primary));
+  transition: all 0.2s ease-in-out;
+}
+
+.month-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  padding: 1rem 0.5rem;
+}
+
+.month-calendar-item {
+  aspect-ratio: 1.8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 1px solid transparent;
+  background: none;
+  font-size: 0.8rem;
+  border-radius: 0.5rem;
+  transition: all 0.2s ease-in-out;
+}
+
+.month-calendar-item:not(:disabled):not(.selected):hover {
+  border: 1px solid hsl(var(--primary));
+  color: hsl(var(--primary));
+}
+
+.month-calendar-item.selected {
+  background-color: hsl(var(--primary));
+  color: white;
+}
+
+.month-calendar-item.selected:hover {
+  background-color: hsl(var(--primary-200));
+}
+
+.month-calendar-item.disabled {
+  color: hsl(var(--muted));
+  cursor: not-allowed;
+}
+
+.month-calendar-grid[data-view="years"] {
+  grid-template-columns: repeat(3, 1fr);
+}

package/dist/css/src/multi-select.css

@@ -25,6 +25,23 @@
   padding: 0 0.8rem;
 }
 
+.multi-select-tag {
+  font-size: 0.75rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.multi-select-show-more {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--primary));
+  text-decoration: underline;
+  cursor: pointer;
+  text-wrap: nowrap;
+}
+
 .multi-select-trigger {
   display: flex;
   align-items: center;
@@ -48,6 +65,28 @@
 
 .multi-select-trigger-icon {
   color: hsl(var(--muted-200));
+  transition: all 0.2s;
+}
+
+.multi-select-trigger-icon-open {
+  transform: rotate(180deg);
+  color: hsl(var(--primary));
+}
+
+.multi-select-search-input {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.multi-select-toggle {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.4rem;
+}
+
+.multi-select-option {
+  font-size: 0.875rem;
 }
 
 .multi-select-options-container {

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

@@ -23,3 +23,6 @@ export * from "./src/table";
 export * from "./src/toast";
 export * from "./src/logo";
 export * from "./src/calendar";
+export * from "./src/month-calendar";
+export * from "./src/loader";
+export * from "./src/message";

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

@@ -7,6 +7,7 @@ interface CalendarProps {
     minDate?: Date;
     maxDate?: Date;
     forceWeek?: boolean;
+    disabledDates?: Date[];
 }
-declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, }: CalendarProps) => JSX.Element | null;
+declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, disabledDates, }: CalendarProps) => JSX.Element | null;
 export { Calendar };

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

@@ -0,0 +1,5 @@
+import React from "react";
+declare const Loader: ({ className }: {
+    className?: string | undefined;
+}) => React.JSX.Element;
+export { Loader };

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

@@ -0,0 +1,9 @@
+import React from "react";
+export type MessageVariant = "info" | "muted" | "error" | "warning";
+interface MessageProps {
+    variant: MessageVariant;
+    className?: string;
+    message?: string | null;
+}
+export declare const Message: ({ variant, className, message }: MessageProps) => React.JSX.Element | null;
+export {};

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

@@ -1,7 +1,7 @@
 import React from "react";
 export interface ModalProps {
     isOpen: boolean;
-    onClose: () => void;
+    onClose?: () => void;
     title?: string;
     description?: string;
     children: React.ReactNode;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface MonthCalendarProps {
+    value?: Date;
+    onChange?: (value: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+}
+declare const MonthCalendar: ({ value, onChange, minDate, maxDate, disabledDates, }: MonthCalendarProps) => JSX.Element;
+export { MonthCalendar };

package/dist/esm/components/src/multi-select.d.ts

@@ -11,6 +11,8 @@ interface MultiSelectProps {
     maxSelectedOptions?: number;
     toggleLabel?: string;
     onToggle?: (checked: boolean) => void;
+    showSearch?: boolean;
+    showSelectAll?: boolean;
 }
-declare const MultiSelect: ({ options, selectedOptions, setSelectedOptions, optionsType, maxSelectedOptions, toggleLabel, onToggle, }: MultiSelectProps) => React.JSX.Element;
+declare const MultiSelect: ({ options, selectedOptions, setSelectedOptions, optionsType, maxSelectedOptions, toggleLabel, onToggle, showSearch, showSelectAll, }: MultiSelectProps) => React.JSX.Element;
 export { MultiSelect };

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/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";
+: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/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";