tide-design-system 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (106) hide show
  1. package/dist/assets/style.css +1 -0
  2. package/dist/css/animation.css +1 -1
  3. package/dist/css/dynamic-buttons.css +22 -22
  4. package/dist/css/dynamic-utilities.css +21 -21
  5. package/dist/css/main.css +0 -4
  6. package/dist/css/page-layout.css +30 -46
  7. package/dist/css/realm/aero.css +33 -33
  8. package/dist/css/realm/atv.css +34 -34
  9. package/dist/css/realm/boatmart.css +33 -33
  10. package/dist/css/realm/cycle.css +33 -33
  11. package/dist/css/realm/equip.css +33 -33
  12. package/dist/css/realm/pwc.css +33 -33
  13. package/dist/css/realm/rv.css +33 -33
  14. package/dist/css/realm/snow.css +32 -32
  15. package/dist/css/realm/truck.css +33 -33
  16. package/dist/css/reset.css +9 -9
  17. package/dist/css/sb-rv.css +1 -0
  18. package/dist/css/storybook.css +2 -1
  19. package/dist/css/utilities.css +103 -101
  20. package/dist/css/variables.css +92 -92
  21. package/dist/tide-design-system.js +3 -46
  22. package/dist/tide-design-system2.js +5 -0
  23. package/dist/tide-design-system3.js +5 -0
  24. package/dist/tide-design-system4.js +5 -0
  25. package/dist/tide-design-system5.js +5 -0
  26. package/dist/tide-design-system6.js +5 -0
  27. package/dist/tide-design-system7.js +5 -0
  28. package/dist/tide-design-system8.js +5 -0
  29. package/dist/types/Styles.ts +29 -31
  30. package/dist/utilities/storybook.ts +31 -7
  31. package/package.json +3 -2
  32. package/dist/IconAccountBalance-0c552905.js +0 -10
  33. package/dist/IconAdd-50766b43.js +0 -10
  34. package/dist/IconAi-3f1ad2fe.js +0 -22
  35. package/dist/IconAlignSpace-804660fd.js +0 -10
  36. package/dist/IconApplePay-75b9850c.js +0 -10
  37. package/dist/IconArrowBack-3bde832a.js +0 -10
  38. package/dist/IconArrowForward-0582323f.js +0 -10
  39. package/dist/IconArrowRight-c37875ce.js +0 -10
  40. package/dist/IconAssignment-b9549d2c.js +0 -10
  41. package/dist/IconAwardStar-a1b0a840.js +0 -10
  42. package/dist/IconBookmark-26e82ff4.js +0 -10
  43. package/dist/IconCalendarMonth-55806114.js +0 -10
  44. package/dist/IconCall-dfc29049.js +0 -10
  45. package/dist/IconCheck-1d4a84f9.js +0 -10
  46. package/dist/IconChevronLeft-8a9307a6.js +0 -10
  47. package/dist/IconChevronRight-46940da9.js +0 -10
  48. package/dist/IconClear-1dc6a4df.js +0 -10
  49. package/dist/IconClose-93976f13.js +0 -10
  50. package/dist/IconCycle-b8bc8146.js +0 -10
  51. package/dist/IconDelete-2970a09b.js +0 -10
  52. package/dist/IconDiamond-ba4bae95.js +0 -10
  53. package/dist/IconEdit-3612d58e.js +0 -10
  54. package/dist/IconError-643df67d.js +0 -10
  55. package/dist/IconExpandContent-71109869.js +0 -10
  56. package/dist/IconExpandLess-9c6c12b6.js +0 -10
  57. package/dist/IconExpandMore-fcd92910.js +0 -10
  58. package/dist/IconFacebook-b0d62bbb.js +0 -10
  59. package/dist/IconFavorite-d59dfc0b.js +0 -10
  60. package/dist/IconFavoriteFilled-fd2c5862.js +0 -10
  61. package/dist/IconFormatBold-6f1aa639.js +0 -10
  62. package/dist/IconFormatItalic-a82848b2.js +0 -10
  63. package/dist/IconFormatListBulleted-4f4a0a99.js +0 -10
  64. package/dist/IconForum-194dedbd.js +0 -10
  65. package/dist/IconGoogle-46e6c4f1.js +0 -27
  66. package/dist/IconGooglePay-090b70a8.js +0 -10
  67. package/dist/IconGrid-0f7c079c.js +0 -10
  68. package/dist/IconHelp-e91f36a5.js +0 -10
  69. package/dist/IconInfo-df1f06a5.js +0 -10
  70. package/dist/IconInsertText-e371c1cd.js +0 -10
  71. package/dist/IconInstagram-af4ea628.js +0 -10
  72. package/dist/IconIosShare-7253c1df.js +0 -10
  73. package/dist/IconLayout-225d9fb6.js +0 -10
  74. package/dist/IconLinkedIn-ab7e007c.js +0 -10
  75. package/dist/IconLocalShipping-2c8ac96c.js +0 -10
  76. package/dist/IconLock-b4e1bd5d.js +0 -10
  77. package/dist/IconMail-50eca4b4.js +0 -10
  78. package/dist/IconMenu-7789a1f9.js +0 -10
  79. package/dist/IconMoreHoriz-35960212.js +0 -10
  80. package/dist/IconNotifications-a6690c77.js +0 -10
  81. package/dist/IconOpenInNew-8b812d7f.js +0 -10
  82. package/dist/IconPalette-18b6e766.js +0 -10
  83. package/dist/IconPaypal-75ff8ed5.js +0 -10
  84. package/dist/IconPerson-3c8a4c27.js +0 -10
  85. package/dist/IconPhotoCamera-0fbb9344.js +0 -10
  86. package/dist/IconPinterest-28ae7c92.js +0 -10
  87. package/dist/IconPlayArrow-6d779a71.js +0 -10
  88. package/dist/IconRemove-1f655305.js +0 -10
  89. package/dist/IconRoundedCorners-1f9eba28.js +0 -10
  90. package/dist/IconSearch-c6843cf3.js +0 -10
  91. package/dist/IconSell-c7818ac8.js +0 -10
  92. package/dist/IconShare-b81bc4cd.js +0 -10
  93. package/dist/IconShoppingCart-b6cc2022.js +0 -10
  94. package/dist/IconSms-dc4c1454.js +0 -10
  95. package/dist/IconStar-c4305bd6.js +0 -10
  96. package/dist/IconSwapVert-00e66af6.js +0 -10
  97. package/dist/IconThreeDRotation-b19a9312.js +0 -25
  98. package/dist/IconTune-dee47734.js +0 -10
  99. package/dist/IconTwitter-2ab4e06b.js +0 -10
  100. package/dist/IconVideocam-0d0142aa.js +0 -10
  101. package/dist/IconViewInAr-7cd92579.js +0 -10
  102. package/dist/IconVisibility-84655778.js +0 -10
  103. package/dist/IconWarning-cab4938a.js +0 -10
  104. package/dist/IconYoutube-ab7e33d3.js +0 -10
  105. package/dist/index-32686488.js +0 -2106
  106. package/dist/style.css +0 -1
