@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/paper/Paper.tsx

@@ -1,52 +1,52 @@
-import "./Paper.css";
-
-import clsx from "clsx";
-import type React from "react";
-
-export const paperShadows = ["none", "xs", "sm", "md", "lg", "xl"] as const;
-
-export type PaperShadow = (typeof paperShadows)[number];
-
-export type PaperProps = React.HTMLAttributes<HTMLElement> & {
-	/**
-	 * Overrides the rendered element (e.g. `"section"`, `"ul"`)
-	 * @default "div"
-	 */
-	as?: React.ElementType;
-	/**
-	 * Adds a subtle border. Combine with `shadow="none"` for an outlined
-	 * variant (MUI `variant="outlined"` equivalent).
-	 * @default false
-	 */
-	border?: boolean;
-	children?: React.ReactNode;
-	/** Forwarded to the rendered element. */
-	ref?: React.Ref<any>;
-	/**
-	 * Elevation shadow, using the designsystemet `--ds-shadow-*` tokens.
-	 * @default "sm"
-	 */
-	shadow?: PaperShadow;
-};
-
-/**
- * Surface component equivalent to MUI `Paper`: a neutral surface with
- * rounded corners and an elevation shadow. Use it instead of hand-rolled
- * `background` + `box-shadow` CSS so surfaces stay consistent with the
- * designsystemet tokens (and adapt to dark mode).
- */
-export function Paper({ as: Component = "div", border, children, className, shadow = "sm", ...props }: PaperProps) {
-	return (
-		<Component
-			className={clsx(
-				"ObPaper-root",
-				shadow !== "none" && `ObPaper-shadow-${shadow}`,
-				border && "ObPaper-border",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-		</Component>
-	);
-}
+import "./Paper.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export const paperShadows = ["none", "xs", "sm", "md", "lg", "xl"] as const;
+
+export type PaperShadow = (typeof paperShadows)[number];
+
+export type PaperProps = React.HTMLAttributes<HTMLElement> & {
+	/**
+	 * Overrides the rendered element (e.g. `"section"`, `"ul"`)
+	 * @default "div"
+	 */
+	as?: React.ElementType;
+	/**
+	 * Adds a subtle border. Combine with `shadow="none"` for an outlined
+	 * variant (MUI `variant="outlined"` equivalent).
+	 * @default false
+	 */
+	border?: boolean;
+	children?: React.ReactNode;
+	/** Forwarded to the rendered element. */
+	ref?: React.Ref<any>;
+	/**
+	 * Elevation shadow, using the designsystemet `--ds-shadow-*` tokens.
+	 * @default "sm"
+	 */
+	shadow?: PaperShadow;
+};
+
+/**
+ * Surface component equivalent to MUI `Paper`: a neutral surface with
+ * rounded corners and an elevation shadow. Use it instead of hand-rolled
+ * `background` + `box-shadow` CSS so surfaces stay consistent with the
+ * designsystemet tokens (and adapt to dark mode).
+ */
+export function Paper({ as: Component = "div", border, children, className, shadow = "sm", ...props }: PaperProps) {
+	return (
+		<Component
+			className={clsx(
+				"ObPaper-root",
+				shadow !== "none" && `ObPaper-shadow-${shadow}`,
+				border && "ObPaper-border",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</Component>
+	);
+}

package/src/progress/LinearProgress.css

@@ -1,121 +1,121 @@
-.ObLinearProgress-root {
-	--obLinearProgress-thickness: 0.25rem;
-	--obLinearProgress-duration: 2.1s;
-
-	position: relative;
-	display: block;
-	box-sizing: border-box;
-	inline-size: 100%;
-	block-size: var(--obLinearProgress-thickness);
-	overflow: hidden;
-	background-color: var(--ds-color-brand-surface-active, #cddffb);
-	border-radius: var(--ds-border-radius-full, 624.9375rem);
-}
-
-.ObLinearProgress-root[data-size="xs"] {
-	--obLinearProgress-thickness: 0.125rem;
-}
-
-.ObLinearProgress-root[data-size="sm"] {
-	--obLinearProgress-thickness: 0.25rem;
-}
-
-.ObLinearProgress-root[data-size="md"] {
-	--obLinearProgress-thickness: 0.5rem;
-}
-
-.ObLinearProgress-root[data-size="lg"] {
-	--obLinearProgress-thickness: 0.75rem;
-}
-
-.ObLinearProgress-bar {
-	position: absolute;
-	inset-block: 0;
-	inset-inline-start: 0;
-	inline-size: 100%;
-	background-color: var(--ds-color-brand-base-default, #0062ba);
-	border-radius: inherit;
-}
-
-.ObLinearProgress-determinate .ObLinearProgress-bar {
-	transition: inline-size 0.2s linear;
-}
-
-/*
- * The indeterminate animation is Material Design's: two bars chase each other
- * across the track in a 2.1s cycle. The first grows from 35% to 90% of the
- * track as it crosses; the second starts 1.15s later with a sharper easing and
- * shrinks to a sliver. Both reach the far side at 60% of the cycle and hold
- * there, which is what gives the motion its rhythm.
- *
- * MUI animates `left` and `right`. Each bar here is the full track width and is
- * moved and scaled with `transform` instead, which stays on the compositor;
- * since both edges interpolate linearly with the same easing either way, the
- * result is the same: translateX is MUI's `left`, scaleX is 1 - left - right.
- */
-.ObLinearProgress-indeterminate .ObLinearProgress-bar {
-	transform-origin: left center;
-	will-change: transform;
-	animation-duration: var(--obLinearProgress-duration);
-	animation-iteration-count: infinite;
-}
-
-.ObLinearProgress-indeterminate .ObLinearProgress-bar1 {
-	animation-name: ObLinearProgress-indeterminate1;
-	animation-timing-function: cubic-bezier(0.65, 0.815, 0.735, 0.395);
-}
-
-.ObLinearProgress-indeterminate .ObLinearProgress-bar2 {
-	animation-name: ObLinearProgress-indeterminate2;
-	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-	animation-delay: calc(var(--obLinearProgress-duration) * 0.5476); /* 1.15s of 2.1s */
-}
-
-/* Zero-height wrapper so the overlay bar never affects the layout */
-.ObLinearProgress-overlay {
-	position: relative;
-	z-index: 1;
-	block-size: 0;
-}
-
-.ObLinearProgress-overlay > .ObLinearProgress-root {
-	position: absolute;
-	inset-block-start: 0;
-	inset-inline: 0;
-}
-
-/* MUI: left -35% / right 100% -> left 100% / right -90%, held from 60% */
-@keyframes ObLinearProgress-indeterminate1 {
-	0% {
-		transform: translateX(-35%) scaleX(0.35);
-	}
-
-	60%,
-	100% {
-		transform: translateX(100%) scaleX(0.9);
-	}
-}
-
-/* MUI: left -200% / right 100% -> left 107% / right -8%, held from 60% */
-@keyframes ObLinearProgress-indeterminate2 {
-	0% {
-		transform: translateX(-200%) scaleX(2);
-	}
-
-	60%,
-	100% {
-		transform: translateX(107%) scaleX(0.01);
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.ObLinearProgress-indeterminate {
-		--obLinearProgress-duration: 4s;
-	}
-}
-
-@media print {
-	.ObLinearProgress-root {
-		display: none;
-	}
-}
+.ObLinearProgress-root {
+	--obLinearProgress-thickness: 0.25rem;
+	--obLinearProgress-duration: 2.1s;
+
+	position: relative;
+	display: block;
+	box-sizing: border-box;
+	inline-size: 100%;
+	block-size: var(--obLinearProgress-thickness);
+	overflow: hidden;
+	background-color: var(--ds-color-brand-surface-active, #cddffb);
+	border-radius: var(--ds-border-radius-full, 624.9375rem);
+}
+
+.ObLinearProgress-root[data-size="xs"] {
+	--obLinearProgress-thickness: 0.125rem;
+}
+
+.ObLinearProgress-root[data-size="sm"] {
+	--obLinearProgress-thickness: 0.25rem;
+}
+
+.ObLinearProgress-root[data-size="md"] {
+	--obLinearProgress-thickness: 0.5rem;
+}
+
+.ObLinearProgress-root[data-size="lg"] {
+	--obLinearProgress-thickness: 0.75rem;
+}
+
+.ObLinearProgress-bar {
+	position: absolute;
+	inset-block: 0;
+	inset-inline-start: 0;
+	inline-size: 100%;
+	background-color: var(--ds-color-brand-base-default, #0062ba);
+	border-radius: inherit;
+}
+
+.ObLinearProgress-determinate .ObLinearProgress-bar {
+	transition: inline-size 0.2s linear;
+}
+
+/*
+ * The indeterminate animation is Material Design's: two bars chase each other
+ * across the track in a 2.1s cycle. The first grows from 35% to 90% of the
+ * track as it crosses; the second starts 1.15s later with a sharper easing and
+ * shrinks to a sliver. Both reach the far side at 60% of the cycle and hold
+ * there, which is what gives the motion its rhythm.
+ *
+ * MUI animates `left` and `right`. Each bar here is the full track width and is
+ * moved and scaled with `transform` instead, which stays on the compositor;
+ * since both edges interpolate linearly with the same easing either way, the
+ * result is the same: translateX is MUI's `left`, scaleX is 1 - left - right.
+ */
+.ObLinearProgress-indeterminate .ObLinearProgress-bar {
+	transform-origin: left center;
+	will-change: transform;
+	animation-duration: var(--obLinearProgress-duration);
+	animation-iteration-count: infinite;
+}
+
+.ObLinearProgress-indeterminate .ObLinearProgress-bar1 {
+	animation-name: ObLinearProgress-indeterminate1;
+	animation-timing-function: cubic-bezier(0.65, 0.815, 0.735, 0.395);
+}
+
+.ObLinearProgress-indeterminate .ObLinearProgress-bar2 {
+	animation-name: ObLinearProgress-indeterminate2;
+	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+	animation-delay: calc(var(--obLinearProgress-duration) * 0.5476); /* 1.15s of 2.1s */
+}
+
+/* Zero-height wrapper so the overlay bar never affects the layout */
+.ObLinearProgress-overlay {
+	position: relative;
+	z-index: 1;
+	block-size: 0;
+}
+
+.ObLinearProgress-overlay > .ObLinearProgress-root {
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline: 0;
+}
+
+/* MUI: left -35% / right 100% -> left 100% / right -90%, held from 60% */
+@keyframes ObLinearProgress-indeterminate1 {
+	0% {
+		transform: translateX(-35%) scaleX(0.35);
+	}
+
+	60%,
+	100% {
+		transform: translateX(100%) scaleX(0.9);
+	}
+}
+
+/* MUI: left -200% / right 100% -> left 107% / right -8%, held from 60% */
+@keyframes ObLinearProgress-indeterminate2 {
+	0% {
+		transform: translateX(-200%) scaleX(2);
+	}
+
+	60%,
+	100% {
+		transform: translateX(107%) scaleX(0.01);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.ObLinearProgress-indeterminate {
+		--obLinearProgress-duration: 4s;
+	}
+}
+
+@media print {
+	.ObLinearProgress-root {
+		display: none;
+	}
+}

package/src/progress/LinearProgress.tsx

@@ -1,106 +1,106 @@
-import "./LinearProgress.css";
-
-import clsx from "clsx";
-import type React from "react";
-
-export const linearProgressSizes = ["xs", "sm", "md", "lg"] as const;
-
-export type LinearProgressSize = (typeof linearProgressSizes)[number];
-
-export type LinearProgressProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
-	/**
-	 * Designsystemet colour palette used for the bar
-	 * @default "accent"
-	 */
-	"data-color"?: string;
-	/**
-	 * Thickness of the bar
-	 * @default "sm"
-	 */
-	"data-size"?: LinearProgressSize;
-	/**
-	 * Renders the bar absolutely positioned in a zero-height wrapper, so it
-	 * overlays the top of the following content instead of taking up space.
-	 * Use it for loading indicators that should not shift the layout.
-	 * @default false
-	 */
-	overlay?: boolean;
-	/**
-	 * Progress value. When omitted the bar is indeterminate.
-	 */
-	value?: number;
-	/**
-	 * Highest possible value of `value`
-	 * @default 100
-	 */
-	valueMax?: number;
-	/**
-	 * Lowest possible value of `value`
-	 * @default 0
-	 */
-	valueMin?: number;
-};
-
-/**
- * Linear progress indicator, equivalent to MUI `LinearProgress`. Indeterminate
- * by default, determinate when `value` is given. Designsystemet has no linear
- * progress component, so this is built with the designsystemet colour and
- * radius tokens (use `data-color` to change palette).
- *
- * @example
- * ```jsx
- * // Indeterminate, in the normal document flow
- * <LinearProgress aria-label="Loading..." />
- *
- * // Determinate
- * <LinearProgress aria-label="Uploading" value={40} />
- *
- * // Absolutely positioned, does not affect the layout
- * <LinearProgress overlay aria-label="Loading..." />
- * ```
- */
-export function LinearProgress({
-	className,
-	overlay,
-	value,
-	valueMax = 100,
-	valueMin = 0,
-	"data-color": color = "accent",
-	"data-size": size = "sm",
-	...props
-}: LinearProgressProps) {
-	let isDeterminate = typeof value === "number" && Number.isFinite(value);
-	let clamped = isDeterminate ? Math.min(Math.max(value as number, valueMin), valueMax) : undefined;
-	let percentage =
-		clamped === undefined || valueMax === valueMin ? undefined : ((clamped - valueMin) / (valueMax - valueMin)) * 100;
-
-	let bar = (
-		<div
-			className={clsx(
-				"ObLinearProgress-root",
-				isDeterminate ? "ObLinearProgress-determinate" : "ObLinearProgress-indeterminate",
-				!overlay && className,
-			)}
-			data-color={color}
-			data-size={size}
-			role="progressbar"
-			aria-valuemin={valueMin}
-			aria-valuemax={valueMax}
-			aria-valuenow={clamped}
-			{...props}
-		>
-			<div
-				className="ObLinearProgress-bar ObLinearProgress-bar1"
-				style={percentage === undefined ? undefined : { inlineSize: `${percentage}%` }}
-			/>
-			{/* The indeterminate animation is two bars chasing each other, as in Material Design */}
-			{!isDeterminate && <div className="ObLinearProgress-bar ObLinearProgress-bar2" />}
-		</div>
-	);
-
-	if (!overlay) {
-		return bar;
-	}
-
-	return <div className={clsx("ObLinearProgress-overlay", className)}>{bar}</div>;
-}
+import "./LinearProgress.css";
+
+import clsx from "clsx";
+import type React from "react";
+
+export const linearProgressSizes = ["xs", "sm", "md", "lg"] as const;
+
+export type LinearProgressSize = (typeof linearProgressSizes)[number];
+
+export type LinearProgressProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+	/**
+	 * Designsystemet colour palette used for the bar
+	 * @default "accent"
+	 */
+	"data-color"?: string;
+	/**
+	 * Thickness of the bar
+	 * @default "sm"
+	 */
+	"data-size"?: LinearProgressSize;
+	/**
+	 * Renders the bar absolutely positioned in a zero-height wrapper, so it
+	 * overlays the top of the following content instead of taking up space.
+	 * Use it for loading indicators that should not shift the layout.
+	 * @default false
+	 */
+	overlay?: boolean;
+	/**
+	 * Progress value. When omitted the bar is indeterminate.
+	 */
+	value?: number;
+	/**
+	 * Highest possible value of `value`
+	 * @default 100
+	 */
+	valueMax?: number;
+	/**
+	 * Lowest possible value of `value`
+	 * @default 0
+	 */
+	valueMin?: number;
+};
+
+/**
+ * Linear progress indicator, equivalent to MUI `LinearProgress`. Indeterminate
+ * by default, determinate when `value` is given. Designsystemet has no linear
+ * progress component, so this is built with the designsystemet colour and
+ * radius tokens (use `data-color` to change palette).
+ *
+ * @example
+ * ```jsx
+ * // Indeterminate, in the normal document flow
+ * <LinearProgress aria-label="Loading..." />
+ *
+ * // Determinate
+ * <LinearProgress aria-label="Uploading" value={40} />
+ *
+ * // Absolutely positioned, does not affect the layout
+ * <LinearProgress overlay aria-label="Loading..." />
+ * ```
+ */
+export function LinearProgress({
+	className,
+	overlay,
+	value,
+	valueMax = 100,
+	valueMin = 0,
+	"data-color": color = "accent",
+	"data-size": size = "sm",
+	...props
+}: LinearProgressProps) {
+	let isDeterminate = typeof value === "number" && Number.isFinite(value);
+	let clamped = isDeterminate ? Math.min(Math.max(value as number, valueMin), valueMax) : undefined;
+	let percentage =
+		clamped === undefined || valueMax === valueMin ? undefined : ((clamped - valueMin) / (valueMax - valueMin)) * 100;
+
+	let bar = (
+		<div
+			className={clsx(
+				"ObLinearProgress-root",
+				isDeterminate ? "ObLinearProgress-determinate" : "ObLinearProgress-indeterminate",
+				!overlay && className,
+			)}
+			data-color={color}
+			data-size={size}
+			role="progressbar"
+			aria-valuemin={valueMin}
+			aria-valuemax={valueMax}
+			aria-valuenow={clamped}
+			{...props}
+		>
+			<div
+				className="ObLinearProgress-bar ObLinearProgress-bar1"
+				style={percentage === undefined ? undefined : { inlineSize: `${percentage}%` }}
+			/>
+			{/* The indeterminate animation is two bars chasing each other, as in Material Design */}
+			{!isDeterminate && <div className="ObLinearProgress-bar ObLinearProgress-bar2" />}
+		</div>
+	);
+
+	if (!overlay) {
+		return bar;
+	}
+
+	return <div className={clsx("ObLinearProgress-overlay", className)}>{bar}</div>;
+}

package/src/progress/index.ts

@@ -1 +1 @@
-export * from "./LinearProgress.js";
+export * from "./LinearProgress.js";