+
+ )
+}
diff --git a/libs/ui/src/organisms/line-item.figma.ts b/libs/ui/src/organisms/line-item.figma.ts
new file mode 100644
index 0000000000..4af1169bbf
--- /dev/null
+++ b/libs/ui/src/organisms/line-item.figma.ts
@@ -0,0 +1,47 @@
+// url=https://www.figma.com/design/gi5GUSWwAeXknaKEeLqK5w/New-Design-System?node-id=3900-594
+// source=https://github.com/TechsioCZ/new-engine/blob/feat/ui-kit-cart-presentation/libs/ui/src/organisms/line-item.tsx
+// component=LineItem
+
+import figma from "figma"
+
+const instance = figma.selectedInstance
+const title = instance.getString("title")
+const layout = instance.getEnum("layout", {
+ default: "default",
+ compact: "compact",
+})
+const readOnly = instance.getEnum("readOnly", { false: false, true: true })
+const pending = instance.getEnum("pending", { false: false, true: true })
+const pendingLabel = instance.getString("pendingLabel")
+const readOnlyLabel = instance.getString("readOnlyLabel")
+const image = instance.getBoolean("showImage") ? instance.getSlot("Image") : []
+const price = instance.getBoolean("showPrice") ? instance.getSlot("Price") : []
+const options = instance.getBoolean("showOptions")
+ ? instance.getString("options")
+ : undefined
+const feedback = instance.getBoolean("showFeedback")
+ ? instance.getSlot("Feedback")
+ : []
+const quantity = instance.getSlot("Quantity")
+const actions = instance.getSlot("Actions")
+
+export default {
+ id: "LineItem",
+ imports: ['import { LineItem } from "@techsio/ui-kit/organisms/line-item"'],
+ example: figma.code`-
+ {rows.map(({ id, label, value, emphasis, note }) => (
+
- {label} +
- + {value} + {note ? {note} : null} + +
- {totalLabel} +
- {totalValue} +
+
+ ))}
+
+
+ + {pendingLabel} +
+ ) : null} + {footer ?{footer}
: null}
+ {actions ? (
+
+ {actions}
+
+ ) : null}
+
+ {children}
+ {pending ? (
+
+ {pendingLabel}
+
+ ) : null}
+
+
+ {children ?? title}
+
+ )
+}
+LineItem.Price = function LineItemPrice({
+ className,
+ ...props
+}: LineItemPartProps) {
+ const { styles } = useLineItemContext()
+ return (
+
+ )
+}
+LineItem.Options = function LineItemOptions({
+ className,
+ ...props
+}: LineItemPartProps) {
+ const { styles } = useLineItemContext()
+ return (
+
+ )
+}
+LineItem.Controls = function LineItemControls({
+ className,
+ ...props
+}: LineItemPartProps) {
+ const { styles } = useLineItemContext()
+ return (
+
+ )
+}
+LineItem.Quantity = function LineItemQuantity({
+ readOnlyLabel,
+ children,
+ className,
+ ...props
+}: LineItemQuantityProps) {
+ const { styles, readOnly, pending } = useLineItemContext()
+ return readOnly ? (
+
+ {readOnlyLabel}
+
+ ) : (
+
+ {children}
+
+ )
+}
+LineItem.Actions = function LineItemActions({
+ className,
+ ...props
+}: LineItemPartProps) {
+ const { styles, readOnly, pending } = useLineItemContext()
+ if (readOnly) {
+ return null
+ }
+ return (
+
+ )
+}
+LineItem.Remove = function LineItemRemove({
+ label,
+ onClick,
+ disabled,
+ size = "sm",
+ theme = "borderless",
+ ...props
+}: LineItemRemoveProps) {
+ const { title, readOnly, pending } = useLineItemContext()
+ if (readOnly) {
+ return null
+ }
+ return (
+
+ )
+}
diff --git a/libs/ui/src/tokens/components/components.css b/libs/ui/src/tokens/components/components.css
index 1a37a8ba1b..f97790ebf1 100644
--- a/libs/ui/src/tokens/components/components.css
+++ b/libs/ui/src/tokens/components/components.css
@@ -35,6 +35,7 @@
@import "./molecules/_popover.css";
@import "./molecules/_price-block.css";
@import "./molecules/_quantity-field.css";
+@import "./molecules/_totals-summary.css";
@import "./molecules/_radio-card.css";
@import "./molecules/_radio-group.css";
@import "./molecules/_menu.css";
@@ -55,6 +56,7 @@
@import "./organisms/_footer.css";
@import "./organisms/_header.css";
@import "./organisms/_gallery.css";
+@import "./organisms/_line-item.css";
@import "./organisms/_sidebar.css";
@import "./templates/_facet-filter-panel.css";
diff --git a/libs/ui/src/tokens/components/molecules/_totals-summary.css b/libs/ui/src/tokens/components/molecules/_totals-summary.css
new file mode 100644
index 0000000000..eb4816cb51
--- /dev/null
+++ b/libs/ui/src/tokens/components/molecules/_totals-summary.css
@@ -0,0 +1,25 @@
+@theme static {
+ /* Reference layer */
+ --color-totals-summary-content: var(--color-fg-primary);
+ --color-totals-summary-muted: var(--color-fg-primary);
+ --color-totals-summary-positive: var(--color-success-fg);
+ --color-totals-summary-divider: var(--color-border-secondary);
+ --spacing-totals-summary-related: var(--spacing-150);
+ --spacing-totals-summary-section: var(--spacing-250);
+
+ /* Derived layer */
+ --color-totals-summary-fg: var(--color-totals-summary-content);
+ --color-totals-summary-note-fg: var(--color-totals-summary-muted);
+ --color-totals-summary-discount-fg: var(--color-totals-summary-positive);
+ --color-totals-summary-divider-border: var(--color-totals-summary-divider);
+ --border-width-totals-summary-divider: var(--border-width-sm);
+ --gap-totals-summary: var(--spacing-totals-summary-section);
+ --gap-totals-summary-rows: var(--spacing-totals-summary-related);
+ --gap-totals-summary-columns: var(--spacing-totals-summary-related);
+ --gap-totals-summary-actions: var(--spacing-totals-summary-related);
+ --padding-totals-summary-total: var(--spacing-totals-summary-related);
+ --text-totals-summary-size: var(--text-sm);
+ --text-totals-summary-note-size: var(--text-xs);
+ --text-totals-summary-total-size: var(--text-lg);
+ --font-weight-totals-summary-total: var(--font-weight-semibold);
+}
diff --git a/libs/ui/src/tokens/components/organisms/_line-item.css b/libs/ui/src/tokens/components/organisms/_line-item.css
new file mode 100644
index 0000000000..4fd4093aa3
--- /dev/null
+++ b/libs/ui/src/tokens/components/organisms/_line-item.css
@@ -0,0 +1,31 @@
+@theme static {
+ /* Reference layer */
+ --color-line-item-content: var(--color-fg-primary);
+ --color-line-item-muted: var(--color-fg-primary);
+ --spacing-line-item-related: var(--spacing-150);
+ --spacing-line-item-separated: var(--spacing-200);
+ --spacing-line-item-thumbnail: var(--spacing-850);
+ --spacing-line-item-thumbnail-compact: var(--spacing-700);
+
+ /* Derived layer */
+ --color-line-item-content-fg: var(--color-line-item-content);
+ --color-line-item-options-fg: var(--color-line-item-muted);
+ --gap-line-item: var(--spacing-line-item-separated);
+ --gap-line-item-compact: var(--spacing-line-item-related);
+ --gap-line-item-content: var(--spacing-line-item-related);
+ --gap-line-item-heading: var(--spacing-line-item-related);
+ --gap-line-item-controls: var(--spacing-line-item-related);
+ --spacing-line-item-image: var(--spacing-line-item-thumbnail);
+ --spacing-line-item-image-compact: var(--spacing-line-item-thumbnail-compact);
+ --spacing-line-item-title-min-width: var(--spacing-950);
+ --spacing-line-item-quantity-width: calc(var(--spacing-950) * 2);
+ --grid-template-columns-line-item: auto minmax(0, 1fr);
+ --radius-line-item-image: var(--radius-sm);
+ --text-line-item-title-size: var(--text-md);
+ --text-line-item-detail-size: var(--text-sm);
+ --font-weight-line-item-title: var(--font-weight-medium);
+}
+
+@utility grid-cols-line-item {
+ grid-template-columns: var(--grid-template-columns-line-item);
+}
diff --git a/libs/ui/stories/changelog/changelog.stories.tsx b/libs/ui/stories/changelog/changelog.stories.tsx
index c8ab2ee4eb..5239a6d529 100644
--- a/libs/ui/stories/changelog/changelog.stories.tsx
+++ b/libs/ui/stories/changelog/changelog.stories.tsx
@@ -12,6 +12,18 @@ import type { Meta, StoryObj } from "@storybook/react"
const CHANGELOG = `
## @techsio/ui-kit — Unreleased
+### LineItem v1.0.2
+- Accept object and callback refs on the removal button after the Button props update.
+
+### LineItem v1.0.1
+- Mark the compound row as a client module for Next.js and document client-wrapper composition for read-only recaps.
+
+### LineItem v1.0.0
+- Added a compound cart and order row with composable image/title/price/quantity/actions parts, shared read-only/pending guards, product-specific removal labels and compact layout. Requests and inventory rules remain consumer-owned.
+
+### TotalsSummary v1.0.0
+- Added prepared label/value rows, notes, discounts, an explicit total and pending feedback. Unresolved fees remain caller-provided text; the component does not calculate totals.
+
### Checkbox v1.0.2
- Preserve callback ref cleanup with React 19 and current Tailwind utilities.
diff --git a/libs/ui/stories/molecules/totals-summary.stories.tsx b/libs/ui/stories/molecules/totals-summary.stories.tsx
new file mode 100644
index 0000000000..1d84b7eebc
--- /dev/null
+++ b/libs/ui/stories/molecules/totals-summary.stories.tsx
@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { fn } from "storybook/test"
+import { VariantContainer, VariantGroup } from "../../.storybook/decorator"
+import { Button } from "../../src/atoms/button"
+import {
+ TotalsSummary,
+ type TotalsSummaryRow,
+} from "../../src/molecules/totals-summary"
+
+const checkout = fn()
+const completeRows: readonly TotalsSummaryRow[] = [
+ { id: "goods", label: "Zboží", value: "1 498 Kč" },
+ {
+ id: "shipping",
+ label: "Doprava",
+ value: "89 Kč",
+ note: "Doručení na adresu",
+ },
+ { id: "payment", label: "Platba", value: "Zdarma", note: "Kartou online" },
+]
+const partialRows: readonly TotalsSummaryRow[] = [
+ { id: "goods", label: "Zboží", value: "1 498 Kč" },
+ { id: "shipping", label: "Doprava", value: "Zvolte dopravu" },
+ { id: "payment", label: "Platba", value: "Zvolte platbu" },
+]
+
+const meta: Meta
+
+ Pokračovat k objednávce
+
+ }
+ />
+
+ ),
+}
+
+export const Partial: Story = {
+ name: "Částečný souhrn — doprava ještě není vybraná",
+ args: {
+ rows: partialRows,
+ totalLabel: "Mezisoučet včetně DPH",
+ totalValue: "1 498 Kč",
+ footer: "Konečná cena bude dostupná po výběru dopravy a platby.",
+ },
+ render: (args) => (
+
+
+ ),
+}
+
+export const Complete: Story = {
+ name: "Kompletní souhrn — vybraná doprava a platba",
+ render: (args) => (
+
+ Pokračovat k objednávce}
+ />
+
+ ),
+}
+
+export const Discounted: Story = {
+ name: "Sleva — samostatný záporný řádek",
+ args: {
+ rows: [
+ ...completeRows,
+ {
+ id: "discount",
+ label: "Sleva VITEJTE",
+ value: "−150 Kč",
+ emphasis: "discount",
+ note: "Platný slevový kód",
+ },
+ ],
+ totalValue: "1 437 Kč",
+ },
+ render: (args) => (
+
+
+ ),
+}
+
+export const Pending: Story = {
+ name: "Aktualizace — poslední částky a zablokovaná akce",
+ args: { pending: true, pendingLabel: "Aktualizujeme souhrn objednávky" },
+ render: (args) => (
+
+
+ Pokračovat k objednávce
+
+ }
+ />
+
+ ),
+}
+
+export const CustomRows: Story = {
+ name: "Vlastní řádky — bez předepsaných poplatků a výpočtů",
+ render: () => (
+
+
+
+
+ ),
+}
+export const ReadOnly: Story = {
+ args: { readOnly: true },
+ render: (args) => (
+
+
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story:
+ "Stejná compound skladba obsahuje QuantityField i Remove. Root readOnly ale quantity nahradí textem a akce úplně vynechá.",
+ },
+ },
+ },
+}
+export const Pending: Story = {
+ args: { pending: true, pendingLabel: "Ukládáme položku" },
+ render: (args) => (
+
+
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story:
+ "Root blokuje Quantity a Actions pomocí inert, Remove navíc deaktivuje. QuantityField dostává pending také pro viditelný stav.",
+ },
+ },
+ },
+}
+export const Unavailable: Story = {
+ render: (args) => (
+
+
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story:
+ "Aplikace označí položku jako nedostupnou a deaktivuje quantity. Odebrání zůstává dostupné.",
+ },
+ },
+ },
+}
+export const ItemError: Story = {
+ render: (args) => (
+
+
+ ),
+}
+export const Layouts: Story = {
+ render: (args) => (
+
+
+
+
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story:
+ "Dlouhý název na úzkém viewportu: cena a ovládání zůstávají viditelné.",
+ },
+ },
+ },
+}
+export const CustomComposition: Story = {
+ render: (args) => (
+
+
+
+
+ Bez fotografie, cena pod názvem a vlastní dodatečná akce.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story:
+ "Compound API umožňuje vynechat obrázek, přesunout cenu a doplnit vlastní akce. Přepněte pending/readOnly v Controls: společné pojistky platí i pro vlastní akce.",
+ },
+ },
+ },
+}
diff --git a/libs/ui/stories/templates/cart-presentation.stories.tsx b/libs/ui/stories/templates/cart-presentation.stories.tsx
new file mode 100644
index 0000000000..151ecdf003
--- /dev/null
+++ b/libs/ui/stories/templates/cart-presentation.stories.tsx
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { fn } from "storybook/test"
+import { VariantContainer, VariantGroup } from "../../.storybook/decorator"
+import { Button } from "../../src/atoms/button"
+import { Link } from "../../src/atoms/link"
+import { PriceBlock } from "../../src/molecules/price-block"
+import { QuantityField } from "../../src/molecules/quantity-field"
+import { TotalsSummary } from "../../src/molecules/totals-summary"
+import { LineItem } from "../../src/organisms/line-item"
+
+const checkout = fn()
+const remove = fn()
+const quantityChange = fn()
+
+function CartExample({ readOnly = false }: { readOnly?: boolean }) {
+ const [quantity, setQuantity] = useState("2")
+ const title = "Montážní sada M8"
+ return (
+
+
+
+
+
+ {title}
+
+
+
+
+ 100 ks · pozink · kód MS-008
+
+
+ {
+ setQuantity(details.value)
+ quantityChange(details)
+ }}
+ size="sm"
+ unitLabel="balení"
+ value={quantity}
+ />
+
+
+
+
+
+
+ Pokračovat k objednávce
+ )
+ }
+ />
+
+ )
+}
+
+const meta: Meta