npm - origam - Versions diffs - 2.3.0 → 2.6.1 - Mend

origam 2.3.0 → 2.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1155) hide show

package/README.md DELETED Viewed

@@ -1,275 +0,0 @@
-# origam
-[![npm](https://img.shields.io/npm/v/origam.svg)](https://www.npmjs.com/package/origam)
-[![license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
-[![build](https://img.shields.io/badge/build-passing-brightgreen.svg)](#)
-A Vue 3 design system built on modern CSS, design tokens, and a CSS-first
-philosophy. Multi-theme out of the box, token-driven utility classes, and
-~100 production-ready components.
----
-## Installation
-```bash
-npm install origam
-```
-Peer dependencies — pulled in by default, but you can dedupe in your app:
-| Package      | Required | Used by                       |
-|--------------|----------|-------------------------------|
-| `vue`        | `^3.5`   | Always.                       |
-| `vue-i18n`   | `^11.1`  | Optional — locale composable. |
-| `vue-router` | `^4.5`   | Optional — link components.   |
-Node >= 22 is required to **build** the package from source. Consumers only
-need Vue 3.5+ at runtime.
----
-## Quick start
-### 1. Register the plugin
-```ts
-// main.ts
-import { createApp } from 'vue'
-import { createOrigam } from 'origam'
-import 'origam/tokens/css/primitive'
-import 'origam/tokens/css/light'
-import 'origam/tokens/css/utilities'
-import App from './App.vue'
-const origam = createOrigam()
-createApp(App).use(origam).mount('#app')
-```
-`createOrigam()` accepts an options bag (`icons`, `locale`, `display`,
-`date`, `goTo`, `aliases`, `components`, `directives`, `ssr`, `blueprint`).
-All keys are optional — the defaults register every component and every
-directive globally.
-### 2. Use a component
-```vue
-<template>
-  <OrigamBtn intent="primary" @click="onClick">
-    Save
-  </OrigamBtn>
-</template>
-<script setup lang="ts">
-const onClick = () => console.log('clicked')
-</script>
-```
-Tokenised props (`intent`, `rounded`, `elevation`, `size`) emit
-utility classes (`.origam--bg-primary`, `.origam--shadow-md`, ...).
-Custom values (`color="#ff0080"`) fall back to inline styles. See the
-[classes-first conventions](./CLAUDE.md) section in `CLAUDE.md` for
-details.
----
-## Theming
-origam ships three built-in modes: `light`, `dark`, and `auto`
-(follows `prefers-color-scheme`).
-### Static switch
-```html
-<html data-theme="dark">
-```
-Omit the attribute to fall back to `auto`. Brand themes can be registered
-by dropping a `tokens/semantic/brand-{name}.json` file and rebuilding.
-### Runtime switch
-```ts
-import { useTheme } from 'origam'
-const { theme, set, toggle } = useTheme()
-set('dark')      // 'light' | 'dark' | 'auto' | 'brand-x'
-toggle()         // cycles light <-> dark
-```
-`useTheme()` is a module-level singleton — every call shares the same
-`Ref`, persisted in `localStorage` under `origam-theme`.
-### Scoped override
-```vue
-<OrigamThemeProvider theme="dark">
-  <OrigamCard>I am dark, even on a light page.</OrigamCard>
-</OrigamThemeProvider>
-```
-Don't forget to import the matching token sheet (`origam/tokens/css/dark`)
-once at boot — the provider only flips the `data-theme` attribute on the
-sub-tree.
----
-## Design tokens
-Three tiers, in order of specificity:
-| Tier         | Lives in                          | Example CSS variable                       |
-|--------------|-----------------------------------|--------------------------------------------|
-| Primitive    | `tokens/primitive.json`           | `--origam-color-neutral-500`               |
-| Semantic     | `tokens/semantic/{theme}.json`    | `--origam-color-surface-default`           |
-| Component    | `tokens/component/{name}.json`    | `--origam-btn---background-color`          |
-Semantic tokens reference primitives. Components reference semantics. App
-code should consume **semantic** tokens or component variables — never
-primitives directly.
-The `origam-utilities.css` sheet generates 66 utility classes
-(`.origam--bg-*`, `.origam--color-*`, `.origam--shadow-*`,
-`.origam--rounded-*`, ...) that map 1:1 to semantic tokens.
-Tokens are sourced from Tokens Studio (DTCG JSON) and compiled with
-Style Dictionary v4. See [`tokens/`](./tokens) for the source and
-[`scripts/build-tokens.mjs`](./scripts/build-tokens.mjs) for the build.
----
-## Components
-Around 80 component families, all prefixed `Origam*`:
-| Family       | Examples                                                                  |
-|--------------|---------------------------------------------------------------------------|
-| Forms        | `OrigamTextField`, `OrigamSelect`, `OrigamCheckbox`, `OrigamRadio`, `OrigamSwitch`, `OrigamSliderField`, `OrigamRatingField`, `OrigamDatePickerField`, `OrigamColorPickerField`, `OrigamFileField`, `OrigamPasswordField`, `OrigamOtpInputField`, `OrigamNumberField`, `OrigamForm` |
-| Navigation   | `OrigamToolbar`, `OrigamBottomNav`, `OrigamBreadcrumb`, `OrigamDrawer`, `OrigamPagination`, `OrigamStepper`, `OrigamTreeview` |
-| Layout       | `OrigamApp`, `OrigamMain`, `OrigamSection`, `OrigamLayout`, `OrigamGrids`, `OrigamDivider`, `OrigamSystemBar` |
-| Feedback     | `OrigamAlert`, `OrigamSnackbar`, `OrigamProgress`, `OrigamLoader`, `OrigamSkeleton`, `OrigamBadge`, `OrigamMessages` |
-| Overlay      | `OrigamDialog`, `OrigamMenu`, `OrigamTooltip`, `OrigamSheet`, `OrigamContextualMenu`, `OrigamOverlay`, `OrigamConfirmWrapper` |
-| Data         | `OrigamDataTable`, `OrigamDataList`, `OrigamTable`, `OrigamCarousel`, `OrigamTimeline`, `OrigamExpansionPanel`, `OrigamVirtualScroll`, `OrigamInfiniteScroll` |
-| Display      | `OrigamCard`, `OrigamChip`, `OrigamAvatar`, `OrigamIcon`, `OrigamImg`, `OrigamKbd`, `OrigamTitle`, `OrigamLabel` |
-The full catalogue lives in [`src/components/index.ts`](./src/components/index.ts).
----
-## Composables
-A library of ~80 composables. The ones you'll touch most often:
-| Composable          | Purpose                                                            |
-|---------------------|--------------------------------------------------------------------|
-| `useTheme`          | Read / set / toggle the active theme.                              |
-| `useColor`          | Resolve a tokenised intent into class + style outputs.             |
-| `useBackgroundColor`| Same, scoped to `background-color`.                                |
-| `useTextColor`      | Same, scoped to `color`.                                           |
-| `useColorEffect`    | Hover / active / disabled state on top of `useColor`.              |
-| `useRounded`        | Tokenised `border-radius`.                                         |
-| `useElevation`      | Tokenised box shadow.                                              |
-| `useBorder`         | Tokenised border width + color.                                    |
-| `useSize`           | Tokenised dimensions.                                              |
-| `useMargin`         | Tokenised margin (utility classes).                                |
-| `usePadding`        | Tokenised padding (utility classes).                               |
-| `useDensity`        | Density modifier (compact / comfortable / default).                |
-| `useCssSupport`     | Reactive feature-detection — gate CSS paths vs JS fallbacks.       |
-| `useDisplay`        | Reactive viewport / breakpoints.                                   |
-| `useLocale`         | Locale provider (RTL-aware).                                       |
-| `useGoTo`           | Smooth-scroll helper, configurable per-locale.                     |
-| `useDefaults`       | Read the component-defaults injected by `<OrigamDefaultsProvider>`.|
-Full list in [`src/composables/index.ts`](./src/composables/index.ts).
----
-## CSS-first principle
-origam treats modern CSS as a first-class platform. Container queries,
-`:has()`, `color-mix()`, `subgrid`, `view-transition-name`, and
-`aspect-ratio` are preferred over JS equivalents. Components branch to a
-JS fallback **only** when feature detection fails:
-```ts
-const { css } = useCssSupport()
-if (css.value.containerQueries) {
-  // CSS path
-} else {
-  // ResizeObserver fallback
-}
-```
-The full feature matrix lives in
-[`src/composables/CssSupport/cssSupport.composable.ts`](./src/composables/CssSupport/cssSupport.composable.ts).
-Never call `CSS.supports()` directly — always go through `useCssSupport()`
-so the matrix stays auditable.
----
-## Nuxt integration
-origam ships an official Nuxt 3 / Nuxt 4 module as a sub-export — no
-separate package to install. Add `'origam/nuxt'` to your `modules` and
-get auto-imports for every component and composable, SSR-safe theme
-resolution (cookie + `Sec-CH-Prefers-Color-Scheme` — no FOUC, no
-hydration mismatch) and the right token stylesheets injected in order.
-```ts
-export default defineNuxtConfig({
-    modules: ['origam/nuxt'],
-    origam: {
-        themes: ['light', 'dark'],
-        defaultTheme: 'auto'
-    }
-})
-```
-Full reference: [`docs/integrations/nuxt.md`](./docs/integrations/nuxt.md).
----
-## Browser support
-| Browser         | Minimum    |
-|-----------------|------------|
-| Chrome / Edge   | last 2     |
-| Firefox         | last 2     |
-| Safari          | 16+        |
-Older browsers still receive a degraded but functional experience through
-the `useCssSupport()` fallback paths. Building the package locally
-requires **Node >= 22** (see [`.nvmrc`](./.nvmrc)).
----
-## Contributing
-Engineering principles, naming conventions, the classes-first contract,
-and the "test-as-you-build" rule live in [`CLAUDE.md`](./CLAUDE.md).
-Token authoring (Tokens Studio JSON, Style Dictionary pipeline) lives in
-[`tokens/`](./tokens) and is documented in
-[`tokens/CHANGELOG.md`](./tokens/CHANGELOG.md).
-Local commands:
-```bash
-npm install
-npm run server:dev     # Vite playground
-npm run story:dev      # Histoire stories
-npm run docs:dev       # VitePress docs
-npm run tokens:build   # Rebuild CSS/SCSS/TS tokens
-npm run test:unit      # Vitest
-npm run test:e2e       # Playwright
-```
----
-## License
-[MIT](./LICENSE) (c) 2024 Prioul Arnaud

package/dist/src/App.vue DELETED Viewed

@@ -1,25 +0,0 @@
-<script setup>
-import { OrigamApp, OrigamDrawer, OrigamList, OrigamListItem, OrigamMain, OrigamToolbar } from "./components";
-</script>
-<template>
-	<origam-app>
-		<origam-toolbar
-				:order="1"
-				title="Application bar"
-		></origam-toolbar>
-		<origam-drawer :order="2">
-			<origam-list>
-				<origam-list-item title="Navigation drawer"/>
-			</origam-list>
-		</origam-drawer>
-		<origam-main
-				:order="3"
-				style="min-height: 300px;"
-		>
-		</origam-main>
-	</origam-app>
-</template>

package/dist/src/components/SliderField/OrigamSliderFieldThumb.vue DELETED Viewed

@@ -1,384 +0,0 @@
-<template>
-	<div
-			:aria-orientation="direction"
-			:aria-readonly="!!readonly"
-			:aria-valuemax="max"
-			:aria-valuemin="min"
-			:aria-valuenow="modelValue"
-			:class="sliderFieldThumbClasses"
-			:style="sliderFieldThumbStyles"
-			:tabindex="isDisabled ? -1 : 0"
-			role="slider"
-			@keydown="!isReadonly ? handleKeydown : undefined"
-	>
-		<div
-				:class="sliderFieldThumbSurfaceClasses"
-				:style="sliderFieldThumbSurfaceStyles"
-		/>
-		<div
-				v-ripple="rippleProps"
-				:class="sliderFieldThumbRippleClasses"
-				:style="sliderFieldThumbRippleStyles"
-		/>
-		<origam-translate-scale origin="bottom center">
-			<div
-					v-show="showLabel"
-					class="origam-slider-field-thumb__label-container"
-			>
-				<div class="origam-slider-field-thumb__label">
-					<slot
-							name="default"
-							v-bind="{ modelValue: modelValue }"
-					>
-						<span>{{ label }}</span>
-					</slot>
-				</div>
-			</div>
-		</origam-translate-scale>
-	</div>
-</template>
-<script setup>
-import { computed, inject, StyleValue } from "vue";
-import { OrigamTranslateScale } from "../../components";
-import {
-  useBorder,
-  useElevation,
-  useProps,
-  useRounded,
-  useStyle,
-  useTextColor
-} from "../../composables";
-import { ORIGAM_SLIDER_FIELD_KEY } from "../../consts";
-import { vRipple } from "../../directives";
-import { KEYBOARD_VALUES } from "../../enums";
-import { clamp, convertToUnit, int } from "../../utils";
-const props = defineProps({
-  label: { type: [Boolean, String], required: false },
-  min: { type: Number, required: false, default: 0 },
-  max: { type: Number, required: false, default: 100 },
-  focused: { type: Boolean, required: false },
-  modelValue: { type: Number, required: false, default: 0 },
-  position: { type: Number, required: false, default: 0 },
-  readonly: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  id: { type: String, required: false },
-  class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  size: { type: null, required: false, default: 20 },
-  ripple: { type: [Boolean, Object], required: false, default: true },
-  elevation: { type: [Number, String], required: false },
-  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
-  roundedTopRight: { type: [Boolean, Number, String], required: false },
-  roundedTopLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
-  borderTop: { type: [Boolean, Number, String], required: false },
-  borderLeft: { type: [Boolean, Number, String], required: false },
-  borderBottom: { type: [Boolean, Number, String], required: false },
-  borderRight: { type: [Boolean, Number, String], required: false },
-  borderBlock: { type: [Boolean, Number, String], required: false },
-  borderInline: { type: [Boolean, Number, String], required: false },
-  borderColor: { type: String, required: false },
-  borderStyle: { type: String, required: false },
-  direction: { type: null, required: false }
-});
-const emits = defineEmits(["update:modelValue"]);
-const { filterProps } = useProps(props);
-const slider = inject(ORIGAM_SLIDER_FIELD_KEY);
-if (!slider) throw new Error("[Origam] -slider-thumb must be used inside -slider");
-const {
-  step,
-  error,
-  color: sliderColor,
-  elevation: sliderElevation,
-  rounded: sliderRounded,
-  border: sliderBorder,
-  ripple: sliderRipple,
-  disabled,
-  readonly,
-  isReversed,
-  isVertical,
-  mousePressed,
-  decimals,
-  indexFromEnd
-} = slider;
-const isDisabled = computed(() => {
-  return props.disabled ?? disabled.value;
-});
-const isReadonly = computed(() => {
-  return props.readonly ?? readonly.value;
-});
-const color = computed(() => {
-  if (isDisabled.value) return void 0;
-  if (error.value) return "danger";
-  return sliderColor.value || props.color;
-});
-const size = computed(() => {
-  if (typeof props?.size === "number") {
-    return int(props.size);
-  }
-  return 20;
-});
-const positionPercentage = computed(() => {
-  return convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, "%");
-});
-const elevationProps = computed(() => {
-  return !isDisabled.value ? props.elevation ?? sliderElevation.value : void 0;
-});
-const roundedProps = computed(() => {
-  return props.rounded ?? sliderRounded.value;
-});
-const borderProps = computed(() => {
-  return props.border ?? sliderBorder.value;
-});
-const rippleProps = computed(() => {
-  return !isDisabled.value && !isReadonly.value ? [props.ripple || sliderRipple, null, [
-    "circle",
-    "center"
-  ]] : void 0;
-});
-const { elevationClasses } = useElevation(elevationProps);
-const { borderClasses, borderStyles } = useBorder(borderProps);
-const { roundedClasses, roundedStyles } = useRounded(roundedProps);
-const { textColorClasses, textColorStyles } = useTextColor(color);
-const relevantKeys = [KEYBOARD_VALUES.PAGEUP, KEYBOARD_VALUES.PAGEDOWN, KEYBOARD_VALUES.END, KEYBOARD_VALUES.HOME, KEYBOARD_VALUES.LEFT, KEYBOARD_VALUES.RIGHT, KEYBOARD_VALUES.DOWN, KEYBOARD_VALUES.UP];
-const multipliers = computed(() => {
-  if (step.value) return [1, 2, 3];
-  else return [1, 5, 10];
-});
-const parseKeydown = (e, value) => {
-  if (!relevantKeys.includes(e.key)) return;
-  e.preventDefault();
-  const _step = step.value || 0.1;
-  const steps = (props.max - props.min) / _step;
-  const keyValue = [KEYBOARD_VALUES.LEFT, KEYBOARD_VALUES.RIGHT, KEYBOARD_VALUES.DOWN, KEYBOARD_VALUES.UP];
-  if (keyValue.includes(e.key)) {
-    const increase = isVertical.value ? [KEYBOARD_VALUES.RIGHT, isReversed.value ? KEYBOARD_VALUES.DOWN : KEYBOARD_VALUES.UP] : [KEYBOARD_VALUES.RIGHT, KEYBOARD_VALUES.UP];
-    const direction = increase.includes(e.key) ? 1 : -1;
-    const multiplier = e.shiftKey ? 2 : e.ctrlKey ? 1 : 0;
-    value = value + direction * _step * multipliers.value[multiplier];
-  } else if (e.key === KEYBOARD_VALUES.HOME) {
-    value = props.min;
-  } else if (e.key === KEYBOARD_VALUES.END) {
-    value = props.max;
-  } else {
-    const direction = e.key === KEYBOARD_VALUES.PAGEDOWN ? 1 : -1;
-    value = value - direction * _step * (steps > 100 ? steps / 10 : 10);
-  }
-  return clamp(value, props.min, props.max);
-};
-const handleKeydown = (e) => {
-  const newValue = parseKeydown(e, props.modelValue);
-  if (newValue !== null && newValue !== void 0) {
-    emits("update:modelValue", newValue);
-  }
-};
-const showLabel = computed(() => {
-  return props.label && props.focused || props.label === "always";
-});
-const label = computed(() => {
-  return props.modelValue.toFixed(step.value ? decimals.value : 1);
-});
-const sliderFieldThumbStyles = computed(() => {
-  return [
-    {
-      "--origam-slider-field-thumb---position": positionPercentage.value,
-      "--origam-slider-field-thumb---size": convertToUnit(size.value)
-    },
-    props.style
-  ];
-});
-const sliderFieldThumbClasses = computed(() => {
-  return [
-    "origam-slider-field-thumb",
-    {
-      "origam-slider-field-thumb--focused": props.focused,
-      "origam-slider-field-thumb--pressed": props.focused && mousePressed.value
-    },
-    props.class
-  ];
-});
-const sliderFieldThumbSurfaceStyles = computed(() => {
-  return [
-    borderStyles.value,
-    roundedStyles.value,
-    textColorStyles.value,
-    props.style
-  ];
-});
-const sliderFieldThumbSurfaceClasses = computed(() => {
-  return [
-    "origam-slider-field-thumb__surface",
-    elevationClasses.value,
-    borderClasses.value,
-    roundedClasses.value,
-    textColorClasses.value
-  ];
-});
-const sliderFieldThumbRippleClasses = computed(() => {
-  return [
-    "origam-slider-field-thumb__ripple",
-    textColorClasses.value
-  ];
-});
-const sliderFieldThumbRippleStyles = computed(() => {
-  return [
-    textColorStyles.value,
-    props.style
-  ];
-});
-const { id, css, load, isLoaded, unload } = useStyle(sliderFieldThumbStyles);
-defineExpose({
-  filterProps,
-  css,
-  id,
-  load,
-  unload,
-  isLoaded
-});
-</script>
-<style lang="scss" scoped>
-	.origam-slider-field-thumb {
-		$this: &;
-		touch-action: none;
-		color: rgba(66, 66, 66, 1);
-		outline: none;
-		position: absolute;
-		transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-		&__label {
-			background: rgba(66, 66, 66, 0.7);
-			color: rgba(66, 66, 66, 1);
-			&:before {
-				color: rgba(66, 66, 66, 0.7);
-			}
-		}
-		&__surface {
-			cursor: pointer;
-			width: var(--origam-slider-field-thumb---size, 20);
-			height: var(--origam-slider-field-thumb---size, 20);
-			border: 1px solid var(--origam-slider-field-thumb__surface---border-color, rgba(0, 0, 0, 0.18));
-			border-radius: 50%;
-			user-select: none;
-			background-color: currentColor;
-			box-shadow: none;
-			transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1), 0.2s color cubic-bezier(0.4, 0, 0.2, 1), 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1), 0.2s border-color cubic-bezier(0.4, 0, 0.2, 1);
-			@media (forced-colors: active) {
-				background-color: highlight;
-			}
-			&:before {
-				transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-				content: "";
-				color: inherit;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				border-radius: 50%;
-				background: currentColor;
-				position: absolute;
-				pointer-events: none;
-				opacity: 0;
-			}
-			&:after {
-				content: "";
-				width: 42px;
-				height: 42px;
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-			}
-		}
-		&__label-container {
-			position: absolute;
-			transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
-		}
-		&__label {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			font-size: 0.75rem;
-			min-width: 35px;
-			height: 25px;
-			border-radius: 4px;
-			padding: 6px;
-			position: absolute;
-			user-select: none;
-			transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
-			&:before {
-				content: "";
-				width: 0;
-				height: 0;
-				position: absolute;
-			}
-		}
-		&__ripple {
-			position: absolute;
-			left: calc(var(--origam-slider-field-thumb---size, 20) / -2);
-			top: calc(var(--origam-range-slider-thumb---size, 20) / -2);
-			width: calc(var(--origam-range-slider-thumb---size, 20) * 2);
-			height: calc(var(--origam-range-slider-thumb---size, 20) * 2);
-			background: inherit;
-		}
-		&--focused {
-			#{$this}__surface {
-				&:before {
-					transform: scale(2);
-					opacity: 0.12;
-				}
-			}
-		}
-		&--pressed {
-			transition: none;
-			#{$this}__surface {
-				&:before {
-					opacity: 0.12;
-				}
-			}
-		}
-		@media (hover: hover) {
-			&:hover {
-				#{$this}__surface {
-					&:before {
-						transform: scale(2);
-					}
-				}
-				&:not(#{$this}--focused) {
-					#{$this}__surface {
-						&:before {
-							opacity: 0.04;
-						}
-					}
-				}
-			}
-		}
-	}
-</style>
-<style>
-	:root {
-	}
-</style>