@codecademy/gamut 67.6.6-alpha.eca584.0 → 68.0.1-alpha.0a9017.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Anchor/index.d.ts +93 -18
- package/dist/Badge/index.d.ts +107 -20
- package/dist/Box/props.d.ts +237 -46
- package/dist/Button/shared/styles.d.ts +223 -44
- package/dist/Card/elements.d.ts +711 -138
- package/dist/Form/elements/Form.d.ts +223 -44
- package/dist/GridForm/GridFormSections/GridFormSectionBreak.d.ts +177 -34
- package/dist/InternalFloatingCard/InternalFloatingCard.d.ts +63 -12
- package/dist/Layout/Column.d.ts +93 -18
- package/dist/Layout/LayoutGrid.d.ts +60 -12
- package/dist/List/elements.d.ts +330 -64
- package/dist/Menu/elements.d.ts +237 -46
- package/dist/Pagination/AnimatedPaginationButtons.d.ts +225 -46
- package/dist/Pagination/EllipsisButton.d.ts +5 -5
- package/dist/Pagination/EllipsisButton.js +2 -2
- package/dist/Pagination/index.js +4 -4
- package/dist/Pagination/utils.d.ts +223 -44
- package/dist/Pagination/utils.js +1 -1
- package/dist/Tabs/props.d.ts +93 -18
- package/dist/Tag/types.d.ts +93 -18
- package/dist/Toggle/elements.d.ts +134 -26
- package/dist/Typography/Text.d.ts +107 -20
- package/package.json +7 -7
|
@@ -19,11 +19,19 @@ export declare const AnimatedFadeButton: (props: {
|
|
|
19
19
|
dir?: string | undefined;
|
|
20
20
|
className?: string | undefined;
|
|
21
21
|
height?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
22
|
-
readonly property:
|
|
22
|
+
readonly property: {
|
|
23
|
+
readonly physical: "height";
|
|
24
|
+
readonly logical: "blockSize";
|
|
25
|
+
};
|
|
26
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
23
27
|
readonly transform: (value: string | number) => string | 0;
|
|
24
28
|
}>;
|
|
25
29
|
width?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
26
|
-
readonly property:
|
|
30
|
+
readonly property: {
|
|
31
|
+
readonly physical: "width";
|
|
32
|
+
readonly logical: "inlineSize";
|
|
33
|
+
};
|
|
34
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
27
35
|
readonly transform: (value: string | number) => string | 0;
|
|
28
36
|
}>;
|
|
29
37
|
"aria-hidden"?: (boolean | "false" | "true") | undefined;
|
|
@@ -292,6 +300,9 @@ export declare const AnimatedFadeButton: (props: {
|
|
|
292
300
|
containerType?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
293
301
|
readonly property: "containerType";
|
|
294
302
|
}>;
|
|
303
|
+
direction?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
304
|
+
readonly property: "direction";
|
|
305
|
+
}>;
|
|
295
306
|
display?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
296
307
|
readonly property: "display";
|
|
297
308
|
}>;
|
|
@@ -324,19 +335,35 @@ export declare const AnimatedFadeButton: (props: {
|
|
|
324
335
|
readonly transform: (value: string | number) => string | 0;
|
|
325
336
|
}>;
|
|
326
337
|
maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
327
|
-
readonly property:
|
|
338
|
+
readonly property: {
|
|
339
|
+
readonly physical: "maxHeight";
|
|
340
|
+
readonly logical: "maxBlockSize";
|
|
341
|
+
};
|
|
342
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
328
343
|
readonly transform: (value: string | number) => string | 0;
|
|
329
344
|
}>;
|
|
330
345
|
maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
331
|
-
readonly property:
|
|
346
|
+
readonly property: {
|
|
347
|
+
readonly physical: "maxWidth";
|
|
348
|
+
readonly logical: "maxInlineSize";
|
|
349
|
+
};
|
|
350
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
332
351
|
readonly transform: (value: string | number) => string | 0;
|
|
333
352
|
}>;
|
|
334
353
|
minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
335
|
-
readonly property:
|
|
354
|
+
readonly property: {
|
|
355
|
+
readonly physical: "minHeight";
|
|
356
|
+
readonly logical: "minBlockSize";
|
|
357
|
+
};
|
|
358
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
336
359
|
readonly transform: (value: string | number) => string | 0;
|
|
337
360
|
}>;
|
|
338
361
|
minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
339
|
-
readonly property:
|
|
362
|
+
readonly property: {
|
|
363
|
+
readonly physical: "minWidth";
|
|
364
|
+
readonly logical: "minInlineSize";
|
|
365
|
+
};
|
|
366
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
340
367
|
readonly transform: (value: string | number) => string | 0;
|
|
341
368
|
}>;
|
|
342
369
|
opacity?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
@@ -369,11 +396,19 @@ export declare const AnimatedFadeButton: (props: {
|
|
|
369
396
|
readonly property: "zIndex";
|
|
370
397
|
}>;
|
|
371
398
|
borderBottom?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
372
|
-
readonly property:
|
|
399
|
+
readonly property: {
|
|
400
|
+
readonly physical: "borderBottom";
|
|
401
|
+
readonly logical: "borderBlockEnd";
|
|
402
|
+
};
|
|
403
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
373
404
|
readonly scale: "borders";
|
|
374
405
|
}>;
|
|
375
406
|
borderLeft?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
376
|
-
readonly property:
|
|
407
|
+
readonly property: {
|
|
408
|
+
readonly physical: "borderLeft";
|
|
409
|
+
readonly logical: "borderInlineStart";
|
|
410
|
+
};
|
|
411
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
377
412
|
readonly scale: "borders";
|
|
378
413
|
}>;
|
|
379
414
|
borderRadius?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
@@ -381,14 +416,22 @@ export declare const AnimatedFadeButton: (props: {
|
|
|
381
416
|
readonly scale: "borderRadii";
|
|
382
417
|
}>;
|
|
383
418
|
borderRight?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
384
|
-
readonly property:
|
|
419
|
+
readonly property: {
|
|
420
|
+
readonly physical: "borderRight";
|
|
421
|
+
readonly logical: "borderInlineEnd";
|
|
422
|
+
};
|
|
423
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
385
424
|
readonly scale: "borders";
|
|
386
425
|
}>;
|
|
387
426
|
borderStyle?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
388
427
|
readonly property: "borderStyle";
|
|
389
428
|
}>;
|
|
390
429
|
borderTop?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
391
|
-
readonly property:
|
|
430
|
+
readonly property: {
|
|
431
|
+
readonly physical: "borderTop";
|
|
432
|
+
readonly logical: "borderBlockStart";
|
|
433
|
+
};
|
|
434
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
392
435
|
readonly scale: "borders";
|
|
393
436
|
}>;
|
|
394
437
|
borderWidth?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
@@ -418,29 +461,53 @@ export declare const AnimatedFadeButton: (props: {
|
|
|
418
461
|
ellipsis?: boolean | undefined;
|
|
419
462
|
px?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
420
463
|
readonly property: "padding";
|
|
421
|
-
readonly properties:
|
|
464
|
+
readonly properties: {
|
|
465
|
+
readonly physical: readonly ["paddingLeft", "paddingRight"];
|
|
466
|
+
readonly logical: readonly ["paddingInlineStart", "paddingInlineEnd"];
|
|
467
|
+
};
|
|
422
468
|
readonly scale: "spacing";
|
|
469
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
423
470
|
}>;
|
|
424
471
|
py?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
425
472
|
readonly property: "padding";
|
|
426
|
-
readonly properties:
|
|
473
|
+
readonly properties: {
|
|
474
|
+
readonly physical: readonly ["paddingTop", "paddingBottom"];
|
|
475
|
+
readonly logical: readonly ["paddingBlockStart", "paddingBlockEnd"];
|
|
476
|
+
};
|
|
427
477
|
readonly scale: "spacing";
|
|
478
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
428
479
|
}>;
|
|
429
480
|
pt?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
430
|
-
readonly property:
|
|
481
|
+
readonly property: {
|
|
482
|
+
readonly physical: "paddingTop";
|
|
483
|
+
readonly logical: "paddingBlockStart";
|
|
484
|
+
};
|
|
431
485
|
readonly scale: "spacing";
|
|
486
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
432
487
|
}>;
|
|
433
488
|
pb?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
434
|
-
readonly property:
|
|
489
|
+
readonly property: {
|
|
490
|
+
readonly physical: "paddingBottom";
|
|
491
|
+
readonly logical: "paddingBlockEnd";
|
|
492
|
+
};
|
|
435
493
|
readonly scale: "spacing";
|
|
494
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
436
495
|
}>;
|
|
437
496
|
pr?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
438
|
-
readonly property:
|
|
497
|
+
readonly property: {
|
|
498
|
+
readonly physical: "paddingRight";
|
|
499
|
+
readonly logical: "paddingInlineEnd";
|
|
500
|
+
};
|
|
439
501
|
readonly scale: "spacing";
|
|
502
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
440
503
|
}>;
|
|
441
504
|
pl?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
442
|
-
readonly property:
|
|
505
|
+
readonly property: {
|
|
506
|
+
readonly physical: "paddingLeft";
|
|
507
|
+
readonly logical: "paddingInlineStart";
|
|
508
|
+
};
|
|
443
509
|
readonly scale: "spacing";
|
|
510
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
444
511
|
}>;
|
|
445
512
|
m?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
446
513
|
readonly property: "margin";
|
|
@@ -448,115 +515,227 @@ export declare const AnimatedFadeButton: (props: {
|
|
|
448
515
|
}>;
|
|
449
516
|
mx?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
450
517
|
readonly property: "margin";
|
|
451
|
-
readonly properties:
|
|
518
|
+
readonly properties: {
|
|
519
|
+
readonly physical: readonly ["marginLeft", "marginRight"];
|
|
520
|
+
readonly logical: readonly ["marginInlineStart", "marginInlineEnd"];
|
|
521
|
+
};
|
|
522
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
452
523
|
readonly scale: "spacing";
|
|
453
524
|
}>;
|
|
454
525
|
my?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
455
526
|
readonly property: "margin";
|
|
456
|
-
readonly properties:
|
|
527
|
+
readonly properties: {
|
|
528
|
+
readonly physical: readonly ["marginTop", "marginBottom"];
|
|
529
|
+
readonly logical: readonly ["marginBlockStart", "marginBlockEnd"];
|
|
530
|
+
};
|
|
531
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
457
532
|
readonly scale: "spacing";
|
|
458
533
|
}>;
|
|
459
534
|
mt?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
460
|
-
readonly property:
|
|
535
|
+
readonly property: {
|
|
536
|
+
readonly physical: "marginTop";
|
|
537
|
+
readonly logical: "marginBlockStart";
|
|
538
|
+
};
|
|
461
539
|
readonly scale: "spacing";
|
|
540
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
462
541
|
}>;
|
|
463
542
|
mb?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
464
|
-
readonly property:
|
|
543
|
+
readonly property: {
|
|
544
|
+
readonly physical: "marginBottom";
|
|
545
|
+
readonly logical: "marginBlockEnd";
|
|
546
|
+
};
|
|
465
547
|
readonly scale: "spacing";
|
|
548
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
466
549
|
}>;
|
|
467
550
|
mr?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
468
|
-
readonly property:
|
|
551
|
+
readonly property: {
|
|
552
|
+
readonly physical: "marginRight";
|
|
553
|
+
readonly logical: "marginInlineEnd";
|
|
554
|
+
};
|
|
469
555
|
readonly scale: "spacing";
|
|
556
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
470
557
|
}>;
|
|
471
558
|
ml?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
472
|
-
readonly property:
|
|
559
|
+
readonly property: {
|
|
560
|
+
readonly physical: "marginLeft";
|
|
561
|
+
readonly logical: "marginInlineStart";
|
|
562
|
+
};
|
|
473
563
|
readonly scale: "spacing";
|
|
564
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
474
565
|
}>;
|
|
475
566
|
borderX?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
476
567
|
readonly property: "border";
|
|
477
|
-
readonly properties:
|
|
568
|
+
readonly properties: {
|
|
569
|
+
readonly physical: readonly ["borderLeft", "borderRight"];
|
|
570
|
+
readonly logical: readonly ["borderInlineStart", "borderInlineEnd"];
|
|
571
|
+
};
|
|
572
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
478
573
|
readonly scale: "borders";
|
|
479
574
|
}>;
|
|
480
575
|
borderY?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
481
576
|
readonly property: "border";
|
|
482
|
-
readonly properties:
|
|
577
|
+
readonly properties: {
|
|
578
|
+
readonly physical: readonly ["borderTop", "borderBottom"];
|
|
579
|
+
readonly logical: readonly ["borderBlockStart", "borderBlockEnd"];
|
|
580
|
+
};
|
|
581
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
483
582
|
readonly scale: "borders";
|
|
484
583
|
}>;
|
|
485
584
|
borderWidthX?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
486
585
|
readonly property: "borderWidth";
|
|
487
|
-
readonly properties:
|
|
586
|
+
readonly properties: {
|
|
587
|
+
readonly physical: readonly ["borderLeftWidth", "borderRightWidth"];
|
|
588
|
+
readonly logical: readonly ["borderInlineStartWidth", "borderInlineEndWidth"];
|
|
589
|
+
};
|
|
590
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
488
591
|
}>;
|
|
489
592
|
borderWidthY?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
490
593
|
readonly property: "borderWidth";
|
|
491
|
-
readonly properties:
|
|
594
|
+
readonly properties: {
|
|
595
|
+
readonly physical: readonly ["borderTopWidth", "borderBottomWidth"];
|
|
596
|
+
readonly logical: readonly ["borderBlockStartWidth", "borderBlockEndWidth"];
|
|
597
|
+
};
|
|
598
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
492
599
|
}>;
|
|
493
600
|
borderWidthLeft?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
494
|
-
readonly property:
|
|
601
|
+
readonly property: {
|
|
602
|
+
readonly physical: "borderLeftWidth";
|
|
603
|
+
readonly logical: "borderInlineStartWidth";
|
|
604
|
+
};
|
|
605
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
495
606
|
}>;
|
|
496
607
|
borderWidthRight?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
497
|
-
readonly property:
|
|
608
|
+
readonly property: {
|
|
609
|
+
readonly physical: "borderRightWidth";
|
|
610
|
+
readonly logical: "borderInlineEndWidth";
|
|
611
|
+
};
|
|
612
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
498
613
|
}>;
|
|
499
614
|
borderWidthTop?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
500
|
-
readonly property:
|
|
615
|
+
readonly property: {
|
|
616
|
+
readonly physical: "borderTopWidth";
|
|
617
|
+
readonly logical: "borderBlockStartWidth";
|
|
618
|
+
};
|
|
619
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
501
620
|
}>;
|
|
502
621
|
borderWidthBottom?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
503
|
-
readonly property:
|
|
622
|
+
readonly property: {
|
|
623
|
+
readonly physical: "borderBottomWidth";
|
|
624
|
+
readonly logical: "borderBlockEndWidth";
|
|
625
|
+
};
|
|
626
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
504
627
|
}>;
|
|
505
628
|
borderRadiusLeft?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
506
629
|
readonly property: "borderRadius";
|
|
507
|
-
readonly properties:
|
|
630
|
+
readonly properties: {
|
|
631
|
+
readonly physical: readonly ["borderTopLeftRadius", "borderBottomLeftRadius"];
|
|
632
|
+
readonly logical: readonly ["borderStartStartRadius", "borderEndStartRadius"];
|
|
633
|
+
};
|
|
634
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
508
635
|
readonly scale: "borderRadii";
|
|
509
636
|
}>;
|
|
510
637
|
borderRadiusTop?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
511
638
|
readonly property: "borderRadius";
|
|
512
|
-
readonly properties:
|
|
639
|
+
readonly properties: {
|
|
640
|
+
readonly physical: readonly ["borderTopLeftRadius", "borderTopRightRadius"];
|
|
641
|
+
readonly logical: readonly ["borderStartStartRadius", "borderStartEndRadius"];
|
|
642
|
+
};
|
|
643
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
513
644
|
readonly scale: "borderRadii";
|
|
514
645
|
}>;
|
|
515
646
|
borderRadiusBottom?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
516
647
|
readonly property: "borderRadius";
|
|
517
|
-
readonly properties:
|
|
648
|
+
readonly properties: {
|
|
649
|
+
readonly physical: readonly ["borderBottomLeftRadius", "borderBottomRightRadius"];
|
|
650
|
+
readonly logical: readonly ["borderEndStartRadius", "borderEndEndRadius"];
|
|
651
|
+
};
|
|
652
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
518
653
|
readonly scale: "borderRadii";
|
|
519
654
|
}>;
|
|
520
655
|
borderRadiusRight?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
521
656
|
readonly property: "borderRadius";
|
|
522
|
-
readonly properties:
|
|
657
|
+
readonly properties: {
|
|
658
|
+
readonly physical: readonly ["borderTopRightRadius", "borderBottomRightRadius"];
|
|
659
|
+
readonly logical: readonly ["borderStartEndRadius", "borderEndEndRadius"];
|
|
660
|
+
};
|
|
661
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
523
662
|
readonly scale: "borderRadii";
|
|
524
663
|
}>;
|
|
525
664
|
borderRadiusTopLeft?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
526
|
-
readonly property:
|
|
665
|
+
readonly property: {
|
|
666
|
+
readonly physical: "borderTopLeftRadius";
|
|
667
|
+
readonly logical: "borderStartStartRadius";
|
|
668
|
+
};
|
|
669
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
527
670
|
readonly scale: "borderRadii";
|
|
528
671
|
}>;
|
|
529
672
|
borderRadiusTopRight?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
530
|
-
readonly property:
|
|
673
|
+
readonly property: {
|
|
674
|
+
readonly physical: "borderTopRightRadius";
|
|
675
|
+
readonly logical: "borderStartEndRadius";
|
|
676
|
+
};
|
|
677
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
531
678
|
readonly scale: "borderRadii";
|
|
532
679
|
}>;
|
|
533
680
|
borderRadiusBottomRight?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
534
|
-
readonly property:
|
|
681
|
+
readonly property: {
|
|
682
|
+
readonly physical: "borderBottomRightRadius";
|
|
683
|
+
readonly logical: "borderEndEndRadius";
|
|
684
|
+
};
|
|
685
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
535
686
|
readonly scale: "borderRadii";
|
|
536
687
|
}>;
|
|
537
688
|
borderRadiusBottomLeft?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
538
|
-
readonly property:
|
|
689
|
+
readonly property: {
|
|
690
|
+
readonly physical: "borderBottomLeftRadius";
|
|
691
|
+
readonly logical: "borderEndStartRadius";
|
|
692
|
+
};
|
|
693
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
539
694
|
readonly scale: "borderRadii";
|
|
540
695
|
}>;
|
|
541
696
|
borderStyleX?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
542
697
|
readonly property: "borderStyle";
|
|
543
|
-
readonly properties:
|
|
698
|
+
readonly properties: {
|
|
699
|
+
readonly physical: readonly ["borderLeftStyle", "borderRightStyle"];
|
|
700
|
+
readonly logical: readonly ["borderInlineStartStyle", "borderInlineEndStyle"];
|
|
701
|
+
};
|
|
702
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
544
703
|
}>;
|
|
545
704
|
borderStyleY?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
546
705
|
readonly property: "borderStyle";
|
|
547
|
-
readonly properties:
|
|
706
|
+
readonly properties: {
|
|
707
|
+
readonly physical: readonly ["borderTopStyle", "borderBottomStyle"];
|
|
708
|
+
readonly logical: readonly ["borderBlockStartStyle", "borderBlockEndStyle"];
|
|
709
|
+
};
|
|
710
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
548
711
|
}>;
|
|
549
712
|
borderStyleLeft?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
550
|
-
readonly property:
|
|
713
|
+
readonly property: {
|
|
714
|
+
readonly physical: "borderLeftStyle";
|
|
715
|
+
readonly logical: "borderInlineStartStyle";
|
|
716
|
+
};
|
|
717
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
551
718
|
}>;
|
|
552
719
|
borderStyleRight?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
553
|
-
readonly property:
|
|
720
|
+
readonly property: {
|
|
721
|
+
readonly physical: "borderRightStyle";
|
|
722
|
+
readonly logical: "borderInlineEndStyle";
|
|
723
|
+
};
|
|
724
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
554
725
|
}>;
|
|
555
726
|
borderStyleTop?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
556
|
-
readonly property:
|
|
727
|
+
readonly property: {
|
|
728
|
+
readonly physical: "borderTopStyle";
|
|
729
|
+
readonly logical: "borderBlockStartStyle";
|
|
730
|
+
};
|
|
731
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
557
732
|
}>;
|
|
558
733
|
borderStyleBottom?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
559
|
-
readonly property:
|
|
734
|
+
readonly property: {
|
|
735
|
+
readonly physical: "borderBottomStyle";
|
|
736
|
+
readonly logical: "borderBlockEndStyle";
|
|
737
|
+
};
|
|
738
|
+
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
560
739
|
}>;
|
|
561
740
|
dimensions?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
562
741
|
readonly property: "width";
|
|
@@ -590,7 +769,7 @@ export declare const AnimatedSlideButton: (props: (Omit<Omit<{
|
|
|
590
769
|
href?: string | undefined;
|
|
591
770
|
} & {
|
|
592
771
|
'aria-label': string;
|
|
593
|
-
|
|
772
|
+
buttonDirection: "back" | "forward";
|
|
594
773
|
}, "ref"> | Omit<Omit<{
|
|
595
774
|
theme?: import("@emotion/react").Theme | undefined;
|
|
596
775
|
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
@@ -606,5 +785,5 @@ export declare const AnimatedSlideButton: (props: (Omit<Omit<{
|
|
|
606
785
|
href?: string | undefined;
|
|
607
786
|
} & {
|
|
608
787
|
'aria-label': string;
|
|
609
|
-
|
|
788
|
+
buttonDirection: "back" | "forward";
|
|
610
789
|
}, "ref">) & import("react").RefAttributes<import("..").ButtonBaseElements>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,7 +3,7 @@ import { ButtonBaseElements } from '../ButtonBase/ButtonBase';
|
|
|
3
3
|
import { PaginationButtonProps } from './PaginationButton';
|
|
4
4
|
export type EllipsisButtonProps = PaginationButtonProps & {
|
|
5
5
|
'aria-label': string;
|
|
6
|
-
|
|
6
|
+
buttonDirection: 'back' | 'forward';
|
|
7
7
|
};
|
|
8
8
|
export declare const BaseEllipsisButton: import("react").ForwardRefExoticComponent<(Omit<Omit<{
|
|
9
9
|
theme?: import("@emotion/react").Theme | undefined;
|
|
@@ -20,7 +20,7 @@ export declare const BaseEllipsisButton: import("react").ForwardRefExoticCompone
|
|
|
20
20
|
href?: string | undefined;
|
|
21
21
|
} & {
|
|
22
22
|
'aria-label': string;
|
|
23
|
-
|
|
23
|
+
buttonDirection: 'back' | 'forward';
|
|
24
24
|
}, "ref"> | Omit<Omit<{
|
|
25
25
|
theme?: import("@emotion/react").Theme | undefined;
|
|
26
26
|
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
@@ -36,7 +36,7 @@ export declare const BaseEllipsisButton: import("react").ForwardRefExoticCompone
|
|
|
36
36
|
href?: string | undefined;
|
|
37
37
|
} & {
|
|
38
38
|
'aria-label': string;
|
|
39
|
-
|
|
39
|
+
buttonDirection: 'back' | 'forward';
|
|
40
40
|
}, "ref">) & import("react").RefAttributes<ButtonBaseElements>>;
|
|
41
41
|
export declare const EllipsisButton: (props: (Omit<Omit<{
|
|
42
42
|
theme?: import("@emotion/react").Theme | undefined;
|
|
@@ -53,7 +53,7 @@ export declare const EllipsisButton: (props: (Omit<Omit<{
|
|
|
53
53
|
href?: string | undefined;
|
|
54
54
|
} & {
|
|
55
55
|
'aria-label': string;
|
|
56
|
-
|
|
56
|
+
buttonDirection: 'back' | 'forward';
|
|
57
57
|
}, "ref"> | Omit<Omit<{
|
|
58
58
|
theme?: import("@emotion/react").Theme | undefined;
|
|
59
59
|
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
@@ -69,5 +69,5 @@ export declare const EllipsisButton: (props: (Omit<Omit<{
|
|
|
69
69
|
href?: string | undefined;
|
|
70
70
|
} & {
|
|
71
71
|
'aria-label': string;
|
|
72
|
-
|
|
72
|
+
buttonDirection: 'back' | 'forward';
|
|
73
73
|
}, "ref">) & import("react").RefAttributes<ButtonBaseElements>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,14 +8,14 @@ const ellipsisButtonContents = {
|
|
|
8
8
|
forward: '»'
|
|
9
9
|
};
|
|
10
10
|
export const BaseEllipsisButton = /*#__PURE__*/forwardRef(({
|
|
11
|
-
|
|
11
|
+
buttonDirection,
|
|
12
12
|
showButton,
|
|
13
13
|
...props
|
|
14
14
|
}, ref) => {
|
|
15
15
|
const [contents, setContents] = useState(ellipsisButtonContents.ellipsis);
|
|
16
16
|
return /*#__PURE__*/_jsx(PaginationButton, {
|
|
17
17
|
ellipsis: true,
|
|
18
|
-
onMouseEnter: () => setContents(ellipsisButtonContents[
|
|
18
|
+
onMouseEnter: () => setContents(ellipsisButtonContents[buttonDirection]),
|
|
19
19
|
onMouseLeave: () => setContents(ellipsisButtonContents.ellipsis),
|
|
20
20
|
...props,
|
|
21
21
|
ref: ref,
|
package/dist/Pagination/index.js
CHANGED
|
@@ -80,8 +80,8 @@ export const Pagination = ({
|
|
|
80
80
|
}), showSkipToButtons && /*#__PURE__*/_jsxs(_Fragment, {
|
|
81
81
|
children: [/*#__PURE__*/_jsx(AnimatedSlideButton, {
|
|
82
82
|
"aria-label": "Jump back to page 1",
|
|
83
|
+
buttonDirection: "back",
|
|
83
84
|
buttonType: variant,
|
|
84
|
-
direction: "back",
|
|
85
85
|
display: hideOnMobile,
|
|
86
86
|
href: navigation,
|
|
87
87
|
showButton: shownPageArray[0] === 1 ? 'hidden' : 'shown',
|
|
@@ -89,8 +89,8 @@ export const Pagination = ({
|
|
|
89
89
|
children: "1"
|
|
90
90
|
}), /*#__PURE__*/_jsx(EllipsisButton, {
|
|
91
91
|
"aria-label": `Jump back to page ${backPageNumber}`,
|
|
92
|
+
buttonDirection: "back",
|
|
92
93
|
buttonType: variant,
|
|
93
|
-
direction: "back",
|
|
94
94
|
display: hideOnMobile,
|
|
95
95
|
href: navigation,
|
|
96
96
|
showButton: shownPageArray[0] === 1 ? 'hidden' : 'shown',
|
|
@@ -107,8 +107,8 @@ export const Pagination = ({
|
|
|
107
107
|
}, page)), showSkipToButtons && /*#__PURE__*/_jsxs(_Fragment, {
|
|
108
108
|
children: [/*#__PURE__*/_jsx(EllipsisButton, {
|
|
109
109
|
"aria-label": `Jump forward to page ${forwardPageNumber}`,
|
|
110
|
+
buttonDirection: "forward",
|
|
110
111
|
buttonType: variant,
|
|
111
|
-
direction: "forward",
|
|
112
112
|
display: hideOnMobile,
|
|
113
113
|
href: navigation,
|
|
114
114
|
showButton: shownPageArray[chapterSize - 1] === totalPages ? 'hidden' : 'shown',
|
|
@@ -117,8 +117,8 @@ export const Pagination = ({
|
|
|
117
117
|
}
|
|
118
118
|
}), /*#__PURE__*/_jsx(AnimatedSlideButton, {
|
|
119
119
|
"aria-label": `Jump forward to last page, page ${totalPages}`,
|
|
120
|
+
buttonDirection: "forward",
|
|
120
121
|
buttonType: variant,
|
|
121
|
-
direction: "forward",
|
|
122
122
|
display: hideOnMobile,
|
|
123
123
|
href: navigation,
|
|
124
124
|
showButton: shownPageArray[chapterSize - 1] === totalPages ? 'hidden' : 'shown',
|