@@ -1,118 +1,118 @@
1
1
  /*.CSS Variables */
2
2
  :root {
3
3
  /* Font Size */
4
- --font-10: 0.625rem; /* 10px */
5
- --font-12: 0.75rem; /* 12px */
6
- --font-14: 0.875rem; /* 14px */
7
- --font-16: 1rem; /* 16px */
8
- --font-20: 1.25rem; /* 20px */
9
- --font-24: 1.5rem; /* 24px */
10
- --font-28: 1.75rem; /* 28px */
11
- --font-32: 2rem; /* 32px */
4
+ --tide-font-10: 0.625rem; /* 10px */
5
+ --tide-font-12: 0.75rem; /* 12px */
6
+ --tide-font-14: 0.875rem; /* 14px */
7
+ --tide-font-16: 1rem; /* 16px */
8
+ --tide-font-20: 1.25rem; /* 20px */
9
+ --tide-font-24: 1.5rem; /* 24px */
10
+ --tide-font-28: 1.75rem; /* 28px */
11
+ --tide-font-32: 2rem; /* 32px */
12
12
 
13
13
  /* Font Weight */
14
- --font-400: 400;
15
- --font-500: 500;
16
- --font-600: 600;
17
- --font-700: 700;
14
+ --tide-font-400: 400;
15
+ --tide-font-500: 500;
16
+ --tide-font-600: 600;
17
+ --tide-font-700: 700;
18
18
 
19
19
  /* Animation */
20
- --animate: 300ms ease-in-out;
20
+ --tide-animate: 300ms ease-in-out;
21
21
 
22
22
  /* Spacing */
23
- --spacing-0: 0rem;
24
- --spacing-1\/4: 0.25rem;
25
- --spacing-1\/2: 0.5rem;
26
- --spacing-1: 1rem;
27
- --spacing-2: 2rem;
28
- --spacing-4: 4rem;
23
+ --tide-spacing-0: 0rem;
24
+ --tide-spacing-1\/4: 0.25rem;
25
+ --tide-spacing-1\/2: 0.5rem;
26
+ --tide-spacing-1: 1rem;
27
+ --tide-spacing-2: 2rem;
28
+ --tide-spacing-4: 4rem;
29
29
 
30
30
  /* Border */
31
- --border-width-1: 1px;
32
- --border-width-2: 2px;
31
+ --tide-border-width-1: 1px;
32
+ --tide-border-width-2: 2px;
33
33
 
34
- --border-1: var(--border-width-1) solid var(--black);
35
- --border-2: var(--border-width-2) solid var(--black);
34
+ --tide-border-1: var(--tide-border-width-1) solid var(--tide-black);
35
+ --tide-border-2: var(--tide-border-width-2) solid var(--tide-black);
36
36
 
37
37
  /* Border Radius */
38
- --radius-1\/4: 4px;
39
- --radius-1\/2: 8px;
40
- --radius-1: 16px;
41
- --radius-full: 99999px;
38
+ --tide-radius-1\/4: 4px;
39
+ --tide-radius-1\/2: 8px;
40
+ --tide-radius-1: 16px;
41
+ --tide-radius-full: 99999px;
42
42
 
43
- --black: var(--gray-900);
44
- --white: var(--gray-100);
43
+ --tide-black: var(--tide-gray-900);
44
+ --tide-white: var(--tide-gray-100);
45
45
 
46
46
  /* Opacity */
47
- --disabled: 0.333;
47
+ --tide-disabled: 0.333;
48
48
 
49
49
  /* Shadow */
50
- --shadow-bottom: 0px 2px 8px 2px rgba(0, 0, 0, 0.07);
51
- --shadow-top: 0px -2px 8px 2px rgba(0, 0, 0, 0.07);
50
+ --tide-shadow-bottom: 0px 2px 8px 2px rgba(0, 0, 0, 0.07);
51
+ --tide-shadow-top: 0px -2px 8px 2px rgba(0, 0, 0, 0.07);
52
52
 
53
53
  /* Transparency */
54
- --transparent-100: rgba(255, 255, 255, 0.9);
55
- --transparent-200: rgba(255, 255, 255, 0.75);
56
- --transparent-300: rgba(0, 0, 0, 0.1);
57
- --transparent-400: rgba(0, 0, 0, 0.5);
54
+ --tide-transparent-100: rgba(255, 255, 255, 0.9);
55
+ --tide-transparent-200: rgba(255, 255, 255, 0.75);
56
+ --tide-transparent-300: rgba(0, 0, 0, 0.1);
57
+ --tide-transparent-400: rgba(0, 0, 0, 0.5);
58
58
 
59
59
  /* Global tonal palette */
60
- --blue-100: #D1E0EB;
61
- --blue-200: #A4C1D7;
62
- --blue-300: #76A3C4;
63
- --blue-400: #4984B0;
64
-
65
- --gray-100: #FFFFFF;
66
- --gray-200: #F5F5F5;
67
- --gray-300: #E4E4E4;
68
- --gray-400: #C9CACB;
69
- --gray-500: #AEAFB2;
70
- --gray-600: #939598;
71
- --gray-700: #6E7072;
72
- --gray-800: #494A4C;
73
- --gray-900: #252526;
74
- --gray-1000: #000000;
75
-
76
- --green-100: #E6EFCF;
77
- --green-200: #CDE09E;
78
- --green-300: #B4D06E;
79
- --green-400: #9BC13D;
80
-
81
- --red-100: #EFCFCF;
82
- --red-200: #E09E9E;
83
- --red-300: #D06E6E;
84
- --red-400: #C13D3D;
85
- --red-500: #912E2E;
86
-
87
- --yellow-100: #FEF2CC;
88
- --yellow-200: #FCE499;
89
- --yellow-300: #FBD766;
90
- --yellow-400: #FACA33;
60
+ --tide-blue-100: #D1E0EB;
61
+ --tide-blue-200: #A4C1D7;
62
+ --tide-blue-300: #76A3C4;
63
+ --tide-blue-400: #4984B0;
64
+
65
+ --tide-gray-100: #FFFFFF;
66
+ --tide-gray-200: #F5F5F5;
67
+ --tide-gray-300: #E4E4E4;
68
+ --tide-gray-400: #C9CACB;
69
+ --tide-gray-500: #AEAFB2;
70
+ --tide-gray-600: #939598;
71
+ --tide-gray-700: #6E7072;
72
+ --tide-gray-800: #494A4C;
73
+ --tide-gray-900: #252526;
74
+ --tide-gray-1000: #000000;
75
+
76
+ --tide-green-100: #E6EFCF;
77
+ --tide-green-200: #CDE09E;
78
+ --tide-green-300: #B4D06E;
79
+ --tide-green-400: #9BC13D;
80
+
81
+ --tide-red-100: #EFCFCF;
82
+ --tide-red-200: #E09E9E;
83
+ --tide-red-300: #D06E6E;
84
+ --tide-red-400: #C13D3D;
85
+ --tide-red-500: #912E2E;
86
+
87
+ --tide-yellow-100: #FEF2CC;
88
+ --tide-yellow-200: #FCE499;
89
+ --tide-yellow-300: #FBD766;
90
+ --tide-yellow-400: #FACA33;
91
91
 
92
92
  /* Global color roles */
93
- --error-primary: var(--red-400);
94
- --error-primary-border: var(--red-300);
95
- --error-surface: var(--red-100);
96
-
97
- --error-border: var(--red-400);
98
- --error-border-low: var(--red-200);
99
- --error-border-high: var(--red-500);
100
-
101
- --error-on-surface: var(--red-400);
102
- --error-on-surface-variant: var(--red-500 );
103
-
104
- --info-primary: var(--blue-400);
105
- --info-primary-border: var(--blue-300);
106
- --info-surface: var(--blue-100);
107
- --info-border: var(--blue-200);
108
-
109
- --success-primary: var(--green-400);
110
- --success-primary-border: var(--green-300);
111
- --success-surface: var(--green-100);
112
- --success-border: var(--green-200);
113
-
114
- --warning-primary: var(--yellow-400);
115
- --warning-primary-border: var(--yellow-300);
116
- --warning-surface: var(--yellow-100);
117
- --warning-border: var(--yellow-200);
93
+ --tide-error-primary: var(--tide-red-400);
94
+ --tide-error-primary-border: var(--tide-red-300);
95
+ --tide-error-surface: var(--tide-red-100);
96
+
97
+ --tide-error-border: var(--tide-red-400);
98
+ --tide-error-border-low: var(--tide-red-200);
99
+ --tide-error-border-high: var(--tide-red-500);
100
+
101
+ --tide-error-on-surface: var(--tide-red-400);
102
+ --tide-error-on-surface-variant: var(--tide-red-500 );
103
+
104
+ --tide-info-primary: var(--tide-blue-400);
105
+ --tide-info-primary-border: var(--tide-blue-300);
106
+ --tide-info-surface: var(--tide-blue-100);
107
+ --tide-info-border: var(--tide-blue-200);
108
+
109
+ --tide-success-primary: var(--tide-green-400);
110
+ --tide-success-primary-border: var(--tide-green-300);
111
+ --tide-success-surface: var(--tide-green-100);
112
+ --tide-success-border: var(--tide-green-200);
113
+
114
+ --tide-warning-primary: var(--tide-yellow-400);
115
+ --tide-warning-primary-border: var(--tide-yellow-300);
116
+ --tide-warning-surface: var(--tide-yellow-100);
117
+ --tide-warning-border: var(--tide-yellow-200);
118
118
  }
