@tenerife.music/ui 1.0.13 → 1.0.15
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/README.md +112 -418
- package/dist/{colors-CVA7_16U.d.cts → colors-BZtZJBBm.d.cts} +1 -1
- package/dist/{colors-CVA7_16U.d.ts → colors-BZtZJBBm.d.ts} +1 -1
- package/dist/{index-BgXvioll.d.cts → index-CP_dmFn4.d.cts} +435 -175
- package/dist/{index-Bv4wWj9I.d.ts → index-CP_dmFn4.d.ts} +435 -175
- package/dist/index.cjs +1406 -654
- package/dist/index.d.cts +119 -45
- package/dist/index.d.ts +119 -45
- package/dist/index.mjs +1406 -655
- package/dist/preset.cjs +1 -0
- package/dist/preset.mjs +1 -0
- package/dist/theme/index.d.cts +2 -2
- package/dist/theme/index.d.ts +2 -2
- package/dist/tokens/index.cjs +194 -221
- package/dist/tokens/index.d.cts +89 -2
- package/dist/tokens/index.d.ts +89 -2
- package/dist/tokens/index.mjs +194 -222
- package/package.json +6 -1
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import './colors-CVA7_16U.cjs';
|
|
2
|
-
|
|
3
1
|
/**
|
|
4
2
|
* Responsive Typing Primitives
|
|
5
3
|
*
|
|
@@ -487,7 +485,7 @@ declare const DOMAIN_TOKENS: {
|
|
|
487
485
|
};
|
|
488
486
|
/**
|
|
489
487
|
* Image tokens for card media
|
|
490
|
-
* Defines aspect ratio, radius, and
|
|
488
|
+
* Defines aspect ratio, radius, overlay styles, and placeholder gradients
|
|
491
489
|
*/
|
|
492
490
|
readonly image: {
|
|
493
491
|
/**
|
|
@@ -508,6 +506,35 @@ declare const DOMAIN_TOKENS: {
|
|
|
508
506
|
readonly overlay: {
|
|
509
507
|
readonly gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent";
|
|
510
508
|
};
|
|
509
|
+
/**
|
|
510
|
+
* Placeholder gradient tokens for image placeholders
|
|
511
|
+
* Used when no image URL is provided
|
|
512
|
+
*/
|
|
513
|
+
readonly placeholder: {
|
|
514
|
+
readonly gradient: "bg-gradient-to-br from-muted to-muted/50";
|
|
515
|
+
};
|
|
516
|
+
};
|
|
517
|
+
/**
|
|
518
|
+
* Text tokens for card text elements
|
|
519
|
+
* Defines hover states and line clamping for titles and descriptions
|
|
520
|
+
*/
|
|
521
|
+
readonly text: {
|
|
522
|
+
/**
|
|
523
|
+
* Hover state tokens for text elements
|
|
524
|
+
* Used for interactive text elements like titles
|
|
525
|
+
*/
|
|
526
|
+
readonly hover: {
|
|
527
|
+
readonly primary: "group-hover:text-primary";
|
|
528
|
+
};
|
|
529
|
+
/**
|
|
530
|
+
* Line clamp tokens for text truncation
|
|
531
|
+
* Used for limiting text to specific number of lines
|
|
532
|
+
*/
|
|
533
|
+
readonly lineClamp: {
|
|
534
|
+
readonly one: "line-clamp-1";
|
|
535
|
+
readonly two: "line-clamp-2";
|
|
536
|
+
readonly three: "line-clamp-3";
|
|
537
|
+
};
|
|
511
538
|
};
|
|
512
539
|
/**
|
|
513
540
|
* Metadata tokens for card information displays
|
|
@@ -699,6 +726,81 @@ declare const DOMAIN_TOKENS: {
|
|
|
699
726
|
readonly height: "h-6";
|
|
700
727
|
};
|
|
701
728
|
};
|
|
729
|
+
/**
|
|
730
|
+
* CTA (Call-to-Action) button tokens for domain card components
|
|
731
|
+
* Provides PromoCard-specific CTA button styling tokens
|
|
732
|
+
* These tokens are semantically owned by domain card components, not by the Button component
|
|
733
|
+
* References foundation tokens (spacing, typography, radius, shadows, motion) for consistency
|
|
734
|
+
*/
|
|
735
|
+
readonly cta: {
|
|
736
|
+
/**
|
|
737
|
+
* CTA button styling tokens
|
|
738
|
+
* Used by PromoCard and other domain card components for CTA button elements
|
|
739
|
+
*/
|
|
740
|
+
readonly button: {
|
|
741
|
+
/**
|
|
742
|
+
* Button heights by size
|
|
743
|
+
* Maps to Tailwind height utilities: h-8, h-9
|
|
744
|
+
*/
|
|
745
|
+
readonly height: {
|
|
746
|
+
readonly sm: "h-8";
|
|
747
|
+
readonly md: "h-9";
|
|
748
|
+
};
|
|
749
|
+
/**
|
|
750
|
+
* Button padding by size
|
|
751
|
+
* Horizontal and vertical padding values
|
|
752
|
+
* References semanticSpacing tokens
|
|
753
|
+
*/
|
|
754
|
+
readonly padding: {
|
|
755
|
+
readonly horizontal: {
|
|
756
|
+
readonly sm: "px-sm";
|
|
757
|
+
readonly md: "px-md";
|
|
758
|
+
};
|
|
759
|
+
readonly vertical: {
|
|
760
|
+
readonly sm: "py-xs";
|
|
761
|
+
};
|
|
762
|
+
};
|
|
763
|
+
/**
|
|
764
|
+
* Border radius for CTA buttons
|
|
765
|
+
* References borderRadius.md (6px / 0.375rem)
|
|
766
|
+
* Using Tailwind class "rounded-md" which maps to borderRadius.md
|
|
767
|
+
*/
|
|
768
|
+
readonly radius: "rounded-md";
|
|
769
|
+
/**
|
|
770
|
+
* Font sizes by button size
|
|
771
|
+
* Maps to foundation typography fontSize tokens
|
|
772
|
+
*/
|
|
773
|
+
readonly fontSize: {
|
|
774
|
+
readonly sm: "text-xs";
|
|
775
|
+
readonly md: "text-sm";
|
|
776
|
+
};
|
|
777
|
+
/**
|
|
778
|
+
* Shadow tokens for CTA buttons
|
|
779
|
+
* Maps to foundation elevation shadow tokens
|
|
780
|
+
*/
|
|
781
|
+
readonly shadow: {
|
|
782
|
+
readonly primary: "shadow";
|
|
783
|
+
};
|
|
784
|
+
/**
|
|
785
|
+
* Color tokens for CTA button variants
|
|
786
|
+
* Uses semantic color tokens that map to CSS variables
|
|
787
|
+
*/
|
|
788
|
+
readonly variant: {
|
|
789
|
+
readonly primary: {
|
|
790
|
+
readonly background: "bg-primary";
|
|
791
|
+
readonly text: "text-primary-foreground";
|
|
792
|
+
readonly hover: "hover:bg-primary/90";
|
|
793
|
+
};
|
|
794
|
+
};
|
|
795
|
+
/**
|
|
796
|
+
* Transition tokens for CTA buttons
|
|
797
|
+
* References MOTION_TOKENS for transitions
|
|
798
|
+
*/
|
|
799
|
+
readonly transition: {
|
|
800
|
+
readonly colors: "transition-colors";
|
|
801
|
+
};
|
|
802
|
+
};
|
|
803
|
+
};
|
|
702
804
|
};
|
|
703
805
|
/**
|
|
704
806
|
* Type exports for Domain Card tokens
|
|
@@ -797,31 +899,6 @@ declare const INPUT_TOKENS: {
|
|
|
797
899
|
readonly file: {
|
|
798
900
|
readonly text: "text-[hsl(var(--foreground))]";
|
|
799
901
|
};
|
|
800
|
-
/**
|
|
801
|
-
* Select listbox tokens
|
|
802
|
-
* Styling for select dropdown container
|
|
803
|
-
*/
|
|
804
|
-
readonly selectListbox: {
|
|
805
|
-
readonly border: "border border-[hsl(var(--border))]";
|
|
806
|
-
readonly background: "bg-[hsl(var(--popover))]";
|
|
807
|
-
readonly text: "text-[hsl(var(--popover-foreground))]";
|
|
808
|
-
readonly radius: "rounded-md";
|
|
809
|
-
readonly shadow: "shadow-md";
|
|
810
|
-
};
|
|
811
|
-
/**
|
|
812
|
-
* Select option tokens
|
|
813
|
-
* Styling for select option items
|
|
814
|
-
*/
|
|
815
|
-
readonly selectOption: {
|
|
816
|
-
readonly focus: {
|
|
817
|
-
readonly background: "focus:bg-[hsl(var(--accent))]";
|
|
818
|
-
readonly text: "focus:text-[hsl(var(--accent-foreground))]";
|
|
819
|
-
};
|
|
820
|
-
readonly selected: {
|
|
821
|
-
readonly background: "bg-[hsl(var(--accent))]";
|
|
822
|
-
readonly text: "text-[hsl(var(--accent-foreground))]";
|
|
823
|
-
};
|
|
824
|
-
};
|
|
825
902
|
/**
|
|
826
903
|
* Variant-based tokens
|
|
827
904
|
* Border, background, and text colors for different variants
|
|
@@ -2769,6 +2846,13 @@ declare const DROPDOWN_TOKENS: {
|
|
|
2769
2846
|
readonly lg: "min-w-64";
|
|
2770
2847
|
};
|
|
2771
2848
|
};
|
|
2849
|
+
/**
|
|
2850
|
+
* Width tokens
|
|
2851
|
+
* Common width utilities
|
|
2852
|
+
*/
|
|
2853
|
+
readonly width: {
|
|
2854
|
+
readonly full: "w-full";
|
|
2855
|
+
};
|
|
2772
2856
|
/**
|
|
2773
2857
|
* Item tokens by size
|
|
2774
2858
|
* Individual menu item
|
|
@@ -3727,92 +3811,25 @@ declare const MODAL_TOKENS: {
|
|
|
3727
3811
|
/**
|
|
3728
3812
|
* Data Component Tokens
|
|
3729
3813
|
*
|
|
3730
|
-
* Component-level design tokens for
|
|
3731
|
-
* Maps foundation tokens (spacing, typography, radius, shadows) to data component-specific usage.
|
|
3814
|
+
* Component-level design tokens for Skeleton component only.
|
|
3732
3815
|
*
|
|
3816
|
+
* Note: Other data components (Table, DataList, EmptyState, Pagination) have their own
|
|
3817
|
+
* isolated token domains:
|
|
3818
|
+
* - TABLE_TOKENS (src/tokens/components/table.ts)
|
|
3819
|
+
* - DATA_LIST_TOKENS (src/tokens/components/data-list.ts)
|
|
3820
|
+
* - EMPTY_STATE_TOKENS (src/tokens/components/empty-state.ts)
|
|
3821
|
+
* - PAGINATION_TOKENS (src/tokens/components/pagination.ts)
|
|
3822
|
+
*
|
|
3823
|
+
* Maps foundation tokens (spacing, typography, radius, shadows) to skeleton-specific usage.
|
|
3733
3824
|
* All values reference foundation tokens to ensure consistency across the design system.
|
|
3734
3825
|
*/
|
|
3735
3826
|
/**
|
|
3736
|
-
* Data Component Tokens
|
|
3827
|
+
* Data Component Tokens (Skeleton Only)
|
|
3737
3828
|
*
|
|
3738
|
-
* Defines all spacing, sizing, typography, and visual tokens for
|
|
3829
|
+
* Defines all spacing, sizing, typography, and visual tokens for Skeleton component.
|
|
3739
3830
|
* Values are mapped to Tailwind utility classes for direct use in component variants.
|
|
3740
3831
|
*/
|
|
3741
3832
|
declare const DATA_TOKENS: {
|
|
3742
|
-
/**
|
|
3743
|
-
* Table Component Tokens
|
|
3744
|
-
*/
|
|
3745
|
-
readonly table: {
|
|
3746
|
-
/**
|
|
3747
|
-
* Table row heights by size
|
|
3748
|
-
* Maps to Tailwind height utilities
|
|
3749
|
-
*/
|
|
3750
|
-
readonly rowHeight: {
|
|
3751
|
-
readonly sm: "h-8";
|
|
3752
|
-
readonly md: "h-10";
|
|
3753
|
-
readonly lg: "h-12";
|
|
3754
|
-
};
|
|
3755
|
-
/**
|
|
3756
|
-
* Table cell and header padding by size
|
|
3757
|
-
* Maps to semantic spacing tokens
|
|
3758
|
-
*/
|
|
3759
|
-
readonly padding: {
|
|
3760
|
-
readonly cell: {
|
|
3761
|
-
readonly sm: "p-xs";
|
|
3762
|
-
readonly md: "p-sm";
|
|
3763
|
-
readonly lg: "p-md";
|
|
3764
|
-
};
|
|
3765
|
-
readonly header: {
|
|
3766
|
-
readonly sm: "px-xs py-sm";
|
|
3767
|
-
readonly md: "px-sm py-md";
|
|
3768
|
-
readonly lg: "px-md py-lg";
|
|
3769
|
-
};
|
|
3770
|
-
};
|
|
3771
|
-
/**
|
|
3772
|
-
* Gap between table cells (horizontal spacing)
|
|
3773
|
-
*/
|
|
3774
|
-
readonly gap: {
|
|
3775
|
-
readonly sm: "gap-xs";
|
|
3776
|
-
readonly md: "gap-sm";
|
|
3777
|
-
};
|
|
3778
|
-
/**
|
|
3779
|
-
* Border radius for table
|
|
3780
|
-
*/
|
|
3781
|
-
readonly radius: {
|
|
3782
|
-
readonly default: "rounded-md";
|
|
3783
|
-
};
|
|
3784
|
-
/**
|
|
3785
|
-
* Shadow tokens for table
|
|
3786
|
-
* Maps to foundation elevation shadow tokens
|
|
3787
|
-
*/
|
|
3788
|
-
readonly shadow: {
|
|
3789
|
-
readonly none: "shadow-none";
|
|
3790
|
-
readonly subtle: "shadow-sm";
|
|
3791
|
-
};
|
|
3792
|
-
/**
|
|
3793
|
-
* Typography tokens for table headers and cells
|
|
3794
|
-
* Maps to foundation typography fontSize tokens
|
|
3795
|
-
*/
|
|
3796
|
-
readonly typography: {
|
|
3797
|
-
readonly header: {
|
|
3798
|
-
readonly fontSize: "text-sm";
|
|
3799
|
-
readonly fontWeight: "font-semibold";
|
|
3800
|
-
};
|
|
3801
|
-
readonly cell: {
|
|
3802
|
-
readonly fontSize: "text-sm";
|
|
3803
|
-
readonly fontWeight: "font-normal";
|
|
3804
|
-
};
|
|
3805
|
-
};
|
|
3806
|
-
/**
|
|
3807
|
-
* Color tokens for table states
|
|
3808
|
-
* Uses semantic color tokens
|
|
3809
|
-
*/
|
|
3810
|
-
readonly colors: {
|
|
3811
|
-
readonly border: "border-border";
|
|
3812
|
-
readonly rowHover: "hover:bg-muted/50";
|
|
3813
|
-
readonly rowSelected: "bg-muted";
|
|
3814
|
-
};
|
|
3815
|
-
};
|
|
3816
3833
|
/**
|
|
3817
3834
|
* Skeleton Component Tokens
|
|
3818
3835
|
*/
|
|
@@ -3863,94 +3880,337 @@ declare const DATA_TOKENS: {
|
|
|
3863
3880
|
readonly inline: "inline-block";
|
|
3864
3881
|
};
|
|
3865
3882
|
};
|
|
3883
|
+
};
|
|
3884
|
+
/**
|
|
3885
|
+
* Type exports for Data tokens (Skeleton only)
|
|
3886
|
+
*/
|
|
3887
|
+
type SkeletonVariant = keyof typeof DATA_TOKENS.skeleton.height;
|
|
3888
|
+
type SkeletonAnimation = keyof typeof DATA_TOKENS.skeleton.animation;
|
|
3889
|
+
type SkeletonBackground = keyof typeof DATA_TOKENS.skeleton.background;
|
|
3890
|
+
|
|
3891
|
+
/**
|
|
3892
|
+
* Table Component Tokens
|
|
3893
|
+
*
|
|
3894
|
+
* Component-level design tokens for Table component.
|
|
3895
|
+
* Maps foundation tokens (spacing, typography, radius, shadows) to table-specific usage.
|
|
3896
|
+
*
|
|
3897
|
+
* All values reference foundation tokens to ensure consistency across the design system.
|
|
3898
|
+
*
|
|
3899
|
+
* This is an isolated token domain - tokens are specific to Table component only.
|
|
3900
|
+
* No other components should import or use TABLE_TOKENS.
|
|
3901
|
+
*/
|
|
3902
|
+
/**
|
|
3903
|
+
* Table Component Tokens
|
|
3904
|
+
*
|
|
3905
|
+
* Defines all spacing, sizing, typography, and visual tokens for Table component.
|
|
3906
|
+
* Values are mapped to Tailwind utility classes for direct use in component variants.
|
|
3907
|
+
*/
|
|
3908
|
+
declare const TABLE_TOKENS: {
|
|
3866
3909
|
/**
|
|
3867
|
-
*
|
|
3910
|
+
* Table row heights by size
|
|
3911
|
+
* Maps to Tailwind height utilities
|
|
3868
3912
|
*/
|
|
3869
|
-
readonly
|
|
3870
|
-
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
|
|
3874
|
-
|
|
3875
|
-
|
|
3876
|
-
|
|
3913
|
+
readonly rowHeight: {
|
|
3914
|
+
readonly sm: "h-8";
|
|
3915
|
+
readonly md: "h-10";
|
|
3916
|
+
readonly lg: "h-12";
|
|
3917
|
+
};
|
|
3918
|
+
/**
|
|
3919
|
+
* Table cell and header padding by size
|
|
3920
|
+
* Maps to semantic spacing tokens
|
|
3921
|
+
*/
|
|
3922
|
+
readonly padding: {
|
|
3923
|
+
readonly cell: {
|
|
3924
|
+
readonly sm: "p-xs";
|
|
3925
|
+
readonly md: "p-sm";
|
|
3926
|
+
readonly lg: "p-md";
|
|
3927
|
+
};
|
|
3928
|
+
readonly header: {
|
|
3929
|
+
readonly sm: "px-xs py-sm";
|
|
3930
|
+
readonly md: "px-sm py-md";
|
|
3931
|
+
readonly lg: "px-md py-lg";
|
|
3932
|
+
};
|
|
3933
|
+
};
|
|
3934
|
+
/**
|
|
3935
|
+
* Gap between table cells (horizontal spacing)
|
|
3936
|
+
*/
|
|
3937
|
+
readonly gap: {
|
|
3938
|
+
readonly sm: "gap-xs";
|
|
3939
|
+
readonly md: "gap-sm";
|
|
3940
|
+
};
|
|
3941
|
+
/**
|
|
3942
|
+
* Border radius for table
|
|
3943
|
+
*/
|
|
3944
|
+
readonly radius: {
|
|
3945
|
+
readonly default: "rounded-md";
|
|
3946
|
+
};
|
|
3947
|
+
/**
|
|
3948
|
+
* Shadow tokens for table
|
|
3949
|
+
* Maps to foundation elevation shadow tokens
|
|
3950
|
+
*/
|
|
3951
|
+
readonly shadow: {
|
|
3952
|
+
readonly none: "shadow-none";
|
|
3953
|
+
readonly subtle: "shadow-sm";
|
|
3954
|
+
};
|
|
3955
|
+
/**
|
|
3956
|
+
* Typography tokens for table headers and cells
|
|
3957
|
+
* Maps to foundation typography fontSize tokens
|
|
3958
|
+
*/
|
|
3959
|
+
readonly typography: {
|
|
3960
|
+
readonly header: {
|
|
3961
|
+
readonly fontSize: "text-sm";
|
|
3962
|
+
readonly fontWeight: "font-semibold";
|
|
3963
|
+
};
|
|
3964
|
+
readonly cell: {
|
|
3965
|
+
readonly fontSize: "text-sm";
|
|
3966
|
+
readonly fontWeight: "font-normal";
|
|
3877
3967
|
};
|
|
3968
|
+
};
|
|
3969
|
+
/**
|
|
3970
|
+
* Color tokens for table states
|
|
3971
|
+
* Uses semantic color tokens
|
|
3972
|
+
*/
|
|
3973
|
+
readonly colors: {
|
|
3974
|
+
readonly border: "border-border";
|
|
3975
|
+
readonly rowHover: "hover:bg-muted/50";
|
|
3976
|
+
readonly rowSelected: "bg-muted";
|
|
3977
|
+
};
|
|
3978
|
+
/**
|
|
3979
|
+
* Border tokens for table
|
|
3980
|
+
*/
|
|
3981
|
+
readonly border: {
|
|
3982
|
+
readonly bottom: "border-b";
|
|
3983
|
+
};
|
|
3984
|
+
/**
|
|
3985
|
+
* Layout tokens for table container and base styles
|
|
3986
|
+
*/
|
|
3987
|
+
readonly layout: {
|
|
3988
|
+
readonly overflow: "overflow-x-auto";
|
|
3989
|
+
readonly table: "w-full border-collapse";
|
|
3990
|
+
};
|
|
3991
|
+
/**
|
|
3992
|
+
* Sticky header tokens
|
|
3993
|
+
* For sticky header positioning and styling
|
|
3994
|
+
*/
|
|
3995
|
+
readonly sticky: {
|
|
3996
|
+
readonly header: "sticky top-0 z-10 bg-background";
|
|
3997
|
+
};
|
|
3998
|
+
/**
|
|
3999
|
+
* Expandable row tokens
|
|
4000
|
+
* For expandable content styling
|
|
4001
|
+
*/
|
|
4002
|
+
readonly expandable: {
|
|
4003
|
+
readonly padding: "p-md";
|
|
4004
|
+
readonly container: "p-0";
|
|
4005
|
+
readonly transition: "overflow-hidden transition-all duration-normal ease-in-out";
|
|
4006
|
+
readonly expanded: "max-h-[100vh] opacity-100";
|
|
4007
|
+
readonly collapsed: "max-h-0 opacity-0";
|
|
4008
|
+
readonly cursor: "cursor-pointer";
|
|
4009
|
+
readonly content: {
|
|
4010
|
+
readonly expanded: "block";
|
|
4011
|
+
readonly collapsed: "hidden";
|
|
4012
|
+
};
|
|
4013
|
+
};
|
|
4014
|
+
/**
|
|
4015
|
+
* Loading state tokens
|
|
4016
|
+
* For loading state cell styling
|
|
4017
|
+
*/
|
|
4018
|
+
readonly loading: {
|
|
4019
|
+
readonly cellPadding: "p-sm";
|
|
4020
|
+
readonly skeletonWidth: "w-full";
|
|
4021
|
+
};
|
|
4022
|
+
/**
|
|
4023
|
+
* Empty state tokens
|
|
4024
|
+
* For empty state cell styling
|
|
4025
|
+
*/
|
|
4026
|
+
readonly empty: {
|
|
4027
|
+
readonly padding: "p-8";
|
|
4028
|
+
};
|
|
4029
|
+
/**
|
|
4030
|
+
* Sortable header tokens
|
|
4031
|
+
* For sortable header styling and interactions
|
|
4032
|
+
*/
|
|
4033
|
+
readonly sortable: {
|
|
4034
|
+
readonly hover: "hover:bg-muted/50";
|
|
4035
|
+
readonly gap: "gap-2";
|
|
4036
|
+
readonly cursor: "cursor-pointer select-none";
|
|
4037
|
+
readonly container: "flex items-center";
|
|
4038
|
+
readonly icon: {
|
|
4039
|
+
readonly base: "inline-flex size-4 items-center text-muted-foreground transition-transform";
|
|
4040
|
+
readonly rotated: "rotate-180";
|
|
4041
|
+
readonly inactive: "opacity-30";
|
|
4042
|
+
};
|
|
4043
|
+
};
|
|
4044
|
+
};
|
|
4045
|
+
/**
|
|
4046
|
+
* Type exports for Table tokens
|
|
4047
|
+
*/
|
|
4048
|
+
type TableRowHeight = keyof typeof TABLE_TOKENS.rowHeight;
|
|
4049
|
+
type TableCellPadding = keyof typeof TABLE_TOKENS.padding.cell;
|
|
4050
|
+
type TableHeaderPadding = keyof typeof TABLE_TOKENS.padding.header;
|
|
4051
|
+
type TableGap = keyof typeof TABLE_TOKENS.gap;
|
|
4052
|
+
type TableShadow = keyof typeof TABLE_TOKENS.shadow;
|
|
4053
|
+
|
|
4054
|
+
/**
|
|
4055
|
+
* DataList Component Tokens
|
|
4056
|
+
*
|
|
4057
|
+
* Component-level design tokens for DataList component.
|
|
4058
|
+
* Maps foundation tokens (spacing, typography) to data-list-specific usage.
|
|
4059
|
+
*
|
|
4060
|
+
* All values reference foundation tokens to ensure consistency across the design system.
|
|
4061
|
+
*
|
|
4062
|
+
* This is an isolated token domain - tokens are specific to DataList component only.
|
|
4063
|
+
* No other components should import or use DATA_LIST_TOKENS.
|
|
4064
|
+
*/
|
|
4065
|
+
/**
|
|
4066
|
+
* DataList Component Tokens
|
|
4067
|
+
*
|
|
4068
|
+
* Defines all spacing, sizing, typography, and visual tokens for DataList component.
|
|
4069
|
+
* Values are mapped to Tailwind utility classes for direct use in component variants.
|
|
4070
|
+
*/
|
|
4071
|
+
declare const DATA_LIST_TOKENS: {
|
|
4072
|
+
/**
|
|
4073
|
+
* Spacing tokens for DataList
|
|
4074
|
+
* Maps to semantic spacing tokens
|
|
4075
|
+
*/
|
|
4076
|
+
readonly spacing: {
|
|
4077
|
+
readonly gap: "gap-md";
|
|
4078
|
+
readonly padding: "p-md";
|
|
4079
|
+
};
|
|
4080
|
+
/**
|
|
4081
|
+
* Label width tokens (for desktop horizontal layout)
|
|
4082
|
+
* Maps to Tailwind width utilities
|
|
4083
|
+
*/
|
|
4084
|
+
readonly labelWidth: {
|
|
4085
|
+
readonly sm: "w-24";
|
|
4086
|
+
readonly md: "w-32";
|
|
4087
|
+
readonly lg: "w-40";
|
|
4088
|
+
};
|
|
4089
|
+
/**
|
|
4090
|
+
* Row padding tokens
|
|
4091
|
+
* Maps to semantic spacing tokens
|
|
4092
|
+
*/
|
|
4093
|
+
readonly rowPadding: {
|
|
4094
|
+
readonly sm: "py-xs";
|
|
4095
|
+
readonly md: "py-sm";
|
|
4096
|
+
readonly lg: "py-md";
|
|
4097
|
+
};
|
|
4098
|
+
/**
|
|
4099
|
+
* Item tokens
|
|
4100
|
+
* For individual DataList item styling
|
|
4101
|
+
*/
|
|
4102
|
+
readonly item: {
|
|
3878
4103
|
/**
|
|
3879
|
-
* Border
|
|
4104
|
+
* Border tokens for items
|
|
3880
4105
|
*/
|
|
3881
|
-
readonly
|
|
3882
|
-
readonly default: "rounded-xl";
|
|
3883
|
-
};
|
|
4106
|
+
readonly border: "border-b border-border last:border-0";
|
|
3884
4107
|
/**
|
|
3885
|
-
*
|
|
3886
|
-
* Maps to Tailwind size utilities
|
|
4108
|
+
* Responsive layout tokens
|
|
3887
4109
|
*/
|
|
3888
|
-
readonly
|
|
4110
|
+
readonly layout: {
|
|
4111
|
+
readonly mobile: "flex flex-col";
|
|
4112
|
+
readonly desktop: "md:flex-row md:items-center";
|
|
4113
|
+
};
|
|
4114
|
+
};
|
|
4115
|
+
/**
|
|
4116
|
+
* Label tokens
|
|
4117
|
+
* For DataList label styling
|
|
4118
|
+
*/
|
|
4119
|
+
readonly label: {
|
|
4120
|
+
readonly mobile: "mb-1 font-semibold text-foreground";
|
|
4121
|
+
readonly desktop: "md:mb-0";
|
|
4122
|
+
};
|
|
4123
|
+
/**
|
|
4124
|
+
* Value tokens
|
|
4125
|
+
* For DataList value styling
|
|
4126
|
+
*/
|
|
4127
|
+
readonly value: {
|
|
4128
|
+
readonly color: "text-muted-foreground";
|
|
4129
|
+
readonly flex: "flex-1";
|
|
4130
|
+
};
|
|
4131
|
+
};
|
|
4132
|
+
/**
|
|
4133
|
+
* Type exports for DataList tokens
|
|
4134
|
+
*/
|
|
4135
|
+
type DataListLabelWidth = keyof typeof DATA_LIST_TOKENS.labelWidth;
|
|
4136
|
+
type DataListRowPadding = keyof typeof DATA_LIST_TOKENS.rowPadding;
|
|
4137
|
+
|
|
4138
|
+
/**
|
|
4139
|
+
* EmptyState Component Tokens
|
|
4140
|
+
*
|
|
4141
|
+
* Component-level design tokens for EmptyState component.
|
|
4142
|
+
* Maps foundation tokens (spacing, typography, radius) to empty-state-specific usage.
|
|
4143
|
+
*
|
|
4144
|
+
* All values reference foundation tokens to ensure consistency across the design system.
|
|
4145
|
+
*
|
|
4146
|
+
* This is an isolated token domain - tokens are specific to EmptyState component only.
|
|
4147
|
+
* No other components should import or use EMPTY_STATE_TOKENS.
|
|
4148
|
+
*/
|
|
4149
|
+
/**
|
|
4150
|
+
* EmptyState Component Tokens
|
|
4151
|
+
*
|
|
4152
|
+
* Defines all spacing, sizing, typography, and visual tokens for EmptyState component.
|
|
4153
|
+
* Values are mapped to Tailwind utility classes for direct use in component variants.
|
|
4154
|
+
*/
|
|
4155
|
+
declare const EMPTY_STATE_TOKENS: {
|
|
4156
|
+
/**
|
|
4157
|
+
* Spacing tokens for EmptyState
|
|
4158
|
+
* Maps to semantic spacing tokens
|
|
4159
|
+
*/
|
|
4160
|
+
readonly spacing: {
|
|
4161
|
+
readonly gap: "gap-md";
|
|
4162
|
+
readonly padding: "p-lg";
|
|
4163
|
+
readonly action: "mt-2";
|
|
4164
|
+
};
|
|
4165
|
+
/**
|
|
4166
|
+
* Border radius for EmptyState container
|
|
4167
|
+
*/
|
|
4168
|
+
readonly radius: {
|
|
4169
|
+
readonly default: "rounded-xl";
|
|
4170
|
+
};
|
|
4171
|
+
/**
|
|
4172
|
+
* Icon sizes by variant
|
|
4173
|
+
* Maps to Tailwind size utilities
|
|
4174
|
+
*/
|
|
4175
|
+
readonly icon: {
|
|
4176
|
+
readonly size: {
|
|
3889
4177
|
readonly sm: "size-8";
|
|
3890
4178
|
readonly md: "size-12";
|
|
3891
4179
|
readonly lg: "size-16";
|
|
3892
4180
|
};
|
|
3893
|
-
|
|
3894
|
-
* Typography tokens for EmptyState
|
|
3895
|
-
* Maps to foundation typography tokens
|
|
3896
|
-
*/
|
|
3897
|
-
readonly typography: {
|
|
3898
|
-
readonly title: {
|
|
3899
|
-
readonly fontSize: "text-lg";
|
|
3900
|
-
readonly fontWeight: "font-semibold";
|
|
3901
|
-
};
|
|
3902
|
-
readonly description: {
|
|
3903
|
-
readonly fontSize: "text-sm";
|
|
3904
|
-
readonly fontWeight: "font-normal";
|
|
3905
|
-
};
|
|
3906
|
-
};
|
|
4181
|
+
readonly container: "flex items-center justify-center text-muted-foreground";
|
|
3907
4182
|
};
|
|
3908
4183
|
/**
|
|
3909
|
-
*
|
|
4184
|
+
* Typography tokens for EmptyState
|
|
4185
|
+
* Maps to foundation typography tokens
|
|
3910
4186
|
*/
|
|
3911
|
-
readonly
|
|
3912
|
-
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
readonly spacing: {
|
|
3917
|
-
readonly gap: "gap-md";
|
|
3918
|
-
readonly padding: "p-md";
|
|
3919
|
-
};
|
|
3920
|
-
/**
|
|
3921
|
-
* Label width tokens (for desktop horizontal layout)
|
|
3922
|
-
* Maps to Tailwind width utilities
|
|
3923
|
-
*/
|
|
3924
|
-
readonly labelWidth: {
|
|
3925
|
-
readonly sm: "w-24";
|
|
3926
|
-
readonly md: "w-32";
|
|
3927
|
-
readonly lg: "w-40";
|
|
4187
|
+
readonly typography: {
|
|
4188
|
+
readonly title: {
|
|
4189
|
+
readonly fontSize: "text-lg";
|
|
4190
|
+
readonly fontWeight: "font-semibold";
|
|
4191
|
+
readonly color: "text-foreground";
|
|
3928
4192
|
};
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
|
|
3933
|
-
|
|
3934
|
-
readonly sm: "py-xs";
|
|
3935
|
-
readonly md: "py-sm";
|
|
3936
|
-
readonly lg: "py-md";
|
|
4193
|
+
readonly description: {
|
|
4194
|
+
readonly fontSize: "text-sm";
|
|
4195
|
+
readonly fontWeight: "font-normal";
|
|
4196
|
+
readonly color: "text-muted-foreground";
|
|
4197
|
+
readonly maxWidth: "max-w-md";
|
|
3937
4198
|
};
|
|
3938
4199
|
};
|
|
4200
|
+
/**
|
|
4201
|
+
* Alignment tokens
|
|
4202
|
+
* For text alignment in EmptyState
|
|
4203
|
+
*/
|
|
4204
|
+
readonly alignment: {
|
|
4205
|
+
readonly center: "text-center";
|
|
4206
|
+
readonly left: "text-left";
|
|
4207
|
+
readonly right: "text-right";
|
|
4208
|
+
};
|
|
3939
4209
|
};
|
|
3940
4210
|
/**
|
|
3941
|
-
* Type exports for
|
|
4211
|
+
* Type exports for EmptyState tokens
|
|
3942
4212
|
*/
|
|
3943
|
-
type
|
|
3944
|
-
type TableCellPadding = keyof typeof DATA_TOKENS.table.padding.cell;
|
|
3945
|
-
type TableHeaderPadding = keyof typeof DATA_TOKENS.table.padding.header;
|
|
3946
|
-
type TableGap = keyof typeof DATA_TOKENS.table.gap;
|
|
3947
|
-
type TableShadow = keyof typeof DATA_TOKENS.table.shadow;
|
|
3948
|
-
type SkeletonVariant = keyof typeof DATA_TOKENS.skeleton.height;
|
|
3949
|
-
type SkeletonAnimation = keyof typeof DATA_TOKENS.skeleton.animation;
|
|
3950
|
-
type SkeletonBackground = keyof typeof DATA_TOKENS.skeleton.background;
|
|
3951
|
-
type EmptyStateIconSize = keyof typeof DATA_TOKENS.emptyState.iconSize;
|
|
3952
|
-
type DataListLabelWidth = keyof typeof DATA_TOKENS.dataList.labelWidth;
|
|
3953
|
-
type DataListRowPadding = keyof typeof DATA_TOKENS.dataList.rowPadding;
|
|
4213
|
+
type EmptyStateIconSize = keyof typeof EMPTY_STATE_TOKENS.icon.size;
|
|
3954
4214
|
|
|
3955
4215
|
/**
|
|
3956
4216
|
* Icon Component Tokens
|
|
@@ -6842,4 +7102,4 @@ type ResponsiveContextMenuSize = Responsive<ContextMenuSizeToken>;
|
|
|
6842
7102
|
*/
|
|
6843
7103
|
type ResponsiveContextMenuWidth = Responsive<ContextMenuWidthToken>;
|
|
6844
7104
|
|
|
6845
|
-
export { type
|
|
7105
|
+
export { type IconColor as $, ALERT_TOKENS as A, BUTTON_TOKENS as B, CARD_TOKENS as C, DATA_TOKENS as D, type DataListRowPadding as E, type DomainCardBadge as F, type DomainCardImage as G, type DomainCardLayout as H, ICON_TOKENS as I, type DomainCardMetadata as J, type DomainCardMotion as K, type DomainCardPriceCapacity as L, MENU_TOKENS as M, NAVIGATION_TOKENS as N, OVERLAY_TOKENS as O, POPOVER_TOKENS as P, type DomainCardSkeleton as Q, RADIO_TOKENS as R, SECTION_TOKENS as S, TEXT_TOKENS as T, type DomainCardSkeletonContentWidth as U, type DomainCardSurface as V, type DropdownItemSize as W, type DropdownMenuSize as X, type DropdownTriggerSize as Y, type DropdownVariant as Z, type EmptyStateIconSize as _, CHECKBOX_TOKENS as a, type SkeletonBackground as a$, type IconSize as a0, type IconStroke as a1, type InputFontSize as a2, type InputHeight as a3, type InputPaddingHorizontal as a4, type InputPaddingVertical as a5, type InputRadius as a6, type InputSize as a7, type MenuContentMinWidth as a8, type MenuContentPadding as a9, type PopoverArrowSize as aA, type PopoverContentPadding as aB, type PopoverContentRadius as aC, type PopoverContentShadow as aD, type PopoverContentWidth as aE, type RadioSize as aF, type RadioState as aG, type RadioVariant as aH, type SectionGap as aI, type SectionPadding as aJ, type SelectContentPadding as aK, type SelectContentRadius as aL, type SelectItemFontSize as aM, type SelectItemPaddingHorizontal as aN, type SelectItemPaddingVertical as aO, type SelectItemRadius as aP, type SelectLabelFontSize as aQ, type SelectLabelPaddingHorizontal as aR, type SelectLabelPaddingVertical as aS, type SelectSeparatorMarginHorizontal as aT, type SelectSeparatorMarginVertical as aU, type SelectTriggerFontSize as aV, type SelectTriggerHeight as aW, type SelectTriggerPaddingHorizontal as aX, type SelectTriggerPaddingVertical as aY, type SelectTriggerRadius as aZ, type SkeletonAnimation as a_, type MenuContentRadius as aa, type MenuContentShadow as ab, type MenuIndicatorOffset as ac, type MenuIndicatorSize as ad, type MenuItemGap as ae, type MenuItemHeight as af, type MenuItemPadding as ag, type MenuItemRadius as ah, type MenuLabelPadding as ai, type MenuSeparatorMargin as aj, type MotionAnimation as ak, type MotionDuration as al, type MotionEasing as am, type MotionTransition as an, type MotionTransitionPreset as ao, type NavigationItemPadding as ap, type NavigationListGap as aq, type NavigationRadius as ar, type NavigationShadow as as, type NavigationSize as at, type NavigationState as au, type NotificationPanelWidth as av, type NotificationVariant as aw, type OverlayBackdropVariant as ax, type OverlayModalSize as ay, type PopoverArrowOffset as az, DOMAIN_TOKENS as b, accentColoredShadows as b$, type SkeletonVariant as b0, type SurfacePadding as b1, type SurfaceRadius as b2, type SurfaceShadow as b3, type SurfaceVariant as b4, type SwitchSize as b5, type SwitchState as b6, type SwitchVariant as b7, type TableCellPadding as b8, type TableGap as b9, springs as bA, tailwindMotionConfig as bB, transitions as bC, type MotionV2CombinedType as bD, type MotionV2Duration as bE, type MotionV2Easing as bF, type MotionV2SlideDirection as bG, type MotionV2Transition as bH, motionV2CSSVariables as bI, motionV2Combined as bJ, motionV2Durations as bK, motionV2Easings as bL, motionV2Fade as bM, motionV2Scale as bN, motionV2Slide as bO, motionV2TailwindConfig as bP, motionV2Transitions as bQ, type BorderRadius as bR, type ComponentRadius as bS, borderRadius as bT, componentRadius as bU, radiusCSSVariables as bV, tailwindRadiusConfig as bW, type ColoredShadow as bX, type ElevationShadow as bY, type FocusRing as bZ, type GlowEffect as b_, type TableHeaderPadding as ba, type TableRowHeight as bb, type TableShadow as bc, type TextFontSize as bd, type TextFontWeight as be, type TextLetterSpacing as bf, type TextLineHeight as bg, type ToastVariant as bh, type TooltipContentRadius as bi, type TooltipContentShadow as bj, allCSSVariables as bk, allCSSVariablesCSS as bl, generateCSSVariablesCSS as bm, tokenSystemSummary as bn, type Animation as bo, type Duration as bp, type Easing as bq, type Keyframe as br, type Spring as bs, type Transition as bt, animations as bu, durations as bv, easings as bw, keyframes as bx, motionCSSVariables as by, reducedMotion as bz, DROPDOWN_TOKENS as c, type ResponsiveColor as c$, componentShadowMapping as c0, elevationShadows as c1, focusRings as c2, glowEffects as c3, primaryColoredShadows as c4, shadowBase as c5, shadowCSSVariables as c6, shadowOpacity as c7, tailwindShadowConfig as c8, type ComponentSpacing as c9, fontWeight as cA, letterSpacing as cB, lineHeight as cC, tailwindTypographyConfig as cD, textStyles as cE, typographyCSSVariables as cF, type AlignOffsetToken as cG, type AnimationPresetToken as cH, type AspectRatioToken as cI, type ColorToken as cJ, type ContainerMaxWidthToken as cK, type ContainerPaddingToken as cL, type DelayToken as cM, type FlexBasisToken as cN, type LayoutSpaceToken as cO, type ModalFooterAlignToken as cP, type ModalHeightToken as cQ, type ModalSizeToken as cR, type ModalWidthToken as cS, type MotionDurationToken as cT, type MotionEasingToken as cU, type MotionToken as cV, type MotionTransitionToken as cW, type RadiusToken as cX, type ResponsiveAlignOffset as cY, type ResponsiveAnimationPreset as cZ, type ResponsiveAspectRatio as c_, type ContainerSpacing as ca, type GridSpacing as cb, type SectionSpacing as cc, type SemanticSpacing as cd, type Spacing as ce, type StackSpacing as cf, layoutSpacing as cg, semanticSpacing as ch, spacing as ci, spacingCSSVariables as cj, tailwindSpacingConfig as ck, UI_COLORS as cl, type CanonicalFontSize as cm, type CanonicalFontWeight as cn, type CanonicalLetterSpacing as co, type CanonicalLineHeight as cp, type CanonicalTextColor as cq, type FontFamily as cr, type FontSize as cs, type FontWeight as ct, type LetterSpacing as cu, type LineHeight as cv, type TextStyle as cw, fontFamily as cx, fontSize as cy, fontSizeWithMd as cz, INPUT_TOKENS as d, type ResponsiveContainerMaxWidth as d0, type ResponsiveContainerPadding as d1, type ResponsiveDelay as d2, type ResponsiveFlexBasis as d3, type ResponsiveModalHeight as d4, type ResponsiveModalSize as d5, type ResponsiveModalWidth as d6, type ResponsiveMotion as d7, type ResponsiveRadius as d8, type ResponsiveSelectSize as d9, type ResponsiveTabsSize as dA, type TabsVariantToken as dB, type TabsToneToken as dC, type Breakpoint as dD, type ResponsiveSelectWidth as da, type ResponsiveShadow as db, type ResponsiveSideOffset as dc, type ResponsiveSpace as dd, type ResponsiveSurface as de, type ResponsiveTextLineHeight as df, type ResponsiveTextSize as dg, type ResponsiveTextWeight as dh, type SelectSizeToken as di, type SelectStateToken as dj, type SelectVariantToken as dk, type SelectWidthToken as dl, type ShadowToken as dm, type SideOffsetToken as dn, type SpaceToken as dp, type SpacingToken as dq, type SurfaceToken as dr, type TextLetterSpacingToken as ds, type TextLineHeightToken as dt, type TextSizeToken as du, type TextWeightToken as dv, type Responsive as dw, type ResponsiveContextMenuSize as dx, type ResponsiveContextMenuWidth as dy, type ContextMenuItemToneToken as dz, MOTION_TOKENS as e, NOTIFICATION_TOKENS as f, SELECT_TOKENS as g, SURFACE_TOKENS as h, SWITCH_TOKENS as i, TOAST_TOKENS as j, TOOLTIP_TOKENS as k, type AlertVariant as l, type ButtonFontSize as m, type ButtonHeight as n, type ButtonPaddingHorizontal as o, type ButtonPaddingVertical as p, type ButtonShadow as q, type CardPadding as r, type CardRadius as s, type CardShadow as t, type CardSize as u, type CardSpacingVertical as v, type CheckboxSize as w, type CheckboxState as x, type CheckboxVariant as y, type DataListLabelWidth as z };
|