@olenbetong/synergi-react 1.0.5 → 2.0.1

package/src/ValueToggleGroup/index.css

@@ -0,0 +1,79 @@
+.ObValueToggleGroup {
+	padding: 0.25rem;
+	border: 2px solid rgb(0 0 0 / 0.2);
+	border-radius: 4px;
+
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+
+  &.vertical {
+    flex-direction: column;
+    align-items: center;
+
+		& .ObValueToggleOption {
+			width: 100%;
+
+			& .ObValueToggleLabel {
+				width: 100%;
+				text-align: center;
+			}
+		}
+  }
+
+  &:focus-within {
+    border-color: rgb(0 0 0 / 0.8);
+  }
+}
+
+.ObValueToggleOption {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  position: relative;
+}
+
+.ObValueToggleOption input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.ObValueToggleLabel {
+  font-size: 0.8em;
+  margin: 0 0.2em;
+  padding: 0.3em 0.5em;
+  text-transform: uppercase;
+  transition: background 0.2s ease, color 0.2s ease;
+  border-radius: 4px;
+}
+
+.ObValueToggleOption:hover input:not(:disabled) + .ObValueToggleLabel {
+  cursor: pointer;
+  background: #ccc;
+}
+
+.ObValueToggleOption input:checked + .ObValueToggleLabel {
+  --color-bg: var(--brand-dark);
+  background-color: var(--color-bg);
+  color: white;
+  cursor: default;
+}
+
+.ObValueToggleOption input:disabled + .ObValueToggleLabel {
+  color: rgb(0 0 0 / 0.5);
+}
+
+.ObValueToggleOption input:checked:focus-visible + .ObValueToggleLabel {
+  --color-bg: var(--brand-light);
+  outline: 2px solid var(--brand-light);
+}
+
+.ObValueToggleOption input:checked:hover + .ObValueToggleLabel {
+  background-color: var(--color-bg);
+}

package/src/ValueToggleGroup/index.tsx

@@ -0,0 +1,52 @@
+import "./index.css";
+
+import { forwardRef, useId } from "react";
+import clsx from "clsx";
+
+export type ValueToggleOption = {
+	value: string | number;
+	label?: React.ReactNode;
+	disabled?: boolean;
+};
+
+export type ValueToggleGroupProps = {
+	options: ValueToggleOption[];
+	value?: string | number;
+	defaultValue?: string | number;
+	onChange?: (value: string | number) => void;
+	className?: string;
+	name?: string;
+	id?: string;
+	style?: React.CSSProperties;
+	orientation?: "horizontal" | "vertical";
+};
+
+export const ValueToggleGroup = forwardRef<HTMLFieldSetElement, ValueToggleGroupProps>(function ValueToggleGroup(
+	{ options, value, defaultValue, onChange, className, name, id, style, orientation = "horizontal" },
+	ref,
+) {
+	let randomId = useId();
+	let groupName = name || `toggle-${id ?? randomId}`;
+	let isControlled = value !== undefined;
+
+	return (
+		<fieldset className={clsx("ObValueToggleGroup", orientation, className)} role="radiogroup" ref={ref} style={style}>
+			{options.map((opt) => {
+				return (
+					<label key={opt.value} className={clsx("ObValueToggleOption", { disabled: opt.disabled })}>
+						<input
+							type="radio"
+							name={groupName}
+							value={opt.value}
+							checked={isControlled ? value === opt.value : undefined}
+							defaultChecked={!isControlled ? defaultValue === opt.value : undefined}
+							onChange={() => onChange?.(opt.value)}
+							disabled={opt.disabled}
+						/>
+						<span className="ObValueToggleLabel">{opt.label ?? opt.value}</span>
+					</label>
+				);
+			})}
+		</fieldset>
+	);
+});

package/src/index.scss

@@ -1,9 +1,10 @@
 @use "Checkbox/index.scss";
-@use "ColorCard/index.scss" as index2;
+@use "ColorCard/index.css" as index2;
 @use "DateNavigator/index.scss" as index3;
 @use "LinkedCardList/index.scss" as index4;
 @use "PageBanner/index.scss" as index5;
 @use "ProgressBar/index.scss" as index6;
 @use "Sidebar/index.scss" as index7;
+@use "Spinner/index.css" as index1;
 @use "SplitContainer/index.scss" as index8;
-@use "ValueToggle/index.scss" as index9;
+@use "ValueToggleGroup/index.css" as index9;

package/src/index.ts