@@ -1,48 +1,5 @@
1
- import { A as s, B as T, a as d, b as t, C as n, E as o, c as r, I, P as E, R as u, S as B, T as g, d as C, e as p, f as A, g as c, h as m, i as R, j as S, k as l, l as M, m as L, n as P, o as D, p as G, q as N, r as _, s as h, t as x, u as b, v as k, w as v, x as O, y as f, z as F, D as U, F as j, G as q, H as w, J as y, K as z, L as H, M as J, N as K } from "./index-32686488.js";
2
- import "vue";
1
+ const a = "";
3
2
  export {
4
- s as ALERT,
5
- T as BADGE,
6
- d as BADGE_PREMIUM,
7
- t as BADGE_TRUSTED,
8
- n as CSS,
9
- o as ELEMENT,
10
- r as ELEMENT_TEXT_AS_ICON,
11
- I as ICON,
12
- E as PRIORITY,
13
- u as REALM,
14
- B as SIZE,
15
- g as TARGET,
16
- C as TideAccordionItem,
17
- p as TideAlert,
18
- A as TideBadge,
19
- c as TideBadgeCounter,
20
- m as TideBadgeMisc,
21
- R as TideBadgePremium,
22
- S as TideBadgeTrustedPartner,
23
- l as TideBreadCrumbs,
24
- M as TideButton,
25
- L as TideButtonIcon,
26
- P as TideButtonPagination,
27
- D as TideCard,
28
- G as TideCarousel,
29
- N as TideChipAction,
30
- _ as TideChipFilter,
31
- h as TideChipInput,
32
- x as TideColumns,
33
- b as TideDivider,
34
- k as TideIcon,
35
- v as TideImage,
36
- O as TideIndicator,
37
- f as TideInputRadio,
38
- F as TideInputSelect,
39
- U as TideInputText,
40
- j as TideInputTextarea,
41
- q as TideLink,
42
- w as TideModal,
43
- y as TidePagination,
44
- z as TideSeoLinks,
45
- H as TideSvgIcon,
46
- J as TideTabs,
47
- K as TideToggle
3
+ a as default
48
4
  };
