@kushagradhawan/kookie-ui 0.1.61 → 0.1.63

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 (25) hide show
  1. package/components.css +101 -48
  2. package/dist/cjs/components/separator.d.ts.map +1 -1
  3. package/dist/cjs/components/separator.js.map +2 -2
  4. package/dist/cjs/components/separator.props.d.ts +5 -0
  5. package/dist/cjs/components/separator.props.d.ts.map +1 -1
  6. package/dist/cjs/components/separator.props.js +1 -1
  7. package/dist/cjs/components/separator.props.js.map +2 -2
  8. package/dist/esm/components/separator.d.ts.map +1 -1
  9. package/dist/esm/components/separator.js.map +2 -2
  10. package/dist/esm/components/separator.props.d.ts +5 -0
  11. package/dist/esm/components/separator.props.d.ts.map +1 -1
  12. package/dist/esm/components/separator.props.js +1 -1
  13. package/dist/esm/components/separator.props.js.map +2 -2
  14. package/package.json +1 -1
  15. package/schemas/base-button.json +1 -1
  16. package/schemas/button.json +1 -1
  17. package/schemas/icon-button.json +1 -1
  18. package/schemas/index.json +6 -6
  19. package/schemas/toggle-button.json +1 -1
  20. package/schemas/toggle-icon-button.json +1 -1
  21. package/src/components/button.css +19 -8
  22. package/src/components/separator.css +4 -0
  23. package/src/components/separator.props.tsx +2 -0
  24. package/src/components/separator.tsx +3 -18
  25. package/styles.css +101 -48
package/components.css CHANGED
@@ -4136,6 +4136,7 @@
4136
4136
  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
4137
4137
  }
4138
4138
  .rt-Button:where(.rt-r-size-1) {
4139
+ --button-padding-inline-base: var(--space-2);
4139
4140
  gap: var(--component-gap-1);
4140
4141
  font-size: var(--font-size-1);
4141
4142
  line-height: var(--line-height-1);
@@ -4146,15 +4147,17 @@
4146
4147
  height: var(--content-icon-size-1);
4147
4148
  }
4148
4149
  .rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)) {
4149
- padding-left: var(--space-2);
4150
- padding-right: var(--space-2);
4150
+ padding-inline-start: var(--button-padding-inline-base);
4151
+ padding-inline-end: var(--button-padding-inline-base);
4151
4152
  }
4152
4153
  .rt-Button:where(.rt-r-size-1):where(.rt-variant-ghost) {
4153
4154
  gap: var(--component-gap-ghost-1);
4154
4155
  --button-ghost-padding-x: var(--space-2);
4155
4156
  --button-ghost-padding-y: var(--space-1);
4157
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4156
4158
  }
4157
4159
  .rt-Button:where(.rt-r-size-2) {
4160
+ --button-padding-inline-base: var(--space-3);
4158
4161
  gap: var(--component-gap-2);
4159
4162
  font-size: var(--font-size-2);
4160
4163
  line-height: var(--line-height-2);
@@ -4165,15 +4168,17 @@
4165
4168
  height: var(--content-icon-size-2);
4166
4169
  }
4167
4170
  .rt-Button:where(.rt-r-size-2):where(:not(.rt-variant-ghost)) {
4168
- padding-left: var(--space-3);
4169
- padding-right: var(--space-3);
4171
+ padding-inline-start: var(--button-padding-inline-base);
4172
+ padding-inline-end: var(--button-padding-inline-base);
4170
4173
  }
4171
4174
  .rt-Button:where(.rt-r-size-2):where(.rt-variant-ghost) {
4172
4175
  gap: var(--component-gap-ghost-2);
4173
4176
  --button-ghost-padding-x: var(--space-2);
4174
4177
  --button-ghost-padding-y: var(--space-1);
4178
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4175
4179
  }
4176
4180
  .rt-Button:where(.rt-r-size-3) {
4181
+ --button-padding-inline-base: var(--space-4);
4177
4182
  gap: var(--component-gap-3);
4178
4183
  font-size: var(--font-size-3);
4179
4184
  line-height: var(--line-height-3);
@@ -4184,15 +4189,17 @@
4184
4189
  height: var(--content-icon-size-3);
4185
4190
  }
4186
4191
  .rt-Button:where(.rt-r-size-3):where(:not(.rt-variant-ghost)) {
4187
- padding-left: var(--space-4);
4188
- padding-right: var(--space-4);
4192
+ padding-inline-start: var(--button-padding-inline-base);
4193
+ padding-inline-end: var(--button-padding-inline-base);
4189
4194
  }
4190
4195
  .rt-Button:where(.rt-r-size-3):where(.rt-variant-ghost) {
4191
4196
  gap: var(--component-gap-ghost-3);
4192
4197
  --button-ghost-padding-x: var(--space-3);
4193
4198
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4199
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4194
4200
  }
4195
4201
  .rt-Button:where(.rt-r-size-4) {
4202
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4196
4203
  gap: var(--component-gap-4);
4197
4204
  font-size: var(--font-size-4);
4198
4205
  line-height: var(--line-height-4);
@@ -4203,16 +4210,18 @@
4203
4210
  height: var(--content-icon-size-4);
4204
4211
  }
4205
4212
  .rt-Button:where(.rt-r-size-4):where(:not(.rt-variant-ghost)) {
4206
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4207
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4213
+ padding-inline-start: var(--button-padding-inline-base);
4214
+ padding-inline-end: var(--button-padding-inline-base);
4208
4215
  }
4209
4216
  .rt-Button:where(.rt-r-size-4):where(.rt-variant-ghost) {
4210
4217
  gap: var(--component-gap-ghost-4);
4211
4218
  --button-ghost-padding-x: var(--space-4);
4212
4219
  --button-ghost-padding-y: var(--space-2);
4220
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4213
4221
  }
