tide-design-system 2.4.0 → 2.4.2

package/dist/css/utilities.css

@@ -1,16 +0,0 @@
-@import './utilities-base.css';
-@import './utilities-responsive.css';
-
-/* Non-responsive utility classes */
-
-.tide-screen-reader-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

package/dist/css/variables.css

@@ -1,205 +0,0 @@
-/*.CSS Variables */
-:root {
-  /* Font Size */
-  --tide-font-10: 0.625rem;
-  --tide-font-12: 0.75rem;
-  --tide-font-14: 0.875rem;
-  --tide-font-16: 1rem;
-  --tide-font-18: 1.125rem;
-  --tide-font-20: 1.25rem;
-  --tide-font-24: 1.5rem;
-  --tide-font-28: 1.75rem;
-  --tide-font-32: 2rem;
-
-  /* Animation */
-  --tide-animate: 300ms ease-in-out;
-
-  /* Spacing */
-  --tide-spacing-0: 0rem;
-  --tide-spacing-1\/4: 0.25rem;
-  --tide-spacing-1\/2: 0.5rem;
-  --tide-spacing-1: 1rem;
-  --tide-spacing-2: 2rem;
-  --tide-spacing-4: 4rem;
-
-  /* Border */
-  --tide-border-width-1: 1px;
-  --tide-border-width-2: 2px;
-
-  --tide-border-1: var(--tide-border-width-1) solid var(--tide-black);
-  --tide-border-2: var(--tide-border-width-2) solid var(--tide-black);
-
-  /* Border Radius */
-  --tide-radius-1\/4: 4px;
-  --tide-radius-1\/2: 8px;
-  --tide-radius-1: 16px;
-  --tide-radius-full: 99999px;
-
-  --tide-black: var(--tide-gray-900);
-  --tide-white: var(--tide-gray-100);
-
-  /* Opacity */
-  --tide-disabled: 0.333;
-
-  /* Shadow */
-  --tide-shadow-bottom: 0px  2px 8px 2px rgba(0, 0, 0, 0.07);
-  --tide-shadow-top:    0px -2px 8px 2px rgba(0, 0, 0, 0.07);
-  --tide-shadow-text:   0px  0px 5px rgba(0, 0, 0, 0.6);
-
-  /* Transparency */
-  --tide-transparent-100: color-mix(in srgb, white 90%, transparent);
-  --tide-transparent-200: color-mix(in srgb, white 75%, transparent);
-  --tide-transparent-300: color-mix(in srgb, black 10%, transparent);
-  --tide-transparent-400: color-mix(in srgb, black 50%, transparent);
-
-  /* Blur */
-  --tide-bg-blur: blur(8px);
-
-  /* Global tonal palette */
-  --tide-gray-100:  #FFFFFF;
-  --tide-gray-200:  #F5F5F5;
-  --tide-gray-300:  #E4E4E4;
-  --tide-gray-400:  #C9CACB;
-  --tide-gray-500:  #AEAFB2;
-  --tide-gray-600:  #939598;
-  --tide-gray-700:  #6E7072;
-  --tide-gray-800:  #494A4C;
-  --tide-gray-900:  #252526;
-  --tide-gray-1000: #000000;
-
-  --tide-blue-100:  #EBF1FD;
-  --tide-blue-200:  #3870E9;
-  --tide-blue-300:  #22438C;
-
-  --tide-green-100:  #E7F6ED;
-  --tide-green-200:  #11A94E;
-  --tide-green-300:  #0A652F;
-
-  --tide-lime-100:  #F7FAE9;
-  --tide-lime-200:  #ACC821;
-  --tide-lime-300:  #677814;
-
-  --tide-orange-100:  #FFF2EA;
-  --tide-orange-200:  #FA8131;
-  --tide-orange-300:  #964D1D;
-
-  --tide-purple-100:  #F1F0F8;
-  --tide-purple-200:  #756CB7;
-  --tide-purple-300:  #46416E;
-
-  --tide-red-100:  #FBE9EA;
-  --tide-red-200:  #D8202E;
-  --tide-red-300:  #82131C;
-
-  --tide-salmon-100:  #FDF1F0;
-  --tide-salmon-200:  #EE706B;
-  --tide-salmon-300:  #8F4340;
-
-  --tide-teal-100:  #E6F7F8;
-  --tide-teal-200:  #21B1B2;
-  --tide-teal-300:  #036C6C;
-
-  --tide-yellow-100:  #FEF2CC;
-  --tide-yellow-200:  #FACA33;
-  --tide-yellow-300:  #90731D;
-
-  /* Global color roles */
-  --tide-blue-primary: var(--tide-blue-200);
-  --tide-blue-surface: var(--tide-blue-100);
-  --tide-blue-border:  var(--tide-blue-200);
-  --tide-blue-on-surface: var(--tide-blue-300);
-
-  --tide-green-primary: var(--tide-green-200);
-  --tide-green-surface: var(--tide-green-100);
-  --tide-green-border:  var(--tide-green-200);
-  --tide-green-on-surface: var(--tide-green-300);
-
-  --tide-lime-primary: var(--tide-lime-200);
-  --tide-lime-surface: var(--tide-lime-100);
-  --tide-lime-border:  var(--tide-lime-200);
-  --tide-lime-on-surface: var(--tide-lime-300);
-
-  --tide-orange-primary: var(--tide-orange-200);
-  --tide-orange-surface: var(--tide-orange-100);
-  --tide-orange-border:  var(--tide-orange-200);
-  --tide-orange-on-surface: var(--tide-orange-300);
-
-  --tide-purple-primary: var(--tide-purple-200);
-  --tide-purple-surface: var(--tide-purple-100);
-  --tide-purple-border:  var(--tide-purple-200);
-  --tide-purple-on-surface: var(--tide-purple-300);
-
-  --tide-red-primary: var(--tide-red-200);
-  --tide-red-surface: var(--tide-red-100);
-  --tide-red-border:  var(--tide-red-200);
-  --tide-red-on-surface: var(--tide-red-300);
-
-  --tide-salmon-primary: var(--tide-salmon-200);
-  --tide-salmon-surface: var(--tide-salmon-100);
-  --tide-salmon-border:  var(--tide-salmon-200);
-  --tide-salmon-on-surface: var(--tide-salmon-300);
-
-  --tide-teal-primary: var(--tide-teal-200);
-  --tide-teal-surface: var(--tide-teal-100);
-  --tide-teal-border:  var(--tide-teal-200);
-  --tide-teal-on-surface: var(--tide-teal-300);
-
-  --tide-yellow-primary: var(--tide-yellow-200);
-  --tide-yellow-surface: var(--tide-yellow-100);
-  --tide-yellow-border:  var(--tide-yellow-200);
-  --tide-yellow-on-surface: var(--tide-yellow-300);
-
-  /* Status color roles */
-  --tide-error-primary: var(--tide-red-200);
-  --tide-error-surface: var(--tide-red-100);
-  --tide-error-border:  var(--tide-red-200);
-
-  --tide-info-primary: var(--tide-blue-200);
-  --tide-info-surface: var(--tide-blue-100);
-  --tide-info-border:  var(--tide-blue-200);
-
-  --tide-success-primary: var(--tide-green-200);
-  --tide-success-surface: var(--tide-green-100);
-  --tide-success-border:  var(--tide-green-200);
-
-  --tide-warning-primary: var(--tide-yellow-200);
-  --tide-warning-surface: var(--tide-yellow-100);
-  --tide-warning-border:  var(--tide-yellow-200);
-
-  /* Global color roles (defined in realm tonal palettes in Figma) */
-  --tide-secondary:    var(--tide-gray-900);
-  --tide-on-secondary: var(--tide-gray-100);
-
-  --tide-surface:          var(--tide-gray-100);
-  --tide-surface-variant:  var(--tide-gray-200);
-  --tide-surface-floating: var(--tide-transparent-100);
-
-  --tide-on-surface:                 var(--tide-gray-900);
-  --tide-on-surface-variant:         var(--tide-gray-700);
-  --tide-on-surface-inverse:         var(--tide-gray-100);
-  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
-
-  --tide-border-low:      var(--tide-gray-300);
-  --tide-border:          var(--tide-gray-600);
-  --tide-border-high:     var(--tide-gray-900);
-  --tide-border-floating: var(--tide-transparent-300);
-
-  --tide-surface-gradient:
-    radial-gradient(
-      57.27% 60.26% at 100% 103.53%,
-      color-mix(in srgb, var(--tide-gradient-bottom-right-color) var(--tide-gradient-bottom-right-opacity), transparent) 0%,
-      color-mix(in srgb, var(--tide-gradient-bottom-right-color) 0%, transparent) 100%
-    ),
-    radial-gradient(
-      157.36% 151.94% at 19.69% -3.53%,
-      color-mix(in srgb, var(--tide-gradient-top-color) var(--tide-gradient-top-opacity), transparent) 28.37%,
-      color-mix(in srgb, var(--tide-gradient-top-color) 0%, transparent) 100%
-    ),
-    radial-gradient(
-      41.93% 63.48% at -2.12% 103.9%,
-      color-mix(in srgb, var(--tide-gradient-bottom-left-color) var(--tide-gradient-bottom-left-opacity), transparent) 0%,
-      color-mix(in srgb, var(--tide-gradient-bottom-left-color) 0%, transparent) 100%
-    );
-}
-
-

