@deepgram/styles 0.2.8 → 0.2.9
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/design-system.yaml +783 -0
- package/dist/deepgram.css +1 -1
- package/dist/deepgram.expanded.css +398 -0
- package/lib/deepgram.css +216 -0
- package/lib/tailwind-theme.css +1 -1
- package/package.json +1 -1
package/design-system.yaml
CHANGED
|
@@ -2722,3 +2722,786 @@ components:
|
|
|
2722
2722
|
class: "dg-btn dg-btn--primary"
|
|
2723
2723
|
children:
|
|
2724
2724
|
- "Subscribe"
|
|
2725
|
+
|
|
2726
|
+
# ---------------------------------------------------------------------------
|
|
2727
|
+
# ALERTS
|
|
2728
|
+
# ---------------------------------------------------------------------------
|
|
2729
|
+
alert:
|
|
2730
|
+
metadata:
|
|
2731
|
+
title: "Alerts"
|
|
2732
|
+
description: "Feedback banners for warnings, errors, success, and informational messages"
|
|
2733
|
+
category: "application-ui"
|
|
2734
|
+
section: "Feedback"
|
|
2735
|
+
subsection: "Alerts"
|
|
2736
|
+
tags: [alert, feedback, notification, banner, warning, error, success, info]
|
|
2737
|
+
css:
|
|
2738
|
+
".dg-alert":
|
|
2739
|
+
apply: "rounded-md p-4"
|
|
2740
|
+
variants:
|
|
2741
|
+
warning:
|
|
2742
|
+
css:
|
|
2743
|
+
".dg-alert--warning":
|
|
2744
|
+
properties:
|
|
2745
|
+
background-color: "color-mix(in srgb, var(--color-dg-warning) 10%, transparent)"
|
|
2746
|
+
outline: "1px solid color-mix(in srgb, var(--color-dg-warning) 15%, transparent)"
|
|
2747
|
+
success:
|
|
2748
|
+
css:
|
|
2749
|
+
".dg-alert--success":
|
|
2750
|
+
properties:
|
|
2751
|
+
background-color: "color-mix(in srgb, var(--color-dg-success) 10%, transparent)"
|
|
2752
|
+
outline: "1px solid color-mix(in srgb, var(--color-dg-success) 15%, transparent)"
|
|
2753
|
+
danger:
|
|
2754
|
+
css:
|
|
2755
|
+
".dg-alert--danger":
|
|
2756
|
+
properties:
|
|
2757
|
+
background-color: "color-mix(in srgb, var(--color-dg-danger) 10%, transparent)"
|
|
2758
|
+
outline: "1px solid color-mix(in srgb, var(--color-dg-danger) 15%, transparent)"
|
|
2759
|
+
info:
|
|
2760
|
+
css:
|
|
2761
|
+
".dg-alert--info":
|
|
2762
|
+
properties:
|
|
2763
|
+
background-color: "color-mix(in srgb, var(--color-dg-secondary) 10%, transparent)"
|
|
2764
|
+
outline: "1px solid color-mix(in srgb, var(--color-dg-secondary) 15%, transparent)"
|
|
2765
|
+
elements:
|
|
2766
|
+
content:
|
|
2767
|
+
css:
|
|
2768
|
+
".dg-alert__content":
|
|
2769
|
+
apply: "flex"
|
|
2770
|
+
icon:
|
|
2771
|
+
css:
|
|
2772
|
+
".dg-alert__icon":
|
|
2773
|
+
apply: "shrink-0"
|
|
2774
|
+
".dg-alert__icon svg":
|
|
2775
|
+
apply: "size-5"
|
|
2776
|
+
".dg-alert--warning .dg-alert__icon":
|
|
2777
|
+
apply: "text-dg-warning"
|
|
2778
|
+
".dg-alert--success .dg-alert__icon":
|
|
2779
|
+
apply: "text-dg-success"
|
|
2780
|
+
".dg-alert--danger .dg-alert__icon":
|
|
2781
|
+
apply: "text-dg-danger"
|
|
2782
|
+
".dg-alert--info .dg-alert__icon":
|
|
2783
|
+
apply: "text-dg-secondary"
|
|
2784
|
+
body:
|
|
2785
|
+
css:
|
|
2786
|
+
".dg-alert__body":
|
|
2787
|
+
properties:
|
|
2788
|
+
margin-left: "0.75rem"
|
|
2789
|
+
title:
|
|
2790
|
+
css:
|
|
2791
|
+
".dg-alert__title":
|
|
2792
|
+
apply: "text-sm font-medium"
|
|
2793
|
+
".dg-alert--warning .dg-alert__title":
|
|
2794
|
+
apply: "text-dg-warning"
|
|
2795
|
+
".dg-alert--success .dg-alert__title":
|
|
2796
|
+
apply: "text-dg-success"
|
|
2797
|
+
".dg-alert--danger .dg-alert__title":
|
|
2798
|
+
apply: "text-dg-danger"
|
|
2799
|
+
".dg-alert--info .dg-alert__title":
|
|
2800
|
+
apply: "text-dg-secondary"
|
|
2801
|
+
description:
|
|
2802
|
+
css:
|
|
2803
|
+
".dg-alert__description":
|
|
2804
|
+
apply: "mt-2 text-sm text-dg-muted"
|
|
2805
|
+
actions:
|
|
2806
|
+
css:
|
|
2807
|
+
".dg-alert__actions":
|
|
2808
|
+
apply: "mt-4"
|
|
2809
|
+
".dg-alert__actions .dg-btn":
|
|
2810
|
+
apply: "text-sm"
|
|
2811
|
+
list:
|
|
2812
|
+
css:
|
|
2813
|
+
".dg-alert__list":
|
|
2814
|
+
apply: "mt-2 text-sm text-dg-muted list-disc pl-5"
|
|
2815
|
+
".dg-alert__list li":
|
|
2816
|
+
properties:
|
|
2817
|
+
padding-left: "0.25rem"
|
|
2818
|
+
dismiss:
|
|
2819
|
+
css:
|
|
2820
|
+
".dg-alert__dismiss":
|
|
2821
|
+
apply: "ml-auto pl-3 shrink-0"
|
|
2822
|
+
".dg-alert__dismiss button":
|
|
2823
|
+
apply: "inline-flex rounded-md p-1.5 text-dg-muted cursor-pointer"
|
|
2824
|
+
".dg-alert__dismiss button:hover":
|
|
2825
|
+
apply: "text-dg-text"
|
|
2826
|
+
".dg-alert__dismiss button svg":
|
|
2827
|
+
apply: "size-5"
|
|
2828
|
+
examples:
|
|
2829
|
+
- title: "Warning Alert with Description"
|
|
2830
|
+
description: "A warning alert with title and description text"
|
|
2831
|
+
ast:
|
|
2832
|
+
tag: div
|
|
2833
|
+
props:
|
|
2834
|
+
class: "dg-alert dg-alert--warning"
|
|
2835
|
+
children:
|
|
2836
|
+
- tag: div
|
|
2837
|
+
props:
|
|
2838
|
+
class: "dg-alert__content"
|
|
2839
|
+
children:
|
|
2840
|
+
- tag: div
|
|
2841
|
+
props:
|
|
2842
|
+
class: "dg-alert__icon"
|
|
2843
|
+
children:
|
|
2844
|
+
- tag: svg
|
|
2845
|
+
props:
|
|
2846
|
+
viewBox: "0 0 20 20"
|
|
2847
|
+
fill: "currentColor"
|
|
2848
|
+
aria-hidden: "true"
|
|
2849
|
+
children:
|
|
2850
|
+
- tag: path
|
|
2851
|
+
props:
|
|
2852
|
+
fill-rule: "evenodd"
|
|
2853
|
+
clip-rule: "evenodd"
|
|
2854
|
+
d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
|
2855
|
+
- tag: div
|
|
2856
|
+
props:
|
|
2857
|
+
class: "dg-alert__body"
|
|
2858
|
+
children:
|
|
2859
|
+
- tag: h3
|
|
2860
|
+
props:
|
|
2861
|
+
class: "dg-alert__title"
|
|
2862
|
+
children:
|
|
2863
|
+
- "Attention needed"
|
|
2864
|
+
- tag: div
|
|
2865
|
+
props:
|
|
2866
|
+
class: "dg-alert__description"
|
|
2867
|
+
children:
|
|
2868
|
+
- tag: p
|
|
2869
|
+
children:
|
|
2870
|
+
- "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
|
|
2871
|
+
- title: "Success Alert"
|
|
2872
|
+
description: "A success alert for confirming completed actions"
|
|
2873
|
+
ast:
|
|
2874
|
+
tag: div
|
|
2875
|
+
props:
|
|
2876
|
+
class: "dg-alert dg-alert--success"
|
|
2877
|
+
children:
|
|
2878
|
+
- tag: div
|
|
2879
|
+
props:
|
|
2880
|
+
class: "dg-alert__content"
|
|
2881
|
+
children:
|
|
2882
|
+
- tag: div
|
|
2883
|
+
props:
|
|
2884
|
+
class: "dg-alert__icon"
|
|
2885
|
+
children:
|
|
2886
|
+
- tag: svg
|
|
2887
|
+
props:
|
|
2888
|
+
viewBox: "0 0 20 20"
|
|
2889
|
+
fill: "currentColor"
|
|
2890
|
+
aria-hidden: "true"
|
|
2891
|
+
children:
|
|
2892
|
+
- tag: path
|
|
2893
|
+
props:
|
|
2894
|
+
fill-rule: "evenodd"
|
|
2895
|
+
clip-rule: "evenodd"
|
|
2896
|
+
d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
|
|
2897
|
+
- tag: div
|
|
2898
|
+
props:
|
|
2899
|
+
class: "dg-alert__body"
|
|
2900
|
+
children:
|
|
2901
|
+
- tag: h3
|
|
2902
|
+
props:
|
|
2903
|
+
class: "dg-alert__title"
|
|
2904
|
+
children:
|
|
2905
|
+
- "Successfully uploaded"
|
|
2906
|
+
- tag: div
|
|
2907
|
+
props:
|
|
2908
|
+
class: "dg-alert__description"
|
|
2909
|
+
children:
|
|
2910
|
+
- tag: p
|
|
2911
|
+
children:
|
|
2912
|
+
- "Your file has been uploaded and is now being processed."
|
|
2913
|
+
- title: "Danger Alert with List"
|
|
2914
|
+
description: "An error alert with a list of issues to resolve"
|
|
2915
|
+
ast:
|
|
2916
|
+
tag: div
|
|
2917
|
+
props:
|
|
2918
|
+
class: "dg-alert dg-alert--danger"
|
|
2919
|
+
children:
|
|
2920
|
+
- tag: div
|
|
2921
|
+
props:
|
|
2922
|
+
class: "dg-alert__content"
|
|
2923
|
+
children:
|
|
2924
|
+
- tag: div
|
|
2925
|
+
props:
|
|
2926
|
+
class: "dg-alert__icon"
|
|
2927
|
+
children:
|
|
2928
|
+
- tag: svg
|
|
2929
|
+
props:
|
|
2930
|
+
viewBox: "0 0 20 20"
|
|
2931
|
+
fill: "currentColor"
|
|
2932
|
+
aria-hidden: "true"
|
|
2933
|
+
children:
|
|
2934
|
+
- tag: path
|
|
2935
|
+
props:
|
|
2936
|
+
fill-rule: "evenodd"
|
|
2937
|
+
clip-rule: "evenodd"
|
|
2938
|
+
d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
|
|
2939
|
+
- tag: div
|
|
2940
|
+
props:
|
|
2941
|
+
class: "dg-alert__body"
|
|
2942
|
+
children:
|
|
2943
|
+
- tag: h3
|
|
2944
|
+
props:
|
|
2945
|
+
class: "dg-alert__title"
|
|
2946
|
+
children:
|
|
2947
|
+
- "There were errors with your submission"
|
|
2948
|
+
- tag: ul
|
|
2949
|
+
props:
|
|
2950
|
+
class: "dg-alert__list"
|
|
2951
|
+
children:
|
|
2952
|
+
- tag: li
|
|
2953
|
+
children:
|
|
2954
|
+
- "Your API key is invalid"
|
|
2955
|
+
- tag: li
|
|
2956
|
+
children:
|
|
2957
|
+
- "The project name is already taken"
|
|
2958
|
+
- title: "Info Alert"
|
|
2959
|
+
description: "An informational alert for general notices"
|
|
2960
|
+
ast:
|
|
2961
|
+
tag: div
|
|
2962
|
+
props:
|
|
2963
|
+
class: "dg-alert dg-alert--info"
|
|
2964
|
+
children:
|
|
2965
|
+
- tag: div
|
|
2966
|
+
props:
|
|
2967
|
+
class: "dg-alert__content"
|
|
2968
|
+
children:
|
|
2969
|
+
- tag: div
|
|
2970
|
+
props:
|
|
2971
|
+
class: "dg-alert__icon"
|
|
2972
|
+
children:
|
|
2973
|
+
- tag: svg
|
|
2974
|
+
props:
|
|
2975
|
+
viewBox: "0 0 20 20"
|
|
2976
|
+
fill: "currentColor"
|
|
2977
|
+
aria-hidden: "true"
|
|
2978
|
+
children:
|
|
2979
|
+
- tag: path
|
|
2980
|
+
props:
|
|
2981
|
+
fill-rule: "evenodd"
|
|
2982
|
+
clip-rule: "evenodd"
|
|
2983
|
+
d: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
|
|
2984
|
+
- tag: div
|
|
2985
|
+
props:
|
|
2986
|
+
class: "dg-alert__body"
|
|
2987
|
+
children:
|
|
2988
|
+
- tag: h3
|
|
2989
|
+
props:
|
|
2990
|
+
class: "dg-alert__title"
|
|
2991
|
+
children:
|
|
2992
|
+
- "New API version available"
|
|
2993
|
+
- tag: div
|
|
2994
|
+
props:
|
|
2995
|
+
class: "dg-alert__description"
|
|
2996
|
+
children:
|
|
2997
|
+
- tag: p
|
|
2998
|
+
children:
|
|
2999
|
+
- "A new version of the API is available. Please update your integration to take advantage of new features."
|
|
3000
|
+
- title: "Warning Alert with Actions"
|
|
3001
|
+
description: "A warning alert with action buttons"
|
|
3002
|
+
ast:
|
|
3003
|
+
tag: div
|
|
3004
|
+
props:
|
|
3005
|
+
class: "dg-alert dg-alert--warning"
|
|
3006
|
+
children:
|
|
3007
|
+
- tag: div
|
|
3008
|
+
props:
|
|
3009
|
+
class: "dg-alert__content"
|
|
3010
|
+
children:
|
|
3011
|
+
- tag: div
|
|
3012
|
+
props:
|
|
3013
|
+
class: "dg-alert__icon"
|
|
3014
|
+
children:
|
|
3015
|
+
- tag: svg
|
|
3016
|
+
props:
|
|
3017
|
+
viewBox: "0 0 20 20"
|
|
3018
|
+
fill: "currentColor"
|
|
3019
|
+
aria-hidden: "true"
|
|
3020
|
+
children:
|
|
3021
|
+
- tag: path
|
|
3022
|
+
props:
|
|
3023
|
+
fill-rule: "evenodd"
|
|
3024
|
+
clip-rule: "evenodd"
|
|
3025
|
+
d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
|
3026
|
+
- tag: div
|
|
3027
|
+
props:
|
|
3028
|
+
class: "dg-alert__body"
|
|
3029
|
+
children:
|
|
3030
|
+
- tag: h3
|
|
3031
|
+
props:
|
|
3032
|
+
class: "dg-alert__title"
|
|
3033
|
+
children:
|
|
3034
|
+
- "Attention needed"
|
|
3035
|
+
- tag: div
|
|
3036
|
+
props:
|
|
3037
|
+
class: "dg-alert__description"
|
|
3038
|
+
children:
|
|
3039
|
+
- tag: p
|
|
3040
|
+
children:
|
|
3041
|
+
- "Your account is approaching its usage limit. Upgrade your plan to avoid service interruptions."
|
|
3042
|
+
- tag: div
|
|
3043
|
+
props:
|
|
3044
|
+
class: "dg-alert__actions"
|
|
3045
|
+
children:
|
|
3046
|
+
- tag: button
|
|
3047
|
+
props:
|
|
3048
|
+
type: "button"
|
|
3049
|
+
class: "dg-btn dg-btn--ghost dg-btn--sm"
|
|
3050
|
+
children:
|
|
3051
|
+
- "View usage"
|
|
3052
|
+
- tag: button
|
|
3053
|
+
props:
|
|
3054
|
+
type: "button"
|
|
3055
|
+
class: "dg-btn dg-btn--primary dg-btn--sm"
|
|
3056
|
+
children:
|
|
3057
|
+
- "Upgrade plan"
|
|
3058
|
+
- title: "Dismissible Alert"
|
|
3059
|
+
description: "An alert with a dismiss button"
|
|
3060
|
+
ast:
|
|
3061
|
+
tag: div
|
|
3062
|
+
props:
|
|
3063
|
+
class: "dg-alert dg-alert--success"
|
|
3064
|
+
children:
|
|
3065
|
+
- tag: div
|
|
3066
|
+
props:
|
|
3067
|
+
class: "dg-alert__content"
|
|
3068
|
+
children:
|
|
3069
|
+
- tag: div
|
|
3070
|
+
props:
|
|
3071
|
+
class: "dg-alert__icon"
|
|
3072
|
+
children:
|
|
3073
|
+
- tag: svg
|
|
3074
|
+
props:
|
|
3075
|
+
viewBox: "0 0 20 20"
|
|
3076
|
+
fill: "currentColor"
|
|
3077
|
+
aria-hidden: "true"
|
|
3078
|
+
children:
|
|
3079
|
+
- tag: path
|
|
3080
|
+
props:
|
|
3081
|
+
fill-rule: "evenodd"
|
|
3082
|
+
clip-rule: "evenodd"
|
|
3083
|
+
d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
|
|
3084
|
+
- tag: div
|
|
3085
|
+
props:
|
|
3086
|
+
class: "dg-alert__body"
|
|
3087
|
+
children:
|
|
3088
|
+
- tag: h3
|
|
3089
|
+
props:
|
|
3090
|
+
class: "dg-alert__title"
|
|
3091
|
+
children:
|
|
3092
|
+
- "Operation completed"
|
|
3093
|
+
- tag: div
|
|
3094
|
+
props:
|
|
3095
|
+
class: "dg-alert__dismiss"
|
|
3096
|
+
children:
|
|
3097
|
+
- tag: button
|
|
3098
|
+
props:
|
|
3099
|
+
type: "button"
|
|
3100
|
+
aria-label: "Dismiss"
|
|
3101
|
+
children:
|
|
3102
|
+
- tag: svg
|
|
3103
|
+
props:
|
|
3104
|
+
viewBox: "0 0 20 20"
|
|
3105
|
+
fill: "currentColor"
|
|
3106
|
+
aria-hidden: "true"
|
|
3107
|
+
children:
|
|
3108
|
+
- tag: path
|
|
3109
|
+
props:
|
|
3110
|
+
d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
|
|
3111
|
+
|
|
3112
|
+
combobox:
|
|
3113
|
+
metadata:
|
|
3114
|
+
title: "Comboboxes"
|
|
3115
|
+
description: "Autocomplete combobox inputs with filterable dropdown options"
|
|
3116
|
+
category: "application-ui"
|
|
3117
|
+
section: "Forms"
|
|
3118
|
+
subsection: "Comboboxes"
|
|
3119
|
+
tags: [combobox, autocomplete, select, search, dropdown, form]
|
|
3120
|
+
css:
|
|
3121
|
+
".dg-combobox":
|
|
3122
|
+
apply: "relative block"
|
|
3123
|
+
".dg-combobox__label":
|
|
3124
|
+
apply: "block text-sm font-medium text-white"
|
|
3125
|
+
properties:
|
|
3126
|
+
line-height: "1.5rem"
|
|
3127
|
+
".dg-combobox__wrapper":
|
|
3128
|
+
apply: "relative mt-2 block"
|
|
3129
|
+
".dg-combobox__input":
|
|
3130
|
+
apply: "block w-full rounded-md bg-white/5 py-1.5 pr-12 pl-3 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-dg-slate sm:text-sm"
|
|
3131
|
+
properties:
|
|
3132
|
+
line-height: "1.5rem"
|
|
3133
|
+
".dg-combobox__input:focus":
|
|
3134
|
+
apply: "outline-2 -outline-offset-2 outline-dg-primary"
|
|
3135
|
+
".dg-combobox__toggle":
|
|
3136
|
+
apply: "absolute inset-y-0 right-0 flex items-center rounded-r-md px-2"
|
|
3137
|
+
".dg-combobox__toggle-icon":
|
|
3138
|
+
apply: "size-5 text-dg-muted"
|
|
3139
|
+
".dg-combobox__options":
|
|
3140
|
+
apply: "max-h-60 overflow-auto rounded-md bg-dg-charcoal py-1 text-base shadow-lg sm:text-sm"
|
|
3141
|
+
properties:
|
|
3142
|
+
outline: "1px solid rgba(255, 255, 255, 0.1)"
|
|
3143
|
+
outline-offset: "-1px"
|
|
3144
|
+
".dg-combobox__option":
|
|
3145
|
+
apply: "block truncate px-3 py-2 text-dg-platinum select-none cursor-pointer"
|
|
3146
|
+
".dg-combobox__option:hover":
|
|
3147
|
+
apply: "bg-dg-primary text-white"
|
|
3148
|
+
".dg-combobox__option.selected":
|
|
3149
|
+
apply: "bg-dg-primary text-white"
|
|
3150
|
+
".dg-combobox__option-text":
|
|
3151
|
+
apply: "block truncate"
|
|
3152
|
+
".dg-combobox__check":
|
|
3153
|
+
apply: "absolute inset-y-0 right-0 flex items-center pr-4 text-white"
|
|
3154
|
+
".dg-combobox__check-icon":
|
|
3155
|
+
apply: "size-5"
|
|
3156
|
+
variants:
|
|
3157
|
+
with-check:
|
|
3158
|
+
css:
|
|
3159
|
+
".dg-combobox--with-check .dg-combobox__option":
|
|
3160
|
+
apply: "relative pr-9"
|
|
3161
|
+
".dg-combobox--with-check .dg-combobox__option.selected .dg-combobox__check":
|
|
3162
|
+
apply: "flex"
|
|
3163
|
+
with-avatar:
|
|
3164
|
+
css:
|
|
3165
|
+
".dg-combobox--with-avatar .dg-combobox__option":
|
|
3166
|
+
apply: "flex items-center"
|
|
3167
|
+
properties:
|
|
3168
|
+
gap: "0.5rem"
|
|
3169
|
+
".dg-combobox__avatar":
|
|
3170
|
+
apply: "size-6 shrink-0 rounded-full"
|
|
3171
|
+
with-status:
|
|
3172
|
+
css:
|
|
3173
|
+
".dg-combobox--with-status .dg-combobox__option":
|
|
3174
|
+
apply: "flex items-center"
|
|
3175
|
+
properties:
|
|
3176
|
+
gap: "0.5rem"
|
|
3177
|
+
".dg-combobox__status":
|
|
3178
|
+
apply: "inline-block size-2 shrink-0 rounded-full"
|
|
3179
|
+
".dg-combobox__status--online":
|
|
3180
|
+
apply: "bg-dg-success"
|
|
3181
|
+
".dg-combobox__status--offline":
|
|
3182
|
+
apply: "bg-dg-muted"
|
|
3183
|
+
examples:
|
|
3184
|
+
- title: "Simple Combobox"
|
|
3185
|
+
description: "Basic autocomplete combobox with text options"
|
|
3186
|
+
ast:
|
|
3187
|
+
tag: div
|
|
3188
|
+
props:
|
|
3189
|
+
class: "dg-combobox"
|
|
3190
|
+
children:
|
|
3191
|
+
- tag: label
|
|
3192
|
+
props:
|
|
3193
|
+
class: "dg-combobox__label"
|
|
3194
|
+
for: "combobox-simple"
|
|
3195
|
+
children:
|
|
3196
|
+
- "Assigned to"
|
|
3197
|
+
- tag: div
|
|
3198
|
+
props:
|
|
3199
|
+
class: "dg-combobox__wrapper"
|
|
3200
|
+
children:
|
|
3201
|
+
- tag: input
|
|
3202
|
+
props:
|
|
3203
|
+
id: "combobox-simple"
|
|
3204
|
+
type: text
|
|
3205
|
+
class: "dg-combobox__input"
|
|
3206
|
+
- tag: button
|
|
3207
|
+
props:
|
|
3208
|
+
type: button
|
|
3209
|
+
class: "dg-combobox__toggle"
|
|
3210
|
+
children:
|
|
3211
|
+
- tag: svg
|
|
3212
|
+
props:
|
|
3213
|
+
class: "dg-combobox__toggle-icon"
|
|
3214
|
+
viewBox: "0 0 20 20"
|
|
3215
|
+
fill: "currentColor"
|
|
3216
|
+
aria-hidden: "true"
|
|
3217
|
+
children:
|
|
3218
|
+
- tag: path
|
|
3219
|
+
props:
|
|
3220
|
+
fill-rule: "evenodd"
|
|
3221
|
+
clip-rule: "evenodd"
|
|
3222
|
+
d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
|
|
3223
|
+
- tag: ul
|
|
3224
|
+
props:
|
|
3225
|
+
class: "dg-combobox__options"
|
|
3226
|
+
role: "listbox"
|
|
3227
|
+
children:
|
|
3228
|
+
- tag: li
|
|
3229
|
+
props:
|
|
3230
|
+
class: "dg-combobox__option"
|
|
3231
|
+
role: "option"
|
|
3232
|
+
children:
|
|
3233
|
+
- "Leslie Alexander"
|
|
3234
|
+
- tag: li
|
|
3235
|
+
props:
|
|
3236
|
+
class: "dg-combobox__option"
|
|
3237
|
+
role: "option"
|
|
3238
|
+
children:
|
|
3239
|
+
- "Michael Foster"
|
|
3240
|
+
- tag: li
|
|
3241
|
+
props:
|
|
3242
|
+
class: "dg-combobox__option selected"
|
|
3243
|
+
role: "option"
|
|
3244
|
+
children:
|
|
3245
|
+
- "Dries Vincent"
|
|
3246
|
+
- title: "Combobox with Check Indicator"
|
|
3247
|
+
description: "Combobox showing a checkmark on the selected option"
|
|
3248
|
+
ast:
|
|
3249
|
+
tag: div
|
|
3250
|
+
props:
|
|
3251
|
+
class: "dg-combobox dg-combobox--with-check"
|
|
3252
|
+
children:
|
|
3253
|
+
- tag: label
|
|
3254
|
+
props:
|
|
3255
|
+
class: "dg-combobox__label"
|
|
3256
|
+
for: "combobox-check"
|
|
3257
|
+
children:
|
|
3258
|
+
- "Assigned to"
|
|
3259
|
+
- tag: div
|
|
3260
|
+
props:
|
|
3261
|
+
class: "dg-combobox__wrapper"
|
|
3262
|
+
children:
|
|
3263
|
+
- tag: input
|
|
3264
|
+
props:
|
|
3265
|
+
id: "combobox-check"
|
|
3266
|
+
type: text
|
|
3267
|
+
class: "dg-combobox__input"
|
|
3268
|
+
- tag: button
|
|
3269
|
+
props:
|
|
3270
|
+
type: button
|
|
3271
|
+
class: "dg-combobox__toggle"
|
|
3272
|
+
children:
|
|
3273
|
+
- tag: svg
|
|
3274
|
+
props:
|
|
3275
|
+
class: "dg-combobox__toggle-icon"
|
|
3276
|
+
viewBox: "0 0 20 20"
|
|
3277
|
+
fill: "currentColor"
|
|
3278
|
+
aria-hidden: "true"
|
|
3279
|
+
children:
|
|
3280
|
+
- tag: path
|
|
3281
|
+
props:
|
|
3282
|
+
fill-rule: "evenodd"
|
|
3283
|
+
clip-rule: "evenodd"
|
|
3284
|
+
d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
|
|
3285
|
+
- tag: ul
|
|
3286
|
+
props:
|
|
3287
|
+
class: "dg-combobox__options"
|
|
3288
|
+
role: "listbox"
|
|
3289
|
+
children:
|
|
3290
|
+
- tag: li
|
|
3291
|
+
props:
|
|
3292
|
+
class: "dg-combobox__option"
|
|
3293
|
+
role: "option"
|
|
3294
|
+
children:
|
|
3295
|
+
- tag: span
|
|
3296
|
+
props:
|
|
3297
|
+
class: "dg-combobox__option-text"
|
|
3298
|
+
children:
|
|
3299
|
+
- "Leslie Alexander"
|
|
3300
|
+
- tag: li
|
|
3301
|
+
props:
|
|
3302
|
+
class: "dg-combobox__option selected"
|
|
3303
|
+
role: "option"
|
|
3304
|
+
children:
|
|
3305
|
+
- tag: span
|
|
3306
|
+
props:
|
|
3307
|
+
class: "dg-combobox__option-text"
|
|
3308
|
+
children:
|
|
3309
|
+
- "Tom Cook"
|
|
3310
|
+
- tag: span
|
|
3311
|
+
props:
|
|
3312
|
+
class: "dg-combobox__check"
|
|
3313
|
+
children:
|
|
3314
|
+
- tag: svg
|
|
3315
|
+
props:
|
|
3316
|
+
class: "dg-combobox__check-icon"
|
|
3317
|
+
viewBox: "0 0 20 20"
|
|
3318
|
+
fill: "currentColor"
|
|
3319
|
+
aria-hidden: "true"
|
|
3320
|
+
children:
|
|
3321
|
+
- tag: path
|
|
3322
|
+
props:
|
|
3323
|
+
fill-rule: "evenodd"
|
|
3324
|
+
clip-rule: "evenodd"
|
|
3325
|
+
d: "M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
|
|
3326
|
+
- tag: li
|
|
3327
|
+
props:
|
|
3328
|
+
class: "dg-combobox__option"
|
|
3329
|
+
role: "option"
|
|
3330
|
+
children:
|
|
3331
|
+
- tag: span
|
|
3332
|
+
props:
|
|
3333
|
+
class: "dg-combobox__option-text"
|
|
3334
|
+
children:
|
|
3335
|
+
- "Whitney Francis"
|
|
3336
|
+
- title: "Combobox with Avatars"
|
|
3337
|
+
description: "Combobox with user avatars next to each option"
|
|
3338
|
+
ast:
|
|
3339
|
+
tag: div
|
|
3340
|
+
props:
|
|
3341
|
+
class: "dg-combobox dg-combobox--with-avatar"
|
|
3342
|
+
children:
|
|
3343
|
+
- tag: label
|
|
3344
|
+
props:
|
|
3345
|
+
class: "dg-combobox__label"
|
|
3346
|
+
for: "combobox-avatar"
|
|
3347
|
+
children:
|
|
3348
|
+
- "Assigned to"
|
|
3349
|
+
- tag: div
|
|
3350
|
+
props:
|
|
3351
|
+
class: "dg-combobox__wrapper"
|
|
3352
|
+
children:
|
|
3353
|
+
- tag: input
|
|
3354
|
+
props:
|
|
3355
|
+
id: "combobox-avatar"
|
|
3356
|
+
type: text
|
|
3357
|
+
class: "dg-combobox__input"
|
|
3358
|
+
- tag: button
|
|
3359
|
+
props:
|
|
3360
|
+
type: button
|
|
3361
|
+
class: "dg-combobox__toggle"
|
|
3362
|
+
children:
|
|
3363
|
+
- tag: svg
|
|
3364
|
+
props:
|
|
3365
|
+
class: "dg-combobox__toggle-icon"
|
|
3366
|
+
viewBox: "0 0 20 20"
|
|
3367
|
+
fill: "currentColor"
|
|
3368
|
+
aria-hidden: "true"
|
|
3369
|
+
children:
|
|
3370
|
+
- tag: path
|
|
3371
|
+
props:
|
|
3372
|
+
fill-rule: "evenodd"
|
|
3373
|
+
clip-rule: "evenodd"
|
|
3374
|
+
d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
|
|
3375
|
+
- tag: ul
|
|
3376
|
+
props:
|
|
3377
|
+
class: "dg-combobox__options"
|
|
3378
|
+
role: "listbox"
|
|
3379
|
+
children:
|
|
3380
|
+
- tag: li
|
|
3381
|
+
props:
|
|
3382
|
+
class: "dg-combobox__option"
|
|
3383
|
+
role: "option"
|
|
3384
|
+
children:
|
|
3385
|
+
- tag: img
|
|
3386
|
+
props:
|
|
3387
|
+
class: "dg-combobox__avatar"
|
|
3388
|
+
src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
3389
|
+
alt: ""
|
|
3390
|
+
- tag: span
|
|
3391
|
+
props:
|
|
3392
|
+
class: "dg-combobox__option-text"
|
|
3393
|
+
children:
|
|
3394
|
+
- "Leslie Alexander"
|
|
3395
|
+
- tag: li
|
|
3396
|
+
props:
|
|
3397
|
+
class: "dg-combobox__option selected"
|
|
3398
|
+
role: "option"
|
|
3399
|
+
children:
|
|
3400
|
+
- tag: img
|
|
3401
|
+
props:
|
|
3402
|
+
class: "dg-combobox__avatar"
|
|
3403
|
+
src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
3404
|
+
alt: ""
|
|
3405
|
+
- tag: span
|
|
3406
|
+
props:
|
|
3407
|
+
class: "dg-combobox__option-text"
|
|
3408
|
+
children:
|
|
3409
|
+
- "Tom Cook"
|
|
3410
|
+
- tag: li
|
|
3411
|
+
props:
|
|
3412
|
+
class: "dg-combobox__option"
|
|
3413
|
+
role: "option"
|
|
3414
|
+
children:
|
|
3415
|
+
- tag: img
|
|
3416
|
+
props:
|
|
3417
|
+
class: "dg-combobox__avatar"
|
|
3418
|
+
src: "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
3419
|
+
alt: ""
|
|
3420
|
+
- tag: span
|
|
3421
|
+
props:
|
|
3422
|
+
class: "dg-combobox__option-text"
|
|
3423
|
+
children:
|
|
3424
|
+
- "Whitney Francis"
|
|
3425
|
+
- title: "Combobox with Status Indicators"
|
|
3426
|
+
description: "Combobox with online/offline status indicators"
|
|
3427
|
+
ast:
|
|
3428
|
+
tag: div
|
|
3429
|
+
props:
|
|
3430
|
+
class: "dg-combobox dg-combobox--with-status"
|
|
3431
|
+
children:
|
|
3432
|
+
- tag: label
|
|
3433
|
+
props:
|
|
3434
|
+
class: "dg-combobox__label"
|
|
3435
|
+
for: "combobox-status"
|
|
3436
|
+
children:
|
|
3437
|
+
- "Assigned to"
|
|
3438
|
+
- tag: div
|
|
3439
|
+
props:
|
|
3440
|
+
class: "dg-combobox__wrapper"
|
|
3441
|
+
children:
|
|
3442
|
+
- tag: input
|
|
3443
|
+
props:
|
|
3444
|
+
id: "combobox-status"
|
|
3445
|
+
type: text
|
|
3446
|
+
class: "dg-combobox__input"
|
|
3447
|
+
- tag: button
|
|
3448
|
+
props:
|
|
3449
|
+
type: button
|
|
3450
|
+
class: "dg-combobox__toggle"
|
|
3451
|
+
children:
|
|
3452
|
+
- tag: svg
|
|
3453
|
+
props:
|
|
3454
|
+
class: "dg-combobox__toggle-icon"
|
|
3455
|
+
viewBox: "0 0 20 20"
|
|
3456
|
+
fill: "currentColor"
|
|
3457
|
+
aria-hidden: "true"
|
|
3458
|
+
children:
|
|
3459
|
+
- tag: path
|
|
3460
|
+
props:
|
|
3461
|
+
fill-rule: "evenodd"
|
|
3462
|
+
clip-rule: "evenodd"
|
|
3463
|
+
d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
|
|
3464
|
+
- tag: ul
|
|
3465
|
+
props:
|
|
3466
|
+
class: "dg-combobox__options"
|
|
3467
|
+
role: "listbox"
|
|
3468
|
+
children:
|
|
3469
|
+
- tag: li
|
|
3470
|
+
props:
|
|
3471
|
+
class: "dg-combobox__option"
|
|
3472
|
+
role: "option"
|
|
3473
|
+
children:
|
|
3474
|
+
- tag: span
|
|
3475
|
+
props:
|
|
3476
|
+
class: "dg-combobox__status dg-combobox__status--online"
|
|
3477
|
+
- tag: span
|
|
3478
|
+
props:
|
|
3479
|
+
class: "dg-combobox__option-text"
|
|
3480
|
+
children:
|
|
3481
|
+
- "Leslie Alexander"
|
|
3482
|
+
- tag: li
|
|
3483
|
+
props:
|
|
3484
|
+
class: "dg-combobox__option"
|
|
3485
|
+
role: "option"
|
|
3486
|
+
children:
|
|
3487
|
+
- tag: span
|
|
3488
|
+
props:
|
|
3489
|
+
class: "dg-combobox__status dg-combobox__status--offline"
|
|
3490
|
+
- tag: span
|
|
3491
|
+
props:
|
|
3492
|
+
class: "dg-combobox__option-text"
|
|
3493
|
+
children:
|
|
3494
|
+
- "Michael Foster"
|
|
3495
|
+
- tag: li
|
|
3496
|
+
props:
|
|
3497
|
+
class: "dg-combobox__option selected"
|
|
3498
|
+
role: "option"
|
|
3499
|
+
children:
|
|
3500
|
+
- tag: span
|
|
3501
|
+
props:
|
|
3502
|
+
class: "dg-combobox__status dg-combobox__status--online"
|
|
3503
|
+
- tag: span
|
|
3504
|
+
props:
|
|
3505
|
+
class: "dg-combobox__option-text"
|
|
3506
|
+
children:
|
|
3507
|
+
- "Dries Vincent"
|