4214
4222
  @media (min-width: 520px) {
4215
4223
  .rt-Button:where(.xs\:rt-r-size-1) {
4224
+ --button-padding-inline-base: var(--space-2);
4216
4225
  gap: var(--component-gap-1);
4217
4226
  font-size: var(--font-size-1);
4218
4227
  line-height: var(--line-height-1);
@@ -4223,15 +4232,17 @@
4223
4232
  height: var(--content-icon-size-1);
4224
4233
  }
4225
4234
  .rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
4226
- padding-left: var(--space-2);
4227
- padding-right: var(--space-2);
4235
+ padding-inline-start: var(--button-padding-inline-base);
4236
+ padding-inline-end: var(--button-padding-inline-base);
4228
4237
  }
4229
4238
  .rt-Button:where(.xs\:rt-r-size-1):where(.rt-variant-ghost) {
4230
4239
  gap: var(--component-gap-ghost-1);
4231
4240
  --button-ghost-padding-x: var(--space-2);
4232
4241
  --button-ghost-padding-y: var(--space-1);
4242
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4233
4243
  }
4234
4244
  .rt-Button:where(.xs\:rt-r-size-2) {
4245
+ --button-padding-inline-base: var(--space-3);
4235
4246
  gap: var(--component-gap-2);
4236
4247
  font-size: var(--font-size-2);
4237
4248
  line-height: var(--line-height-2);
@@ -4242,15 +4253,17 @@
4242
4253
  height: var(--content-icon-size-2);
4243
4254
  }
4244
4255
  .rt-Button:where(.xs\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
4245
- padding-left: var(--space-3);
4246
- padding-right: var(--space-3);
4256
+ padding-inline-start: var(--button-padding-inline-base);
4257
+ padding-inline-end: var(--button-padding-inline-base);
4247
4258
  }
4248
4259
  .rt-Button:where(.xs\:rt-r-size-2):where(.rt-variant-ghost) {
4249
4260
  gap: var(--component-gap-ghost-2);
4250
4261
  --button-ghost-padding-x: var(--space-2);
4251
4262
  --button-ghost-padding-y: var(--space-1);
4263
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4252
4264
  }
4253
4265
  .rt-Button:where(.xs\:rt-r-size-3) {
4266
+ --button-padding-inline-base: var(--space-4);
4254
4267
  gap: var(--component-gap-3);
4255
4268
  font-size: var(--font-size-3);
4256
4269
  line-height: var(--line-height-3);
@@ -4261,15 +4274,17 @@
4261
4274
  height: var(--content-icon-size-3);
4262
4275
  }
4263
4276
  .rt-Button:where(.xs\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
4264
- padding-left: var(--space-4);
4265
- padding-right: var(--space-4);
4277
+ padding-inline-start: var(--button-padding-inline-base);
4278
+ padding-inline-end: var(--button-padding-inline-base);
4266
4279
  }
4267
4280
  .rt-Button:where(.xs\:rt-r-size-3):where(.rt-variant-ghost) {
4268
4281
  gap: var(--component-gap-ghost-3);
4269
4282
  --button-ghost-padding-x: var(--space-3);
4270
4283
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4284
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4271
4285
  }
4272
4286
  .rt-Button:where(.xs\:rt-r-size-4) {
4287
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4273
4288
  gap: var(--component-gap-4);
4274
4289
  font-size: var(--font-size-4);
4275
4290
  line-height: var(--line-height-4);
@@ -4280,17 +4295,19 @@
4280
4295
  height: var(--content-icon-size-4);
4281
4296
  }
4282
4297
  .rt-Button:where(.xs\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
4283
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4284
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4298
+ padding-inline-start: var(--button-padding-inline-base);
4299
+ padding-inline-end: var(--button-padding-inline-base);
4285
4300
  }
4286
4301
  .rt-Button:where(.xs\:rt-r-size-4):where(.rt-variant-ghost) {
4287
4302
  gap: var(--component-gap-ghost-4);
4288
4303
  --button-ghost-padding-x: var(--space-4);
4289
4304
  --button-ghost-padding-y: var(--space-2);
4305
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4290
4306
  }
4291
4307
  }
4292
4308
  @media (min-width: 768px) {
4293
4309
  .rt-Button:where(.sm\:rt-r-size-1) {
4310
+ --button-padding-inline-base: var(--space-2);
4294
4311
  gap: var(--component-gap-1);
4295
4312
  font-size: var(--font-size-1);
4296
4313
  line-height: var(--line-height-1);
@@ -4301,15 +4318,17 @@
4301
4318
  height: var(--content-icon-size-1);
4302
4319
  }
4303
4320
  .rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
4304
- padding-left: var(--space-2);
4305
- padding-right: var(--space-2);
4321
+ padding-inline-start: var(--button-padding-inline-base);
4322
+ padding-inline-end: var(--button-padding-inline-base);
4306
4323
  }
4307
4324
  .rt-Button:where(.sm\:rt-r-size-1):where(.rt-variant-ghost) {
4308
4325
  gap: var(--component-gap-ghost-1);
4309
4326
  --button-ghost-padding-x: var(--space-2);
4310
4327
  --button-ghost-padding-y: var(--space-1);
4328
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4311
4329
  }
4312
4330
  .rt-Button:where(.sm\:rt-r-size-2) {
4331
+ --button-padding-inline-base: var(--space-3);
4313
4332
  gap: var(--component-gap-2);
4314
4333
  font-size: var(--font-size-2);
4315
4334
  line-height: var(--line-height-2);
@@ -4320,15 +4339,17 @@
4320
4339
  height: var(--content-icon-size-2);
4321
4340
  }
