@kushagradhawan/kookie-ui 0.1.33 → 0.1.35

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 (117) hide show
  1. package/components.css +684 -205
  2. package/dist/cjs/components/_internal/base-button.d.ts.map +1 -1
  3. package/dist/cjs/components/_internal/base-button.js +1 -1
  4. package/dist/cjs/components/_internal/base-button.js.map +3 -3
  5. package/dist/cjs/components/chatbar.d.ts +205 -0
  6. package/dist/cjs/components/chatbar.d.ts.map +1 -0
  7. package/dist/cjs/components/chatbar.js +2 -0
  8. package/dist/cjs/components/chatbar.js.map +7 -0
  9. package/dist/cjs/components/icon-button.d.ts.map +1 -1
  10. package/dist/cjs/components/icon-button.js +2 -2
  11. package/dist/cjs/components/icon-button.js.map +3 -3
  12. package/dist/cjs/components/icons.d.ts +6 -1
  13. package/dist/cjs/components/icons.d.ts.map +1 -1
  14. package/dist/cjs/components/icons.js +1 -1
  15. package/dist/cjs/components/icons.js.map +3 -3
  16. package/dist/cjs/components/index.d.ts +3 -0
  17. package/dist/cjs/components/index.d.ts.map +1 -1
  18. package/dist/cjs/components/index.js +1 -1
  19. package/dist/cjs/components/index.js.map +3 -3
  20. package/dist/cjs/components/popover.d.ts +13 -1
  21. package/dist/cjs/components/popover.d.ts.map +1 -1
  22. package/dist/cjs/components/popover.js +1 -1
  23. package/dist/cjs/components/popover.js.map +3 -3
  24. package/dist/cjs/components/sheet.d.ts +82 -0
  25. package/dist/cjs/components/sheet.d.ts.map +1 -0
  26. package/dist/cjs/components/sheet.js +2 -0
  27. package/dist/cjs/components/sheet.js.map +7 -0
  28. package/dist/cjs/components/shell.d.ts +180 -0
  29. package/dist/cjs/components/shell.d.ts.map +1 -0
  30. package/dist/cjs/components/shell.js +2 -0
  31. package/dist/cjs/components/shell.js.map +7 -0
  32. package/dist/cjs/components/sidebar.d.ts +4 -33
  33. package/dist/cjs/components/sidebar.d.ts.map +1 -1
  34. package/dist/cjs/components/sidebar.js +1 -1
  35. package/dist/cjs/components/sidebar.js.map +3 -3
  36. package/dist/cjs/components/skeleton.d.ts.map +1 -1
  37. package/dist/cjs/components/skeleton.js +1 -1
  38. package/dist/cjs/components/skeleton.js.map +2 -2
  39. package/dist/cjs/helpers/inert.d.ts +1 -1
  40. package/dist/cjs/helpers/inert.d.ts.map +1 -1
  41. package/dist/cjs/helpers/inert.js +1 -1
  42. package/dist/cjs/helpers/inert.js.map +2 -2
  43. package/dist/esm/components/_internal/base-button.d.ts.map +1 -1
  44. package/dist/esm/components/_internal/base-button.js +1 -1
  45. package/dist/esm/components/_internal/base-button.js.map +3 -3
  46. package/dist/esm/components/chatbar.d.ts +205 -0
  47. package/dist/esm/components/chatbar.d.ts.map +1 -0
  48. package/dist/esm/components/chatbar.js +2 -0
  49. package/dist/esm/components/chatbar.js.map +7 -0
  50. package/dist/esm/components/icon-button.d.ts.map +1 -1
  51. package/dist/esm/components/icon-button.js +2 -2
  52. package/dist/esm/components/icon-button.js.map +3 -3
  53. package/dist/esm/components/icons.d.ts +6 -1
  54. package/dist/esm/components/icons.d.ts.map +1 -1
  55. package/dist/esm/components/icons.js +1 -1
  56. package/dist/esm/components/icons.js.map +3 -3
  57. package/dist/esm/components/index.d.ts +3 -0
  58. package/dist/esm/components/index.d.ts.map +1 -1
  59. package/dist/esm/components/index.js +1 -1
  60. package/dist/esm/components/index.js.map +3 -3
  61. package/dist/esm/components/popover.d.ts +13 -1
  62. package/dist/esm/components/popover.d.ts.map +1 -1
  63. package/dist/esm/components/popover.js +1 -1
  64. package/dist/esm/components/popover.js.map +3 -3
  65. package/dist/esm/components/sheet.d.ts +82 -0
  66. package/dist/esm/components/sheet.d.ts.map +1 -0
  67. package/dist/esm/components/sheet.js +2 -0
  68. package/dist/esm/components/sheet.js.map +7 -0
  69. package/dist/esm/components/shell.d.ts +180 -0
  70. package/dist/esm/components/shell.d.ts.map +1 -0
  71. package/dist/esm/components/shell.js +2 -0
  72. package/dist/esm/components/shell.js.map +7 -0
  73. package/dist/esm/components/sidebar.d.ts +4 -33
  74. package/dist/esm/components/sidebar.d.ts.map +1 -1
  75. package/dist/esm/components/sidebar.js +1 -1
  76. package/dist/esm/components/sidebar.js.map +3 -3
  77. package/dist/esm/components/skeleton.d.ts.map +1 -1
  78. package/dist/esm/components/skeleton.js.map +2 -2
  79. package/dist/esm/helpers/inert.d.ts +1 -1
  80. package/dist/esm/helpers/inert.d.ts.map +1 -1
  81. package/dist/esm/helpers/inert.js +1 -1
  82. package/dist/esm/helpers/inert.js.map +2 -2
  83. package/package.json +2 -1
  84. package/src/components/_internal/base-button.tsx +8 -0
  85. package/src/components/_internal/base-card.css +4 -4
  86. package/src/components/_internal/base-dialog.css +3 -41
  87. package/src/components/_internal/base-menu.css +2 -2
  88. package/src/components/_internal/base-sidebar-menu.css +3 -3
  89. package/src/components/accordion.css +2 -2
  90. package/src/components/animations.css +65 -81
  91. package/src/components/chatbar.css +214 -0
  92. package/src/components/chatbar.tsx +1195 -0
  93. package/src/components/icon-button.tsx +11 -0
  94. package/src/components/icons.tsx +97 -2
  95. package/src/components/image.css +2 -2
  96. package/src/components/index.css +3 -0
  97. package/src/components/index.tsx +3 -0
  98. package/src/components/popover.css +45 -0
  99. package/src/components/popover.tsx +180 -2
  100. package/src/components/scroll-area.css +3 -3
  101. package/src/components/segmented-control.css +3 -3
  102. package/src/components/sheet.css +90 -0
  103. package/src/components/sheet.tsx +247 -0
  104. package/src/components/shell.css +137 -0
  105. package/src/components/shell.tsx +1032 -0
  106. package/src/components/sidebar.css +55 -268
  107. package/src/components/sidebar.tsx +40 -262
  108. package/src/components/skeleton.tsx +1 -2
  109. package/src/components/text-area.css +1 -0
  110. package/src/components/tooltip.css +2 -2
  111. package/src/helpers/inert.ts +3 -3
  112. package/src/styles/tokens/constants.css +6 -3
  113. package/src/styles/tokens/index.css +1 -0
  114. package/src/styles/tokens/transition.css +91 -46
  115. package/styles.css +743 -241
  116. package/tokens/base.css +55 -33
  117. package/tokens.css +59 -36
