@arkitektbedriftene/fe-lib 7.1.1 → 7.2.0

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 (3) hide show
  1. package/dist/ui/components/Form/Checkbox.d.ts +128 -128
  2. package/dist/ui.es.js +10 -9
  3. package/package.json +1 -1
package/dist/ui/components/Form/Checkbox.d.ts CHANGED
@@ -1,134 +1,134 @@
1
- import { ComponentProps, ReactNode } from 'react';
1
+ import { ReactNode } from 'react';
2
2
  import * as RCheckbox from "@radix-ui/react-checkbox";
3
- declare const Root: import('@stitches/react/types/styled-component').StyledComponent<import('react').ForwardRefExoticComponent<RCheckbox.CheckboxProps & import('react').RefAttributes<HTMLButtonElement>>, {
3
+ export declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<{
4
+ label?: string | ReactNode;
5
+ } & Omit<RCheckbox.CheckboxProps & import('react').RefAttributes<HTMLButtonElement>, "color" | "css" | "size"> & import('@stitches/react/types/styled-component').TransformProps<{
4
6
  size?: "sm" | "md" | "lg" | undefined;
5
- color?: "primary" | "secondary" | undefined;
7
+ color?: "primary" | "secondary" | "danger" | undefined;
6
8
  }, {
7
9
  md: "(min-width: 768px)";
8
10
  lg: "(min-width: 1200px)";
9
11
  print: "print";
10
- }, import('@stitches/react/types/css-util').CSS<{
11
- md: "(min-width: 768px)";
12
- lg: "(min-width: 1200px)";
13
- print: "print";
14
- }, {
15
- colors: {
16
- black: "#1d1d1d";
17
- white: "#fff";
18
- gray50: "#F9FAFA";
19
- gray100: "#EBEEEE";
20
- gray200: "#CFD6D7";
21
- gray300: "#B3BEC0";
22
- gray400: "#97A6A8";
23
- gray500: "#7C8E91";
24
- gray600: "#627578";
25
- gray700: "#4F5F61";
26
- gray800: "#414D4F";
27
- gray900: "#2C3435";
28
- blue50: "#F7FBFB";
29
- blue100: "#E3F0F2";
30
- blue200: "#BADADF";
31
- blue300: "#92C5CC";
32
- blue400: "#67AEB8";
33
- blue500: "#3C97A3";
34
- blue600: "#1F7D8A";
35
- blue700: "#19656F";
36
- blue800: "#14525B";
37
- blue900: "#0E383E";
38
- yellow50: "#FDFAEF";
39
- yellow100: "#F9EDCA";
40
- yellow200: "#EFD27A";
41
- yellow300: "#E5B626";
42
- yellow400: "#C89E1C";
43
- yellow500: "#AA8618";
44
- yellow600: "#8C6E14";
45
- yellow700: "#715910";
46
- yellow800: "#5C490D";
47
- yellow900: "#3E3109";
48
- orange500: "#D1721C";
49
- red50: "#FDF9F9";
50
- red100: "#F7EBEB";
51
- red200: "#EBCECD";
52
- red300: "#DFB1B0";
53
- red400: "#D39392";
54
- red500: "#C67473";
55
- red600: "#B85250";
56
- red700: "#A92F2D";
57
- red800: "#901F1E";
58
- red900: "#631614";
59
- green50: "#F8FAF9";
60
- green100: "#E7F0EA";
61
- green200: "#C5D9CB";
62
- green300: "#A4C4AD";
63
- green400: "#82AD8D";
64
- green500: "#60976F";
65
- green600: "#3C7F4E";
66
- green700: "#296839";
67
- green800: "#21552F";
68
- green900: "#163920";
69
- primaryTextOnLightBg: "#194b58";
70
- primaryBg: "$blue600";
71
- primaryBgHover: "$blue700";
72
- primaryTextOnWhite: "$blue600";
73
- bodyGray: "$gray100";
74
- hoverDarker: "hsla(214deg, 25%, 21%, 0.06)";
75
- borderDarker: "hsla(214deg, 25%, 21%, 0.1)";
76
- selectedDarker: "hsla(214deg, 25%, 21%, 0.06)";
77
- selectedOnBodyGray: "hsl(214deg, 35%, 80%)";
78
- darkGrayBg: "#1f2937";
79
- border: "hsl(214deg, 25%, 80%)";
80
- text: "#1f2937";
81
- secondaryText: "$gray500";
82
- focusRing: "hsla(214deg, 15%, 10%, 0.6)";
83
- flask: "#122a0d";
84
- flaskHover: "#173611";
85
- clay: "#eee6d3";
86
- clayHover: "#d6c9b6";
87
- sand: "#f3f1eb";
88
- sandHover: "#e6dfce";
89
- };
90
- fontSizes: {
91
- xs: "0.75rem";
92
- sm: "0.875rem";
93
- md: "1rem";
94
- lg: "1.125rem";
95
- xl: "1.25rem";
96
- "2xl": "1.5rem";
97
- "3xl": "1.875rem";
98
- };
99
- fontWeights: {
100
- normal: "var(--ui-font-weight-normal, 400)";
101
- medium: "var(--ui-font-weight-semibold, 500)";
102
- bold: "var(--ui-font-weight-bold, 700)";
103
- };
104
- space: {
105
- 1: "0.25rem";
106
- 2: "0.5rem";
107
- 3: "0.75rem";
108
- 4: "1rem";
109
- 6: "1.5rem";
110
- 8: "2rem";
111
- };
112
- shadows: {
113
- xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
114
- sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
115
- md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
116
- lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
117
- overlayCard: "0 5px 50px 0px rgb(0 0 0 / 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
118
- };
119
- radii: {
120
- xs: "0.125rem";
121
- sm: "0.25rem";
122
- md: "0.5rem";
123
- mdmd: "calc(0.5rem - 0.125rem)";
124
- full: "9999px";
125
- };
126
- zIndices: {
127
- toast: number;
128
- overlayCard: number;
129
- };
130
- }, import('@stitches/react/types/config').DefaultThemeMap, {}>>;
131
- export declare const Checkbox: ({ id, size, label, ...props }: {
132
- label?: string | ReactNode;
133
- } & ComponentProps<typeof Root>) => import("react/jsx-runtime").JSX.Element;
134
- export {};
12
+ }> & {
13
+ css?: import('@stitches/react/types/css-util').CSS<{
14
+ md: "(min-width: 768px)";
15
+ lg: "(min-width: 1200px)";
16
+ print: "print";
17
+ }, {
18
+ colors: {
19
+ black: "#1d1d1d";
20
+ white: "#fff";
21
+ gray50: "#F9FAFA";
22
+ gray100: "#EBEEEE";
23
+ gray200: "#CFD6D7";
24
+ gray300: "#B3BEC0";
25
+ gray400: "#97A6A8";
26
+ gray500: "#7C8E91";
27
+ gray600: "#627578";
28
+ gray700: "#4F5F61";
29
+ gray800: "#414D4F";
30
+ gray900: "#2C3435";
31
+ blue50: "#F7FBFB";
32
+ blue100: "#E3F0F2";
33
+ blue200: "#BADADF";
34
+ blue300: "#92C5CC";
35
+ blue400: "#67AEB8";
36
+ blue500: "#3C97A3";
37
+ blue600: "#1F7D8A";
38
+ blue700: "#19656F";
39
+ blue800: "#14525B";
40
+ blue900: "#0E383E";
41
+ yellow50: "#FDFAEF";
42
+ yellow100: "#F9EDCA";
43
+ yellow200: "#EFD27A";
44
+ yellow300: "#E5B626";
45
+ yellow400: "#C89E1C";
46
+ yellow500: "#AA8618";
47
+ yellow600: "#8C6E14";
48
+ yellow700: "#715910";
49
+ yellow800: "#5C490D";
50
+ yellow900: "#3E3109";
51
+ orange500: "#D1721C";
52
+ red50: "#FDF9F9";
53
+ red100: "#F7EBEB";
54
+ red200: "#EBCECD";
55
+ red300: "#DFB1B0";
56
+ red400: "#D39392";
57
+ red500: "#C67473";
58
+ red600: "#B85250";
59
+ red700: "#A92F2D";
60
+ red800: "#901F1E";
61
+ red900: "#631614";
62
+ green50: "#F8FAF9";
63
+ green100: "#E7F0EA";
64
+ green200: "#C5D9CB";
65
+ green300: "#A4C4AD";
66
+ green400: "#82AD8D";
67
+ green500: "#60976F";
68
+ green600: "#3C7F4E";
69
+ green700: "#296839";
70
+ green800: "#21552F";
71
+ green900: "#163920";
72
+ primaryTextOnLightBg: "#194b58";
73
+ primaryBg: "$blue600";
74
+ primaryBgHover: "$blue700";
75
+ primaryTextOnWhite: "$blue600";
76
+ bodyGray: "$gray100";
77
+ hoverDarker: "hsla(214deg, 25%, 21%, 0.06)";
78
+ borderDarker: "hsla(214deg, 25%, 21%, 0.1)";
79
+ selectedDarker: "hsla(214deg, 25%, 21%, 0.06)";
80
+ selectedOnBodyGray: "hsl(214deg, 35%, 80%)";
81
+ darkGrayBg: "#1f2937";
82
+ border: "hsl(214deg, 25%, 80%)";
83
+ text: "#1f2937";
84
+ secondaryText: "$gray500";
85
+ focusRing: "hsla(214deg, 15%, 10%, 0.6)";
86
+ flask: "#122a0d";
87
+ flaskHover: "#173611";
88
+ clay: "#eee6d3";
89
+ clayHover: "#d6c9b6";
90
+ sand: "#f3f1eb";
91
+ sandHover: "#e6dfce";
92
+ };
93
+ fontSizes: {
94
+ xs: "0.75rem";
95
+ sm: "0.875rem";
96
+ md: "1rem";
97
+ lg: "1.125rem";
98
+ xl: "1.25rem";
99
+ "2xl": "1.5rem";
100
+ "3xl": "1.875rem";
101
+ };
102
+ fontWeights: {
103
+ normal: "var(--ui-font-weight-normal, 400)";
104
+ medium: "var(--ui-font-weight-semibold, 500)";
105
+ bold: "var(--ui-font-weight-bold, 700)";
106
+ };
107
+ space: {
108
+ 1: "0.25rem";
109
+ 2: "0.5rem";
110
+ 3: "0.75rem";
111
+ 4: "1rem";
112
+ 6: "1.5rem";
113
+ 8: "2rem";
114
+ };
115
+ shadows: {
116
+ xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
117
+ sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
118
+ md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
119
+ lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
120
+ overlayCard: "0 5px 50px 0px rgb(0 0 0 / 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
121
+ };
122
+ radii: {
123
+ xs: "0.125rem";
124
+ sm: "0.25rem";
125
+ md: "0.5rem";
126
+ mdmd: "calc(0.5rem - 0.125rem)";
127
+ full: "9999px";
128
+ };
129
+ zIndices: {
130
+ toast: number;
131
+ overlayCard: number;
132
+ };
133
+ }, import('@stitches/react/types/config').DefaultThemeMap, {}> | undefined;
134
+ }, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
package/dist/ui.es.js CHANGED
@@ -1175,6 +1175,12 @@ const bo = h({
1175
1175
  "&[data-state=checked], &[data-state=indeterminate]": {
1176
1176
  backgroundColor: "$gray800"
1177
1177
  }
1178
+ },
1179
+ danger: {
1180
+ border: "2px solid $red600",
1181
+ "&[data-state=checked], &[data-state=indeterminate]": {
1182
+ backgroundColor: "$red500"
1183
+ }
1178
1184
  }
1179
1185
  }