4322
4341
  .rt-Button:where(.sm\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
4323
- padding-left: var(--space-3);
4324
- padding-right: var(--space-3);
4342
+ padding-inline-start: var(--button-padding-inline-base);
4343
+ padding-inline-end: var(--button-padding-inline-base);
4325
4344
  }
4326
4345
  .rt-Button:where(.sm\:rt-r-size-2):where(.rt-variant-ghost) {
4327
4346
  gap: var(--component-gap-ghost-2);
4328
4347
  --button-ghost-padding-x: var(--space-2);
4329
4348
  --button-ghost-padding-y: var(--space-1);
4349
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4330
4350
  }
4331
4351
  .rt-Button:where(.sm\:rt-r-size-3) {
4352
+ --button-padding-inline-base: var(--space-4);
4332
4353
  gap: var(--component-gap-3);
4333
4354
  font-size: var(--font-size-3);
4334
4355
  line-height: var(--line-height-3);
@@ -4339,15 +4360,17 @@
4339
4360
  height: var(--content-icon-size-3);
4340
4361
  }
4341
4362
  .rt-Button:where(.sm\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
4342
- padding-left: var(--space-4);
4343
- padding-right: var(--space-4);
4363
+ padding-inline-start: var(--button-padding-inline-base);
4364
+ padding-inline-end: var(--button-padding-inline-base);
4344
4365
  }
4345
4366
  .rt-Button:where(.sm\:rt-r-size-3):where(.rt-variant-ghost) {
4346
4367
  gap: var(--component-gap-ghost-3);
4347
4368
  --button-ghost-padding-x: var(--space-3);
4348
4369
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4370
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4349
4371
  }
4350
4372
  .rt-Button:where(.sm\:rt-r-size-4) {
4373
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4351
4374
  gap: var(--component-gap-4);
4352
4375
  font-size: var(--font-size-4);
4353
4376
  line-height: var(--line-height-4);
@@ -4358,17 +4381,19 @@
4358
4381
  height: var(--content-icon-size-4);
4359
4382
  }
4360
4383
  .rt-Button:where(.sm\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
4361
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4362
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4384
+ padding-inline-start: var(--button-padding-inline-base);
4385
+ padding-inline-end: var(--button-padding-inline-base);
4363
4386
  }
4364
4387
  .rt-Button:where(.sm\:rt-r-size-4):where(.rt-variant-ghost) {
4365
4388
  gap: var(--component-gap-ghost-4);
4366
4389
  --button-ghost-padding-x: var(--space-4);
4367
4390
  --button-ghost-padding-y: var(--space-2);
4391
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4368
4392
  }
4369
4393
  }
4370
4394
  @media (min-width: 1024px) {
4371
4395
  .rt-Button:where(.md\:rt-r-size-1) {
4396
+ --button-padding-inline-base: var(--space-2);
4372
4397
  gap: var(--component-gap-1);
4373
4398
  font-size: var(--font-size-1);
4374
4399
  line-height: var(--line-height-1);
@@ -4379,15 +4404,17 @@
4379
4404
  height: var(--content-icon-size-1);
4380
4405
  }
4381
4406
  .rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
4382
- padding-left: var(--space-2);
4383
- padding-right: var(--space-2);
4407
+ padding-inline-start: var(--button-padding-inline-base);
4408
+ padding-inline-end: var(--button-padding-inline-base);
4384
4409
  }
4385
4410
  .rt-Button:where(.md\:rt-r-size-1):where(.rt-variant-ghost) {
4386
4411
  gap: var(--component-gap-ghost-1);
4387
4412
  --button-ghost-padding-x: var(--space-2);
4388
4413
  --button-ghost-padding-y: var(--space-1);
4414
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4389
4415
  }
4390
4416
  .rt-Button:where(.md\:rt-r-size-2) {
4417
+ --button-padding-inline-base: var(--space-3);
4391
4418
  gap: var(--component-gap-2);
4392
4419
  font-size: var(--font-size-2);
4393
4420
  line-height: var(--line-height-2);
@@ -4398,15 +4425,17 @@
4398
4425
  height: var(--content-icon-size-2);
4399
4426
  }
4400
4427
  .rt-Button:where(.md\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
4401
- padding-left: var(--space-3);
4402
- padding-right: var(--space-3);
4428
+ padding-inline-start: var(--button-padding-inline-base);
4429
+ padding-inline-end: var(--button-padding-inline-base);
4403
4430
  }
4404
4431
  .rt-Button:where(.md\:rt-r-size-2):where(.rt-variant-ghost) {
4405
4432
  gap: var(--component-gap-ghost-2);
4406
4433
  --button-ghost-padding-x: var(--space-2);
4407
4434
  --button-ghost-padding-y: var(--space-1);
4435
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4408
4436
  }
4409
4437
  .rt-Button:where(.md\:rt-r-size-3) {
4438
+ --button-padding-inline-base: var(--space-4);
4410
4439
  gap: var(--component-gap-3);
4411
4440
  font-size: var(--font-size-3);
4412
4441
  line-height: var(--line-height-3);
@@ -4417,15 +4446,17 @@
4417
4446
  height: var(--content-icon-size-3);
4418
4447
  }
4419
4448
  .rt-Button:where(.md\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
4420
- padding-left: var(--space-4);
4421
- padding-right: var(--space-4);
4449
+ padding-inline-start: var(--button-padding-inline-base);
4450
+ padding-inline-end: var(--button-padding-inline-base);
4422
4451
  }
4423
4452
  .rt-Button:where(.md\:rt-r-size-3):where(.rt-variant-ghost) {
4424
4453
  gap: var(--component-gap-ghost-3);
4425
4454
  --button-ghost-padding-x: var(--space-3);
4426
4455
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4456
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4427
4457
  }
