ics-ui-kit 0.1.4 → 0.1.6

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 (20) hide show
  1. package/dist/components/glass-toolbar/GlassToolbar.d.ts +51 -0
  2. package/dist/components/glass-toolbar/GlassToolbar.stories.d.ts +14 -0
  3. package/dist/components/glass-toolbar/index.d.ts +2 -0
  4. package/dist/components/glass-toolbar.d.ts +2 -0
  5. package/dist/components/glass-toolbar.js +99 -0
  6. package/dist/components/glass-toolbar.js.map +1 -0
  7. package/dist/components/resizable/Resizable.d.ts +1 -0
  8. package/dist/components/resizable/index.d.ts +1 -1
  9. package/dist/components/resizable.js +78 -77
  10. package/dist/components/resizable.js.map +1 -1
  11. package/dist/components/sidebar/Sidebar.stories.d.ts +1 -0
  12. package/dist/components/toolbar.js +85 -197
  13. package/dist/components/toolbar.js.map +1 -1
  14. package/dist/index-BDrapWDv.js +122 -0
  15. package/dist/index-BDrapWDv.js.map +1 -0
  16. package/dist/styles-scoped.css +49 -0
  17. package/dist/styles.css +49 -0
  18. package/dist/theme.css +8 -0
  19. package/package.json +1 -1
  20. package/tailwind.preset.js +5 -1
package/dist/styles-scoped.css CHANGED
@@ -178,6 +178,10 @@
178
178
  --glass-regular: blur(16px) brightness(100%) saturate(180%) contrast(100%);
179
179
  --glass-thick: blur(24px) brightness(96%) saturate(200%) contrast(102%);
180
180
  --glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
181
+
182
+ --shadow-glass-sm: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 0 40px 30px -40px rgba(0, 0, 0, 0.16) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
183
+ --shadow-glass-md: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-primary-border, #D4D4D8), 0 4px 24px 0 rgba(0, 0, 0, 0.12);
184
+ --shadow-glass-lg: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
181
185
  }
