@scripso-homepad/ui 0.4.10 → 0.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",
@@ -30,7 +30,8 @@
       "require": "./dist/web/index.cjs",
       "default": "./src/web/index.ts"
     },
-    "./web/table-scroll.css": "./src/web/components/table-scroll.css"
+    "./web/table-scroll.css": "./src/web/components/table-scroll.css",
+    "./web/typography.css": "./src/web/styles/typography.css"
   },
   "files": [
     "dist",

package/src/components/Calendar.tsx

@@ -13,6 +13,7 @@ import {
   formatCalendarYear,
   getYearPageStart,
   isMonthDisabled,
+  isSameDay,
   isYearDisabled,
   selectRangeDate,
   type CalendarDayCell,
@@ -64,13 +65,13 @@ type CalendarBaseProps = {
 export type CalendarSingleProps = CalendarBaseProps & {
   mode?: "single";
   value?: Date;
-  onChange?: (date: Date) => void;
+  onChange?: (date: Date | undefined) => void;
 };
 
 export type CalendarRangeProps = CalendarBaseProps & {
   mode: "range";
   value?: DateRange;
-  onChange?: (range: DateRange) => void;
+  onChange?: (range: DateRange | undefined) => void;
 };
 
 export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
@@ -275,6 +276,13 @@ export function Calendar(props: CalendarProps) {
       return;
     }
 
+    const currentValue = singleProps?.value;
+
+    if (currentValue && isSameDay(date, currentValue)) {
+      singleProps?.onChange?.(undefined);
+      return;
+    }
+
     singleProps?.onChange?.(date);
   }
 

package/src/components/DatePicker.tsx

@@ -207,7 +207,7 @@ export function DatePicker(props: DatePickerProps) {
     });
   }
 
