@saas-ui/react 2.11.2 → 3.0.0-alpha.1

package/src/theme/slot-recipes.ts

@@ -0,0 +1,104 @@
+import { appShellSlotRecipe } from '#components/app-shell/app-shell.recipe.ts'
+import { gridListSlotRecipe } from '#components/grid-list/grid-list.recipe.ts'
+import { loadingOverlaySlotRecipe } from '#components/loading-overlay/loading-overlay.recipe.ts'
+import { navbarSlotRecipe } from '#components/navbar/navbar.recipe.ts'
+import { personaSlotRecipe } from '#components/persona/persona.recipe.ts'
+import { sidebarNavItemSlotRecipe } from '#components/sidebar/sidebar-item.recipe.ts'
+import { sidebarSlotRecipe } from '#components/sidebar/sidebar.recipe.ts'
+
+import { accordionSlotRecipe } from './recipes/chakra/accordion'
+import { actionBarSlotRecipe } from './recipes/chakra/action-bar'
+import { alertSlotRecipe } from './recipes/chakra/alert'
+import { avatarSlotRecipe } from './recipes/chakra/avatar'
+import { blockquoteSlotRecipe } from './recipes/chakra/blockquote'
+import { breadcrumbSlotRecipe } from './recipes/chakra/breadcrumb'
+import { cardSlotRecipe } from './recipes/chakra/card'
+import { checkboxSlotRecipe } from './recipes/chakra/checkbox'
+import { checkboxCardSlotRecipe } from './recipes/chakra/checkbox-card'
+import { collapsibleSlotRecipe } from './recipes/chakra/collapsible'
+import { dataListSlotRecipe } from './recipes/chakra/data-list'
+import { dialogSlotRecipe } from './recipes/chakra/dialog'
+import { drawerSlotRecipe } from './recipes/chakra/drawer'
+import { editableSlotRecipe } from './recipes/chakra/editable'
+import { emptyStateSlotRecipe } from './recipes/chakra/empty-state'
+import { fieldSlotRecipe } from './recipes/chakra/field'
+import { fileUploadSlotRecipe } from './recipes/chakra/file-upload'
+import { hoverCardSlotRecipe } from './recipes/chakra/hover-card'
+import { listSlotRecipe } from './recipes/chakra/list'
+import { menuSlotRecipe } from './recipes/chakra/menu'
+import { nativeSelectSlotRecipe } from './recipes/chakra/native-select'
+import { numberInputSlotRecipe } from './recipes/chakra/number-input'
+import { pinInputSlotRecipe } from './recipes/chakra/pin-input'
+import { popoverSlotRecipe } from './recipes/chakra/popover'
+import { progressSlotRecipe } from './recipes/chakra/progress'
+import { progressCircleSlotRecipe } from './recipes/chakra/progress-circle'
+import { radioCardSlotRecipe } from './recipes/chakra/radio-card'
+import { radioGroupSlotRecipe } from './recipes/chakra/radio-group'
+import { ratingGroupSlotRecipe } from './recipes/chakra/rating-group'
+import { segmentGroupSlotRecipe } from './recipes/chakra/segment-group'
+import { selectSlotRecipe } from './recipes/chakra/select'
+import { sliderSlotRecipe } from './recipes/chakra/slider'
+import { statSlotRecipe } from './recipes/chakra/stat'
+import { statusSlotRecipe } from './recipes/chakra/status'
+import { stepsSlotRecipe } from './recipes/chakra/steps'
+import { switchSlotRecipe } from './recipes/chakra/switch'
+import { tableSlotRecipe } from './recipes/chakra/table'
+import { tabsSlotRecipe } from './recipes/chakra/tabs'
+import { tagSlotRecipe } from './recipes/chakra/tag'
+import { timelineSlotRecipe } from './recipes/chakra/timeline'
+import { toastSlotRecipe } from './recipes/chakra/toast'
+import { tooltipSlotRecipe } from './recipes/chakra/tooltip'
+
+export const slotRecipes = {
+  // Chakra UI Recipes
+  accordion: accordionSlotRecipe,
+  actionBar: actionBarSlotRecipe,
+  alert: alertSlotRecipe,
+  avatar: avatarSlotRecipe,
+  blockquote: blockquoteSlotRecipe,
+  breadcrumb: breadcrumbSlotRecipe,
+  card: cardSlotRecipe,
+  checkbox: checkboxSlotRecipe,
+  checkboxCard: checkboxCardSlotRecipe,
+  collapsible: collapsibleSlotRecipe,
+  dataList: dataListSlotRecipe,
+  dialog: dialogSlotRecipe,
+  drawer: drawerSlotRecipe,
+  editable: editableSlotRecipe,
+  emptyState: emptyStateSlotRecipe,
+  field: fieldSlotRecipe,
+  fileUpload: fileUploadSlotRecipe,
+  hoverCard: hoverCardSlotRecipe,
+  list: listSlotRecipe,
+  menu: menuSlotRecipe,
+  nativeSelect: nativeSelectSlotRecipe,
+  numberInput: numberInputSlotRecipe,
+  pinInput: pinInputSlotRecipe,
+  popover: popoverSlotRecipe,
+  progress: progressSlotRecipe,
+  progressCircle: progressCircleSlotRecipe,
+  radioCard: radioCardSlotRecipe,
+  radioGroup: radioGroupSlotRecipe,
+  ratingGroup: ratingGroupSlotRecipe,
+  segmentGroup: segmentGroupSlotRecipe,
+  select: selectSlotRecipe,
+  slider: sliderSlotRecipe,
+  stat: statSlotRecipe,
+  steps: stepsSlotRecipe,
+  switch: switchSlotRecipe,
+  table: tableSlotRecipe,
+  tabs: tabsSlotRecipe,
+  tag: tagSlotRecipe,
+  toast: toastSlotRecipe,
+  tooltip: tooltipSlotRecipe,
+  status: statusSlotRecipe,
+  timeline: timelineSlotRecipe,
+  // Saas UI Recipes
+  appShell: appShellSlotRecipe,
+  loadingOverlay: loadingOverlaySlotRecipe,
+  persona: personaSlotRecipe,
+  gridList: gridListSlotRecipe,
+  navbar: navbarSlotRecipe,
+  sidebar: sidebarSlotRecipe,
+  sidebarNavItem: sidebarNavItemSlotRecipe,
+}