4428
4458
  .rt-Button:where(.md\:rt-r-size-4) {
4459
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4429
4460
  gap: var(--component-gap-4);
4430
4461
  font-size: var(--font-size-4);
4431
4462
  line-height: var(--line-height-4);
@@ -4436,17 +4467,19 @@
4436
4467
  height: var(--content-icon-size-4);
4437
4468
  }
4438
4469
  .rt-Button:where(.md\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
4439
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4440
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4470
+ padding-inline-start: var(--button-padding-inline-base);
4471
+ padding-inline-end: var(--button-padding-inline-base);
4441
4472
  }
4442
4473
  .rt-Button:where(.md\:rt-r-size-4):where(.rt-variant-ghost) {
4443
4474
  gap: var(--component-gap-ghost-4);
4444
4475
  --button-ghost-padding-x: var(--space-4);
4445
4476
  --button-ghost-padding-y: var(--space-2);
4477
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4446
4478
  }
4447
4479
  }
4448
4480
  @media (min-width: 1280px) {
4449
4481
  .rt-Button:where(.lg\:rt-r-size-1) {
4482
+ --button-padding-inline-base: var(--space-2);
4450
4483
  gap: var(--component-gap-1);
4451
4484
  font-size: var(--font-size-1);
4452
4485
  line-height: var(--line-height-1);
@@ -4457,15 +4490,17 @@
4457
4490
  height: var(--content-icon-size-1);
4458
4491
  }
4459
4492
  .rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
4460
- padding-left: var(--space-2);
4461
- padding-right: var(--space-2);
4493
+ padding-inline-start: var(--button-padding-inline-base);
4494
+ padding-inline-end: var(--button-padding-inline-base);
4462
4495
  }
4463
4496
  .rt-Button:where(.lg\:rt-r-size-1):where(.rt-variant-ghost) {
4464
4497
  gap: var(--component-gap-ghost-1);
4465
4498
  --button-ghost-padding-x: var(--space-2);
4466
4499
  --button-ghost-padding-y: var(--space-1);
4500
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4467
4501
  }
4468
4502
  .rt-Button:where(.lg\:rt-r-size-2) {
4503
+ --button-padding-inline-base: var(--space-3);
4469
4504
  gap: var(--component-gap-2);
4470
4505
  font-size: var(--font-size-2);
4471
4506
  line-height: var(--line-height-2);
@@ -4476,15 +4511,17 @@
4476
4511
  height: var(--content-icon-size-2);
4477
4512
  }
4478
4513
  .rt-Button:where(.lg\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
4479
- padding-left: var(--space-3);
4480
- padding-right: var(--space-3);
4514
+ padding-inline-start: var(--button-padding-inline-base);
4515
+ padding-inline-end: var(--button-padding-inline-base);
4481
4516
  }
4482
4517
  .rt-Button:where(.lg\:rt-r-size-2):where(.rt-variant-ghost) {
4483
4518
  gap: var(--component-gap-ghost-2);
4484
4519
  --button-ghost-padding-x: var(--space-2);
4485
4520
  --button-ghost-padding-y: var(--space-1);
4521
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4486
4522
  }
4487
4523
  .rt-Button:where(.lg\:rt-r-size-3) {
4524
+ --button-padding-inline-base: var(--space-4);
4488
4525
  gap: var(--component-gap-3);
4489
4526
  font-size: var(--font-size-3);
4490
4527
  line-height: var(--line-height-3);
@@ -4495,15 +4532,17 @@
4495
4532
  height: var(--content-icon-size-3);
4496
4533
  }
4497
4534
  .rt-Button:where(.lg\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
4498
- padding-left: var(--space-4);
4499
- padding-right: var(--space-4);
4535
+ padding-inline-start: var(--button-padding-inline-base);
4536
+ padding-inline-end: var(--button-padding-inline-base);
4500
4537
  }
4501
4538
  .rt-Button:where(.lg\:rt-r-size-3):where(.rt-variant-ghost) {
4502
4539
  gap: var(--component-gap-ghost-3);
4503
4540
  --button-ghost-padding-x: var(--space-3);
4504
4541
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4542
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4505
4543
  }
4506
4544
  .rt-Button:where(.lg\:rt-r-size-4) {
4545
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4507
4546
  gap: var(--component-gap-4);
4508
4547
  font-size: var(--font-size-4);
4509
4548
  line-height: var(--line-height-4);
@@ -4514,17 +4553,19 @@
4514
4553
  height: var(--content-icon-size-4);
4515
4554
  }
4516
4555
  .rt-Button:where(.lg\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
4517
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4518
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4556
+ padding-inline-start: var(--button-padding-inline-base);
4557
+ padding-inline-end: var(--button-padding-inline-base);
4519
4558
  }
4520
4559
  .rt-Button:where(.lg\:rt-r-size-4):where(.rt-variant-ghost) {
4521
4560
  gap: var(--component-gap-ghost-4);
4522
4561
  --button-ghost-padding-x: var(--space-4);
4523
4562
  --button-ghost-padding-y: var(--space-2);
4563
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4524
4564
  }
4525
4565
  }
4526
4566
  @media (min-width: 1640px) {
4527
4567
  .rt-Button:where(.xl\:rt-r-size-1) {
4568
+ --button-padding-inline-base: var(--space-2);
4528
4569
  gap: var(--component-gap-1);
4529
4570
  font-size: var(--font-size-1);
4530
4571
  line-height: var(--line-height-1);
@@ -4535,15 +4576,17 @@
4535
4576
  height: var(--content-icon-size-1);
4536
4577
  }
4537
4578
  .rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
4538
- padding-left: var(--space-2);
4539
- padding-right: var(--space-2);
4579
+ padding-inline-start: var(--button-padding-inline-base);
4580
+ padding-inline-end: var(--button-padding-inline-base);
4540
4581
  }
