@telus-uds/components-base 4.0.0-alpha.2 → 4.0.0-beta.0

package/types/SideNav.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface SideNavItemProps {
+  children?: ReactNode
+  label?: string
+  href?: string
+  onPress?: () => void
+  id?: string
+  tokens?: Record<string, string | number | boolean | object>
+}
+
+export interface SideNavItemsGroupProps {
+  children?: ReactNode
+  label: string
+  groupId?: string
+  onToggle?: () => void
+  openGroups?: Array<string | number>
+  isActive?: boolean
+  variant?: Record<string, string | number | boolean | undefined>
+  tokens?: Record<string, string | number | boolean | object>
+}
+
+export interface SideNavProps {
+  children?: ReactNode
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  openGroups?: Array<string | number>
+  onToggle?: (groupId: string) => void
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const SideNav: ComponentType<SideNavProps> & {
+  ItemsGroup: ComponentType<SideNavItemsGroupProps>
+  Item: ComponentType<SideNavItemProps>
+}
+
+export { SideNav }

package/types/Skeleton.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType } from 'react'
+
+export interface SkeletonProps {
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  sizeIndex?: number | Record<string, number>
+  sizePixels?: number | Record<string, number>
+  characters?: number
+  lines?: number
+  shape?: 'line' | 'circle' | 'square'
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const Skeleton: ComponentType<SkeletonProps>
+
+export { Skeleton }

package/types/SkipLink.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface SkipLinkProps {
+  children?: ReactNode
+  href?: string
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const SkipLink: ComponentType<SkipLinkProps>
+
+export { SkipLink }

package/types/Spacer.d.ts

@@ -1,5 +1,12 @@
+import type { ComponentType } from 'react'
+
 export interface SpacerProps {
-  space?: number
+  space?: number | Record<string, number>
   direction?: 'column' | 'row'
   testID?: string
+  dataSet?: Record<string, any>
 }
+
+declare const Spacer: ComponentType<SpacerProps>
+
+export { Spacer }

package/types/StackView.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ComponentType, ReactNode } from 'react'
 import {
   Direction,
   FlexAlign,
@@ -9,7 +9,7 @@ import {
 } from './Common'
 import { DividerProps } from './Divider'
 
-type StackViewTokens = {
+export type StackViewTokens = {
   alignItems?: FlexAlign
   justifyContent?: FlexJustify
   flexGrow?: number
@@ -25,4 +25,10 @@ export interface StackViewProps {
   tag?: SemanticTag
   children: ReactNode
   testID?: string
+  dataSet?: Record<string, any>
+  accessibilityRole?: string
 }
+
+declare const StackView: ComponentType<StackViewProps>
+
+export { StackView }

package/types/Status.d.ts

@@ -1,6 +1,5 @@
-import type { Variant } from '../../components-web/types/common'
-import { ComponentType, ReactNode } from 'react'
-
+import type { ComponentType, ReactNode } from 'react'
+import { Variant } from './Common'
 import { IconProps } from './Icon'
 
 export type StatusTokensProps = {

package/types/StepTracker.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType } from 'react'
+
+export interface StepTrackerProps {
+  current?: number
+  copy?: 'en' | 'fr' | Record<string, any>
+  dictionary?: Record<string, any>
+  steps?: string[]
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const StepTracker: ComponentType<StepTrackerProps>
+
+export { StepTracker }

package/types/TabBar.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface TabBarItem {
+  id: string
+  icon?: ReactNode
+  iconActive?: ReactNode
+  label: string
+  href?: string
+  tokens?: Record<string, string | number | boolean | object>
+}
+
+export interface TabBarProps {
+  items: TabBarItem[]
+  initiallySelectedItem?: number
+  onChange?: (id: string) => void
+  variant?: Record<string, string | number | boolean | undefined>
+  tokens?: Record<string, string | number | boolean | object>
+  accessibilityLabel?: string
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const TabBar: ComponentType<TabBarProps>
+
+export { TabBar }

package/types/Tabs.d.ts

@@ -1,15 +1,18 @@
+import type { ComponentType, ElementType } from 'react'
 import { Size } from './Common'
 import { IconProps } from './Icon'
 import { TypographyVariants, TypographyTokens } from './Typography'
 import { HorizontalScrollButtonTokens } from './HorizontalScrollButton'
 
-type TabsItem = {
+export type TabsItem = {
   label: string
   href: string
   id: string
+  linkRouter?: ElementType
+  linkRouterProps?: Record<string, any>
 }
 
-type TabsVariant = {
+export type TabsVariant = {
   equalWidth?: string
   inverse?: boolean
 }
@@ -19,9 +22,11 @@ export interface TabsProps {
   value?: string
   initialValue?: string
   onChange?: () => void
-  itemTokens?: TabsItem
+  itemTokens?: Partial<TabsTokens>
   scrollButtonTokens?: HorizontalScrollButtonTokens
   variant?: TabsVariant
+  LinkRouter?: ElementType
+  linkRouterProps?: Record<string, any>
 }
 
 export type TabsTokens = {
@@ -44,3 +49,7 @@ export interface TabSelectorProps {
   testID?: string
   selectedTestID?: string
 }
+
+declare const Tabs: ComponentType<TabsProps>
+
+export { Tabs }

package/types/Tags.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentType } from 'react'
+
+export interface TagItem {
+  id?: string
+  label: string
+  accessibilityLabel?: string
+  defaultChecked?: boolean
+  checked?: boolean
+  [key: string]: any
+}
+
+export interface TagsProps {
+  items: TagItem[]
+  maxValues?: number
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  onChange?: (selectedIds: string[]) => void
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const Tags: ComponentType<TagsProps>
+
+export { Tags }

package/types/TextButton.d.ts

@@ -1,11 +1,18 @@
-import React from 'react'
+import type { ComponentType, ReactNode } from 'react'
 import { LinkTokens, LinkAndTextButtonVariants } from './Link'
 
 export interface TextButtonProps {
-  onPress: () => void
-  accessibilityLabel: string
-  children: string | React.ReactNode
+  onPress?: () => void
+  accessibilityLabel?: string
+  children: string | ReactNode
   variant?: LinkAndTextButtonVariants
   tokens?: LinkTokens
   testID?: string
+  href?: string
+  onPressIn?: () => void
+  onPressOut?: () => void
 }
+
+declare const TextButton: ComponentType<TextButtonProps>
+
+export { TextButton }

package/types/TextInput.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentType } from 'react'
+
+export interface TextInputProps {
+  value?: string
+  type?: string
+  initialValue?: string
+  inactive?: boolean
+  readOnly?: boolean
+  onChange?: (value: string, event?: any) => void
+  label?: string
+  hint?: string
+  hintPosition?: 'inline' | 'below'
+  feedback?: string
+  validation?: 'error' | 'success'
+  tooltip?: string | Record<string, any>
+  copy?: 'en' | 'fr'
+  placeholder?: string
+  id?: string
+  name?: string
+  maxLength?: number
+  multiline?: boolean
+  numberOfLines?: number
+  autoComplete?: string
+  autoFocus?: boolean
+  keyboardType?: string
+  returnKeyType?: string
+  secureTextEntry?: boolean
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+  nativeID?: string
+}
+
+declare const TextInput: ComponentType<TextInputProps>
+
+export { TextInput }

package/types/ThemeProvider.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface ThemeMetadata {
+  themeTokensVersion: string
+  name: string
+}
+
+export interface ThemeOptions {
+  forceAbsoluteFontSizing?: boolean
+  contentMaxWidth?: number
+  forceZIndex?: boolean
+  enableHelmetSSR?: boolean
+  enableMediaQueryStyleSheet?: boolean
+}
+
+export interface Theme {
+  metadata: ThemeMetadata
+  [key: string]: any
+}
+
+export interface ThemeProviderProps {
+  children: ReactNode
+  defaultTheme: Theme
+  options?: ThemeOptions
+}
+
+declare const ThemeProvider: ComponentType<ThemeProviderProps>
+
+export { ThemeProvider }

package/types/Timeline.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface TimelineProps {
+  children: ReactNode[]
+  accessibilityLabel: string
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  tag?: string
+  childrenTag?: string
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const Timeline: ComponentType<TimelineProps>
+
+export { Timeline }

package/types/ToggleSwitch.d.ts

@@ -1,6 +1,7 @@
+import type { ComponentType } from 'react'
 import { CopyType } from './Common'
 
-type ToggleSwitchTokens = {
+export type ToggleSwitchTokens = {
   borderColor?: string
   borderWidth?: number
   borderRadius?: number
@@ -17,7 +18,7 @@ type ToggleSwitchTokens = {
   shadow?: string
   alignSelf?: string
   space?: number
-  icon?: React.ReactNode
+  icon?: any
   trackHeight?: number
   outerBorderGapButton?: number
   width?: number
@@ -52,4 +53,12 @@ export interface ToggleSwitchProps {
   testID?: string
   tokens?: ToggleSwitchTokens
   togglePosition?: 'start' | 'end'
+  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
+  onLayout?: (event: any) => void
+  nativeID?: string
+  dataSet?: Record<string, any>
 }
+
+declare const ToggleSwitch: ComponentType<ToggleSwitchProps>
+
+export { ToggleSwitch }

package/types/ToolTip.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react'
+import type { ComponentType, ReactNode } from 'react'
 import { CopyType, Position } from './Common'
 
-type TooltipTokens = {
+export type TooltipTokens = {
   backgroundColor?: string
   paddingTop?: number
   paddingBottom?: number
@@ -19,7 +19,7 @@ type TooltipTokens = {
   arrowOffset?: number
 }
 
-type TooltipVariants = {
+export type TooltipVariants = {
   inverse?: boolean
 }
 
@@ -38,3 +38,7 @@ export interface TooltipProps {
   accessible?: boolean
   testID?: string
 }
+
+declare const Tooltip: ComponentType<TooltipProps>
+
+export { Tooltip }

package/types/TooltipButton.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentType } from 'react'
+
+export interface TooltipButtonPressableState {
+  pressed: boolean
+  hover: boolean
+  focus: boolean
+}
+
+export interface TooltipButtonProps {
+  pressableState?: TooltipButtonPressableState
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+}
+
+declare const TooltipButton: ComponentType<TooltipButtonProps>
+
+export { TooltipButton }

package/types/Typography.d.ts

@@ -1,4 +1,5 @@
-import { LetterSpacing, TextTransform } from './Common'
+import type { ComponentType, ReactNode } from 'react'
+import { LetterSpacing, TextTransform, tagType, headingType, alignType } from './Common'
 
 export interface TypographyProps {
   tag?: tagType | string
@@ -10,7 +11,8 @@ export interface TypographyProps {
   heading?: headingType | string
   accessible?: boolean
   accessibilityLabel?: string
-  children?: React.ReactNode
+  children?: ReactNode
+  dataSet?: Record<string, any>
 }
 
 export type TypographyVariants = {
@@ -38,3 +40,7 @@ export type TypographyTokens = {
   fontScaleCap?: number
   letterSpacing?: LetterSpacing
 }
+
+declare const Typography: ComponentType<TypographyProps>
+
+export { Typography }

package/types/Validator.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType } from 'react'
+
+export interface ValidatorProps {
+  value?: string
+  inactive?: boolean
+  mask?: string
+  onChange?: (value: string) => void
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const Validator: ComponentType<ValidatorProps>
+
+export { Validator }

package/types/ViewportProvider.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export type ViewportKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export interface ViewportProviderProps {
+  children: ReactNode
+  defaultViewport?: ViewportKey
+}
+
+declare const ViewportProvider: ComponentType<ViewportProviderProps>
+
+export { ViewportProvider }