-  function handleSingleSelect(date: Date) {
+  function handleSingleSelect(date: Date | undefined) {
     if (props.mode === "range") {
       return;
     }
@@ -216,14 +216,14 @@ export function DatePicker(props: DatePickerProps) {
     closePicker();
   }
 
-  function handleRangeSelect(range: DateRange) {
+  function handleRangeSelect(range: DateRange | undefined) {
     if (props.mode !== "range") {
       return;
     }
 
     props.onChange?.(range);
 
-    if (closeOnRangeComplete && range.end) {
+    if (closeOnRangeComplete && range?.end) {
       closePicker();
     }
   }

package/src/components/Select.tsx

@@ -73,6 +73,112 @@ function renderSelectIcon(icon: ReactNode, color: string) {
   return icon;
 }
 
+function resolveWebTextNode(
+  ref: React.RefObject<ComponentRef<typeof Text> | null>,
+): HTMLElement | null {
+  if (Platform.OS !== "web") {
+    return null;
+  }
+
+  const node = ref.current as unknown;
+  return node instanceof HTMLElement ? node : null;
+}
+
+function syncTruncatedNativeTitle(
+  ref: React.RefObject<ComponentRef<typeof Text> | null>,
+  label: string,
+): void {
+  const element = resolveWebTextNode(ref);
+  if (!element) {
+    return;
+  }
+
+  if (element.scrollWidth > element.clientWidth) {
+    element.setAttribute("title", label);
+    return;
+  }
+
+  element.removeAttribute("title");
+}
+
+function clearNativeTitle(ref: React.RefObject<ComponentRef<typeof Text> | null>): void {
+  resolveWebTextNode(ref)?.removeAttribute("title");
+}
+
+interface SelectOptionItemProps {
+  option: SelectOption;
+  compact: boolean;
+  optionHeight: number;
+  isSelected: boolean;
+  isHighlighted: boolean;
+  isLast: boolean;
+  selectableIndex: number;
+  onHighlight: (selectableIndex: number) => void;
+  onSelect: (value: string) => void;
+}
+
+function SelectOptionItem({
+  option,
+  compact,
+  optionHeight,
+  isSelected,
+  isHighlighted,
+  isLast,
+  selectableIndex,
+  onHighlight,
+  onSelect,
+}: SelectOptionItemProps) {
+  const labelRef = useRef<ComponentRef<typeof Text>>(null);
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled: option.disabled, selected: isSelected }}
+      disabled={option.disabled}
+      onPress={() => {
+        if (!option.disabled) {
+          onSelect(option.value);
+        }
+      }}
+      onHoverIn={() => {
+        if (!option.disabled && selectableIndex >= 0) {
+          onHighlight(selectableIndex);
+        }
+
+        syncTruncatedNativeTitle(labelRef, option.label);
+      }}
+      onHoverOut={() => {
+        clearNativeTitle(labelRef);
+      }}
+      style={[
+        selectDropdownMetrics.option,
+        compact && styles.optionCompact,
+        { height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
+        isSelected && selectDropdownMetrics.optionSelected,
+        compact && isSelected && styles.optionSelectedCompact,
+        isHighlighted && !isSelected && !option.disabled
+          ? selectDropdownMetrics.optionHighlighted
+          : null,
+        !isLast && styles.optionSpacing,
+        option.disabled && styles.optionDisabled,
+      ]}
+    >
+      <Text
+        ref={labelRef}
+        style={[
+          selectDropdownMetrics.optionLabel,
+          styles.optionLabel,
+          isSelected && selectDropdownMetrics.optionLabelSelected,
+          option.disabled && styles.optionLabelDisabled,
+        ]}
+        numberOfLines={1}
+      >
+        {option.label}
+      </Text>
+    </Pressable>
+  );
+}
+
 export type SelectOption = {
   value: string;
   label: string;
@@ -282,6 +388,12 @@ export function Select({
       return;
     }
 
+    if (selectedValues.includes(nextValue)) {
+      (onValueChange as SingleSelectProps["onValueChange"] | undefined)?.("");
+      closeMenu();
+      return;
+    }
+
     (onValueChange as SingleSelectProps["onValueChange"] | undefined)?.(nextValue);
     closeMenu();
   }
@@ -293,45 +405,18 @@ export function Select({
     const isLast = index === options.length - 1;
 
     return (
-      <Pressable
+      <SelectOptionItem
         key={option.value}
-        accessibilityRole="button"
-        accessibilityState={{ disabled: option.disabled, selected: isSelected }}
-        disabled={option.disabled}
-        onPress={() => {
-          if (!option.disabled) {
-            handleSelect(option.value);
-          }
-        }}
-        onHoverIn={() => {
-          if (!option.disabled && selectableIndex >= 0) {
-            setHighlightedIndex(selectableIndex);
-          }
-        }}
-        style={[
-          selectDropdownMetrics.option,
-          compact && styles.optionCompact,
-          { height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
-          isSelected && selectDropdownMetrics.optionSelected,
-          compact && isSelected && styles.optionSelectedCompact,
-          isHighlighted && !isSelected && !option.disabled
-            ? selectDropdownMetrics.optionHighlighted
-            : null,
-          !isLast && styles.optionSpacing,
-          option.disabled && styles.optionDisabled,
-        ]}
-      >
-        <Text
-          style={[
-            selectDropdownMetrics.optionLabel,
-            isSelected && selectDropdownMetrics.optionLabelSelected,
-            option.disabled && styles.optionLabelDisabled,
-          ]}
-          numberOfLines={1}
-        >
-          {option.label}
-        </Text>
-      </Pressable>
+        option={option}
+        compact={compact}
+        optionHeight={optionHeight}
+        isSelected={isSelected}
+        isHighlighted={isHighlighted}
+        isLast={isLast}
+        selectableIndex={selectableIndex}
+        onHighlight={setHighlightedIndex}
+        onSelect={handleSelect}
+      />
     );
   });
 
@@ -479,6 +564,16 @@ const styles = StyleSheet.create({
   optionDisabled: {
     opacity: 0.5,
   },
+  optionLabel: {
+    minWidth: 0,
+    ...(Platform.OS === "web"
+      ? ({
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        } as const)
+      : null),
+  },
   optionLabelDisabled: {
     color: colors.stormGray300,
   },

package/src/theme/select.ts

@@ -29,7 +29,7 @@ export const selectLabelTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.sm,
   fontWeight: fontWeight.medium,
-  lineHeight: fontSize.sm,
+  lineHeight: 16,
   letterSpacing: 0,
   color: colors.slateBlue,
 } as const;

package/src/utils/calendarDays.ts

@@ -41,24 +41,33 @@ export function isInDateRange(date: Date, start?: Date, end?: Date): boolean {
   return !isBeforeDay(day, start) && !isAfterDay(day, end);
 }
 
-export function selectRangeDate(clicked: Date, current?: DateRange): DateRange {
+export function selectRangeDate(clicked: Date, current?: DateRange): DateRange | undefined {
   const clickedDate = stripTime(clicked);
 
-  if (!current?.start || current.end) {
+  if (!current?.start) {
     return { start: clickedDate };
   }
 
   const start = stripTime(current.start);
+  const end = current.end ? stripTime(current.end) : undefined;
+
+  if (!end) {
+    if (isSameDay(clickedDate, start)) {
+      return undefined;
+    }
+
+    if (isBeforeDay(clickedDate, start)) {
+      return { start: clickedDate };
+    }
 
-  if (isSameDay(clickedDate, start)) {
     return { start, end: clickedDate };
   }
 
-  if (isBeforeDay(clickedDate, start)) {
-    return { start: clickedDate };
+  if (isSameDay(clickedDate, end)) {
+    return undefined;
   }
 
-  return { start, end: clickedDate };
+  return { start: clickedDate };
 }
 
 export function isSameDay(left: Date, right: Date): boolean {

package/src/web/components/Badge.tsx

@@ -23,7 +23,7 @@ export function Badge({ children, variant = 'neutral', icon, className }: BadgeP
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-2 rounded-[28px] px-3 py-1.5 font-sans text-xs font-semibold leading-none whitespace-nowrap',
+        'inline-flex items-center gap-2 rounded-[28px] px-3 py-1.5 typography-12 font-semibold whitespace-nowrap',
         badgeVariantClasses[variant],
         className,
       )}

package/src/web/components/ConfirmModal.tsx

@@ -78,13 +78,13 @@ export function ConfirmModal({
         <header className="flex flex-col gap-3 text-center">
           <h2
             id="homepad-confirm-modal-title"
-            className="font-sans text-xl font-bold leading-6.75 tracking-normal text-black"
+            className="typography-title tracking-normal text-black"
           >
             {title}
           </h2>
           <div
             id="homepad-confirm-modal-description"
-            className="text-center font-sans text-sm font-normal leading-4.75 tracking-normal text-storm-gray-400"
+            className="text-center typography-body tracking-normal text-storm-gray-400"
           >
             {description}
           </div>

package/src/web/components/Drawer.stories.tsx

@@ -44,10 +44,10 @@ type Story = StoryObj<typeof meta>;
 function DetailField({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex items-center justify-between gap-4">
-      <span className="min-w-0 flex-1 font-sans text-sm font-medium leading-[19px] tracking-normal text-storm-gray-500">
+      <span className="min-w-0 flex-1 typography-14 font-medium tracking-normal text-storm-gray-500">
         {label}
       </span>
-      <span className="shrink-0 text-right font-sans text-sm font-medium leading-[14px] tracking-normal text-storm-gray-900">
+      <span className="shrink-0 text-right typography-14 font-medium leading-[14px] tracking-normal text-storm-gray-900">
         {value}
       </span>
     </div>
@@ -57,7 +57,7 @@ function DetailField({ label, value }: { label: string; value: string }) {
 function DetailsSection({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <section className="flex flex-col gap-3">
-      <h3 className="font-sans text-xs font-semibold uppercase leading-4 tracking-normal text-storm-gray-200">
+      <h3 className="typography-12 font-semibold uppercase tracking-normal text-storm-gray-200">
         {title}
       </h3>
       <div className="flex flex-col gap-4">{children}</div>
@@ -70,7 +70,7 @@ function RequestDetailsBody() {
     <>
       <div className="flex flex-col gap-8 pb-6">
         <div className="flex items-center justify-between gap-4">
-          <span className="font-sans text-sm font-medium leading-[19px] tracking-normal text-storm-gray-500">
+          <span className="typography-14 font-medium tracking-normal text-storm-gray-500">
             Կարգավիճակ
           </span>
           <StatusBadge tone="warning">Սպասում է վճարման</StatusBadge>
@@ -93,7 +93,7 @@ function RequestDetailsBody() {
 
       <section className="-mx-6 flex flex-col justify-between border-t border-dashed border-storm-gray-50 px-6 pt-6 pb-0">
         <div className="flex flex-col gap-3">
-          <h3 className="font-sans text-xs font-semibold uppercase leading-4 tracking-normal text-storm-gray-200">
+          <h3 className="typography-12 font-semibold uppercase tracking-normal text-storm-gray-200">
             Գործողությունների պատմություն
           </h3>
           <HistoryTimeline events={historyEvents} />
@@ -190,7 +190,7 @@ export const WithoutSubtitle: Story = {
         closeAriaLabel="Փակել"
         onClose={args.onClose}
       >
-        <p className="font-sans text-sm leading-[19px] text-storm-gray-500">
+        <p className="typography-14 text-storm-gray-500">
           Drawer content without a subtitle line in the header.
         </p>
       </Drawer>
@@ -205,7 +205,7 @@ function InteractiveDrawerStory() {
     <WebLayoutCanvas className="min-h-screen bg-storm-gray-100 p-6">
       <button
         type="button"
-        className="rounded-xl border border-storm-gray-50 bg-white px-4 py-2 text-sm font-medium text-slate-blue"
+        className="rounded-xl border border-storm-gray-50 bg-white px-4 py-2 typography-14 font-medium text-slate-blue"
         onClick={() => setOpen(true)}
       >
         Բացել drawer-ը

package/src/web/components/Drawer.tsx

@@ -127,14 +127,14 @@ export function Drawer({
           <div className="min-w-0 flex flex-col gap-1">
             <h2
               id="homepad-drawer-title"
-              className="font-sans text-[18px] font-bold leading-6 tracking-normal text-black"
+              className="typography-title-sm tracking-normal text-black"
             >
               {title}
             </h2>
             {subtitle ? (
               <p
                 id="homepad-drawer-subtitle"
-                className="font-sans text-sm font-normal leading-[19px] tracking-normal text-storm-gray-400"
+                className="typography-body tracking-normal text-storm-gray-400"
               >
                 {subtitle}
               </p>

package/src/web/components/HistoryTimeline.tsx

@@ -31,10 +31,10 @@ export function HistoryTimeline({ events }: HistoryTimelineProps) {
             </div>
 
             <div className="flex min-w-0 flex-1 flex-col gap-2 pt-1.5">
-              <p className="font-sans text-sm font-medium leading-[19px] tracking-normal text-slate-blue">
+              <p className="typography-14 font-medium tracking-normal text-slate-blue">
                 {event.title}
               </p>
-              <p className="font-sans text-xs font-normal leading-4 tracking-normal text-storm-gray-300">
+              <p className="typography-caption tracking-normal text-storm-gray-300">
                 {event.timestamp}
               </p>
             </div>

package/src/web/components/Modal.stories.tsx

@@ -106,7 +106,7 @@ function FooterAlignmentsStory() {
           <button
             key={value}
             type="button"
-            className="rounded-lg border border-storm-gray-50 px-3 py-1 text-sm"
+            className="rounded-lg border border-storm-gray-50 px-3 py-1 typography-14"
             onClick={() => setAlign(value)}
           >
             {value}

package/src/web/components/Modal.tsx

@@ -1,4 +1,5 @@
 import { useEffect, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 
 import { Button } from '../../components/Button';
 import { cn } from '../utils/cn';
@@ -22,6 +23,7 @@ export type ModalProps = {
   cancelDisabled?: boolean;
   confirmDisabled?: boolean;
   closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
   containerClassName?: string;
   contentClassName?: string;
   buttonClassName?: string;
@@ -49,6 +51,7 @@ export function Modal({
   cancelDisabled = false,
   confirmDisabled = false,
   closeOnBackdrop = true,
+  closeOnEscape = true,
   containerClassName,
   contentClassName,
   buttonClassName,
@@ -58,8 +61,11 @@ export function Modal({
       return;
     }
 
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
+      if (event.key === 'Escape' && closeOnEscape) {
         onCancel();
       }
     };
@@ -67,9 +73,10 @@ export function Modal({
     window.addEventListener('keydown', handleKeyDown);
 
     return () => {
+      document.body.style.overflow = previousOverflow;
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [open, onCancel]);
+  }, [open, onCancel, closeOnEscape]);
 
   if (!open) {
     return null;
@@ -81,10 +88,18 @@ export function Modal({
     footerLayout !== 'split' && buttonClassName,
   );
 
-  return (
+  const modal = (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40"
-      onClick={closeOnBackdrop ? onCancel : undefined}
+      className="fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40"
+      onClick={
+        closeOnBackdrop
+          ? (event) => {
+              if (event.target === event.currentTarget) {
+                onCancel();
+              }
+            }
+          : undefined
+      }
       role="presentation"
     >
       <div
@@ -93,14 +108,14 @@ export function Modal({
         aria-labelledby="homepad-modal-title"
         {...(subtitle ? { 'aria-describedby': 'homepad-modal-subtitle' } : {})}
         className={cn(
-          'flex w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6',
+          'flex max-h-[min(90dvh,calc(100dvh-2rem))] w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6',
           containerClassName,
         )}
         onClick={(event) => {
           event.stopPropagation();
         }}
       >
-        <header className={cn('flex', icon ? 'items-center gap-2.5' : undefined)}>
+        <header className={cn('flex shrink-0', icon ? 'items-center gap-2.5' : undefined)}>
           {icon ? (
             <div
               className={cn(
@@ -116,14 +131,14 @@ export function Modal({
           <div className="flex min-w-0 flex-col gap-2">
             <h2
               id="homepad-modal-title"
-              className="font-sans text-lg font-bold leading-6 tracking-normal text-black"
+              className="typography-title-sm tracking-normal text-black"
             >
               {title}
             </h2>
             {subtitle ? (
               <p
                 id="homepad-modal-subtitle"
-                className="font-sans text-xs font-normal leading-4 tracking-normal text-storm-gray-400"
+                className="typography-caption tracking-normal text-storm-gray-400"
               >
                 {subtitle}
               </p>
@@ -131,7 +146,7 @@ export function Modal({
           </div>
         </header>
 
-        <div className={cn('min-w-0', contentClassName)}>{children}</div>
+        <div className={cn('min-h-0 min-w-0 flex-1 overflow-y-auto', contentClassName)}>{children}</div>
 
         <footer
           className={cn(
@@ -159,4 +174,6 @@ export function Modal({
       </div>
     </div>
   );
+
+  return typeof document !== 'undefined' ? createPortal(modal, document.body) : modal;
 }

package/src/web/components/Pagination.tsx

@@ -23,7 +23,7 @@ const defaultLabels: PaginationLabels = {
 };
 
 const paginationControlClassName =
-  'inline-flex size-7 items-center justify-center rounded-lg border border-storm-gray-50 p-1 text-xs font-medium leading-none text-storm-gray-500 transition-colors';
+  'inline-flex size-7 items-center justify-center rounded-lg border border-storm-gray-50 p-1 typography-12 font-medium text-storm-gray-500 transition-colors';
 
 const paginationHoverClassName = 'cursor-pointer hover:bg-storm-gray-0';
 
@@ -78,7 +78,7 @@ export function Pagination({
         className,
       )}
     >
-      <p className="text-xs font-medium leading-none text-storm-gray-200">
+      <p className="typography-12 font-medium text-storm-gray-200">
         {mergedLabels.showing({ start, end, total })}
       </p>
 

package/src/web/components/TableActionButton.tsx

@@ -17,7 +17,7 @@ export type TableActionButtonProps = {
 >;
 
 const inlineActionClassName =
-  'inline-flex cursor-pointer items-center gap-1 rounded-lg border border-storm-gray-50 bg-white px-3 py-2 font-sans text-xs font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0';
+  'inline-flex cursor-pointer items-center gap-1 rounded-lg border border-storm-gray-50 bg-white px-3 py-2 typography-12 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0';
 
 const variantClasses: Record<TableActionButtonVariant, string> = {
   approve: inlineActionClassName,

package/src/web/components/TableActionsMenu.tsx

@@ -172,7 +172,7 @@ export function TableActionsMenu({
                 item.onSelect();
               }}
               className={cn(
-                'flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left font-sans text-sm font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0',
+                'flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0',
                 index > 0 && 'border-t border-storm-gray-50',
                 item.disabled && 'cursor-not-allowed opacity-50',
               )}

package/src/web/components/TableIconText.tsx

@@ -12,7 +12,7 @@ export function TableIconText({ icon, children, className }: TableIconTextProps)
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-2 font-sans text-sm font-medium leading-none tracking-normal text-storm-gray-900',
+        'inline-flex items-center gap-2 typography-14 font-medium tracking-normal text-storm-gray-900',
         className,
       )}
     >