@midas-ds/components 17.23.0 → 17.23.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.
- package/CHANGELOG.md +6 -0
- package/assets/tabs.css +1 -1
- package/chunks/tabs-C08F_2gW.js +56 -0
- package/index.js +2 -2
- package/package.json +1 -1
- package/tabs/Tabs.stories.d.ts +1 -0
- package/tabs/index.js +1 -1
- package/chunks/tabs-CvnKD2lM.js +0 -52
package/CHANGELOG.md
CHANGED
package/assets/tabs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tabs_ninos_1{font-weight:var(--midas-typography-weight-regular);line-height:var(--midas-typography-line-height-30);font-family:var(--midas-typography-font-family);display:flex}._tabs_ninos_1[data-orientation=horizontal]{flex-direction:column}._tabList_ninos_12{display:flex}._tabList_ninos_12[data-orientation=vertical]{flex-direction:column}._tab_ninos_1{padding:var(--midas-space-70) var(--midas-space-medium);cursor:default;transition-duration:var(--midas-transition-duration-normal);forced-color-adjust:none;color:var(--midas-text-primary);outline:none;transition-property:color,border-color;position:relative}._tab_ninos_1[data-disabled]{border-color:var(--midas-border-color-disabled);color:var(--midas-text-disabled)}._tab_ninos_1[data-selected]{color:var(--midas-text-primary);font-weight:var(--midas-typography-weight-medium);forced-color-adjust:none}._tab_ninos_1[data-hovered]{cursor:pointer}._tab_ninos_1[data-focus-visible]{box-shadow:var(--midas-state-focus);outline:none}@media (forced-colors:active){._tab_ninos_1[data-focus-visible]{outline:var(--midas-state-focus-contrast-mode-outline) solid;outline-offset:var(--midas-state-focus-contrast-mode-offset)}}._tab_ninos_1._contained_ninos_55{background-color:var(--midas-layer-accent-01-base)}._tab_ninos_1._contained_ninos_55[data-selected]{background-color:var(--midas-layer-01-base)}._tab_ninos_1._contained_ninos_55[data-hovered]{background-color:var(--midas-layer-accent-01-hover)}._tab_ninos_1._contained_ninos_55[data-hovered][data-selected]{background-color:var(--midas-layer-01-hover)}._tab_ninos_1._contained_ninos_55:not([data-selected])+._tab_ninos_1._contained_ninos_55._contained_ninos_55:not([data-selected]){border-color:var(--midas-border-color-subtle)}._tab_ninos_1._medium_ninos_75{padding:var(--midas-space-50) var(--midas-space-small)}[data-orientation=horizontal] ._tab_ninos_1._contained_ninos_55{border-inline-start:1px solid #0000}[data-orientation=vertical] ._tab_ninos_1._contained_ninos_55{border-top:1px solid #0000}[data-orientation=horizontal] ._tab_ninos_1:not(._contained_ninos_55){border-bottom:1px solid var(--midas-border-color-subtle);margin-bottom:-1px}[data-orientation=vertical] ._tab_ninos_1:not(._contained_ninos_55){border-inline-end:1px solid var(--midas-border-color-subtle);margin-right:-1px}._selectionIndicator_ninos_98{position:absolute}._selectionIndicator_ninos_98._animated_ninos_101{transition-duration:var(--midas-transition-duration-normal);transition-property:translate,width,height}[data-orientation=horizontal] ._tab_ninos_1 ._selectionIndicator_ninos_98{border-bottom:3px solid var(--midas-border-color-tertiary);width:100%;bottom:0;left:0}[data-orientation=vertical] ._tab_ninos_1 ._selectionIndicator_ninos_98{border-inline-end:3px solid var(--midas-border-color-tertiary);height:100%;top:0;right:0}._tab_ninos_1 ._selectionIndicator_ninos_98._contained_ninos_55{z-index:var(--midas-z-index-base);border-width:2px}[data-orientation=horizontal] ._tab_ninos_1 ._selectionIndicator_ninos_98._contained_ninos_55{bottom:unset;top:0}[data-orientation=vertical] ._tab_ninos_1 ._selectionIndicator_ninos_98._contained_ninos_55{left:0;right:unset}._tabPanel_ninos_136{padding:var(--midas-space-medium);color:var(--midas-text-primary)}._tabPanel_ninos_136[data-focus-visible]{box-shadow:var(--midas-state-focus);outline:none}._tabPanel_ninos_136._contained_ninos_55{background-color:var(--midas-layer-01-base);--midas-field-base:var(--midas-field-02-base);--midas-field-hover:var(--midas-field-02-hover)}._tabPanel_ninos_136._medium_ninos_75{padding:var(--midas-space-small)}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { t as e } from "./clsx-BtlV5Vo3.js";
|
|
3
|
+
import * as t from "react";
|
|
4
|
+
import { createContext as n } from "react";
|
|
5
|
+
import { DialogContext as r, SelectionIndicator as i, Tab as a, TabList as o, TabPanel as s, Tabs as c, composeRenderProps as l } from "react-aria-components";
|
|
6
|
+
import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
|
|
7
|
+
import '../assets/tabs.css';//#region packages/components/src/tabs/TabsContext.ts
|
|
8
|
+
var p = n({
|
|
9
|
+
variant: "uncontained",
|
|
10
|
+
size: "large"
|
|
11
|
+
}), m = {
|
|
12
|
+
tabs: "_tabs_ninos_1",
|
|
13
|
+
tabList: "_tabList_ninos_12",
|
|
14
|
+
tab: "_tab_ninos_1",
|
|
15
|
+
contained: "_contained_ninos_55",
|
|
16
|
+
medium: "_medium_ninos_75",
|
|
17
|
+
selectionIndicator: "_selectionIndicator_ninos_98",
|
|
18
|
+
animated: "_animated_ninos_101",
|
|
19
|
+
tabPanel: "_tabPanel_ninos_136"
|
|
20
|
+
}, h = ({ className: t, variant: n = "uncontained", size: r = "large", ...i }) => /* @__PURE__ */ d(p.Provider, {
|
|
21
|
+
value: {
|
|
22
|
+
variant: n,
|
|
23
|
+
size: r
|
|
24
|
+
},
|
|
25
|
+
children: /* @__PURE__ */ d(c, {
|
|
26
|
+
className: e(m.tabs, t),
|
|
27
|
+
...i
|
|
28
|
+
})
|
|
29
|
+
}), g = ({ className: n, ...o }) => {
|
|
30
|
+
let { variant: s, size: c } = t.useContext(p), h = t.useContext(r);
|
|
31
|
+
return /* @__PURE__ */ d(a, {
|
|
32
|
+
...o,
|
|
33
|
+
className: e(m.tab, {
|
|
34
|
+
[m.contained]: s === "contained",
|
|
35
|
+
[m.medium]: c === "medium"
|
|
36
|
+
}, n),
|
|
37
|
+
children: l(o.children, (t) => /* @__PURE__ */ f(u, { children: [t, /* @__PURE__ */ d(i, { className: e(m.selectionIndicator, {
|
|
38
|
+
[m.contained]: s === "contained",
|
|
39
|
+
[m.animated]: !h
|
|
40
|
+
}) })] }))
|
|
41
|
+
});
|
|
42
|
+
}, _ = ({ className: n, ...r }) => {
|
|
43
|
+
let { variant: i, size: a } = t.useContext(p);
|
|
44
|
+
return /* @__PURE__ */ d(s, {
|
|
45
|
+
className: e(m.tabPanel, {
|
|
46
|
+
[m.contained]: i === "contained",
|
|
47
|
+
[m.medium]: a === "medium"
|
|
48
|
+
}, n),
|
|
49
|
+
...r
|
|
50
|
+
});
|
|
51
|
+
}, v = ({ className: t, ...n }) => /* @__PURE__ */ d(o, {
|
|
52
|
+
className: e(m.tabList, t),
|
|
53
|
+
...n
|
|
54
|
+
});
|
|
55
|
+
//#endregion
|
|
56
|
+
export { h as i, _ as n, g as r, v as t };
|
package/index.js
CHANGED
|
@@ -41,7 +41,7 @@ import { n as je, t as Me } from "./chunks/radio-CROWwbyc.js";
|
|
|
41
41
|
import { t as Ne } from "./chunks/select-pg3jFmch.js";
|
|
42
42
|
import { n as Pe, r as Fe, t as Ie } from "./chunks/tag-CELJrUEQ.js";
|
|
43
43
|
import { t as Le } from "./chunks/skeleton-OqKFBcmO.js";
|
|
44
|
-
import { i as Re, n as ze, r as Be, t as Ve } from "./chunks/tabs-
|
|
44
|
+
import { i as Re, n as ze, r as Be, t as Ve } from "./chunks/tabs-C08F_2gW.js";
|
|
45
45
|
import { i as He, n as Ue, r as We, t as Ge } from "./chunks/textfield-Bch4DRNl.js";
|
|
46
46
|
import { t as Ke } from "./chunks/time-field-BCZIgZEI.js";
|
|
47
47
|
import { a as qe, i as Je, n as Ye, o as Xe, r as Ze, t as Qe } from "./chunks/toast-AYzfHBcQ.js";
|
|
@@ -59,7 +59,7 @@ var $e = {
|
|
|
59
59
|
description: "Midas Components",
|
|
60
60
|
homepage: "https://designsystem.migrationsverket.se/",
|
|
61
61
|
license: "CC0-1.0",
|
|
62
|
-
version: "17.23.
|
|
62
|
+
version: "17.23.1",
|
|
63
63
|
module: "./index.js",
|
|
64
64
|
type: "module",
|
|
65
65
|
main: "./index.js",
|
package/package.json
CHANGED
package/tabs/Tabs.stories.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ export declare const Medium: Story;
|
|
|
25
25
|
export declare const Contained: Story;
|
|
26
26
|
export declare const Vertical: Story;
|
|
27
27
|
export declare const DisabledTabs: Story;
|
|
28
|
+
export declare const InModal: Story;
|
|
28
29
|
export declare const DefaultSelectedKey: Story;
|
|
29
30
|
export declare const Controlled: Story;
|
|
30
31
|
export declare const MoreItemsThanChildren: Story;
|
package/tabs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { i as e, n as t, r as n, t as r } from "../chunks/tabs-
|
|
1
|
+
import { i as e, n as t, r as n, t as r } from "../chunks/tabs-C08F_2gW.js";
|
|
2
2
|
export { n as Tab, r as TabList, t as TabPanel, e as Tabs };
|
package/chunks/tabs-CvnKD2lM.js
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { t as e } from "./clsx-BtlV5Vo3.js";
|
|
3
|
-
import * as t from "react";
|
|
4
|
-
import { createContext as n } from "react";
|
|
5
|
-
import { SelectionIndicator as r, Tab as i, TabList as a, TabPanel as o, Tabs as s, composeRenderProps as c } from "react-aria-components";
|
|
6
|
-
import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
7
|
-
import '../assets/tabs.css';//#region packages/components/src/tabs/TabsContext.ts
|
|
8
|
-
var f = n({
|
|
9
|
-
variant: "uncontained",
|
|
10
|
-
size: "large"
|
|
11
|
-
}), p = {
|
|
12
|
-
tabs: "_tabs_m2smu_1",
|
|
13
|
-
tabList: "_tabList_m2smu_12",
|
|
14
|
-
tab: "_tab_m2smu_1",
|
|
15
|
-
contained: "_contained_m2smu_55",
|
|
16
|
-
medium: "_medium_m2smu_75",
|
|
17
|
-
selectionIndicator: "_selectionIndicator_m2smu_98",
|
|
18
|
-
tabPanel: "_tabPanel_m2smu_133"
|
|
19
|
-
}, m = ({ className: t, variant: n = "uncontained", size: r = "large", ...i }) => /* @__PURE__ */ u(f.Provider, {
|
|
20
|
-
value: {
|
|
21
|
-
variant: n,
|
|
22
|
-
size: r
|
|
23
|
-
},
|
|
24
|
-
children: /* @__PURE__ */ u(s, {
|
|
25
|
-
className: e(p.tabs, t),
|
|
26
|
-
...i
|
|
27
|
-
})
|
|
28
|
-
}), h = ({ className: n, ...a }) => {
|
|
29
|
-
let { variant: o, size: s } = t.useContext(f);
|
|
30
|
-
return /* @__PURE__ */ u(i, {
|
|
31
|
-
...a,
|
|
32
|
-
className: e(p.tab, {
|
|
33
|
-
[p.contained]: o === "contained",
|
|
34
|
-
[p.medium]: s === "medium"
|
|
35
|
-
}, n),
|
|
36
|
-
children: c(a.children, (t) => /* @__PURE__ */ d(l, { children: [t, /* @__PURE__ */ u(r, { className: e(p.selectionIndicator, { [p.contained]: o === "contained" }) })] }))
|
|
37
|
-
});
|
|
38
|
-
}, g = ({ className: n, ...r }) => {
|
|
39
|
-
let { variant: i, size: a } = t.useContext(f);
|
|
40
|
-
return /* @__PURE__ */ u(o, {
|
|
41
|
-
className: e(p.tabPanel, {
|
|
42
|
-
[p.contained]: i === "contained",
|
|
43
|
-
[p.medium]: a === "medium"
|
|
44
|
-
}, n),
|
|
45
|
-
...r
|
|
46
|
-
});
|
|
47
|
-
}, _ = ({ className: t, ...n }) => /* @__PURE__ */ u(a, {
|
|
48
|
-
className: e(p.tabList, t),
|
|
49
|
-
...n
|
|
50
|
-
});
|
|
51
|
-
//#endregion
|
|
52
|
-
export { m as i, g as n, h as r, _ as t };
|