margo-ui 6.0.0 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "margo-ui is a React component kit built on Tailwind CSS v4, with compound components and overridable CSS tokens.",
   "keywords": [
     "react",

package/src/components/callout/style.ts

@@ -1,4 +1,3 @@
-export const calloutBaseClassName =
-  "space-y-2 rounded-margo-base border-l-margo border-primary bg-low px-4 py-3 text-on-main";
+export const calloutBaseClassName = "rounded-margo-base border-l-margo border-primary bg-low px-4 py-3 text-on-main";
 
-export const calloutTitleClassName = "block text-mc uppercase tracking-widest text-primary";
+export const calloutTitleClassName = "block mb-1.5 text-mc uppercase tracking-widest text-primary";

package/src/components/label/label.tsx

@@ -1,15 +1,20 @@
 import { Tag } from "react-renderable";
 
 import { cn } from "../../utils/cn/cn.js";
-import { labelBaseClassName, labelDisabledClassName } from "./style.js";
+import { labelBaseClassName, labelDisabledClassName, labelSpacedClassName } from "./style.js";
 
 import type { ElementType } from "react";
 import type { LabelProps } from "./type.js";
 
-export const Label = <T extends ElementType = "label">({ disabled = false, className, ...rest }: LabelProps<T>) => (
+export const Label = <T extends ElementType = "label">({
+  disabled = false,
+  spaced = false,
+  className,
+  ...rest
+}: LabelProps<T>) => (
   <Tag
     {...Tag.forward<T>(rest, "label")}
     data-margo-disabled={disabled}
-    className={cn(labelBaseClassName, disabled && labelDisabledClassName, className)}
+    className={cn(labelBaseClassName, spaced && labelSpacedClassName, disabled && labelDisabledClassName, className)}
   />
 );

package/src/components/label/style.ts

@@ -1,3 +1,5 @@
-export const labelBaseClassName = "block text-mc uppercase tracking-widest text-medium truncate pl-3 mb-1";
+export const labelBaseClassName = "block text-mc uppercase tracking-widest text-medium truncate";
+
+export const labelSpacedClassName = "pl-3.5 mb-1";
 
 export const labelDisabledClassName = "opacity-40";

package/src/components/label/type.ts

@@ -3,6 +3,7 @@ import type { ElementType } from "react";
 
 export type LabelOwnProps = {
   disabled?: boolean;
+  spaced?: boolean;
 };
 
 export type LabelProps<T extends ElementType = "label"> = TagProps<T, LabelOwnProps>;

package/src/components/slider/slider.css

@@ -0,0 +1,73 @@
+.margo-slider {
+  appearance: none;
+
+  --margo-slider-track: var(--margo-color-border);
+  --margo-slider-fill: var(--margo-color-primary);
+  --margo-slider-thumb: var(--margo-color-primary);
+  --margo-slider-thumb-border: var(--margo-color-primary-darken);
+  --margo-slider-thumb-size: 1rem;
+  --margo-slider-track-size: 0.375rem;
+}
+
+.margo-slider::-webkit-slider-runnable-track {
+  block-size: var(--margo-slider-track-size);
+  border-radius: 9999px;
+  background: linear-gradient(
+    to right,
+    var(--margo-slider-fill) var(--margo-slider-value, 0%),
+    var(--margo-slider-track) var(--margo-slider-value, 0%)
+  );
+}
+
+.margo-slider::-moz-range-track {
+  block-size: var(--margo-slider-track-size);
+  border-radius: 9999px;
+  background: var(--margo-slider-track);
+}
+
+.margo-slider::-moz-range-progress {
+  block-size: var(--margo-slider-track-size);
+  border-radius: 9999px;
+  background: var(--margo-slider-fill);
+}
+
+.margo-slider::-webkit-slider-thumb {
+  appearance: none;
+  inline-size: var(--margo-slider-thumb-size);
+  block-size: var(--margo-slider-thumb-size);
+  margin-block-start: calc((var(--margo-slider-track-size) - var(--margo-slider-thumb-size)) / 2);
+  border: var(--margo-border) solid var(--margo-slider-thumb-border);
+  border-radius: 9999px;
+  background-color: var(--margo-slider-thumb);
+  box-shadow: var(--margo-shadow-button);
+  transition: scale 120ms ease-out;
+}
+
+.margo-slider::-moz-range-thumb {
+  inline-size: var(--margo-slider-thumb-size);
+  block-size: var(--margo-slider-thumb-size);
+  box-sizing: border-box;
+  border: var(--margo-border) solid var(--margo-slider-thumb-border);
+  border-radius: 9999px;
+  background-color: var(--margo-slider-thumb);
+  box-shadow: var(--margo-shadow-button);
+  transition: scale 120ms ease-out;
+}
+
+.margo-slider:enabled:active::-webkit-slider-thumb {
+  scale: 0.92;
+}
+
+.margo-slider:enabled:active::-moz-range-thumb {
+  scale: 0.92;
+}
+
+.margo-slider:focus-visible::-webkit-slider-thumb {
+  outline: var(--margo-border) solid var(--margo-color-on-main);
+  outline-offset: 1px;
+}
+
+.margo-slider:focus-visible::-moz-range-thumb {
+  outline: var(--margo-border) solid var(--margo-color-on-main);
+  outline-offset: 1px;
+}

package/src/components/slider/slider.tsx

@@ -0,0 +1,44 @@
+import { cn } from "../../utils/cn/cn.js";
+import { sliderBaseClassName } from "./style.js";
+
+import type { ChangeEvent, CSSProperties } from "react";
+import type { SliderProps } from "./type.js";
+
+import "./slider.css";
+
+const sliderPercent = (value: number, min: number, max: number) =>
+  max > min ? `${((Math.min(max, Math.max(min, value)) - min) / (max - min)) * 100}%` : "0%";
+
+export const Slider = ({
+  min = 0,
+  max = 100,
+  value,
+  defaultValue,
+  style,
+  className,
+  onChange,
+  ...rest
+}: SliderProps) => {
+  const current = Number(value ?? defaultValue ?? (Number(min) + Number(max)) / 2);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const input = event.currentTarget;
+
+    input.style.setProperty("--margo-slider-value", sliderPercent(input.valueAsNumber, Number(min), Number(max)));
+    onChange?.(event);
+  };
+
+  return (
+    <input
+      {...rest}
+      type="range"
+      min={min}
+      max={max}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={handleChange}
+      style={{ ...style, "--margo-slider-value": sliderPercent(current, Number(min), Number(max)) } as CSSProperties}
+      className={cn(sliderBaseClassName, className)}
+    />
+  );
+};

package/src/components/slider/style.ts

@@ -0,0 +1,2 @@
+export const sliderBaseClassName = `margo-slider h-5 w-full flex-none cursor-pointer bg-transparent text-on-main outline-none
+select-none disabled:cursor-auto disabled:opacity-40`;

package/src/components/slider/type.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithRef } from "react";
+
+export type SliderProps = Omit<ComponentPropsWithRef<"input">, "type">;

package/src/index.ts

@@ -18,6 +18,7 @@ export { Table } from "./components/table/table.js";
 export { Toggle } from "./components/toggle/toggle.js";
 export { Select } from "./components/select/select.js";
 export { Sheet } from "./components/sheet/sheet.js";
+export { Slider } from "./components/slider/slider.js";
 export { TextArea } from "./components/text_area/text_area.js";
 export { Spinner } from "./components/spinner/spinner.js";
 export { Tooltip } from "./components/tooltip/tooltip.js";
@@ -81,6 +82,7 @@ export type {
 } from "./components/table/type.js";
 export type { SelectOwnProps, SelectProps } from "./components/select/type.js";
 export type { SheetBodyProps, SheetFooterProps, SheetPlacement, SheetProps } from "./components/sheet/type.js";
+export type { SliderProps } from "./components/slider/type.js";
 export type { SpinnerProps } from "./components/spinner/type.js";
 export type { TextAreaOwnProps, TextAreaProps, TextAreaTextProps } from "./components/text_area/type.js";
 export type { ToggleProps } from "./components/toggle/type.js";