aplance-ui 1.0.2 → 1.1.1

package/registry/components/ui/input-fields/common/input-field-common.module.css

@@ -1,7 +1,4 @@
-/* This file contains basic / common heirarchy for all input fields */
-
-/* contains form field (with label) and field message (errors info etc.) */
-.container {
+.container {
   width: 100%;
   min-width: fit-content;
   display: flex;
@@ -17,8 +14,7 @@
   }
 }
 
-/* contains form field elements like label etc... */
-.field_container {
+.field_container {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -35,8 +31,7 @@
     gap: var(--spacing-2);
   }
 
-  /* layout */
-  &.inline {
+  &.inline {
     flex-direction: row;
     align-items: center;
     gap: var(--spacing-3);
@@ -44,17 +39,13 @@
 
     .label {
       flex-direction: column;
-      /* margin-inline: unset; */
-    }
-
-    /* direction */
-    &.rev {
-      flex-direction: row-reverse;
-
-      /* due to reverse direction it will become flex-end */
-      justify-content: flex-end;
-    }
-  }
+    }
+
+    &.rev {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+    }
+  }
 
   /* layout: centered - column-stacked with horizontally centered control + label. */
   &.centered {
@@ -66,8 +57,7 @@
     }
   }
 
-  /* layout */
-  &.inline_justify {
+  &.inline_justify {
     flex-direction: row;
     align-items: center;
     gap: var(--spacing-3);
@@ -83,8 +73,7 @@
       /* margin-inline: unset; */
     }
 
-    /* direction */
-    &.rev {
+    &.rev {
       flex-direction: row-reverse;
 
       .field_wrapper {
@@ -115,8 +104,7 @@
   align-self: center;
 }
 
-/* mostly for positining to set icons inside input fields */
-.field_wrapper {
+.field_wrapper {
   --field-content-color: var(--color-foreground);
   --field-placeholder-color: var(--color-muted-foreground);
   --field-icon-color: var(--color-secondary-foreground);
@@ -125,12 +113,11 @@
   position: relative;
   display: inline-flex;
 
-  /* Action Padding Mathematics Metrics */
-  --action-inset: var(--spacing-5); /* Exact match for right: var(--spacing-5) */
-  --action-icon: var(--spacing-8); /* Safe optical width for 24px SVGs */
-  --action-gap: var(--spacing-2); /* Exact match for flex gap */
-  --action-clearance: var(--spacing-3); /* Crisp 6px optical breathing room */
-}
+  --action-inset: var(--spacing-5);
+  --action-icon: var(--spacing-8);
+  --action-gap: var(--spacing-2);
+  --action-clearance: var(--spacing-3);
+}
 
 .field_wrapper_variant {
   --field-content-color: var(--button-fg, var(--color-foreground));
@@ -141,8 +128,7 @@
   --field-icon-color: var(--button-icon, var(--field-content-color));
 }
 
-/* icons wrapped in span at start like search etc... */
-.icon_start {
+.icon_start {
   width: fit-content;
   position: absolute;
   top: 50%;
@@ -156,8 +142,7 @@
   color: var(--field-icon-color);
 }
 
-/* action buttons at end like cross password eyes etc... */
-.action_end_wrapper {
+.action_end_wrapper {
   width: fit-content;
   display: flex;
   align-items: center;
@@ -169,34 +154,26 @@
   flex-shrink: 0;
   --icon-color: var(--field-icon-color);
   color: var(--field-icon-color);
-
-  /* icons */
-}
-
-/* default style */
-.field_default {
-  /* layout */
-  width: 100%;
-  min-height: var(--spacing-11);
-
-  /* typography */
-  font-family: var(--font-family-1);
-  font-size: var(--font-size-sm);
-  color: var(--field-content-color);
+}
+
+.field_default {
+  width: 100%;
+  min-height: var(--spacing-11);
+
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-sm);
+  color: var(--field-content-color);
   text-align: start;
   vertical-align: middle;
 
-  /* necessary */
-  line-height: 1.125;
-
-  /* visual */
-  padding-top: var(--spacing-3);
-  padding-bottom: var(--spacing-3);
-  padding-left: var(--spacing-6);
-  padding-right: var(--spacing-6);
-
-  /* display */
-  display: flex;
+  line-height: 1.125;
+
+  padding-top: var(--spacing-3);
+  padding-bottom: var(--spacing-3);
+  padding-left: var(--spacing-6);
+  padding-right: var(--spacing-6);
+
+  display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: var(--spacing-4);
@@ -206,8 +183,7 @@
   outline: none;
   background-color: var(--color-muted);
 
-  /* interaction */
-  transition:
+  transition:
     border-color var(--transition-base),
     box-shadow var(--transition-base),
     background-color var(--transition-base);
@@ -231,9 +207,7 @@
     cursor: not-allowed;
     opacity: 0.5;
   }
-
-  /* we need to adjust paddings of input or select fields inline dynamically due to icons at start and ends */
-}
+}
 
 .field_button_variant {
   color: var(--field-content-color);

package/registry/components/ui/input-fields/date-picker/calendar.module.css

@@ -1,5 +1,4 @@
-/* calendar.module.css – standard absolute nav layout (shadcn pattern), clean spacing */
-.calendar {
+.calendar {
   --calendar-cell-size: var(--spacing-11);
   --calendar-cell-radius: var(--radius-md);
   --calendar-row-gap: var(--spacing-1);
@@ -44,10 +43,7 @@
     pointer-events: auto;
   }
 }
-
-
-
-.chevron {
+.chevron {
   width: var(--spacing-8);
   height: var(--spacing-8);
 }

package/registry/components/ui/input-fields/date-picker/date-picker.module.css

@@ -1,4 +1,3 @@
-/* date-picker.module.css – clean, premium layout with no hacks */
 .popover_menu {
   max-width: calc(100vw - var(--spacing-11)) !important;
 }
@@ -6,6 +5,8 @@
 .menu_content {
   display: flex;
   flex-direction: column;
+  width: fit-content;
+  max-width: 100%;
 }
 
 .manual_panel {
@@ -17,23 +18,55 @@
   display: flex;
   flex-direction: row;
   gap: var(--spacing-4);
+  min-width: 0;
 }
 
 .calendar_wrap {
   display: flex;
   justify-content: center;
   padding: var(--spacing-4);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .range_calendars {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-4);
+  width: fit-content;
+  max-width: 100%;
 }
 
-@media (width <= 48rem) {
-  .range_calendars {
+@media (max-width: 48rem) {
+  .manual_panel,
+  .calendar_wrap,
+  .time_panel {
+    padding: var(--spacing-3);
+  }
+
+  .manual_grid {
     flex-direction: column;
+    gap: var(--spacing-3);
+  }
+
+  .calendar_wrap {
+    justify-content: flex-start;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin;
+  }
+
+  .range_calendars {
+    width: max-content;
+    max-width: none;
+    flex-shrink: 0;
+    gap: var(--spacing-3);
+  }
+
+  .range_time_grid {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-3);
   }
 }
 
@@ -55,3 +88,14 @@
   gap: var(--spacing-4);
 }
 
+@media (max-width: 36rem) {
+  .popover_menu {
+    max-width: calc(100vw - var(--spacing-4)) !important;
+  }
+}
+
+@media (max-width: 23rem) {
+  .calendar {
+    --calendar-cell-size: min(var(--spacing-11), calc((100vw - var(--spacing-10)) / 7));
+  }
+}

package/registry/components/ui/input-fields/date-picker/date-picker.tsx

@@ -56,10 +56,10 @@ export { Calendar } from "./calendar";
 export type { CalendarProps } from "./calendar";
 export * from "./types";
 
-const DEFAULT_START_PLACEHOLDER = "Start date";
-const DEFAULT_END_PLACEHOLDER = "End date";
-
-export const DatePicker = (props: DatePickerProps) => {
+const DEFAULT_START_PLACEHOLDER = "Start date";
+const DEFAULT_END_PLACEHOLDER = "End date";
+
+export const DatePicker = (props: DatePickerProps) => {
   const {
     label,
     className,
@@ -629,9 +629,9 @@ export const DatePicker = (props: DatePickerProps) => {
     [timePickerPopover?.align, timePickerPopover?.position],
   );
 
-  const isIndependentRangeMonths = isRange && resolvedRangeMonthCount > 1;
-
-  return (
+  const isIndependentRangeMonths = isRange && resolvedRangeMonthCount > 1;
+
+  return (
     <div className={clsx(sCommon.container, className)} style={style}>
       {label && (
         <div
@@ -758,11 +758,11 @@ export const DatePicker = (props: DatePickerProps) => {
                 </div>
               )}
 
-              <div className={s.calendar_wrap}>
-                {isRange ? (
-                  isIndependentRangeMonths ? (
-                    <div className={s.range_calendars}>
-                      {Array.from({ length: resolvedRangeMonthCount }, (_, index) => {
+              <div className={s.calendar_wrap}>
+                {isRange ? (
+                  isIndependentRangeMonths ? (
+                    <div className={s.range_calendars}>
+                      {Array.from({ length: resolvedRangeMonthCount }, (_, index) => {
                         const month =
                           rangeCalendarMonths[index] ??
                           addMonthOffset(

package/registry/components/ui/tabs/tabs.tsx

@@ -22,7 +22,7 @@ export type TabItem = {
   disabled?: boolean;
 };
 
-type TabsProps = {
+export type TabsProps = {
   tabs: TabItem[];
   defaultTab?: string;
   activeTab?: string;

package/registry/components/ui/tooltip/tooltip.tsx

@@ -8,7 +8,7 @@ import type { ComponentProps } from "react";
 import s from "./tooltip.module.css";
 import clsx from "clsx";
 
-type TooltipProps = {
+export type TooltipProps = {
   content: ReactNode;
   children: ReactNode;
   showArrow?: boolean;