@atlaskit/range 9.3.6 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/range
 
+## 10.0.0
+
+### Major Changes
+
+- [`f272ab0e435b3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f272ab0e435b3) -
+  Removes ak/range/theme entrypoint because this file was not used as part of the core package.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.3.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.3.6
 
 ### Patch Changes

package/dist/cjs/styled.js

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/es2019/styled.js

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./styled.compiled.css";
 import * as React from 'react';

package/dist/esm/styled.js

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/range",
-	"version": "9.3.6",
+	"version": "10.0.0",
 	"description": "A range lets users choose an approximate value on a slider.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,12 +25,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^5.3.0",
+		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tokens": "^11.1.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6"
+		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -41,13 +41,14 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/checkbox": "^17.3.0",
-		"@atlaskit/docs": "^11.5.0",
-		"@atlaskit/form": "^15.3.0",
+		"@atlaskit/docs": "^11.7.0",
+		"@atlaskit/form": "^15.4.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlassian/ssr-tests": "workspace:^",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"lodash": "^4.17.21",
 		"react-dom": "^18.2.0"

package/range.docs.tsx

@@ -0,0 +1,47 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'Range',
+		description: 'A component for selecting a value from a range of values.',
+		status: 'general-availability',
+		import: {
+			name: 'Range',
+			package: '@atlaskit/range',
+			type: 'default',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for selecting numeric values within a range',
+			'Provide clear min/max boundaries',
+			'Use appropriate step increments',
+			'Consider showing current value',
+		],
+		contentGuidelines: [
+			'Use clear range labels',
+			'Provide meaningful min/max labels',
+			'Show current value when helpful',
+			'Use consistent range terminology',
+		],
+		accessibilityGuidelines: [
+			'Provide clear labels for range inputs',
+			'Use appropriate ARIA attributes',
+			'Ensure keyboard navigation support',
+			'Provide value announcements for screen readers',
+		],
+		examples: [
+			{
+				name: 'Range',
+				description: 'Range example',
+				source: path.resolve(__dirname, './examples/ai/range.tsx'),
+			},
+		],
+		keywords: ['range', 'slider', 'input', 'form', 'value', 'selection'],
+		categories: ['form'],
+	},
+];
+
+export default documentation;

package/tsconfig.json

@@ -16,6 +16,7 @@
     "**/stories/*.ts",
     "**/stories/*.tsx",
     "**/stories/**/*.ts",
-    "**/stories/**/*.tsx"
+    "**/stories/**/*.tsx",
+    "./range.docs.tsx"
   ]
 }

package/dist/cjs/theme.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.transitionDuration = exports.track = exports.thumb = exports.input = void 0;
-var _colors = require("@atlaskit/theme/colors");
-var transitionDuration = exports.transitionDuration = '0.2s';
-var input = exports.input = {
-  height: 40
-};
-var thumb = exports.thumb = {
-  size: 16,
-  borderWidth: 2,
-  background: {
-    default: "var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"),
-    hovered: "var(--ds-background-neutral-bold-hovered, ".concat(_colors.B300, ")"),
-    pressed: "var(--ds-background-neutral-bold-pressed, ".concat(_colors.B200, ")")
-  },
-  borderColor: {
-    default: 'transparent',
-    focused: "var(--ds-border-focused, ".concat(_colors.B200, ")")
-  },
-  boxShadow: {
-    default: "var(--ds-UNSAFE-transparent, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
-    disabled: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(_colors.N60A), ")")
-  }
-};
-var track = exports.track = {
-  height: 4,
-  /**
-   * borderRadius >= height / 2 to create a pill shape.
-   * Using '50%' creates an ellipse.
-   */
-  borderRadius: 2,
-  background: {
-    default: "var(--ds-background-neutral, ".concat(_colors.N30, ")"),
-    hovered: "var(--ds-background-neutral-hovered, ".concat(_colors.N40, ")")
-  },
-  foreground: {
-    default: "var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"),
-    hovered: "var(--ds-background-neutral-bold-hovered, ".concat(_colors.B300, ")")
-  }
-};

package/dist/es2019/theme.js

@@ -1,38 +0,0 @@
-import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
-export const transitionDuration = '0.2s';
-export const input = {
-  height: 40
-};
-export const thumb = {
-  size: 16,
-  borderWidth: 2,
-  background: {
-    default: `var(--ds-background-neutral-bold, ${B400})`,
-    hovered: `var(--ds-background-neutral-bold-hovered, ${B300})`,
-    pressed: `var(--ds-background-neutral-bold-pressed, ${B200})`
-  },
-  borderColor: {
-    default: 'transparent',
-    focused: `var(--ds-border-focused, ${B200})`
-  },
-  boxShadow: {
-    default: `var(--ds-UNSAFE-transparent, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
-    disabled: `var(--ds-shadow-raised, ${`0 0 1px ${N60A}`})`
-  }
-};
-export const track = {
-  height: 4,
-  /**
-   * borderRadius >= height / 2 to create a pill shape.
-   * Using '50%' creates an ellipse.
-   */
-  borderRadius: 2,
-  background: {
-    default: `var(--ds-background-neutral, ${N30})`,
-    hovered: `var(--ds-background-neutral-hovered, ${N40})`
-  },
-  foreground: {
-    default: `var(--ds-background-neutral-bold, ${B400})`,
-    hovered: `var(--ds-background-neutral-bold-hovered, ${B300})`
-  }
-};

