@getcortexlabs/mavis-core 0.1.0-alpha.1 → 0.1.0-alpha.2

package/src/index.ts

@@ -16,4 +16,7 @@ export { sliderScale } from './slider.js'
 export { resolveDimension, resolveRadius, nonNegative } from './layout.js'
 export type { Dimension } from './layout.js'
 export { validateInput } from './input.js'
+export { icons, iconFontVersion } from './icons.js'
+export { iconGlyph, iconFontFamily, iconSizes, resolveIconSize, checkIconOnly } from './icon.js'
+export type { IconName, IconSize } from './icon.js'
 export type { InputHandle } from './input.js'

package/src/vue/global-components.ts

@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
     MButton: DefineComponent<ComponentProps['MButton'] & Action>
     MSlider: DefineComponent<ComponentProps['MSlider'] & Model>
     MInput: DefineComponent<ComponentProps['MInput'] & InputEvents>
+    MIcon: DefineComponent<ComponentProps['MIcon']>
     MReveal: DefineComponent<ComponentProps['MReveal']>
   }
 }

package/src/vue/index.ts

@@ -1,5 +1,11 @@
 export { createThemeContext, themeKey, useMavisTheme } from './theme.js'
-export type { MavisThemeContext } from './theme.js'
+export type {
+  MavisThemeContext,
+  Appearance,
+  AppearanceMode,
+  AppearanceSource,
+  ThemeContextOptions,
+} from './theme.js'
 export { layoutDirection, useDefaultShrink } from './layout-context.js'
 export { textContent } from './text-content.js'
 export type {} from './global-components.js'
