@oslokommune/punkt-react 16.6.2 → 16.7.0

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.7.0](https://github.com/oslokommune/punkt/compare/16.6.2...16.7.0) (2026-04-10)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Ny komponent: PktTimepicker (#3380). 
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.6.2](https://github.com/oslokommune/punkt/compare/16.6.1...16.6.2) (2026-04-10)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { ChangeEvent } from 'react';
 import { ChangeEventHandler } from 'react';
 import { CSSProperties } from 'react';
 import { FC } from 'react';
+import { FocusEvent as FocusEvent_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { HTMLProps } from 'react';
@@ -14,6 +15,7 @@ import { IPktComboboxOption } from '../../../../../shared-types/combobox';
 import { IPktConsent as IPktConsent_2 } from '@oslokommune/punkt-elements';
 import { IPktHeading as IPktHeading_2 } from '@oslokommune/punkt-elements';
 import { IPktLoader as IPktLoader_2 } from '@oslokommune/punkt-elements';
+import { ITimepickerStrings } from '../../../../../shared-types/timepicker';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LegacyRef } from 'react';
 import { LinkHTMLAttributes } from 'react';
@@ -850,6 +852,88 @@ export declare interface IPktTextinput extends InputHTMLAttributes<HTMLInputElem
     skipForwardTestid?: boolean;
 }
 
+/**
+ * Props for {@link PktTimepicker}: a React time picker with `HH:MM`, aligned with Elements `pkt-timepicker`.
+ *
+ * The value is submitted via a hidden `input type="time"`; hour/minute fields are the editing UI. Use `value`
+ * or `defaultValue` for controlled vs. uncontrolled mode.
+ */
+export declare interface IPktTimepicker extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'min' | 'max' | 'step' | 'onFocus' | 'onBlur'> {
+    /** Unique id; used for hour, minute, popup, and hidden input ids. */
+    id: string;
+    /** Visible label (InputWrapper). */
+    label: string;
+    /** Controlled value (`HH:MM`). */
+    value?: string;
+    /** Initial value when the component is uncontrolled. */
+    defaultValue?: string;
+    /**
+     * Earliest valid time (`HH:MM`). May be a number or string (HTML attribute / RHF).
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time}
+     */
+    min?: string | number;
+    /**
+     * Latest valid time (`HH:MM`). May be a number or string (HTML attribute / RHF).
+     */
+    max?: string | number;
+    /**
+     * Step in **seconds** (e.g. `60` = 1 min, `300` = 5 min). Must be a valid multiple (same rules as Elements).
+     * @default 60
+     */
+    step?: number;
+    /** Hides the clock button and popup; shows a static clock icon. */
+    hidePicker?: boolean;
+    /** Shows previous/next step buttons instead of the popup. */
+    stepArrows?: boolean;
+    /** Full width (`pkt-timepicker--fullwidth`). */
+    fullwidth?: boolean;
+    /** Form field name on the hidden `input`; falls back to `id` if omitted. */
+    name?: string;
+    /** Help text above the field. */
+    helptext?: string | ReactNode;
+    /** Expandable help text (dropdown). */
+    helptextDropdown?: string | ReactNode;
+    /** Button label for expandable help text. */
+    helptextDropdownButton?: string;
+    /** Forces error state on the wrapper. */
+    hasError?: boolean;
+    /** Error message below the field. */
+    errorMessage?: string | ReactNode;
+    /** Shows an "optional" tag. */
+    optionalTag?: boolean;
+    /** Label text for the optional tag. */
+    optionalText?: string;
+    /** Shows a "required" tag. */
+    requiredTag?: boolean;
+    /** Label text for the required tag. */
+    requiredText?: string;
+    /** Extra tag next to the label. */
+    tagText?: string | null;
+    /** Inline layout in InputWrapper. */
+    inline?: boolean;
+    /** Show visible label and help text (`false` = screen-reader-only label). */
+    useWrapper?: boolean;
+    /** Passed through to InputWrapper as `aria-describedby`. */
+    ariaDescribedby?: string;
+    /** Copy for hours, minutes, buttons, and popup. */
+    strings?: ITimepickerStrings;
+    /** Change event from the hidden input (`e.target.value` is `HH:MM`). */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /** Input events while typing or using spinners. */
+    onInput?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /** Callback with the committed `HH:MM` string. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Fires when focus enters this control from outside (not when moving only between hour and minute).
+     * Implemented on the root wrapper; spinbuttons must allow focus to bubble so this runs.
+     */
+    onFocus?: (e: FocusEvent_2<Element>) => void;
+    /** Focus leaves the whole component. */
+    onBlur?: (e: FocusEvent_2<Element>) => void;
+    /** Extra class names on the root (`pkt-timepicker`). */
+    className?: string;
+}
+
 declare interface ISearch extends HTMLProps<HTMLInputElement> {
     appearance?: 'local' | 'local-with-button' | 'global';
     disabled?: boolean;
@@ -1051,6 +1135,8 @@ export declare const PktTextarea: ForwardRefExoticComponent<IPktTextarea & RefAt
 
 export declare const PktTextinput: ForwardRefExoticComponent<IPktTextinput & RefAttributes<HTMLInputElement>>;
 
+export declare const PktTimepicker: ForwardRefExoticComponent<IPktTimepicker & RefAttributes<HTMLDivElement>>;
+
 /** Representing object for header components */
 declare interface Representing {
     name: string;