package/src/styles/tokens/transition.css CHANGED
@@ -7,87 +7,132 @@
7
7
  --duration-5: 200ms; /* Slow animations */
8
8
 
9
9
  /* Spring-specific duration tokens */
10
- --duration-spring-1: 200ms; /* Quick spring */
11
- --duration-spring-2: 250ms; /* Standard spring */
12
- --duration-spring-3: 300ms; /* Slow spring */
10
+ --duration-spring-1: 100ms; /* Quick spring */
11
+ --duration-spring-2: 150ms; /* Standard spring */
12
+ --duration-spring-3: 200ms; /* Slow spring */
13
13
 
14
- /* Easing tokens */
15
- --ease-1: ease-out; /* Fast start, slow end */
16
- --ease-2: ease-in-out; /* Smooth both ways */
17
- --ease-3: cubic-bezier(0.4, 0, 0.2, 1); /* Material Design standard */
18
- --ease-4: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Ease out back */
19
- --ease-5: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce */
14
+ /* Easing tokens (spring-aligned) */
15
+ --ease-1: var(--ease-spring-1); /* Spring default */
16
+ --ease-2: var(--ease-spring-2); /* Spring bounce */
17
+ --ease-3: var(--ease-spring-3); /* Spring elastic */
18
+ --ease-4: var(--ease-spring-1);
19
+ --ease-5: var(--ease-spring-2);
20
20
 
21
21
  /* Spring-specific easing tokens */
22
22
  --ease-spring-1: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Spring out back */
23
23
  --ease-spring-2: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Spring bounce */
24
24
  --ease-spring-3: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Spring elastic */