4541
4582
  .rt-Button:where(.xl\:rt-r-size-1):where(.rt-variant-ghost) {
4542
4583
  gap: var(--component-gap-ghost-1);
4543
4584
  --button-ghost-padding-x: var(--space-2);
4544
4585
  --button-ghost-padding-y: var(--space-1);
4586
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4545
4587
  }
4546
4588
  .rt-Button:where(.xl\:rt-r-size-2) {
4589
+ --button-padding-inline-base: var(--space-3);
4547
4590
  gap: var(--component-gap-2);
4548
4591
  font-size: var(--font-size-2);
4549
4592
  line-height: var(--line-height-2);
@@ -4554,15 +4597,17 @@
4554
4597
  height: var(--content-icon-size-2);
4555
4598
  }
4556
4599
  .rt-Button:where(.xl\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
4557
- padding-left: var(--space-3);
4558
- padding-right: var(--space-3);
4600
+ padding-inline-start: var(--button-padding-inline-base);
4601
+ padding-inline-end: var(--button-padding-inline-base);
4559
4602
  }
4560
4603
  .rt-Button:where(.xl\:rt-r-size-2):where(.rt-variant-ghost) {
4561
4604
  gap: var(--component-gap-ghost-2);
4562
4605
  --button-ghost-padding-x: var(--space-2);
4563
4606
  --button-ghost-padding-y: var(--space-1);
4607
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4564
4608
  }
4565
4609
  .rt-Button:where(.xl\:rt-r-size-3) {
4610
+ --button-padding-inline-base: var(--space-4);
4566
4611
  gap: var(--component-gap-3);
4567
4612
  font-size: var(--font-size-3);
4568
4613
  line-height: var(--line-height-3);
@@ -4573,15 +4618,17 @@
4573
4618
  height: var(--content-icon-size-3);
4574
4619
  }
4575
4620
  .rt-Button:where(.xl\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
4576
- padding-left: var(--space-4);
4577
- padding-right: var(--space-4);
4621
+ padding-inline-start: var(--button-padding-inline-base);
4622
+ padding-inline-end: var(--button-padding-inline-base);
4578
4623
  }
4579
4624
  .rt-Button:where(.xl\:rt-r-size-3):where(.rt-variant-ghost) {
4580
4625
  gap: var(--component-gap-ghost-3);
4581
4626
  --button-ghost-padding-x: var(--space-3);
4582
4627
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4628
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4583
4629
  }
4584
4630
  .rt-Button:where(.xl\:rt-r-size-4) {
4631
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4585
4632
  gap: var(--component-gap-4);
4586
4633
  font-size: var(--font-size-4);
4587
4634
  line-height: var(--line-height-4);
@@ -4592,17 +4639,20 @@
4592
4639
  height: var(--content-icon-size-4);
4593
4640
  }
4594
4641
  .rt-Button:where(.xl\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
4595
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4596
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4642
+ padding-inline-start: var(--button-padding-inline-base);
4643
+ padding-inline-end: var(--button-padding-inline-base);
4597
4644
  }
4598
4645
  .rt-Button:where(.xl\:rt-r-size-4):where(.rt-variant-ghost) {
4599
4646
  gap: var(--component-gap-ghost-4);
4600
4647
  --button-ghost-padding-x: var(--space-4);
4601
4648
  --button-ghost-padding-y: var(--space-2);
4649
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4602
4650
  }
4603
4651
  }
4604
4652
  .rt-Button {
4605
4653
  font-weight: var(--font-weight-medium);
4654
+ --button-padding-inline-base: var(--space-3);
4655
+ --button-padding-icon-trim: max(calc(var(--button-padding-inline-base) * 0.35), var(--space-1));
4606
4656
  }
4607
4657
  .rt-CalloutRoot {
4608
4658
  box-sizing: border-box;
@@ -14355,6 +14405,9 @@
14355
14405
  display: block;
14356
14406
  background-color: var(--accent-a5);
14357
14407
  }