package/dist/esm/theme.js

@@ -1,38 +0,0 @@
-import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
-export var transitionDuration = '0.2s';
-export var input = {
-  height: 40
-};
-export var thumb = {
-  size: 16,
-  borderWidth: 2,
-  background: {
-    default: "var(--ds-background-neutral-bold, ".concat(B400, ")"),
-    hovered: "var(--ds-background-neutral-bold-hovered, ".concat(B300, ")"),
-    pressed: "var(--ds-background-neutral-bold-pressed, ".concat(B200, ")")
-  },
-  borderColor: {
-    default: 'transparent',
-    focused: "var(--ds-border-focused, ".concat(B200, ")")
-  },
-  boxShadow: {
-    default: "var(--ds-UNSAFE-transparent, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
-    disabled: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(N60A), ")")
-  }
-};
-export var track = {
-  height: 4,
-  /**
-   * borderRadius >= height / 2 to create a pill shape.
-   * Using '50%' creates an ellipse.
-   */
-  borderRadius: 2,
-  background: {
-    default: "var(--ds-background-neutral, ".concat(N30, ")"),
-    hovered: "var(--ds-background-neutral-hovered, ".concat(N40, ")")
-  },
-  foreground: {
-    default: "var(--ds-background-neutral-bold, ".concat(B400, ")"),
-    hovered: "var(--ds-background-neutral-bold-hovered, ".concat(B300, ")")
-  }
-};

package/dist/types/theme.d.ts

@@ -1,37 +0,0 @@
-export declare const transitionDuration = "0.2s";
-export declare const input: {
-    height: number;
-};
-export declare const thumb: {
-    readonly size: 16;
-    readonly borderWidth: 2;
-    readonly background: {
-        readonly default: 'var(--ds-background-neutral-bold)';
-        readonly hovered: 'var(--ds-background-neutral-bold-hovered)';
-        readonly pressed: 'var(--ds-background-neutral-bold-pressed)';
-    };
-    readonly borderColor: {
-        readonly default: 'transparent';
-        readonly focused: 'var(--ds-border-focused)';
-    };
-    readonly boxShadow: {
-        readonly default: 'var(--ds-UNSAFE-transparent)';
-        readonly disabled: 'var(--ds-shadow-raised)';
-    };
-};
-export declare const track: {
-    readonly height: 4;
-    /**
-     * borderRadius >= height / 2 to create a pill shape.
-     * Using '50%' creates an ellipse.
-     */
-    readonly borderRadius: 2;
-    readonly background: {
-        readonly default: 'var(--ds-background-neutral)';
-        readonly hovered: 'var(--ds-background-neutral-hovered)';
-    };
-    readonly foreground: {
-        readonly default: 'var(--ds-background-neutral-bold)';
-        readonly hovered: 'var(--ds-background-neutral-bold-hovered)';
-    };
-};

package/dist/types-ts4.5/theme.d.ts

@@ -1,37 +0,0 @@
-export declare const transitionDuration = "0.2s";
-export declare const input: {
-    height: number;
-};
-export declare const thumb: {
-    readonly size: 16;
-    readonly borderWidth: 2;
-    readonly background: {
-        readonly default: 'var(--ds-background-neutral-bold)';
-        readonly hovered: 'var(--ds-background-neutral-bold-hovered)';
-        readonly pressed: 'var(--ds-background-neutral-bold-pressed)';
-    };
-    readonly borderColor: {
-        readonly default: 'transparent';
-        readonly focused: 'var(--ds-border-focused)';
-    };
-    readonly boxShadow: {
-        readonly default: 'var(--ds-UNSAFE-transparent)';
-        readonly disabled: 'var(--ds-shadow-raised)';
-    };
-};
-export declare const track: {
-    readonly height: 4;
-    /**
-     * borderRadius >= height / 2 to create a pill shape.
-     * Using '50%' creates an ellipse.
-     */
-    readonly borderRadius: 2;
-    readonly background: {
-        readonly default: 'var(--ds-background-neutral)';
-        readonly hovered: 'var(--ds-background-neutral-hovered)';
-    };
-    readonly foreground: {
-        readonly default: 'var(--ds-background-neutral-bold)';
-        readonly hovered: 'var(--ds-background-neutral-bold-hovered)';
-    };
-};

package/theme/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@atlaskit/range/theme",
-  "main": "../dist/cjs/theme.js",
-  "module": "../dist/esm/theme.js",
-  "module:es2019": "../dist/es2019/theme.js",
-  "sideEffects": [
-    "**/*.compiled.css"
-  ],
-  "types": "../dist/types/theme.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/theme.d.ts"
-      ]
-    }
-  }
-}