@midas-ds/components 8.3.0 → 10.0.0

package/label/Label.d.ts

@@ -1,9 +1,3 @@
-import { LabelProps as AriaLabelProps } from 'react-aria-components';
+import { LabelProps } from 'react-aria-components';
 import * as React from 'react';
-export interface LabelProps extends AriaLabelProps {
-    /**
-     *  @deprecated since v8.2.0 Please use Label without variant for label-02, and for label-01 use Text component with slot: 'description'
-     */
-    variant?: 'label-01' | 'label-02';
-}
 export declare const Label: React.FC<LabelProps>;

package/layout/Layout.d.ts

@@ -43,9 +43,14 @@ export interface MidasLayout {
     app: App;
     /** Provide the layout with your router for client side navigation
      *
-     * @see {@link https://designsystem.migrationsverket.se/dev/client-side-routing/}
+     * @see {@link https://designsystem.migrationsverket.se/dev/client-side-routing/|Client side routing}
      */
     clientSideRouter?: (path: string, routerOptions: undefined) => void;
+    /**
+     * Converts a router-specific href to a native HTML href, e.g. prepending a base path.
+     * Use this if you're using React Router's `basename` option.
+     * @see {@link https://reactrouter.com/en/main/hooks/use-href/|useHref}
+     */
     clientSideHref?: (href: Href) => string;
     variant: 'internal' | 'external';
 }

package/modal/Dialog.d.ts

@@ -1,7 +1,6 @@
 import { AriaDialogProps } from 'react-aria';
 import { DialogTrigger } from 'react-aria-components';
 import { AriaModalOverlayProps } from '@react-aria/overlays';
