@oslokommune/punkt-react 16.9.0 → 16.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/index.d.ts +23 -23
  3. package/dist/shared-types/aria.d.ts +65 -0
  4. package/dist/shared-types/booleanish.d.ts +13 -0
  5. package/dist/shared-types/calendar.d.ts +41 -0
  6. package/dist/shared-types/combobox.d.ts +34 -0
  7. package/dist/shared-types/datepicker.d.ts +46 -0
  8. package/dist/shared-types/form.d.ts +16 -0
  9. package/dist/shared-types/header.d.ts +88 -0
  10. package/dist/shared-types/heading.d.ts +9 -0
  11. package/dist/shared-types/index.d.ts +17 -0
  12. package/dist/shared-types/layout.d.ts +26 -0
  13. package/dist/shared-types/progressbar.d.ts +5 -0
  14. package/dist/shared-types/size.d.ts +18 -0
  15. package/dist/shared-types/skin.d.ts +24 -0
  16. package/dist/shared-types/timepicker.d.ts +20 -0
  17. package/dist/shared-utils/calendar/calendar-grid.d.ts +16 -0
  18. package/dist/shared-utils/calendar/date-validation.d.ts +22 -0
  19. package/dist/shared-utils/calendar/index.d.ts +10 -0
  20. package/dist/shared-utils/calendar/keyboard-navigation.d.ts +16 -0
  21. package/dist/shared-utils/calendar/selection-manager.d.ts +30 -0
  22. package/dist/shared-utils/combobox/index.d.ts +10 -0
  23. package/dist/shared-utils/combobox/input-utils.d.ts +38 -0
  24. package/dist/shared-utils/combobox/keyboard-navigation.d.ts +39 -0
  25. package/dist/shared-utils/combobox/option-utils.d.ts +50 -0
  26. package/dist/shared-utils/combobox/selection-manager.d.ts +71 -0
  27. package/dist/shared-utils/combobox/typeahead.d.ts +24 -0
  28. package/dist/shared-utils/date-utils.d.ts +138 -0
  29. package/dist/shared-utils/datepicker-utils.d.ts +73 -0
  30. package/dist/shared-utils/device-utils.d.ts +10 -0
  31. package/dist/shared-utils/timepicker/index.d.ts +6 -0
  32. package/dist/shared-utils/timepicker/options.d.ts +19 -0
  33. package/dist/shared-utils/timepicker/stepper.d.ts +20 -0
  34. package/dist/shared-utils/timepicker/time-utils.d.ts +19 -0
  35. package/dist/shared-utils/utils.d.ts +16 -0
  36. package/dist/shared-utils/value-utils.d.ts +17 -0
  37. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [16.9.1](https://github.com/oslokommune/punkt/compare/16.9.0...16.9.1) (2026-04-22)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ * Fikser opp i bygging og DTS-generering (#3434).
18
+
19
+
20
+ ### Chores
21
+ Ingen
22
+
23
+ ---
24
+
25
+
8
26
  ## [16.9.0](https://github.com/oslokommune/punkt/compare/16.8.3...16.9.0) (2026-04-21)
9
27
 
10
28
  ### ⚠ BREAKING CHANGES
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { AnchorHTMLAttributes } from 'react';
2
- import { Booleanish } from '../../../../../shared-types';
2
+ import { Booleanish } from './shared-types';
3
3
  import { ButtonHTMLAttributes } from 'react';
4
4
  import { ChangeEvent } from 'react';
5
5
  import { ChangeEventHandler } from 'react';
@@ -9,13 +9,13 @@ import { FocusEvent as FocusEvent_2 } from 'react';
9
9
  import { ForwardRefExoticComponent } from 'react';
10
10
  import { HTMLAttributes } from 'react';
11
11
  import { HTMLProps } from 'react';
12
- import { IDatepickerStrings } from '../../../../../shared-types/datepicker';
12
+ import { IDatepickerStrings } from './shared-types/datepicker';
13
13
  import { InputHTMLAttributes } from 'react';
14
- import { IPktComboboxOption } from '../../../../../shared-types/combobox';
14
+ import { IPktComboboxOption } from './shared-types/combobox';
15
15
  import { IPktConsent as IPktConsent_2 } from '@oslokommune/punkt-elements';
16
16
  import { IPktHeading as IPktHeading_2 } from '@oslokommune/punkt-elements';
17
17
  import { IPktLoader as IPktLoader_2 } from '@oslokommune/punkt-elements';
18
- import { ITimepickerStrings } from '../../../../../shared-types/timepicker';
18
+ import { ITimepickerStrings } from './shared-types/timepicker';
19
19
  import { JSX as JSX_2 } from 'react/jsx-runtime';
20
20
  import { LegacyRef } from 'react';
21
21
  import { LinkHTMLAttributes } from 'react';
@@ -27,26 +27,26 @@ import { RefAttributes } from 'react';
27
27
  import { RefObject } from 'react';
28
28
  import { SelectHTMLAttributes } from 'react';
29
29
  import { SyntheticEvent } from 'react';
30
- import { TAccordionSkin } from '../../../../../shared-types';
31
- import { TAlertRole } from '../../../../../shared-types';
32
- import { TAlertSkin } from '../../../../../shared-types';
33
- import { TAriaLive } from '../../../../../shared-types';
34
- import { TCardSkin } from '../../../../../shared-types';
30
+ import { TAccordionSkin } from './shared-types';
31
+ import { TAlertRole } from './shared-types';
32
+ import { TAlertSkin } from './shared-types';
33
+ import { TAriaLive } from './shared-types';
34
+ import { TCardSkin } from './shared-types';
35
35
  import { TextareaHTMLAttributes } from 'react';
36
- import { THeaderMenu } from '../../../../../shared-types';
37
- import { THeaderPosition } from '../../../../../shared-types';
38
- import { THeaderScrollBehavior } from '../../../../../shared-types';
39
- import { TLayout } from '../../../../../shared-types';
40
- import { TLogOutButtonPlacement } from '../../../../../shared-types';
41
- import { TMessageboxSkin } from '../../../../../shared-types';
42
- import { TPktComboboxDisplayValue } from '../../../../../shared-types/combobox';
43
- import { TPktComboboxTagPlacement } from '../../../../../shared-types/combobox';
44
- import { TProgressbarRole } from '../../../../../shared-types';
45
- import { TProgressbarSkin } from '../../../../../shared-types';
46
- import { TProgressbarStatusPlacement } from '../../../../../shared-types';
47
- import { TProgressbarStatusType } from '../../../../../shared-types';
48
- import { TProgressbarTitlePosition } from '../../../../../shared-types';
49
- import { TSlotMenuVariant } from '../../../../../shared-types';
36
+ import { THeaderMenu } from './shared-types';
37
+ import { THeaderPosition } from './shared-types';
38
+ import { THeaderScrollBehavior } from './shared-types';
39
+ import { TLayout } from './shared-types';
40
+ import { TLogOutButtonPlacement } from './shared-types';
41
+ import { TMessageboxSkin } from './shared-types';
42
+ import { TPktComboboxDisplayValue } from './shared-types/combobox';
43
+ import { TPktComboboxTagPlacement } from './shared-types/combobox';
44
+ import { TProgressbarRole } from './shared-types';
45
+ import { TProgressbarSkin } from './shared-types';
46
+ import { TProgressbarStatusPlacement } from './shared-types';
47
+ import { TProgressbarStatusType } from './shared-types';
48
+ import { TProgressbarTitlePosition } from './shared-types';
49
+ import { TSlotMenuVariant } from './shared-types';
50
50
 
51
51
  declare interface BasePktTagProps {
52
52
  skin?: 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray';
@@ -0,0 +1,65 @@
1
+ /**
2
+ * aria.ts
3
+ *
4
+ * Type definitions for ARIA attributes and roles.
5
+ * These follow the WAI-ARIA specification and are used across all Punkt components.
6
+ */
7
+ export type TAriaBoolean = boolean | 'true' | 'false';
8
+ export type TAriaBooleanMixed = TAriaBoolean | 'mixed';
9
+ export type TAriaCurrent = TAriaBoolean | 'page' | 'step' | 'location' | 'date' | 'time';
10
+ export type TAriaHasPopup = TAriaBoolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
11
+ export type TAriaInvalid = TAriaBoolean | 'grammar' | 'spelling';
12
+ export type TAriaLive = 'off' | 'polite' | 'assertive';
13
+ export type TAriaRelevant = 'additions' | 'removals' | 'text' | 'all';
14
+ export type TAriaSort = 'none' | 'ascending' | 'descending' | 'other';
15
+ export type TAriaAutoComplete = 'none' | 'inline' | 'list' | 'both';
16
+ export type TAriaOrientation = 'horizontal' | 'vertical';
17
+ export interface IAriaAttributes {
18
+ 'aria-activedescendant'?: string;
19
+ 'aria-controls'?: string;
20
+ 'aria-describedby'?: string;
21
+ 'aria-details'?: string;
22
+ 'aria-errormessage'?: string;
23
+ 'aria-flowto'?: string;
24
+ 'aria-label'?: string;
25
+ 'aria-labelledby'?: string;
26
+ 'aria-owns'?: string;
27
+ 'aria-roledescription'?: string;
28
+ 'aria-autocomplete'?: TAriaAutoComplete;
29
+ 'aria-checked'?: TAriaBooleanMixed;
30
+ 'aria-current'?: TAriaCurrent;
31
+ 'aria-disabled'?: TAriaBoolean;
32
+ 'aria-expanded'?: TAriaBoolean;
33
+ 'aria-haspopup'?: TAriaHasPopup;
34
+ 'aria-hidden'?: TAriaBoolean;
35
+ 'aria-invalid'?: TAriaInvalid;
36
+ 'aria-keyshortcuts'?: string;
37
+ 'aria-level'?: number;
38
+ 'aria-modal'?: TAriaBoolean;
39
+ 'aria-multiline'?: TAriaBoolean;
40
+ 'aria-multiselectable'?: TAriaBoolean;
41
+ 'aria-orientation'?: TAriaOrientation;
42
+ 'aria-placeholder'?: string;
43
+ 'aria-pressed'?: TAriaBooleanMixed;
44
+ 'aria-readonly'?: TAriaBoolean;
45
+ 'aria-required'?: TAriaBoolean;
46
+ 'aria-selected'?: TAriaBoolean;
47
+ 'aria-sort'?: TAriaSort;
48
+ 'aria-atomic'?: TAriaBoolean;
49
+ 'aria-busy'?: TAriaBoolean;
50
+ 'aria-live'?: TAriaLive;
51
+ 'aria-relevant'?: TAriaRelevant | string;
52
+ 'aria-colcount'?: number;
53
+ 'aria-colindex'?: number;
54
+ 'aria-colspan'?: number;
55
+ 'aria-rowcount'?: number;
56
+ 'aria-rowindex'?: number;
57
+ 'aria-rowspan'?: number;
58
+ 'aria-posinset'?: number;
59
+ 'aria-setsize'?: number;
60
+ 'aria-valuemax'?: number;
61
+ 'aria-valuemin'?: number;
62
+ 'aria-valuenow'?: number;
63
+ 'aria-valuetext'?: string;
64
+ }
65
+ export type TAlertRole = 'alert' | 'status';
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Booleanish type that accepts boolean or string "true"/"false"
3
+ * This allows attributes to be set as strings in HTML
4
+ */
5
+ export type Booleanish = boolean | 'true' | 'false';
6
+ /**
7
+ * Converter for booleanish attributes
8
+ * Converts string "true"/"false" to boolean values
9
+ */
10
+ export declare const booleanishConverter: {
11
+ fromAttribute(value: string | boolean | null): boolean;
12
+ toAttribute(value: boolean): string | null;
13
+ };
@@ -0,0 +1,41 @@
1
+ /**
2
+ * calendar.ts
3
+ *
4
+ * Type definitions for the calendar component.
5
+ * Used by both Elements and React calendar implementations
6
+ * and by the shared calendar helper functions.
7
+ */
8
+ export interface IDateConstraints {
9
+ earliest: string | null;
10
+ latest: string | null;
11
+ excludedates: Date[];
12
+ excludeweekdays: string[];
13
+ }
14
+ export interface ICalendarGridDimensions {
15
+ firstDayOfMonth: Date;
16
+ lastDayOfMonth: Date;
17
+ startingDay: number;
18
+ numDays: number;
19
+ numRows: number;
20
+ numDaysPrevMonth: number;
21
+ initialWeek: number;
22
+ }
23
+ export interface IGridCellPosition {
24
+ rowIndex: number;
25
+ colIndex: number;
26
+ }
27
+ export type TDateRangeMap = {
28
+ [key: string]: boolean;
29
+ };
30
+ export interface ISelectionState {
31
+ selected: string[];
32
+ _selected: Date[];
33
+ inRange: TDateRangeMap;
34
+ }
35
+ export interface ISelectionOptions {
36
+ multiple: boolean;
37
+ maxMultiple: number;
38
+ range: boolean;
39
+ excludedates: Date[];
40
+ excludeweekdays: string[];
41
+ }
@@ -0,0 +1,34 @@
1
+ /**
2
+ * combobox.ts
3
+ *
4
+ * Type definitions for the combobox and listbox components.
5
+ * Used by both Elements and React implementations
6
+ * and by the shared combobox helper functions.
7
+ */
8
+ /**
9
+ * Tag skin colors available for combobox option tags.
10
+ * Matches the TTagSkin values from the tag component.
11
+ */
12
+ export type TPktComboboxTagSkin = 'blue' | 'blue-dark' | 'blue-light' | 'green' | 'red' | 'yellow' | 'beige' | 'gray' | 'grey';
13
+ /**
14
+ * Represents a single option in a combobox or listbox.
15
+ */
16
+ export interface IPktComboboxOption {
17
+ description?: string;
18
+ disabled?: boolean;
19
+ fulltext?: string;
20
+ label?: string;
21
+ prefix?: string;
22
+ selected?: boolean;
23
+ tagSkinColor?: TPktComboboxTagSkin;
24
+ userAdded?: boolean;
25
+ value: string;
26
+ }
27
+ /**
28
+ * How the selected value is displayed in the combobox input.
29
+ */
30
+ export type TPktComboboxDisplayValue = 'label' | 'value' | 'prefixAndValue';
31
+ /**
32
+ * Placement of selected value tags in multiple selection mode.
33
+ */
34
+ export type TPktComboboxTagPlacement = 'inside' | 'outside';
@@ -0,0 +1,46 @@
1
+ /**
2
+ * Internationalization strings for the datepicker component family.
3
+ * Shared between Elements and React packages.
4
+ */
5
+ export interface IDatepickerStrings {
6
+ /** Calendar-related strings */
7
+ calendar?: {
8
+ /** Alt text for calendar button */
9
+ buttonAltText?: string;
10
+ };
11
+ /** Generic UI strings (used in range datepicker) */
12
+ generic?: {
13
+ /** Label for range start input */
14
+ from?: string;
15
+ /** Label for range end input */
16
+ to?: string;
17
+ };
18
+ /** Form validation messages */
19
+ forms?: {
20
+ messages?: {
21
+ /** Error message when date is before minimum */
22
+ rangeUnderflow?: string;
23
+ /** Error message when date is after maximum */
24
+ rangeOverflow?: string;
25
+ /** Error message for invalid date format */
26
+ badInput?: string;
27
+ /** Error message when required field is empty */
28
+ valueMissing?: string;
29
+ };
30
+ };
31
+ /** Date-related strings */
32
+ dates?: {
33
+ /** Month label */
34
+ month?: string;
35
+ /** Year label */
36
+ year?: string;
37
+ };
38
+ }
39
+ /**
40
+ * Default strings for single/multiple datepicker
41
+ */
42
+ export declare const defaultSingleStrings: IDatepickerStrings;
43
+ /**
44
+ * Default strings for range datepicker
45
+ */
46
+ export declare const defaultRangeStrings: IDatepickerStrings;
@@ -0,0 +1,16 @@
1
+ /**
2
+ * form.ts
3
+ *
4
+ * Type definitions for HTML form elements and controls.
5
+ * These follow HTML standards for form element types.
6
+ */
7
+ /**
8
+ * HTML button type attribute values
9
+ * Used for <button type="..."> and similar elements
10
+ */
11
+ export type THTMLButtonType = 'button' | 'submit' | 'reset';
12
+ /**
13
+ * Selection mode for form controls
14
+ * Used in components that support single, multiple, or range selection
15
+ */
16
+ export type TSelectionMode = 'single' | 'multiple' | 'range';
@@ -0,0 +1,88 @@
1
+ /**
2
+ * header.ts
3
+ *
4
+ * Type definitions for header-related domain models.
5
+ * These represent user, organization, and menu item data structures.
6
+ */
7
+ /**
8
+ * User object containing information about the logged-in user
9
+ */
10
+ export interface User {
11
+ /** Full name of the user */
12
+ name: string;
13
+ /** Short name or initials (deprecated) */
14
+ shortname?: string;
15
+ /** Last login timestamp (ISO string or Date) */
16
+ lastLoggedIn?: Date | string;
17
+ }
18
+ /**
19
+ * Representation object containing information about the organization/entity being represented
20
+ */
21
+ export interface Representing {
22
+ /** Name of the organization or entity */
23
+ name: string;
24
+ /** Short name or initials (deprecated) */
25
+ shortname?: string;
26
+ /** Organization number */
27
+ orgNumber?: string | number;
28
+ }
29
+ /**
30
+ * Menu item in the user menu
31
+ * The iconName will be typed as PktIconName in package-specific implementations
32
+ */
33
+ export interface UserMenuItem<IconType = string> {
34
+ /** Icon name to display */
35
+ iconName?: IconType;
36
+ /** Text for the menu item */
37
+ title: string;
38
+ /** Link URL or click handler function */
39
+ target: string | (() => void);
40
+ }
41
+ /**
42
+ * Internal type for rendering links/buttons (supports both href and onClick)
43
+ * Base interface for discriminated union
44
+ */
45
+ export interface InternalMenuItemBase<IconType = string> {
46
+ title: string;
47
+ iconName?: IconType;
48
+ }
49
+ /**
50
+ * Internal menu item that is a link
51
+ */
52
+ export interface InternalMenuLink<IconType = string> extends InternalMenuItemBase<IconType> {
53
+ href: string;
54
+ }
55
+ /**
56
+ * Internal menu item that is a button
57
+ */
58
+ export interface InternalMenuButton<IconType = string> extends InternalMenuItemBase<IconType> {
59
+ onClick: () => void;
60
+ }
61
+ /**
62
+ * Union type for internal menu items (discriminated by href vs onClick)
63
+ */
64
+ export type TInternalMenuItem<IconType = string> = InternalMenuLink<IconType> | InternalMenuButton<IconType>;
65
+ /**
66
+ * Helper to convert UserMenuItem (with target) to internal format
67
+ */
68
+ export declare const convertUserMenuItem: <IconType = string>(item: UserMenuItem<IconType>) => TInternalMenuItem<IconType>;
69
+ /**
70
+ * Variant for the slot menu button in tablet/mobile mode
71
+ */
72
+ export type TSlotMenuVariant = 'icon-only' | 'icon-right';
73
+ /**
74
+ * Type for which menu is currently open in the header
75
+ */
76
+ export type THeaderMenu = 'none' | 'slot' | 'search' | 'user';
77
+ /**
78
+ * Placement options for the logout button
79
+ */
80
+ export type TLogOutButtonPlacement = 'userMenu' | 'header' | 'both' | 'none';
81
+ /**
82
+ * Position options for the header
83
+ */
84
+ export type THeaderPosition = 'fixed' | 'relative';
85
+ /**
86
+ * Scroll behavior options for the header
87
+ */
88
+ export type THeaderScrollBehavior = 'hide' | 'none';
@@ -0,0 +1,9 @@
1
+ /**
2
+ * heading.ts
3
+ *
4
+ * Type definitions for heading-related types.
5
+ * These represent HTML heading semantics (h1-h6) and typography scales.
6
+ */
7
+ export type THeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
8
+ export type THeadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
9
+ export type THeadingWeight = 'light' | 'regular' | 'medium' | 'bold';
@@ -0,0 +1,17 @@
1
+ export type { Booleanish } from './booleanish';
2
+ export { booleanishConverter } from './booleanish';
3
+ export type { TAriaBoolean, TAriaBooleanMixed, TAriaCurrent, TAriaHasPopup, TAriaInvalid, TAriaLive, TAriaRelevant, TAriaSort, TAriaAutoComplete, TAriaOrientation, IAriaAttributes, TAlertRole, } from './aria';
4
+ export type { THeadingLevel, THeadingSize, THeadingWeight } from './heading';
5
+ export type { User, Representing, UserMenuItem, InternalMenuItemBase, InternalMenuLink, InternalMenuButton, TInternalMenuItem, TSlotMenuVariant, THeaderMenu, TLogOutButtonPlacement, THeaderPosition, THeaderScrollBehavior, } from './header';
6
+ export { convertUserMenuItem } from './header';
7
+ export type { TLayout, TVerticalPosition, THorizontalPosition, TPosition, TPositionWithCenter, } from './layout';
8
+ export type { THTMLButtonType, TSelectionMode } from './form';
9
+ export type { TSize3, TSize5, TSize7 } from './size';
10
+ export type { TAlertSkin, TMessageboxSkin, TAccordionSkin, TCardSkin } from './skin';
11
+ export type { IDateConstraints, ICalendarGridDimensions, IGridCellPosition, TDateRangeMap, ISelectionState, ISelectionOptions, } from './calendar';
12
+ export type { IDatepickerStrings } from './datepicker';
13
+ export { defaultSingleStrings, defaultRangeStrings } from './datepicker';
14
+ export type { ITimepickerStrings } from './timepicker';
15
+ export { defaultTimepickerStrings } from './timepicker';
16
+ export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition, } from './progressbar';
17
+ export type { IPktComboboxOption, TPktComboboxTagSkin, TPktComboboxDisplayValue, TPktComboboxTagPlacement, } from './combobox';
@@ -0,0 +1,26 @@
1
+ /**
2
+ * layout.ts
3
+ *
4
+ * Type definitions for layout and positioning.
5
+ * These represent common layout patterns used across components.
6
+ */
7
+ /**
8
+ * Layout direction - vertical or horizontal orientation
9
+ */
10
+ export type TLayout = 'vertical' | 'horizontal';
11
+ /**
12
+ * Generic positioning type for top/bottom placement
13
+ */
14
+ export type TVerticalPosition = 'top' | 'bottom';
15
+ /**
16
+ * Generic positioning type for left/right placement
17
+ */
18
+ export type THorizontalPosition = 'left' | 'right';
19
+ /**
20
+ * Generic positioning type for all four directions
21
+ */
22
+ export type TPosition = 'top' | 'bottom' | 'left' | 'right';
23
+ /**
24
+ * Generic positioning including center
25
+ */
26
+ export type TPositionWithCenter = TPosition | 'center';
@@ -0,0 +1,5 @@
1
+ export type TProgressbarRole = 'progressbar' | 'meter';
2
+ export type TProgressbarSkin = 'dark-blue' | 'light-blue' | 'green' | 'red';
3
+ export type TProgressbarStatusPlacement = 'center' | 'left' | 'following';
4
+ export type TProgressbarStatusType = 'none' | 'percentage' | 'fraction';
5
+ export type TProgressbarTitlePosition = 'left' | 'center';
@@ -0,0 +1,18 @@
1
+ /**
2
+ * size.ts
3
+ *
4
+ * Type definitions for sizing scales.
5
+ * These represent common size scales used across the design system.
6
+ */
7
+ /**
8
+ * Standard 3-level size scale
9
+ */
10
+ export type TSize3 = 'small' | 'medium' | 'large';
11
+ /**
12
+ * Extended 5-level size scale
13
+ */
14
+ export type TSize5 = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
15
+ /**
16
+ * Full 7-level size scale
17
+ */
18
+ export type TSize7 = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
@@ -0,0 +1,24 @@
1
+ /**
2
+ * skin.ts
3
+ *
4
+ * Type definitions for component skin/color variants.
5
+ * Only includes skin types that are identical across packages.
6
+ * Component-specific skin types should remain in their respective component files.
7
+ */
8
+ /**
9
+ * Alert component skin variants
10
+ * Used for semantic color coding of alerts (error, success, warning, info)
11
+ */
12
+ export type TAlertSkin = 'error' | 'success' | 'warning' | 'info';
13
+ /**
14
+ * Messagebox component skin variants
15
+ */
16
+ export type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green';
17
+ /**
18
+ * Accordion component skin variants
19
+ */
20
+ export type TAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue';
21
+ /**
22
+ * Card component skin variants
23
+ */
24
+ export type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue';
@@ -0,0 +1,20 @@
1
+ /**
2
+ * timepicker.ts
3
+ *
4
+ * Type definitions for the timepicker component.
5
+ * Used by both Elements and React implementations.
6
+ */
7
+ /**
8
+ * Translation strings for the timepicker component.
9
+ * Matches the shape of the `timepicker` key in no.json.
10
+ */
11
+ export interface ITimepickerStrings {
12
+ hours: string;
13
+ minutes: string;
14
+ openPicker: string;
15
+ prevTime: string;
16
+ nextTime: string;
17
+ selectTime: string;
18
+ }
19
+ /** Default labels (Norwegian Bokmål), aligned with `packages/elements/src/translations/no.json`. */
20
+ export declare const defaultTimepickerStrings: ITimepickerStrings;
@@ -0,0 +1,16 @@
1
+ import type { ICalendarGridDimensions } from '../../shared-types/calendar';
2
+ export type { ICalendarGridDimensions, IGridCellPosition } from '../../shared-types/calendar';
3
+ export declare const DAYS_PER_WEEK = 7;
4
+ export declare const MONDAY_OFFSET = 6;
5
+ /**
6
+ * Calculate the dimensions and structure of the calendar grid
7
+ */
8
+ export declare function calculateCalendarDimensions(year: number, month: number): ICalendarGridDimensions;
9
+ /**
10
+ * Determine what type of cell to render at a given position
11
+ */
12
+ export declare function getCellType(rowIndex: number, colIndex: number, dayCounter: number, gridDimensions: ICalendarGridDimensions): 'prev-month' | 'current-month' | 'next-month';
13
+ /**
14
+ * Get the day number to display for a given cell
15
+ */
16
+ export declare function getDayNumber(cellType: 'prev-month' | 'current-month' | 'next-month', colIndex: number, dayCounter: number, gridDimensions: ICalendarGridDimensions): number;
@@ -0,0 +1,22 @@
1
+ import type { IDateConstraints } from '../../shared-types/calendar';
2
+ export type { IDateConstraints } from '../../shared-types/calendar';
3
+ /**
4
+ * Check if a date is excluded based on constraints
5
+ */
6
+ export declare function isDateExcluded(date: Date, constraints: IDateConstraints): boolean;
7
+ /**
8
+ * Check if a day should be disabled for selection
9
+ */
10
+ export declare function isDayDisabled(date: Date, isSelected: boolean, constraints: IDateConstraints, options: {
11
+ multiple: boolean;
12
+ maxMultiple: number;
13
+ selectedCount: number;
14
+ }): boolean;
15
+ /**
16
+ * Check if navigation to previous month is allowed
17
+ */
18
+ export declare function isPrevMonthAllowed(year: number, month: number, earliest: string | null): boolean;
19
+ /**
20
+ * Check if navigation to next month is allowed
21
+ */
22
+ export declare function isNextMonthAllowed(year: number, month: number, latest: string | null): boolean;
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Calendar Helper Exports
3
+ *
4
+ * This module re-exports all calendar helper functions and types
5
+ * to provide a single import point for calendar-related utilities.
6
+ */
7
+ export { isDateExcluded, isDayDisabled, isPrevMonthAllowed, isNextMonthAllowed, type IDateConstraints, } from './date-validation';
8
+ export { DAYS_PER_WEEK, MONDAY_OFFSET, calculateCalendarDimensions, getCellType, getDayNumber, type ICalendarGridDimensions, type IGridCellPosition, } from './calendar-grid';
9
+ export { convertSelectedToDates, updateRangeMap, isRangeAllowed, addToSelection, removeFromSelection, toggleSelection, handleRangeSelection, type TDateRangeMap, type ISelectionState, type ISelectionOptions, } from './selection-manager';
10
+ export { KEY_DIRECTION_MAP, shouldIgnoreKeyboardEvent, findNextSelectableDate, getKeyDirection, } from './keyboard-navigation';
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Keyboard navigation helpers for calendar component
3
+ */
4
+ export declare const KEY_DIRECTION_MAP: Record<string, number>;
5
+ /**
6
+ * Check if a keyboard event should be ignored
7
+ */
8
+ export declare function shouldIgnoreKeyboardEvent(target: HTMLElement): boolean;
9
+ /**
10
+ * Find the next selectable date in a given direction
11
+ */
12
+ export declare function findNextSelectableDate(startDate: Date, direction: number, querySelector: (selector: string) => Element | null): Date | null;
13
+ /**
14
+ * Get the direction for a keyboard event
15
+ */
16
+ export declare function getKeyDirection(key: string): number | null;
@@ -0,0 +1,30 @@
1
+ import type { TDateRangeMap, ISelectionOptions } from '../../shared-types/calendar';
2
+ export type { TDateRangeMap, ISelectionState, ISelectionOptions } from '../../shared-types/calendar';
3
+ /**
4
+ * Convert selected string array to Date array
5
+ */
6
+ export declare function convertSelectedToDates(selected: string | string[]): Date[];
7
+ /**
8
+ * Update the range map for visualizing date ranges
9
+ */
10
+ export declare function updateRangeMap(start: Date, end: Date): TDateRangeMap;
11
+ /**
12
+ * Check if a range selection is allowed (no excluded dates in between)
13
+ */
14
+ export declare function isRangeAllowed(date: Date, selectedDates: Date[], excludedates: Date[], excludeweekdays: string[]): boolean;
15
+ /**
16
+ * Add a date to the selection
17
+ */
18
+ export declare function addToSelection(selectedDate: Date, currentSelected: string[]): string[];
19
+ /**
20
+ * Remove a date from the selection
21
+ */
22
+ export declare function removeFromSelection(selectedDate: Date, currentSelected: string[]): string[];
23
+ /**
24
+ * Toggle a date in the selection
25
+ */
26
+ export declare function toggleSelection(selectedDate: Date, currentSelected: string[], maxMultiple: number): string[];
27
+ /**
28
+ * Handle range selection logic
29
+ */
30
+ export declare function handleRangeSelection(selectedDate: Date, currentSelected: string[], options: Pick<ISelectionOptions, 'excludedates' | 'excludeweekdays'>): string[];
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Shared combobox utilities for use by both Elements and React packages.
3
+ */
4
+ export { findOptionByValue, findOptionIndex, filterOptionsBySearch, buildFulltext, isMaxSelectionReached, getOptionDisplayText, parseValueToArray, findTypeaheadMatches, getSearchInfoMessage, } from './option-utils';
5
+ export { selectOption, deselectOption, selectAllOptions, clearAllSelections, createUserOption, toggleSelection, } from './selection-manager';
6
+ export type { IToggleSelectionConfig, IToggleSelectionResult } from './selection-manager';
7
+ export { isLetterOrSpace, createTypeaheadHandler, findTypeaheadOptionMatch } from './typeahead';
8
+ export { getInputKeyAction, isArrowToggleKey, getInputValueAction, checkForMatches, getSingleValueForInput, } from './input-utils';
9
+ export type { TInputKeyAction, TFocusOutAction, IFocusOutResult, ICheckForMatchesResult, } from './input-utils';
10
+ export { focusAndScrollIntoView, getOptionElements, focusNextOption, focusPreviousOption, focusFirstOption, focusLastOption, focusFirstOrSelectedOption, } from './keyboard-navigation';
@@ -0,0 +1,38 @@
1
+ /**
2
+ * Shared combobox input utility functions used by both Elements and React packages.
3
+ * Covers keyboard actions, focus-out validation, match checking, and input display.
4
+ */
5
+ import type { IPktComboboxOption } from '../../shared-types/combobox';
6
+ export type TInputKeyAction = 'addValue' | 'focusListbox' | 'closeOptions' | null;
7
+ /**
8
+ * Determines the action for a keydown event on the combobox input.
9
+ */
10
+ export declare const getInputKeyAction: (key: string, shiftKey: boolean, multiple: boolean) => TInputKeyAction;
11
+ /**
12
+ * Determines if a key is an arrow/toggle key for select-only mode.
13
+ */
14
+ export declare const isArrowToggleKey: (key: string) => boolean;
15
+ export type TFocusOutAction = 'addUserValue' | 'selectOption' | 'removeValue' | 'none';
16
+ export interface IFocusOutResult {
17
+ action: TFocusOutAction;
18
+ value: string | null;
19
+ }
20
+ /**
21
+ * Determines what to do with the input value when focus leaves the combobox.
22
+ */
23
+ export declare const getInputValueAction: (inputValue: string, currentValues: string[], options: IPktComboboxOption[], allowUserInput: boolean, multiple: boolean) => IFocusOutResult;
24
+ export interface ICheckForMatchesResult {
25
+ addValueText: string | null;
26
+ userInfoMessage: string;
27
+ shouldRemoveValue: boolean;
28
+ shouldResetInput: boolean;
29
+ }
30
+ /**
31
+ * Determines the info message and actions based on search input.
32
+ * Wraps getSearchInfoMessage, adding the empty-input case.
33
+ */
34
+ export declare const checkForMatches: (inputValue: string, currentValues: string[], options: IPktComboboxOption[], allowUserInput: boolean, multiple: boolean) => ICheckForMatchesResult;
35
+ /**
36
+ * Determines what text to display in a single-select input for the given value.
37
+ */
38
+ export declare const getSingleValueForInput: (value: string, options: IPktComboboxOption[], displayValueAs: string) => string;
@@ -0,0 +1,39 @@
1
+ /**
2
+ * Shared combobox keyboard navigation utility functions
3
+ * used by both Elements and React packages.
4
+ * Only framework-agnostic functions belong here.
5
+ */
6
+ /**
7
+ * Scrolls an element into view and focuses it.
8
+ */
9
+ export declare const focusAndScrollIntoView: (element: HTMLElement) => void;
10
+ /**
11
+ * Gets all selectable option elements from a container.
12
+ */
13
+ export declare const getOptionElements: (container: HTMLElement) => HTMLElement[];
14
+ /**
15
+ * Focuses the next sibling option.
16
+ */
17
+ export declare const focusNextOption: (currentTarget: HTMLElement) => void;
18
+ /**
19
+ * Focuses the previous sibling option.
20
+ * Falls back to search input if at first option and search is present.
21
+ */
22
+ export declare const focusPreviousOption: (currentTarget: HTMLElement, container: HTMLElement, includeSearch: boolean) => void;
23
+ /**
24
+ * Focuses the first option in the list.
25
+ */
26
+ export declare const focusFirstOption: (container: HTMLElement) => void;
27
+ /**
28
+ * Focuses the last option in the list.
29
+ */
30
+ export declare const focusLastOption: (container: HTMLElement) => void;
31
+ /**
32
+ * Focuses the first selected option, or falls back to search/new-option/first option.
33
+ */
34
+ export declare const focusFirstOrSelectedOption: (container: HTMLElement, config: {
35
+ disabled: boolean;
36
+ allowUserInput: boolean;
37
+ customUserInput: string | null;
38
+ includeSearch: boolean;
39
+ }) => void;
@@ -0,0 +1,50 @@
1
+ /**
2
+ * Shared combobox option utility functions used by both Elements and React packages.
3
+ * Only framework-agnostic functions belong here.
4
+ */
5
+ import type { IPktComboboxOption, TPktComboboxDisplayValue } from '../../shared-types/combobox';
6
+ /**
7
+ * Finds an option by its value, falling back to label match.
8
+ * Value matches are prioritized over label matches to avoid ambiguity
9
+ * when an option's label matches another option's value.
10
+ */
11
+ export declare const findOptionByValue: (options: IPktComboboxOption[], value: string | null) => IPktComboboxOption | null;
12
+ /**
13
+ * Finds the index of an option by its value, falling back to label match.
14
+ */
15
+ export declare const findOptionIndex: (options: IPktComboboxOption[], value: string | null) => number;
16
+ /**
17
+ * Filters options by a search string, matching against fulltext.
18
+ */
19
+ export declare const filterOptionsBySearch: (options: IPktComboboxOption[], search: string | null) => IPktComboboxOption[];
20
+ /**
21
+ * Builds the fulltext search string for an option.
22
+ */
23
+ export declare const buildFulltext: (option: IPktComboboxOption) => string;
24
+ /**
25
+ * Checks if the maximum number of selections has been reached.
26
+ */
27
+ export declare const isMaxSelectionReached: (selectedCount: number, maxlength: number | null) => boolean;
28
+ /**
29
+ * Returns the display text for an option based on the displayValueAs setting.
30
+ */
31
+ export declare const getOptionDisplayText: (option: IPktComboboxOption | null, displayValueAs: TPktComboboxDisplayValue) => string;
32
+ /**
33
+ * Parses a value prop (string or string[]) into a normalized array.
34
+ */
35
+ export declare const parseValueToArray: (value: string | string[] | null | undefined, multiple: boolean) => string[];
36
+ /**
37
+ * Finds typeahead matches from options based on search input.
38
+ * Returns filtered options and the best autocomplete suggestion.
39
+ */
40
+ export declare const findTypeaheadMatches: (options: IPktComboboxOption[], search: string) => {
41
+ filtered: IPktComboboxOption[];
42
+ suggestion: IPktComboboxOption | null;
43
+ };
44
+ /**
45
+ * Determines the user info message based on search state and matches.
46
+ */
47
+ export declare const getSearchInfoMessage: (searchValue: string, selectedValues: string[], options: IPktComboboxOption[], allowUserInput: boolean) => {
48
+ addValueText: string | null;
49
+ userInfoMessage: string;
50
+ };
@@ -0,0 +1,71 @@
1
+ /**
2
+ * Shared combobox selection management functions used by both Elements and React packages.
3
+ * Only framework-agnostic functions belong here.
4
+ */
5
+ import type { IPktComboboxOption } from '../../shared-types/combobox';
6
+ /**
7
+ * Configuration for the toggleSelection function.
8
+ */
9
+ export interface IToggleSelectionConfig {
10
+ multiple: boolean;
11
+ allowUserInput: boolean;
12
+ maxlength: number | null;
13
+ }
14
+ /**
15
+ * Result of a toggle selection operation.
16
+ * Describes what happened and what the new state should be.
17
+ */
18
+ export interface IToggleSelectionResult {
19
+ values: string[];
20
+ options: IPktComboboxOption[];
21
+ shouldOptionsBeOpen: boolean;
22
+ shouldResetInput: boolean;
23
+ userInfoMessage: string;
24
+ searchValue: string;
25
+ newUserOption: IPktComboboxOption | null;
26
+ }
27
+ /**
28
+ * Marks an option as selected in the options array.
29
+ * Returns new arrays (immutable).
30
+ */
31
+ export declare const selectOption: (value: string | null, currentValues: string[], options: IPktComboboxOption[], maxlength: number | null, multiple: boolean) => {
32
+ values: string[];
33
+ options: IPktComboboxOption[];
34
+ };
35
+ /**
36
+ * Removes an option from the selection.
37
+ * Returns new arrays (immutable).
38
+ */
39
+ export declare const deselectOption: (value: string | null, currentValues: string[], options: IPktComboboxOption[]) => {
40
+ values: string[];
41
+ options: IPktComboboxOption[];
42
+ };
43
+ /**
44
+ * Selects all options (for multiple mode).
45
+ * Returns new arrays (immutable).
46
+ */
47
+ export declare const selectAllOptions: (options: IPktComboboxOption[], maxlength: number | null) => {
48
+ values: string[];
49
+ options: IPktComboboxOption[];
50
+ userInfoMessage: string;
51
+ };
52
+ /**
53
+ * Clears all selections.
54
+ * Returns new arrays (immutable).
55
+ */
56
+ export declare const clearAllSelections: (options: IPktComboboxOption[]) => {
57
+ values: string[];
58
+ options: IPktComboboxOption[];
59
+ };
60
+ /**
61
+ * Creates a new user-added option object.
62
+ */
63
+ export declare const createUserOption: (value: string) => IPktComboboxOption;
64
+ /**
65
+ * Core toggle selection logic.
66
+ *
67
+ * Given a value to toggle and the current state, returns the new state
68
+ * describing what happened. This is the framework-agnostic version of
69
+ * the combobox's toggleValue method.
70
+ */
71
+ export declare const toggleSelection: (value: string | null, currentValues: string[], options: IPktComboboxOption[], config: IToggleSelectionConfig) => IToggleSelectionResult;
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Shared combobox typeahead utility functions used by both Elements and React packages.
3
+ * Only framework-agnostic functions belong here.
4
+ */
5
+ /**
6
+ * Checks if a character is a letter or space (Unicode-aware).
7
+ */
8
+ export declare const isLetterOrSpace: (char: string) => boolean;
9
+ /**
10
+ * Creates a typeahead handler that manages debounced character accumulation.
11
+ * Returns a stateful handler — call destroy() when done to clear timeouts.
12
+ */
13
+ export declare const createTypeaheadHandler: (timeout?: number) => {
14
+ append: (char: string) => string;
15
+ reset: () => void;
16
+ getBuffer: () => string;
17
+ };
18
+ /**
19
+ * Finds the first option element whose text content starts with the search string.
20
+ * Works with an array of elements, matching against textContent.
21
+ */
22
+ export declare const findTypeaheadOptionMatch: (options: {
23
+ textContent: string | null;
24
+ }[], searchString: string) => number;
@@ -0,0 +1,138 @@
1
+ import { TZDate } from '@date-fns/tz';
2
+ declare global {
3
+ interface Window {
4
+ pktTz: string;
5
+ }
6
+ }
7
+ /**
8
+ * Returns the current date in the specified timezone, with time set to 00:00:00
9
+ * @param tz - Timezone string (default: window.pktTz)
10
+ * @returns Date object representing today's date in the specified timezone
11
+ */
12
+ export declare const todayInTz: (tz?: string) => Date;
13
+ /**
14
+ * Parses an ISO date string and returns a Date object.
15
+ * Handles "YYYY-MM-DD", "YYYY-MM", and "YYYY" formats as local dates.
16
+ * @param date - The ISO date string to parse
17
+ * @returns A Date object
18
+ */
19
+ export declare function parseISODateString(date: string | null | undefined): Date;
20
+ /**
21
+ * Formats a Date or TZDate object to an ISO date string (YYYY-MM-DD).
22
+ * Uses local time, not UTC.
23
+ * @param date - The Date or TZDate object to format
24
+ * @returns An ISO date string
25
+ */
26
+ export declare const formatISODate: (date: Date | TZDate) => string;
27
+ /**
28
+ * Converts an ISO date string to a Date object
29
+ * @param date - The ISO date string to convert
30
+ * @returns A Date object or null if invalid
31
+ */
32
+ export declare const fromISOToDate: (date: string | null) => Date | null;
33
+ /**
34
+ * Converts an ISO date string to a formatted date string
35
+ * @param date - The ISO date string to convert
36
+ * @param dateformat - The desired date format
37
+ * @returns A formatted date string
38
+ */
39
+ export declare const fromISOtoLocal: (date: string, dateformat: string) => string;
40
+ /**
41
+ * Creates a new Date object based on the provided date string or Date object.
42
+ * Optionally sets the time to the start or end of the day.
43
+ * @param date - The date string or Date object
44
+ * @param timeOfDay - 'start' to set time to 00:00:00, 'end' to set time to 23:59:59
45
+ * @returns A Date object
46
+ */
47
+ export declare const newDate: (date?: string | Date, timeOfDay?: "start" | "end") => Date;
48
+ /**
49
+ * Creates a new Date object based on the provided year, month, and day.
50
+ * If the inputs are invalid, returns the current date.
51
+ * @param year - The year
52
+ * @param month - The month (0-11)
53
+ * @param day - The day of the month (default: 1)
54
+ * @returns A Date object
55
+ */
56
+ export declare const newDateYMD: (year: number, month: number, day?: number) => Date;
57
+ /**
58
+ * Creates a new Date object based on the provided date string or Date object.
59
+ * Sets the time to noon (12:00:00) to avoid timezone issues.
60
+ * @param date - The date string or Date object
61
+ * @returns A Date object with time set to noon
62
+ */
63
+ export declare const newDateFromDate: (date: Date | TZDate | number) => Date;
64
+ export declare const formatReadableDate: (date: Date | TZDate) => string;
65
+ /**
66
+ * Validates if a date is within the specified range
67
+ * @param date - The date to validate
68
+ * @param min - The minimum date (ISO string)
69
+ * @param max - The maximum date (ISO string)
70
+ * @returns boolean indicating if the date is in range
71
+ */
72
+ export declare const isDateInRange: (date: Date, min?: string | null, max?: string | null) => boolean;
73
+ /**
74
+ * Checks if a date is in the list of excluded dates
75
+ * @param date - The date to check
76
+ * @param excludedDates - Array of excluded date strings (ISO format)
77
+ * @returns boolean indicating if the date is excluded
78
+ */
79
+ export declare const isDateExcluded: (date: Date, excludedDates: string[]) => boolean;
80
+ /**
81
+ * Checks if a date's weekday is excluded
82
+ * @param date - The date to check
83
+ * @param excludedWeekdays - Array of excluded weekdays (0 = Sunday, 1 = Monday, etc.)
84
+ * @returns boolean indicating if the weekday is excluded
85
+ */
86
+ export declare const isWeekdayExcluded: (date: Date, excludedWeekdays: string[]) => boolean;
87
+ /**
88
+ * Validates if a date can be selected based on all constraints
89
+ * @param date - The date to validate
90
+ * @param min - The minimum date (ISO string)
91
+ * @param max - The maximum date (ISO string)
92
+ * @param excludedDates - Array of excluded date strings (ISO format)
93
+ * @param excludedWeekdays - Array of excluded weekdays (0 = Sunday, 1 = Monday, etc.)
94
+ * @returns boolean indicating if the date is selectable
95
+ */
96
+ export declare const isDateSelectable: (date: Date, min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => boolean;
97
+ /**
98
+ * Filters an array of date strings to only include selectable dates
99
+ * @param dates - Array of date strings (ISO format)
100
+ * @param min - The minimum date (ISO string)
101
+ * @param max - The maximum date (ISO string)
102
+ * @param excludedDates - Array of excluded date strings (ISO format)
103
+ * @param excludedWeekdays - Array of excluded weekdays (0 = Sunday, 1 = Monday, etc.)
104
+ * @returns Array of selectable date strings
105
+ */
106
+ export declare const filterSelectableDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
107
+ /**
108
+ * Sorts an array of ISO date strings chronologically
109
+ * @param dates - Array of date strings (ISO format)
110
+ * @returns Sorted array of date strings
111
+ */
112
+ export declare const sortDateStrings: (dates: string[]) => string[];
113
+ /**
114
+ * Validates a date range (start should be before or equal to end)
115
+ * @param startDate - The start date (ISO string)
116
+ * @param endDate - The end date (ISO string)
117
+ * @returns boolean indicating if the date range is valid
118
+ */
119
+ export declare const isValidDateRange: (startDate: string, endDate: string) => boolean;
120
+ declare const _default: {
121
+ todayInTz: (tz?: string) => Date;
122
+ parseISODateString: typeof parseISODateString;
123
+ formatISODate: (date: Date | TZDate) => string;
124
+ fromISOToDate: (date: string | null) => Date | null;
125
+ fromISOtoLocal: (date: string, dateformat: string) => string;
126
+ newDate: (date?: string | Date, timeOfDay?: "start" | "end") => Date;
127
+ newDateYMD: (year: number, month: number, day?: number) => Date;
128
+ newDateFromDate: (date: Date | TZDate | number) => Date;
129
+ formatReadableDate: (date: Date | TZDate) => string;
130
+ isDateInRange: (date: Date, min?: string | null, max?: string | null) => boolean;
131
+ isDateExcluded: (date: Date, excludedDates: string[]) => boolean;
132
+ isWeekdayExcluded: (date: Date, excludedWeekdays: string[]) => boolean;
133
+ isDateSelectable: (date: Date, min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => boolean;
134
+ filterSelectableDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
135
+ sortDateStrings: (dates: string[]) => string[];
136
+ isValidDateRange: (startDate: string, endDate: string) => boolean;
137
+ };
138
+ export default _default;
@@ -0,0 +1,73 @@
1
+ /**
2
+ * Shared datepicker utility functions used by both Elements and React packages.
3
+ * Only framework-agnostic functions belong here.
4
+ */
5
+ /**
6
+ * Determines the appropriate input type based on device.
7
+ * Returns 'text' on iOS to avoid native date picker conflicts.
8
+ */
9
+ export declare const getDatepickerInputType: () => string;
10
+ /**
11
+ * Validates that a range has valid order (start <= end).
12
+ * Returns true if range is valid or incomplete.
13
+ */
14
+ export declare const validateRangeOrder: (values: string[]) => boolean;
15
+ /**
16
+ * Sorts date strings chronologically.
17
+ */
18
+ export declare const sortDates: (dates: string[]) => string[];
19
+ /**
20
+ * Filters dates to only include selectable ones based on constraints.
21
+ */
22
+ export declare const filterDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
23
+ /**
24
+ * Generates input CSS classes for datepicker.
25
+ */
26
+ export declare const getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string) => Record<string, boolean>;
27
+ /**
28
+ * Generates button CSS classes for calendar toggle button.
29
+ */
30
+ export declare const getDatepickerButtonClasses: () => Record<string, boolean>;
31
+ /**
32
+ * Generates range label CSS classes.
33
+ */
34
+ export declare const getRangeLabelClasses: (showRangeLabels: boolean) => Record<string, boolean>;
35
+ /**
36
+ * Processes date selection from calendar events.
37
+ * Converts the calendar's date selection into the appropriate string format.
38
+ */
39
+ export declare const processDateSelection: (detail: string | string[], multiple: boolean, range: boolean) => string;
40
+ /**
41
+ * Handles calendar positioning based on viewport and input position.
42
+ * Positions calendar below input by default, flips above if overflowing.
43
+ *
44
+ * Accepts plain DOM elements (not framework-specific refs).
45
+ */
46
+ export declare const handleCalendarPosition: (popup: HTMLElement | null, input: HTMLElement | null, hasCounter?: boolean) => void;
47
+ /**
48
+ * Handles common keyboard interactions for datepicker inputs.
49
+ *
50
+ * - Space: Opens calendar
51
+ * - Enter: Submits form, focuses next input, or blurs
52
+ * - Comma: Adds date to selection (multiple) or blurs input
53
+ */
54
+ export declare const handleDatepickerKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void, submitForm?: () => void, focusNextInput?: () => void, blurInput?: () => void, commaHandler?: (e: KeyboardEvent) => void) => void;
55
+ /**
56
+ * Handles keyboard interactions for calendar button.
57
+ * Responds to Enter and Space keys.
58
+ */
59
+ export declare const handleDatepickerButtonKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void) => void;
60
+ declare const _default: {
61
+ getDatepickerInputType: () => string;
62
+ validateRangeOrder: (values: string[]) => boolean;
63
+ sortDates: (dates: string[]) => string[];
64
+ filterDates: (dates: string[], min?: string | null, max?: string | null, excludedDates?: string[], excludedWeekdays?: string[]) => string[];
65
+ getDatepickerInputClasses: (fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean, readonly?: boolean, inputType?: string) => Record<string, boolean>;
66
+ getDatepickerButtonClasses: () => Record<string, boolean>;
67
+ getRangeLabelClasses: (showRangeLabels: boolean) => Record<string, boolean>;
68
+ processDateSelection: (detail: string | string[], multiple: boolean, range: boolean) => string;
69
+ handleCalendarPosition: (popup: HTMLElement | null, input: HTMLElement | null, hasCounter?: boolean) => void;
70
+ handleDatepickerKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void, submitForm?: () => void, focusNextInput?: () => void, blurInput?: () => void, commaHandler?: (e: KeyboardEvent) => void) => void;
71
+ handleDatepickerButtonKeydown: (event: KeyboardEvent, toggleCalendar: (e: Event) => void) => void;
72
+ };
73
+ export default _default;
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Detects if the current device is iOS (iPhone, iPad, iPod)
3
+ * Handles modern iPad Safari which uses desktop user agent since iOS 13
4
+ * @returns boolean indicating if the device is iOS
5
+ */
6
+ export declare const isIOS: () => boolean;
7
+ declare const _default: {
8
+ isIOS: () => boolean;
9
+ };
10
+ export default _default;
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Shared timepicker utilities for use by both Elements and React packages.
3
+ */
4
+ export { isValidTimeString, parseTimeString, timeToMinutes } from './time-utils';
5
+ export { getMinuteStep, getHourOptions, getMinuteOptions } from './options';
6
+ export { stepTime } from './stepper';
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Shared timepicker option generation utilities.
3
+ * Used by both Elements and React implementations.
4
+ * Only framework-agnostic functions belong here.
5
+ */
6
+ /**
7
+ * Converts a step value in seconds to a step value in minutes.
8
+ * Defaults to 1 if step is null/undefined/zero.
9
+ */
10
+ export declare const getMinuteStep: (stepSeconds?: number | null) => number;
11
+ /**
12
+ * Returns an array of valid hour values (0–23) based on min/max constraints.
13
+ * min and max should be HH:MM strings; invalid/missing values fall back to 0 and 23.
14
+ */
15
+ export declare const getHourOptions: (min?: string | number | null, max?: string | number | null) => number[];
16
+ /**
17
+ * Returns an array of valid minute values based on step constraints.
18
+ */
19
+ export declare const getMinuteOptions: (stepSeconds?: number | null) => number[];
@@ -0,0 +1,20 @@
1
+ /**
2
+ * Shared timepicker stepper logic.
3
+ * Used by both Elements and React implementations.
4
+ * Only framework-agnostic functions belong here.
5
+ */
6
+ /**
7
+ * Increments or decrements the time by one minute-step.
8
+ * Rolls over: incrementing past 23:59 wraps to 00:00, and decrementing past 00:00 wraps to 23:59.
9
+ * Falls back to sensible defaults when hours/minutes are empty strings.
10
+ *
11
+ * @param hours - Current hours display value ('09', '', etc.)
12
+ * @param minutes - Current minutes display value ('30', '', etc.)
13
+ * @param direction - 1 for next, -1 for previous
14
+ * @param minuteStep - Step size in minutes
15
+ * @returns Zero-padded { hours, minutes } strings
16
+ */
17
+ export declare const stepTime: (hours: string, minutes: string, direction: 1 | -1, minuteStep: number) => {
18
+ hours: string;
19
+ minutes: string;
20
+ };
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Shared timepicker time utility functions.
3
+ * Used by both Elements and React implementations.
4
+ * Only framework-agnostic functions belong here.
5
+ */
6
+ /**
7
+ * Returns true if the string matches the HH:MM format with valid hour/minute ranges.
8
+ */
9
+ export declare const isValidTimeString: (value: string) => boolean;
10
+ /**
11
+ * Parses an HH:MM string into zero-padded [hours, minutes] strings.
12
+ * Returns null for empty or invalid values.
13
+ */
14
+ export declare const parseTimeString: (value: string) => [string, string] | null;
15
+ /**
16
+ * Converts an HH:MM string to total minutes since midnight.
17
+ * Assumes a valid time string.
18
+ */
19
+ export declare const timeToMinutes: (time: string) => number;
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Sleep utility function for async delays
3
+ * @param ms - Number of milliseconds to sleep
4
+ * @returns A promise that resolves after the specified delay
5
+ */
6
+ export declare const sleep: (ms: number) => Promise<void>;
7
+ /**
8
+ * UUID-like string generator for very random identifiers
9
+ * @returns A UUID-like string (Not actually a valid UUID)
10
+ */
11
+ export declare const uuidish: () => string;
12
+ declare const _default: {
13
+ sleep: (ms: number) => Promise<void>;
14
+ uuidish: () => string;
15
+ };
16
+ export default _default;
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Converts a value (string or string array) into an array of strings
3
+ * @param value - The value to convert
4
+ * @returns An array of strings
5
+ */
6
+ export declare const valueToArray: (value: string | string[] | null | undefined) => string[];
7
+ /**
8
+ * Converts an array of strings into a CSV string
9
+ * @param array - The array of strings to convert
10
+ * @returns A CSV string
11
+ */
12
+ export declare const arrayToCsv: (array: string[]) => string;
13
+ declare const _default: {
14
+ valueToArray: (value: string | string[] | null | undefined) => string[];
15
+ arrayToCsv: (array: string[]) => string;
16
+ };
17
+ export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-react",
3
- "version": "16.9.0",
3
+ "version": "16.9.1",
4
4
  "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
