@octaviaflow/motion 1.0.0

package/README.md

@@ -0,0 +1,89 @@
+# @octaviaflow/motion
+
+> Motion helpers for digital and software products using the Carbon Design
+> System
+
+## Getting started
+
+To install `@octaviaflow/motion` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install -S @octaviaflow/motion
+```
+
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
+
+```bash
+yarn add @octaviaflow/motion
+```
+
+## Usage
+
+`@octaviaflow/motion` supports standard, entrance, and exit easing curves in two
+motion modes: productive and expressive. You can access these curves using
+either Sass or JavaScript.
+
+### Sass
+
+`@octaviaflow/motion` exports a `carbon--motion` function and `carbon--motion` mixin
+that you can use to access the value of a motion curve or include that curve as
+the `transition-timing-function` for a selector. To use these helpers, you can
+do the following in your project:
+
+```scss
+@import '@octaviaflow/motion/scss/motion.scss';
+
+.my-custom-selector {
+  // Supplies the standard easing curve, using the productive mode by default
+  transition-timing-function: carbon--motion(standard);
+}
+
+.my-custom-selector-v2 {
+  // Supplies the standard easing curve, but with the expressive mode, on the
+  // transition-timing-function property for this selector
+  @include carbon--motion(standard, expressive);
+}
+```
+
+Both the `motion` function and mixin support passing in the name of the motion
+curve and the mode you want to work in.
+
+### JavaScript
+
+If you're using `@octaviaflow/motion` as a JavaScript dependency, we export our
+easings and a function called `motion` that you can use. For example:
+
+```js
+// CommonJS
+const { easings, motion } = require('@octaviaflow/motion');
+```
+
+You can also include this as a JavaScript module:
+
+```js
+// ESM
+import { easings, motion } from '@octaviaflow/motion';
+
+motion('standard', 'productive'); // Returns a string `cubic-bezier()` function
+```
+
+## 🙌 Contributing
+
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
+
+## 📝 License
+
+Licensed under the [Apache 2.0 License](/LICENSE).
+
+## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
+
+This package uses IBM Telemetry to collect de-identified and anonymized metrics
+data. By installing this package as a dependency you are agreeing to telemetry
+collection. To opt out, see
+[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
+For more information on the data being collected, please see the
+[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

package/docs/sass.md

@@ -0,0 +1,38 @@
+# Sass
+
+> Sass documentation for `@octaviaflow/motion`
+
+## Usage
+
+The `@octaviaflow/motion` package enables you to access motion curves and durations
+built for the IBM Design Language in Sass. You can access these values directly
+from the package by writing the following:
+
+```scss
+@use '@octaviaflow/motion';
+
+.selector {
+  // Set `transition-timing-function` directly
+  @include motion.motion(standard, productive);
+
+  // Alternatively
+  transition: opacity motion.motion(standard, productive);
+
+  // Or use a duration
+  transition: opacity motion.$duration-fast-01;
+}
+```
+
+## API
+
+| Name                    | Type     |
+| :---------------------- | :------- |
+| `$duration-fast-01`     | Duration |
+| `$duration-fast-02`     | Duration |
+| `$duration-moderate-01` | Duration |
+| `$duration-moderate-02` | Duration |
+| `$duration-slow-01`     | Duration |
+| `$duration-slow-02`     | Duration |
+| `$easings`              | Map      |
+| `@mixin motion`         | Mixin    |
+| `@function motion`      | Mixin    |

package/index.scss

@@ -0,0 +1,123 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+
+/// Common component easings
+/// @type Map
+/// @access public
+/// @group @octaviaflow/motion
+$easings: (
+  standard: (
+    productive: cubic-bezier(0.2, 0, 0.38, 0.9),
+    expressive: cubic-bezier(0.4, 0.14, 0.3, 1),
+  ),
+  entrance: (
+    productive: cubic-bezier(0, 0, 0.38, 0.9),
+    expressive: cubic-bezier(0, 0, 0.3, 1),
+  ),
+  exit: (
+    productive: cubic-bezier(0.2, 0, 1, 0.9),
+    expressive: cubic-bezier(0.4, 0.14, 1, 1),
+  ),
+);
+
+/// Get the transition-timing-function for a given easing and motion mode
+/// @param {String} $name - Can be `standard`, `entrance`, or `exit`
+/// @param {String} $mode [productive] - Can be `productive` or `expressive`
+/// @param {Map} $easings [$carbon--easings] - Easings map
+/// @access public
+/// @group @octaviaflow/motion
+/// @return {Function} CSS `cubic-bezier()` function
+@function motion($name, $mode: productive, $easings: $easings) {
+  @if map.has-key($easings, $name) {
+    $easing: map.get($easings, $name);
+    @if map.has-key($easing, $mode) {
+      @return map.get($easing, $mode);
+    } @else {
+      @error 'Unable to find a mode for the easing #{$easing} called: #{$mode}.';
+    }
+  } @else {
+    @error 'Unable to find an easing named #{$name} in our supported easings.';
+  }
+}
+
+/// Set the transition-timing-function for a given easing and motion mode
+/// @param {String} $name - The name of the easing curve to apply
+/// @param {String} $mode - The mode for the easing curve to use
+/// @access public
+/// @group @octaviaflow/motion
+@mixin motion($name, $mode) {
+  transition-timing-function: motion($name, $mode);
+}
+
+/// @access public
+/// @type Duration
+/// @group @octaviaflow/motion
+$duration-fast-01: 70ms;
+
+/// @access public
+/// @type Duration
+/// @group @octaviaflow/motion
+$duration-fast-02: 110ms;
+
+/// @access public
+/// @type Duration
+/// @group @octaviaflow/motion
+$duration-moderate-01: 150ms;
+
+/// @access public
+/// @type Duration
+/// @group @octaviaflow/motion
+$duration-moderate-02: 240ms;
+
+/// @access public
+/// @type Duration
+/// @group @octaviaflow/motion
+$duration-slow-01: 400ms;
+
+/// @access public
+/// @type Duration
+/// @group @octaviaflow/motion
+$duration-slow-02: 700ms;
+
+/// V10 backwards compatibility tokens
+/// @access public
+/// @deprecated
+/// @type Duration
+/// @group @octaviaflow/motion
+$fast-01: $duration-fast-01;
+
+/// @access public
+/// @deprecated
+/// @type Duration
+/// @group @octaviaflow/motion
+$fast-02: $duration-fast-02;
+
+/// @access public
+/// @deprecated
+/// @type Duration
+/// @group @octaviaflow/motion
+$moderate-01: $duration-moderate-01;
+
+/// @access public
+/// @deprecated
+/// @type Duration
+/// @group @octaviaflow/motion
+$moderate-02: $duration-moderate-02;
+
+/// @access public
+/// @deprecated
+/// @type Duration
+/// @group @octaviaflow/motion
+$slow-01: $duration-slow-01;
+
+/// @access public
+/// @deprecated
+/// @type Duration
+/// @group @octaviaflow/motion
+$slow-02: $duration-slow-02;

package/lib/index.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var fast01 = '70ms';
+var fast02 = '110ms';
+var moderate01 = '150ms';
+var moderate02 = '240ms';
+var slow01 = '400ms';
+var slow02 = '700ms';
+// V11 Tokens
+var durationFast01 = fast01;
+var durationFast02 = fast02;
+var durationModerate01 = moderate01;
+var durationModerate02 = moderate02;
+var durationSlow01 = slow01;
+var durationSlow02 = slow02;
+var unstable_tokens = ['fast01', 'fast02', 'moderate01', 'moderate02', 'slow01', 'slow02', 'durationFast01', 'durationFast02', 'durationModerate01', 'durationModerate02', 'durationSlow01', 'durationSlow02'];
+var easings = {
+  standard: {
+    productive: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
+    expressive: 'cubic-bezier(0.4, 0.14, 0.3, 1)'
+  },
+  entrance: {
+    productive: 'cubic-bezier(0, 0, 0.38, 0.9)',
+    expressive: 'cubic-bezier(0, 0, 0.3, 1)'
+  },
+  exit: {
+    productive: 'cubic-bezier(0.2, 0, 1, 0.9)',
+    expressive: 'cubic-bezier(0.4, 0.14, 1, 1)'
+  }
+};
+function motion(name, mode) {
+  if (!easings[name]) {
+    throw new Error("Unable to find easing `".concat(name, "` in our supported easings. Expected ") + "One of: ".concat(Object.keys(easings).join(', ')));
+  }
+  var easing = easings[name];
+  if (!easing[mode]) {
+    throw new Error("Unable to find a mode for the easing `".concat(name, "` called: `").concat(mode, "`"));
+  }
+  return easing[mode];
+}
+
+exports.durationFast01 = durationFast01;
+exports.durationFast02 = durationFast02;
+exports.durationModerate01 = durationModerate01;
+exports.durationModerate02 = durationModerate02;
+exports.durationSlow01 = durationSlow01;
+exports.durationSlow02 = durationSlow02;
+exports.easings = easings;
+exports.fast01 = fast01;
+exports.fast02 = fast02;
+exports.moderate01 = moderate01;
+exports.moderate02 = moderate02;
+exports.motion = motion;
+exports.slow01 = slow01;
+exports.slow02 = slow02;
+exports.unstable_tokens = unstable_tokens;

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@octaviaflow/motion",
+  "description": "Motion helpers for digital and software products using the OctaviaFlow Design System",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/octaviaflow-design-system.git",
+    "directory": "packages/motion"
+  },
+  "bugs": "https://github.com/octaviaflow-design-system/issues",
+  "keywords": [
+    "octaviaflow",
+    "motion",
+    "components",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.25.0"
+  },
+  "scripts": {
+    "build": "bun run clean && octaviaflow-cli bundle src/index.js --name OctaviaFlowMotion",
+    "clean": "rimraf es lib umd"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.6",
+    "@babel/preset-env": "^7.28.6",
+    "@octaviaflow/cli": "^1.0.0",
+    "rimraf": "^6.0.0"
+  }
+}

package/project.json

@@ -0,0 +1,39 @@
+{
+  "name": "@octaviaflow/motion",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/motion/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "outputs": [
+        "{projectRoot}/es",
+        "{projectRoot}/lib",
+        "{projectRoot}/umd"
+      ],
+      "options": {
+        "command": "octaviaflow-cli bundle src/index.js --name OctaviaFlowMotion",
+        "cwd": "packages/motion"
+      },
+      "dependsOn": [
+        "clean",
+        "^build"
+      ]
+    },
+    "clean": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "rimraf es lib umd",
+        "cwd": "packages/motion"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/motion/**/*.{js,jsx,ts,tsx}"]
+      }
+    }
+  },
+  "tags": ["scope:motion", "type:library"]
+}

package/src/index.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ * 
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+export const fast01 = '70ms';
+export const fast02 = '110ms';
+export const moderate01 = '150ms';
+export const moderate02 = '240ms';
+export const slow01 = '400ms';
+export const slow02 = '700ms';
+// V11 Tokens
+export const durationFast01 = fast01;
+export const durationFast02 = fast02;
+export const durationModerate01 = moderate01;
+export const durationModerate02 = moderate02;
+export const durationSlow01 = slow01;
+export const durationSlow02 = slow02;
+
+export const unstable_tokens = [
+  'fast01',
+  'fast02',
+  'moderate01',
+  'moderate02',
+  'slow01',
+  'slow02',
+  'durationFast01',
+  'durationFast02',
+  'durationModerate01',
+  'durationModerate02',
+  'durationSlow01',
+  'durationSlow02',
+];
+
+export const easings = {
+  standard: {
+    productive: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
+    expressive: 'cubic-bezier(0.4, 0.14, 0.3, 1)',
+  },
+  entrance: {
+    productive: 'cubic-bezier(0, 0, 0.38, 0.9)',
+    expressive: 'cubic-bezier(0, 0, 0.3, 1)',
+  },
+  exit: {
+    productive: 'cubic-bezier(0.2, 0, 1, 0.9)',
+    expressive: 'cubic-bezier(0.4, 0.14, 1, 1)',
+  },
+};
+
+export function motion(name, mode) {
+  if (!easings[name]) {
+    throw new Error(
+      `Unable to find easing \`${name}\` in our supported easings. Expected ` +
+        `One of: ${Object.keys(easings).join(', ')}`
+    );
+  }
+
+  const easing = easings[name];
+  if (!easing[mode]) {
+    throw new Error(
+      `Unable to find a mode for the easing \`${name}\` called: \`${mode}\``
+    );
+  }
+
+  return easing[mode];
+}

package/telemetry.yml

@@ -0,0 +1,17 @@
+# yaml-language-server: $schema=https://unpkg.com/@octaviaflow/telemetry-config-schema@v1.0.0/dist/config.schema.json
+version: 1
+projectId: 'd323f4a9-0470-4cdf-b653-a7e47b908c90'
+name: 'octaviaflow-motion'
+storage:
+  type: 'file'
+  file:
+    directory: '/Volumes/Main/Projects/OctaviaFlow-Design-System/telemetry-logs'
+    fileNamePattern: 'octaviaflow-motion-{timestamp}.json'
+    maxFileSizeMB: 10
+    compress: false
+collect:
+  npm:
+    dependencies: null
+  js:
+    functions: {}
+    tokens: null