@serendie/ui 2.2.5-dev.202510301500 → 2.2.5

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.
@@ -40,7 +40,7 @@ export declare const ButtonStyle: import('../../../styled-system/types').RecipeR
40
40
  bgColor: "sd.system.color.interaction.hoveredVariant";
41
41
  outlineWidth: "sd.system.dimension.border.medium";
42
42
  outlineStyle: "solid";
43
- outlineColor: "sd.system.color.component.outlineDim";
43
+ outlineColor: "sd.system.color.component.outlineVariant";
44
44
  };
45
45
  };
46
46
  _disabled: {
@@ -16,7 +16,7 @@ const d = {
16
16
  bgColor: "sd.system.color.interaction.hoveredVariant"
17
17
  },
18
18
  _focusVisible: {
19
- outlineColor: "sd.system.color.component.outlineDim",
19
+ outlineColor: "sd.system.color.component.outlineVariant",
20
20
  bgColor: "sd.system.color.interaction.hoveredVariant"
21
21
  }
22
22
  },
@@ -25,7 +25,7 @@ const d = {
25
25
  color: "sd.system.color.interaction.disabledOnSurface",
26
26
  outline: "none"
27
27
  }
28
- }, l = h({
28
+ }, a = h({
29
29
  base: {
30
30
  borderRadius: "sd.system.dimension.radius.full",
31
31
  position: "relative",
@@ -80,7 +80,7 @@ const d = {
80
80
  bgColor: "sd.system.color.interaction.hoveredVariant",
81
81
  outlineWidth: "sd.system.dimension.border.medium",
82
82
  outlineStyle: "solid",
83
- outlineColor: "sd.system.color.component.outlineDim"
83
+ outlineColor: "sd.system.color.component.outlineVariant"
84
84
  }
85
85
  },
86
86
  _disabled: {
@@ -118,17 +118,17 @@ const d = {
118
118
  styleType: "filled",
119
119
  size: "medium"
120
120
  }
121
- }), t = v("span", {
121
+ }), i = v("span", {
122
122
  base: {
123
123
  position: "relative",
124
124
  zIndex: "sd.system.elevation.zIndex.base"
125
125
  }
126
126
  }), R = b.forwardRef(
127
- (n, a) => {
127
+ (n, l) => {
128
128
  const [
129
129
  r,
130
- { children: m, leftIcon: e, rightIcon: s, isLoading: i, className: c, ...y }
131
- ] = l.splitVariantProps(n), p = l(r), u = x(
130
+ { children: m, leftIcon: e, rightIcon: s, isLoading: t, className: c, ...y }
131
+ ] = a.splitVariantProps(n), p = a(r), u = x(
132
132
  e || s ? n.size === "medium" ? {
133
133
  //アイコンがある側 `spacing.medium`、無い側は`spacing.extraLarge`
134
134
  paddingLeft: e ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge",
@@ -142,11 +142,11 @@ const d = {
142
142
  return /* @__PURE__ */ g(
143
143
  "button",
144
144
  {
145
- ref: a,
145
+ ref: l,
146
146
  className: _(p, u, c),
147
147
  ...y,
148
148
  children: [
149
- i && /* @__PURE__ */ o(
149
+ t && /* @__PURE__ */ o(
150
150
  f,
151
151
  {
152
152
  type: "circular",
@@ -154,9 +154,9 @@ const d = {
154
154
  color: "subtle"
155
155
  }
156
156
  ),
157
- !i && e && /* @__PURE__ */ o(t, { p: "2px", children: e }),
158
- /* @__PURE__ */ o(t, { children: m }),
159
- !i && s && /* @__PURE__ */ o(t, { p: "2px", children: s })
157
+ !t && e && /* @__PURE__ */ o(i, { p: "2px", children: e }),
158
+ /* @__PURE__ */ o(i, { children: m }),
159
+ !t && s && /* @__PURE__ */ o(i, { p: "2px", children: s })
160
160
  ]
161
161
  }
162
162
  );
@@ -164,5 +164,5 @@ const d = {
164
164
  );
165
165
  export {
166
166
  R as Button,
167
- l as ButtonStyle
167
+ a as ButtonStyle
168
168
  };
@@ -9,7 +9,7 @@ export declare const DividerStyle: import('../../../styled-system/types').Recipe
9
9
  borderColor: "sd.reference.color.scale.gray.300";
10
10
  };
11
11
  dark: {
12
- borderColor: "sd.system.color.component.outlineDim";
12
+ borderColor: "sd.system.color.component.outlineVariant";
13
13
  };
14
14
  };
15
15
  type: {
@@ -1,6 +1,6 @@
1
1
  import { jsx as d } from "react/jsx-runtime";
2
2
  import { cva as n } from "../../styled-system/css/cva.js";
3
- import { cx as l } from "../../styled-system/css/cx.js";
3
+ import { cx as a } from "../../styled-system/css/cx.js";
4
4
  const r = n({
5
5
  base: {
6
6
  border: "none"
@@ -14,7 +14,7 @@ const r = n({
14
14
  borderColor: "sd.reference.color.scale.gray.300"
15
15
  },
16
16
  dark: {
17
- borderColor: "sd.system.color.component.outlineDim"
17
+ borderColor: "sd.system.color.component.outlineVariant"
18
18
  }
19
19
  },
20
20
  type: {
@@ -38,8 +38,8 @@ const r = n({
38
38
  type: "horizontal"
39
39
  }
40
40
  }), h = (e) => {
41
- const [o, s] = r.splitVariantProps(e), { className: t, ...i } = s;
42
- return /* @__PURE__ */ d("hr", { className: l(r(o), t), ...i });
41
+ const [o, t] = r.splitVariantProps(e), { className: s, ...i } = t;
42
+ return /* @__PURE__ */ d("hr", { className: a(r(o), s), ...i });
43
43
  };
44
44
  export {
45
45
  h as Divider,
@@ -33,7 +33,7 @@ export declare const IconButtonStyle: import('../../../styled-system/types').Rec
33
33
  bgColor: "sd.system.color.interaction.hoveredVariant";
34
34
  };
35
35
  _focusVisible: {
36
- outlineColor: "sd.system.color.component.outlineDim";
36
+ outlineColor: "sd.system.color.component.outlineVariant";
37
37
  bgColor: "sd.system.color.interaction.hoveredVariant";
38
38
  };
39
39
  };
@@ -46,7 +46,7 @@ export declare const IconButtonStyle: import('../../../styled-system/types').Rec
46
46
  };
47
47
  _focusVisible: {
48
48
  bgColor: "sd.system.color.interaction.hoveredVariant";
49
- outlineColor: "sd.system.color.component.outlineDim";
49
+ outlineColor: "sd.system.color.component.outlineVariant";
50
50
  };
51
51
  };
52
52
  _disabled: {
@@ -1,8 +1,8 @@
1
1
  import { jsx as d } from "react/jsx-runtime";
2
- import c from "react";
3
- import { cva as a } from "../../styled-system/css/cva.js";
2
+ import a from "react";
3
+ import { cva as c } from "../../styled-system/css/cva.js";
4
4
  import { cx as m } from "../../styled-system/css/cx.js";
5
- const e = a({
5
+ const e = c({
6
6
  base: {
7
7
  position: "relative",
8
8
  display: "inline-flex",
@@ -58,7 +58,7 @@ const e = a({
58
58
  bgColor: "sd.system.color.interaction.hoveredVariant"
59
59
  },
60
60
  _focusVisible: {
61
- outlineColor: "sd.system.color.component.outlineDim",
61
+ outlineColor: "sd.system.color.component.outlineVariant",
62
62
  bgColor: "sd.system.color.interaction.hoveredVariant"
63
63
  }
64
64
  }
@@ -71,7 +71,7 @@ const e = a({
71
71
  },
72
72
  _focusVisible: {
73
73
  bgColor: "sd.system.color.interaction.hoveredVariant",
74
- outlineColor: "sd.system.color.component.outlineDim"
74
+ outlineColor: "sd.system.color.component.outlineVariant"
75
75
  }
76
76
  },
77
77
  _disabled: {
@@ -103,7 +103,7 @@ const e = a({
103
103
  styleType: "filled",
104
104
  size: "medium"
105
105
  }
106
- }), g = c.forwardRef(
106
+ }), g = a.forwardRef(
107
107
  ({ icon: o, className: s, ...r }, n) => {
108
108
  const [i, t] = e.splitVariantProps(r), l = e(i);
109
109
  return /* @__PURE__ */ d("button", { ref: n, className: m(l, s), ...t, children: o });
@@ -7,7 +7,7 @@ import { css as g } from "../../styled-system/css/css.js";
7
7
  import { RadioGroupItem as I } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";
8
8
  import { RadioGroupItemContext as S } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
9
9
  import { RadioGroupItemControl as b } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
10
- import { RadioGroupItemText as m } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-text.js";
10
+ import { RadioGroupItemText as c } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-text.js";
11
11
  import { RadioGroupItemHiddenInput as C } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-hidden-input.js";
12
12
  const k = {
13
13
  flexShrink: 0,
@@ -22,11 +22,11 @@ const k = {
22
22
  color: "color-mix(in srgb, {colors.sd.system.color.impression.primary}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
23
23
  }
24
24
  }, _ = {
25
- color: "sd.system.color.component.outlineDim",
25
+ color: "sd.system.color.component.outlineVariant",
26
26
  _disabled: {
27
- color: "color-mix(in srgb, {colors.sd.system.color.component.outlineDim}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
27
+ color: "color-mix(in srgb, {colors.sd.system.color.component.outlineVariant}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
28
28
  }
29
- }, c = f({
29
+ }, m = f({
30
30
  slots: [
31
31
  "item",
32
32
  "itemControl",
@@ -74,14 +74,14 @@ const k = {
74
74
  }
75
75
  }
76
76
  }
77
- }), V = ({
77
+ }), E = ({
78
78
  value: n,
79
79
  label: t,
80
80
  helperText: s,
81
81
  className: d,
82
82
  ...a
83
83
  }) => {
84
- const [l, p] = c.splitVariantProps(a), o = c(l), y = i(
84
+ const [l, p] = m.splitVariantProps(a), o = m(l), y = i(
85
85
  o.item,
86
86
  s && g({ alignItems: "flex-start" })
87
87
  );
@@ -94,8 +94,8 @@ const k = {
94
94
  children: [
95
95
  /* @__PURE__ */ e(S, { children: (u) => /* @__PURE__ */ e(b, { className: o.itemControl, asChild: !0, children: u.checked ? /* @__PURE__ */ e(x, { className: o.checkedIcon }) : /* @__PURE__ */ e(h, { className: o.unCheckedIcon }) }) }),
96
96
  /* @__PURE__ */ r("div", { className: o.itemTextGroup, children: [
97
- t && /* @__PURE__ */ e(m, { className: o.itemText, children: t }),
98
- s && /* @__PURE__ */ e(m, { className: o.helperText, children: s })
97
+ t && /* @__PURE__ */ e(c, { className: o.itemText, children: t }),
98
+ s && /* @__PURE__ */ e(c, { className: o.helperText, children: s })
99
99
  ] }),
100
100
  /* @__PURE__ */ e(C, {})
101
101
  ]
@@ -103,8 +103,8 @@ const k = {
103
103
  );
104
104
  };
105
105
  export {
106
- V as RadioButton,
107
- c as RadioButtonStyle,
106
+ E as RadioButton,
107
+ m as RadioButtonStyle,
108
108
  R as radioCheckedIconCss,
109
109
  k as radioIconCss,
110
110
  _ as radioUncheckedIconCss
@@ -464,13 +464,10 @@ const e = {
464
464
  inversePrimary: {
465
465
  value: "#EFF2FC"
466
466
  },
467
- outlineBright: {
468
- value: "#E4E4E3"
469
- },
470
467
  outline: {
471
468
  value: "#D1D0CD"
472
469
  },
473
- outlineDim: {
470
+ outlineVariant: {
474
471
  value: "#8C8B87"
475
472
  },
476
473
  scrim: {
@@ -1484,13 +1481,10 @@ const e = {
1484
1481
  inversePrimary: {
1485
1482
  value: "#D9F6FC"
1486
1483
  },
1487
- outlineBright: {
1488
- value: "#E4E4E3"
1489
- },
1490
1484
  outline: {
1491
1485
  value: "#D1D0CD"
1492
1486
  },
1493
- outlineDim: {
1487
+ outlineVariant: {
1494
1488
  value: "#8C8B87"
1495
1489
  },
1496
1490
  scrim: {
@@ -1779,13 +1773,10 @@ const e = {
1779
1773
  inversePrimary: {
1780
1774
  value: "#FAECE6"
1781
1775
  },
1782
- outlineBright: {
1783
- value: "#E4E4E3"
1784
- },
1785
1776
  outline: {
1786
1777
  value: "#D1D0CD"
1787
1778
  },
1788
- outlineDim: {
1779
+ outlineVariant: {
1789
1780
  value: "#8C8B87"
1790
1781
  },
1791
1782
  scrim: {
@@ -2074,13 +2065,10 @@ const e = {
2074
2065
  inversePrimary: {
2075
2066
  value: "#F4ECF6"
2076
2067
  },
2077
- outlineBright: {
2078
- value: "#E4E4E3"
2079
- },
2080
2068
  outline: {
2081
2069
  value: "#D1D0CD"
2082
2070
  },
2083
- outlineDim: {
2071
+ outlineVariant: {
2084
2072
  value: "#8C8B87"
2085
2073
  },
2086
2074
  scrim: {
@@ -2369,13 +2357,10 @@ const e = {
2369
2357
  inversePrimary: {
2370
2358
  value: "#FFF4F8"
2371
2359
  },
2372
- outlineBright: {
2373
- value: "#E4E4E3"
2374
- },
2375
2360
  outline: {
2376
2361
  value: "#D1D0CD"
2377
2362
  },
2378
- outlineDim: {
2363
+ outlineVariant: {
2379
2364
  value: "#8C8B87"
2380
2365
  },
2381
2366
  scrim: {
@@ -269,9 +269,8 @@ const e = {
269
269
  inverseSurface: "#232322",
270
270
  inverseOnSurface: "#FFFFFF",
271
271
  inversePrimary: "#EFF2FC",
272
- outlineBright: "#E4E4E3",
273
272
  outline: "#D1D0CD",
274
- outlineDim: "#8C8B87",
273
+ outlineVariant: "#8C8B87",
275
274
  scrim: "#00000033"
276
275
  },
277
276
  interaction: {
@@ -672,9 +671,8 @@ const e = {
672
671
  inverseSurface: "#232322",
673
672
  inverseOnSurface: "#FFFFFF",
674
673
  inversePrimary: "#D9F6FC",
675
- outlineBright: "#E4E4E3",
676
674
  outline: "#D1D0CD",
677
- outlineDim: "#8C8B87",
675
+ outlineVariant: "#8C8B87",
678
676
  scrim: "#00000033"
679
677
  },
680
678
  interaction: {
@@ -793,9 +791,8 @@ const e = {
793
791
  inverseSurface: "#232322",
794
792
  inverseOnSurface: "#FFFFFF",
795
793
  inversePrimary: "#FAECE6",
796
- outlineBright: "#E4E4E3",
797
794
  outline: "#D1D0CD",
798
- outlineDim: "#8C8B87",
795
+ outlineVariant: "#8C8B87",
799
796
  scrim: "#00000033"
800
797
  },
801
798
  interaction: {
@@ -914,9 +911,8 @@ const e = {
914
911
  inverseSurface: "#232322",
915
912
  inverseOnSurface: "#FFFFFF",
916
913
  inversePrimary: "#F4ECF6",
917
- outlineBright: "#E4E4E3",
918
914
  outline: "#D1D0CD",
919
- outlineDim: "#8C8B87",
915
+ outlineVariant: "#8C8B87",
920
916
  scrim: "#00000033"
921
917
  },
922
918
  interaction: {
@@ -1035,9 +1031,8 @@ const e = {
1035
1031
  inverseSurface: "#232322",
1036
1032
  inverseOnSurface: "#FFFFFF",
1037
1033
  inversePrimary: "#FFF4F8",
1038
- outlineBright: "#E4E4E3",
1039
1034
  outline: "#D1D0CD",
1040
- outlineDim: "#8C8B87",
1035
+ outlineVariant: "#8C8B87",
1041
1036
  scrim: "#00000033"
1042
1037
  },
1043
1038
  interaction: {
package/dist/preset.d.ts CHANGED
@@ -116,13 +116,10 @@ declare const themes: {
116
116
  inversePrimary: {
117
117
  value: string;
118
118
  };
119
- outlineBright: {
120
- value: string;
121
- };
122
119
  outline: {
123
120
  value: string;
124
121
  };
125
- outlineDim: {
122
+ outlineVariant: {
126
123
  value: string;
127
124
  };
128
125
  scrim: {
@@ -411,13 +408,10 @@ declare const themes: {
411
408
  inversePrimary: {
412
409
  value: string;
413
410
  };
414
- outlineBright: {
415
- value: string;
416
- };
417
411
  outline: {
418
412
  value: string;
419
413
  };
420
- outlineDim: {
414
+ outlineVariant: {
421
415
  value: string;
422
416
  };
423
417
  scrim: {
@@ -706,13 +700,10 @@ declare const themes: {
706
700
  inversePrimary: {
707
701
  value: string;
708
702
  };
709
- outlineBright: {
710
- value: string;
711
- };
712
703
  outline: {
713
704
  value: string;
714
705
  };
715
- outlineDim: {
706
+ outlineVariant: {
716
707
  value: string;
717
708
  };
718
709
  scrim: {
@@ -1001,13 +992,10 @@ declare const themes: {
1001
992
  inversePrimary: {
1002
993
  value: string;
1003
994
  };
1004
- outlineBright: {
1005
- value: string;
1006
- };
1007
995
  outline: {
1008
996
  value: string;
1009
997
  };
1010
- outlineDim: {
998
+ outlineVariant: {
1011
999
  value: string;
1012
1000
  };
1013
1001
  scrim: {
@@ -1797,13 +1785,10 @@ export declare const SerendiePreset: {
1797
1785
  inversePrimary: {
1798
1786
  value: string;
1799
1787
  };
1800
- outlineBright: {
1801
- value: string;
1802
- };
1803
1788
  outline: {
1804
1789
  value: string;
1805
1790
  };
1806
- outlineDim: {
1791
+ outlineVariant: {
1807
1792
  value: string;
1808
1793
  };
1809
1794
  scrim: {
@@ -567,17 +567,13 @@ const l = {
567
567
  value: "var(--colors-sd-system-color-component-inverse-primary)",
568
568
  variable: "var(--colors-sd-system-color-component-inverse-primary)"
569
569
  },
570
- "colors.sd.system.color.component.outlineBright": {
571
- value: "var(--colors-sd-system-color-component-outline-bright)",
572
- variable: "var(--colors-sd-system-color-component-outline-bright)"
573
- },
574
570
  "colors.sd.system.color.component.outline": {
575
571
  value: "var(--colors-sd-system-color-component-outline)",
576
572
  variable: "var(--colors-sd-system-color-component-outline)"
577
573
  },
578
- "colors.sd.system.color.component.outlineDim": {
579
- value: "var(--colors-sd-system-color-component-outline-dim)",
580
- variable: "var(--colors-sd-system-color-component-outline-dim)"
574
+ "colors.sd.system.color.component.outlineVariant": {
575
+ value: "var(--colors-sd-system-color-component-outline-variant)",
576
+ variable: "var(--colors-sd-system-color-component-outline-variant)"
581
577
  },
582
578
  "colors.sd.system.color.component.scrim": {
583
579
  value: "var(--colors-sd-system-color-component-scrim)",
@@ -3747,22 +3743,6 @@ const l = {
3747
3743
  value: "var(--colors-color-palette-inverse-primary)",
3748
3744
  variable: "var(--colors-color-palette-inverse-primary)"
3749
3745
  },
3750
- "colors.colorPalette.system.color.component.outlineBright": {
3751
- value: "var(--colors-color-palette-system-color-component-outline-bright)",
3752
- variable: "var(--colors-color-palette-system-color-component-outline-bright)"
3753
- },
3754
- "colors.colorPalette.color.component.outlineBright": {
3755
- value: "var(--colors-color-palette-color-component-outline-bright)",
3756
- variable: "var(--colors-color-palette-color-component-outline-bright)"
3757
- },
3758
- "colors.colorPalette.component.outlineBright": {
3759
- value: "var(--colors-color-palette-component-outline-bright)",
3760
- variable: "var(--colors-color-palette-component-outline-bright)"
3761
- },
3762
- "colors.colorPalette.outlineBright": {
3763
- value: "var(--colors-color-palette-outline-bright)",
3764
- variable: "var(--colors-color-palette-outline-bright)"
3765
- },
3766
3746
  "colors.colorPalette.system.color.component.outline": {
3767
3747
  value: "var(--colors-color-palette-system-color-component-outline)",
3768
3748
  variable: "var(--colors-color-palette-system-color-component-outline)"
@@ -3779,21 +3759,21 @@ const l = {
3779
3759
  value: "var(--colors-color-palette-outline)",
3780
3760
  variable: "var(--colors-color-palette-outline)"
3781
3761
  },
3782
- "colors.colorPalette.system.color.component.outlineDim": {
3783
- value: "var(--colors-color-palette-system-color-component-outline-dim)",
3784
- variable: "var(--colors-color-palette-system-color-component-outline-dim)"
3762
+ "colors.colorPalette.system.color.component.outlineVariant": {
3763
+ value: "var(--colors-color-palette-system-color-component-outline-variant)",
3764
+ variable: "var(--colors-color-palette-system-color-component-outline-variant)"
3785
3765
  },
3786
- "colors.colorPalette.color.component.outlineDim": {
3787
- value: "var(--colors-color-palette-color-component-outline-dim)",
3788
- variable: "var(--colors-color-palette-color-component-outline-dim)"
3766
+ "colors.colorPalette.color.component.outlineVariant": {
3767
+ value: "var(--colors-color-palette-color-component-outline-variant)",
3768
+ variable: "var(--colors-color-palette-color-component-outline-variant)"
3789
3769
  },
3790
- "colors.colorPalette.component.outlineDim": {
3791
- value: "var(--colors-color-palette-component-outline-dim)",
3792
- variable: "var(--colors-color-palette-component-outline-dim)"
3770
+ "colors.colorPalette.component.outlineVariant": {
3771
+ value: "var(--colors-color-palette-component-outline-variant)",
3772
+ variable: "var(--colors-color-palette-component-outline-variant)"
3793
3773
  },
3794
- "colors.colorPalette.outlineDim": {
3795
- value: "var(--colors-color-palette-outline-dim)",
3796
- variable: "var(--colors-color-palette-outline-dim)"
3774
+ "colors.colorPalette.outlineVariant": {
3775
+ value: "var(--colors-color-palette-outline-variant)",
3776
+ variable: "var(--colors-color-palette-outline-variant)"
3797
3777
  },
3798
3778
  "colors.colorPalette.system.color.component.scrim": {
3799
3779
  value: "var(--colors-color-palette-system-color-component-scrim)",