182
186
  .dark {
183
187
  /**
@@ -338,6 +342,10 @@
338
342
  --glass-regular: blur(16px) brightness(62%) saturate(160%) contrast(110%);
339
343
  --glass-thick: blur(24px) brightness(52%) saturate(180%) contrast(115%);
340
344
  --glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
345
+
346
+ --shadow-glass-sm: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -40px 80px -40px rgba(255, 255, 255, 0.30) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
347
+ --shadow-glass-md: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 48px 0 rgba(0, 0, 0, 0.48);
348
+ --shadow-glass-lg: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
341
349
  }
342
350
  .backdrop-glass-clear {
343
351
  backdrop-filter: var(--glass-clear);
@@ -1747,6 +1755,9 @@
1747
1755
  .ui-kit .aspect-square {
1748
1756
  aspect-ratio: 1 / 1;
1749
1757
  }
1758
+ .ui-kit .aspect-video {
1759
+ aspect-ratio: 16 / 9;
1760
+ }
1750
1761
  .ui-kit .size-11 {
1751
1762
  width: 2.75rem;
1752
1763
  height: 2.75rem;
@@ -1982,6 +1993,9 @@
1982
1993
  .ui-kit .max-h-\[30vh\] {
1983
1994
  max-height: 30vh;
1984
1995
  }
1996
+ .ui-kit .max-h-\[400px\] {
1997
+ max-height: 400px;
1998
+ }
1985
1999
  .ui-kit .max-h-\[calc\(100vh-44px\)\] {
1986
2000
  max-height: calc(100vh - 44px);
1987
2001
  }
@@ -2297,6 +2311,9 @@
2297
2311
  .ui-kit .max-w-36 {
2298
2312
  max-width: 9rem;
2299
2313
  }
2314
+ .ui-kit .max-w-3xl {
2315
+ max-width: 48rem;
2316
+ }
2300
2317
  .ui-kit .max-w-4xl {
2301
2318
  max-width: 56rem;
2302
2319
  }
@@ -2983,6 +3000,9 @@
2983
3000
  .ui-kit .bg-alpha-30 {
2984
3001
  background-color: hsl(var(--alpha-70));
2985
3002
  }
3003
+ .ui-kit .bg-alpha-50 {
3004
+ background-color: hsl(var(--alpha-50));
3005
+ }
2986
3006
  .ui-kit .bg-alpha-60 {
2987
3007
  background-color: hsl(var(--alpha-50));
2988
3008
  }
@@ -3040,6 +3060,9 @@
3040
3060
  .ui-kit .bg-inverse-secondary-bg {
3041
3061
  background-color: hsl(var(--inverse-secondary-bg));
3042
3062
  }
3063
+ .ui-kit .bg-muted\/50 {
3064
+ background-color: hsl(var(--muted) / 0.5);
3065
+ }
3043
3066
  .ui-kit .bg-orange-100 {
3044
3067
  --tw-bg-opacity: 1;
3045
3068
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
@@ -3504,6 +3527,9 @@
3504
3527
  .ui-kit .pr-3 {
3505
3528
  padding-right: 0.75rem;
3506
3529
  }
3530
+ .ui-kit .pr-4 {
3531
+ padding-right: 1rem;
3532
+ }
3507
3533
  .ui-kit .pr-9 {
3508
3534
  padding-right: 2.25rem;
3509
3535
  }
@@ -3887,6 +3913,11 @@
3887
3913
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
3888
3914
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3889
3915
  }
3916
+ .ui-kit .shadow-glass-sm {
3917
+ --tw-shadow: var(--shadow-glass-sm);
3918
+ --tw-shadow-colored: var(--shadow-glass-sm);
3919
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3920
+ }
3890
3921
  .ui-kit .shadow-hard-md {
3891
3922
  --tw-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.50), 0 0 0.5px 0 rgba(255, 255, 255, 0.30) inset, 0 5px 12px 0 rgba(15, 23, 42, 0.35), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
3892
3923
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), inset 0 0 0.5px 0 var(--tw-shadow-color), 0 5px 12px 0 var(--tw-shadow-color), inset 0 0.5px 0 0 var(--tw-shadow-color);
@@ -4170,6 +4201,9 @@
4170
4201
  .ui-kit .\[mask-image\:linear-gradient\(to_left\2c rgba\(255\2c 255\2c 255\2c 0\)\2c \#fff_30\%\)\] {
4171
4202
  mask-image: linear-gradient(to left,rgba(255,255,255,0),#fff 30%);
4172
4203
  }
4204
+ .ui-kit .\[scrollbar-width\:none\] {
4205
+ scrollbar-width: none;
4206
+ }
4173
4207
  .ui-kit .placeholder\:text-inverse-muted::placeholder {
4174
4208
  color: hsl(var(--inverse-muted));
4175
4209
  }
@@ -4336,6 +4370,9 @@
4336
4370
  .ui-kit .hover\:bg-secondary-bg-hover:hover {
4337
4371
  background-color: hsl(var(--secondary-bg-hover));
4338
4372
  }
4373
+ .ui-kit .hover\:bg-secondary-border:hover {
4374
+ background-color: hsl(var(--secondary-border));
4375
+ }
4339
4376
  .ui-kit .hover\:bg-status-error-bg:hover {
4340
4377
  background-color: hsl(var(--status-error-bg));
4341
4378
  }
@@ -5095,6 +5132,9 @@
5095
5132
  .ui-kit .data-\[state\=on\]\:bg-primary-bg-hover[data-state="on"] {
5096
5133
  background-color: hsl(var(--primary-bg-hover));
5097
5134
  }
5135
+ .ui-kit .data-\[state\=on\]\:bg-primary-border[data-state="on"] {
5136
+ background-color: hsl(var(--primary-border));
5137
+ }
5098
5138
  .ui-kit .data-\[state\=on\]\:bg-secondary-bg-hover[data-state="on"] {
5099
5139
  background-color: hsl(var(--secondary-bg-hover));
5100
5140
  }
@@ -5107,6 +5147,9 @@
5107
5147
  .ui-kit .data-\[state\=open\]\:bg-primary-bg-hover[data-state="open"] {
5108
5148
  background-color: hsl(var(--primary-bg-hover));
5109
5149
  }
5150
+ .ui-kit .data-\[state\=open\]\:bg-primary-border[data-state="open"] {
5151
+ background-color: hsl(var(--primary-border));
5152
+ }
5110
5153
  .ui-kit .data-\[state\=open\]\:bg-secondary[data-state="open"] {
5111
5154
  background-color: hsl(var(--secondary));
5112
5155
  }
@@ -5682,6 +5725,9 @@
5682
5725
  .ui-kit .md\:min-w-\[450px\] {
5683
5726
  min-width: 450px;
5684
5727
  }
5728
+ .ui-kit .md\:max-w-\[700px\] {
5729
+ max-width: 700px;
5730
+ }
5685
5731
  .ui-kit .md\:grid-cols-3 {
5686
5732
  grid-template-columns: repeat(3, minmax(0, 1fr));
5687
5733
  }
@@ -5774,6 +5820,9 @@
5774
5820
  .ui-kit .lg\:max-w-\[672px\] {
5775
5821
  max-width: 672px;
5776
5822
  }
5823
+ .ui-kit .lg\:max-w-\[800px\] {
5824
+ max-width: 800px;
5825
+ }
5777
5826
  .ui-kit .lg\:max-w-\[min\(512px\2c calc\(100vw-64px\)\)\] {
5778
5827
  max-width: min(512px,calc(100vw - 64px));
5779
5828
  }
package/dist/styles.css CHANGED
@@ -178,6 +178,10 @@
178
178
  --glass-regular: blur(16px) brightness(100%) saturate(180%) contrast(100%);
179
179
  --glass-thick: blur(24px) brightness(96%) saturate(200%) contrast(102%);
180
180
  --glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
181
+
182
+ --shadow-glass-sm: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 0 40px 30px -40px rgba(0, 0, 0, 0.16) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
183
+ --shadow-glass-md: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-primary-border, #D4D4D8), 0 4px 24px 0 rgba(0, 0, 0, 0.12);
184
+ --shadow-glass-lg: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
181
185
  }
182
186
  .dark {
183
187
  /**
@@ -338,6 +342,10 @@
338
342
  --glass-regular: blur(16px) brightness(62%) saturate(160%) contrast(110%);
339
343
  --glass-thick: blur(24px) brightness(52%) saturate(180%) contrast(115%);
340
344
  --glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
345
+
346
+ --shadow-glass-sm: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -40px 80px -40px rgba(255, 255, 255, 0.30) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
347
+ --shadow-glass-md: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 48px 0 rgba(0, 0, 0, 0.48);
348
+ --shadow-glass-lg: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
341
349
  }
342
350
  .backdrop-glass-clear {
343
351
  backdrop-filter: var(--glass-clear);
@@ -1732,6 +1740,9 @@ body {
1732
1740
  .aspect-square {
1733
1741
  aspect-ratio: 1 / 1;
1734
1742
  }
1743
+ .aspect-video {
1744
+ aspect-ratio: 16 / 9;
1745
+ }
1735
1746
  .size-11 {
1736
1747
  width: 2.75rem;
1737
1748
  height: 2.75rem;
@@ -1967,6 +1978,9 @@ body {
1967
1978
  .max-h-\[30vh\] {
1968
1979
  max-height: 30vh;
1969
1980
  }
1981
+ .max-h-\[400px\] {
1982
+ max-height: 400px;
1983
+ }
1970
1984
  .max-h-\[calc\(100vh-44px\)\] {
1971
1985
  max-height: calc(100vh - 44px);
1972
1986
  }
@@ -2282,6 +2296,9 @@ body {
2282
2296
  .max-w-36 {
2283
2297
  max-width: 9rem;
2284
2298
  }
2299
+ .max-w-3xl {
2300
+ max-width: 48rem;
2301
+ }
2285
2302
  .max-w-4xl {
2286
2303
  max-width: 56rem;
2287
2304
  }
@@ -2968,6 +2985,9 @@ body {
2968
2985
  .bg-alpha-30 {
2969
2986
  background-color: hsl(var(--alpha-70));
2970
2987
  }
2988
+ .bg-alpha-50 {
2989
+ background-color: hsl(var(--alpha-50));
2990
+ }
2971
2991
  .bg-alpha-60 {
2972
2992
  background-color: hsl(var(--alpha-50));
2973
2993
  }
@@ -3025,6 +3045,9 @@ body {
3025
3045
  .bg-inverse-secondary-bg {
3026
3046
  background-color: hsl(var(--inverse-secondary-bg));
3027
3047
  }
3048
+ .bg-muted\/50 {
3049
+ background-color: hsl(var(--muted) / 0.5);
3050
+ }
3028
3051
  .bg-orange-100 {
3029
3052
  --tw-bg-opacity: 1;
3030
3053
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
@@ -3489,6 +3512,9 @@ body {
3489
3512
  .pr-3 {
3490
3513
  padding-right: 0.75rem;
3491
3514
  }
3515
+ .pr-4 {
3516
+ padding-right: 1rem;
3517
+ }
3492
3518
  .pr-9 {
3493
3519
  padding-right: 2.25rem;
3494
3520
  }
@@ -3872,6 +3898,11 @@ body {
3872
3898
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
3873
3899
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3874
3900
  }
3901
+ .shadow-glass-sm {
3902
+ --tw-shadow: var(--shadow-glass-sm);
3903
+ --tw-shadow-colored: var(--shadow-glass-sm);
3904
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3905
+ }
3875
3906
  .shadow-hard-md {
3876
3907
  --tw-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.50), 0 0 0.5px 0 rgba(255, 255, 255, 0.30) inset, 0 5px 12px 0 rgba(15, 23, 42, 0.35), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset;
3877
3908
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), inset 0 0 0.5px 0 var(--tw-shadow-color), 0 5px 12px 0 var(--tw-shadow-color), inset 0 0.5px 0 0 var(--tw-shadow-color);
@@ -4159,6 +4190,9 @@ body {
4159
4190
  .\[mask-image\:linear-gradient\(to_left\2c rgba\(255\2c 255\2c 255\2c 0\)\2c \#fff_30\%\)\] {
4160
4191
  mask-image: linear-gradient(to left,rgba(255,255,255,0),#fff 30%);
4161
4192
  }
4193
+ .\[scrollbar-width\:none\] {
4194
+ scrollbar-width: none;
4195
+ }
4162
4196
  .placeholder\:text-inverse-muted::placeholder {
4163
4197
  color: hsl(var(--inverse-muted));
4164
4198
  }
@@ -4325,6 +4359,9 @@ body {
4325
4359
  .hover\:bg-secondary-bg-hover:hover {
4326
4360
  background-color: hsl(var(--secondary-bg-hover));
4327
4361
  }
4362
+ .hover\:bg-secondary-border:hover {
4363
+ background-color: hsl(var(--secondary-border));
4364
+ }
4328
4365
  .hover\:bg-status-error-bg:hover {
4329
4366
  background-color: hsl(var(--status-error-bg));
4330
4367
  }
@@ -5084,6 +5121,9 @@ body {
5084
5121
  .data-\[state\=on\]\:bg-primary-bg-hover[data-state="on"] {
5085
5122
  background-color: hsl(var(--primary-bg-hover));
5086
5123
  }
5124
+ .data-\[state\=on\]\:bg-primary-border[data-state="on"] {
5125
+ background-color: hsl(var(--primary-border));
5126
+ }
5087
5127
  .data-\[state\=on\]\:bg-secondary-bg-hover[data-state="on"] {
5088
5128
  background-color: hsl(var(--secondary-bg-hover));
5089
5129
  }
@@ -5096,6 +5136,9 @@ body {
5096
5136
  .data-\[state\=open\]\:bg-primary-bg-hover[data-state="open"] {
5097
5137
  background-color: hsl(var(--primary-bg-hover));
5098
5138
  }
5139
+ .data-\[state\=open\]\:bg-primary-border[data-state="open"] {
5140
+ background-color: hsl(var(--primary-border));
5141
+ }
5099
5142
  .data-\[state\=open\]\:bg-secondary[data-state="open"] {
5100
5143
  background-color: hsl(var(--secondary));
5101
5144
  }
@@ -5671,6 +5714,9 @@ body {
5671
5714
  .md\:min-w-\[450px\] {
5672
5715
  min-width: 450px;
5673
5716
  }
5717
+ .md\:max-w-\[700px\] {
5718
+ max-width: 700px;
5719
+ }
5674
5720
  .md\:grid-cols-3 {
5675
5721
  grid-template-columns: repeat(3, minmax(0, 1fr));
5676
5722
  }
@@ -5763,6 +5809,9 @@ body {
5763
5809
  .lg\:max-w-\[672px\] {
5764
5810
  max-width: 672px;
5765
5811
  }
5812
+ .lg\:max-w-\[800px\] {
5813
+ max-width: 800px;
5814
+ }
5766
5815
  .lg\:max-w-\[min\(512px\2c calc\(100vw-64px\)\)\] {
5767
5816
  max-width: min(512px,calc(100vw - 64px));
5768
5817
  }
package/dist/theme.css CHANGED
@@ -177,6 +177,10 @@
177
177
  --glass-regular: blur(16px) brightness(100%) saturate(180%) contrast(100%);
178
178
  --glass-thick: blur(24px) brightness(96%) saturate(200%) contrast(102%);
179
179
  --glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
180
+
181
+ --shadow-glass-sm: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 0 40px 30px -40px rgba(0, 0, 0, 0.16) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
182
+ --shadow-glass-md: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-primary-border, #D4D4D8), 0 4px 24px 0 rgba(0, 0, 0, 0.12);
183
+ --shadow-glass-lg: 0 1.5px 1.5px -0.5px rgb(255, 255, 255) inset, 0 -6px 3px -3px rgb(255, 255, 255) inset, 1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), -1.25px 0 0 -0.75px var(--tailwind-colors-zinc-400, #A1A1AA), 0 0 0 0.5px var(--base-secondary-border, #E4E4E7), 0 8px 16px 0 rgba(0, 0, 0, 0.02);
180
184
  }
181
185
 
182
186
  .dark {
@@ -338,6 +342,10 @@
338
342
  --glass-regular: blur(16px) brightness(62%) saturate(160%) contrast(110%);
339
343
  --glass-thick: blur(24px) brightness(52%) saturate(180%) contrast(115%);
340
344
  --glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
345
+
346
+ --shadow-glass-sm: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -40px 80px -40px rgba(255, 255, 255, 0.30) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
347
+ --shadow-glass-md: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 48px 0 rgba(0, 0, 0, 0.48);
348
+ --shadow-glass-lg: 0 1px 1px -0.5px rgba(255, 255, 255, 0.40) inset, 0 -1px 1px -0.5px rgba(255, 255, 255, 0.30) inset, 0 -20px 250px -100px rgba(255, 255, 255, 0.20) inset, 1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), -1.25px 0 0 -0.75px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(0, 0, 0, 0.50), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
341
349
  }
342
350
 
343
351
  .backdrop-glass-clear {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ics-ui-kit",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "packageManager": "pnpm@10.17.1",
5
5
  "repository": {
6
6
  "type": "git",
package/tailwind.preset.js CHANGED
@@ -252,7 +252,11 @@ export default {
252
252
  "hard-xl":
253
253
  "0 3px 5px 0 rgba(2, 6, 23, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px 0 rgba(2, 6, 23, 0.45), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset",
254
254
  "hard-2xl":
255
- "0 4px 6px 0 rgba(2, 6, 23, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 28px 0 rgba(2, 6, 23, 0.45), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset"
255
+ "0 4px 6px 0 rgba(2, 6, 23, 0.35), 0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 28px 0 rgba(2, 6, 23, 0.45), 0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset",
256
+
257
+ "glass-sm": "var(--shadow-glass-sm)",
258
+ "glass-md": "var(--shadow-glass-md)",
259
+ "glass-lg": "var(--shadow-glass-lg)"
256
260
  },
257
261
  lineHeight: {
258
262
  none: "100%",