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

package/src/index.ts

@@ -16,4 +16,9 @@ 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'
+export { checkSheetName, sheetCloseReasons } from './sheet.js'
+export type { SheetCloseReason } from './sheet.js'

package/src/sheet.ts

@@ -0,0 +1,17 @@
+/** Why a sheet closed: the component's own control, a platform dismissal, or `open` set to false. */
+export type SheetCloseReason = 'button' | 'backdrop' | 'escape' | 'back' | 'swipe' | 'program'
+
+export const sheetCloseReasons: readonly SheetCloseReason[] = [
+  'button',
+  'backdrop',
+  'escape',
+  'back',
+  'swipe',
+  'program',
+]
+
+export function checkSheetName(title: string | undefined, label: string | undefined) {
+  if (!title && !label) {
+    throw new RangeError('A sheet needs a title or an accessibilityLabel')
+  }
+}

package/src/vue/global-components.ts

@@ -1,5 +1,6 @@
 import type { DefineComponent } from '@vue/runtime-core'
 import type { ComponentProps } from './props.js'
+import type { SheetCloseReason } from '../sheet.js'
 
 type Action = { onClick?: () => void }
 type Model = { 'onUpdate:modelValue'?: (value: number) => void }
@@ -9,6 +10,11 @@ type InputEvents = {
   onBlur?: () => void
   onSubmit?: (value: string) => void
 }
+type SheetEvents = {
+  'onUpdate:open'?: (value: boolean) => void
+  onClose?: (reason: SheetCloseReason) => void
+  onOpened?: () => void
+}
 
 /** Template props come from the same declarations used by both renderers. */
 declare module '@vue/runtime-core' {
@@ -22,6 +28,8 @@ 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']>
+    MSheet: DefineComponent<ComponentProps['MSheet'] & SheetEvents>
   }
 }

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,8 +20,11 @@ export {
   sliderProps,
   inputProps,
   inputEmits,
+  iconProps,
   screenProps,
   revealProps,
+  sheetProps,
+  sheetEmits,
   componentProps,
   viewAttrs,
   actionEmits,

package/src/vue/props.ts

@@ -1,6 +1,8 @@
 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'
+import { sheetCloseReasons, type SheetCloseReason } from '../sheet.js'
 
 function choice<T extends string>(values: readonly T[], defaultValue: T) {
   return {
@@ -77,32 +79,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 +141,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,8 +150,44 @@ export const inputEmits = {
   blur: () => true,
   submit: (value: string) => typeof value === 'string',
 }
-export const screenProps = { ...viewProps, scroll: Boolean }
+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,
+  /** Puts the software keyboard away on a tap outside the editor and, with `scroll`, on a drag towards it. */
+  dismissKeyboard: { type: Boolean, default: true },
+}
 export const revealProps = { ...columnProps, show: Boolean }
+export const sheetProps = {
+  id: viewProps.id,
+  accessibilityLabel: viewProps.accessibilityLabel,
+  open: Boolean,
+  /** Rendered as the sheet heading and used as its accessible name. */
+  title: { type: String, default: undefined },
+  /** Allows the scrim, Escape, the back gesture, swiping down and the close button. */
+  dismissible: { type: Boolean, default: true },
+  fullscreen: Boolean,
+  closeLabel: { type: String, default: 'Close' },
+  padding: { ...spacingProp, default: 'lg' },
+  gap: spacingProp,
+  align: columnProps.align,
+}
+export const sheetEmits = {
+  'update:open': (value: boolean) => typeof value === 'boolean',
+  close: (reason: SheetCloseReason) => sheetCloseReasons.includes(reason),
+  opened: () => true,
+}
 export const actionEmits = { click: () => true }
 export const sliderEmits = { 'update:modelValue': (value: number) => Number.isFinite(value) }
 
@@ -161,7 +201,9 @@ export const componentProps = {
   MButton: buttonProps,
   MSlider: sliderProps,
   MInput: inputProps,
+  MIcon: iconProps,
   MReveal: revealProps,
+  MSheet: sheetProps,
 }
 export type BoxProps = ExtractPropTypes<typeof boxProps>
 export type ComponentProps = {

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. */