@social.io/catalog 1.3.0 → 2.0.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 (124) hide show
  1. package/.smartconfig.json +51 -0
  2. package/dist_bundle/bundle.js +5450 -3267
  3. package/dist_ts_web/00_commitinfo_data.js +3 -3
  4. package/dist_ts_web/elements/index.d.ts +20 -3
  5. package/dist_ts_web/elements/index.js +27 -7
  6. package/dist_ts_web/elements/sio-ai-card.d.ts +39 -0
  7. package/dist_ts_web/elements/sio-ai-card.js +229 -0
  8. package/dist_ts_web/elements/sio-avatar.d.ts +46 -0
  9. package/dist_ts_web/elements/sio-avatar.js +379 -0
  10. package/dist_ts_web/elements/sio-bucket-header.d.ts +36 -0
  11. package/dist_ts_web/elements/sio-bucket-header.js +197 -0
  12. package/dist_ts_web/elements/sio-button.d.ts +7 -3
  13. package/dist_ts_web/elements/sio-button.js +253 -152
  14. package/dist_ts_web/elements/sio-channel-rail.d.ts +37 -0
  15. package/dist_ts_web/elements/sio-channel-rail.js +275 -0
  16. package/dist_ts_web/elements/sio-chip.d.ts +25 -0
  17. package/dist_ts_web/elements/sio-chip.js +188 -0
  18. package/dist_ts_web/elements/sio-cmdk.d.ts +59 -0
  19. package/dist_ts_web/elements/sio-cmdk.js +471 -0
  20. package/dist_ts_web/elements/sio-combox.d.ts +55 -1
  21. package/dist_ts_web/elements/sio-combox.js +458 -261
  22. package/dist_ts_web/elements/sio-composer.d.ts +48 -0
  23. package/dist_ts_web/elements/sio-composer.js +357 -0
  24. package/dist_ts_web/elements/sio-conversation-selector.d.ts +41 -1
  25. package/dist_ts_web/elements/sio-conversation-selector.js +426 -238
  26. package/dist_ts_web/elements/sio-conversation-view.d.ts +34 -6
  27. package/dist_ts_web/elements/sio-conversation-view.js +738 -564
  28. package/dist_ts_web/elements/sio-dropdown-menu.d.ts +6 -6
  29. package/dist_ts_web/elements/sio-dropdown-menu.js +223 -169
  30. package/dist_ts_web/elements/sio-fab.d.ts +23 -5
  31. package/dist_ts_web/elements/sio-fab.js +259 -235
  32. package/dist_ts_web/elements/sio-glass-toolbar.d.ts +22 -0
  33. package/dist_ts_web/elements/sio-glass-toolbar.js +178 -0
  34. package/dist_ts_web/elements/sio-icon.d.ts +1 -0
  35. package/dist_ts_web/elements/sio-icon.js +254 -94
  36. package/dist_ts_web/elements/sio-image-lightbox.d.ts +3 -4
  37. package/dist_ts_web/elements/sio-image-lightbox.js +282 -191
  38. package/dist_ts_web/elements/sio-inset-list.d.ts +28 -0
  39. package/dist_ts_web/elements/sio-inset-list.js +191 -0
  40. package/dist_ts_web/elements/sio-kbd.d.ts +16 -0
  41. package/dist_ts_web/elements/sio-kbd.js +117 -0
  42. package/dist_ts_web/elements/sio-list-row.d.ts +55 -0
  43. package/dist_ts_web/elements/sio-list-row.js +462 -0
  44. package/dist_ts_web/elements/sio-message-input.d.ts +25 -4
  45. package/dist_ts_web/elements/sio-message-input.js +231 -226
  46. package/dist_ts_web/elements/sio-paper-thumb.d.ts +24 -0
  47. package/dist_ts_web/elements/sio-paper-thumb.js +293 -0
  48. package/dist_ts_web/elements/sio-pdf-viewer.d.ts +2 -0
  49. package/dist_ts_web/elements/sio-pdf-viewer.js +344 -244
  50. package/dist_ts_web/elements/sio-segmented.d.ts +32 -0
  51. package/dist_ts_web/elements/sio-segmented.js +217 -0
  52. package/dist_ts_web/elements/sio-step-timeline.d.ts +28 -0
  53. package/dist_ts_web/elements/sio-step-timeline.js +222 -0
  54. package/dist_ts_web/elements/sio-tab-bar.d.ts +36 -0
  55. package/dist_ts_web/elements/sio-tab-bar.js +232 -0
  56. package/dist_ts_web/elements/sio-unread-badge.d.ts +25 -0
  57. package/dist_ts_web/elements/sio-unread-badge.js +203 -0
  58. package/dist_ts_web/elements/sio-waveform.d.ts +34 -0
  59. package/dist_ts_web/elements/sio-waveform.js +304 -0
  60. package/dist_ts_web/elements/tokens.d.ts +70 -0
  61. package/dist_ts_web/elements/tokens.js +277 -0
  62. package/dist_ts_web/pages/firstpage.d.ts +5 -0
  63. package/dist_ts_web/pages/firstpage.js +21 -2
  64. package/dist_ts_web/pages/mainpage.d.ts +6 -0
  65. package/dist_ts_web/pages/mainpage.js +111 -39
  66. package/{license → license.md} +3 -1
  67. package/package.json +23 -29
  68. package/readme.hints.md +81 -0
  69. package/readme.md +85 -151
  70. package/ts_web/00_commitinfo_data.ts +2 -2
  71. package/ts_web/elements/index.ts +30 -7
  72. package/ts_web/elements/sio-ai-card.ts +175 -0
  73. package/ts_web/elements/sio-avatar.ts +295 -0
  74. package/ts_web/elements/sio-bucket-header.ts +157 -0
  75. package/ts_web/elements/sio-button.ts +149 -127
  76. package/ts_web/elements/sio-channel-rail.ts +243 -0
  77. package/ts_web/elements/sio-chip.ts +134 -0
  78. package/ts_web/elements/sio-cmdk.ts +461 -0
  79. package/ts_web/elements/sio-combox.ts +327 -204
  80. package/ts_web/elements/sio-composer.ts +306 -0
  81. package/ts_web/elements/sio-conversation-selector.ts +350 -228
  82. package/ts_web/elements/sio-conversation-view.ts +573 -457
  83. package/ts_web/elements/sio-dropdown-menu.ts +112 -130
  84. package/ts_web/elements/sio-fab.ts +192 -227
  85. package/ts_web/elements/sio-glass-toolbar.ts +140 -0
  86. package/ts_web/elements/sio-icon.ts +147 -25
  87. package/ts_web/elements/sio-image-lightbox.ts +62 -64
  88. package/ts_web/elements/sio-inset-list.ts +140 -0
  89. package/ts_web/elements/sio-kbd.ts +80 -0
  90. package/ts_web/elements/sio-list-row.ts +393 -0
  91. package/ts_web/elements/sio-message-input.ts +142 -221
  92. package/ts_web/elements/sio-paper-thumb.ts +244 -0
  93. package/ts_web/elements/sio-pdf-viewer.ts +58 -60
  94. package/ts_web/elements/sio-segmented.ts +183 -0
  95. package/ts_web/elements/sio-step-timeline.ts +179 -0
  96. package/ts_web/elements/sio-tab-bar.ts +195 -0
  97. package/ts_web/elements/sio-unread-badge.ts +147 -0
  98. package/ts_web/elements/sio-waveform.ts +239 -0
  99. package/ts_web/elements/tokens.ts +297 -0
  100. package/ts_web/pages/firstpage.ts +20 -1
  101. package/ts_web/pages/mainpage.ts +111 -39
  102. package/dist_bundle/bundle.js.map +0 -7
  103. package/dist_ts_web/elements/00colors.d.ts +0 -108
  104. package/dist_ts_web/elements/00colors.js +0 -137
  105. package/dist_ts_web/elements/00fonts.d.ts +0 -60
  106. package/dist_ts_web/elements/00fonts.js +0 -129
  107. package/dist_ts_web/elements/00tokens.d.ts +0 -123
  108. package/dist_ts_web/elements/00tokens.js +0 -176
  109. package/dist_ts_web/elements/sio-conversation-list.d.ts +0 -20
  110. package/dist_ts_web/elements/sio-conversation-list.js +0 -495
  111. package/dist_ts_web/elements/sio-recorder.d.ts +0 -60
  112. package/dist_ts_web/elements/sio-recorder.js +0 -173
  113. package/dist_ts_web/elements/sio-subwidget-conversations.d.ts +0 -16
  114. package/dist_ts_web/elements/sio-subwidget-conversations.js +0 -350
  115. package/dist_ts_web/elements/sio-subwidget-onboardme.d.ts +0 -7
  116. package/dist_ts_web/elements/sio-subwidget-onboardme.js +0 -243
  117. package/dist_watch/bundle.js +0 -81694
  118. package/dist_watch/bundle.js.map +0 -7
  119. package/dist_watch/index.html +0 -25
  120. package/npmextra.json +0 -19
  121. package/ts_web/elements/00colors.ts +0 -164
  122. package/ts_web/elements/00fonts.ts +0 -145
  123. package/ts_web/elements/00tokens.ts +0 -197
  124. package/ts_web/elements/sio-recorder.ts +0 -213
