@oslokommune/punkt-react 16.17.3 → 16.17.4

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.17.4](https://github.com/oslokommune/punkt/compare/16.17.3...16.17.4) (2026-05-28)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+* legg til TTagSkin-type i shared-types (#3498). 
+
+
+---
+
+
 ## [16.17.3](https://github.com/oslokommune/punkt/compare/16.17.2...16.17.3) (2026-05-27)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.d.ts

@@ -54,9 +54,10 @@ import { TProgressbarStatusPlacement } from './shared-types';
 import { TProgressbarStatusType } from './shared-types';
 import { TProgressbarTitlePosition } from './shared-types';
 import { TSlotMenuVariant } from './shared-types';
+import { TTagSkin } from './shared-types';
 
 declare interface BasePktTagProps {
-    skin?: 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray';
+    skin?: TTagSkin;
     textStyle?: 'normal-text' | 'thin-text';
     size?: 'small' | 'medium' | 'large';
     closeTag?: boolean;
@@ -766,7 +767,7 @@ export declare interface IPktTab {
     controls?: string;
     tag?: {
         text: string;
-        skin: TSkin | undefined;
+        skin: TTagSkin | undefined;
     };
     active?: boolean;
 }
@@ -780,7 +781,7 @@ declare interface IPktTabItem {
     icon?: string;
     controls?: string;
     tag?: string;
-    tagSkin?: TSkin_2;
+    tagSkin?: TTagSkin;
     index?: number;
 }
 
@@ -1281,14 +1282,8 @@ export declare type TQueueOperationContext = {
 
 declare type TQueueOperationLabel = string | ((fileItem: FileItem) => string);
 
-declare type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light';
-
-declare type TSkin_2 = IPktTag['skin'];
-
 declare type TStepStatus = 'completed' | 'incomplete' | 'current';
 
-declare type TTagSkin = 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray';
-
 export declare type TTransferItemInProgress = TFileAndTransfer & {
     progress: number;
 };

package/dist/shared-types/index.d.ts

@@ -9,7 +9,7 @@ export { DEFAULT_HEADER_FOOTER_URL } from './header-menu';
 export type { TLayout, TVerticalPosition, THorizontalPosition, TPosition, TPositionWithCenter, } from './layout';
 export type { THTMLButtonType, TSelectionMode } from './form';
 export type { TSize3, TSize5, TSize7 } from './size';
-export type { TAlertSkin, TMessageboxSkin, TAccordionSkin, TCardSkin } from './skin';
+export type { TAlertSkin, TMessageboxSkin, TAccordionSkin, TCardSkin, TTagSkin } from './skin';
 export type { IDateConstraints, ICalendarGridDimensions, IGridCellPosition, TDateRangeMap, ISelectionState, ISelectionOptions, } from './calendar';
 export type { IDatepickerStrings } from './datepicker';
 export { defaultSingleStrings, defaultRangeStrings } from './datepicker';

package/dist/shared-types/skin.d.ts

@@ -22,3 +22,7 @@ export type TAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue' | 'plu
  * Card component skin variants
  */
 export type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue';
+/**
+ * Tag component skin variants
+ */
+export type TTagSkin = 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.17.3",
+  "version": "16.17.4",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0e923719992be1851617872d5e529a4588126aed"
+  "gitHead": "28b1f5b48d08a18a1b237b2220f9f1f1e88a5b7f"
 }

package/src/components/card/Card.tsx

@@ -2,7 +2,7 @@
 
 import classNames from 'classnames'
 import { forwardRef, HTMLAttributes, ReactNode, Ref } from 'react'
-import type { TCardSkin, TLayout } from 'shared-types'
+import type { TCardSkin, TLayout, TTagSkin } from 'shared-types'
 
 import { PktTag } from '../tag/Tag'
 
@@ -12,8 +12,6 @@ type TCardImageShape = 'square' | 'round'
 type TCardTagPosition = 'top' | 'bottom'
 type THeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
 
-type TTagSkin = 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray'
-
 interface ICardTag {
   skin?: TTagSkin
   iconName?: string

package/src/components/tabs/TabItem.tsx

@@ -3,10 +3,10 @@
 import { forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
 
 import { PktIcon } from '../icon/Icon'
-import { type IPktTag, PktTag } from '../tag/Tag'
-import { useTabsContext } from './Tabs'
+import type { TTagSkin } from 'shared-types'
 
-export type TSkin = IPktTag['skin']
+import { PktTag } from '../tag/Tag'
+import { useTabsContext } from './Tabs'
 
 export interface IPktTabItem {
   children: ReactNode
@@ -17,7 +17,7 @@ export interface IPktTabItem {
   icon?: string
   controls?: string
   tag?: string
-  tagSkin?: TSkin
+  tagSkin?: TTagSkin
   index?: number
 }
 

package/src/components/tabs/Tabs.tsx

@@ -12,11 +12,11 @@ import {
   useRef,
 } from 'react'
 
+import type { TTagSkin } from 'shared-types'
+
 import { PktIcon } from '../icon/Icon'
 import { PktTabItem } from './TabItem'
 
-export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light'
-
 // Context for passing tab navigation logic to children
 interface ITabsContext {
   arrowNav: boolean
@@ -48,7 +48,7 @@ export interface IPktTab {
   controls?: string
   tag?: {
     text: string
-    skin: TSkin | undefined
+    skin: TTagSkin | undefined
   }
   active?: boolean
 }

package/src/components/tag/Tag.tsx

@@ -14,10 +14,12 @@ import {
   useState,
 } from 'react'
 
+import type { TTagSkin } from 'shared-types'
+
 import { PktIcon } from '..'
 
 interface BasePktTagProps {
-  skin?: 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray'
+  skin?: TTagSkin
   textStyle?: 'normal-text' | 'thin-text'
   size?: 'small' | 'medium' | 'large'
   closeTag?: boolean