@konstructio/ui 0.1.7 → 0.1.8

package/dist/{constants-YCGllWdf.js → constants-Cw00eFTQ.js}

@@ -1,12 +1,12 @@
 import { t } from "./utils-DnIJruo0.js";
-var o = (e) => ({
-  root: t("w-fit", e?.root),
+var a = (e, r = !1) => ({
+  root: t(r ? "w-full" : "w-fit", e?.root),
   months: t("flex", e?.months),
-  month: t("flex flex-col w-[259px]", e?.month),
+  month: t("flex flex-col", r ? "w-full" : "w-[259px]", e?.month),
   month_caption: "hidden",
   nav: "hidden",
-  day_button: t("size-7.5", "flex", "items-center", "justify-center", "text-sm", "font-semibold", "cursor-pointer", "rounded-full", "hover:bg-slate-100", "dark:hover:bg-metal-700", "transition-colors", "text-slate-700", "dark:text-white", "focus:outline-none", "focus-visible:outline-none", "focus-visible:ring-1", "focus-visible:ring-aurora-500", e?.dayButton),
-  day: t("p-0", "w-[37px]", "h-9.5", "text-center", "align-middle", e?.day),
+  day_button: t("size-7.5", "mx-auto", "flex", "items-center", "justify-center", "text-sm", "font-semibold", "cursor-pointer", "rounded-full", "hover:bg-slate-100", "dark:hover:bg-metal-700", "transition-colors", "text-slate-700", "dark:text-white", "focus:outline-none", "focus-visible:outline-none", "focus-visible:ring-1", "focus-visible:ring-aurora-500", e?.dayButton),
+  day: t("p-0", !r && "w-[37px]", "h-9.5", "text-center", "align-middle", e?.day),
   selected: t("[&>button]:bg-blue-600", "[&>button]:text-white", "[&>button]:hover:bg-blue-700", "dark:[&>button]:bg-aurora-500", "dark:[&>button]:hover:bg-aurora-500", "dark:[&>button]:text-metal-900", e?.selected),
   range_start: t("drp-range-start", "[&>button]:!bg-blue-600", "[&>button]:!text-white", "[&>button]:!rounded-full", "[&>button]:hover:!bg-blue-700", "[&>button]:relative", "[&>button]:z-10", "dark:[&>button]:!bg-aurora-500", "dark:[&>button]:hover:!bg-aurora-500", "dark:[&>button]:!text-metal-900", "!relative", "before:absolute", "before:top-1", "before:bottom-1", "before:left-1/2", "before:right-0", "before:!bg-blue-50", "dark:before:!bg-aurora-500/10", "last:before:!hidden", e?.rangeStart),
   range_end: t("drp-range-end", "[&>button]:!bg-blue-600", "[&>button]:!text-white", "[&>button]:!rounded-full", "[&>button]:hover:!bg-blue-700", "[&>button]:relative", "[&>button]:z-10", "dark:[&>button]:!bg-aurora-500", "dark:[&>button]:hover:!bg-aurora-500", "dark:[&>button]:!text-metal-900", "!relative", "before:absolute", "before:top-1", "before:bottom-1", "before:left-0", "before:right-1/2", "before:!bg-blue-50", "dark:before:!bg-aurora-500/10", "first:before:!hidden", e?.rangeEnd),
@@ -14,18 +14,18 @@ var o = (e) => ({
   table: t("w-full border-collapse table-fixed", e?.table),
   weekdays: t("text-slate-500", "dark:text-metal-400", e?.weekdays),
   weeks: t("[&>tr>td]:p-0", "[&>tr]:h-9.5", e?.weeks),
-  weekday: t("font-semibold", "text-xs", "uppercase", "text-slate-500", "dark:text-metal-400", "pb-4", "w-[37px]", e?.weekday),
+  weekday: t("font-semibold", "text-xs", "uppercase", "text-slate-500", "dark:text-metal-400", "pb-4", !r && "w-[37px]", e?.weekday),
   today: t("[&>button]:text-blue-600", "dark:[&>button]:text-aurora-500", e?.today),
   month_grid: "w-full",
   disabled: t("[&>button]:opacity-50", "[&>button]:cursor-not-allowed", e?.disabled),
   outside: t("[&>button]:!text-slate-400", "dark:[&>button]:!text-metal-500", e?.outside)
-}), a = 259, b = 32, n = 2592e6, l = 56, d = 28, u = 38;
+}), b = 259, n = 32, l = 2592e6, u = 56, d = 28, f = 38;
 export {
   d as a,
-  a as i,
-  l as n,
-  u as o,
-  n as r,
-  o as s,
-  b as t
+  b as i,
+  u as n,
+  f as o,
+  l as r,
+  a as s,
+  n as t
 };

package/dist/lib/components/DateRangePicker/DateRangePicker.types.d.ts

@@ -89,6 +89,12 @@ export type Props = VariantProps<typeof dateRangePickerVariants> & {
      */
     navigationMode?: 'independent' | 'together';
     numberOfMonths?: 1 | 2;
+    /**
+     * Stretch to the container instead of sizing to the content: the date inputs
+     * share its width and a single month spans it, for narrow layouts such as a
+     * phone sheet (default: false)
+     */
+    fluid?: boolean;
     dateDisplayFormat?: DateDisplayFormat;
     /** Aria label for the calendar container (default: 'Date range picker calendar') */
     ariaLabelCalendar?: string;

package/dist/lib/components/DateRangePicker/components/CalendarPanel/components/CalendarMonth/CalendarMonth.types.d.ts

@@ -2,6 +2,8 @@ import { DateRange, Matcher } from 'react-day-picker';
 import { DayPickerClassNames } from '../../CalendarPanel.types';
 export type Props = {
     month: Date;
+    /** Width in pixels; a fluid calendar passes the one it measured */
+    monthWidth?: number;
     range: {
         from?: Date;
         to?: Date;

package/dist/lib/components/DateRangePicker/components/CalendarPanel/components/TogetherModeCalendar/TogetherModeCalendar.types.d.ts

@@ -4,6 +4,8 @@ import { UseTogetherCarouselProps } from '../../hooks';
 export type Props = {
     className?: string;
     calendarWidth?: number;
+    /** The month spans the container's width instead of its fixed one */
+    fluid?: boolean;
     ariaLabelCalendar?: string;
     ariaLabelPrevMonth?: string;
     ariaLabelNextMonth?: string;

package/dist/lib/components/DateRangePicker/components/CalendarPanel/constants/dayPickerClassNames.d.ts

@@ -1,5 +1,5 @@
 import { DayPickerClassNames } from '../CalendarPanel.types';
-export declare const createDayPickerClassNames: (custom?: DayPickerClassNames) => {
+export declare const createDayPickerClassNames: (custom?: DayPickerClassNames, fluid?: boolean) => {
     root: string;
     months: string;
     month: string;

package/dist/lib/components/DateRangePicker/components/CalendarPanel/hooks/useTogetherCarousel.d.ts

@@ -6,10 +6,12 @@ export type UseTogetherCarouselProps = {
     canNavigateNext: boolean;
     navigationMode: 'together' | 'independent';
     numberOfMonths?: 1 | 2;
+    /** Width of one month in pixels; a fluid calendar passes the one it measured */
+    monthWidth?: number;
     navigatePrevMonth: () => void;
     navigateNextMonth: () => void;
 };
-export declare const useTogetherCarousel: ({ displayedMonths, animationDuration, disabled, canNavigatePrev, canNavigateNext, navigationMode, numberOfMonths, navigatePrevMonth, navigateNextMonth, }: UseTogetherCarouselProps) => {
+export declare const useTogetherCarousel: ({ displayedMonths, animationDuration, disabled, canNavigatePrev, canNavigateNext, navigationMode, numberOfMonths, monthWidth, navigatePrevMonth, navigateNextMonth, }: UseTogetherCarouselProps) => {
     carouselRef: import('react').RefObject<HTMLDivElement | null>;
     isAnimating: boolean;
     enableTransition: boolean;

package/dist/lib/components/DateRangePicker/contexts/date-range-picker/date-range-picker.context.d.ts

@@ -75,6 +75,8 @@ export type DateRangePickerContextValue = {
     /** Navigation mode: 'together' or 'independent' */
     navigationMode: 'together' | 'independent';
     numberOfMonths: 1 | 2;
+    /** Whether the picker stretches to its container instead of sizing to the content */
+    fluid: boolean;
     dateDisplayFormat: DateDisplayFormat;
     /** Whether the inputs and calendar only show for the manual-selection preset */
     revealCalendarOnCustom: boolean;

package/dist/lib/components/DateRangePicker/contexts/date-range-picker/date-range-picker.types.d.ts

@@ -15,6 +15,7 @@ export type Props = PropsWithChildren<{
     name?: string;
     navigationMode?: 'together' | 'independent';
     numberOfMonths?: 1 | 2;
+    fluid?: boolean;
     presets?: DateRangePresetOption[];
     revealCalendarOnCustom?: boolean;
     showOutsideDays?: boolean;

package/dist/lib/components/Filter/components/CustomDateRangeFilterDropdown/components/MobilePresets/MobilePresets.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './MobilePresets.types';
+export declare const MobilePresets: FC<Props>;

package/dist/lib/components/Filter/components/CustomDateRangeFilterDropdown/components/MobilePresets/MobilePresets.types.d.ts

@@ -0,0 +1,3 @@
+export type Props = {
+    onCustomRange: () => void;
+};

package/dist/lib/components/Filter/components/CustomDateRangeFilterDropdown/components/PanelActions/PanelActions.d.ts

@@ -1,2 +1,3 @@
 import { FC } from 'react';
-export declare const PanelActions: FC;
+import { Props } from './PanelActions.types';
+export declare const PanelActions: FC<Props>;

package/dist/lib/components/Filter/components/CustomDateRangeFilterDropdown/components/PanelActions/PanelActions.types.d.ts

@@ -0,0 +1,4 @@
+export type Props = {
+    /** Full-width, full-height buttons for the phone sheet footer */
+    isSheet?: boolean;
+};

package/dist/lib/components/Filter/components/CustomDateRangeFilterDropdown/components/Picker/Picker.d.ts

@@ -1,2 +1,3 @@
 import { FC } from 'react';
-export declare const Picker: FC;
+import { Props } from './Picker.types';
+export declare const Picker: FC<Props>;

package/dist/lib/components/Filter/components/CustomDateRangeFilterDropdown/components/Picker/Picker.types.d.ts

@@ -0,0 +1,4 @@
+export type Props = {
+    /** Calendar only, for the second step of the phone sheet */
+    isSheet?: boolean;
+};

package/dist/lib/components/Filter/components/CustomDateRangeFilterDropdown/contexts/custom-date-range-filter-dropdown/custom-date-range-filter-dropdown.types.d.ts

@@ -18,6 +18,8 @@ export type State = Config & {
     selectedRange?: DateRange;
     showsCalendar: boolean;
     onApply: () => void;
+    /** Applies a preset's window in one go and closes, as a tap on a phone does */
+    onApplyPreset: (preset: string, range: DateRange) => void;
     onClear: () => void;
     onOpenChange: (open: boolean) => void;
     onPresetChange: (preset: string | null, range: DateRange) => void;

package/dist/lib/components/Filter/components/FilterDropdown/FilterDropdown.types.d.ts

@@ -5,5 +5,13 @@ export type Props = PropsWithChildren & {
     triggerClassName?: string;
     position?: 'left' | 'right';
     contentClassName?: string;
+    /** Heading of the phone sheet used below md */
+    sheetTitle?: ReactNode;
+    /** Step shown by the phone sheet; changing it slides the content */
+    sheetStep?: number;
+    /** What the previous sheet step shows now, for the back preview */
+    sheetPreviousContent?: ReactNode;
+    /** Goes back one step in the phone sheet */
+    onSheetBack?: () => void;
     onOpenChange: (open: boolean) => void;
 };

package/dist/lib/components/Filter/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useFilterDropdownSync';
 export * from './useLocale';
+export { FILTER_SHEET_QUERY, useFilterSheet } from './useFilterSheet';

package/dist/lib/components/Filter/hooks/useFilterSheet.d.ts

@@ -0,0 +1,2 @@
+export declare const FILTER_SHEET_QUERY = "(max-width: 767.98px)";
+export declare const useFilterSheet: () => boolean;

package/dist/lib/components/Sheet/Sheet.types.d.ts

@@ -42,6 +42,18 @@ export type Props = PropsWithChildren<{
      * height to the new content.
      */
     step?: number;
+    /**
+     * Fade the bottom edge while the panel grows to a taller step, so the
+     * incoming rows come in behind a soft edge instead of being cut by it
+     * (default: false, the edge cuts).
+     */
+    softReveal?: boolean;
+    /**
+     * What the previous step shows right now. The back gesture and control
+     * preview that step with its last render; pass this when its content can
+     * change while a later step is open.
+     */
+    previousContent?: ReactNode;
     /** Additional CSS classes for the panel */
     className?: string;
     /** Additional CSS classes for the scrolling body */

package/dist/lib/components/Sheet/components/SheetStep/SheetStep.d.ts

@@ -1,8 +1,26 @@
-import { FC } from 'react';
-import { Props } from './SheetStep.types';
+import { PanInfo } from 'motion/react';
 /**
  * One step of a sheet's content. It owns its horizontal offset so a step that
  * was swiped away keeps that offset while it unmounts and the next step mounts
  * in place.
+ *
+ * The ref is forwarded because AnimatePresence's popLayout attaches one to
+ * take the leaving step out of the flow; without it the step keeps its space
+ * while it slides out and the sheet grows to the height of both steps.
  */
-export declare const SheetStep: FC<Props>;
+export declare const SheetStep: import('react').ForwardRefExoticComponent<{
+    step: number;
+    direction: number;
+    animated: boolean;
+    canSwipeBack: boolean;
+    isArmed: (info: PanInfo) => boolean;
+    onBackStart: () => void;
+    onBackMove: (offset: number) => void;
+    onBackEnd: (info: PanInfo) => import('./SheetStep.types').BackOutcome;
+    onMount: (height: number) => void;
+    commitSignal: number;
+    onBackCommit: () => void;
+    onBackCancel: () => void;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/lib/components/VirtualizedTable/constants/responsive.d.ts

@@ -10,3 +10,4 @@ export type ResponsiveEdgeClasses = {
 export declare const BORDER_EDGE_CLASSES: ResponsiveEdgeClasses;
 export declare const ROUNDED_TOP_EDGE_CLASSES: ResponsiveEdgeClasses;
 export declare const ROUNDED_BOTTOM_EDGE_CLASSES: ResponsiveEdgeClasses;
+export declare const MOBILE_FILTER_QUERY = "(max-width: 767.98px)";

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,7 +102,7 @@
     "google-libphonenumber": "^3.2.48",
     "i18n-iso-countries": "^7.14.0",
     "js-cookie": "^3.0.8",
-    "lucide-react": "^1.68.0",
+    "lucide-react": "^1.71.0",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^10.0.2",
     "react-feather": "^2.0.10",
@@ -111,7 +111,7 @@
     "tailwind-merge": "^3.7.0"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.105",
+    "@tanstack/react-query": "^5.107",
     "@types/react": "*",
     "@types/react-dom": "*",
     "motion": "^14",
@@ -146,22 +146,22 @@
   "devDependencies": {
     "@faker-js/faker": "^10.6.0",
     "@rollup/plugin-alias": "^6.0.1",
-    "@storybook/addon-docs": "^10.6.5",
-    "@storybook/addon-links": "^10.6.5",
-    "@storybook/react-vite": "^10.6.5",
-    "@tailwindcss/vite": "^4.3.4",
-    "@tanstack/react-query": "^5.105.3",
+    "@storybook/addon-docs": "^10.6.7",
+    "@storybook/addon-links": "^10.6.7",
+    "@storybook/react-vite": "^10.6.7",
+    "@tailwindcss/vite": "^4.3.5",
+    "@tanstack/react-query": "^5.107.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
-    "@testing-library/user-event": "^14.6.8",
+    "@testing-library/user-event": "^14.6.9",
     "@types/google-libphonenumber": "^7.4.31",
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.27",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.72.1",
-    "@typescript-eslint/parser": "^8.72.1",
+    "@typescript-eslint/eslint-plugin": "^8.72.2",
+    "@typescript-eslint/parser": "^8.72.2",
     "@vitejs/plugin-react": "^6.2.1",
     "@vitest/coverage-v8": "^5.1.0",
     "autoprefixer": "^10.6.2",
@@ -169,22 +169,22 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.7",
-    "eslint-plugin-storybook": "^10.6.5",
+    "eslint-plugin-storybook": "^10.6.7",
     "eslint-plugin-vitest": "^0.5.4",
-    "glob": "^14.0.3",
+    "glob": "^14.0.4",
     "husky": "^9.1.7",
     "jest-axe": "^11.0.0",
-    "jsdom": "^30.1.3",
+    "jsdom": "^31.0.0",
     "lodash": "^4.18.1",
-    "motion": "^14.9.1",
+    "motion": "^14.12.0",
     "postcss": "^8.5.32",
     "prettier": "^3.9.10",
     "rimraf": "^6.1.4",
-    "storybook": "^10.6.5",
-    "tailwindcss": "^4.3.4",
+    "storybook": "^10.6.7",
+    "tailwindcss": "^4.3.5",
     "ts-node": "^10.9.2",
     "typescript": "^6.0.3",
-    "vite": "^8.3.5",
+    "vite": "^8.3.7",
     "vite-plugin-dts": "^5.1.2",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^5.2.0",