package/src/theme/text-styles.ts

@@ -0,0 +1,39 @@
+import { defineTextStyles } from '@chakra-ui/react'
+
+export const textStyles: any = defineTextStyles({
+  '2xs': { value: { fontSize: '2xs', lineHeight: '0.75rem' } },
+  xs: { value: { fontSize: 'xs', lineHeight: '1rem' } },
+  sm: { value: { fontSize: 'sm', lineHeight: '1.25rem' } },
+  md: { value: { fontSize: 'md', lineHeight: '1.5rem' } },
+  lg: { value: { fontSize: 'lg', lineHeight: '1.75rem' } },
+  xl: { value: { fontSize: 'xl', lineHeight: '1.875rem' } },
+  '2xl': { value: { fontSize: '2xl', lineHeight: '2rem' } },
+  '3xl': { value: { fontSize: '3xl', lineHeight: '2.375rem' } },
+  '4xl': {
+    value: {
+      fontSize: '4xl',
+      lineHeight: '2.75rem',
+      letterSpacing: '-0.025em',
+    },
+  },
+  '5xl': {
+    value: {
+      fontSize: '5xl',
+      lineHeight: '3.75rem',
+      letterSpacing: '-0.025em',
+    },
+  },
+  '6xl': {
+    value: { fontSize: '6xl', lineHeight: '4.5rem', letterSpacing: '-0.025em' },
+  },
+  '7xl': {
+    value: {
+      fontSize: '7xl',
+      lineHeight: '5.75rem',
+      letterSpacing: '-0.025em',
+    },
+  },
+  none: {
+    value: {},
+  },
+})