package/dist_watch/index.html DELETED
@@ -1,25 +0,0 @@
1
- <html lang="en">
2
- <head>
3
- <!--Lets set some basic meta tags-->
4
- <meta
5
- name="viewport"
6
- content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
7
- />
8
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9
-
10
- <!--Lets load standard fonts-->
11
- <link rel="preconnect" href="https://assetbroker.lossless.one" crossorigin>
12
- <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
13
-
14
- <style>
15
- body {
16
- margin: 0px;
17
- background: #222222;
18
- }
19
- </style>
20
-
21
- <script type="module" src="/bundle.js"></script>
22
- </head>
23
- <body>
24
- </body>
25
- </html>
package/npmextra.json DELETED
@@ -1,19 +0,0 @@
1
- {
2
- "gitzone": {
3
- "projectType": "wcc",
4
- "module": {
5
- "githost": "gitlab.com",
6
- "gitscope": "social.io/private",
7
- "gitrepo": "catalog",
8
- "description": "the element catalog for the lossless organization",
9
- "npmPackagename": "@social.io_private/catalog",
10
- "license": "UNLICENSED",
11
- "projectDomain": "social.io"
12
- }
13
- },
14
- "npmci": {
15
- "npmRegistryUrl": "verdaccio.lossless.one",
16
- "npmGlobalTools": [],
17
- "npmAccessLevel": "private"
18
- }
19
- }
package/ts_web/elements/00colors.ts DELETED
@@ -1,164 +0,0 @@
1
- import { cssManager } from '@design.estate/dees-element';
2
-
3
- export const colors = {
4
- // Background colors - softer, more subtle
5
- background: {
6
- light: 'hsl(0 0% 100%)',
7
- dark: 'hsl(224 71.4% 4.1%)'
8
- },
9
-
10
- // Foreground colors - less contrast for modern look
11
- foreground: {
12
- light: 'hsl(224 71.4% 4.1%)',
13
- dark: 'hsl(210 20% 98%)'
14
- },
15
-
16
- // Card colors - subtle elevation
17
- card: {
18
- light: 'hsl(0 0% 100%)',
19
- dark: 'hsl(224 71.4% 4.1%)'
20
- },
21
-
22
- cardForeground: {
23
- light: 'hsl(224 71.4% 4.1%)',
24
- dark: 'hsl(210 20% 98%)'
25
- },
26
-
27
- // Popover colors
28
- popover: {
29
- light: 'hsl(0 0% 100%)',
30
- dark: 'hsl(222.2 84% 4.9%)'
31
- },
32
-
33
- popoverForeground: {
34
- light: 'hsl(222.2 84% 4.9%)',
35
- dark: 'hsl(210 40% 98%)'
36
- },
37
-
38
- // Primary colors - modern indigo/blue
39
- primary: {
40
- light: 'hsl(221.2 83.2% 53.3%)',
41
- dark: 'hsl(217.2 91.2% 59.8%)'
42
- },
43
-
44
- primaryForeground: {
45
- light: 'hsl(210 20% 98%)',
46
- dark: 'hsl(224 71.4% 4.1%)'
47
- },
48
-
49
- // Secondary colors - more subtle
50
- secondary: {
51
- light: 'hsl(220 14.3% 95.9%)',
52
- dark: 'hsl(215 27.9% 16.9%)'
53
- },
54
-
55
- secondaryForeground: {
56
- light: 'hsl(220.9 39.3% 11%)',
57
- dark: 'hsl(210 20% 98%)'
58
- },
59
-
60
- // Muted colors - softer grays
61
- muted: {
62
- light: 'hsl(220 14.3% 95.9%)',
63
- dark: 'hsl(215 27.9% 16.9%)'
64
- },
65
-
66
- mutedForeground: {
67
- light: 'hsl(220 8.9% 46.1%)',
68
- dark: 'hsl(217.9 10.6% 64.9%)'
69
- },
70
-
71
- // Accent colors - subtle hover states
72
- accent: {
73
- light: 'hsl(220 14.3% 95.9%)',
74
- dark: 'hsl(215 27.9% 16.9%)'
75
- },
76
-
77
- accentForeground: {
78
- light: 'hsl(220.9 39.3% 11%)',
79
- dark: 'hsl(210 20% 98%)'
80
- },
81
-
82
- // Destructive colors - softer red
83
- destructive: {
84
- light: 'hsl(0 72.2% 50.6%)',
85
- dark: 'hsl(0 62.8% 30.6%)'
86
- },
87
-
88
- destructiveForeground: {
89
- light: 'hsl(0 0% 98%)',
90
- dark: 'hsl(0 0% 98%)'
91
- },
92
-
93
- // Border color - very subtle
94
- border: {
95
- light: 'hsl(220 13% 91%)',
96
- dark: 'hsl(215 27.9% 16.9%)'
97
- },
98
-
99
- // Input color
100
- input: {
101
- light: 'hsl(214.3 31.8% 91.4%)',
102
- dark: 'hsl(217.2 32.6% 17.5%)'
103
- },
104
-
105
- // Ring color - subtle focus indicator
106
- ring: {
107
- light: 'hsl(221.2 83.2% 53.3%)',
108
- dark: 'hsl(217.2 91.2% 59.8%)'
109
- },
110
-
111
- // Success colors - modern green
112
- success: {
113
- light: 'hsl(142.1 70.6% 45.3%)',
114
- dark: 'hsl(144.9 80.4% 10%)'
115
- },
116
-
117
- successForeground: {
118
- light: 'hsl(0 0% 100%)',
119
- dark: 'hsl(144.9 80.4% 80%)'
120
- },
121
-
122
- // Chart colors
123
- chart1: {
124
- light: 'hsl(12 76% 61%)',
125
- dark: 'hsl(12 76% 61%)'
126
- },
127
-
128
- chart2: {
129
- light: 'hsl(173 58% 39%)',
130
- dark: 'hsl(173 58% 39%)'
131
- },
132
-
133
- chart3: {
134
- light: 'hsl(197 37% 24%)',
135
- dark: 'hsl(197 37% 24%)'
136
- },
137
-
138
- chart4: {
139
- light: 'hsl(43 74% 66%)',
140
- dark: 'hsl(43 74% 66%)'
141
- },
142
-
143
- chart5: {
144
- light: 'hsl(27 87% 67%)',
145
- dark: 'hsl(27 87% 67%)'
146
- }
147
- };
148
-
149
- // Helper function to get color based on theme
150
- export const getColor = (colorName: keyof typeof colors, isDark: boolean = false) => {
151
- const color = colors[colorName];
152
- return isDark ? color.dark : color.light;
153
- };
154
-
155
- // CSS helper for theme-aware colors
156
- export const bdTheme = (colorNameOrLight: keyof typeof colors | string, dark?: string) => {
157
- if (dark) {
158
- // Direct color values provided
159
- return cssManager.bdTheme(colorNameOrLight as string, dark);
160
- }
161
- // Color name from palette
162
- const colorName = colorNameOrLight as keyof typeof colors;
163
- return cssManager.bdTheme(colors[colorName].light, colors[colorName].dark);
164
- };
package/ts_web/elements/00fonts.ts DELETED
@@ -1,145 +0,0 @@
1
- import { css } from '@design.estate/dees-element';
2
-
3
- // Font families matching shadcn design
4
- export const fontFamilies = {
5
- sans: `'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`,
6
- mono: `'Geist Mono', 'SF Mono', Monaco, 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace`
7
- };
8
-
9
- // Font sizes following shadcn scale
10
- export const fontSizes = {
11
- xs: '0.75rem', // 12px
12
- sm: '0.875rem', // 14px
13
- base: '1rem', // 16px
14
- lg: '1.125rem', // 18px
15
- xl: '1.25rem', // 20px
16
- '2xl': '1.5rem', // 24px
17
- '3xl': '1.875rem', // 30px
18
- '4xl': '2.25rem', // 36px
19
- '5xl': '3rem', // 48px
20
- '6xl': '3.75rem', // 60px
21
- '7xl': '4.5rem', // 72px
22
- '8xl': '6rem', // 96px
23
- '9xl': '8rem' // 128px
24
- };
25
-
26
- // Line heights
27
- export const lineHeights = {
28
- none: '1',
29
- tight: '1.25',
30
- snug: '1.375',
31
- normal: '1.5',
32
- relaxed: '1.625',
33
- loose: '2'
34
- };
35
-
36
- // Font weights
37
- export const fontWeights = {
38
- thin: '100',
39
- extralight: '200',
40
- light: '300',
41
- normal: '400',
42
- medium: '500',
43
- semibold: '600',
44
- bold: '700',
45
- extrabold: '800',
46
- black: '900'
47
- };
48
-
49
- // Letter spacing
50
- export const letterSpacing = {
51
- tighter: '-0.05em',
52
- tight: '-0.025em',
53
- normal: '0em',
54
- wide: '0.025em',
55
- wider: '0.05em',
56
- widest: '0.1em'
57
- };
58
-
59
- // Typography presets matching shadcn components
60
- export const typography = {
61
- h1: css`
62
- font-size: 2.25rem;
63
- line-height: 1.25;
64
- font-weight: 700;
65
- letter-spacing: -0.025em;
66
- `,
67
-
68
- h2: css`
69
- font-size: 1.875rem;
70
- line-height: 1.25;
71
- font-weight: 600;
72
- letter-spacing: -0.025em;
73
- `,
74
-
75
- h3: css`
76
- font-size: 1.5rem;
77
- line-height: 1.375;
78
- font-weight: 600;
79
- `,
80
-
81
- h4: css`
82
- font-size: 1.25rem;
83
- line-height: 1.375;
84
- font-weight: 600;
85
- `,
86
-
87
- body: css`
88
- font-size: 1rem;
89
- line-height: 1.5;
90
- font-weight: 400;
91
- `,
92
-
93
- bodyLarge: css`
94
- font-size: 1.125rem;
95
- line-height: 1.625;
96
- font-weight: 400;
97
- `,
98
-
99
- bodySmall: css`
100
- font-size: 0.875rem;
101
- line-height: 1.5;
102
- font-weight: 400;
103
- `,
104
-
105
- caption: css`
106
- font-size: 0.75rem;
107
- line-height: 1.5;
108
- font-weight: 400;
109
- `,
110
-
111
- code: css`
112
- font-family: 'Geist Mono', 'SF Mono', Monaco, 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
113
- font-size: 0.875rem;
114
- line-height: 1.5;
115
- font-weight: 400;
116
- `,
117
-
118
- button: css`
119
- font-size: 0.875rem;
120
- line-height: 1;
121
- font-weight: 500;
122
- letter-spacing: 0.025em;
123
- `,
124
-
125
- input: css`
126
- font-size: 1rem;
127
- line-height: 1.5;
128
- font-weight: 400;
129
- `
130
- };
131
-
132
- // Font loading CSS
133
- export const fontLoadingStyles = css`
134
- @font-face {
135
- font-family: 'Geist Sans';
136
- src: url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
137
- font-display: swap;
138
- }
139
-
140
- @font-face {
141
- font-family: 'Geist Mono';
142
- src: url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap');
143
- font-display: swap;
144
- }
145
- `;
package/ts_web/elements/00tokens.ts DELETED
@@ -1,197 +0,0 @@
1
- import { css, cssManager } from '@design.estate/dees-element';
2
-
3
- // Spacing scale
4
- export const spacing = {
5
- 0: '0px',
6
- px: '1px',
7
- 0.5: '0.125rem', // 2px
8
- 1: '0.25rem', // 4px
9
- 1.5: '0.375rem', // 6px
10
- 2: '0.5rem', // 8px
11
- 2.5: '0.625rem', // 10px
12
- 3: '0.75rem', // 12px
13
- 3.5: '0.875rem', // 14px
14
- 4: '1rem', // 16px
15
- 5: '1.25rem', // 20px
16
- 6: '1.5rem', // 24px
17
- 7: '1.75rem', // 28px
18
- 8: '2rem', // 32px
19
- 9: '2.25rem', // 36px
20
- 10: '2.5rem', // 40px
21
- 11: '2.75rem', // 44px
22
- 12: '3rem', // 48px
23
- 14: '3.5rem', // 56px
24
- 16: '4rem', // 64px
25
- 20: '5rem', // 80px
26
- 24: '6rem', // 96px
27
- 28: '7rem', // 112px
28
- 32: '8rem', // 128px
29
- 36: '9rem', // 144px
30
- 40: '10rem', // 160px
31
- 44: '11rem', // 176px
32
- 48: '12rem', // 192px
33
- 52: '13rem', // 208px
34
- 56: '14rem', // 224px
35
- 60: '15rem', // 240px
36
- 64: '16rem', // 256px
37
- 72: '18rem', // 288px
38
- 80: '20rem', // 320px
39
- 96: '24rem' // 384px
40
- };
41
-
42
- // Border radius
43
- export const radius = {
44
- none: '0px',
45
- sm: '0.125rem', // 2px
46
- DEFAULT: '0.375rem', // 6px - shadcn default
47
- md: '0.375rem', // 6px
48
- lg: '0.5rem', // 8px
49
- xl: '0.75rem', // 12px
50
- '2xl': '1rem', // 16px
51
- '3xl': '1.5rem', // 24px
52
- full: '9999px'
53
- };
54
-
55
- // Box shadows - more subtle for modern look
56
- export const shadows = {
57
- none: 'none',
58
- sm: '0 1px 2px 0 rgb(0 0 0 / 0.03)',
59
- DEFAULT: '0 2px 8px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
60
- md: '0 4px 12px -4px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
61
- lg: '0 8px 24px -4px rgb(0 0 0 / 0.1), 0 2px 8px -2px rgb(0 0 0 / 0.04)',
62
- xl: '0 24px 48px -12px rgb(0 0 0 / 0.18)',
63
- '2xl': '0 32px 64px -12px rgb(0 0 0 / 0.14)',
64
- inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.03)',
65
- // Theme-aware shadows
66
- card: cssManager.bdTheme(
67
- '0 2px 8px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
68
- '0 2px 8px -2px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2)'
69
- ),
70
- dropdown: cssManager.bdTheme(
71
- '0 8px 24px -4px rgb(0 0 0 / 0.1), 0 2px 8px -2px rgb(0 0 0 / 0.04)',
72
- '0 8px 24px -4px rgb(0 0 0 / 0.3), 0 2px 8px -2px rgb(0 0 0 / 0.2)'
73
- )
74
- };
75
-
76
- // Transitions
77
- export const transitions = {
78
- all: 'all 150ms cubic-bezier(0.4, 0, 0.2, 1)',
79
- colors: 'color, background-color, border-color, text-decoration-color, fill, stroke 150ms cubic-bezier(0.4, 0, 0.2, 1)',
80
- opacity: 'opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)',
81
- shadow: 'box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1)',
82
- transform: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1)',
83
- // Durations
84
- fast: '150ms',
85
- normal: '200ms',
86
- slow: '300ms',
87
- // Timing functions
88
- ease: 'cubic-bezier(0.4, 0, 0.2, 1)',
89
- easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
90
- easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
91
- easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)'
92
- };
93
-
94
- // Z-index scale
95
- export const zIndex = {
96
- 0: 0,
97
- 10: 10,
98
- 20: 20,
99
- 30: 30,
100
- 40: 40,
101
- 50: 50,
102
- dropdown: 1000,
103
- sticky: 1020,
104
- fixed: 1030,
105
- modalBackdrop: 1040,
106
- modal: 1050,
107
- popover: 1060,
108
- tooltip: 1070
109
- };
110
-
111
- // Breakpoints
112
- export const breakpoints = {
113
- sm: '640px',
114
- md: '768px',
115
- lg: '1024px',
116
- xl: '1280px',
117
- '2xl': '1536px'
118
- };
119
-
120
- // Container sizes
121
- export const containers = {
122
- sm: '640px',
123
- md: '768px',
124
- lg: '1024px',
125
- xl: '1280px',
126
- '2xl': '1536px',
127
- full: '100%'
128
- };
129
-
130
- // Common component sizes
131
- export const sizes = {
132
- // Button/Input heights
133
- sm: '2rem', // 32px
134
- DEFAULT: '2.5rem', // 40px
135
- lg: '3rem', // 48px
136
-
137
- // Icon sizes
138
- icon: {
139
- sm: '1rem', // 16px
140
- DEFAULT: '1.25rem', // 20px
141
- lg: '1.5rem' // 24px
142
- }
143
- };
144
-
145
- // Animation keyframes
146
- export const animations = {
147
- fadeIn: css`
148
- @keyframes fadeIn {
149
- from { opacity: 0; }
150
- to { opacity: 1; }
151
- }
152
- `,
153
-
154
- slideIn: css`
155
- @keyframes slideIn {
156
- from { transform: translateY(-10px); opacity: 0; }
157
- to { transform: translateY(0); opacity: 1; }
158
- }
159
- `,
160
-
161
- slideUp: css`
162
- @keyframes slideUp {
163
- from { transform: translateY(10px); opacity: 0; }
164
- to { transform: translateY(0); opacity: 1; }
165
- }
166
- `,
167
-
168
- scaleIn: css`
169
- @keyframes scaleIn {
170
- from { transform: scale(0.95); opacity: 0; }
171
- to { transform: scale(1); opacity: 1; }
172
- }
173
- `,
174
-
175
- spin: css`
176
- @keyframes spin {
177
- from { transform: rotate(0deg); }
178
- to { transform: rotate(360deg); }
179
- }
180
- `
181
- };
182
-
183
- // Focus ring styles
184
- export const focusRing = css`
185
- outline: 2px solid transparent;
186
- outline-offset: 2px;
187
- &:focus-visible {
188
- outline-color: ${cssManager.bdTheme('hsl(222.2 84% 4.9%)', 'hsl(212.7 26.8% 83.9%)')};
189
- }
190
- `;
191
-
192
- // Disabled styles
193
- export const disabled = css`
194
- opacity: 0.5;
195
- cursor: not-allowed;
196
- pointer-events: none;
197
- `;