14408
+ .rt-Separator:where(.rt-light) {
14409
+ background-color: var(--accent-a3);
14410
+ }
14358
14411
  .rt-Separator:where(.rt-r-orientation-horizontal) {
14359
14412
  width: var(--separator-size);
14360
14413
  height: 1px;
package/dist/cjs/components/separator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACnE,UAAU,cACR,SAAQ,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,EACjD,WAAW,EACX,iBAAiB;CAAG;AACxB,QAAA,MAAM,SAAS,wFAeb,CAAC;AAGH,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
1
+ {"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACnE,UAAU,cAAe,SAAQ,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,EAAE,WAAW,EAAE,iBAAiB;CAAG;AAC/G,QAAA,MAAM,SAAS,wFAGb,CAAC;AAGH,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
package/dist/cjs/components/separator.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/separator.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { separatorPropDefs } from './separator.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype SeparatorElement = React.ElementRef<'span'>;\ntype SeparatorOwnProps = GetPropDefTypes<typeof separatorPropDefs>;\ninterface SeparatorProps\n extends ComponentPropsWithout<'span', RemovedProps>,\n MarginProps,\n SeparatorOwnProps {}\nconst Separator = React.forwardRef<SeparatorElement, SeparatorProps>((props, forwardedRef) => {\n const { className, color, decorative, ...separatorProps } = extractProps(\n props,\n separatorPropDefs,\n marginPropDefs\n );\n return (\n <span\n data-accent-color={color}\n role={decorative ? undefined : 'separator'}\n {...separatorProps}\n ref={forwardedRef}\n className={classNames('rt-Separator', className)}\n />\n );\n});\nSeparator.displayName = 'Separator';\n\nexport { Separator };\nexport type { SeparatorProps };\n"],
5
- "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAAkC,gCAClCC,EAA6B,uCAC7BC,EAA+B,oCAY/B,MAAMN,EAAYE,EAAM,WAA6C,CAACK,EAAOC,IAAiB,CAC5F,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,WAAAC,EAAY,GAAGC,CAAe,KAAI,gBAC1DL,EACA,oBACA,gBACF,EACA,OACEL,EAAA,cAAC,QACC,oBAAmBQ,EACnB,KAAMC,EAAa,OAAY,YAC9B,GAAGC,EACJ,IAAKJ,EACL,aAAW,EAAAK,SAAW,eAAgBJ,CAAS,EACjD,CAEJ,CAAC,EACDT,EAAU,YAAc",
4
+ "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { separatorPropDefs } from './separator.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype SeparatorElement = React.ElementRef<'span'>;\ntype SeparatorOwnProps = GetPropDefTypes<typeof separatorPropDefs>;\ninterface SeparatorProps extends ComponentPropsWithout<'span', RemovedProps>, MarginProps, SeparatorOwnProps {}\nconst Separator = React.forwardRef<SeparatorElement, SeparatorProps>((props, forwardedRef) => {\n const { className, color, decorative, ...separatorProps } = extractProps(props, separatorPropDefs, marginPropDefs);\n return <span data-accent-color={color} role={decorative ? undefined : 'separator'} {...separatorProps} ref={forwardedRef} className={classNames('rt-Separator', className)} />;\n});\nSeparator.displayName = 'Separator';\n\nexport { Separator };\nexport type { SeparatorProps };\n"],
5
+ "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAAkC,gCAClCC,EAA6B,uCAC7BC,EAA+B,oCAS/B,MAAMN,EAAYE,EAAM,WAA6C,CAACK,EAAOC,IAAiB,CAC5F,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,WAAAC,EAAY,GAAGC,CAAe,KAAI,gBAAaL,EAAO,oBAAmB,gBAAc,EACjH,OAAOL,EAAA,cAAC,QAAK,oBAAmBQ,EAAO,KAAMC,EAAa,OAAY,YAAc,GAAGC,EAAgB,IAAKJ,EAAc,aAAW,EAAAK,SAAW,eAAgBJ,CAAS,EAAG,CAC9K,CAAC,EACDT,EAAU,YAAc",
6
6
  "names": ["separator_exports", "__export", "Separator", "__toCommonJS", "React", "import_classnames", "import_separator_props", "import_extract_props", "import_margin_props", "props", "forwardedRef", "className", "color", "decorative", "separatorProps", "classNames"]
7
7
  }
package/dist/cjs/components/separator.props.d.ts CHANGED
@@ -22,6 +22,11 @@ declare const separatorPropDefs: {
22
22
  type: "boolean";
23
23
  default: true;
24
24
  };
25
+ light: {
26
+ type: "boolean";
27
+ className: string;
28
+ default: false;
29
+ };
25
30
  };
26
31
  export { separatorPropDefs };
27
32
  //# sourceMappingURL=separator.props.d.ts.map
package/dist/cjs/components/separator.props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"separator.props.d.ts","sourceRoot":"","sources":["../../../src/components/separator.props.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;CAgBtB,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
1
+ {"version":3,"file":"separator.props.d.ts","sourceRoot":"","sources":["../../../src/components/separator.props.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBtB,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
package/dist/cjs/components/separator.props.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var c=(e,o)=>{for(var t in o)s(e,t,{get:o[t],enumerable:!0})},u=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of l(o))!f.call(e,r)&&r!==t&&s(e,r,{get:()=>o[r],enumerable:!(a=p(o,r))||a.enumerable});return e};var m=e=>u(s({},"__esModule",{value:!0}),e);var v={};c(v,{separatorPropDefs:()=>n});module.exports=m(v);var i=require("../props/color.prop.js");const y=["horizontal","vertical"],d=["1","2","3","4"],n={orientation:{type:"enum",className:"rt-r-orientation",values:y,default:"horizontal",responsive:!0},size:{type:"enum",className:"rt-r-size",values:d,default:"1",responsive:!0},color:{...i.colorPropDef.color,default:"gray"},decorative:{type:"boolean",default:!0}};
1
+ "use strict";var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var c=(o,e)=>{for(var r in e)a(o,r,{get:e[r],enumerable:!0})},u=(o,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of p(e))!f.call(o,t)&&t!==r&&a(o,t,{get:()=>e[t],enumerable:!(s=n(e,t))||s.enumerable});return o};var m=o=>u(a({},"__esModule",{value:!0}),o);var D={};c(D,{separatorPropDefs:()=>l});module.exports=m(D);var i=require("../props/color.prop.js");const y=["horizontal","vertical"],d=["1","2","3","4"],l={orientation:{type:"enum",className:"rt-r-orientation",values:y,default:"horizontal",responsive:!0},size:{type:"enum",className:"rt-r-size",values:d,default:"1",responsive:!0},color:{...i.colorPropDef.color,default:"gray"},decorative:{type:"boolean",default:!0},light:{type:"boolean",className:"rt-light",default:!1}};
2
2
  //# sourceMappingURL=separator.props.js.map