package/src/theme/tokens/animations.ts

@@ -0,0 +1,8 @@
+import { defineTokens } from '@chakra-ui/react'
+
+export const animations = defineTokens.animations({
+  spin: { value: 'spin 1s linear infinite' },
+  ping: { value: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite' },
+  pulse: { value: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' },
+  bounce: { value: 'bounce 1s infinite' },
+})

package/src/theme/tokens/aspect-ratios.ts

@@ -0,0 +1,10 @@
+import { defineTokens } from '@chakra-ui/react'
+
+export const aspectRatios = defineTokens.aspectRatios({
+  square: { value: '1 / 1' },
+  landscape: { value: '4 / 3' },
+  portrait: { value: '3 / 4' },
+  wide: { value: '16 / 9' },
+  ultrawide: { value: '18 / 5' },
+  golden: { value: '1.618 / 1' },
+})

package/src/theme/tokens/blurs.ts

@@ -0,0 +1,12 @@
+import { defineTokens } from '@chakra-ui/react'
+
+export const blurs = defineTokens.blurs({
+  none: { value: ' ' },
+  sm: { value: '4px' },
+  md: { value: '8px' },
+  lg: { value: '12px' },
+  xl: { value: '16px' },
+  '2xl': { value: '24px' },
+  '3xl': { value: '40px' },
+  '4xl': { value: '64px' },
+})

package/src/theme/tokens/borders.ts

@@ -0,0 +1,9 @@
+import { defineTokens } from '@chakra-ui/react'
+
+export const borders = defineTokens.borders({
+  xs: { value: '0.5px solid' },
+  sm: { value: '1px solid' },
+  md: { value: '2px solid' },
+  lg: { value: '4px solid' },
+  xl: { value: '8px solid' },
+})

package/src/theme/tokens/colors.ts

@@ -0,0 +1,177 @@
+import { defineTokens } from '@chakra-ui/react'
+
+export const colors = defineTokens.colors({
+  transparent: { value: 'transparent' },
+  current: { value: 'currentColor' },
+  black: { value: '#09090B' },
+  white: { value: '#FFFFFF' },
+  whiteAlpha: {
+    50: { value: 'rgba(255, 255, 255, 0.04)' },
+    100: { value: 'rgba(255, 255, 255, 0.06)' },
+    200: { value: 'rgba(255, 255, 255, 0.08)' },
+    300: { value: 'rgba(255, 255, 255, 0.16)' },
+    400: { value: 'rgba(255, 255, 255, 0.24)' },
+    500: { value: 'rgba(255, 255, 255, 0.36)' },
+    600: { value: 'rgba(255, 255, 255, 0.48)' },
+    700: { value: 'rgba(255, 255, 255, 0.64)' },
+    800: { value: 'rgba(255, 255, 255, 0.80)' },
+    900: { value: 'rgba(255, 255, 255, 0.92)' },
+    950: { value: 'rgba(255, 255, 255, 0.95)' },
+  },
+  blackAlpha: {
+    50: { value: 'rgba(0, 0, 0, 0.04)' },
+    100: { value: 'rgba(0, 0, 0, 0.06)' },
+    200: { value: 'rgba(0, 0, 0, 0.08)' },
+    300: { value: 'rgba(0, 0, 0, 0.16)' },
+    400: { value: 'rgba(0, 0, 0, 0.24)' },
+    500: { value: 'rgba(0, 0, 0, 0.36)' },
+    600: { value: 'rgba(0, 0, 0, 0.48)' },
+    700: { value: 'rgba(0, 0, 0, 0.64)' },
+    800: { value: 'rgba(0, 0, 0, 0.80)' },
+    900: { value: 'rgba(0, 0, 0, 0.92)' },
+    950: { value: 'rgba(0, 0, 0, 0.95)' },
+  },
+  gray: {
+    50: { value: '#fafafa' },
+    100: { value: '#f4f4f5' },
+    200: { value: '#e4e4e7' },
+    300: { value: '#d4d4d8' },
+    400: { value: '#a1a1aa' },
+    500: { value: '#71717a' },
+    600: { value: '#52525b' },
+    700: { value: '#3f3f46' },
+    800: { value: '#27272a' },
+    900: { value: '#18181b' },
+    950: { value: '#111111' },
+  },
+  red: {
+    50: { value: '#fef2f2' },
+    100: { value: '#fee2e2' },
+    200: { value: '#fecaca' },
+    300: { value: '#fca5a5' },
+    400: { value: '#f87171' },
+    500: { value: '#ef4444' },
+    600: { value: '#dc2626' },
+    700: { value: '#991919' },
+    800: { value: '#511111' },
+    900: { value: '#300c0c' },
+    950: { value: '#1f0808' },
+  },
+  orange: {
+    50: { value: '#fff7ed' },
+    100: { value: '#ffedd5' },
+    200: { value: '#fed7aa' },
+    300: { value: '#fdba74' },
+    400: { value: '#fb923c' },
+    500: { value: '#f97316' },
+    600: { value: '#ea580c' },
+    700: { value: '#92310a' },
+    800: { value: '#6c2710' },
+    900: { value: '#3b1106' },
+    950: { value: '#220a04' },
+  },
+  yellow: {
+    50: { value: '#fefce8' },
+    100: { value: '#fef9c3' },
+    200: { value: '#fef08a' },
+    300: { value: '#fde047' },
+    400: { value: '#facc15' },
+    500: { value: '#eab308' },
+    600: { value: '#ca8a04' },
+    700: { value: '#845209' },
+    800: { value: '#713f12' },
+    900: { value: '#422006' },
+    950: { value: '#281304' },
+  },
+  green: {
+    50: { value: '#f0fdf4' },
+    100: { value: '#dcfce7' },
+    200: { value: '#bbf7d0' },
+    300: { value: '#86efac' },
+    400: { value: '#4ade80' },
+    500: { value: '#22c55e' },
+    600: { value: '#16a34a' },
+    700: { value: '#116932' },
+    800: { value: '#124a28' },
+    900: { value: '#042713' },
+    950: { value: '#03190c' },
+  },
+  teal: {
+    50: { value: '#f0fdfa' },
+    100: { value: '#ccfbf1' },
+    200: { value: '#99f6e4' },
+    300: { value: '#5eead4' },
+    400: { value: '#2dd4bf' },
+    500: { value: '#14b8a6' },
+    600: { value: '#0d9488' },
+    700: { value: '#0c5d56' },
+    800: { value: '#114240' },
+    900: { value: '#032726' },
+    950: { value: '#021716' },
+  },
+  blue: {
+    50: { value: '#eff6ff' },
+    100: { value: '#dbeafe' },
+    200: { value: '#bfdbfe' },
+    300: { value: '#a3cfff' },
+    400: { value: '#60a5fa' },
+    500: { value: '#3b82f6' },
+    600: { value: '#2563eb' },
+    700: { value: '#173da6' },
+    800: { value: '#1a3478' },
+    900: { value: '#14204a' },
+    950: { value: '#0c142e' },
+  },
+  cyan: {
+    50: { value: '#ecfeff' },
+    100: { value: '#cffafe' },
+    200: { value: '#a5f3fc' },
+    300: { value: '#67e8f9' },
+    400: { value: '#22d3ee' },
+    500: { value: '#06b6d4' },
+    600: { value: '#0891b2' },
+    700: { value: '#0c5c72' },
+    800: { value: '#134152' },
+    900: { value: '#072a38' },
+    950: { value: '#051b24' },
+  },
+  indigo: {
+    50: { value: '#eef2ff' },
+    100: { value: '#e0e7ff' },
+    200: { value: '#c7d2fe' },
+    300: { value: '#a5b4fc' },
+    400: { value: '#818cf8' },
+    500: { value: '#6366f1' },
+    600: { value: '#4f46e5' },
+    700: { value: '#4338ca' },
+    800: { value: '#3730a3' },
+    900: { value: '#312e81' },
+    950: { value: '#1e1b4b' },
+  },
+  purple: {
+    50: { value: '#faf5ff' },
+    100: { value: '#f3e8ff' },
+    200: { value: '#e9d5ff' },
+    300: { value: '#d8b4fe' },
+    400: { value: '#c084fc' },
+    500: { value: '#a855f7' },
+    600: { value: '#9333ea' },
+    700: { value: '#641ba3' },
+    800: { value: '#4a1772' },
+    900: { value: '#2f0553' },
+    950: { value: '#1a032e' },
+  },
+  pink: {
+    50: { value: '#fdf2f8' },
+    100: { value: '#fce7f3' },
+    200: { value: '#fbcfe8' },
+    300: { value: '#f9a8d4' },
+    400: { value: '#f472b6' },
+    500: { value: '#ec4899' },
+    600: { value: '#db2777' },
+    700: { value: '#a41752' },
+    800: { value: '#6d0e34' },
+    900: { value: '#45061f' },
+    950: { value: '#2c0514' },
+  },
+})

package/src/theme/tokens/cursor.ts

@@ -0,0 +1,12 @@
+import { defineTokens } from '@chakra-ui/react'
+
+export const cursor = defineTokens.cursor({
+  button: { value: 'pointer' },
+  checkbox: { value: 'default' },
+  disabled: { value: 'not-allowed' },
+  menuitem: { value: 'default' },
+  option: { value: 'default' },
+  radio: { value: 'default' },
+  slider: { value: 'default' },
+  switch: { value: 'pointer' },
+})

package/src/theme/tokens/durations.ts

@@ -0,0 +1,11 @@
+import { defineTokens } from '@chakra-ui/react'
+
+export const durations = defineTokens.durations({
+  fastest: { value: '50ms' },
+  faster: { value: '100ms' },
+  fast: { value: '150ms' },
+  moderate: { value: '200ms' },
+  slow: { value: '300ms' },
+  slower: { value: '400ms' },
+  slowest: { value: '500ms' },
+})

package/src/theme/tokens/easings.ts

@@ -0,0 +1,10 @@
+import { defineTokens } from '@chakra-ui/react'
+
+export const easings = defineTokens.easings({
+  'ease-in': { value: 'cubic-bezier(0.42, 0, 1, 1)' },
+  'ease-out': { value: 'cubic-bezier(0, 0, 0.58, 1)' },
+  'ease-in-out': { value: 'cubic-bezier(0.42, 0, 0.58, 1)' },
+  'ease-in-smooth': { value: 'cubic-bezier(0.32, 0.72, 0, 1)' },
+  'bounce-in': { value: 'cubic-bezier(0.34, 1.24, 0.64, 1)' },
+  'bounce-out': { value: 'cubic-bezier(0.34, 1.16, 0.64, 1)' },
+})

package/src/theme/tokens/font-sizes.ts

@@ -0,0 +1,20 @@
+import { defineTokens } from '@chakra-ui/react'
+
+import { scaleToken } from '../utils'
+
+export const fontSizes = defineTokens.fontSizes({
+  '2xs': { value: scaleToken('0.65rem') },
+  xs: { value: scaleToken('0.725rem') },
+  sm: { value: scaleToken('0.875rem') },
+  md: { value: scaleToken('1rem') },
+  lg: { value: scaleToken('1.125rem') },
+  xl: { value: scaleToken('1.25rem') },
+  '2xl': { value: scaleToken('1.5rem') },
+  '3xl': { value: scaleToken('1.875rem') },
+  '4xl': { value: scaleToken('2.25rem') },
+  '5xl': { value: scaleToken('3rem') },
+  '6xl': { value: scaleToken('3.75rem') },
+  '7xl': { value: scaleToken('4.5rem') },
+  '8xl': { value: scaleToken('6rem') },
+  '9xl': { value: scaleToken('8rem') },
+})

package/src/theme/tokens/font-weights.ts

@@ -0,0 +1,13 @@
+import { defineTokens } from '@chakra-ui/react'
+
+export const fontWeights = defineTokens.fontWeights({
+  thin: { value: '100' },
+  extralight: { value: '200' },
+  light: { value: '300' },
+  normal: { value: '400' },
+  medium: { value: '500' },
+  semibold: { value: '600' },
+  bold: { value: '700' },
+  extrabold: { value: '800' },
+  black: { value: '900' },
+})

package/src/theme/tokens/fonts.ts

@@ -0,0 +1,15 @@
+import { defineTokens } from '@chakra-ui/react'
+
+const fallback = `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`
+
+export const fonts = defineTokens.fonts({
+  heading: {
+    value: `Inter Variable, Inter, ${fallback}`,
+  },
+  body: {
+    value: `Inter Variable, Inter, ${fallback}`,
+  },
+  mono: {
+    value: `SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`,
+  },
+})

package/src/theme/tokens/keyframes.ts

@@ -0,0 +1,173 @@
+import { defineKeyframes } from '@chakra-ui/react'
+
+type CssKeyframes = Record<string, Record<string, object>>
+
+export const keyframes: CssKeyframes = defineKeyframes({
+  spin: {
+    '0%': { transform: 'rotate(0deg)' },
+    '100%': { transform: 'rotate(360deg)' },
+  },
+
+  pulse: {
+    '50%': { opacity: '0.5' },
+  },
+
+  ping: {
+    '75%, 100%': {
+      transform: 'scale(2)',
+      opacity: '0',
+    },
+  },
+
+  bounce: {
+    '0%, 100%': {
+      transform: 'translateY(-25%)',
+      animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
+    },
+    '50%': {
+      transform: 'none',
+      animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
+    },
+  },
+
+  'bg-position': {
+    from: { backgroundPosition: 'var(--animate-from, 1rem) 0' },
+    to: { backgroundPosition: 'var(--animate-to, 0) 0' },
+  },
+
+  position: {
+    from: {
+      insetInlineStart: 'var(--animate-from-x)',
+      insetBlockStart: 'var(--animate-from-y)',
+    },
+    to: {
+      insetInlineStart: 'var(--animate-to-x)',
+      insetBlockStart: 'var(--animate-to-y)',
+    },
+  },
+
+  'circular-progress': {
+    '0%': {
+      strokeDasharray: '1, 400',
+      strokeDashoffset: '0',
+    },
+    '50%': {
+      strokeDasharray: '400, 400',
+      strokeDashoffset: '-100%',
+    },
+    '100%': {
+      strokeDasharray: '400, 400',
+      strokeDashoffset: '-260%',
+    },
+  },
+
+  // collapse
+  'expand-height': {
+    from: { height: '0' },
+    to: { height: 'var(--height)' },
+  },
+  'collapse-height': {
+    from: { height: 'var(--height)' },
+    to: { height: '0' },
+  },
+  'expand-width': {
+    from: { width: '0' },
+    to: { width: 'var(--width)' },
+  },
+  'collapse-width': {
+    from: { height: 'var(--width)' },
+    to: { height: '0' },
+  },
+
+  // fade
+  'fade-in': {
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+  },
+  'fade-out': {
+    from: { opacity: 1 },
+    to: { opacity: 0 },
+  },
+
+  // slide from (full)
+  'slide-from-left-full': {
+    from: { translate: '-100% 0' },
+    to: { translate: '0 0' },
+  },
+  'slide-from-right-full': {
+    from: { translate: '100% 0' },
+    to: { translate: '0 0' },
+  },
+  'slide-from-top-full': {
+    from: { translate: '0 -100%' },
+    to: { translate: '0 0' },
+  },
+  'slide-from-bottom-full': {
+    from: { translate: '0 100%' },
+    to: { translate: '0 0' },
+  },
+
+  // slide to (full)
+  'slide-to-left-full': {
+    from: { translate: '0 0' },
+    to: { translate: '-100% 0' },
+  },
+  'slide-to-right-full': {
+    from: { translate: '0 0' },
+    to: { translate: '100% 0' },
+  },
+  'slide-to-top-full': {
+    from: { translate: '0 0' },
+    to: { translate: '0 -100%' },
+  },
+  'slide-to-bottom-full': {
+    from: { translate: '0 0' },
+    to: { translate: '0 100%' },
+  },
+
+  // slide from
+  'slide-from-top': {
+    '0%': { translate: '0 -0.5rem' },
+    to: { translate: '0' },
+  },
+  'slide-from-bottom': {
+    '0%': { translate: '0 0.5rem' },
+    to: { translate: '0' },
+  },
+  'slide-from-left': {
+    '0%': { translate: '-0.5rem 0' },
+    to: { translate: '0' },
+  },
+  'slide-from-right': {
+    '0%': { translate: '0.5rem 0' },
+    to: { translate: '0' },
+  },
+
+  // slide to
+  'slide-to-top': {
+    '0%': { translate: '0' },
+    to: { translate: '0 -0.5rem' },
+  },
+  'slide-to-bottom': {
+    '0%': { translate: '0' },
+    to: { translate: '0 0.5rem' },
+  },
+  'slide-to-left': {
+    '0%': { translate: '0' },
+    to: { translate: '-0.5rem 0' },
+  },
+  'slide-to-right': {
+    '0%': { translate: '0' },
+    to: { translate: '0.5rem 0' },
+  },
+
+  // scale
+  'scale-in': {
+    from: { scale: '0.95' },
+    to: { scale: '1' },
+  },
+  'scale-out': {
+    from: { scale: '1' },
+    to: { scale: '0.95' },
+  },
+})

package/src/theme/tokens/letter-spacing.ts

@@ -0,0 +1,9 @@
+import { defineTokens } from '@chakra-ui/react'
+
+export const letterSpacings = defineTokens.letterSpacings({
+  tighter: { value: '-0.05em' },
+  tight: { value: '-0.025em' },
+  wide: { value: '0.025em' },
+  wider: { value: '0.05em' },
+  widest: { value: '0.1em' },
+})

package/src/theme/tokens/line-heights.ts

@@ -0,0 +1,19 @@
+import { defineTokens } from '@chakra-ui/react'
+
+import { scaleToken } from '../utils'
+
+export const lineHeights = defineTokens.lineHeights({
+  shorter: { value: scaleToken('1.25') },
+  short: { value: scaleToken('1.375') },
+  moderate: { value: scaleToken('1.5') },
+  tall: { value: scaleToken('1.625') },
+  taller: { value: scaleToken('2') },
+  '3': { value: scaleToken('0.75rem') },
+  '4': { value: scaleToken('1rem') },
+  '5': { value: scaleToken('1.25rem') },
+  '6': { value: scaleToken('1.5rem') },
+  '7': { value: scaleToken('1.75rem') },
+  '8': { value: scaleToken('2rem') },
+  '9': { value: scaleToken('2.25rem') },
+  '10': { value: scaleToken('2.5rem') },
+})

package/src/theme/tokens/radius.ts

@@ -0,0 +1,18 @@
+import { defineTokens } from '@chakra-ui/react'
+
+import { radiusToken } from '../utils'
+
+export const radii = defineTokens.radii({
+  '2xs': {
+    value: radiusToken('0.0625rem'),
+  },
+  xs: { value: radiusToken('0.125rem') },
+  sm: { value: radiusToken('0.25rem') },
+  md: { value: radiusToken('0.375rem') },
+  lg: { value: radiusToken('0.5rem') },
+  xl: { value: radiusToken('0.75rem') },
+  '2xl': { value: radiusToken('1rem') },
+  '3xl': { value: radiusToken('1.5rem') },
+  '4xl': { value: radiusToken('2rem') },
+  full: { value: 'var(--radius-full)' },
+})