1180
1186
  },
@@ -1213,21 +1219,16 @@ const bo = h({
1213
1219
  defaultVariants: {
1214
1220
  size: "md"
1215
1221
  }
1216
- }), Be = ({
1217
- id: o,
1218
- size: e,
1219
- label: r,
1220
- ...a
1221
- }) => {
1222
- const i = w();
1223
- return o = o || i, /* @__PURE__ */ c(d, { css: { display: "flex", alignItems: "center" }, children: [
1222
+ }), Be = u(({ id: o, size: e, label: r, ...a }, i) => {
1223
+ const s = w();
1224
+ return o = o || s, /* @__PURE__ */ c(d, { ref: i, css: { display: "flex", alignItems: "center" }, children: [
1224
1225
  /* @__PURE__ */ t(_o, { id: o, size: e, ...a, children: /* @__PURE__ */ c(qo, { children: [
1225
1226
  /* @__PURE__ */ t(uo, { "data-icon": "indeterminate" }),
1226
1227
  /* @__PURE__ */ t(go, { "data-icon": "checked" })
1227
1228
  ] }) }),
1228
1229
  r && /* @__PURE__ */ t(Jo, { htmlFor: o, size: e, children: r })
1229
1230
  ] });
1230
- }, Qo = n(W.Root, {
1231
+ }), Qo = n(W.Root, {
1231
1232
  width: "42px",
1232
1233
  height: "25px",
1233
1234
  backgroundColor: "$gray200",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arkitektbedriftene/fe-lib",
3
- "version": "7.1.1",
3
+ "version": "7.2.0",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  "./oidc": {