@@ -1,24 +1,24 @@
-export { Checkbox, CheckboxProps } from "./Checkbox/index.js";
-export { ColorCard, CardColumn, CardDetail, CardLabel } from "./ColorCard/index.js";
+export { Checkbox, type CheckboxProps } from "./Checkbox/index.js";
+export { ColorCard, CardColumn, CardDetail, CardLabel, CardStep, CardStepList } from "./ColorCard/index.js";
 export { DateNavigator } from "./DateNavigator/index.js";
-export { Card, List as LinkedList, ListItem as LinkedListItem } from "./LinkedCardList/index.js";
+export { Card, LinkedList, LinkedListItem } from "./LinkedCardList/index.js";
 export {
 	BannerImage as PageBannerImage,
-	BannerImageProps,
+	type BannerImageProps,
 	PageBanner,
-	PageBannerProps,
+	type PageBannerProps,
 	Tab as PageBannerTab,
-	TabProps as PageBannerTabProps,
+	type TabProps as PageBannerTabProps,
 	TabList as PageBannerTabList,
-	TabListProps as PageBannerTabListProps,
+	type TabListProps as PageBannerTabListProps,
 	Title as PageBannerTitle,
-	TitleProps as PageBannerTitleProps,
+	type TitleProps as PageBannerTitleProps,
 } from "./PageBanner/index.js";
 export { Portal } from "./Portal/index.js";
 export { ProgressBar } from "./ProgressBar/index.js";
-export { Sidebar, SidebarProps } from "./Sidebar/index.js";
-export { Spinner, SpinnerProps } from "./Spinner/index.js";
-export { SplitContainer, SplitContainerProps } from "./SplitContainer/index.js";
+export { Sidebar, type SidebarProps } from "./Sidebar/index.js";
+export { Spinner, type SpinnerProps } from "./Spinner/index.js";
+export { SplitContainer, type SplitContainerProps } from "./SplitContainer/index.js";
 
 export { useTranslation } from "./useTranslation/index.js";
-export { ValueToggle, ValueToggleProps } from "./ValueToggle/index.js";
+export { ValueToggleGroup, type ValueToggleGroupProps } from "./ValueToggleGroup/index.js";

package/src/useTranslation/index.ts