25
25
 
26
- /* Common transition combinations */
27
- --transition-fast: var(--duration-2) var(--ease-1);
28
- --transition-standard: var(--duration-3) var(--ease-2);
29
- --transition-slow: var(--duration-4) var(--ease-3);
30
-
31
- /* Spring transition combinations */
32
- --transition-spring-fast: var(--duration-spring-1) var(--ease-spring-1);
33
- --transition-spring-standard: var(--duration-spring-2) var(--ease-spring-1);
34
- --transition-spring-slow: var(--duration-spring-3) var(--ease-spring-1);
35
- --transition-spring-bounce: var(--duration-spring-2) var(--ease-spring-2);
36
- --transition-spring-elastic: var(--duration-spring-3) var(--ease-spring-3);
26
+ /* Common transition combinations (semantic) */
27
+ --transition-fast: var(--motion-duration-micro) var(--motion-ease-standard);
28
+ --transition-standard: var(--motion-duration-small) var(--motion-ease-standard);
29
+ --transition-slow: var(--motion-duration-medium) var(--motion-ease-smooth);
30
+
31
+ /* Spring transition combinations (semantic) */
32
+ --transition-spring-fast: var(--motion-duration-micro) var(--motion-spring-snappy);
33
+ --transition-spring-standard: var(--motion-duration-small) var(--motion-spring-snappy);
34
+ --transition-spring-slow: var(--motion-duration-medium) var(--motion-spring-snappy);
35
+ --transition-spring-bounce: var(--motion-duration-small) var(--motion-spring-bounce);
36
+ --transition-spring-elastic: var(--motion-duration-medium) var(--motion-spring-elastic);
37
+
38
+ /* Semantic motion tokens */
39
+ --motion-duration-micro: 75ms; /* Micro-interactions (150–250ms) */
40
+ --motion-duration-small: 150ms; /* Small UI changes (200–400ms) */
41
+ --motion-duration-medium: 250ms; /* Medium/large changes (400–800ms) */
42
+ --motion-duration-large: 350ms; /* Large movements (400–800ms) */
43
+
44
+ --motion-ease-standard: ease-in-out; /* Most UI changes */
45
+ --motion-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Material-like */
46
+ --motion-ease-anticipate: cubic-bezier(0.36, 0, 0.66, -0.56);
47
+ --motion-ease-follow: cubic-bezier(0.34, 1.56, 0.64, 1);
48
+
49
+ /* Spring semantics mapped to existing spring curves */
50
+ --motion-spring-snappy: var(--ease-spring-1);
51
+ --motion-spring-bounce: var(--ease-spring-2);
52
+ --motion-spring-elastic: var(--ease-spring-3);
53
+
54
+ /* Stagger tokens */
55
+ --motion-stagger-1: 15ms;
56
+ --motion-stagger-2: 30ms;
57
+ --motion-stagger-3: 45ms;
58
+
59
+ /* JS-friendly spring params (for future usage) */
60
+ --spring-snappy-mass: 1;
61
+ --spring-snappy-stiffness: 280;
62
+ --spring-snappy-damping: 24;
63
+ --spring-snappy-initial-velocity: 0;
64
+
65
+ --spring-smooth-mass: 1;
66
+ --spring-smooth-stiffness: 200;
67
+ --spring-smooth-damping: 30;
68
+ --spring-smooth-initial-velocity: 0;
37
69
 
38
70
  /* Specific component transitions */
39
71
  --transition-button:
40
- background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1),
41
- backdrop-filter var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1),
42
- padding var(--duration-1) var(--ease-1);
72
+ background var(--motion-duration-small) var(--motion-ease-standard),
73
+ box-shadow var(--motion-duration-small) var(--motion-ease-standard),
74
+ backdrop-filter var(--motion-duration-small) var(--motion-ease-standard),
75
+ transform var(--motion-duration-micro) var(--motion-spring-snappy),
76
+ padding var(--motion-duration-micro) var(--motion-ease-standard);
43
77
 
44
78
  --transition-text-field:
45
- background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1);
79
+ background var(--motion-duration-small) var(--motion-ease-standard),
80
+ box-shadow var(--motion-duration-small) var(--motion-ease-standard);
46
81
 
47
82
  --transition-select:
48
- background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1);
83
+ background var(--motion-duration-small) var(--motion-ease-standard),
84
+ box-shadow var(--motion-duration-small) var(--motion-ease-standard);
49
85
 
50
86
  --transition-badge:
51
- background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1),
52
- padding var(--duration-1) var(--ease-1);
87
+ background var(--motion-duration-small) var(--motion-ease-standard),
88
+ box-shadow var(--motion-duration-small) var(--motion-ease-standard),
89
+ padding var(--motion-duration-micro) var(--motion-ease-standard);
53
90
 
54
91
  --transition-card:
55
- background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1),
56
- top var(--duration-2) var(--ease-1);
92
+ background-color var(--motion-duration-small) var(--motion-ease-standard),
93
+ box-shadow var(--motion-duration-small) var(--motion-ease-standard),
94
+ top var(--motion-duration-small) var(--motion-ease-standard);
57
95
 
58
96
  --transition-tabs:
59
- color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1),
60
- font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2),
61
- word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
97
+ color var(--motion-duration-micro) var(--motion-ease-standard),
98
+ background-color var(--motion-duration-micro) var(--motion-ease-standard),
99
+ font-weight var(--motion-duration-small) var(--motion-ease-standard),
100
+ letter-spacing var(--motion-duration-small) var(--motion-ease-standard),
101
+ word-spacing var(--motion-duration-small) var(--motion-ease-standard),
102
+ transform var(--motion-duration-micro) var(--motion-spring-snappy);
62
103
 
63
104
  --transition-segmented-control:
64
- opacity var(--duration-2) var(--ease-1), transform var(--duration-2) var(--ease-3),
65
- background-color var(--duration-2) var(--ease-1);
105
+ opacity var(--motion-duration-small) var(--motion-ease-standard),
106
+ transform var(--motion-duration-small) var(--motion-spring-snappy),
107
+ background-color var(--motion-duration-small) var(--motion-ease-standard);
66
108
 
67
109
  --transition-menu:
68
- background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
110
+ background var(--motion-duration-micro) var(--motion-ease-standard),
111
+ color var(--motion-duration-small) var(--motion-ease-standard);
69
112
 
70
113
  --transition-checkbox:
71
- background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1),
72
- color var(--duration-1) var(--ease-1);
114
+ background-color var(--motion-duration-small) var(--motion-ease-standard),
115
+ box-shadow var(--motion-duration-small) var(--motion-ease-standard),
116
+ color var(--motion-duration-micro) var(--motion-ease-standard);
73
117
 
74
118
  --transition-radio:
75
- background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1),
76
- color var(--duration-1) var(--ease-1);
119
+ background-color var(--motion-duration-small) var(--motion-ease-standard),
120
+ box-shadow var(--motion-duration-small) var(--motion-ease-standard),
121
+ color var(--motion-duration-micro) var(--motion-ease-standard);
77
122
 
78
- --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
123
+ --transition-focus: outline var(--motion-duration-small) var(--motion-ease-standard), outline-offset var(--motion-duration-small) var(--motion-ease-standard);
79
124
 
80
125
  /* Progress component transition */
81
- --transition-progress: transform var(--duration-2) var(--ease-1);
126
+ --transition-progress: transform var(--motion-duration-small) var(--motion-ease-standard);
82
127
 
83
128
  /* Accordion component transitions */
84
- --transition-accordion-content: height var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1), transform var(--duration-spring-2) var(--ease-spring-1);
85
- --transition-accordion-trigger: background-color var(--duration-spring-1) var(--ease-spring-1), transform var(--duration-spring-1) var(--ease-spring-1);
86
- --transition-accordion-trigger-active: transform var(--duration-1) var(--ease-spring-2);
129
+ --transition-accordion-content: height var(--motion-duration-small) var(--motion-spring-snappy), opacity var(--motion-duration-small) var(--motion-spring-snappy), transform var(--motion-duration-small) var(--motion-spring-snappy);
130
+ --transition-accordion-trigger: background-color var(--motion-duration-small) var(--motion-spring-snappy), transform var(--motion-duration-micro) var(--motion-spring-snappy);
131
+ --transition-accordion-trigger-active: transform var(--motion-duration-micro) var(--motion-spring-bounce);
87
132
 
88
133
  /* GPU-optimized spring transitions */
89
- --transition-spring-gpu: transform var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1);
90
- --transition-spring-gpu-fast: transform var(--duration-spring-1) var(--ease-spring-1), opacity var(--duration-spring-1) var(--ease-spring-1);
134
+ --transition-spring-gpu: transform var(--motion-duration-small) var(--motion-spring-snappy), opacity var(--motion-duration-small) var(--motion-spring-snappy);
135
+ --transition-spring-gpu-fast: transform var(--motion-duration-micro) var(--motion-spring-snappy), opacity var(--motion-duration-micro) var(--motion-spring-snappy);
91
136
  }
92
137
 
93
138
  /* Respect user preference for reduced motion */