@ciridae/ui 1.0.5 → 1.0.9

package/dist/components/toast.js

@@ -1,10 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
- * Toasts are sonner's, in the kit's look: a solid pill with a tone icon, the message, an optional
- * muted line under it, and at its end either an action as a small secondary button or a close
- * button. Mount
- * one `Toaster` at the app's root; raise toasts with `toast` from anywhere, or `useToast().add`
- * with the kit's options.
+ * Mount one `Toaster` at the app's root; raise toasts with `toast` from anywhere, or
+ * `useToast().add` with the kit's options.
  */
 import { CheckCircleIcon, InfoIcon, SpinnerGapIcon, WarningCircleIcon, WarningIcon, XIcon, } from "@phosphor-icons/react";
 import { Toaster as SonnerToaster, toast } from "sonner";
@@ -17,15 +14,15 @@ const card = css({
     display: "flex",
     alignItems: "center",
     gap: "layout.contentGap",
-    width: "100%",
-    maxWidth: "calc(100vw - token(spacing.layout.pageGap) * 2)",
+    width: "full",
+    maxWidth: "[calc(100vw - token(spacing.layout.pageGap) * 2)]",
     paddingBlock: "control.block",
     paddingInlineStart: "control.inline",
     paddingInlineEnd: "control.block",
     border: "1px solid token(colors.border.divider)",
     borderRadius: "card",
     // Solid in both themes: the panel's glass laid on the canvas in dark.
-    background: "linear-gradient(token(colors.bg.panel), token(colors.bg.panel)), token(colors.bg.canvas)",
+    background: "[linear-gradient(token(colors.bg.panel), token(colors.bg.panel)), token(colors.bg.canvas)]",
     _light: { background: "bg.surface" },
     color: "fg.primary",
     boxShadow: "soft",
@@ -35,7 +32,7 @@ const card = css({
     lineHeight: "compact",
     pointerEvents: "auto",
 });
-const content = css({ display: "grid", gap: "2px", flex: "1", minWidth: "0" });
+const content = css({ display: "grid", gap: "[2px]", flex: "1", minWidth: "0" });
 // Capped so a long message, such as a raw server error, can't grow the toast down the screen.
 const title = css({ fontWeight: "medium", lineClamp: "3", overflowWrap: "anywhere" });
 const description = css({
@@ -46,24 +43,20 @@ const description = css({
 });
 const iconSlot = css({
     display: "inline-flex",
-    height: "1lh",
+    height: "[1lh]",
     alignItems: "center",
     flexShrink: "0",
 });
-/*
- * An action raised through sonner's own `toast` with `{ label, onClick }`: the small secondary
- * button's shape and face, with a flat hairline, since sonner draws the button. `useToast` draws a
- * kit `Button` instead.
- */
+// `useToast` draws a kit `Button` for an action; sonner's own `toast` draws the button, so this styles it.
 const actionButton = css({
     flexShrink: "0",
     height: "control.small",
     paddingInline: "control.compactInline",
     border: "1px solid token(colors.border.glass)",
     borderRadius: "pill",
-    background: "token(gradients.raised)",
+    background: "[token(gradients.raised)]",
     color: "fg.primary",
-    fontFamily: "inherit",
+    fontFamily: "[inherit]",
     fontSize: "caption",
     fontWeight: "medium",
     letterSpacing: "compact",
@@ -91,7 +84,6 @@ const closeButton = css({
     _hover: { color: "fg.primary", background: "bg.hover" },
     _focusVisible: { focusRing: "outer" },
 });
-/* A progress toast's track and how far along it is, after its message. */
 const progressMessage = css({ display: "flex", alignItems: "center", gap: "layout.contentGap" });
 const progressMessageText = css({ flex: "1", minWidth: "0" });
 const progress = css({
@@ -106,9 +98,9 @@ const progressTrack = css({
     overflow: "hidden",
     borderRadius: "round",
     background: "border.control",
-    _light: { background: "token(gradients.canvas)" },
+    _light: { background: "[token(gradients.canvas)]" },
 });
-const progressFill = css({ height: "100%", borderRadius: "round", background: "fg.primary" });
+const progressFill = css({ height: "full", borderRadius: "round", background: "fg.primary" });
 const progressPercent = css({
     color: "fg.muted",
     _light: { color: "fg.secondary" },
@@ -129,7 +121,11 @@ const toasterStyle = {
 export function Toaster(props) {
     const { labels, dir } = useCiridaeLocale();
     const small = icon({ size: "small" });
-    return (_jsx(SonnerToaster, { position: "bottom-right", gap: 6, 
+    return (_jsx(SonnerToaster
+    // Sonner places by physical corner: the end corner of the line is the left one in RTL.
+    , { 
+        // Sonner places by physical corner: the end corner of the line is the left one in RTL.
+        position: dir === "rtl" ? "bottom-left" : "bottom-right", gap: 6, 
         // Listed apart rather than stacked under each other, so every message reads at once.
         expand: true, closeButton: true, dir: dir, icons: {
             success: _jsx(CheckCircleIcon, { className: cx(small, toneIcon.success), weight: "fill" }),
@@ -184,6 +180,7 @@ function addToast({ title: ownMessage, description: detail, variant, timeout, ac
     }
 }
 /** The kit's toast calls: `add` raises one and returns its id, `close` dismisses it. */
+const toastCalls = { add: addToast, close: (id) => toast.dismiss(id) };
 export function useToast() {
-    return { add: addToast, close: (id) => toast.dismiss(id) };
+    return toastCalls;
 }

package/dist/components/user-chip.js

@@ -18,7 +18,7 @@ const chip = css({
     display: "inline-flex",
     alignItems: "center",
     gap: "layout.controlGap",
-    maxWidth: "100%",
+    maxWidth: "full",
     minWidth: "0",
     height: "workspace.avatar",
     color: "fg.primary",
@@ -37,15 +37,15 @@ const chip = css({
 const person = css({
     display: "inline-flex",
     alignItems: "center",
-    gap: "inherit",
+    gap: "[inherit]",
     minWidth: "0",
-    maxWidth: "100%",
+    maxWidth: "full",
     padding: "none",
     border: "0",
     background: "transparent",
-    color: "inherit",
+    color: "[inherit]",
     font: "inherit",
-    letterSpacing: "inherit",
+    letterSpacing: "[inherit]",
     textDecoration: "none",
     "&:is(button, a)": {
         cursor: "pointer",
@@ -79,7 +79,7 @@ const actionButton = css({
 const card = css({
     display: "grid",
     minWidth: "overlay.menu",
-    maxWidth: "min(token(sizes.overlay.tooltip), calc(100vw - token(spacing.layout.pageGap) * 2))",
+    maxWidth: "[min(token(sizes.overlay.tooltip), calc(100vw - token(spacing.layout.pageGap) * 2))]",
     color: "fg.primary",
     fontSize: "caption",
     fontWeight: "regular",
@@ -110,7 +110,7 @@ const emailRow = css({
     display: "flex",
     alignItems: "center",
     gap: "control.iconGap",
-    marginBlock: "calc(token(spacing.layout.tightGap) * -1)",
+    marginBlock: "[calc(token(spacing.layout.tightGap) * -1)]",
     color: "fg.secondary",
     "& > span": { flex: "1", minWidth: "0", overflow: "hidden", textOverflow: "ellipsis" },
 });
@@ -131,7 +131,7 @@ const cardAction = css({
     font: "inherit",
     textAlign: "start",
     cursor: "pointer",
-    outline: "none",
+    outline: "0",
     "& > svg": { color: "fg.muted" },
     "&:hover, &:focus-visible": { background: "bg.rowHover" },
     _disabled: { opacity: "disabled", cursor: "not-allowed" },

package/dist/components/wizard.js

@@ -5,6 +5,7 @@ import { css, cx } from "#primitives/css";
 import { DialogHeightResetContext } from "./dialog-height-context.js";
 import { icon, spinning } from "./icon.js";
 import { Heading } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
 const wizard = css({ display: "grid", gap: "layout.contentGap", minWidth: "0" });
 const progressBar = css({ display: "flex", gap: "layout.tightGap" });
 const segment = css({
@@ -27,7 +28,7 @@ const panel = css({
     animationFillMode: "both",
     "&[data-direction=forward]": { animationName: "wizardEnterForward" },
     "&[data-direction=back]": { animationName: "wizardEnterBack" },
-    _motionReduce: { animationName: "none!" },
+    _motionReduce: { animationName: "[none!]" },
 });
 const result = css({
     display: "grid",
@@ -49,8 +50,8 @@ const resultIcon = css({
 const resultMark = css({ display: "inline-flex", position: "relative" });
 const resultBadge = css({
     position: "absolute",
-    insetInlineEnd: "calc(token(spacing.layout.tightGap) * -1)",
-    bottom: "calc(token(spacing.layout.tightGap) * -1)",
+    insetInlineEnd: "[calc(token(spacing.layout.tightGap) * -1)]",
+    bottom: "[calc(token(spacing.layout.tightGap) * -1)]",
     background: "bg.card",
     borderRadius: "round",
 });
@@ -66,6 +67,7 @@ const resultActions = css({
  * step shown before it. `steps` labels each step for the progress bar and assistive technology.
  */
 export function Wizard({ step, steps, progress = step, showProgress = true, state = "step", children, className, ...props }) {
+    const { labels } = useCiridaeLocale();
     const resetDialogHeight = useContext(DialogHeightResetContext);
     useLayoutEffect(() => {
         resetDialogHeight?.();
@@ -77,7 +79,7 @@ export function Wizard({ step, steps, progress = step, showProgress = true, stat
         setPreviousStep(step);
         setDirection(step > previousStep ? "forward" : "back");
     }
-    return (_jsxs("div", { ...props, className: cx(wizard, className), "data-ciridae-ui": "", "data-wizard-state": state, children: [showProgress && state !== "result" && steps.length > 1 && (_jsx("div", { className: progressBar, role: "progressbar", "aria-valuemin": 1, "aria-valuemax": steps.length, "aria-valuenow": Math.min(progress + 1, steps.length), "aria-valuetext": steps[progress], children: steps.map((_label, index) => (_jsx("span", { className: segment, "data-reached": index <= progress ? "" : undefined }, index))) })), _jsx("div", { className: viewport, children: _jsx("div", { className: panel, "data-direction": state === "result" ? undefined : direction, children: children }, step) })] }));
+    return (_jsxs("div", { ...props, className: cx(wizard, className), "data-ciridae-ui": "", "data-wizard-state": state, children: [showProgress && state !== "result" && steps.length > 1 && (_jsx("div", { className: progressBar, role: "progressbar", "aria-label": labels.common.progress, "aria-valuemin": 1, "aria-valuemax": steps.length, "aria-valuenow": Math.min(progress + 1, steps.length), "aria-valuetext": steps[progress], children: steps.map((_label, index) => (_jsx("span", { className: segment, "data-reached": index <= progress ? "" : undefined }, index))) })), _jsx("div", { className: viewport, children: _jsx("div", { className: panel, "data-direction": state === "result" ? undefined : direction, children: children }, step) })] }));
 }
 /** The end of a wizard: what happened, and what the reader can do next. */
 export function WizardResult({ variant, icon: mark, title, description, children, }) {

package/dist/preset.d.ts

@@ -1,8 +1,7 @@
 import type { CiridaeTheme } from "./theme/options.js";
 export type { Brand, CiridaeTheme, ColorTheme } from "./theme/options.js";
 export { breakpointQuery, breakpoints, type Breakpoint } from "./theme/breakpoints.js";
-export { PALETTE_NAMES, type PaletteName } from "./theme/palettes.js";
-export { deriveThemeTokens, themeVariables, type ThemeTokens } from "./theme/tokens.js";
+export { deriveThemeTokens, type ThemeTokens } from "./theme/tokens.js";
 export type CiridaePresetOptions = Partial<CiridaeTheme> & {
     /**
      * Element defaults for an app that owns the whole page: `html`, `body` and `#root` fill the