-import { OverlayTriggerProps } from '@react-types/overlays';
 import * as React from 'react';
 interface DialogProps extends AriaDialogProps {
     /**
@@ -10,18 +9,5 @@ interface DialogProps extends AriaDialogProps {
     title?: React.ReactNode;
     children: React.ReactNode;
 }
-/** @deprecated since v6.0.0 use Modal instead.
- * See docs {@link https://designsystem.migrationsverket.se/|Midas}
- */
-export declare const Dialog: React.FC<DialogProps>;
-/** @deprecated since v6.0.0, use DialogTrigger instead.
- * See docs {@link https://designsystem.migrationsverket.se/|Midas}
- */
-export declare const ModalTrigger: React.FC<OverlayTriggerProps & {
-    isDismissable?: boolean;
-} & {
-    children: (close: () => void) => JSX.Element;
-    label?: string | undefined;
-}>;
 export { DialogTrigger };
 export declare const Modal: React.FC<AriaModalOverlayProps & DialogProps>;

package/modal/index.d.ts

@@ -1 +1 @@
-export { Dialog, ModalTrigger, Modal, DialogTrigger } from './Dialog';
+export { Modal, DialogTrigger } from './Dialog';

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "8.3.0",
+  "version": "10.0.0",
   "main": "./index.cjs",
   "module": "./index.js",
   "types": "./index.d.ts",
@@ -27,7 +27,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/migrationsverket/midas"
+    "url": "git+https://github.com/migrationsverket/midas.git",
+    "directory": "packages/components"
   },
   "peerDependencies": {
     "react": "^18.3.1 || ^19.0.0",

package/progress-bar/ProgressBar.d.ts

@@ -1,5 +1,4 @@
-import { ProgressBarProps as AriaProgressBarProps } from 'react-aria-components';
-import { LabelProps } from '../label';
+import { LabelProps, ProgressBarProps as AriaProgressBarProps } from 'react-aria-components';
 import * as React from 'react';
 interface ProgressBarProps extends AriaProgressBarProps {
     /**

package/search-field/SearchField.d.ts

@@ -1,4 +1,5 @@
 import { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
+import { Size } from '../common/types';
 import * as React from 'react';
 export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'isRequired'> {
     /** Placeholder text */
@@ -14,5 +15,9 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'isRequired
      */
     errorMessage?: string;
     errorPosition?: 'top' | 'bottom';
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     * */
+    size?: Size;
 }
 export declare const SearchField: React.FC<SearchFieldProps>;

package/select/Select.d.ts

@@ -1,5 +1,6 @@
 import { CollectionChildren } from '@react-types/shared';
 import { useMultiSelectState } from './useMultiSelectState';
+import { Size } from '../common/types';
 import * as React from 'react';
 export type OptionItem = {
     children?: never;
@@ -66,6 +67,10 @@ export type SelectProps = {
     /** Name of the field, for uncontrolled use */
     name?: string;
     errorPosition?: 'top' | 'bottom';
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     * */
+    size?: Size;
 };
 export declare const SelectComponent: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "children" | "items"> & {

package/skeleton/Skeleton.d.ts

@@ -1,9 +1,21 @@
 import * as React from 'react';
-type SkeletonProps = {
-    width?: string | number;
-    height?: string | number;
-    variant?: 'circle' | 'rectangular';
-    animation?: 'wave' | false;
-};
+export interface SkeletonProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    /**
+     * Use valid CSS [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length) units
+     */
+    width?: React.CSSProperties['width'];
+    /**
+     * Use valid CSS [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length) units
+     */
+    height?: React.CSSProperties['height'];
+    /**
+     * Circular or rectangular Skeleton component. When using circle, only `width` is allowed to control size.
+     */
+    variant?: 'circle' | 'rectangle';
+    /**
+     * Displays the skeleton component with a wave animation
+     * @default true
+     */
+    isAnimated?: boolean;
+}
 export declare const Skeleton: React.FC<SkeletonProps>;
-export {};

package/spinner/Spinner.d.ts

@@ -7,10 +7,5 @@ export interface SpinnerProps {
      * @default false
      */
     isOnColor?: boolean;
-    /** For use on dark background
-     * @default false
-     * @deprecated since v8.0.0 please use `isOnColor` instead
-     */
-    dark?: boolean;
 }
 export declare const Spinner: React.FC<SpinnerProps>;

package/table/Table.d.ts

@@ -1,7 +1,7 @@
 import { RowProps, TableHeaderProps, ColumnProps, TableProps as AriaTableProps, CellProps, TableBody } from 'react-aria-components';
 export interface TableProps extends AriaTableProps {
     /**
-     *  @deprecated since v8.0.0 This variant will be replaced with a new scaling api accross all components.
+     *  A more compact version of the table
      */
     narrow?: boolean;
     /**

package/tabs/Tabs.d.ts

@@ -13,10 +13,5 @@ export interface TabsProps extends Omit<AriaTabsProps, 'orientation'> {
      * Amount of children must match the amount of tabs
      */
     children: React.ReactNode;
-    /**
-     * @deprecated since v8.0.0
-     * Please use `defaultSelectedKey` instead
-     */
-    defaultSelected?: string;
 }
 export declare const Tabs: React.FC<TabsProps>;

package/textfield/TextArea.d.ts

@@ -1,7 +1,10 @@
 import { TextFieldBaseProps } from './TextFieldBase';
 import { TextAreaProps as AriaTextAreaProps } from 'react-aria-components';
 import * as React from 'react';
-export interface TextAreaProps extends Omit<TextFieldBaseProps, 'children' | 'type'> {
+export interface TextAreaProps extends Omit<TextFieldBaseProps, 'children' | 'type' | 'pattern'> {
     className?: AriaTextAreaProps['className'];
+    form?: string;
+    rows?: number;
+    wrap?: string;
 }
 export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/textfield/TextField.d.ts

@@ -3,5 +3,7 @@ import { InputProps } from './Input';
 import * as React from 'react';
 export interface TextFieldProps extends Omit<TextFieldBaseProps, 'children'> {
     className?: InputProps['className'];
+    form?: string;
+    list?: string;
 }
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;

package/textfield/TextFieldBase.d.ts

@@ -1,6 +1,6 @@
 import { TextFieldProps, ValidationResult } from 'react-aria-components';
+import { Size } from '../common/types';
 import * as React from 'react';
-export type Size = 'medium' | 'large';
 export interface TextFieldBaseProps extends Omit<TextFieldProps, 'className'> {
     children?: React.ReactNode;
     /** Specify label displayed above the TextField*/

package/theme/index.d.ts

@@ -28,14 +28,18 @@ export declare const theme: {
         blue10: string;
         blue20: string;
         blue40: string;
+        blue50: string;
         blue60: string;
+        blue70: string;
         blue80: string;
         blue90: string;
         blue100: string;
-        blue140: string;
-        blue170: string;
+        blue110: string;
+        blue120: string;
+        blue130: string;
+        blue150: string;
         purple80: string;
-        purple140: string;
+        purple110: string;
         red100: string;
         signalBlue10: string;
         signalBlue100: string;
@@ -44,34 +48,49 @@ export declare const theme: {
         signalGreen100: string;
         signalYellow10: string;
         signalYellow100: string;
+        signalRed10: string;
         signalRed20: string;
         signalRed30: string;
+        signalRed40: string;
+        signalRed50: string;
+        signalRed60: string;
+        signalRed70: string;
         signalRed80: string;
+        signalRed90: string;
         signalRed100: string;
+        signalRed110: string;
+        signalRed120: string;
+        signalRed130: string;
+        signalRed140: string;
+        signalRed150: string;
         signalRed160: string;
+        signalRed170: string;
         signalRed180: string;
+        signalRed190: string;
+        signalRed200: string;
     };
     typography: {
         fontFamily: string;
-        lineHeight01: number;
-        lineHeight02: number;
-        lineHeight03: number;
-        lineHeight04: number;
-        lineHeight05: number;
-        lineHeight06: number;
-        lineHeight07: number;
-        lineHeight08: number;
-        lineHeight09: number;
-        size01: string;
-        size02: string;
-        size03: string;
-        size04: string;
-        size05: string;
-        size06: string;
-        size07: string;
-        size08: string;
-        size09: string;
-        size10: string;
+        lineHeight10: number;
+        lineHeight20: number;
+        lineHeight30: number;
+        lineHeight40: number;
+        lineHeight50: number;
+        lineHeight60: number;
+        lineHeight70: number;
+        lineHeight80: number;
+        lineHeight90: number;
+        lineHeight100: number;
+        fontSize10: string;
+        fontSize20: string;
+        fontSize30: string;
+        fontSize40: string;
+        fontSize50: string;
+        fontSize60: string;
+        fontSize70: string;
+        fontSize80: string;
+        fontSize90: string;
+        fontSize100: string;
         weightThin: number;
         weightExtraLight: number;
         weightLight: number;
@@ -83,18 +102,18 @@ export declare const theme: {
         weightBlack: number;
     };
     spacing: {
-        '01': string;
-        '02': string;
-        '03': string;
-        '04': string;
-        '05': string;
-        '06': string;
-        '07': string;
-        '08': string;
-        '09': string;
         '10': string;
-        '11': string;
-        '12': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '100': string;
+        '110': string;
+        '120': string;
     };
     states: {
         focus: string;
@@ -141,7 +160,6 @@ export declare const theme: {
         borderSecondary: string;
         borderSubtle: string;
         borderTertiary: string;
-        borderInvalid: string;
         borderDisabled: string;
         field01: string;
         fieldHover01: string;
@@ -181,7 +199,7 @@ export declare const theme: {
         textOnColor: string;
         textInverse: string;
         textDisabled: string;
-        textInvalid: string;
+        textWarning: string;
         textPlaceholder: string;
         buttonBackgroundPrimary: string;
         buttonBackgroundPrimaryHover: string;

package/theme/tokens.d.ts

@@ -26,14 +26,18 @@ export declare const baseColors: {
     blue10: string;
     blue20: string;
     blue40: string;
+    blue50: string;
     blue60: string;
+    blue70: string;
     blue80: string;
     blue90: string;
     blue100: string;
-    blue140: string;
-    blue170: string;
+    blue110: string;
+    blue120: string;
+    blue130: string;
+    blue150: string;
     purple80: string;
-    purple140: string;
+    purple110: string;
     red100: string;
     signalBlue10: string;
     signalBlue100: string;
@@ -42,34 +46,49 @@ export declare const baseColors: {
     signalGreen100: string;
     signalYellow10: string;
     signalYellow100: string;
+    signalRed10: string;
     signalRed20: string;
     signalRed30: string;
+    signalRed40: string;
+    signalRed50: string;
+    signalRed60: string;
+    signalRed70: string;
     signalRed80: string;
+    signalRed90: string;
     signalRed100: string;
+    signalRed110: string;
+    signalRed120: string;
+    signalRed130: string;
+    signalRed140: string;
+    signalRed150: string;
     signalRed160: string;
+    signalRed170: string;
     signalRed180: string;
+    signalRed190: string;
+    signalRed200: string;
 };
 export declare const typography: {
     fontFamily: string;
-    lineHeight01: number;
-    lineHeight02: number;
-    lineHeight03: number;
-    lineHeight04: number;
-    lineHeight05: number;
-    lineHeight06: number;
-    lineHeight07: number;
-    lineHeight08: number;
-    lineHeight09: number;
-    size01: string;
-    size02: string;
-    size03: string;
-    size04: string;
-    size05: string;
-    size06: string;
-    size07: string;
-    size08: string;
-    size09: string;
-    size10: string;
+    lineHeight10: number;
+    lineHeight20: number;
+    lineHeight30: number;
+    lineHeight40: number;
+    lineHeight50: number;
+    lineHeight60: number;
+    lineHeight70: number;
+    lineHeight80: number;
+    lineHeight90: number;
+    lineHeight100: number;
+    fontSize10: string;
+    fontSize20: string;
+    fontSize30: string;
+    fontSize40: string;
+    fontSize50: string;
+    fontSize60: string;
+    fontSize70: string;
+    fontSize80: string;
+    fontSize90: string;
+    fontSize100: string;
     weightThin: number;
     weightExtraLight: number;
     weightLight: number;
@@ -81,18 +100,18 @@ export declare const typography: {
     weightBlack: number;
 };
 export declare const spacing: {
-    '01': string;
-    '02': string;
-    '03': string;
-    '04': string;
-    '05': string;
-    '06': string;
-    '07': string;
-    '08': string;
-    '09': string;
     '10': string;
-    '11': string;
-    '12': string;
+    '20': string;
+    '30': string;
+    '40': string;
+    '50': string;
+    '60': string;
+    '70': string;
+    '80': string;
+    '90': string;
+    '100': string;
+    '110': string;
+    '120': string;
 };
 export declare const states: {
     focus: string;
@@ -139,7 +158,6 @@ export declare const semantic: {
     borderSecondary: string;
     borderSubtle: string;
     borderTertiary: string;
-    borderInvalid: string;
     borderDisabled: string;
     field01: string;
     fieldHover01: string;
@@ -179,7 +197,7 @@ export declare const semantic: {
     textOnColor: string;
     textInverse: string;
     textDisabled: string;
-    textInvalid: string;
+    textWarning: string;
     textPlaceholder: string;
     buttonBackgroundPrimary: string;
     buttonBackgroundPrimaryHover: string;

package/theme.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tokens-B6mMZ0T6.cjs"),s={...e.tokens};exports.baseColors=e.baseColors;exports.breakpoints=e.breakpoints;exports.semantic=e.semantic;exports.spacing=e.spacing;exports.states=e.states;exports.transitions=e.transitions;exports.typography=e.typography;exports.windowSizes=e.windowSizes;exports.zIndex=e.zIndex;exports.theme=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tokens-COoF1t17.cjs"),s={...e.tokens};exports.baseColors=e.baseColors;exports.breakpoints=e.breakpoints;exports.semantic=e.semantic;exports.spacing=e.spacing;exports.states=e.states;exports.transitions=e.transitions;exports.typography=e.typography;exports.windowSizes=e.windowSizes;exports.zIndex=e.zIndex;exports.theme=s;

package/theme.js

@@ -1,5 +1,5 @@
-import { t as s } from "./tokens-CEzXihhV.js";
-import { b as n, f as r, s as i, c as p, d as m, e as c, a as b, w as d, z as f } from "./tokens-CEzXihhV.js";
+import { t as s } from "./tokens-C0U7hdoO.js";
+import { b as n, f as r, s as i, c as p, d as m, e as c, a as b, w as d, z as f } from "./tokens-C0U7hdoO.js";
 const t = { ...s };
 export {
   n as baseColors,