package/dist/utilities/event.ts

@@ -1,4 +0,0 @@
-export const isClickOutside = (event: MouseEvent, elements: HTMLElement | HTMLElement[]): boolean => {
-  const targets = Array.isArray(elements) ? elements : [elements];
-  return !targets.some((el) => el.contains(event.target as Node));
-};

package/dist/utilities/format.ts

@@ -1,184 +0,0 @@
-const capitalizeFirst = (string: string) => {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-};
-
-const formatCamelCase = (input: string): string => {
-  return input && typeof input === 'string'
-    ? input
-        .replace(/^[\s_-]/, '')
-        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-        .replace(/[\s_-]/g, ' ')
-        .toLowerCase()
-        .split(' ')
-        .map((word, index) => (index === 0 ? word : word.slice(0, 1).toUpperCase() + word.slice(1)))
-        .join('')
-    : input;
-};
-
-const formatKebabCase = (input: string): string => {
-  return input && typeof input === 'string'
-    ? input
-        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-        .toLowerCase()
-        .replace(/[\s_-]/g, '-')
-    : input;
-};
-
-const formatLabel = (value: string) => {
-  const labelMap: { [key: string]: string } = {
-    false: 'No',
-    true: 'Yes',
-  };
-  return Object.hasOwn(labelMap, value) ? labelMap[value] : value;
-};
-
-const formatNumber = (input: number | string): string => {
-  let output = input && typeof input === 'number' ? new Intl.NumberFormat().format(input) : String(input || '');
-  let digits = output;
-
-  if (input && typeof input === 'string') {
-    digits = digits.replace(/\D/g, '');
-    if (Number(digits)) {
-      output = new Intl.NumberFormat().format(Number(digits));
-    } else {
-      output = '0';
-    }
-  }
-
-  return output;
-};
-
-const formatPascalCase = (input: string): string => {
-  return input && typeof input === 'string'
-    ? input
-        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-        .replace(/[\s_-]/g, ' ')
-        .toLowerCase()
-        .split(' ')
-        .map((word) => word.slice(0, 1).toUpperCase() + word.slice(1))
-        .join('')
-    : input;
-};
-
-const formatPhone = (input: number | string): string => {
-  let output = input && typeof input === 'number' ? String(input) : String(input || '');
-  let digits = output;
-  digits = digits.replace(/\D/g, '');
-
-  switch (digits.length) {
-    case 7:
-      output = `${digits.slice(0, 3)}-${digits.slice(3)}`;
-      break;
-    case 10:
-      output = `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
-      break;
-    case 11:
-      output = `${digits.slice(0, 1)}-${digits.slice(1, 4)}-${digits.slice(4, 7)}-${digits.slice(7)}`;
-      break;
-    default:
-      output = digits;
-      break;
-  }
-
-  return output;
-};
-
-const formatPrice = (input: number | string): string => {
-  const output = input ? formatNumber(input) : String(input || '0');
-  return `$${output}`;
-};
-
-const formatQuotes = (value: string) => {
-  if (value.startsWith('"') && value.endsWith('"')) {
-    return value.slice(1, -1);
-  } else {
-    return value;
-  }
-};
-
-const formatSentenceCase = (input: string): string => {
-  let sentenceCase = input;
-
-  if (input && typeof input === 'string') {
-    const lowerCase = input
-      .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-      .toLowerCase()
-      .replace(/[\s_-]/g, ' ');
-
-    sentenceCase = lowerCase.slice(0, 1).toUpperCase() + lowerCase.slice(1);
-  }
-
-  return sentenceCase;
-};
-
-const formatSnakeCase = (input: string): string => {
-  return input && typeof input === 'string'
-    ? input
-        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-        .toLowerCase()
-        .replace(/[\s_-]/g, '_')
-    : input;
-};
-
-const formatTitleCase = (input: string): string => {
-  return input && typeof input === 'string'
-    ? input
-        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-        .toLowerCase()
-        .replace(/[\s_-]/g, ' ')
-        .split(' ')
-        .map((word) => word.slice(0, 1).toUpperCase() + word.slice(1))
-        .join(' ')
-    : input;
-};
-
-const formatUrlFromRoot = (url: string) => {
-  const urlFormatted = url.split('.com/');
-
-  return urlFormatted.length > 1 ? `/${urlFormatted[1]}` : url;
-};
-
-const formatWeight = (input: number | string): string => {
-  const output = input ? formatNumber(input) : String(input || '0');
-  return `${output} lbs`;
-};
-
-const getArticle = (noun: string, isPlural = false, isDefinite = false) => {
-  const vowels = ['a', 'e', 'i', 'o', 'u'];
-  const isVowelLeading = vowels.includes(noun.charAt(0));
-
-  return isDefinite ? 'the' : isPlural ? 'some' : isVowelLeading ? 'an' : 'a';
-};
-
-const priceToNumber = (value: string) => {
-  if (Number.isNaN(Number(value))) {
-    value = value.replace('$', '');
-    value = value.replace(/,/g, '');
-  }
-  return parseInt(value, 10);
-};
-
-const unformatPrice = (input: string): string => {
-  const output = input.replace(/\$/g, '').replace(/,/g, '');
-  return `${output}`;
-};
-
-export {
-  capitalizeFirst,
-  formatCamelCase,
-  formatKebabCase,
-  formatLabel,
-  formatNumber,
-  formatPascalCase,
-  formatPhone,
-  formatPrice,
-  formatQuotes,
-  formatSentenceCase,
-  formatSnakeCase,
-  formatTitleCase,
-  formatUrlFromRoot,
-  formatWeight,
-  getArticle,
-  priceToNumber,
-  unformatPrice,
-};

package/dist/utilities/forms.ts

@@ -1,22 +0,0 @@
-import { INPUT_MODE, TEXT_INPUT_TYPE } from '@/types/TextInput';
-
-import type { InputMode, TextInputType } from '@/types/TextInput';
-
-export const getTextInputMode = (type: TextInputType, inputmode?: InputMode): InputMode | undefined => {
-  if (inputmode) return inputmode;
-
-  switch (type) {
-    case TEXT_INPUT_TYPE.TEL:
-      return INPUT_MODE.TEL;
-    case TEXT_INPUT_TYPE.SEARCH:
-      return INPUT_MODE.SEARCH;
-    case TEXT_INPUT_TYPE.NUMBER:
-      return INPUT_MODE.NUMERIC;
-    case TEXT_INPUT_TYPE.EMAIL:
-      return INPUT_MODE.EMAIL;
-    case TEXT_INPUT_TYPE.URL:
-      return INPUT_MODE.URL;
-  }
-
-  return undefined;
-};