@@ -14,6 +20,7 @@ export {
   sliderProps,
   inputProps,
   inputEmits,
+  iconProps,
   screenProps,
   revealProps,
   componentProps,

package/src/vue/props.ts

@@ -1,6 +1,7 @@
 import type { ExtractPropTypes, ExtractPublicPropTypes, PropType } from '@vue/runtime-core'
 import type { Palette, Spacing, Radius } from '../theme/types.js'
 import type { Dimension } from '../layout.js'
+import { iconSizes, type IconName, type IconSize } from '../icon.js'
 
 function choice<T extends string>(values: readonly T[], defaultValue: T) {
   return {
@@ -77,32 +78,32 @@ export const buttonProps = {
   disabled: Boolean,
   loading: Boolean,
   loadingText: { type: String, default: 'Loading…' },
+  icon: { type: String as PropType<IconName>, default: undefined },
+  trailingIcon: { type: String as PropType<IconName>, default: undefined },
 }
+const tones: readonly (keyof Palette)[] = [
+  'background',
+  'surface',
+  'elevated',
+  'text',
+  'muted',
+  'primary',
+  'onPrimary',
+  'primarySoft',
+  'accent',
+  'onAccent',
+  'accentSoft',
+  'border',
+  'success',
+  'danger',
+]
 export const textProps = {
   ...viewProps,
   ...flexProps,
   text: { type: String, default: undefined },
   as: choice(['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const, 'p'),
   variant: choice(['display', 'title', 'heading', 'body', 'caption', 'overline'] as const, 'body'),
-  tone: choice<keyof Palette>(
-    [
-      'background',
-      'surface',
-      'elevated',
-      'text',
-      'muted',
-      'primary',
-      'onPrimary',
-      'primarySoft',
-      'accent',
-      'onAccent',
-      'accentSoft',
-      'border',
-      'success',
-      'danger',
-    ],
-    'text',
-  ),
+  tone: choice<keyof Palette>(tones, 'text'),
   align: choice(['left', 'center', 'right'] as const, 'left'),
   wrap: { type: Boolean, default: true },
 }
@@ -139,6 +140,8 @@ export const inputProps = {
   },
   autocorrect: { type: Boolean, default: undefined },
   returnKey: choice(['done', 'next', 'go', 'search', 'send'] as const, 'done'),
+  icon: { type: String as PropType<IconName>, default: undefined },
+  trailingIcon: { type: String as PropType<IconName>, default: undefined },
 }
 export const inputEmits = {
   'update:modelValue': (value: string) => typeof value === 'string',
@@ -146,6 +149,18 @@ export const inputEmits = {
   blur: () => true,
   submit: (value: string) => typeof value === 'string',
 }
+export const iconProps = {
+  id: viewProps.id,
+  name: { type: String as PropType<IconName>, required: true as const },
+  size: {
+    type: [String, Number] as PropType<IconSize>,
+    default: 'md',
+    validator: (value: IconSize) => typeof value === 'number' || value in iconSizes,
+  },
+  tone: choice<keyof Palette>(tones, 'text'),
+  /** Accessible name. Without it the icon is decorative and hidden from assistive technology. */
+  label: { type: String, default: undefined },
+}
 export const screenProps = { ...viewProps, scroll: Boolean }
 export const revealProps = { ...columnProps, show: Boolean }
 export const actionEmits = { click: () => true }
@@ -161,6 +176,7 @@ export const componentProps = {
   MButton: buttonProps,
   MSlider: sliderProps,
   MInput: inputProps,
+  MIcon: iconProps,
   MReveal: revealProps,
 }
 export type BoxProps = ExtractPropTypes<typeof boxProps>

package/src/vue/theme.ts

@@ -2,17 +2,68 @@ import { inject, readonly, shallowRef, type InjectionKey } from '@vue/runtime-co
 import { mavis } from '../theme/themes.js'
 import type { MavisTheme } from '../theme/types.js'
 
-export function createThemeContext(initial: MavisTheme) {
+export type Appearance = MavisTheme['appearance']
+export type AppearanceMode = Appearance | 'system'
+
+/** Platform access to the device appearance; `current` is undefined while it is unknown, such as during SSR. */
+export interface AppearanceSource {
+  current(): Appearance | undefined
+  observe(listener: (appearance: Appearance) => void): () => void
+}
+
+export interface ThemeContextOptions {
+  theme?: MavisTheme
+  darkTheme?: MavisTheme
+  appearance?: AppearanceMode
+  source?: AppearanceSource
+}
+
+const modes: readonly AppearanceMode[] = ['system', 'light', 'dark']
+
+function checkMode(mode: AppearanceMode) {
+  if (!modes.includes(mode)) throw new RangeError(`Unknown appearance mode: ${String(mode)}`)
+  return mode
+}
+
+export function createThemeContext(options: MavisTheme | ThemeContextOptions = {}) {
+  const config: ThemeContextOptions = 'colors' in options ? { theme: options } : options
+  const initial = config.theme ?? mavis
+  const themes: Partial<Record<Appearance, MavisTheme>> = { [initial.appearance]: initial }
+  if (config.darkTheme) themes.dark = config.darkTheme
+  const appearance = shallowRef(checkMode(config.appearance ?? 'system'))
   const theme = shallowRef(initial)
+  const resolve = () => {
+    const wanted =
+      appearance.value === 'system'
+        ? (config.source?.current() ?? initial.appearance)
+        : appearance.value
+    theme.value = themes[wanted] ?? themes[wanted === 'dark' ? 'light' : 'dark'] ?? initial
+  }
+  resolve()
+  const stop = config.source?.observe(() => {
+    if (appearance.value === 'system') resolve()
+  })
   return {
     theme: readonly(theme),
+    /** The selection: `system` follows the device; `light` and `dark` are explicit overrides. */
+    appearance: readonly(appearance),
+    setAppearance(mode: AppearanceMode) {
+      appearance.value = checkMode(mode)
+      resolve()
+    },
+    /** Registers the theme for its own appearance and pins that appearance. */
     setTheme(next: MavisTheme) {
-      theme.value = next
+      themes[next.appearance] = next
+      appearance.value = next.appearance
+      resolve()
+    },
+    dispose() {
+      stop?.()
     },
   }
 }
-
 export type MavisThemeContext = ReturnType<typeof createThemeContext>
+
 export const themeKey: InjectionKey<MavisThemeContext> = Symbol('mavis.theme')
 
 /** Without the plugin, individually imported components use the default theme. */