5
5
  "homepage": "https://punkt.oslo.kommune.no",
6
6
  "author": "Team Designsystem, Oslo Origo",
@@ -27,7 +27,7 @@
27
27
  },
28
28
  "scripts": {
29
29
  "dev": "vite",
30
- "build": "tsc && vite build",
30
+ "build": "tsc && vite build && node scripts/bundle-shared-types.js",
31
31
  "build-app": "tsc && vite build --config vite.config-app.ts",
32
32
  "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
33
33
  "lint:fix": "eslint --fix 'src/**/*.{jsx,ts,tsx}'",
@@ -39,7 +39,7 @@
39
39
  "dependencies": {
40
40
  "@lit-labs/ssr-dom-shim": "^1.2.1",
41
41
  "@lit/react": "^1.0.7",
42
- "@oslokommune/punkt-elements": "^16.9.0",
42
+ "@oslokommune/punkt-elements": "^16.9.1",
43
43
  "classnames": "^2.5.1",
44
44
  "prettier": "^3.3.3",
45
45
  "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
50
50
  "@eslint/eslintrc": "^3.3.3",
51
51
  "@eslint/js": "^9.37.0",
52
52
  "@oslokommune/punkt-assets": "^16.0.0",
53
- "@oslokommune/punkt-css": "^16.8.2",
53
+ "@oslokommune/punkt-css": "^16.9.1",
54
54
  "@testing-library/jest-dom": "^6.5.0",
55
55
  "@testing-library/react": "^16.0.1",
56
56
  "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
109
109
  "url": "https://github.com/oslokommune/punkt/issues"
110
110
  },
111
111
  "license": "MIT",
112
- "gitHead": "b5986d27e787fefda72f847d65bb9b7de2ab5316"
112
+ "gitHead": "88ccfdd5b0afd0db0c4f18e93b772b578f3fd9d7"
113
113
  }