@leta-io/components 0.4.0 → 0.4.1

package/dist/index.d.ts

@@ -4447,7 +4447,7 @@ declare const BulkActionsToolbar: React.ForwardRefExoticComponent<BulkActionsToo
 
 /**
  * - `search-create` — search + filter buttons (Created / Filter / Sort By) on the
- *   left, primary CTAs (Add Order / Import-Export) on the right.
+ *   left, primary CTAs (Create Order / Import-Export) on the right.
  * - `search-column` — the same search + filters, with a data count + an
  *   Auto-refresh switch + Columns control on the right.
  * - `filters-column` — a Top Filter Section on the left, data count +
@@ -4481,10 +4481,10 @@ interface TableDataControlProps extends Omit<React.HTMLAttributes<HTMLDivElement
     searchSection?: React.ReactNode;
     /** Left section for `filters-column` — overrides the default Top Filter Section. */
     filters?: React.ReactNode;
-    /** Right section for `search-create` — overrides the default Add Order + Import/Export. */
+    /** Right section for `search-create` — overrides the default Create Order + Import/Export. */
     ctas?: React.ReactNode;
     /**
-     * Show the Primary "Add Order" button in the default `search-create` CTAs.
+     * Show the Primary "Create Order" button (labelled "Add Order" before 2026-10-14) in the default `search-create` CTAs.
      * Default true; set `false` for the Empty State toolbar, where the primary
      * Add Order CTA lives beside the illustration instead (per Figma
      * `4368:154614`). Ignored when `ctas` is overridden.
@@ -4559,7 +4559,7 @@ interface TableContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * **Centred automatically** (see `empty`) — pass the bare Empty State.
      */
     noResults?: React.ReactNode;
-    /** Fired by the default Empty State's Add Order CTA. */
+    /** Fired by the default Empty State's Create Order CTA (labelled "Add Order" before 2026-10-14). */
     onAddOrder?: () => void;
     /**
      * Fill the available height of a flex-column parent (`flex: 1`): the table
@@ -4816,17 +4816,20 @@ interface AlertDialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
     /**
      * Footer leading slot — content pinned far left, opposite the actions.
      *
-     * Its one use so far is a **"Don't show this again" checkbox** (Figma
-     * `1892:370929`, Change Driver): an opt-out belongs beside the actions it
-     * silences, but it is not itself an action, so it sits apart rather than joining
-     * the Close / Confirm pair. Switches the footer to `tertiary-action`, which is
-     * the variant that has a leading region.
+     * Content pinned far left, opposite the Close / Confirm pair, for something
+     * that isn't itself an action (e.g. an opt-out checkbox). Switches the footer to
+     * `tertiary-action`, which is the variant that has a leading region.
      */
     footerLeading?: React.ReactNode;
     /** Cancel/dismiss action label. Default "Close". */
     cancelLabel?: string;
     /** Confirm action label. Default "Confirm". */
     confirmLabel?: string;
