@social.io/catalog 1.3.0 → 2.1.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 (130) hide show
  1. package/.smartconfig.json +51 -0
  2. package/dist_bundle/bundle.js +5455 -3248
  3. package/dist_ts_web/00_commitinfo_data.js +3 -3
  4. package/dist_ts_web/elements/index.d.ts +21 -3
  5. package/dist_ts_web/elements/index.js +28 -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 +38 -0
  15. package/dist_ts_web/elements/sio-channel-rail.js +288 -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-logo-render.d.ts +42 -0
  45. package/dist_ts_web/elements/sio-logo-render.js +306 -0
  46. package/dist_ts_web/elements/sio-logo.d.ts +64 -0
  47. package/dist_ts_web/elements/sio-logo.js +393 -0
  48. package/dist_ts_web/elements/sio-message-input.d.ts +25 -4
  49. package/dist_ts_web/elements/sio-message-input.js +231 -226
  50. package/dist_ts_web/elements/sio-paper-thumb.d.ts +24 -0
  51. package/dist_ts_web/elements/sio-paper-thumb.js +293 -0
  52. package/dist_ts_web/elements/sio-pdf-viewer.d.ts +2 -0
  53. package/dist_ts_web/elements/sio-pdf-viewer.js +344 -244
  54. package/dist_ts_web/elements/sio-segmented.d.ts +32 -0
  55. package/dist_ts_web/elements/sio-segmented.js +217 -0
  56. package/dist_ts_web/elements/sio-step-timeline.d.ts +28 -0
  57. package/dist_ts_web/elements/sio-step-timeline.js +222 -0
  58. package/dist_ts_web/elements/sio-tab-bar.d.ts +36 -0
  59. package/dist_ts_web/elements/sio-tab-bar.js +232 -0
  60. package/dist_ts_web/elements/sio-unread-badge.d.ts +25 -0
  61. package/dist_ts_web/elements/sio-unread-badge.js +203 -0
  62. package/dist_ts_web/elements/sio-waveform.d.ts +34 -0
  63. package/dist_ts_web/elements/sio-waveform.js +304 -0
  64. package/dist_ts_web/elements/tokens.d.ts +70 -0
  65. package/dist_ts_web/elements/tokens.js +277 -0
  66. package/dist_ts_web/pages/firstpage.d.ts +5 -0
  67. package/dist_ts_web/pages/firstpage.js +21 -2
  68. package/dist_ts_web/pages/mainpage.d.ts +6 -0
  69. package/dist_ts_web/pages/mainpage.js +111 -39
  70. package/{license → license.md} +3 -1
  71. package/package.json +23 -29
  72. package/readme.hints.md +82 -0
  73. package/readme.md +113 -146
  74. package/ts_web/00_commitinfo_data.ts +2 -2
  75. package/ts_web/elements/index.ts +31 -7
  76. package/ts_web/elements/sio-ai-card.ts +175 -0
  77. package/ts_web/elements/sio-avatar.ts +295 -0
  78. package/ts_web/elements/sio-bucket-header.ts +157 -0
  79. package/ts_web/elements/sio-button.ts +149 -127
  80. package/ts_web/elements/sio-channel-rail.ts +256 -0
  81. package/ts_web/elements/sio-chip.ts +134 -0
  82. package/ts_web/elements/sio-cmdk.ts +461 -0
  83. package/ts_web/elements/sio-combox.ts +327 -204
  84. package/ts_web/elements/sio-composer.ts +306 -0
  85. package/ts_web/elements/sio-conversation-selector.ts +350 -228
  86. package/ts_web/elements/sio-conversation-view.ts +573 -457
  87. package/ts_web/elements/sio-dropdown-menu.ts +112 -130
  88. package/ts_web/elements/sio-fab.ts +192 -227
  89. package/ts_web/elements/sio-glass-toolbar.ts +140 -0
  90. package/ts_web/elements/sio-icon.ts +147 -25
  91. package/ts_web/elements/sio-image-lightbox.ts +62 -64
  92. package/ts_web/elements/sio-inset-list.ts +140 -0
  93. package/ts_web/elements/sio-kbd.ts +80 -0
  94. package/ts_web/elements/sio-list-row.ts +393 -0
  95. package/ts_web/elements/sio-logo-render.ts +367 -0
  96. package/ts_web/elements/sio-logo.ts +311 -0
  97. package/ts_web/elements/sio-message-input.ts +142 -221
  98. package/ts_web/elements/sio-paper-thumb.ts +244 -0
  99. package/ts_web/elements/sio-pdf-viewer.ts +58 -60
  100. package/ts_web/elements/sio-segmented.ts +183 -0
  101. package/ts_web/elements/sio-step-timeline.ts +179 -0
  102. package/ts_web/elements/sio-tab-bar.ts +195 -0
  103. package/ts_web/elements/sio-unread-badge.ts +147 -0
  104. package/ts_web/elements/sio-waveform.ts +239 -0
  105. package/ts_web/elements/tokens.ts +297 -0
  106. package/ts_web/pages/firstpage.ts +20 -1
  107. package/ts_web/pages/mainpage.ts +111 -39
  108. package/dist_bundle/bundle.js.map +0 -7
  109. package/dist_ts_web/elements/00colors.d.ts +0 -108
  110. package/dist_ts_web/elements/00colors.js +0 -137
  111. package/dist_ts_web/elements/00fonts.d.ts +0 -60
  112. package/dist_ts_web/elements/00fonts.js +0 -129
  113. package/dist_ts_web/elements/00tokens.d.ts +0 -123
  114. package/dist_ts_web/elements/00tokens.js +0 -176
  115. package/dist_ts_web/elements/sio-conversation-list.d.ts +0 -20
  116. package/dist_ts_web/elements/sio-conversation-list.js +0 -495
  117. package/dist_ts_web/elements/sio-recorder.d.ts +0 -60
  118. package/dist_ts_web/elements/sio-recorder.js +0 -173
  119. package/dist_ts_web/elements/sio-subwidget-conversations.d.ts +0 -16
  120. package/dist_ts_web/elements/sio-subwidget-conversations.js +0 -350
  121. package/dist_ts_web/elements/sio-subwidget-onboardme.d.ts +0 -7
  122. package/dist_ts_web/elements/sio-subwidget-onboardme.js +0 -243
  123. package/dist_watch/bundle.js +0 -81694
  124. package/dist_watch/bundle.js.map +0 -7
  125. package/dist_watch/index.html +0 -25
  126. package/npmextra.json +0 -19
  127. package/ts_web/elements/00colors.ts +0 -164
  128. package/ts_web/elements/00fonts.ts +0 -145
  129. package/ts_web/elements/00tokens.ts +0 -197
  130. 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
- `;