@scripso-homepad/ui 0.4.12 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/components/CountryCodeSelector.tsx

@@ -221,11 +221,12 @@ const styles = StyleSheet.create({
   },
   flag: {
     fontSize: 18,
-    lineHeight: 22,
+    lineHeight: 24,
   },
   dialCode: {
     fontSize: fontSize.md,
     fontWeight: fontWeight.medium,
+    lineHeight: 19,
   },
   overlay: {
     flex: 1,

package/src/components/DatePicker.tsx

@@ -389,12 +389,12 @@ const styles = StyleSheet.create({
   },
   error: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.inputError,
   },
   hint: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.stormGray300,
   },
 });

package/src/components/Input.tsx

@@ -68,6 +68,8 @@ export interface InputProps extends TextInputProps {
   /** Styles merged into the bordered field container. */
   fieldStyle?: StyleProp<ViewStyle>;
   labelClassName?: string;
+  /** Styles merged into the field label. */
+  labelStyles?: StyleProp<TextStyle>;
   inputClassName?: string;
   errorClassName?: string;
   hintClassName?: string;
@@ -88,6 +90,7 @@ export function Input({
   fieldClassName,
   fieldStyle,
   labelClassName,
+  labelStyles,
   inputClassName,
   errorClassName,
   hintClassName,
@@ -164,7 +167,11 @@ export function Input({
   return (
     <View ref={wrapperRef} style={[styles.wrapper, containerStyle]}>
       {label ? (
-        <Label disabled={isDisabled} className={labelClassName}>
+        <Label
+          disabled={isDisabled}
+          className={labelClassName}
+          style={labelStyles}
+        >
           {label}
         </Label>
       ) : null}

package/src/components/PhoneInput.tsx

@@ -32,6 +32,8 @@ export interface PhoneInputProps extends Omit<TextInputProps, "style"> {
   style?: StyleProp<TextStyle>;
   className?: string;
   labelClassName?: string;
+  /** Styles merged into the field label. */
+  labelStyles?: StyleProp<TextStyle>;
   inputClassName?: string;
   errorClassName?: string;
   hintClassName?: string;
@@ -47,6 +49,7 @@ export function PhoneInput({
   style,
   className,
   labelClassName,
+  labelStyles,
   inputClassName,
   errorClassName,
   hintClassName,
@@ -87,7 +90,11 @@ export function PhoneInput({
   return (
     <View ref={wrapperRef} style={[styles.wrapper, containerStyle]}>
       {label ? (
-        <Label disabled={isDisabled} className={labelClassName}>
+        <Label
+          disabled={isDisabled}
+          className={labelClassName}
+          style={labelStyles}
+        >
           {label}
         </Label>
       ) : null}
@@ -98,39 +105,39 @@ export function PhoneInput({
           disabled={isDisabled}
           style={styles.countrySelector}
         />
-        <View style={styles.phoneColumn}>
-          <View style={[phoneFieldStyles.outline, styles.phoneOutline]}>
-            <View
+        <View style={[phoneFieldStyles.outline, styles.phoneOutline]}>
+          <View
+            style={[
+              inputFieldMetrics.container,
+              phoneFieldStyles.container,
+              styles.phoneField,
+            ]}
+          >
+            <TextInput
+              ref={inputRef}
               style={[
-                inputFieldMetrics.container,
-                phoneFieldStyles.container,
-                styles.phoneField,
+                inputFieldMetrics.input,
+                phoneFieldStyles.text,
+                style,
               ]}
-            >
-              <TextInput
-                ref={inputRef}
-                style={[
-                  inputFieldMetrics.input,
-                  phoneFieldStyles.text,
-                  style,
-                ]}
-                keyboardType="phone-pad"
-                placeholderTextColor={phoneFieldStyles.placeholder}
-                editable={editable}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
-                accessibilityState={{ disabled: isDisabled }}
-                {...props}
-              />
-            </View>
+              keyboardType="phone-pad"
+              placeholderTextColor={
+                error ? colors.inputError : phoneFieldStyles.placeholder
+              }
+              editable={editable}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              accessibilityState={{ disabled: isDisabled }}
+              {...props}
+            />
           </View>
-          {helperMessage ? (
-            <Text ref={helperRef} style={error ? styles.error : styles.hint}>
-              {helperMessage}
-            </Text>
-          ) : null}
         </View>
       </View>
+      {helperMessage ? (
+        <Text ref={helperRef} style={error ? styles.error : styles.hint}>
+          {helperMessage}
+        </Text>
+      ) : null}
     </View>
   );
 }
@@ -149,12 +156,8 @@ const styles = StyleSheet.create({
     flexShrink: 0,
     alignSelf: "flex-start",
   },
-  phoneColumn: {
-    flex: 1,
-    gap: spacing.sm,
-  },
   phoneOutline: {
-    width: "100%",
+    flex: 1,
   },
   phoneField: {
     flex: 1,

package/src/components/Select.tsx

@@ -579,12 +579,12 @@ const styles = StyleSheet.create({
   },
   error: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.inputError,
   },
   hint: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.stormGray300,
   },
 });

package/src/index.ts

@@ -82,6 +82,7 @@ export {
   radii,
   shadows,
   spacing,
+  typographyScale,
 } from "./theme/tokens";
 export type {
   EmeraldGreenStep,

package/src/theme/calendar.ts

@@ -54,7 +54,7 @@ export const calendarLabelTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.sm,
   fontWeight: fontWeight.medium,
-  lineHeight: fontSize.sm,
+  lineHeight: 16,
   letterSpacing: 0,
   color: colors.slateBlue,
 } as const;
@@ -63,7 +63,7 @@ export const calendarFieldTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.md,
   fontWeight: fontWeight.regular,
-  lineHeight: fontSize.md,
+  lineHeight: 19,
   letterSpacing: 0,
   textAlign: "left",
 } as const;
@@ -105,7 +105,7 @@ export const calendarDropdownMetrics = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.bold,
-    lineHeight: 18,
+    lineHeight: 19,
     letterSpacing: 0,
     color: colors.stormGray850,
   },
@@ -148,7 +148,7 @@ export const calendarDropdownMetrics = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.sm,
     fontWeight: fontWeight.regular,
-    lineHeight: fontSize.sm,
+    lineHeight: 16,
     letterSpacing: 0,
     textAlign: "center",
     color: colors.stormGray300,
@@ -192,7 +192,7 @@ export const calendarDropdownMetrics = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.regular,
-    lineHeight: 18,
+    lineHeight: 19,
     letterSpacing: 0,
     textAlign: "center",
     color: colors.navy,
@@ -265,7 +265,7 @@ export const calendarDropdownMetrics = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.regular,
-    lineHeight: 18,
+    lineHeight: 19,
     letterSpacing: 0,
     textAlign: "center",
     color: colors.navy,

package/src/theme/tokens.ts

@@ -216,6 +216,20 @@ export const fontSize = {
   xxl: 32,
 } as const;
 
+/**
+ * Canonical Homepad type scale (matches `.typography-*` in `src/web/styles/typography.css`).
+ * font-size / line-height pairs:
+ * 12/16 · 14/19 · 18/24 · 20/27 · 24/25 · 32/34
+ */
+export const typographyScale = {
+  12: { fontSize: 12, lineHeight: 16 },
+  14: { fontSize: 14, lineHeight: 19 },
+  18: { fontSize: 18, lineHeight: 24 },
+  20: { fontSize: 20, lineHeight: 27 },
+  24: { fontSize: 24, lineHeight: 25 },
+  32: { fontSize: 32, lineHeight: 34 },
+} as const;
+
 export const fontWeight = {
   regular: "400" as const,
   medium: "500" as const,
@@ -227,12 +241,12 @@ export const fonts = {
   sans: "Noto Sans Armenian",
 } as const;
 
-/** Input label typography — matches Figma (Medium, 100% line-height). */
+/** Input label typography — Medium, typography-12 scale. */
 export const labelTypography = {
   fontFamily: fonts.sans,
-  fontSize: fontSize.sm,
+  fontSize: typographyScale[12].fontSize,
   fontWeight: fontWeight.medium,
-  lineHeight: fontSize.sm,
+  lineHeight: typographyScale[12].lineHeight,
   letterSpacing: 0,
 } as const;
 
@@ -240,16 +254,16 @@ export const labelTypography = {
 export const buttonTypography = {
   lg: {
     fontFamily: fonts.sans,
-    fontSize: 14,
+    fontSize: typographyScale[14].fontSize,
     fontWeight: fontWeight.semibold,
-    lineHeight: 19,
+    lineHeight: typographyScale[14].lineHeight,
     letterSpacing: 0,
   },
   sm: {
     fontFamily: fonts.sans,
-    fontSize: 12,
+    fontSize: typographyScale[12].fontSize,
     fontWeight: fontWeight.semibold,
-    lineHeight: 16,
+    lineHeight: typographyScale[12].lineHeight,
     letterSpacing: 0,
   },
 } as const;

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

@@ -47,7 +47,7 @@ function DetailField({ label, value }: { label: string; value: string }) {
       <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 typography-14 font-medium leading-[14px] tracking-normal text-storm-gray-900">
+      <span className="shrink-0 text-right typography-14 font-medium  tracking-normal text-storm-gray-900">
         {value}
       </span>
     </div>

package/src/web/components/TableActionsMenu.tsx

@@ -31,6 +31,10 @@ export type TableActionsMenuProps = {
   triggerAriaLabel: string;
   className?: string;
   menuClassName?: string;
+  /** Dropdown menu width in pixels. Defaults to 231. Ignored when menuFitContent is true. */
+  menuWidth?: number;
+  /** Size the menu to its content width instead of a fixed pixel width. */
+  menuFitContent?: boolean;
 };
 
 type MenuPosition = {
@@ -38,13 +42,13 @@ type MenuPosition = {
   left: number;
 };
 
-function clampMenuLeft(left: number): number {
+function clampMenuLeft(left: number, menuWidth: number): number {
   if (typeof window === 'undefined') {
     return left;
   }
 
   const minLeft = MENU_VIEWPORT_MARGIN_PX;
-  const maxLeft = Math.max(minLeft, window.innerWidth - MENU_WIDTH_PX - MENU_VIEWPORT_MARGIN_PX);
+  const maxLeft = Math.max(minLeft, window.innerWidth - menuWidth - MENU_VIEWPORT_MARGIN_PX);
 
   return Math.min(Math.max(left, minLeft), maxLeft);
 }
@@ -69,6 +73,8 @@ export function TableActionsMenu({
   triggerAriaLabel,
   className,
   menuClassName,
+  menuWidth = MENU_WIDTH_PX,
+  menuFitContent = false,
 }: TableActionsMenuProps) {
   const [open, setOpen] = useState(false);
   const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null);
@@ -88,11 +94,15 @@ export function TableActionsMenu({
     }
 
     const rect = trigger.getBoundingClientRect();
+    const resolvedMenuWidth = menuFitContent
+      ? (menuRef.current?.getBoundingClientRect().width ?? menuWidth)
+      : menuWidth;
+
     setMenuPosition({
       top: rect.bottom + MENU_OFFSET_PX,
-      left: clampMenuLeft(rect.right - MENU_WIDTH_PX),
+      left: clampMenuLeft(rect.right - resolvedMenuWidth, resolvedMenuWidth),
     });
-  }, []);
+  }, [menuFitContent, menuWidth]);
 
   useOnClickOutside([rootRef, menuRef], closeMenu, open);
 
@@ -105,6 +115,14 @@ export function TableActionsMenu({
     updateMenuPosition();
   }, [open, updateMenuPosition]);
 
+  useIsomorphicLayoutEffect(() => {
+    if (!open || !menuFitContent) {
+      return;
+    }
+
+    updateMenuPosition();
+  }, [items, menuFitContent, open, updateMenuPosition]);
+
   useEffect(() => {
     if (!open) {
       return;
@@ -147,7 +165,7 @@ export function TableActionsMenu({
           position: 'fixed',
           top: menuPosition.top,
           left: menuPosition.left,
-          width: MENU_WIDTH_PX,
+          ...(menuFitContent ? { width: 'max-content' } : { width: menuWidth }),
         }}
         className={cn(
           'z-50 overflow-hidden rounded-2xl border border-storm-gray-50 bg-white shadow-[0_4px_20px_0_rgba(0,0,0,0.05)]',
@@ -172,7 +190,8 @@ export function TableActionsMenu({
                 item.onSelect();
               }}
               className={cn(
-                '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',
+                'flex h-[51px] 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',
+                menuFitContent ? 'w-auto' : 'w-full',
                 index > 0 && 'border-t border-storm-gray-50',
                 item.disabled && 'cursor-not-allowed opacity-50',
               )}

package/src/web/components/sonner-toast.css

@@ -47,7 +47,7 @@
   font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
   font-size: 14px;
   font-weight: 700;
-  line-height: 22px;
+  line-height: 19px;
   letter-spacing: 0;
   color: var(--color-slate-blue, #182e3c);
 }
@@ -56,7 +56,7 @@
   font-family: var(--font-sans, 'Noto Sans Armenian', ui-sans-serif, system-ui, sans-serif);
   font-size: 12px;
   font-weight: 400;
-  line-height: 1.4;
+  line-height: 16px;
   letter-spacing: 0;
   color: var(--color-slate-blue, #182e3c);
 }

package/src/web/components/table/TablePrimitives.tsx

@@ -174,13 +174,14 @@ export function TableCell({
   ...props
 }: TableCellProps) {
   const disabled = useTableRowDisabled();
+  const resolvedVariant = disabled ? 'muted' : variant;
 
   return (
     <td
       className={cn(
         tableCellPaddingClassName,
         tableBodyClassName,
-        tableCellVariantClasses[variant],
+        tableCellVariantClasses[resolvedVariant],
         disabled && tableRowDisabledCellClassName,
         tableAlignClasses[align],
         className,
@@ -197,6 +198,8 @@ export type TableActionsCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
 };
 
 export function TableActionsCell({ className, children, ...props }: TableActionsCellProps) {
+  const disabled = useTableRowDisabled();
+
   return (
     <td
       className={cn(
@@ -204,6 +207,7 @@ export function TableActionsCell({ className, children, ...props }: TableActions
         tableCellPaddingClassName,
         tableBodyClassName,
         tableStickyRightShadowClassName,
+        disabled && tableRowDisabledCellClassName,
         className,
       )}
       {...props}

package/src/web/icons/TableMenuActivateIcon.tsx

@@ -16,9 +16,9 @@ export function TableMenuActivateIcon({ className }: TableMenuActivateIconProps)
       className={cn('shrink-0', className)}
     >
       <path
-        d="M14.1667 9.16699V6.66699C14.1667 4.3658 12.3012 2.50033 10 2.50033C7.69882 2.50033 5.83333 4.3658 5.83333 6.66699V9.16699M5.83333 9.16699H4.16667C3.24619 9.16699 2.5 9.91318 2.5 10.8337V16.667C2.5 17.5875 3.24619 18.3337 4.16667 18.3337H15.8333C16.7538 18.3337 17.5 17.5875 17.5 16.667V10.8337C17.5 9.91318 16.7538 9.16699 15.8333 9.16699H5.83333Z"
+        d="M5.83333 9.16631V5.83297C5.83229 4.79968 6.21523 3.80286 6.90781 3.03603C7.60039 2.2692 8.55319 1.78706 9.58125 1.68321C10.6093 1.57937 11.6393 1.86123 12.4712 2.47407C13.3032 3.08691 13.8777 3.98701 14.0833 4.99964M4.16667 9.16631H15.8333C16.7538 9.16631 17.5 9.9125 17.5 10.833V16.6663C17.5 17.5868 16.7538 18.333 15.8333 18.333H4.16667C3.24619 18.333 2.5 17.5868 2.5 16.6663V10.833C2.5 9.9125 3.24619 9.16631 4.16667 9.16631Z"
         stroke="#279D54"
-        strokeWidth="1.75"
+        strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
       />

package/src/web/icons/TableMenuEditIcon.tsx

@@ -16,9 +16,9 @@ export function TableMenuEditIcon({ className }: TableMenuEditIconProps) {
       className={cn('shrink-0', className)}
     >
       <path
-        d="M11.6667 3.33366L16.6667 8.33366M2.5 17.5003H5.83333L15.275 8.05866C15.5813 7.75244 15.7533 7.33612 15.7533 6.90233C15.7533 6.46854 15.5813 6.05222 15.275 5.746L14.2542 4.72533C13.9479 4.41911 13.5316 4.24707 13.0978 4.24707C12.664 4.24707 12.2477 4.41911 11.9415 4.72533L2.5 14.167V17.5003Z"
+        d="M10 2.50019H4.16667C3.72464 2.50019 3.30072 2.67578 2.98816 2.98834C2.67559 3.3009 2.5 3.72483 2.5 4.16686V15.8335C2.5 16.2755 2.67559 16.6995 2.98816 17.012C3.30072 17.3246 3.72464 17.5002 4.16667 17.5002H15.8333C16.2754 17.5002 16.6993 17.3246 17.0118 17.012C17.3244 16.6995 17.5 16.2755 17.5 15.8335V10.0002M15.3125 2.18769C15.644 1.85617 16.0937 1.66992 16.5625 1.66992C17.0313 1.66992 17.481 1.85617 17.8125 2.18769C18.144 2.51921 18.3303 2.96885 18.3303 3.43769C18.3303 3.90653 18.144 4.35617 17.8125 4.68769L10.3017 12.1994C10.1038 12.3971 9.85934 12.5418 9.59083 12.6202L7.19667 13.3202C7.12496 13.3411 7.04895 13.3424 6.97659 13.3238C6.90423 13.3053 6.83819 13.2676 6.78537 13.2148C6.73255 13.162 6.69491 13.096 6.67637 13.0236C6.65783 12.9512 6.65909 12.8752 6.68 12.8035L7.38 10.4094C7.45877 10.1411 7.60378 9.8969 7.80167 9.69936L15.3125 2.18769Z"
         stroke="#B5BCC1"
-        strokeWidth="1.75"
+        strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
       />

package/src/web/icons/TableMenuSuspendIcon.tsx

@@ -16,16 +16,9 @@ export function TableMenuSuspendIcon({ className }: TableMenuSuspendIconProps) {
       className={cn('shrink-0', className)}
     >
       <path
-        d="M10 18.3337C14.6024 18.3337 18.3333 14.6027 18.3333 10.0003C18.3333 5.39795 14.6024 1.66699 10 1.66699C5.39763 1.66699 1.66667 5.39795 1.66667 10.0003C1.66667 14.6027 5.39763 18.3337 10 18.3337Z"
+        d="M4.08464 4.08366L15.918 15.917M18.3346 10.0003C18.3346 14.6027 14.6037 18.3337 10.0013 18.3337C5.39893 18.3337 1.66797 14.6027 1.66797 10.0003C1.66797 5.39795 5.39893 1.66699 10.0013 1.66699C14.6037 1.66699 18.3346 5.39795 18.3346 10.0003Z"
         stroke="#AE0011"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M6.66667 10H13.3333"
-        stroke="#AE0011"
-        strokeWidth="1.75"
+        strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
       />

package/src/web/layout/AppHeader.tsx

@@ -12,6 +12,7 @@ export type AppHeaderProps = {
   title: string;
   labels: AdminHeaderLabels;
   hasBuildingSelect?: boolean;
+  showSearch?: boolean;
   buildingOptions?: AdminBuildingOption[];
   selectedBuildingId?: string;
   className?: string;
@@ -46,6 +47,7 @@ export function AppHeader({
   title,
   labels,
   hasBuildingSelect = false,
+  showSearch = true,
   buildingOptions = [],
   selectedBuildingId = '',
   className,
@@ -88,17 +90,19 @@ export function AppHeader({
           />
         ) : null}
 
-        <Input
-          leftIcon={searchIcon ?? <Search strokeWidth={1.75} />}
-          placeholder={labels.searchPlaceholder}
-          value={searchValue}
-          onChangeText={(value) => onSearchChange?.(value)}
-          editable={!searchDisabled}
-          className={cn('w-65!', searchClassName)}
-          containerStyle={{ width: 260, maxWidth: 260, flexShrink: 0 }}
-          fieldStyle={searchFieldStyle ?? defaultSearchFieldStyle}
-          accessibilityLabel={labels.searchPlaceholder}
-        />
+        {showSearch ? (
+          <Input
+            leftIcon={searchIcon ?? <Search strokeWidth={1.75} />}
+            placeholder={labels.searchPlaceholder}
+            value={searchValue}
+            onChangeText={(value) => onSearchChange?.(value)}
+            editable={!searchDisabled}
+            className={cn('w-65!', searchClassName)}
+            containerStyle={{ width: 260, maxWidth: 260, flexShrink: 0 }}
+            fieldStyle={searchFieldStyle ?? defaultSearchFieldStyle}
+            accessibilityLabel={labels.searchPlaceholder}
+          />
+        ) : null}
 
         <button
           type="button"

package/src/web/mutation-toast.ts

@@ -3,6 +3,8 @@ import { toast } from './toast';
 export type MutationToastMessages = {
   success: string;
   error: string;
+  successDescription?: string;
+  errorDescription?: string;
 };
 
 export type MutationToastResult = {
@@ -21,12 +23,22 @@ export async function runMutationWithToast(
 ): Promise<MutationToastResult> {
   try {
     await action();
-    toast.success(messages.success);
+
+    if (messages.successDescription) {
+      toast.success(messages.success, { description: messages.successDescription });
+    } else {
+      toast.success(messages.success);
+    }
 
     return { success: true };
   } catch (error) {
     const errorMessage = options?.getErrorMessage?.(error) ?? messages.error;
-    toast.error(errorMessage);
+
+    if (messages.errorDescription) {
+      toast.error(errorMessage, { description: messages.errorDescription });
+    } else {
+      toast.error(errorMessage);
+    }
 
     return { success: false, errorMessage };
   }