+    /**
+     * Leading icon on the confirm button, e.g. `Check` for Change Driver
+     * (Figma `1892:370929`: Primary / Leading Icon). Default none.
+     */
+    confirmIconLeft?: IconName;
     /**
      * Style the confirm button as destructive (`Button variant="destructive"`,
      * red) instead of the default primary. Doc 3 §5: "primary styled to the

package/dist/index.js

@@ -7526,7 +7526,7 @@ var TableDataControl = /* @__PURE__ */ React59.forwardRef(
   }, ref) {
     const left = variant === "filters-column" ? filters ?? /* @__PURE__ */ jsx59(TopFilterSection, { filters: DEFAULT_FILTERS }) : searchSection ?? /* @__PURE__ */ jsx59(SearchAndFilter, { placeholder: searchPlaceholder, searchValue, onSearchChange, onSearchClear, filterCount, createdLabel, onCreated: onCreatedClick, onFilter: onFilterClick, onSort: onSortClick });
     const right = variant === "search-create" ? ctas ?? /* @__PURE__ */ jsxs42("div", { style: GROUP, children: [
-      showAddOrder && /* @__PURE__ */ jsx59(Button, { variant: "primary", size: "medium", iconLeft: "Add", onClick: onAddOrderClick, children: "Add Order" }),
+      showAddOrder && /* @__PURE__ */ jsx59(Button, { variant: "primary", size: "medium", iconLeft: "Add", onClick: onAddOrderClick, children: "Create Order" }),
       /* @__PURE__ */ jsx59(Button, { variant: "secondary", size: "medium", iconRight: "Chevron-Down", onClick: onImportExportClick, children: "Import/Export" })
     ] }) : !showColumnControl ? null : columnControl ?? /* @__PURE__ */ jsx59(ColumnControl, { dataCount, showCount: showDataCount, onColumns: onColumnsClick, autoRefresh, onAutoRefreshChange });
     return /* @__PURE__ */ jsxs42(
@@ -7707,7 +7707,7 @@ var TableContainer = /* @__PURE__ */ React61.forwardRef(
     ] });
     const centered = (node, minHeight) => /* @__PURE__ */ jsx61("div", { style: { minHeight, ...fillHeight ? { flex: 1 } : null, display: "flex", alignItems: "center", justifyContent: "center" }, children: node });
     const body = isEmpty ? centered(
-      empty ?? /* @__PURE__ */ jsx61(EmptyState, { type: "no-orders", size: "desktop", children: /* @__PURE__ */ jsx61(Button, { variant: "primary", size: "medium", iconLeft: "Add", onClick: onAddOrder, children: "Add Order" }) }),
+      empty ?? /* @__PURE__ */ jsx61(EmptyState, { type: "no-orders", size: "desktop", children: /* @__PURE__ */ jsx61(Button, { variant: "primary", size: "medium", iconLeft: "Add", onClick: onAddOrder, children: "Create Order" }) }),
       624
     ) : isNoResults ? centered(
       noResults ?? /* @__PURE__ */ jsx61(EmptyState, { type: "no-results", size: "desktop", description: "Try adjusting your filters and date." }),
@@ -8636,10 +8636,12 @@ var ConfigurationCardRow = /* @__PURE__ */ React67.forwardRef(
           alignItems: "center",
           width: "100%",
           boxSizing: "border-box",
-          padding: "var(--padding-20px)",
+          // Real border, padding trimmed by the stroke so the size is unchanged — an
+          // inset box-shadow in a semi-transparent colour renders visibly heavier.
+          padding: "calc(var(--padding-20px) - var(--stroke-xs))",
           borderRadius: "var(--rounding-xl)",
           backgroundColor: "var(--surface-neutral-bg-default)",
-          boxShadow: "inset 0 0 0 var(--stroke-xs) var(--border-neutral-default)",
+          border: "var(--stroke-xs) solid var(--border-neutral-default)",
           ...style
         },
         ...rest,
@@ -8698,10 +8700,11 @@ var ConfigurationCard = /* @__PURE__ */ React67.forwardRef(
           gap: 0,
           width: "100%",
           boxSizing: "border-box",
-          padding: "var(--padding-20px)",
+          // Real border (see the card above); padding trimmed by the stroke.
+          padding: "calc(var(--padding-20px) - var(--stroke-xs))",
           borderRadius: "var(--rounding-xxl)",
           backgroundColor: "var(--surface-neutral-bg-subtle)",
-          boxShadow: "inset 0 0 0 var(--stroke-xs) var(--border-neutral-default)",
+          border: "var(--stroke-xs) solid var(--border-neutral-default)",
           // Dimmed as a whole (Toggle included) so the card reads as unavailable
           // rather than merely un-toggled. Literal 0.6 — `--opacity-60` resolves
           // to the buggy `60px` (same workaround as WizardTab / SelectionControl).
@@ -9944,10 +9947,12 @@ var DesktopMetricCard = /* @__PURE__ */ React81.forwardRef(
           justifyContent: "center",
           width: "100%",
           boxSizing: "border-box",
-          padding: "var(--padding-20px)",
+          // Real border, padding trimmed by the stroke so the size is unchanged — an
+          // inset box-shadow in a semi-transparent colour renders visibly heavier.
+          padding: "calc(var(--padding-20px) - var(--stroke-xs))",
           borderRadius: "var(--rounding-xl)",
           backgroundColor: "var(--surface-neutral-card-idle)",
-          boxShadow: "inset 0 0 0 var(--stroke-xs) var(--border-neutral-card-idle)",
+          border: "var(--stroke-xs) solid var(--border-neutral-card-idle)",
           ...style
         },
         ...rest,
@@ -10049,13 +10054,17 @@ var OptionCard = /* @__PURE__ */ React82.forwardRef(
       gap: "var(--spacing-16px)",
       width: "100%",
       boxSizing: "border-box",
-      padding: "var(--padding-16px)",
+      // Real border whose width follows the state (1px, 1.5px when active), with
+      // the padding trimmed by the same width so the card never changes size. An
+      // inset box-shadow in a semi-transparent colour renders visibly heavier.
+      padding: `calc(var(--padding-16px) - ${state === "active" ? "var(--stroke-sm)" : "var(--stroke-xs)"})`,
       borderRadius: "var(--rounding-xl)",
       backgroundColor: SURFACE3[state],
-      boxShadow: [`inset 0 0 0 ${state === "active" ? "var(--stroke-sm)" : "var(--stroke-xs)"} ${BORDER3[state]}`, SHADOW[state]].filter(Boolean).join(", "),
+      border: `${state === "active" ? "var(--stroke-sm)" : "var(--stroke-xs)"} solid ${BORDER3[state]}`,
+      boxShadow: SHADOW[state] || void 0,
       cursor: disabled ? "not-allowed" : "pointer",
       opacity: disabled ? 0.6 : 1,
-      transition: "background-color 120ms ease, box-shadow 120ms ease",
+      transition: "background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
       // Forced focus state renders the ring statically; real keyboard focus is
       // handled by the `.leta-option-card:has(:focus-visible)` CSS rule.
       ...state === "focus" ? {
@@ -12984,8 +12993,10 @@ var ListSection = /* @__PURE__ */ React101.forwardRef(
           width: "100%",
           backgroundColor: "var(--surface-neutral-bg-default)",
           borderRadius: "var(--rounding-xl)",
-          boxShadow: `inset 0 0 0 var(--stroke-xs) var(--border-neutral-default)`,
-          padding: "var(--padding-20px)",
+          // Real border, padding trimmed by the stroke so the size is unchanged — an
+          // inset box-shadow in a semi-transparent colour renders visibly heavier.
+          border: "var(--stroke-xs) solid var(--border-neutral-default)",
+          padding: "calc(var(--padding-20px) - var(--stroke-xs))",
           ...style
         },
         ...rest,
@@ -13075,6 +13086,7 @@ var AlertDialog = /* @__PURE__ */ React103.forwardRef(
     footerLeading,
     cancelLabel = "Close",
     confirmLabel = "Confirm",
+    confirmIconLeft,
     destructive = false,
     onCancel,
     onConfirm,
@@ -13110,7 +13122,7 @@ var AlertDialog = /* @__PURE__ */ React103.forwardRef(
             leading: footerLeading,
             children: [
               /* @__PURE__ */ jsx98(Button, { variant: "secondary", size: "medium", onClick: onCancel, children: cancelLabel }),
-              /* @__PURE__ */ jsx98(Button, { variant: destructive ? "destructive" : "primary", size: "medium", onClick: onConfirm, children: confirmLabel })
+              /* @__PURE__ */ jsx98(Button, { variant: destructive ? "destructive" : "primary", size: "medium", iconLeft: confirmIconLeft, onClick: onConfirm, children: confirmLabel })
             ]
           }
         ),
@@ -13232,7 +13244,10 @@ function defaultBody(variant, imageSrc, signatureSrc) {
             // Grey backdrop while the image loads (`--surface-neutral-bg-tertiary`
             // is not a real token — it resolved to transparent).
             backgroundColor: "var(--surface-neutral-bg-muted)",
-            boxShadow: "inset 0 0 0 var(--stroke-xs) var(--border-neutral-default)"
+            // Real border inside the fixed 480×304 box (border-box), not an inset
+            // shadow — a semi-transparent inset shadow renders visibly heavier.
+            boxSizing: "border-box",
+            border: "var(--stroke-xs) solid var(--border-neutral-default)"
           }
         }
       );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leta-io/components",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "LETA React component library",
   "repository": {
     "type": "git",
@@ -28,8 +28,8 @@
     "country-flag-icons": "^1.6.17",
     "leaflet": "^1.9.4",
     "lottie-web": "^5.12.2",
-    "@leta-io/icons": "0.4.0",
-    "@leta-io/design-tokens": "0.4.0"
+    "@leta-io/icons": "0.4.1",
+    "@leta-io/design-tokens": "0.4.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",