ics-ui-kit 0.1.4 → 0.1.5

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 +47 -0
  17. package/dist/styles.css +47 -0
  18. package/dist/theme.css +6 -0
  19. package/package.json +1 -1
  20. package/tailwind.preset.js +4 -1
package/dist/styles-scoped.css CHANGED
@@ -178,6 +178,9 @@
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);
181
184
  }
182
185
  .dark {
183
186
  /**
@@ -338,6 +341,9 @@
338
341
  --glass-regular: blur(16px) brightness(62%) saturate(160%) contrast(110%);
339
342
  --glass-thick: blur(24px) brightness(52%) saturate(180%) contrast(115%);
340
343
  --glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
344
+
345
+ --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);
346
+ --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);
341
347
  }
342
348
  .backdrop-glass-clear {
343
349
  backdrop-filter: var(--glass-clear);
@@ -1747,6 +1753,9 @@
1747
1753
  .ui-kit .aspect-square {
1748
1754
  aspect-ratio: 1 / 1;
1749
1755
  }
1756
+ .ui-kit .aspect-video {
1757
+ aspect-ratio: 16 / 9;
1758
+ }
1750
1759
  .ui-kit .size-11 {
1751
1760
  width: 2.75rem;
1752
1761
  height: 2.75rem;
@@ -1982,6 +1991,9 @@
1982
1991
  .ui-kit .max-h-\[30vh\] {
1983
1992
  max-height: 30vh;
1984
1993
  }
1994
+ .ui-kit .max-h-\[400px\] {
1995
+ max-height: 400px;
1996
+ }
1985
1997
  .ui-kit .max-h-\[calc\(100vh-44px\)\] {
1986
1998
  max-height: calc(100vh - 44px);
1987
1999
  }
@@ -2297,6 +2309,9 @@
2297
2309
  .ui-kit .max-w-36 {
2298
2310
  max-width: 9rem;
2299
2311
  }
2312
+ .ui-kit .max-w-3xl {
2313
+ max-width: 48rem;
2314
+ }
2300
2315
  .ui-kit .max-w-4xl {
2301
2316
  max-width: 56rem;
2302
2317
  }
@@ -2983,6 +2998,9 @@
2983
2998
  .ui-kit .bg-alpha-30 {
2984
2999
  background-color: hsl(var(--alpha-70));
2985
3000
  }
3001
+ .ui-kit .bg-alpha-50 {
3002
+ background-color: hsl(var(--alpha-50));
3003
+ }
2986
3004
  .ui-kit .bg-alpha-60 {
2987
3005
  background-color: hsl(var(--alpha-50));
2988
3006
  }
@@ -3040,6 +3058,9 @@
3040
3058
  .ui-kit .bg-inverse-secondary-bg {
3041
3059
  background-color: hsl(var(--inverse-secondary-bg));
3042
3060
  }
3061
+ .ui-kit .bg-muted\/50 {
3062
+ background-color: hsl(var(--muted) / 0.5);
3063
+ }
3043
3064
  .ui-kit .bg-orange-100 {
3044
3065
  --tw-bg-opacity: 1;
3045
3066
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
@@ -3504,6 +3525,9 @@
3504
3525
  .ui-kit .pr-3 {
3505
3526
  padding-right: 0.75rem;
3506
3527
  }
3528
+ .ui-kit .pr-4 {
3529
+ padding-right: 1rem;
3530
+ }
3507
3531
  .ui-kit .pr-9 {
3508
3532
  padding-right: 2.25rem;
3509
3533
  }
@@ -3887,6 +3911,11 @@
3887
3911
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
3888
3912
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3889
3913
  }
3914
+ .ui-kit .shadow-glass-sm {
3915
+ --tw-shadow: var(--shadow-glass-sm);
3916
+ --tw-shadow-colored: var(--shadow-glass-sm);
3917
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3918
+ }
3890
3919
  .ui-kit .shadow-hard-md {
3891
3920
  --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
3921
  --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 +4199,9 @@
4170
4199
  .ui-kit .\[mask-image\:linear-gradient\(to_left\2c rgba\(255\2c 255\2c 255\2c 0\)\2c \#fff_30\%\)\] {
4171
4200
  mask-image: linear-gradient(to left,rgba(255,255,255,0),#fff 30%);
4172
4201
  }
4202
+ .ui-kit .\[scrollbar-width\:none\] {
4203
+ scrollbar-width: none;
4204
+ }
4173
4205
  .ui-kit .placeholder\:text-inverse-muted::placeholder {
4174
4206
  color: hsl(var(--inverse-muted));
4175
4207
  }
@@ -4336,6 +4368,9 @@
4336
4368
  .ui-kit .hover\:bg-secondary-bg-hover:hover {
4337
4369
  background-color: hsl(var(--secondary-bg-hover));
4338
4370
  }
4371
+ .ui-kit .hover\:bg-secondary-border:hover {
4372
+ background-color: hsl(var(--secondary-border));
4373
+ }
4339
4374
  .ui-kit .hover\:bg-status-error-bg:hover {
4340
4375
  background-color: hsl(var(--status-error-bg));
4341
4376
  }
@@ -5095,6 +5130,9 @@
5095
5130
  .ui-kit .data-\[state\=on\]\:bg-primary-bg-hover[data-state="on"] {
5096
5131
  background-color: hsl(var(--primary-bg-hover));
5097
5132
  }
5133
+ .ui-kit .data-\[state\=on\]\:bg-primary-border[data-state="on"] {
5134
+ background-color: hsl(var(--primary-border));
5135
+ }
5098
5136
  .ui-kit .data-\[state\=on\]\:bg-secondary-bg-hover[data-state="on"] {
5099
5137
  background-color: hsl(var(--secondary-bg-hover));
5100
5138
  }
@@ -5107,6 +5145,9 @@
5107
5145
  .ui-kit .data-\[state\=open\]\:bg-primary-bg-hover[data-state="open"] {
5108
5146
  background-color: hsl(var(--primary-bg-hover));
5109
5147
  }
5148
+ .ui-kit .data-\[state\=open\]\:bg-primary-border[data-state="open"] {
5149
+ background-color: hsl(var(--primary-border));
5150
+ }
5110
5151
  .ui-kit .data-\[state\=open\]\:bg-secondary[data-state="open"] {
5111
5152
  background-color: hsl(var(--secondary));
5112
5153
  }
@@ -5682,6 +5723,9 @@
5682
5723
  .ui-kit .md\:min-w-\[450px\] {
5683
5724
  min-width: 450px;
5684
5725
  }
5726
+ .ui-kit .md\:max-w-\[700px\] {
5727
+ max-width: 700px;
5728
+ }
5685
5729
  .ui-kit .md\:grid-cols-3 {
5686
5730
  grid-template-columns: repeat(3, minmax(0, 1fr));
5687
5731
  }
@@ -5774,6 +5818,9 @@
5774
5818
  .ui-kit .lg\:max-w-\[672px\] {
5775
5819
  max-width: 672px;
5776
5820
  }
5821
+ .ui-kit .lg\:max-w-\[800px\] {
5822
+ max-width: 800px;
5823
+ }
5777
5824
  .ui-kit .lg\:max-w-\[min\(512px\2c calc\(100vw-64px\)\)\] {
5778
5825
  max-width: min(512px,calc(100vw - 64px));
5779
5826
  }
package/dist/styles.css CHANGED
@@ -178,6 +178,9 @@
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);
181
184
  }
182
185
  .dark {
183
186
  /**
@@ -338,6 +341,9 @@
338
341
  --glass-regular: blur(16px) brightness(62%) saturate(160%) contrast(110%);
339
342
  --glass-thick: blur(24px) brightness(52%) saturate(180%) contrast(115%);
340
343
  --glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
344
+
345
+ --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);
346
+ --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);
341
347
  }
342
348
  .backdrop-glass-clear {
343
349
  backdrop-filter: var(--glass-clear);
@@ -1732,6 +1738,9 @@ body {
1732
1738
  .aspect-square {
1733
1739
  aspect-ratio: 1 / 1;
1734
1740
  }
1741
+ .aspect-video {
1742
+ aspect-ratio: 16 / 9;
1743
+ }
1735
1744
  .size-11 {
1736
1745
  width: 2.75rem;
1737
1746
  height: 2.75rem;
@@ -1967,6 +1976,9 @@ body {
1967
1976
  .max-h-\[30vh\] {
1968
1977
  max-height: 30vh;
1969
1978
  }
1979
+ .max-h-\[400px\] {
1980
+ max-height: 400px;
1981
+ }
1970
1982
  .max-h-\[calc\(100vh-44px\)\] {
1971
1983
  max-height: calc(100vh - 44px);
1972
1984
  }
@@ -2282,6 +2294,9 @@ body {
2282
2294
  .max-w-36 {
2283
2295
  max-width: 9rem;
2284
2296
  }
2297
+ .max-w-3xl {
2298
+ max-width: 48rem;
2299
+ }
2285
2300
  .max-w-4xl {
2286
2301
  max-width: 56rem;
2287
2302
  }
@@ -2968,6 +2983,9 @@ body {
2968
2983
  .bg-alpha-30 {
2969
2984
  background-color: hsl(var(--alpha-70));
2970
2985
  }
2986
+ .bg-alpha-50 {
2987
+ background-color: hsl(var(--alpha-50));
2988
+ }
2971
2989
  .bg-alpha-60 {
2972
2990
  background-color: hsl(var(--alpha-50));
2973
2991
  }
@@ -3025,6 +3043,9 @@ body {
3025
3043
  .bg-inverse-secondary-bg {
3026
3044
  background-color: hsl(var(--inverse-secondary-bg));
3027
3045
  }
3046
+ .bg-muted\/50 {
3047
+ background-color: hsl(var(--muted) / 0.5);
3048
+ }
3028
3049
  .bg-orange-100 {
3029
3050
  --tw-bg-opacity: 1;
3030
3051
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
@@ -3489,6 +3510,9 @@ body {
3489
3510
  .pr-3 {
3490
3511
  padding-right: 0.75rem;
3491
3512
  }
3513
+ .pr-4 {
3514
+ padding-right: 1rem;
3515
+ }
3492
3516
  .pr-9 {
3493
3517
  padding-right: 2.25rem;
3494
3518
  }
@@ -3872,6 +3896,11 @@ body {
3872
3896
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
3873
3897
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3874
3898
  }
3899
+ .shadow-glass-sm {
3900
+ --tw-shadow: var(--shadow-glass-sm);
3901
+ --tw-shadow-colored: var(--shadow-glass-sm);
3902
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3903
+ }
3875
3904
  .shadow-hard-md {
3876
3905
  --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
3906
  --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 +4188,9 @@ body {
4159
4188
  .\[mask-image\:linear-gradient\(to_left\2c rgba\(255\2c 255\2c 255\2c 0\)\2c \#fff_30\%\)\] {
4160
4189
  mask-image: linear-gradient(to left,rgba(255,255,255,0),#fff 30%);
4161
4190
  }
4191
+ .\[scrollbar-width\:none\] {
4192
+ scrollbar-width: none;
4193
+ }
4162
4194
  .placeholder\:text-inverse-muted::placeholder {
4163
4195
  color: hsl(var(--inverse-muted));
4164
4196
  }
@@ -4325,6 +4357,9 @@ body {
4325
4357
  .hover\:bg-secondary-bg-hover:hover {
4326
4358
  background-color: hsl(var(--secondary-bg-hover));
4327
4359
  }
4360
+ .hover\:bg-secondary-border:hover {
4361
+ background-color: hsl(var(--secondary-border));
4362
+ }
4328
4363
  .hover\:bg-status-error-bg:hover {
4329
4364
  background-color: hsl(var(--status-error-bg));
4330
4365
  }
@@ -5084,6 +5119,9 @@ body {
5084
5119
  .data-\[state\=on\]\:bg-primary-bg-hover[data-state="on"] {
5085
5120
  background-color: hsl(var(--primary-bg-hover));
5086
5121
  }
5122
+ .data-\[state\=on\]\:bg-primary-border[data-state="on"] {
5123
+ background-color: hsl(var(--primary-border));
5124
+ }
5087
5125
  .data-\[state\=on\]\:bg-secondary-bg-hover[data-state="on"] {
5088
5126
  background-color: hsl(var(--secondary-bg-hover));
5089
5127
  }
@@ -5096,6 +5134,9 @@ body {
5096
5134
  .data-\[state\=open\]\:bg-primary-bg-hover[data-state="open"] {
5097
5135
  background-color: hsl(var(--primary-bg-hover));
5098
5136
  }
5137
+ .data-\[state\=open\]\:bg-primary-border[data-state="open"] {
5138
+ background-color: hsl(var(--primary-border));
5139
+ }
5099
5140
  .data-\[state\=open\]\:bg-secondary[data-state="open"] {
5100
5141
  background-color: hsl(var(--secondary));
5101
5142
  }
@@ -5671,6 +5712,9 @@ body {
5671
5712
  .md\:min-w-\[450px\] {
5672
5713
  min-width: 450px;
5673
5714
  }
5715
+ .md\:max-w-\[700px\] {
5716
+ max-width: 700px;
5717
+ }
5674
5718
  .md\:grid-cols-3 {
5675
5719
  grid-template-columns: repeat(3, minmax(0, 1fr));
5676
5720
  }
@@ -5763,6 +5807,9 @@ body {
5763
5807
  .lg\:max-w-\[672px\] {
5764
5808
  max-width: 672px;
5765
5809
  }
5810
+ .lg\:max-w-\[800px\] {
5811
+ max-width: 800px;
5812
+ }
5766
5813
  .lg\:max-w-\[min\(512px\2c calc\(100vw-64px\)\)\] {
5767
5814
  max-width: min(512px,calc(100vw - 64px));
5768
5815
  }
package/dist/theme.css CHANGED
@@ -177,6 +177,9 @@
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);
180
183
  }
181
184
 
182
185
  .dark {
@@ -338,6 +341,9 @@
338
341
  --glass-regular: blur(16px) brightness(62%) saturate(160%) contrast(110%);
339
342
  --glass-thick: blur(24px) brightness(52%) saturate(180%) contrast(115%);
340
343
  --glass-clear: blur(4px) brightness(100%) saturate(100%) opacity(0.6);
344
+
345
+ --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);
346
+ --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);
341
347
  }
342
348
 
343
349
  .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.5",
4
4
  "packageManager": "pnpm@10.17.1",
5
5
  "repository": {
6
6
  "type": "git",
package/tailwind.preset.js CHANGED
@@ -252,7 +252,10 @@ 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)"
256
259
  },
257
260
  lineHeight: {
258
261
  none: "100%",