@@ -16,7 +16,7 @@ async function translateText(text: string, target: string, apiKey: string) {
 	let json = await result.json();
 	let { data } = json;
 
-	if (data && data.translations) {
+	if (data?.translations) {
 		let [translation] = data.translations;
 
 		return {
@@ -35,6 +35,7 @@ export function useTranslation(text: string, targetLanguage: string, apiKey: str
 	let [isTranslating, setIsTranslating] = useState(false);
 	let textRef = useRef(text);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: this is a way of resetting the state so we don't show outdated translations when the text changes
 	useEffect(() => {
 		textRef.current = text;
 		return () => {

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) Ølen Betong
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/es/ColorCard/index.css

@@ -1 +0,0 @@
-.ObColorCard-root{--bg-color-border: black;--bg-color-main: white;--bg-size: 0.75rem;--card-color: rgb(0, 0, 0);align-items:stretch;background-image:linear-gradient(to right, hsl(186, 72%, 24%), hsl(186, 72%, 24%) 0.75rem, white 0.75rem, white);background-image:linear-gradient(to right, var(--bg-color-border), var(--bg-color-border) var(--bg-size), var(--bg-color-main) var(--bg-size), var(--bg-color-main));border-radius:.25rem;box-shadow:0 1px 12px rgba(0,0,0,.15),0 1px 6px rgba(0,0,0,.25);color:#666;cursor:pointer;display:flex;font-family:"Variable Bahnschrift","Bahnschrift","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;min-height:10rem;overflow:hidden;transition:all ease-in-out 300ms}.ObColorCard-root:nth-of-type(5n + 1){--bg-color-border: rgb(178, 108, 190)}.ObColorCard-root:nth-of-type(5n + 2){--bg-color-border: rgb(79, 164, 61)}.ObColorCard-root:nth-of-type(5n + 3){--bg-color-border: rgb(246, 170, 23)}.ObColorCard-root:nth-of-type(5n + 4){--bg-color-border: rgb(218, 93, 83)}.ObColorCard-root:nth-of-type(5n + 5){--bg-color-border: rgb(23, 162, 184)}.ObColorCard-root:hover,.ObColorCard-root:focus{--bg-color-main: #f5f5f5;box-shadow:0 3px 18px rgba(0,0,0,.15),0 3px 12px rgba(0,0,0,.25);color:#666;text-decoration:none}@media screen and (min-width: 48rem){.ObColorCard-root{font-size:1.2rem}}.ObColorCard-column{display:flex;flex:1 1 100%;flex-direction:column;justify-content:space-between;margin:1rem 0;overflow:hidden;padding:.5rem 1.5rem .5rem 1rem;text-overflow:ellipsis}.ObColorCard-column:first-child{margin-left:.75rem;margin-left:var(--bg-size)}.ObColorCard-column.ObColorCard-minor{border-right:1px solid #e3e3e3;flex:0 0 4rem;transition:margin ease-in-out 300ms}@media screen and (min-width: 48rem){.ObColorCard-column.ObColorCard-minor{flex:0 0 8rem}}.ObColorCard-detailLabel{color:#ccc;font-size:.8rem;text-transform:uppercase}.ObColorCard-detail:not(:last-child){margin-right:1.5rem}.ObColorCard-detail.ObColorCard-primary,.ObColorCard-detail.ObColorCard-primary .ObColorCard-detailValue{font-size:1.25rem;font-weight:300}.ObColorCard-detail.ObColorCard-primary .ObColorCard-detailValue{color:unset}@media screen and (min-width: 48rem){.ObColorCard-detail{font-size:1rem}}.ObColorCard-detailValue{color:#999}.ObColorCard-label{position:relative;padding-left:1.5rem}.ObColorCard-label:not(:last-child){margin-bottom:1rem}.ObColorCard-label:not(:last-child)::after{content:"";position:absolute;width:.2rem;height:calc(100% + 1rem);border-left:.2rem dotted #666;left:.25rem;top:.5rem;z-index:0}.ObColorCard-label::before{background:#fff;border:.2rem solid hsl(186,72%,24%);border:.2rem solid var(--bg-color-border);border-radius:50%;content:"";display:block;height:.75rem;left:0;position:absolute;top:.3rem;width:.75rem;z-index:1}

package/es/Spinner/index.css

@@ -1 +0,0 @@
-.ObSpinner-root{display:inline-block}.ObSpinner-fullPage{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw}.ObSpinner-spinner{display:inline-block;height:.75em;position:relative;width:2.5em}.ObSpinner-bullet{animation-timing-function:cubic-bezier(0, 1, 1, 0);background:#666;border-radius:50%;height:.5em;position:absolute;top:.2rem;width:.5em}.ObSpinner-bullet:nth-child(1){animation:scaleAnimation .6s infinite ease-in-out;left:.25em}.ObSpinner-bullet:nth-child(2){animation:translateAnimation .6s infinite ease-in-out;left:.25em}.ObSpinner-bullet:nth-child(3){animation:translateAnimation .6s infinite ease-in-out;left:1.2em}.ObSpinner-bullet:nth-child(4){animation:scaleAnimation .6s infinite ease-in-out reverse;left:2em}@keyframes scaleAnimation{from{transform:scale(0)}to{transform:scale(1)}}@keyframes translateAnimation{from{transform:translate(0, 0)}to{transform:translate(0.825em, 0)}}

package/es/ValueToggle/index.css

@@ -1 +0,0 @@
-.ObValueToggle-root{display:flex;align-items:center}.ObValueToggle-option{margin-bottom:0}.ObValueToggle-label{cursor:pointer;font-size:.8em;margin:0 .2em;padding:.3em .5em;text-transform:uppercase}.ObValueToggle-label:hover{background:#ccc}.ObValueToggle-input:checked+.ObValueToggle-label{--color-bg: var(--brand-dark);background-color:#666;background-color:var(--color-bg);cursor:default;color:#fff}.ObValueToggle-input:checked:focus-within+.ObValueToggle-label{--color-bg: var(--brand-light)}.ObValueToggle-input:checked:hover+.ObValueToggle-label{background-color:#666;background-color:var(--color-bg)}.ObValueToggle-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}

package/es/ValueToggle/index.d.ts

@@ -1,18 +0,0 @@
-import "./index.css";
-export type ValueToggleProps = {
-    className?: string;
-    onChange?: (value: string | number) => void;
-    value?: string | number;
-    defaultValue?: string | number;
-    id?: string;
-    options: Array<string | {
-        value: string | number;
-        label?: string;
-    }>;
-    style?: React.CSSProperties;
-};
-export declare const ValueToggle: import("react").ForwardRefExoticComponent<ValueToggleProps & import("react").RefAttributes<{
-    focus: () => void;
-    blur: () => void;
-    value: string | number;
-}>>;

package/es/ValueToggle/index.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./index.css";
-import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-let valueToggleId = 0;
-function ValueToggleInner({ className, onChange, defaultValue, options, value, ...other }, ref) {
-    const wrapperRef = useRef(null);
-    const [toggleName] = useState("obet-value-toggle-" + String(++valueToggleId));
-    const isControlled = value !== undefined;
-    useImperativeHandle(ref, () => {
-        const e = wrapperRef.current?.querySelector("input");
-        return {
-            focus: () => e?.focus(),
-            blur: () => e?.blur(),
-            value: (e?.querySelector("input:checked")).value,
-        };
-    });
-    return (_jsx("fieldset", { className: className, ...other, children: _jsx("div", { className: "ObValueToggle-root", ref: wrapperRef, children: options.map((option) => {
-                const isObj = typeof option === "object";
-                const optValue = isObj ? option.value : option;
-                const props = {
-                    value: optValue,
-                };
-                if (isControlled) {
-                    props.checked = value === optValue;
-                }
-                else {
-                    props.defaultChecked = defaultValue === optValue;
-                }
-                if (typeof onChange === "function") {
-                    props.onChange = () => onChange(optValue);
-                }
-                if (isObj) {
-                    Object.assign(props, option);
-                }
-                return (_jsxs("label", { className: "ObValueToggle-option", children: [_jsx("input", { type: "radio", className: "ObValueToggle-input", name: toggleName, ...props }), _jsx("span", { className: "ObValueToggle-label", children: isObj ? option.label || optValue : optValue })] }, optValue));
-            }) }) }));
-}
-export const ValueToggle = forwardRef(ValueToggleInner);

package/src/ValueToggle/index.scss

@@ -1,50 +0,0 @@
-@use "../styles/variables";
-
-.ObValueToggle-root {
-	display: flex;
-	align-items: center;
-}
-
-.ObValueToggle-option {
-	margin-bottom: 0;
-}
-
-.ObValueToggle-label {
-	cursor: pointer;
-	font-size: 0.8em;
-	margin: 0 0.2em;
-	padding: 0.3em 0.5em;
-	text-transform: uppercase;
-
-	&:hover {
-		background: #ccc;
-	}
-
-	.ObValueToggle-input:checked + & {
-		--color-bg: var(--brand-dark);
-		background-color: #666;
-		background-color: var(--color-bg);
-		cursor: default;
-		color: white;
-	}
-
-	.ObValueToggle-input:checked:focus-within + & {
-		--color-bg: var(--brand-light);
-	}
-
-	.ObValueToggle-input:checked:hover + & {
-		background-color: #666;
-		background-color: var(--color-bg);
-	}
-}
-
-.ObValueToggle-input {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	border: 0;
-}

package/src/ValueToggle/index.tsx

@@ -1,75 +0,0 @@
-import "./index.scss";
-
-import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-
-let valueToggleId = 0;
-
-export type ValueToggleProps = {
-	className?: string;
-	onChange?: (value: string | number) => void;
-	value?: string | number;
-	defaultValue?: string | number;
-	id?: string;
-	options: Array<string | { value: string | number; label?: string }>;
-	style?: React.CSSProperties;
-};
-
-function ValueToggleInner(
-	{ className, onChange, defaultValue, options, value, ...other }: ValueToggleProps,
-	ref: React.ForwardedRef<{
-		focus: () => void;
-		blur: () => void;
-		value: string | number;
-	}>,
-) {
-	const wrapperRef = useRef<HTMLDivElement>(null);
-	const [toggleName] = useState("obet-value-toggle-" + String(++valueToggleId));
-	const isControlled = value !== undefined;
-
-	useImperativeHandle(ref, () => {
-		const e = wrapperRef.current?.querySelector("input");
-
-		return {
-			focus: () => e?.focus(),
-			blur: () => e?.blur(),
-			value: (e?.querySelector("input:checked") as HTMLInputElement).value,
-		};
-	});
-
-	return (
-		<fieldset className={className} {...other}>
-			<div className="ObValueToggle-root" ref={wrapperRef}>
-				{options.map((option) => {
-					const isObj = typeof option === "object";
-					const optValue = isObj ? option.value : option;
-					const props: React.HTMLProps<HTMLInputElement> = {
-						value: optValue,
-					};
-
-					if (isControlled) {
-						props.checked = value === optValue;
-					} else {
-						props.defaultChecked = defaultValue === optValue;
-					}
-
-					if (typeof onChange === "function") {
-						props.onChange = () => onChange(optValue);
-					}
-
-					if (isObj) {
-						Object.assign(props, option);
-					}
-
-					return (
-						<label key={optValue} className="ObValueToggle-option">
-							<input type="radio" className="ObValueToggle-input" name={toggleName} {...props} />
-							<span className="ObValueToggle-label">{isObj ? option.label || optValue : optValue}</span>
-						</label>
-					);
-				})}
-			</div>
-		</fieldset>
-	);
-}
-
-export const ValueToggle = forwardRef(ValueToggleInner);