@bigtablet/design-system 1.13.0 → 1.14.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 (6) hide show
  1. package/dist/index.css +253 -222
  2. package/dist/index.d.ts +15 -4
  3. package/dist/index.js +223 -126
  4. package/dist/next.css +22 -22
  5. package/dist/next.js +62 -60
  6. package/package.json +11 -5
package/dist/next.css CHANGED
@@ -1,4 +1,4 @@
1
- /* src/ui/navigation/sidebar/style.scss */
1
+ /* src/ui/navigation/sidebar/style.module.scss */
2
2
  .sidebar {
3
3
  display: flex;
4
4
  flex-direction: column;
@@ -11,29 +11,29 @@
11
11
  overflow: hidden;
12
12
  transition: width 0.3s ease-in-out;
13
13
  }
14
- .sidebar.is_closed {
14
+ .is_closed {
15
15
  width: 56px;
16
16
  }
17
- .sidebar_brand {
17
+ .brand {
18
18
  padding: 0.5rem;
19
19
  margin-bottom: 0.5rem;
20
20
  border-bottom: 1px solid #e5e5e5;
21
21
  }
22
- .sidebar_brand_link {
22
+ .brand_link {
23
23
  display: flex;
24
24
  align-items: center;
25
25
  justify-content: space-between;
26
26
  align-items: center;
27
27
  }
28
- .sidebar_nav {
28
+ .nav {
29
29
  display: grid;
30
30
  gap: 0.25rem;
31
31
  }
32
- .sidebar_group {
32
+ .group {
33
33
  display: grid;
34
34
  gap: 0.25rem;
35
35
  }
36
- .sidebar_item {
36
+ .item {
37
37
  border: none;
38
38
  display: flex;
39
39
  align-items: center;
@@ -45,39 +45,39 @@
45
45
  background: transparent;
46
46
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
47
47
  }
48
- .sidebar_item:hover {
48
+ .item:hover {
49
49
  background: #fafafa;
50
50
  color: #1f2937;
51
51
  }
52
- .sidebar_item.is_active {
52
+ .item_active {
53
53
  background: #ffffff;
54
54
  color: #1f2937;
55
55
  box-shadow: inset 0 0 0 1px #e5e5e5;
56
56
  }
57
- .sidebar_item_left {
57
+ .item_left {
58
58
  display: flex;
59
59
  align-items: center;
60
60
  gap: 0.5rem;
61
61
  }
62
- .sidebar_item_right {
62
+ .item_right {
63
63
  display: flex;
64
64
  align-items: center;
65
65
  }
66
- .sidebar_icon {
66
+ .icon {
67
67
  display: grid;
68
68
  place-items: center;
69
69
  }
70
- .sidebar_chevron {
70
+ .chevron {
71
71
  transition: transform 0.2s ease-in-out;
72
72
  }
73
- .sidebar_chevron.is_open {
73
+ .chevron_open {
74
74
  transform: rotate(180deg);
75
75
  }
76
- .sidebar_label {
76
+ .label {
77
77
  font-size: 1rem;
78
78
  white-space: nowrap;
79
79
  }
80
- .sidebar_sub {
80
+ .sub {
81
81
  display: grid;
82
82
  gap: 0.25rem;
83
83
  padding-left: 0.75rem;
@@ -90,12 +90,12 @@
90
90
  opacity 0.2s ease-in-out,
91
91
  transform 0.2s ease-in-out;
92
92
  }
93
- .sidebar_sub.is_open {
93
+ .sub_open {
94
94
  max-height: 500px;
95
95
  opacity: 1;
96
96
  transform: translateY(0);
97
97
  }
98
- .sidebar_sub_item {
98
+ .sub_item {
99
99
  display: flex;
100
100
  align-items: center;
101
101
  gap: 0.75rem;
@@ -106,20 +106,20 @@
106
106
  background: transparent;
107
107
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
108
108
  }
109
- .sidebar_sub_item:hover {
109
+ .sub_item:hover {
110
110
  background: #fafafa;
111
111
  color: #1f2937;
112
112
  }
113
- .sidebar_sub_item.is_active {
113
+ .sub_item_active {
114
114
  color: #000000;
115
115
  font-weight: 500;
116
116
  }
117
- .sidebar_sub_icon {
117
+ .sub_icon {
118
118
  display: grid;
119
119
  place-items: center;
120
120
  color: #6b7280;
121
121
  }
122
- .sidebar_sub_label {
122
+ .sub_label {
123
123
  font-size: 0.875rem;
124
124
  white-space: nowrap;
125
125
  }
package/dist/next.js CHANGED
@@ -7,6 +7,9 @@ import { ChevronDown, CornerDownRight } from 'lucide-react';
7
7
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
8
8
 
9
9
  // src/ui/navigation/sidebar/index.tsx
10
+
11
+ // src/ui/navigation/sidebar/style.module.scss
12
+ var style_module_default = {};
10
13
  var Sidebar = ({
11
14
  items = [],
12
15
  activePath,
@@ -40,17 +43,18 @@ var Sidebar = ({
40
43
  (prev) => prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
41
44
  );
42
45
  };
46
+ const sidebarClassName = [
47
+ style_module_default.sidebar,
48
+ isOpen ? style_module_default.is_open : style_module_default.is_closed,
49
+ className ?? ""
50
+ ].filter(Boolean).join(" ");
43
51
  return /* @__PURE__ */ jsx(
44
52
  "aside",
45
53
  {
46
- className: [
47
- "sidebar",
48
- isOpen ? "is_open" : "is_closed",
49
- className ?? ""
50
- ].filter(Boolean).join(" "),
54
+ className: sidebarClassName,
51
55
  style,
52
56
  children: isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
53
- /* @__PURE__ */ jsx("div", { className: "sidebar_brand", children: /* @__PURE__ */ jsxs(Link, { href: brandHref, className: "sidebar_brand_link", children: [
57
+ /* @__PURE__ */ jsx("div", { className: style_module_default.brand, children: /* @__PURE__ */ jsxs(Link, { href: brandHref, className: style_module_default.brand_link, children: [
54
58
  /* @__PURE__ */ jsx("div", {}),
55
59
  /* @__PURE__ */ jsx(
56
60
  Image,
@@ -73,86 +77,84 @@ var Sidebar = ({
73
77
  }
74
78
  )
75
79
  ] }) }),
76
- /* @__PURE__ */ jsx("nav", { className: "sidebar_nav", children: items.map((item) => {
80
+ /* @__PURE__ */ jsx("nav", { className: style_module_default.nav, children: items.map((item) => {
77
81
  if (item.type === "group") {
78
82
  const open = openGroups.includes(item.id);
79
- return /* @__PURE__ */ jsxs("div", { className: "sidebar_group", children: [
83
+ const subClassName = [
84
+ style_module_default.sub,
85
+ open && style_module_default.sub_open
86
+ ].filter(Boolean).join(" ");
87
+ const chevronClassName = [
88
+ style_module_default.chevron,
89
+ open && style_module_default.chevron_open
90
+ ].filter(Boolean).join(" ");
91
+ return /* @__PURE__ */ jsxs("div", { className: style_module_default.group, children: [
80
92
  /* @__PURE__ */ jsxs(
81
93
  "button",
82
94
  {
83
95
  type: "button",
84
- className: "sidebar_item",
96
+ className: style_module_default.item,
85
97
  onClick: () => toggleGroup(item.id),
86
98
  children: [
87
- /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
88
- item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
89
- /* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
99
+ /* @__PURE__ */ jsxs("div", { className: style_module_default.item_left, children: [
100
+ item.icon && /* @__PURE__ */ jsx("span", { className: style_module_default.icon, children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
101
+ /* @__PURE__ */ jsx("span", { className: style_module_default.label, children: item.label })
90
102
  ] }),
91
- /* @__PURE__ */ jsx("span", { className: "sidebar_item_right", children: /* @__PURE__ */ jsx(
103
+ /* @__PURE__ */ jsx("span", { className: style_module_default.item_right, children: /* @__PURE__ */ jsx(
92
104
  ChevronDown,
93
105
  {
94
106
  size: 16,
95
- className: [
96
- "sidebar_chevron",
97
- open && "is_open"
98
- ].filter(Boolean).join(" ")
107
+ className: chevronClassName
99
108
  }
100
109
  ) })
101
110
  ]
102
111
  }
103
112
  ),
104
- /* @__PURE__ */ jsx(
105
- "div",
106
- {
107
- className: [
108
- "sidebar_sub",
109
- open && "is_open"
110
- ].filter(Boolean).join(" "),
111
- children: item.children.map((child) => {
112
- const active2 = isActive(
113
+ /* @__PURE__ */ jsx("div", { className: subClassName, children: item.children.map((child) => {
114
+ const active2 = isActive(
115
+ child.href
116
+ );
117
+ const subItemClassName = [
118
+ style_module_default.sub_item,
119
+ active2 && style_module_default.sub_item_active
120
+ ].filter(Boolean).join(" ");
121
+ return /* @__PURE__ */ jsxs(
122
+ Link,
123
+ {
124
+ href: child.href,
125
+ className: subItemClassName,
126
+ onClick: () => onItemSelect?.(
113
127
  child.href
114
- );
115
- return /* @__PURE__ */ jsxs(
116
- Link,
117
- {
118
- href: child.href,
119
- className: [
120
- "sidebar_sub_item",
121
- active2 && "is_active"
122
- ].filter(Boolean).join(" "),
123
- onClick: () => onItemSelect?.(
124
- child.href
125
- ),
126
- children: [
127
- /* @__PURE__ */ jsx("span", { className: "sidebar_sub_icon", children: /* @__PURE__ */ jsx(
128
- CornerDownRight,
129
- {
130
- size: 14
131
- }
132
- ) }),
133
- /* @__PURE__ */ jsx("span", { className: "sidebar_sub_label", children: child.label })
134
- ]
135
- },
136
- child.href
137
- );
138
- })
139
- }
140
- )
128
+ ),
129
+ children: [
130
+ /* @__PURE__ */ jsx("span", { className: style_module_default.sub_icon, children: /* @__PURE__ */ jsx(
131
+ CornerDownRight,
132
+ {
133
+ size: 14
134
+ }
135
+ ) }),
136
+ /* @__PURE__ */ jsx("span", { className: style_module_default.sub_label, children: child.label })
137
+ ]
138
+ },
139
+ child.href
140
+ );
141
+ }) })
141
142
  ] }, item.id);
142
143
  }
143
144
  const active = isActive(item.href);
145
+ const itemClassName = [
146
+ style_module_default.item,
147
+ active && style_module_default.item_active
148
+ ].filter(Boolean).join(" ");
144
149
  return /* @__PURE__ */ jsx(
145
150
  Link,
146
151
  {
147
152
  href: item.href,
148
- className: [
149
- "sidebar_item",
150
- active && "is_active"
151
- ].filter(Boolean).join(" "),
153
+ className: itemClassName,
152
154
  onClick: () => onItemSelect?.(item.href),
153
- children: /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
154
- item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
155
- /* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
155
+ children: /* @__PURE__ */ jsxs("div", { className: style_module_default.item_left, children: [
156
+ item.icon && /* @__PURE__ */ jsx("span", { className: style_module_default.icon, children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
157
+ /* @__PURE__ */ jsx("span", { className: style_module_default.label, children: item.label })
156
158
  ] })
157
159
  },
158
160
  item.href
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigtablet/design-system",
3
- "version": "1.13.0",
3
+ "version": "1.14.0",
4
4
  "description": "Bigtablet Design System UI Components",
5
5
  "type": "module",
6
6
  "types": "dist/index.d.ts",
@@ -66,25 +66,31 @@
66
66
  "@semantic-release/git": "^10.0.1",
67
67
  "@semantic-release/github": "^12.0.1",
68
68
  "@semantic-release/npm": "^13.1.1",
69
- "@storybook/react": "10.1.10",
70
- "@storybook/react-vite": "10.1.10",
69
+ "@storybook/addon-docs": "^10.1.11",
70
+ "@storybook/addon-vitest": "10.1.11",
71
+ "@storybook/react": "10.1.11",
72
+ "@storybook/react-vite": "10.1.11",
71
73
  "@types/node": "^24",
72
74
  "@types/react": "^19",
73
75
  "@types/react-dom": "^19",
76
+ "@vitest/browser-playwright": "^4.0.17",
77
+ "@vitest/coverage-v8": "^4.0.17",
74
78
  "chromatic": "^13.3.3",
75
79
  "conventional-changelog-conventionalcommits": "^9.1.0",
76
80
  "esbuild-sass-plugin": "^3",
77
81
  "lucide-react": "^0.552.0",
78
82
  "next": "16.0.10",
83
+ "playwright": "^1.57.0",
79
84
  "react": "19.2.0",
80
85
  "react-dom": "19.2.0",
81
86
  "react-toastify": "^11.0.5",
82
87
  "sass-embedded": "^1.93.3",
83
88
  "semantic-release": "^25.0.1",
84
- "storybook": "10.1.10",
89
+ "storybook": "10.1.11",
85
90
  "tsup": "^8.5.0",
86
91
  "typescript": "^5",
87
- "vite": "^5"
92
+ "vite": "^5",
93
+ "vitest": "^4.0.17"
88
94
  },
89
95
  "publishConfig": {
90
96
  "access": "public",