package/dist/cjs/components/separator.props.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/separator.props.tsx"],
4
- "sourcesContent": ["import { colorPropDef } from '../props/color.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst orientationValues = ['horizontal', 'vertical'] as const;\nconst sizes = ['1', '2', '3', '4'] as const;\n\nconst separatorPropDefs = {\n orientation: {\n type: 'enum',\n className: 'rt-r-orientation',\n values: orientationValues,\n default: 'horizontal',\n responsive: true,\n },\n size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n color: { ...colorPropDef.color, default: 'gray' },\n decorative: { type: 'boolean', default: true },\n} satisfies {\n orientation: PropDef<(typeof orientationValues)[number]>;\n size: PropDef<(typeof sizes)[number]>;\n color: typeof colorPropDef.color;\n decorative: PropDef<boolean>;\n};\n\nexport { separatorPropDefs };\n"],
5
- "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA6B,kCAI7B,MAAMC,EAAoB,CAAC,aAAc,UAAU,EAC7CC,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAE3BJ,EAAoB,CACxB,YAAa,CACX,KAAM,OACN,UAAW,mBACX,OAAQG,EACR,QAAS,aACT,WAAY,EACd,EACA,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,MAAO,CAAE,GAAG,eAAa,MAAO,QAAS,MAAO,EAChD,WAAY,CAAE,KAAM,UAAW,QAAS,EAAK,CAC/C",
4
+ "sourcesContent": ["import { colorPropDef } from '../props/color.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst orientationValues = ['horizontal', 'vertical'] as const;\nconst sizes = ['1', '2', '3', '4'] as const;\n\nconst separatorPropDefs = {\n orientation: {\n type: 'enum',\n className: 'rt-r-orientation',\n values: orientationValues,\n default: 'horizontal',\n responsive: true,\n },\n size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n color: { ...colorPropDef.color, default: 'gray' },\n decorative: { type: 'boolean', default: true },\n light: { type: 'boolean', className: 'rt-light', default: false },\n} satisfies {\n orientation: PropDef<(typeof orientationValues)[number]>;\n size: PropDef<(typeof sizes)[number]>;\n color: typeof colorPropDef.color;\n decorative: PropDef<boolean>;\n light: PropDef<boolean>;\n};\n\nexport { separatorPropDefs };\n"],
5
+ "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA6B,kCAI7B,MAAMC,EAAoB,CAAC,aAAc,UAAU,EAC7CC,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAE3BJ,EAAoB,CACxB,YAAa,CACX,KAAM,OACN,UAAW,mBACX,OAAQG,EACR,QAAS,aACT,WAAY,EACd,EACA,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,MAAO,CAAE,GAAG,eAAa,MAAO,QAAS,MAAO,EAChD,WAAY,CAAE,KAAM,UAAW,QAAS,EAAK,EAC7C,MAAO,CAAE,KAAM,UAAW,UAAW,WAAY,QAAS,EAAM,CAClE",
6
6
  "names": ["separator_props_exports", "__export", "separatorPropDefs", "__toCommonJS", "import_color_prop", "orientationValues", "sizes"]
7
7
  }
package/dist/esm/components/separator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACnE,UAAU,cACR,SAAQ,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,EACjD,WAAW,EACX,iBAAiB;CAAG;AACxB,QAAA,MAAM,SAAS,wFAeb,CAAC;AAGH,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
1
+ {"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACnE,UAAU,cAAe,SAAQ,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,EAAE,WAAW,EAAE,iBAAiB;CAAG;AAC/G,QAAA,MAAM,SAAS,wFAGb,CAAC;AAGH,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
package/dist/esm/components/separator.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/separator.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { separatorPropDefs } from './separator.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype SeparatorElement = React.ElementRef<'span'>;\ntype SeparatorOwnProps = GetPropDefTypes<typeof separatorPropDefs>;\ninterface SeparatorProps\n extends ComponentPropsWithout<'span', RemovedProps>,\n MarginProps,\n SeparatorOwnProps {}\nconst Separator = React.forwardRef<SeparatorElement, SeparatorProps>((props, forwardedRef) => {\n const { className, color, decorative, ...separatorProps } = extractProps(\n props,\n separatorPropDefs,\n marginPropDefs\n );\n return (\n <span\n data-accent-color={color}\n role={decorative ? undefined : 'separator'}\n {...separatorProps}\n ref={forwardedRef}\n className={classNames('rt-Separator', className)}\n />\n );\n});\nSeparator.displayName = 'Separator';\n\nexport { Separator };\nexport type { SeparatorProps };\n"],
5
- "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAS,qBAAAC,MAAyB,uBAClC,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAY/B,MAAMC,EAAYL,EAAM,WAA6C,CAACM,EAAOC,IAAiB,CAC5F,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,WAAAC,EAAY,GAAGC,CAAe,EAAIR,EAC1DG,EACAJ,EACAE,CACF,EACA,OACEJ,EAAA,cAAC,QACC,oBAAmBS,EACnB,KAAMC,EAAa,OAAY,YAC9B,GAAGC,EACJ,IAAKJ,EACL,UAAWN,EAAW,eAAgBO,CAAS,EACjD,CAEJ,CAAC,EACDH,EAAU,YAAc",
4
+ "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { separatorPropDefs } from './separator.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype SeparatorElement = React.ElementRef<'span'>;\ntype SeparatorOwnProps = GetPropDefTypes<typeof separatorPropDefs>;\ninterface SeparatorProps extends ComponentPropsWithout<'span', RemovedProps>, MarginProps, SeparatorOwnProps {}\nconst Separator = React.forwardRef<SeparatorElement, SeparatorProps>((props, forwardedRef) => {\n const { className, color, decorative, ...separatorProps } = extractProps(props, separatorPropDefs, marginPropDefs);\n return <span data-accent-color={color} role={decorative ? undefined : 'separator'} {...separatorProps} ref={forwardedRef} className={classNames('rt-Separator', className)} />;\n});\nSeparator.displayName = 'Separator';\n\nexport { Separator };\nexport type { SeparatorProps };\n"],
5
+ "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAS,qBAAAC,MAAyB,uBAClC,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAS/B,MAAMC,EAAYL,EAAM,WAA6C,CAACM,EAAOC,IAAiB,CAC5F,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,WAAAC,EAAY,GAAGC,CAAe,EAAIR,EAAaG,EAAOJ,EAAmBE,CAAc,EACjH,OAAOJ,EAAA,cAAC,QAAK,oBAAmBS,EAAO,KAAMC,EAAa,OAAY,YAAc,GAAGC,EAAgB,IAAKJ,EAAc,UAAWN,EAAW,eAAgBO,CAAS,EAAG,CAC9K,CAAC,EACDH,EAAU,YAAc",
6
6
  "names": ["React", "classNames", "separatorPropDefs", "extractProps", "marginPropDefs", "Separator", "props", "forwardedRef", "className", "color", "decorative", "separatorProps"]