5
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjsifQ==
@@ -0,0 +1,5 @@
1
+ const t = "";
2
+ export {
3
+ t as default
4
+ };
5
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtMi5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=
@@ -0,0 +1,5 @@
1
+ const c = "";
2
+ export {
3
+ c as default
4
+ };
5
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtMy5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=
@@ -0,0 +1,5 @@
1
+ const e = "";
2
+ export {
3
+ e as default
4
+ };
5
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtNC5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=
@@ -0,0 +1,5 @@
1
+ const t = "";
2
+ export {
3
+ t as default
4
+ };
5
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtNS5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=
@@ -0,0 +1,5 @@
1
+ const t = "";
2
+ export {
3
+ t as default
4
+ };
5
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtNi5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=
@@ -0,0 +1,5 @@
1
+ const o = "";
2
+ export {
3
+ o as default
4
+ };
5
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtNy5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=
@@ -0,0 +1,5 @@
1
+ const t = "";
2
+ export {
3
+ t as default
4
+ };
5
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtOC5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=
@@ -36,6 +36,10 @@ export const CSS = {
36
36
  },
37
37
  },
38
38
  BORDER: {
39
+ BOTTOM: {
40
+ ONE: 'tide-border-bottom-1',
41
+ TWO: 'tide-border-bottom-2',
42
+ },
39
43
  COLOR: {
40
44
  DEFAULT: 'tide-border',
41
45
  FLOATING: 'tide-border-floating',
@@ -43,33 +47,27 @@ export const CSS = {
43
47
  LOW: 'tide-border-low',
44
48
  PRIMARY: 'tide-border-primary',
45
49
  },
50
+ FULL: {
51
+ ONE: 'tide-border-1',
52
+ TWO: 'tide-border-2',
53
+ },
54
+ LEFT: {
55
+ ONE: 'tide-border-left-1',
56
+ TWO: 'tide-border-left-2',
57
+ },
46
58
  RADIUS: {
47
59
  FULL: 'tide-radius-full',
48
60
  HALF: 'tide-radius-1/2',
49
61
  ONE: 'tide-radius-1',
50
62
  QUARTER: 'tide-radius-1/4',
51
63
  },
52
- SIDE: {
53
- BOTTOM: {
54
- ONE: 'tide-border-bottom-1',
55
- TWO: 'tide-border-bottom-2',
56
- },
57
- FULL: {
58
- ONE: 'tide-border-1',
59
- TWO: 'tide-border-2',
60
- },
61
- LEFT: {
62
- ONE: 'tide-border-left-1',
63
- TWO: 'tide-border-left-2',
64
- },
65
- RIGHT: {
66
- ONE: 'tide-border-right-1',
67
- TWO: 'tide-border-right-2',
68
- },
69
- TOP: {
70
- ONE: 'tide-border-top-1',
71
- TWO: 'tide-border-top-2',
72
- },
64
+ RIGHT: {
65
+ ONE: 'tide-border-right-1',
66
+ TWO: 'tide-border-right-2',
67
+ },
68
+ TOP: {
69
+ ONE: 'tide-border-top-1',
70
+ TWO: 'tide-border-top-2',
73
71
  },
74
72
  },
75
73
  BOX_SIZING: {
@@ -413,16 +411,16 @@ export const cssSortOrder = [
413
411
  CSS.MARGIN.LEFT.TWO,
414
412
  CSS.MARGIN.LEFT.FOUR,
415
413
  CSS.MARGIN.LEFT.AUTO,
416
- CSS.BORDER.SIDE.FULL.ONE,
417
- CSS.BORDER.SIDE.FULL.TWO,
418
- CSS.BORDER.SIDE.TOP.ONE,
419
- CSS.BORDER.SIDE.TOP.TWO,
420
- CSS.BORDER.SIDE.RIGHT.ONE,
421
- CSS.BORDER.SIDE.RIGHT.TWO,
422
- CSS.BORDER.SIDE.BOTTOM.ONE,
423
- CSS.BORDER.SIDE.BOTTOM.TWO,
424
- CSS.BORDER.SIDE.LEFT.ONE,
425
- CSS.BORDER.SIDE.LEFT.TWO,
414
+ CSS.BORDER.FULL.ONE,
415
+ CSS.BORDER.FULL.TWO,
416
+ CSS.BORDER.TOP.ONE,
417
+ CSS.BORDER.TOP.TWO,
418
+ CSS.BORDER.RIGHT.ONE,
419
+ CSS.BORDER.RIGHT.TWO,
420
+ CSS.BORDER.BOTTOM.ONE,
421
+ CSS.BORDER.BOTTOM.TWO,
422
+ CSS.BORDER.LEFT.ONE,
423
+ CSS.BORDER.LEFT.TWO,
426
424
  CSS.BORDER.RADIUS.ONE,
427
425
  CSS.BORDER.RADIUS.HALF,
428
426
  CSS.BORDER.RADIUS.QUARTER,
@@ -43,12 +43,23 @@ export const argTypeDimension = {
43
43
  },
44
44
  };
45
45
 
46
+ export const change = {
47
+ control: 'text',
48
+ description: 'JS code or function to execute on change event',
49
+ isEmit: true,
50
+ name: 'change',
51
+ table: {
52
+ defaultValue: { summary: 'None' },
53
+ type: { summary: '(event: Event) => void' },
54
+ },
55
+ };
56
+
46
57
  export const click = {
47
58
  control: 'text',
48
- description: 'JS function to execute on click',
59
+ description: 'JS code or function to execute on click event',
49
60
  table: {
50
61
  defaultValue: { summary: 'None' },
51
- type: { summary: 'function' },
62
+ type: { summary: '(event: Event) => void' },
52
63
  },
53
64
  };
54
65
 
@@ -61,6 +72,12 @@ export const dataTrack = {
61
72
  },
62
73
  };
63
74
 
75
+ export const disabledArgType = {
76
+ table: {
77
+ disable: true,
78
+ },
79
+ };
80
+
64
81
  export const doSomething = () => {
65
82
  alert('Did something.');
66
83
  };
@@ -139,8 +156,9 @@ export const formatSnippet = (code: string, context: StoryContext) => {
139
156
  const isCustom = argType.isCustom;
140
157
  const isDynamic = argType.isDynamic || isConstant || isConstants || typeof value === 'boolean';
141
158
  const isEmpty = !isDynamic && value === '';
142
- const isSlot = key === 'default';
143
159
  const isExcluded = value === undefined || (Array.isArray(value) && !value.length);
160
+ const isEmit = argType.isEmit;
161
+ const isSlot = key === 'default';
144
162
 
145
163
  if (argType.isCss) {
146
164
  classNames.push(value);
@@ -170,10 +188,6 @@ export const formatSnippet = (code: string, context: StoryContext) => {
170
188
  value = `[${constantSlots.join(', ')}]`;
171
189
  }
172
190
 
173
- if (isConditionMet && !isClick && !isCustom && !isEmpty && !isExcluded && !isSlot) {
174
- return `${isDynamic ? ':' : ''}${formatKebabCase(key)}="${value}"`;
175
- }
176
-
177
191
  if (isCustom) {
178
192
  return `:${formatKebabCase(key)}="${key}"`;
179
193
  }
@@ -185,6 +199,16 @@ export const formatSnippet = (code: string, context: StoryContext) => {
185
199
  ) {
186
200
  return `@click="${value}"`;
187
201
  }
202
+
203
+ if (isEmit) {
204
+ if (value) {
205
+ return `@change="${value}"`;
206
+ }
207
+ }
208
+
209
+ if (isConditionMet && !isClick && !isCustom && !isEmpty && !isExcluded && !isSlot) {
210
+ return `${isDynamic ? ':' : ''}${formatKebabCase(key)}="${value}"`;
211
+ }
188
212
  });
189
213
 
190
214
  classNames = classNames.filter((className) => !!className);
package/package.json CHANGED
@@ -49,15 +49,16 @@
49
49
  "scripts": {
50
50
  "build": "run-p type-check build-only",
51
51
  "build-only": "vite build && cp -r src/assets/css/ dist/css/ && cp -r src/types/ dist/types/ && cp -r src/utilities/ dist/utilities/",
52
- "build-storybook": "storybook build",
52
+ "build-storybook": "storybook build && cp -r src/assets/css/realm/ storybook-static/public/",
53
53
  "coverage": "vitest run --coverage",
54
54
  "lint": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore",
55
55
  "lint:fix": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore --fix",
56
+ "preview": "npm run build-storybook && npx http-server -a localhost storybook-static/",
56
57
  "sb": "npm run storybook",
57
58
  "storybook": "storybook dev -p 6006",
58
59
  "test": "vitest run",
59
60
  "type-check": "vue-tsc --noEmit"
60
61
  },
61
62
  "type": "module",
62
- "version": "2.0.1"
63
+ "version": "2.0.2"
63
64
  }
@@ -1,10 +0,0 @@
1
- import { openBlock as c, createElementBlock as e } from "vue";
2
- import { _ as o } from "./index-32686488.js";
3
- const t = {}, n = { d: "M5.5 17v-7h2v7h-2Zm6 0v-7h2v7h-2Zm-9 4v-2h20v2h-20Zm15-4v-7h2v7h-2Zm-15-9V6l10-5 10 5v2h-20Zm4.45-2h11.1L12.5 3.25 6.95 6Z" };
4
- function h(r, m) {
5
- return c(), e("path", n);
6
- }
7
- const s = /* @__PURE__ */ o(t, [["render", h]]);
8
- export {
9
- s as default
10
- };
@@ -1,10 +0,0 @@
1
- import { openBlock as e, createElementBlock as o } from "vue";
2
- import { _ as t } from "./index-32686488.js";
3
- const c = {}, r = { d: "M11 13H5v-2h6V5h2v6h6v2h-6v6h-2v-6Z" };
4
- function n(_, s) {
5
- return e(), o("path", r);
6
- }
7
- const d = /* @__PURE__ */ t(c, [["render", n]]);
8
- export {
9
- d as default
10
- };
@@ -1,22 +0,0 @@
1
- import { openBlock as c, createElementBlock as l, Fragment as n, createElementVNode as e } from "vue";
2
- import { _ as o } from "./index-32686488.js";
3
- const t = {}, r = /* @__PURE__ */ e("path", { d: "M18.111 18V6.389H16V18h2.111Z" }, null, -1), d = /* @__PURE__ */ e("path", {
4
- "clip-rule": "evenodd",
5
- d: "M14.485 18.111 11.325 6.5h-3.54L4.626 18.111H6.5L7.111 15H12l.5 3.111h1.985Zm-3.16-4.889h-3.54L9 8.5h1l1.326 4.722Z",
6
- "fill-rule": "evenodd"
7
- }, null, -1), a = /* @__PURE__ */ e("path", {
8
- "clip-rule": "evenodd",
9
- d: "M8.038 1h7.924c.983 0 1.795 0 2.457.054.687.056 1.318.177 1.912.479a4.889 4.889 0 0 1 2.136 2.136c.302.594.423 1.225.479 1.912C23 6.243 23 7.055 23 8.038v7.924c0 .983 0 1.795-.054 2.457-.056.687-.177 1.318-.479 1.912a4.889 4.889 0 0 1-2.136 2.136c-.594.302-1.225.423-1.912.479-.662.054-1.474.054-2.457.054H8.038c-.983 0-1.795 0-2.457-.054-.687-.056-1.318-.177-1.912-.479a4.889 4.889 0 0 1-2.136-2.136c-.302-.594-.423-1.225-.479-1.912C1 17.757 1 16.945 1 15.962V8.038c0-.983 0-1.795.054-2.457.056-.687.177-1.318.479-1.912a4.889 4.889 0 0 1 2.136-2.136c.594-.302 1.225-.423 1.912-.479C6.243 1 7.055 1 8.038 1ZM5.78 3.046c-.536.044-.81.123-1 .22-.46.235-1.28 1.053-1.514 1.513-.097.191-.176.465-.22 1.001C3 6.33 3 7.042 3 8.09v7.822c0 .98 0 1.665.038 2.2H3l.044.089.002.02c.044.536.123.81.22 1 .235.46.609 1.28 1.069 1.514.19.097.91.176 1.445.22.358.03.784.04 1.326.044L7.11 21h8.8c1.047 0 1.759 0 2.309-.046.536-.044.81-.123 1-.22.46-.235 1.28-1.053 1.514-1.513.097-.191.176-.465.22-1.001.045-.55.046-1.262.046-2.309V8.09c0-1.047 0-1.759-.046-2.309-.044-.536-.123-.81-.22-1-.235-.46-1.053-1.28-1.513-1.514-.191-.097-.465-.176-1.001-.22C17.67 3 16.958 3 15.91 3H8.09c-1.047 0-1.759.001-2.309.046Z",
10
- "fill-rule": "evenodd"
11
- }, null, -1);
12
- function _(h, s) {
13
- return c(), l(n, null, [
14
- r,
15
- d,
16
- a
17
- ], 64);
18
- }
19
- const p = /* @__PURE__ */ o(t, [["render", _]]);
20
- export {
21
- p as default
22
- };
@@ -1,10 +0,0 @@
1
- import { openBlock as e, createElementBlock as c } from "vue";
2
- import { _ as o } from "./index-32686488.js";
3
- const t = {}, n = { d: "M2 4V2h20v2H2Zm0 18v-2h20v2H2Zm5-12V7h10v3H7Zm0 7v-3h10v3H7Z" };
4
- function r(_, m) {
5
- return e(), c("path", n);
6
- }
7
- const f = /* @__PURE__ */ o(t, [["render", r]]);
8
- export {
9
- f as default
10
- };
@@ -1,10 +0,0 @@
1
- import { openBlock as c, createElementBlock as e } from "vue";
2
- import { _ as o } from "./index-32686488.js";
3
- const t = {}, r = { d: "M5.655 9.056c-.235.278-.61.497-.985.466-.046-.375.138-.775.354-1.019.234-.284.643-.487.978-.503.037.387-.116.772-.347 1.056Zm.34.538c-.543-.031-1.009.31-1.265.31-.263 0-.656-.295-1.088-.285-.56.01-1.078.325-1.362.828-.588 1.01-.153 2.5.415 3.322.279.406.61.853 1.047.837.416-.015.578-.268 1.078-.268.504 0 .65.268 1.088.262.453-.01.737-.406 1.016-.813.315-.462.446-.909.453-.934-.01-.01-.875-.34-.885-1.34-.01-.838.685-1.235.716-1.26-.39-.581-1-.644-1.213-.66Zm3.138-1.131v6.09h.947v-2.081h1.31c1.196 0 2.034-.822 2.034-2.01 0-1.187-.825-2-2.004-2H9.133Zm.947.796h1.09c.822 0 1.291.438 1.291 1.207 0 .768-.469 1.212-1.294 1.212H10.08V9.26Zm5.069 5.341c.593 0 1.143-.3 1.393-.778h.019v.731h.875v-3.031c0-.878-.703-1.447-1.784-1.447-1.003 0-1.747.575-1.775 1.363h.853c.072-.376.418-.622.893-.622.579 0 .904.268.904.765v.338l-1.182.072c-1.097.065-1.69.515-1.69 1.296.003.788.615 1.313 1.494 1.313Zm.256-.722c-.503 0-.825-.244-.825-.612 0-.385.31-.607.9-.641l1.05-.066v.344c0 .569-.485.975-1.125.975Zm3.203 2.331c.922 0 1.356-.353 1.734-1.418l1.66-4.657h-.963l-1.112 3.597h-.02l-1.112-3.597h-.987l1.6 4.435-.088.268c-.143.457-.378.635-.797.635-.075 0-.218-.01-.278-.016v.732c.057.012.291.021.363.021Z" };
4
- function h(m, n) {
5
- return c(), e("path", r);
6
- }
7
- const s = /* @__PURE__ */ o(t, [["render", h]]);
8
- export {
9
- s as default
10
- };
@@ -1,10 +0,0 @@
1
- import { openBlock as o, createElementBlock as c } from "vue";
2
- import { _ as e } from "./index-32686488.js";
3
- const r = {}, t = { d: "m7.825 13 5.6 5.6L12 20l-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825Z" };
4
- function n(_, s) {
5
- return o(), c("path", t);
6
- }
7
- const m = /* @__PURE__ */ e(r, [["render", n]]);
8
- export {
9
- m as default
10
- };
@@ -1,10 +0,0 @@
1
- import { openBlock as o, createElementBlock as r } from "vue";
2
- import { _ as e } from "./index-32686488.js";
3
- const t = {}, c = { d: "M16.175 13H4v-2h12.175l-5.6-5.6L12 4l8 8-8 8-1.425-1.4 5.6-5.6Z" };
4
- function n(_, s) {
5
- return o(), r("path", c);
6
- }
7
- const d = /* @__PURE__ */ e(t, [["render", n]]);
8
- export {
9
- d as default
10
- };
@@ -1,10 +0,0 @@
1
- import { openBlock as o, createElementBlock as t } from "vue";
2
- import { _ as e } from "./index-32686488.js";
3
- const r = {}, c = { d: "M10 17V7l5 5-5 5Z" };
4
- function n(_, s) {
5
- return o(), t("path", c);
6
- }
7
- const i = /* @__PURE__ */ e(r, [["render", n]]);
8
- export {
9
- i as default
10
- };
@@ -1,10 +0,0 @@
1
- import { openBlock as C, createElementBlock as e } from "vue";
2
- import { _ as t } from "./index-32686488.js";
3
- const o = {}, c = { d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H9.2C9.41667 2.4 9.77917 1.91667 10.2875 1.55C10.7958 1.18333 11.3667 1 12 1C12.6333 1 13.2042 1.18333 13.7125 1.55C14.2208 1.91667 14.5833 2.4 14.8 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19ZM7 17H14V15H7V17ZM7 13H17V11H7V13ZM7 9H17V7H7V9ZM12 4.25C12.2167 4.25 12.3958 4.17917 12.5375 4.0375C12.6792 3.89583 12.75 3.71667 12.75 3.5C12.75 3.28333 12.6792 3.10417 12.5375 2.9625C12.3958 2.82083 12.2167 2.75 12 2.75C11.7833 2.75 11.6042 2.82083 11.4625 2.9625C11.3208 3.10417 11.25 3.28333 11.25 3.5C11.25 3.71667 11.3208 3.89583 11.4625 4.0375C11.6042 4.17917 11.7833 4.25 12 4.25Z" };
4
- function n(r, s) {
5
- return C(), e("path", c);
6
- }
7
- const V = /* @__PURE__ */ t(o, [["render", n]]);
8
- export {
9
- V as default
10
- };
@@ -1,10 +0,0 @@
1
- import { openBlock as t, createElementBlock as e } from "vue";
2
- import { _ as o } from "./index-32686488.js";
3
- const r = {}, c = { d: "m9.375 16.55 2.925-1.775 2.925 1.775-.775-3.325 2.6-2.25-3.425-.275L12.3 7.55l-1.325 3.15-3.425.275 2.6 2.25-.775 3.325ZM12.3 23.6l-3.35-3.3H4.3v-4.65L1 12.3l3.3-3.35V4.3h4.65L12.3 1l3.35 3.3h4.65v4.65l3.3 3.35-3.3 3.35v4.65h-4.65l-3.35 3.3Zm0-2.8 2.5-2.5h3.5v-3.5l2.5-2.5-2.5-2.5V6.3h-3.5l-2.5-2.5-2.5 2.5H6.3v3.5l-2.5 2.5 2.5 2.5v3.5h3.5l2.5 2.5Z" };
4
- function l(n, _) {
5
- return t(), e("path", c);
6
- }
7
- const s = /* @__PURE__ */ o(r, [["render", l]]);
8
- export {
9
- s as default
10
- };
@@ -1,10 +0,0 @@
1
- import { openBlock as o, createElementBlock as c } from "vue";
2
- import { _ as e } from "./index-32686488.js";
3
- const t = {}, r = { d: "M5 21V5c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 3h10c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v16l-7-3-7 3Zm2-3.05 5-2.15 5 2.15V5H7v12.95Z" };
4
- function n(_, s) {
5
- return o(), c("path", r);
6
- }
7
- const f = /* @__PURE__ */ e(t, [["render", n]]);
8
- export {
9
- f as default
10
- };
@@ -1,10 +0,0 @@
1
- import { openBlock as c, createElementBlock as a } from "vue";
2
- import { _ as A } from "./index-32686488.js";
3
- const e = {}, o = { d: "M5 22c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 20V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 5 4h1V2h2v2h8V2h2v2h1c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 22H5Zm0-2h14V10H5v10ZM5 8h14V6H5v2Zm7 6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 13c0-.283.096-.52.287-.713A.968.968 0 0 1 12 12c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 14Zm-4 0a.967.967 0 0 1-.713-.287A.968.968 0 0 1 7 13c0-.283.096-.52.287-.713A.967.967 0 0 1 8 12c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.967.967 0 0 1 8 14Zm8 0a.968.968 0 0 1-.713-.287A.968.968 0 0 1 15 13c0-.283.096-.52.287-.713A.968.968 0 0 1 16 12a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 16 14Zm-4 4a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 17a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 16a.97.97 0 0 1 .713.288c.191.191.287.429.287.712s-.096.52-.287.712A.968.968 0 0 1 12 18Zm-4 0a.967.967 0 0 1-.713-.288A.968.968 0 0 1 7 17a.97.97 0 0 1 .287-.712A.967.967 0 0 1 8 16a.97.97 0 0 1 .713.288c.191.191.287.429.287.712s-.096.52-.287.712A.967.967 0 0 1 8 18Zm8 0a.968.968 0 0 1-.713-.288A.968.968 0 0 1 15 17a.97.97 0 0 1 .287-.712A.968.968 0 0 1 16 16c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 16 18Z" };
4
- function t(s, n) {
5
- return c(), a("path", o);
6
- }
7
- const h = /* @__PURE__ */ A(e, [["render", t]]);
8
- export {
9
- h as default
10
- };