@temboplus/frontend-react-core 0.1.3-beta.38 → 0.1.3-beta.39

package/README.md

@@ -1,385 +1,119 @@
 # @temboplus/frontend-react-core
 
-A React UI library for TemboPlus applications, providing reusable components, validators, and utilities for building consistent react applications across the platform.
+React hooks that wrap pure helpers from [`@temboplus/frontend-core`](https://github.com/TemboPlus-Frontend/frontend-core-js) for use in React applications across the TemboPlus platform.
 
-## 📦 Installation
+Today the package ships one feature area — timezone — with more to be added as React-flavored counterparts to frontend-core utilities are needed.
+
+## Installation
 
 ```bash
-npm install @temboplus/frontend-react-core
+bun add @temboplus/frontend-react-core
 # or
-yarn add @temboplus/frontend-react-core
-# or
-pnpm add @temboplus/frontend-react-core
+npm install @temboplus/frontend-react-core
 ```
 
-## 🏗️ Dependencies
-
-This package requires the following peer dependencies:
+Peer dependency:
 
 ```bash
-npm install @temboplus/frontend-core
-```
-
-## 🚀 Quick Start
-
-```typescript
-import { PHONE_NUMBER_VALIDATOR, AMOUNT_VALIDATOR } from '@temboplus/frontend-react-core';
-
-// Use in your Ant Design form
-const formRules = {
-  phoneNumber: [{ required: true, validator: PHONE_NUMBER_VALIDATOR('TZ') }],
-  amount: [{ required: true, validator: AMOUNT_VALIDATOR({ currencyCode: 'TZS' }) }]
-};
-```
-
-## 📚 Features
-
-### ✅ Form Validators (Available Now)
-
-Type-safe, country-aware form validators for Ant Design forms with built-in internationalization and error messaging.
-
-### 🔄 Coming Soon
-
-- **Reusable React Components** - Pre-built UI components for financial applications
-- **Hooks Library** - Custom React hooks for common patterns
-- **Context Providers** - Application-wide state management
-- **Theme System** - Consistent design tokens and styling
-- **Utility Functions** - Helper functions for React applications
-
-## 📋 API Reference
-
-### Form Validators
-
-All validators follow the Ant Design validator pattern and return Promise-based validation results.
-
-#### `PHONE_NUMBER_VALIDATOR(countryCode?: ISO2CountryCode)`
-
-Validates general phone number format using libphonenumber-js.
-
-```typescript
-import { PHONE_NUMBER_VALIDATOR } from '@temboplus/frontend-react-core';
-
-// Basic usage
-const rules = [{ required: true, validator: PHONE_NUMBER_VALIDATOR('TZ') }];
-
-// Supported countries: TZ, KE, and all libphonenumber-js supported countries
-```
-
-**Features:**
-- Validates phone number format for any country
-- Returns normalized E.164 format on success
-- Country-specific error messages
-- Supports international and local number formats
-
-#### `MOBILE_PHONE_VALIDATOR(countryCode?: ISO2CountryCode)`
-
-Validates mobile phone numbers eligible for payout operations (stricter validation).
-
-```typescript
-import { MOBILE_PHONE_VALIDATOR } from '@temboplus/frontend-react-core';
-
-const rules = [{ required: true, validator: MOBILE_PHONE_VALIDATOR('TZ') }];
+bun add react
 ```
 
-**Features:**
-- Validates mobile-specific number formats
-- Checks payout eligibility (supports TZ and KE)
-- MNO (Mobile Network Operator) validation
-- Returns normalized E.164 format
+Runtime dependency (auto-installed):
 
-#### `ACCOUNT_NAME_VALIDATOR`
+- `@temboplus/frontend-core` — the pure utilities and domain entities the hooks wrap.
 
-Validates bank account holder names.
-
-```typescript
-import { ACCOUNT_NAME_VALIDATOR } from '@temboplus/frontend-react-core';
-
-const rules = [{ required: true, validator: ACCOUNT_NAME_VALIDATOR }];
-```
+## Subpath imports
 
-**Validation Rules:**
-- 3-50 characters length
-- Only letters, spaces, hyphens, apostrophes, commas
-- At least two words (first name + last name)
-- Not all uppercase
-- No numbers or special characters
+Import the focused surface or the root entry; both work:
 
-#### `SWIFT_CODE_VALIDATOR(countryCode?: ISO2CountryCode)`
+```ts
+// Focused (recommended — keeps your bundles honest):
+import { useTimezone } from "@temboplus/frontend-react-core/timezone";
 
-Validates SWIFT/BIC codes for banks.
-
-```typescript
-import { SWIFT_CODE_VALIDATOR } from '@temboplus/frontend-react-core';
-
-// Country-specific validation
-const rules = [{ required: true, validator: SWIFT_CODE_VALIDATOR('TZ') }];
-
-// Multi-country validation
-const rules = [{ required: true, validator: SWIFT_CODE_VALIDATOR() }];
+// Or the root:
+import { useTimezone } from "@temboplus/frontend-react-core";
 ```
 
-**Features:**
-- Validates against known bank SWIFT codes
-- Country-specific validation (TZ, KE)
-- Automatic uppercase conversion
-- Real bank verification
+## Timezone hooks
 
-#### `ACCOUNT_NUMBER_VALIDATOR(countryCode?: ISO2CountryCode)`
+Each app passes its own `storageKey` so timezone preferences don't collide across products sharing a browser origin. Wrap once in your app and use the bare hook everywhere:
 
-Validates bank account numbers with country-specific formats.
+```ts
+// src/shared/lib/timezone.ts (or similar)
+import {
+  useTimezone as useTimezoneBase,
+  useTimezoneDate as useTimezoneDateBase,
+  useFormatDate as useFormatDateBase,
+  useFormatDateTime as useFormatDateTimeBase,
+  useFormatTime as useFormatTimeBase,
+} from "@temboplus/frontend-react-core/timezone";
 
-```typescript
-import { ACCOUNT_NUMBER_VALIDATOR } from '@temboplus/frontend-react-core';
+const STORAGE_KEY = "myapp.timezone";
 
-const rules = [{ required: true, validator: ACCOUNT_NUMBER_VALIDATOR('KE') }];
+export const useTimezone = () => useTimezoneBase({ storageKey: STORAGE_KEY });
+export const useTimezoneDate = () => useTimezoneDateBase({ storageKey: STORAGE_KEY });
+export const useFormatDate = () => useFormatDateBase({ storageKey: STORAGE_KEY });
+export const useFormatDateTime = () => useFormatDateTimeBase({ storageKey: STORAGE_KEY });
+export const useFormatTime = () => useFormatTimeBase({ storageKey: STORAGE_KEY });
 ```
 
-**Country-Specific Rules:**
-- **Kenya (KE)**: 10, 12, or 15 alphanumeric characters
-- **Tanzania (TZ)**: 9-19 characters
-- Automatic space removal and normalization
-
-#### `AMOUNT_VALIDATOR(options?: AmountValidatorOptions)`
-
-Validates monetary amounts with currency-specific constraints.
-
-```typescript
-import { AMOUNT_VALIDATOR } from '@temboplus/frontend-react-core';
-
-// Basic usage with defaults
-const rules = [{ required: true, validator: AMOUNT_VALIDATOR() }];
-
-// Custom configuration
-const rules = [{
-  required: true,
-  validator: AMOUNT_VALIDATOR({
-    currencyCode: 'KES',
-    min: 100,
-    max: 50000,
-    invalidFormatMessage: 'Please enter a valid amount',
-    minMessage: 'Minimum amount is 100 KES',
-    maxMessage: 'Maximum amount is 50,000 KES'
-  })
-}];
-
-// Disable constraints
-const rules = [{
-  required: true,
-  validator: AMOUNT_VALIDATOR({
-    currencyCode: 'USD',
-    min: null,    // No minimum
-    max: null,    // No maximum
-  })
-}];
-```
+### `useTimezone()`
 
-**Default Constraints:**
-- **TZS**: Min: 1,000, Max: 1,000,000
-- **KES**: Min: 40, Max: 40,000,000  
-- **Other**: Min: 1, Max: 1,000,000
-
-**Options:**
-```typescript
-interface AmountValidatorOptions {
-  currencyCode?: CurrencyCode;           // Default: 'TZS'
-  min?: number | null;                   // Default: currency-specific
-  max?: number | null;                   // Default: currency-specific
-  invalidFormatMessage?: string;         // Custom error message
-  minMessage?: string;                   // Custom minimum error
-  maxMessage?: string;                   // Custom maximum error
-}
+```ts
+const [timezone, setTimezone] = useTimezone();
 ```
 
-**Features:**
-- Supports all currencies from @temboplus/frontend-core
-- Handles comma-separated numbers (1,000.50)
-- Rejects negative amounts
-- Currency-specific formatting
-- Returns normalized numeric format
+- Reads from `localStorage[storageKey]` on mount (after first paint, to avoid SSR mismatch).
+- Falls back to `DEFAULT_TIMEZONE` (`"Africa/Nairobi"`) when nothing's stored.
+- `setTimezone(next)` validates against `Intl.supportedValuesOf("timeZone")` plus TemboPlus operating/anchor zones, then persists.
 
-## 🎯 Usage Examples
+### `useTimezoneDate()`
 
-### Complete Form Example
+Boundary helpers bound to the current timezone preference. Re-memoises when the preference changes.
 
-```typescript
-import React from 'react';
-import { Form, Input, Button } from 'antd';
-import {
-  PHONE_NUMBER_VALIDATOR,
-  AMOUNT_VALIDATOR,
-  ACCOUNT_NAME_VALIDATOR,
-  SWIFT_CODE_VALIDATOR,
-  ACCOUNT_NUMBER_VALIDATOR,
-} from '@temboplus/frontend-react-core';
-
-const PayoutForm: React.FC = () => {
-  const [form] = Form.useForm();
-
-  const onFinish = (values: any) => {
-    console.log('Validated values:', values);
-  };
-
-  return (
-    <Form form={form} onFinish={onFinish} layout="vertical">
-      <Form.Item
-        label="Phone Number"
-        name="phoneNumber"
-        rules={[{ required: true, validator: PHONE_NUMBER_VALIDATOR('TZ') }]}
-      >
-        <Input placeholder="+255 712 345 678" />
-      </Form.Item>
-
-      <Form.Item
-        label="Amount"
-        name="amount"
-        rules={[{
-          required: true,
-          validator: AMOUNT_VALIDATOR({
-            currencyCode: 'TZS',
-            min: 1000,
-            max: 100000
-          })
-        }]}
-      >
-        <Input placeholder="10,000" />
-      </Form.Item>
-
-      <Form.Item
-        label="Account Name"
-        name="accountName"
-        rules={[{ required: true, validator: ACCOUNT_NAME_VALIDATOR }]}
-      >
-        <Input placeholder="John Smith" />
-      </Form.Item>
-
-      <Form.Item
-        label="Bank SWIFT Code"
-        name="swiftCode"
-        rules={[{ required: true, validator: SWIFT_CODE_VALIDATOR('TZ') }]}
-      >
-        <Input placeholder="CORUTZTZ" />
-      </Form.Item>
-
-      <Form.Item
-        label="Account Number"
-        name="accountNumber"
-        rules={[{ required: true, validator: ACCOUNT_NUMBER_VALIDATOR('TZ') }]}
-      >
-        <Input placeholder="123456789" />
-      </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default PayoutForm;
-```
+```ts
+const { tz, startOfDay, endOfDay, parse, sameDay, toUtc } = useTimezoneDate();
 
-### Multi-Country Support
-
-```typescript
-import { useState } from 'react';
-import { PHONE_NUMBER_VALIDATOR, AMOUNT_VALIDATOR } from '@temboplus/frontend-react-core';
-
-const MultiCountryForm: React.FC = () => {
-  const [selectedCountry, setSelectedCountry] = useState<'TZ' | 'KE'>('TZ');
-
-  const getValidationRules = () => ({
-    phoneNumber: [{ 
-      required: true, 
-      validator: PHONE_NUMBER_VALIDATOR(selectedCountry) 
-    }],
-    amount: [{ 
-      required: true, 
-      validator: AMOUNT_VALIDATOR({ 
-        currencyCode: selectedCountry === 'TZ' ? 'TZS' : 'KES' 
-      }) 
-    }]
-  });
-
-  // Rest of component...
-};
+const utcStart = startOfDay(pickerDate);   // UTC instant of midnight in `tz`
+const utcEnd = endOfDay(pickerDate);
+const zoned = parse("2026-05-15T00:00:00Z"); // TZDate; getDate() reports `tz` wall clock
 ```
 
-## 🌍 Supported Countries
-
-| Country  | Code | Phone | Mobile | Bank | Currency        |
-| -------- | ---- | ----- | ------ | ---- | --------------- |
-| Tanzania | TZ   | ✅     | ✅      | ✅    | TZS             |
-| Kenya    | KE   | ✅     | ✅      | ✅    | KES             |
-| Global   | *    | ✅     | ❌      | ❌    | 150+ currencies |
-
-## 🔧 Error Handling
-
-All validators provide clear, user-friendly error messages:
-
-```typescript
-// Phone validation errors
-"Invalid Tanzania phone number format. Please enter a valid Tanzania phone number."
-
-// Amount validation errors  
-"Amount must be at least TSh 1,000. Please enter a higher amount."
-"Negative amounts are not allowed. Please enter a positive amount."
+### `useFormatDate*()`
 
-// Account name errors
-"Invalid account name. Please enter a valid full name with at least two words."
+Reactive formatters. Re-render automatically when the user changes their timezone preference.
 
-// SWIFT code errors
-"Invalid Tanzania SWIFT code. Please enter a valid Tanzania bank SWIFT/BIC code."
+```ts
+const fmtDateTime = useFormatDateTime();
+return <span>{fmtDateTime(row.createdAt)}</span>;  // "25 MAY 2026, 02:30 PM"
 ```
 
-## 🏆 Best Practices
+Available variants:
 
-### 1. Always Specify Country Context
-```typescript
-// ✅ Good - specific country validation
-validator: PHONE_NUMBER_VALIDATOR('TZ')
+| Hook | Output |
+|---|---|
+| `useFormatDate` | `25 MAY 2026` |
+| `useFormatDateTime` | `25 MAY 2026, 02:30 PM` |
+| `useFormatDateTimeWithSeconds` | `25 MAY 2026, 02:30:45 PM` |
+| `useFormatTime` | `02:30 PM` |
 
-// ❌ Less ideal - generic validation
-validator: PHONE_NUMBER_VALIDATOR()
-```
+For non-React call sites, the imperative siblings live in [`@temboplus/frontend-core`](https://github.com/TemboPlus-Frontend/frontend-core-js):
 
-### 2. Combine with Required Rules
-```typescript
-// ✅ Good - explicit required validation
-rules: [
-  { required: true, message: 'Phone number is required' },
-  { validator: PHONE_NUMBER_VALIDATOR('TZ') }
-]
+```ts
+import { formatDateTime } from "@temboplus/frontend-core";
 
-// ✅ Also good - validator handles required
-rules: [{ required: true, validator: PHONE_NUMBER_VALIDATOR('TZ') }]
+formatDateTime(date, "Africa/Nairobi");  // "25 MAY 2026, 02:30 PM"
 ```
 
-### 3. Custom Error Messages
-```typescript
-// ✅ Good - custom business-specific messages
-validator: AMOUNT_VALIDATOR({
-  currencyCode: 'TZS',
-  min: 5000,
-  minMessage: 'Minimum transfer amount is TSh 5,000 for international transfers'
-})
-```
+## Development
 
-### 4. Normalize Return Values
-```typescript
-const onFinish = (values: any) => {
-  // Validators return normalized values
-  console.log(values.phoneNumber); // "+255712345678" (E.164 format)
-  console.log(values.amount);      // "10000.00" (normalized number)
-  console.log(values.swiftCode);   // "CORUTZTZ" (uppercase)
-};
+```bash
+make help        # list targets
+make install     # bun install
+make build       # rollup + tsc declarations
+make test        # bun test
+make publish-dry # see what would publish
+make publish     # build, test, then publish to npm
 ```
 
-## 📄 License
-
-Private package for TemboPlus applications.
-
-## 🔗 Related Packages
-
-- **[@temboplus/frontend-core](https://github.com/TemboPlus-Frontend/temboplus-frontend-core)** - Core business logic and models
+Bun handles install, test, and publish. Rollup bundles ESM + CJS (with a `"use client"` banner per output, since every hook is client-only).

package/dist/index.cjs.js

@@ -1,2 +1,16 @@
-"use strict";var n=require("./theme-provider-XqWasApp.js"),t=require("@ebay/nice-modal-react"),e=require("tslib"),r=require("react"),o=require("react-toastify"),s=require("./tembo-notify-CssdTeIP.js");function i(n){return n&&n.__esModule?n:{default:n}}require("antd"),require("./InfoCircleOutlined-pKxRobXG.js");var a=i(t);const d=t=>n.jsxRuntimeExports.jsx(a.default.Provider,{children:t.children}),m=t=>{var{showCloseButton:i=!1,showProgressBar:a=!0}=t,d=e.__rest(t,["showCloseButton","showProgressBar"]);const{colors:m,constants:l}=n.useNewTemboTheme();return r.useEffect(()=>{s.TemboNotify.init(m,l)},[m,l]),n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(o.ToastContainer,Object.assign({closeButton:i,hideProgressBar:!a},d)),n.jsxRuntimeExports.jsx("style",{children:`\n                .Toastify__toast-container {\n                    z-index: 9999;\n                }\n\n                .Toastify__toast {\n                    font-family: ${l.typography.fontFamily};\n                    line-height: 1.5;\n                    display: flex;\n                    align-items: center;\n                    overflow: hidden;\n                    margin-bottom: 1rem;\n                }\n\n                .Toastify__toast-body {\n                    padding: 0;\n                    margin: 0;\n                    display: flex;\n                    align-items: flex-start;\n                }\n\n                .Toastify__toast-icon {\n                    width: 18px;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    margin-inline-end: 6px;\n                }\n\n                .Toastify__progress-bar-container {\n                    height: 4px;\n                    background: transparent !important;\n                }\n\n                .Toastify__progress-bar {\n                    height: 4px !important;\n                    background: #000000 !important;\n                }\n\n                .Toastify__progress-bar--bg {\n                    background: transparent !important;\n                }\n\n                .Toastify__close-button {\n                    opacity: 0.5;\n                    transition: opacity 0.2s ease;\n                }\n\n                .Toastify__close-button:hover {\n                    opacity: 1;\n                }\n\n                /* Smooth entrance animation */\n                @keyframes toastSlideIn {\n                    from {\n                        transform: translateX(110%);\n                        opacity: 0;\n                    }\n                    to {\n                        transform: translateX(0);\n                        opacity: 1;\n                    }\n                }\n\n                .Toastify__toast--top-right {\n                    animation: toastSlideIn 0.3s ease-out;\n                }\n\n                /* Optional: full-width mobile behaviour */\n                @media (max-width: 480px) {\n                    .Toastify__toast-container--top-right {\n                        right: 0;\n                        left: 0;\n                        padding: 0;\n                        width: 100vw;\n                    }\n\n                    .Toastify__toast {\n                        margin-bottom: 0;\n                        border-radius: 0;\n                    }\n                    \n                    .Toastify__progress-bar {\n                        border-radius: 0;\n                    }\n                }\n            `})]})};exports.TemboUIProviders=({children:t,mode:e,antdThemeOverrides:r})=>n.jsxRuntimeExports.jsx(n.TemboThemeProvider,{mode:e,antdThemeOverrides:r,children:n.jsxRuntimeExports.jsxs(d,{children:[t,n.jsxRuntimeExports.jsx(m,{showProgressBar:!0})]})});
+"use client";
+'use strict';
+
+var useFormatDate = require('./use-format-date-BvwtJTnU.js');
+require('react');
+require('@temboplus/frontend-core');
+
+
+
+exports.useFormatDate = useFormatDate.useFormatDate;
+exports.useFormatDateTime = useFormatDate.useFormatDateTime;
+exports.useFormatDateTimeWithSeconds = useFormatDate.useFormatDateTimeWithSeconds;
+exports.useFormatTime = useFormatDate.useFormatTime;
+exports.useTimezone = useFormatDate.useTimezone;
+exports.useTimezoneDate = useFormatDate.useTimezoneDate;
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/features/dialogs/modal-provider.tsx","../src/features/notifications/toast-container.tsx","../src/providers.tsx"],"sourcesContent":[null,null,null],"names":["TemboModalProvider","props","_jsx","NiceModal","Provider","children","TemboToastContainer","_a","showCloseButton","showProgressBar","rest","__rest","colors","constants","useNewTemboTheme","useEffect","TemboNotify","init","_jsxs","_Fragment","ToastContainer","Object","assign","closeButton","hideProgressBar","typography","fontFamily","mode","antdThemeOverrides","TemboThemeProvider"],"mappings":"mUAGA,MAAMA,EAAmDC,GAC9CC,EAAAA,kBAAAA,IAACC,EAAAA,QAAUC,mBAAUH,EAAMI,WCsBhCC,EAA2DC,IAAA,IAAAC,gBAC7DA,GAAkB,EAAKC,gBACvBA,GAAkB,GAAIF,EACnBG,EAAIC,EAAAA,OAAAJ,EAHsD,CAAA,kBAAA,oBAK7D,MAAMK,OAAEA,EAAMC,UAAEA,GAAcC,qBAM9B,OAJAC,EAAAA,UAAU,KACNC,cAAYC,KAAKL,EAAQC,IAC1B,CAACD,EAAQC,IAGRK,EAAAA,kBAAAA,KAAAC,EAAAA,kBAAAA,SAAA,CAAAd,SAAA,CACIH,EAAAA,kBAAAA,IAACkB,EAAAA,eAAcC,OAAAC,OAAA,CACXC,YAAaf,EACbgB,iBAAkBf,GACdC,IAGRR,EAAAA,kBAAAA,IAAA,QAAA,CAAAG,SAAQ,iLAMeQ,EAAUY,WAAWC,0jFC1CW,EAC/DrB,WACAsB,OACAC,wBAGI1B,EAAAA,kBAAAA,IAAC2B,qBAAkB,CACfF,KAAMA,EACNC,mBAAoBA,EAAkBvB,SAEtCa,EAAAA,kBAAAA,KAAClB,EAAkB,CAAAK,SAAA,CACdA,EACDH,EAAAA,kBAAAA,IAACI,EAAmB,CAACG,iBAAe"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -1 +1 @@
-export * from "./providers.js";
+export * from "./timezone/index.js";

package/dist/index.esm.js

@@ -1,2 +1,5 @@
-import{j as n,u as t,T as o}from"./theme-provider-slJZwhTc.js";import r from"@ebay/nice-modal-react";import{__rest as a}from"tslib";import{useEffect as i}from"react";import{ToastContainer as s}from"react-toastify";import{T as e}from"./tembo-notify-By9oLCSX.js";import"antd";import"./InfoCircleOutlined-B4_-Z3H4.js";const m=t=>n.jsx(r.Provider,{children:t.children}),d=o=>{var{showCloseButton:r=!1,showProgressBar:m=!0}=o,d=a(o,["showCloseButton","showProgressBar"]);const{colors:l,constants:p}=t();return i(()=>{e.init(l,p)},[l,p]),n.jsxs(n.Fragment,{children:[n.jsx(s,Object.assign({closeButton:r,hideProgressBar:!m},d)),n.jsx("style",{children:`\n                .Toastify__toast-container {\n                    z-index: 9999;\n                }\n\n                .Toastify__toast {\n                    font-family: ${p.typography.fontFamily};\n                    line-height: 1.5;\n                    display: flex;\n                    align-items: center;\n                    overflow: hidden;\n                    margin-bottom: 1rem;\n                }\n\n                .Toastify__toast-body {\n                    padding: 0;\n                    margin: 0;\n                    display: flex;\n                    align-items: flex-start;\n                }\n\n                .Toastify__toast-icon {\n                    width: 18px;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    margin-inline-end: 6px;\n                }\n\n                .Toastify__progress-bar-container {\n                    height: 4px;\n                    background: transparent !important;\n                }\n\n                .Toastify__progress-bar {\n                    height: 4px !important;\n                    background: #000000 !important;\n                }\n\n                .Toastify__progress-bar--bg {\n                    background: transparent !important;\n                }\n\n                .Toastify__close-button {\n                    opacity: 0.5;\n                    transition: opacity 0.2s ease;\n                }\n\n                .Toastify__close-button:hover {\n                    opacity: 1;\n                }\n\n                /* Smooth entrance animation */\n                @keyframes toastSlideIn {\n                    from {\n                        transform: translateX(110%);\n                        opacity: 0;\n                    }\n                    to {\n                        transform: translateX(0);\n                        opacity: 1;\n                    }\n                }\n\n                .Toastify__toast--top-right {\n                    animation: toastSlideIn 0.3s ease-out;\n                }\n\n                /* Optional: full-width mobile behaviour */\n                @media (max-width: 480px) {\n                    .Toastify__toast-container--top-right {\n                        right: 0;\n                        left: 0;\n                        padding: 0;\n                        width: 100vw;\n                    }\n\n                    .Toastify__toast {\n                        margin-bottom: 0;\n                        border-radius: 0;\n                    }\n                    \n                    .Toastify__progress-bar {\n                        border-radius: 0;\n                    }\n                }\n            `})]})},l=({children:t,mode:r,antdThemeOverrides:a})=>n.jsx(o,{mode:r,antdThemeOverrides:a,children:n.jsxs(m,{children:[t,n.jsx(d,{showProgressBar:!0})]})});export{l as TemboUIProviders};
+"use client";
+export { b as useFormatDate, c as useFormatDateTime, d as useFormatDateTimeWithSeconds, e as useFormatTime, u as useTimezone, a as useTimezoneDate } from './use-format-date--9gcnP7_.js';
+import 'react';
+import '@temboplus/frontend-core';
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/features/dialogs/modal-provider.tsx","../src/features/notifications/toast-container.tsx","../src/providers.tsx"],"sourcesContent":[null,null,null],"names":["TemboModalProvider","props","_jsx","NiceModal","Provider","children","TemboToastContainer","_a","showCloseButton","showProgressBar","rest","__rest","colors","constants","useNewTemboTheme","useEffect","TemboNotify","init","_jsxs","_Fragment","ToastContainer","Object","assign","closeButton","hideProgressBar","typography","fontFamily","TemboUIProviders","mode","antdThemeOverrides","TemboThemeProvider"],"mappings":"2TAGA,MAAMA,EAAmDC,GAC9CC,EAAAA,IAACC,EAAUC,mBAAUH,EAAMI,WCsBhCC,EAA2DC,IAAA,IAAAC,gBAC7DA,GAAkB,EAAKC,gBACvBA,GAAkB,GAAIF,EACnBG,EAAIC,EAAAJ,EAHsD,CAAA,kBAAA,oBAK7D,MAAMK,OAAEA,EAAMC,UAAEA,GAAcC,IAM9B,OAJAC,EAAU,KACNC,EAAYC,KAAKL,EAAQC,IAC1B,CAACD,EAAQC,IAGRK,EAAAA,KAAAC,EAAAA,SAAA,CAAAd,SAAA,CACIH,EAAAA,IAACkB,EAAcC,OAAAC,OAAA,CACXC,YAAaf,EACbgB,iBAAkBf,GACdC,IAGRR,EAAAA,IAAA,QAAA,CAAAG,SAAQ,iLAMeQ,EAAUY,WAAWC,iiFC1C3CC,EAAsD,EAC/DtB,WACAuB,OACAC,wBAGI3B,EAAAA,IAAC4B,EAAkB,CACfF,KAAMA,EACNC,mBAAoBA,EAAkBxB,SAEtCa,EAAAA,KAAClB,EAAkB,CAAAK,SAAA,CACdA,EACDH,EAAAA,IAACI,EAAmB,CAACG,iBAAe"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/timezone/index.cjs.js

@@ -0,0 +1,16 @@
+"use client";
+'use strict';
+
+var useFormatDate = require('../use-format-date-BvwtJTnU.js');
+require('react');
+require('@temboplus/frontend-core');
+
+
+
+exports.useFormatDate = useFormatDate.useFormatDate;
+exports.useFormatDateTime = useFormatDate.useFormatDateTime;
+exports.useFormatDateTimeWithSeconds = useFormatDate.useFormatDateTimeWithSeconds;
+exports.useFormatTime = useFormatDate.useFormatTime;
+exports.useTimezone = useFormatDate.useTimezone;
+exports.useTimezoneDate = useFormatDate.useTimezoneDate;
+//# sourceMappingURL=index.cjs.js.map

package/dist/{notifications → timezone}/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/timezone/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./use-timezone.js";
+export * from "./use-timezone-date.js";
+export * from "./use-format-date.js";

package/dist/timezone/index.js

@@ -0,0 +1,5 @@
+"use client";
+export { b as useFormatDate, c as useFormatDateTime, d as useFormatDateTimeWithSeconds, e as useFormatTime, u as useTimezone, a as useTimezoneDate } from '../use-format-date--9gcnP7_.js';
+import 'react';
+import '@temboplus/frontend-core';
+//# sourceMappingURL=index.js.map

package/dist/{notifications → timezone}/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/timezone/use-format-date.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Centralised, reactive date-formatter hooks. Each returns a function
+ * `(date: Date) => string` bound to the user's current timezone
+ * preference. Consumers re-render automatically when the preference
+ * changes in Settings.
+ *
+ * For non-React call sites, import the imperative siblings directly
+ * from `@temboplus/frontend-core`.
+ */
+type Options = {
+    storageKey: string;
+    defaultTimezone?: string;
+};
+/** `25 MAY 2026` */
+export declare function useFormatDate(options: Options): (date: Date) => string;
+/** `25 MAY 2026, 02:30 PM` */
+export declare function useFormatDateTime(options: Options): (date: Date) => string;
+/** `25 MAY 2026, 02:30:45 PM` — audit rows where seconds matter. */
+export declare function useFormatDateTimeWithSeconds(options: Options): (date: Date) => string;
+/** `02:30 PM` */
+export declare function useFormatTime(options: Options): (date: Date) => string;
+export {};

package/dist/timezone/use-timezone-date.d.ts

@@ -0,0 +1,17 @@
+import { toUtcInstant } from "@temboplus/frontend-core";
+/**
+ * Boundary helpers bound to the user's current timezone preference.
+ * Re-memoises when the preference changes so date pickers / range
+ * builders pick up the new offset automatically.
+ */
+export declare function useTimezoneDate(options: {
+    storageKey: string;
+    defaultTimezone?: string;
+}): {
+    tz: string;
+    startOfDay: (date: Date) => Date;
+    endOfDay: (date: Date) => Date;
+    parse: (iso: string) => import("@date-fns/tz").TZDate;
+    sameDay: (a: Date, b: Date) => boolean;
+    toUtc: typeof toUtcInstant;
+};

package/dist/timezone/use-timezone.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Hook over the user's timezone preference, persisted to localStorage.
+ *
+ * Each app supplies its own `storageKey` (e.g. `"afloat.timezone"`,
+ * `"dashboard.timezone"`) so preferences don't collide across products
+ * sharing the same browser origin.
+ *
+ * Initial render returns `defaultTimezone` (or {@link DEFAULT_TIMEZONE});
+ * the persisted value is rehydrated on mount to avoid SSR mismatch.
+ *
+ * When backend-stored user preferences arrive later, the source of truth
+ * inside this hook can swap to a hybrid local+remote scheme without
+ * consumers having to touch their call sites — the `[tz, setTz]` shape
+ * stays stable.
+ */
+export declare function useTimezone(options: {
+    storageKey: string;
+    defaultTimezone?: string;
+}): readonly [string, (next: string) => void];