7
7
  }
package/dist/esm/components/separator.props.d.ts CHANGED
@@ -22,6 +22,11 @@ declare const separatorPropDefs: {
22
22
  type: "boolean";
23
23
  default: true;
24
24
  };
25
+ light: {
26
+ type: "boolean";
27
+ className: string;
28
+ default: false;
29
+ };
25
30
  };
26
31
  export { separatorPropDefs };
27
32
  //# sourceMappingURL=separator.props.d.ts.map
package/dist/esm/components/separator.props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"separator.props.d.ts","sourceRoot":"","sources":["../../../src/components/separator.props.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;CAgBtB,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
1
+ {"version":3,"file":"separator.props.d.ts","sourceRoot":"","sources":["../../../src/components/separator.props.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBtB,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
package/dist/esm/components/separator.props.js CHANGED
@@ -1,2 +1,2 @@
1
- import{colorPropDef as o}from"../props/color.prop.js";const e=["horizontal","vertical"],r=["1","2","3","4"],t={orientation:{type:"enum",className:"rt-r-orientation",values:e,default:"horizontal",responsive:!0},size:{type:"enum",className:"rt-r-size",values:r,default:"1",responsive:!0},color:{...o.color,default:"gray"},decorative:{type:"boolean",default:!0}};export{t as separatorPropDefs};
1
+ import{colorPropDef as e}from"../props/color.prop.js";const o=["horizontal","vertical"],t=["1","2","3","4"],r={orientation:{type:"enum",className:"rt-r-orientation",values:o,default:"horizontal",responsive:!0},size:{type:"enum",className:"rt-r-size",values:t,default:"1",responsive:!0},color:{...e.color,default:"gray"},decorative:{type:"boolean",default:!0},light:{type:"boolean",className:"rt-light",default:!1}};export{r as separatorPropDefs};
2
2
  //# sourceMappingURL=separator.props.js.map
package/dist/esm/components/separator.props.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/separator.props.tsx"],
4
- "sourcesContent": ["import { colorPropDef } from '../props/color.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst orientationValues = ['horizontal', 'vertical'] as const;\nconst sizes = ['1', '2', '3', '4'] as const;\n\nconst separatorPropDefs = {\n orientation: {\n type: 'enum',\n className: 'rt-r-orientation',\n values: orientationValues,\n default: 'horizontal',\n responsive: true,\n },\n size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n color: { ...colorPropDef.color, default: 'gray' },\n decorative: { type: 'boolean', default: true },\n} satisfies {\n orientation: PropDef<(typeof orientationValues)[number]>;\n size: PropDef<(typeof sizes)[number]>;\n color: typeof colorPropDef.color;\n decorative: PropDef<boolean>;\n};\n\nexport { separatorPropDefs };\n"],
5
- "mappings": "AAAA,OAAS,gBAAAA,MAAoB,yBAI7B,MAAMC,EAAoB,CAAC,aAAc,UAAU,EAC7CC,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAE3BC,EAAoB,CACxB,YAAa,CACX,KAAM,OACN,UAAW,mBACX,OAAQF,EACR,QAAS,aACT,WAAY,EACd,EACA,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,MAAO,CAAE,GAAGF,EAAa,MAAO,QAAS,MAAO,EAChD,WAAY,CAAE,KAAM,UAAW,QAAS,EAAK,CAC/C",
4
+ "sourcesContent": ["import { colorPropDef } from '../props/color.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst orientationValues = ['horizontal', 'vertical'] as const;\nconst sizes = ['1', '2', '3', '4'] as const;\n\nconst separatorPropDefs = {\n orientation: {\n type: 'enum',\n className: 'rt-r-orientation',\n values: orientationValues,\n default: 'horizontal',\n responsive: true,\n },\n size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n color: { ...colorPropDef.color, default: 'gray' },\n decorative: { type: 'boolean', default: true },\n light: { type: 'boolean', className: 'rt-light', default: false },\n} satisfies {\n orientation: PropDef<(typeof orientationValues)[number]>;\n size: PropDef<(typeof sizes)[number]>;\n color: typeof colorPropDef.color;\n decorative: PropDef<boolean>;\n light: PropDef<boolean>;\n};\n\nexport { separatorPropDefs };\n"],
5
+ "mappings": "AAAA,OAAS,gBAAAA,MAAoB,yBAI7B,MAAMC,EAAoB,CAAC,aAAc,UAAU,EAC7CC,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAE3BC,EAAoB,CACxB,YAAa,CACX,KAAM,OACN,UAAW,mBACX,OAAQF,EACR,QAAS,aACT,WAAY,EACd,EACA,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,MAAO,CAAE,GAAGF,EAAa,MAAO,QAAS,MAAO,EAChD,WAAY,CAAE,KAAM,UAAW,QAAS,EAAK,EAC7C,MAAO,CAAE,KAAM,UAAW,UAAW,WAAY,QAAS,EAAM,CAClE",
6
6
  "names": ["colorPropDef", "orientationValues", "sizes", "separatorPropDefs"]
7
7
  }