tide-design-system 2.0.21 → 2.0.23

package/src/types/Styles.ts

@@ -0,0 +1,590 @@
+/* eslint-disable vue/sort-keys */
+
+export const BREAKPOINT = {
+  SM: 'sm',
+  MD: 'md',
+  LG: 'lg',
+  XL: 'xl',
+} as const;
+
+export type Breakpoint = (typeof BREAKPOINT)[keyof typeof BREAKPOINT];
+
+export const CSS = {
+  withBreakpoint: (utilities: string[], breakpoint: Breakpoint): string[] => {
+    return utilities.map((utility) => `${breakpoint}-${utility}`);
+  },
+  ALIGN: {
+    X: {
+      CENTER: 'tide-text-center',
+      LEFT: 'tide-text-left',
+      RIGHT: 'tide-text-right',
+    },
+    Y: {
+      MIDDLE: 'tide-align-middle',
+    },
+  },
+  AXIS1: {
+    AROUND: 'tide-axis1-around',
+    BETWEEN: 'tide-axis1-between',
+    CENTER: 'tide-axis1-center',
+    END: 'tide-axis1-end',
+    START: 'tide-axis1-start',
+  },
+  AXIS2: {
+    AROUND: 'tide-axis2-around',
+    CENTER: 'tide-axis2-center',
+    END: 'tide-axis2-end',
+    START: 'tide-axis2-start',
+  },
+  BG: {
+    BLUR: 'tide-bg-blur',
+    ERROR: 'tide-bg-error',
+    INFO: 'tide-bg-info',
+    PRIMARY: 'tide-bg-primary',
+    SECONDARY: 'tide-bg-secondary',
+    SUCCESS: 'tide-bg-success',
+    SURFACE: {
+      ACCENT: 'tide-bg-surface-accent',
+      ACCENT_VARIANT: 'tide-bg-surface-accent-variant',
+      BRAND: 'tide-bg-surface-brand',
+      DEFAULT: 'tide-bg-surface',
+      ERROR: 'tide-bg-surface-error',
+      FLOATING: 'tide-bg-surface-floating',
+      GRADIENT: 'tide-bg-surface-gradient',
+      INFO: 'tide-bg-surface-info',
+      SUCCESS: 'tide-bg-surface-success',
+      VARIANT: 'tide-bg-surface-variant',
+      WARNING: 'tide-bg-surface-warning',
+    },
+    WARNING: 'tide-bg-warning',
+  },
+  BORDER: {
+    COLOR: {
+      DEFAULT: 'tide-border',
+      FLOATING: 'tide-border-floating',
+      HIGH: 'tide-border-high',
+      LOW: 'tide-border-low',
+      PRIMARY: 'tide-border-primary',
+    },
+    RADIUS: {
+      QUARTER: 'tide-radius-1/4',
+      HALF: 'tide-radius-1/2',
+      ONE: 'tide-radius-1',
+      FULL: 'tide-radius-full',
+    },
+    BOTTOM: {
+      ONE: 'tide-border-bottom-1',
+      TWO: 'tide-border-bottom-2',
+    },
+    FULL: {
+      ONE: 'tide-border-1',
+      TWO: 'tide-border-2',
+    },
+    LEFT: {
+      ONE: 'tide-border-left-1',
+      TWO: 'tide-border-left-2',
+    },
+    RIGHT: {
+      ONE: 'tide-border-right-1',
+      TWO: 'tide-border-right-2',
+    },
+    TOP: {
+      ONE: 'tide-border-top-1',
+      TWO: 'tide-border-top-2',
+    },
+  },
+  BOX_SIZING: {
+    BORDER_BOX: 'tide-box-border',
+    CONTENT_BOX: 'tide-box-content',
+  },
+  BREAK_WORD: {
+    ON: 'tide-break-word',
+  },
+  COLUMNS: {
+    ONE: 'tide-columns-1',
+    TWO: 'tide-columns-2',
+    THREE: 'tide-columns-3',
+    FOUR: 'tide-columns-4',
+  },
+  CURSOR: {
+    NOT_ALLOWED: 'tide-cursor-not-allowed',
+    POINTER: 'tide-cursor-pointer',
+    TEXT: 'tide-cursor-text',
+  },
+  DISPLAY: {
+    BLOCK: 'tide-display-block',
+    CONTENTS: 'tide-contents',
+    FLEX: 'tide-display-flex',
+    GRID: 'tide-display-grid',
+    INITIAL: 'initial',
+    INLINE: 'tide-display-inline',
+    INLINE_BLOCK: 'tide-display-inline-block',
+    INLINE_FLEX: 'tide-display-inline-flex',
+    NONE: 'tide-display-none',
+  },
+  FLEX: {
+    BASIS: {
+      ZERO: 'tide-flex-basis-0',
+    },
+    DIRECTION: {
+      COLUMN: 'tide-flex-column',
+      COLUMN_REVERSE: 'tide-flex-column-reverse',
+      ROW: 'tide-flex-row',
+      ROW_REVERSE: 'tide-flex-row-reverse',
+    },
+    GROW: {
+      OFF: 'tide-grow-none',
+      ON: 'tide-grow',
+    },
+    SHRINK: {
+      OFF: 'tide-shrink-none',
+      ON: 'tide-shrink',
+    },
+    WRAP: 'tide-flex-wrap',
+  },
+  FONT: {
+    COLOR: {
+      PRIMARY: 'tide-font-on-primary',
+      SECONDARY: 'tide-font-on-secondary',
+      SURFACE: {
+        BRAND: 'tide-font-on-surface-brand',
+        DEFAULT: 'tide-font-on-surface',
+        INVERSE: 'tide-font-on-surface-inverse',
+        VARIANT: 'tide-font-on-surface-variant',
+        VARIANT_INVERSE: 'tide-font-on-surface-variant-inverse',
+      },
+    },
+    SIZE: {
+      TWELVE: 'tide-font-12',
+      FOURTEEN: 'tide-font-14',
+      SIXTEEN: 'tide-font-16',
+      TWENTY: 'tide-font-20',
+      TWENTY_FOUR: 'tide-font-24',
+      THIRTY_TWO: 'tide-font-32',
+    },
+    WEIGHT: {
+      FOUR_HUNDRED: 'tide-font-400',
+      FIVE_HUNDRED: 'tide-font-500',
+      SIX_HUNDRED: 'tide-font-600',
+      SEVEN_HUNDRED: 'tide-font-700',
+    },
+  },
+  GAP: {
+    QUARTER: 'tide-gap-1/4',
+    HALF: 'tide-gap-1/2',
+    ONE: 'tide-gap-1',
+    TWO: 'tide-gap-2',
+    FOUR: 'tide-gap-4',
+  },
+  GRID: {
+    END: {
+      ONE: 'tide-end-1',
+      TWO: 'tide-end-2',
+      THREE: 'tide-end-3',
+      FOUR: 'tide-end-4',
+      FIVE: 'tide-end-5',
+      SIX: 'tide-end-6',
+      SEVEN: 'tide-end-7',
+      EIGHT: 'tide-end-8',
+      NINE: 'tide-end-9',
+      TEN: 'tide-end-10',
+      ELEVEN: 'tide-end-11',
+      TWELVE: 'tide-end-12',
+      THIRTEEN: 'tide-end-13',
+    },
+    FLUID: 'tide-fluid',
+    LAYOUT: 'tide-grid-layout',
+    START: {
+      ZERO: 'tide-start-0',
+      ONE: 'tide-start-1',
+      TWO: 'tide-start-2',
+      THREE: 'tide-start-3',
+      FOUR: 'tide-start-4',
+      FIVE: 'tide-start-5',
+      SIX: 'tide-start-6',
+      SEVEN: 'tide-start-7',
+      EIGHT: 'tide-start-8',
+      NINE: 'tide-start-9',
+      TEN: 'tide-start-10',
+      ELEVEN: 'tide-start-11',
+      TWELVE: 'tide-start-12',
+    },
+    XL: 'tide-grid-xl',
+  },
+  HEIGHT: {
+    ZERO: 'tide-width-0',
+    FULL: 'tide-height-full',
+  },
+  ISOLATION: {
+    ISOLATE: 'tide-isolate',
+  },
+  LIST_BULLETS: {
+    OFF: 'tide-list-none',
+  },
+  MARGIN: {
+    BOTTOM: {
+      QUARTER: 'tide-margin-bottom-1/4',
+      HALF: 'tide-margin-bottom-1/2',
+      ONE: 'tide-margin-bottom-1',
+      TWO: 'tide-margin-bottom-2',
+      FOUR: 'tide-margin-bottom-4',
+    },
+    FULL: {
+      QUARTER: 'tide-margin-1/4',
+      HALF: 'tide-margin-1/2',
+      ONE: 'tide-margin-1',
+      TWO: 'tide-margin-2',
+      FOUR: 'tide-margin-4',
+    },
+    LEFT: {
+      AUTO: 'tide-margin-left-auto',
+      QUARTER: 'tide-margin-left-1/4',
+      HALF: 'tide-margin-left-1/2',
+      ONE: 'tide-margin-left-1',
+      TWO: 'tide-margin-left-2',
+      FOUR: 'tide-margin-left-4',
+    },
+    RIGHT: {
+      AUTO: 'tide-margin-right-auto',
+      QUARTER: 'tide-margin-right-1/4',
+      HALF: 'tide-margin-right-1/2',
+      ONE: 'tide-margin-right-1',
+      TWO: 'tide-margin-right-2',
+      FOUR: 'tide-margin-right-4',
+    },
+    TOP: {
+      QUARTER: 'tide-margin-top-1/4',
+      HALF: 'tide-margin-top-1/2',
+      ONE: 'tide-margin-top-1',
+      TWO: 'tide-margin-top-2',
+      FOUR: 'tide-margin-top-4',
+    },
+    X: {
+      AUTO: 'tide-margin-x-auto',
+      QUARTER: 'tide-margin-x-1/4',
+      HALF: 'tide-margin-x-1/2',
+      ONE: 'tide-margin-x-1',
+      TWO: 'tide-margin-x-2',
+      FOUR: 'tide-margin-x-4',
+    },
+    Y: {
+      QUARTER: 'tide-margin-y-1/4',
+      HALF: 'tide-margin-y-1/2',
+      ONE: 'tide-margin-y-1',
+      TWO: 'tide-margin-y-2',
+      FOUR: 'tide-margin-y-4',
+    },
+  },
+  OBJECT: {
+    CENTER: 'tide-object-center',
+    CONTAIN: 'tide-object-contain',
+    COVER: 'tide-object-cover',
+    SCALE_DOWN: 'tide-object-scale-down',
+  },
+  OPACITY: {
+    OFF: 'tide-opacity-none',
+    ON: 'tide-opacity',
+  },
+  OVERFLOW: {
+    X: {
+      AUTO: 'tide-x-auto',
+      HIDDEN: 'tide-x-hidden',
+      SCROLL: 'tide-x-scroll',
+    },
+    XY: {
+      AUTO: 'tide-xy-auto',
+      HIDDEN: 'tide-xy-hidden',
+    },
+    Y: {
+      AUTO: 'tide-y-auto',
+      HIDDEN: 'tide-y-hidden',
+    },
+  },
+  PADDING: {
+    BOTTOM: {
+      QUARTER: 'tide-padding-bottom-1/4',
+      HALF: 'tide-padding-bottom-1/2',
+      ONE: 'tide-padding-bottom-1',
+      TWO: 'tide-padding-bottom-2',
+      FOUR: 'tide-padding-bottom-4',
+    },
+    FULL: {
+      QUARTER: 'tide-padding-1/4',
+      HALF: 'tide-padding-1/2',
+      ONE: 'tide-padding-1',
+      TWO: 'tide-padding-2',
+      FOUR: 'tide-padding-4',
+    },
+    LEFT: {
+      QUARTER: 'tide-padding-left-1/4',
+      HALF: 'tide-padding-left-1/2',
+      ONE: 'tide-padding-left-1',
+      TWO: 'tide-padding-left-2',
+      FOUR: 'tide-padding-left-4',
+    },
+    RIGHT: {
+      QUARTER: 'tide-padding-right-1/4',
+      HALF: 'tide-padding-right-1/2',
+      ONE: 'tide-padding-right-1',
+      TWO: 'tide-padding-right-2',
+      FOUR: 'tide-padding-right-4',
+    },
+    TOP: {
+      QUARTER: 'tide-padding-top-1/4',
+      HALF: 'tide-padding-top-1/2',
+      ONE: 'tide-padding-top-1',
+      TWO: 'tide-padding-top-2',
+      FOUR: 'tide-padding-top-4',
+    },
+    X: {
+      QUARTER: 'tide-padding-x-1/4',
+      HALF: 'tide-padding-x-1/2',
+      ONE: 'tide-padding-x-1',
+      TWO: 'tide-padding-x-2',
+      FOUR: 'tide-padding-x-4',
+    },
+    Y: {
+      QUARTER: 'tide-padding-y-1/4',
+      HALF: 'tide-padding-y-1/2',
+      ONE: 'tide-padding-y-1',
+      TWO: 'tide-padding-y-2',
+      FOUR: 'tide-padding-y-4',
+    },
+  },
+  POINTER_EVENTS: {
+    OFF: 'tide-pointer-events-none',
+    ON: 'tide-pointer-events',
+  },
+  POSITION: {
+    ABSOLUTE: 'tide-position-absolute',
+    FIXED: 'tide-position-fixed',
+    RELATIVE: 'tide-position-relative',
+    STICKY: 'tide-sticky',
+  },
+  POSITIONING: {
+    BOTTOM: 'tide-bottom-0',
+    LEFT: 'tide-left-0',
+    RIGHT: 'tide-right-0',
+    TOP: 'tide-top-0',
+  },
+  SCROLLBAR: {
+    OFF: 'tide-scrollbar-none',
+  },
+  SHADOW: {
+    BOTTOM: 'tide-shadow-bottom',
+    TOP: 'tide-shadow-top',
+  },
+  SNAP: {
+    ON: 'tide-snap',
+  },
+  SNAP_ALIGN: {
+    START: 'tide-snap-start',
+  },
+  TEXT_TRANSFORM: {
+    LOWER: 'tide-text-transform-lower',
+    NONE: 'tide-text-transform-none',
+    UPPER: 'tide-text-transform-upper',
+  },
+  UNDERLINE: {
+    HOVER: 'tide-underline-hover',
+    OFF: 'tide-underline-none',
+    ON: 'tide-underline',
+  },
+  VISIBILITY: {
+    OFF: 'tide-visible-none',
+    ON: 'tide-visible',
+  },
+  WHITESPACE_WRAP: {
+    OFF: 'tide-whitespace-nowrap',
+  },
+  WIDTH: {
+    ZERO: 'tide-width-0',
+    FULL: 'tide-width-full',
+    MAX_FULL: 'tide-max-width-full',
+  },
+};
+
+export type CssUtility = (typeof CSS)[keyof typeof CSS];
+
+export const cssSortOrder = [
+  CSS.DISPLAY.BLOCK,
+  CSS.DISPLAY.CONTENTS,
+  CSS.DISPLAY.FLEX,
+  CSS.DISPLAY.GRID,
+  CSS.DISPLAY.NONE,
+  CSS.DISPLAY.INITIAL,
+  CSS.DISPLAY.INLINE,
+  CSS.DISPLAY.INLINE_BLOCK,
+  CSS.DISPLAY.INLINE_FLEX,
+  CSS.AXIS1.AROUND,
+  CSS.AXIS1.BETWEEN,
+  CSS.AXIS1.CENTER,
+  CSS.AXIS1.END,
+  CSS.AXIS1.START,
+  CSS.AXIS2.AROUND,
+  CSS.AXIS2.CENTER,
+  CSS.AXIS2.END,
+  CSS.AXIS2.START,
+  CSS.FLEX.DIRECTION.COLUMN,
+  CSS.FLEX.DIRECTION.COLUMN_REVERSE,
+  CSS.FLEX.DIRECTION.ROW,
+  CSS.FLEX.DIRECTION.ROW_REVERSE,
+  CSS.GAP.ONE,
+  CSS.GAP.HALF,
+  CSS.GAP.QUARTER,
+  CSS.GAP.TWO,
+  CSS.GAP.FOUR,
+  CSS.FLEX.BASIS.ZERO,
+  CSS.FLEX.GROW.ON,
+  CSS.FLEX.GROW.OFF,
+  CSS.FLEX.SHRINK.ON,
+  CSS.FLEX.SHRINK.OFF,
+  CSS.FLEX.WRAP,
+  CSS.POSITION.ABSOLUTE,
+  CSS.POSITION.FIXED,
+  CSS.POSITION.RELATIVE,
+  CSS.POSITION.STICKY,
+  CSS.POSITIONING.TOP,
+  CSS.POSITIONING.RIGHT,
+  CSS.POSITIONING.BOTTOM,
+  CSS.POSITIONING.LEFT,
+  CSS.BOX_SIZING.BORDER_BOX,
+  CSS.BOX_SIZING.CONTENT_BOX,
+  CSS.MARGIN.FULL.ONE,
+  CSS.MARGIN.FULL.HALF,
+  CSS.MARGIN.FULL.QUARTER,
+  CSS.MARGIN.FULL.TWO,
+  CSS.MARGIN.FULL.FOUR,
+  CSS.MARGIN.Y.ONE,
+  CSS.MARGIN.Y.HALF,
+  CSS.MARGIN.Y.QUARTER,
+  CSS.MARGIN.Y.TWO,
+  CSS.MARGIN.Y.FOUR,
+  CSS.MARGIN.TOP.ONE,
+  CSS.MARGIN.TOP.HALF,
+  CSS.MARGIN.TOP.QUARTER,
+  CSS.MARGIN.TOP.TWO,
+  CSS.MARGIN.TOP.FOUR,
+  CSS.MARGIN.X.ONE,
+  CSS.MARGIN.X.HALF,
+  CSS.MARGIN.X.QUARTER,
+  CSS.MARGIN.X.TWO,
+  CSS.MARGIN.X.FOUR,
+  CSS.MARGIN.X.AUTO,
+  CSS.MARGIN.RIGHT.ONE,
+  CSS.MARGIN.RIGHT.HALF,
+  CSS.MARGIN.RIGHT.QUARTER,
+  CSS.MARGIN.RIGHT.TWO,
+  CSS.MARGIN.RIGHT.FOUR,
+  CSS.MARGIN.RIGHT.AUTO,
+  CSS.MARGIN.BOTTOM.ONE,
+  CSS.MARGIN.BOTTOM.HALF,
+  CSS.MARGIN.BOTTOM.QUARTER,
+  CSS.MARGIN.BOTTOM.TWO,
+  CSS.MARGIN.BOTTOM.FOUR,
+  CSS.MARGIN.LEFT.ONE,
+  CSS.MARGIN.LEFT.HALF,
+  CSS.MARGIN.LEFT.QUARTER,
+  CSS.MARGIN.LEFT.TWO,
+  CSS.MARGIN.LEFT.FOUR,
+  CSS.MARGIN.LEFT.AUTO,
+  CSS.BORDER.FULL.ONE,
+  CSS.BORDER.FULL.TWO,
+  CSS.BORDER.TOP.ONE,
+  CSS.BORDER.TOP.TWO,
+  CSS.BORDER.RIGHT.ONE,
+  CSS.BORDER.RIGHT.TWO,
+  CSS.BORDER.BOTTOM.ONE,
+  CSS.BORDER.BOTTOM.TWO,
+  CSS.BORDER.LEFT.ONE,
+  CSS.BORDER.LEFT.TWO,
+  CSS.BORDER.RADIUS.ONE,
+  CSS.BORDER.RADIUS.HALF,
+  CSS.BORDER.RADIUS.QUARTER,
+  CSS.BORDER.RADIUS.FULL,
+  CSS.PADDING.FULL.ONE,
+  CSS.PADDING.FULL.HALF,
+  CSS.PADDING.FULL.QUARTER,
+  CSS.PADDING.FULL.TWO,
+  CSS.PADDING.FULL.FOUR,
+  CSS.PADDING.Y.ONE,
+  CSS.PADDING.Y.HALF,
+  CSS.PADDING.Y.QUARTER,
+  CSS.PADDING.Y.TWO,
+  CSS.PADDING.Y.FOUR,
+  CSS.PADDING.TOP.ONE,
+  CSS.PADDING.TOP.HALF,
+  CSS.PADDING.TOP.QUARTER,
+  CSS.PADDING.TOP.TWO,
+  CSS.PADDING.TOP.FOUR,
+  CSS.PADDING.X.ONE,
+  CSS.PADDING.X.HALF,
+  CSS.PADDING.X.QUARTER,
+  CSS.PADDING.X.TWO,
+  CSS.PADDING.X.FOUR,
+  CSS.PADDING.RIGHT.ONE,
+  CSS.PADDING.RIGHT.HALF,
+  CSS.PADDING.RIGHT.QUARTER,
+  CSS.PADDING.RIGHT.TWO,
+  CSS.PADDING.RIGHT.FOUR,
+  CSS.PADDING.BOTTOM.ONE,
+  CSS.PADDING.BOTTOM.HALF,
+  CSS.PADDING.BOTTOM.QUARTER,
+  CSS.PADDING.BOTTOM.TWO,
+  CSS.PADDING.BOTTOM.FOUR,
+  CSS.PADDING.LEFT.ONE,
+  CSS.PADDING.LEFT.HALF,
+  CSS.PADDING.LEFT.QUARTER,
+  CSS.PADDING.LEFT.TWO,
+  CSS.PADDING.LEFT.FOUR,
+  CSS.WIDTH.MAX_FULL,
+  CSS.WIDTH.ZERO,
+  CSS.WIDTH.FULL,
+  CSS.HEIGHT.ZERO,
+  CSS.HEIGHT.FULL,
+  CSS.ALIGN.Y.MIDDLE,
+  CSS.BREAK_WORD,
+  CSS.CURSOR.NOT_ALLOWED,
+  CSS.CURSOR.POINTER,
+  CSS.FONT.SIZE.TWELVE,
+  CSS.FONT.SIZE.FOURTEEN,
+  CSS.FONT.SIZE.SIXTEEN,
+  CSS.FONT.SIZE.TWENTY,
+  CSS.FONT.SIZE.TWENTY_FOUR,
+  CSS.FONT.SIZE.THIRTY_TWO,
+  CSS.FONT.WEIGHT.FOUR_HUNDRED,
+  CSS.FONT.WEIGHT.FIVE_HUNDRED,
+  CSS.FONT.WEIGHT.SIX_HUNDRED,
+  CSS.FONT.WEIGHT.SEVEN_HUNDRED,
+  CSS.LIST_BULLETS.OFF,
+  CSS.OBJECT.CENTER,
+  CSS.OBJECT.CONTAIN,
+  CSS.OBJECT.COVER,
+  CSS.OBJECT.SCALE_DOWN,
+  CSS.POINTER_EVENTS.ON,
+  CSS.POINTER_EVENTS.OFF,
+  CSS.SCROLLBAR.OFF,
+  CSS.SHADOW.BOTTOM,
+  CSS.SHADOW.TOP,
+  CSS.SNAP.ON,
+  CSS.SNAP_ALIGN.START,
+  CSS.ALIGN.X.LEFT,
+  CSS.ALIGN.X.CENTER,
+  CSS.ALIGN.X.RIGHT,
+  CSS.TEXT_TRANSFORM.LOWER,
+  CSS.TEXT_TRANSFORM.NONE,
+  CSS.TEXT_TRANSFORM.UPPER,
+  CSS.UNDERLINE,
+  CSS.UNDERLINE.HOVER,
+  CSS.UNDERLINE.OFF,
+  CSS.VISIBILITY.ON,
+  CSS.VISIBILITY.OFF,
+  CSS.WHITESPACE_WRAP.OFF,
+  CSS.OVERFLOW.XY.AUTO,
+  CSS.OVERFLOW.XY.HIDDEN,
+  CSS.OVERFLOW.X.AUTO,
+  CSS.OVERFLOW.X.HIDDEN,
+  CSS.OVERFLOW.X.SCROLL,
+  CSS.OVERFLOW.Y.AUTO,
+  CSS.OVERFLOW.Y.HIDDEN,
+] as const;

package/src/types/Tab.ts

@@ -0,0 +1,5 @@
+export type Tab = {
+  count?: number;
+  dataTrack?: string;
+  label: string;
+};

package/src/types/Target.ts

@@ -0,0 +1,6 @@
+export const TARGET = {
+  BLANK: '_blank',
+  SELF: undefined,
+} as const;
+
+export type Target = (typeof TARGET)[keyof typeof TARGET];

package/src/types/TextInput.ts

@@ -0,0 +1,16 @@
+export const TEXT_INPUT_TYPE = {
+  DATE: 'date',
+  DATETIME_LOCAL: 'datetime-local',
+  EMAIL: 'email',
+  MONTH: 'month',
+  NUMBER: 'number',
+  PASSWORD: 'password',
+  SEARCH: 'search',
+  TEL: 'tel',
+  TEXT: 'text',
+  TIME: 'time',
+  URL: 'url',
+  WEEK: 'week',
+} as const;
+
+export type TextInputType = (typeof TEXT_INPUT_TYPE)[keyof typeof TEXT_INPUT_TYPE];

package/src/types/Validation.ts

@@ -0,0 +1,24 @@
+import { FORMAT_REGEX } from '@/types/Formatted';
+import { checkFormat } from '@/utilities/validation';
+
+export const VALIDATOR = {
+  ALPHA_NUMBER_EMPTY: checkFormat(FORMAT_REGEX.alphaNumberOrEmpty),
+  ALPHA_SPACE: checkFormat(FORMAT_REGEX.alphaSpace),
+  EMAIL: checkFormat(FORMAT_REGEX.email),
+  NUMBER: checkFormat(FORMAT_REGEX.numberFormatted),
+  PHONE: checkFormat(FORMAT_REGEX.phone),
+} as const;
+
+export type ValidationError = string | boolean;
+export type ValidationResult = {
+  message: string;
+  valid: boolean;
+};
+
+export type ValidationLength = {
+  maxlength?: number;
+  minlength?: number;
+  value: string;
+};
+
+export type Validator = (value: string) => ValidationResult;