@brilo/base-blocks 0.1.58 → 0.1.61

package/src/blocks/review/review-summary-item/edit.tsx

@@ -0,0 +1,86 @@
+import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody, RangeControl, TextControl, ToggleControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import type {CSSProperties} from 'react'
+import {RATING_MAX, RATING_STEP} from './constants'
+import type {ReviewSummaryItemAttributes, ReviewSummaryItemOptions} from './types'
+
+const roundToHalf = (value: number) => Math.round(value * 2) / 2
+
+export function createReviewSummaryItemEdit(options: ReviewSummaryItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: ReviewSummaryItemAttributes
+    setAttributes: (a: Partial<ReviewSummaryItemAttributes>) => void
+  }) {
+    const {rating, count, countLabel, showMax, description} = attributes
+    const hasRating = typeof rating === 'number'
+    const hasCount = typeof count === 'number' && count > 0
+
+    const blockProps = useBlockProps({className: clsx(options.blockClassName ?? 'i-review-summary-item wp-block-section')})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Hodnocení', 'brilo-blocks')}>
+            <RangeControl
+              label={__('Průměrné hodnocení', 'brilo-blocks')}
+              help={__('Bez hodnoty se hvězdičky ani číslo nezobrazí.', 'brilo-blocks')}
+              value={rating}
+              onChange={(v) => setAttributes({rating: v})}
+              min={0}
+              max={RATING_MAX}
+              step={RATING_STEP}
+              allowReset
+              withInputField
+            />
+            <ToggleControl label={__('Zobrazit „/ 5"', 'brilo-blocks')} checked={showMax} onChange={(v) => setAttributes({showMax: v})} />
+            <TextControl
+              type="number"
+              min={0}
+              label={__('Počet recenzí', 'brilo-blocks')}
+              help={__('Při nule nebo prázdné hodnotě se počet nezobrazí.', 'brilo-blocks')}
+              value={typeof count === 'number' ? String(count) : ''}
+              onChange={(v) => setAttributes({count: v === '' ? undefined : Math.max(0, Number.parseInt(v, 10) || 0)})}
+            />
+            <TextControl label={__('Popisek počtu', 'brilo-blocks')} value={countLabel} onChange={(v) => setAttributes({countLabel: v})} />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-review-summary-item__score">
+            {hasRating && (
+              <>
+                <span
+                  className="i-review-summary-item__stars"
+                  style={{'--rating-fill': `${(roundToHalf(rating) / RATING_MAX) * 100}%`} as CSSProperties}
+                >
+                  ★★★★★
+                </span>
+                <strong className="i-review-summary-item__value">
+                  {rating.toLocaleString(undefined, {minimumFractionDigits: 1, maximumFractionDigits: 1})}
+                  {showMax && ` / ${RATING_MAX}`}
+                </strong>
+              </>
+            )}
+            {hasCount && <span className="i-review-summary-item__count">{`${count} ${countLabel}`}</span>}
+            {!hasRating && !hasCount && (
+              <span className="i-review-summary-item__placeholder">{__('Nastavte hodnocení v postranním panelu', 'brilo-blocks')}</span>
+            )}
+          </div>
+          <RichText
+            tagName="p"
+            className="i-review-summary-item__description u-text-editable"
+            value={description}
+            onChange={(v) => setAttributes({description: v})}
+            placeholder={__('Popis hodnocení...', 'brilo-blocks')}
+            allowedFormats={['core/bold', 'core/italic', 'core/link', 'brilo-blocks/text-color']}
+          />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/review/review-summary-item/editor.scss

@@ -0,0 +1,44 @@
+.i-review-summary-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.i-review-summary-item__score {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.i-review-summary-item__stars {
+  position: relative;
+  display: inline-block;
+  font-size: 20px;
+  line-height: 1;
+  letter-spacing: 2px;
+  color: #d0d5dd;
+
+  &::before {
+    content: "★★★★★";
+    position: absolute;
+    inset: 0;
+    width: var(--rating-fill, 0%);
+    overflow: hidden;
+    color: #1e2d45;
+  }
+}
+
+.i-review-summary-item__value {
+  font-size: 18px;
+}
+
+.i-review-summary-item__count,
+.i-review-summary-item__placeholder {
+  font-size: 14px;
+  color: #50575e;
+}
+
+.i-review-summary-item__description {
+  margin: 0;
+}

package/src/blocks/review/review-summary-item/factory.tsx

@@ -0,0 +1,27 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createReviewSummaryItemEdit} from './edit'
+import type {ReviewSummaryItemAttributes, ReviewSummaryItemOptions} from './types'
+
+export type {ReviewSummaryItemAttributes, ReviewSummaryItemOptions}
+
+export function createReviewSummaryItemBlock(options: ReviewSummaryItemOptions): BlockConfiguration<ReviewSummaryItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Souhrn hodnocení', 'brilo-blocks'),
+    description: options.description ?? __('Průměrné hodnocení hvězdičkami s počtem recenzí a popisem', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'star-half',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      rating: {type: 'number'},
+      count: {type: 'number'},
+      countLabel: {type: 'string', default: __('hodnocení', 'brilo-blocks')},
+      showMax: {type: 'boolean', default: false},
+      description: {type: 'string', default: ''},
+    },
+    edit: createReviewSummaryItemEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<ReviewSummaryItemAttributes>
+}

package/src/blocks/review/review-summary-item/index.ts

@@ -0,0 +1,9 @@
+export type {ReviewSummaryItemAttributes, ReviewSummaryItemOptions} from './types'
+export {createReviewSummaryItemBlock} from './factory'
+
+import type {ReviewSummaryItemOptions} from './types'
+
+export const reviewSummaryItemDefaults: ReviewSummaryItemOptions = {
+  name: 'brilo/review-summary-item',
+  parent: ['brilo/base-section', 'brilo/text-and-media-group', 'brilo/hero-item'],
+}

package/src/blocks/review/review-summary-item/types.ts

@@ -0,0 +1,11 @@
+import type {BriloBlockType} from '~/types'
+
+export interface ReviewSummaryItemAttributes extends Record<string, unknown> {
+  rating?: number
+  count?: number
+  countLabel: string
+  showMax: boolean
+  description: string
+}
+
+export interface ReviewSummaryItemOptions extends BriloBlockType {}

package/src/blocks/share/share/icon.tsx

@@ -1,5 +1,5 @@
 export const icon = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle cx="5" cy="10" r="2" stroke="black" fill="none" />
     <circle cx="15" cy="4" r="2" stroke="black" fill="none" />
     <circle cx="15" cy="16" r="2" stroke="black" fill="none" />

package/src/blocks/signpost/signpost-group/icon.tsx

@@ -1,5 +1,5 @@
 export const icon = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect x="0.5" y="7.5" width="8" height="11" stroke="black" fill="none" />
     <rect x="2.5" y="9.5" width="4" height="3" stroke="black" fill="none" />
     <path d="M2 14H6V15H2V14Z" fill="black" />

package/src/blocks/step/step-group/factory.tsx

@@ -1,7 +1,7 @@
 import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
-import {DEFAULT_ICON_BACKGROUND_SIZE, DEFAULT_ICON_SIZE, DEFAULT_SHADOWS, DEFAULT_VARIANTS, TEXT_ALIGNS} from './constants'
+import {DEFAULT_ICON_BACKGROUND_SIZE, DEFAULT_SHADOWS, DEFAULT_VARIANTS, TEXT_ALIGNS} from './constants'
 import {createStepGroupEdit} from './edit'
 import type {StepGroupAttributes, StepGroupOptions} from './types'
 import {icon} from '~/blocks/step/step-group/icon'

package/src/blocks/step/step-group/icon.tsx

@@ -1,5 +1,5 @@
 export const icon = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4 6H7V7H4V6Z" fill="black" />
     <path d="M12 6H15V7H12V6Z" fill="black" />
     <path

package/src/blocks/testimonial/testimonial-group/icon.tsx

@@ -1,5 +1,5 @@
 export const icon = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4 4H9V5H4V4Z" fill="black" />
     <path d="M10 4H16V5H10V4Z" fill="black" />
     <path

package/src/blocks/urgency/urgency-item/constants.ts

@@ -0,0 +1,39 @@
+import {__} from '@wordpress/i18n'
+
+export {CONTENT_SIZES as TEXT_SIZES} from '~/constants'
+
+export const TYPES = [
+  {value: 'deadline', label: __('Termín', 'brilo-blocks')},
+  {value: 'capacity', label: __('Volná místa', 'brilo-blocks')},
+  {value: 'season', label: __('Sezóna', 'brilo-blocks')},
+] as const
+
+export const DEADLINE_DISPLAYS = [
+  {value: 'countdown', label: __('Odpočet', 'brilo-blocks')},
+  {value: 'date', label: __('Datum', 'brilo-blocks')},
+] as const
+
+export const TEXTS = {
+  countdown: __('Nabídka končí za', 'brilo-blocks'),
+  date: __('Nabídka platí do', 'brilo-blocks'),
+  capacity: __('Zbývá volných míst', 'brilo-blocks'),
+  season: __('Nabídka platí pouze tuto sezónu', 'brilo-blocks'),
+} as const
+
+export const COUNTDOWN_UNITS = [
+  {key: 'days', label: __('dní', 'brilo-blocks')},
+  {key: 'hours', label: __('hod', 'brilo-blocks')},
+  {key: 'minutes', label: __('min', 'brilo-blocks')},
+  {key: 'seconds', label: __('sek', 'brilo-blocks')},
+] as const
+
+export const NUMBER_SIZE_MIN = 16
+export const NUMBER_SIZE_MAX = 120
+
+export const NUMBER_SIZE_PRESETS = [
+  {value: 32, label: __('XS', 'brilo-blocks')},
+  {value: 40, label: __('SM', 'brilo-blocks')},
+  {value: 48, label: __('MD', 'brilo-blocks')},
+  {value: 60, label: __('LG', 'brilo-blocks')},
+  {value: 72, label: __('XL', 'brilo-blocks')},
+] as const

package/src/blocks/urgency/urgency-item/edit.tsx

@@ -0,0 +1,319 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {
+  BaseControl,
+  Button,
+  ColorPalette,
+  DateTimePicker,
+  Notice,
+  PanelBody,
+  RangeControl,
+  TextControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {useDispatch} from '@wordpress/data'
+import {dateI18n, getDate, getSettings} from '@wordpress/date'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {type CSSProperties, useEffect} from 'react'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {
+  COUNTDOWN_UNITS,
+  DEADLINE_DISPLAYS,
+  TEXTS,
+  NUMBER_SIZE_MAX,
+  NUMBER_SIZE_MIN,
+  NUMBER_SIZE_PRESETS,
+  TEXT_SIZES,
+  TYPES,
+} from './constants'
+import type {UrgencyDeadlineDisplay, UrgencyItemAttributes, UrgencyItemOptions, UrgencyTextSize, UrgencyType} from './types'
+
+const TEXT_VALUES: string[] = Object.values(TEXTS)
+
+function defaultTextFor(type: UrgencyType, display: UrgencyDeadlineDisplay): string {
+  return type === 'deadline' ? TEXTS[display] : TEXTS[type]
+}
+
+function parseCount(value: string): number | undefined {
+  return value === '' ? undefined : Math.max(0, Number.parseInt(value, 10) || 0)
+}
+
+function countdownParts(milliseconds: number): Record<(typeof COUNTDOWN_UNITS)[number]['key'], string> {
+  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000))
+  const pad = (n: number) => String(n).padStart(2, '0')
+
+  return {
+    days: pad(Math.floor(totalSeconds / 86400)),
+    hours: pad(Math.floor((totalSeconds % 86400) / 3600)),
+    minutes: pad(Math.floor((totalSeconds % 3600) / 60)),
+    seconds: pad(totalSeconds % 60),
+  }
+}
+
+function formatDeadline(deadline: string): string {
+  const {formats} = getSettings()
+  const time = deadline.slice(11, 16)
+  const format = time === '00:00' || time === '23:59' ? formats.date : `${formats.date} ${formats.time}`
+
+  return dateI18n(format, getDate(deadline))
+}
+
+function endOfDay(date: string): number {
+  return getDate(`${date}T23:59:59`).getTime()
+}
+
+function ColorControl({label, id, value, onChange}: {label: string; id: string; value: string; onChange: (v: string) => void}) {
+  const {paletteColors} = useTenantColorPalette()
+
+  return (
+    <BaseControl label={label} id={id}>
+      <ColorPalette colors={paletteColors} value={value || undefined} onChange={(v) => onChange(v ?? '')} />
+    </BaseControl>
+  )
+}
+
+function NumberSizeControl({value, onChange}: {value?: number; onChange: (v?: number) => void}) {
+  return (
+    <BaseControl
+      label={__('Velikost čísel (px)', 'brilo-blocks')}
+      help={__('Bez nastavení se použije velikost nadpisu ze šablony.', 'brilo-blocks')}
+      id="urgency-item-number-size"
+    >
+      <div className="i-urgency__number-presets">
+        {NUMBER_SIZE_PRESETS.map((p) => (
+          <Button key={p.label} variant={value === p.value ? 'primary' : 'secondary'} size="small" onClick={() => onChange(p.value)}>
+            {p.label}
+          </Button>
+        ))}
+      </div>
+      <RangeControl value={value} onChange={onChange} min={NUMBER_SIZE_MIN} max={NUMBER_SIZE_MAX} step={1} withInputField allowReset />
+    </BaseControl>
+  )
+}
+
+export function createUrgencyItemEdit(options: UrgencyItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+    clientId,
+  }: {
+    attributes: UrgencyItemAttributes
+    setAttributes: (a: Partial<UrgencyItemAttributes>) => void
+    clientId: string
+  }) {
+    const {
+      type,
+      text,
+      deadline,
+      display,
+      remaining,
+      total,
+      endDate,
+      textSize,
+      numberSize,
+      backgroundColor,
+      numberBackgroundColor,
+      textColor,
+    } = attributes
+    // core/editor is missing outside the post editor (widgets, site editor) – dispatch returns undefined there.
+    const editorDispatch = useDispatch('core/editor') as unknown as
+      | {lockPostSaving: (lockName: string) => void; unlockPostSaving: (lockName: string) => void}
+      | undefined
+    const lockPostSaving = editorDispatch?.lockPostSaving
+    const unlockPostSaving = editorDispatch?.unlockPostSaving
+
+    const isDeadlineMissing = type === 'deadline' && !deadline
+    const isCapacityMissing = type === 'capacity' && (typeof remaining !== 'number' || typeof total !== 'number' || total <= 0)
+    const expiresAt =
+      type === 'deadline' && deadline ? getDate(deadline).getTime() : type === 'season' && endDate ? endOfDay(endDate) : null
+    const isExpired = expiresAt !== null && expiresAt <= Date.now()
+
+    useEffect(() => {
+      if (!lockPostSaving || !unlockPostSaving) {
+        return
+      }
+
+      const lockName = `brilo-urgency-item-${clientId}`
+
+      if (isDeadlineMissing || isCapacityMissing) {
+        lockPostSaving(lockName)
+      } else {
+        unlockPostSaving(lockName)
+      }
+
+      return () => unlockPostSaving(lockName)
+    }, [clientId, isDeadlineMissing, isCapacityMissing, lockPostSaving, unlockPostSaving])
+
+    const switchText = (nextType: UrgencyType, nextDisplay: UrgencyDeadlineDisplay) =>
+      !text || TEXT_VALUES.includes(text) ? {text: defaultTextFor(nextType, nextDisplay)} : {}
+
+    const countdown = countdownParts(deadline ? getDate(deadline).getTime() - Date.now() : 0)
+    const takenPercent =
+      type === 'capacity' && total ? Math.min(100, Math.max(0, ((total - Math.min(remaining ?? total, total)) / total) * 100)) : 0
+
+    const blockProps = useBlockProps({className: clsx(options.blockClassName ?? 'i-urgency wp-block-section', `--${type}`)})
+    const isCountdown = type === 'deadline' && display === 'countdown'
+    const cardStyle = {
+      color: textColor || undefined,
+      '--urgency-background': backgroundColor || undefined,
+      '--urgency-number-background': numberBackgroundColor || undefined,
+      '--urgency-text-color': textColor || undefined,
+      '--urgency-number-size': numberSize ? `${numberSize}px` : undefined,
+    } as CSSProperties
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Co zobrazit', 'brilo-blocks')}
+              value={type}
+              onChange={(v) => setAttributes({type: v as UrgencyType, ...switchText(v as UrgencyType, display)})}
+            >
+              {TYPES.map((t) => (
+                <ToggleGroupControlOption key={t.value} value={t.value} label={t.label} />
+              ))}
+            </ToggleGroupControl>
+            <TextControl
+              label={__('Text', 'brilo-blocks')}
+              value={text}
+              placeholder={defaultTextFor(type, display)}
+              onChange={(v) => setAttributes({text: v})}
+            />
+          </PanelBody>
+
+          {type === 'deadline' && (
+            <PanelBody title={__('Termín', 'brilo-blocks')}>
+              <ToggleGroupControl
+                isBlock
+                label={__('Zobrazit jako', 'brilo-blocks')}
+                value={display}
+                onChange={(v) => setAttributes({display: v as UrgencyDeadlineDisplay, ...switchText(type, v as UrgencyDeadlineDisplay)})}
+              >
+                {DEADLINE_DISPLAYS.map((d) => (
+                  <ToggleGroupControlOption key={d.value} value={d.value} label={d.label} />
+                ))}
+              </ToggleGroupControl>
+              <DateTimePicker currentDate={deadline || null} onChange={(v) => setAttributes({deadline: v ?? ''})} is12Hour={false} />
+            </PanelBody>
+          )}
+
+          {type === 'capacity' && (
+            <PanelBody title={__('Volná místa', 'brilo-blocks')}>
+              <TextControl
+                type="number"
+                min={0}
+                label={__('Zbývá míst', 'brilo-blocks')}
+                value={typeof remaining === 'number' ? String(remaining) : ''}
+                onChange={(v) => setAttributes({remaining: parseCount(v)})}
+              />
+              <TextControl
+                type="number"
+                min={1}
+                label={__('Celkem míst', 'brilo-blocks')}
+                value={typeof total === 'number' ? String(total) : ''}
+                onChange={(v) => setAttributes({total: parseCount(v)})}
+              />
+            </PanelBody>
+          )}
+
+          {type === 'season' && (
+            <PanelBody title={__('Sezóna', 'brilo-blocks')}>
+              <TextControl
+                type="date"
+                label={__('Konec sezóny (volitelné)', 'brilo-blocks')}
+                help={__('Po tomto dni se blok na webu skryje.', 'brilo-blocks')}
+                value={endDate}
+                onChange={(v) => setAttributes({endDate: v})}
+              />
+            </PanelBody>
+          )}
+
+          <PanelBody title={__('Styl', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Velikost textu', 'brilo-blocks')}
+              value={textSize}
+              onChange={(v) => setAttributes({textSize: v as UrgencyTextSize})}
+            >
+              {TEXT_SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+            {type !== 'season' && <NumberSizeControl value={numberSize} onChange={(v) => setAttributes({numberSize: v})} />}
+            <ColorControl
+              label={__('Barva pozadí', 'brilo-blocks')}
+              id="urgency-item-background-color"
+              value={backgroundColor}
+              onChange={(v) => setAttributes({backgroundColor: v})}
+            />
+            {isCountdown && (
+              <ColorControl
+                label={__('Pozadí čísel', 'brilo-blocks')}
+                id="urgency-item-number-background-color"
+                value={numberBackgroundColor}
+                onChange={(v) => setAttributes({numberBackgroundColor: v})}
+              />
+            )}
+            <ColorControl
+              label={__('Barva textu', 'brilo-blocks')}
+              id="urgency-item-text-color"
+              value={textColor}
+              onChange={(v) => setAttributes({textColor: v})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          {isDeadlineMissing && (
+            <Notice status="error" isDismissible={false}>
+              {__('Vyberte termín v postranním panelu – bez něj nelze stránku uložit.', 'brilo-blocks')}
+            </Notice>
+          )}
+          {isCapacityMissing && (
+            <Notice status="error" isDismissible={false}>
+              {__('Vyplňte volná a celková místa v postranním panelu – bez nich nelze stránku uložit.', 'brilo-blocks')}
+            </Notice>
+          )}
+          {isExpired && (
+            <Notice status="warning" isDismissible={false}>
+              {__('Termín vypršel – na webu se nezobrazuje.', 'brilo-blocks')}
+            </Notice>
+          )}
+
+          <div className={clsx('i-urgency__card', `--text-${textSize}`)} style={cardStyle}>
+            {text && <span className="i-urgency__label">{text}</span>}
+
+            {isCountdown && (
+              <span className="i-urgency__countdown">
+                {COUNTDOWN_UNITS.map((unit) => (
+                  <span key={unit.key} className="i-urgency__unit">
+                    <span className="i-urgency__number">{countdown[unit.key]}</span>
+                    <span className="i-urgency__unit-label">{unit.label}</span>
+                  </span>
+                ))}
+              </span>
+            )}
+
+            {type === 'deadline' && display === 'date' && (
+              <span className="i-urgency__value">{deadline ? formatDeadline(deadline) : '—'}</span>
+            )}
+
+            {type === 'capacity' && (
+              <>
+                <span className="i-urgency__value">
+                  {remaining ?? '—'} / {total ?? '—'}
+                </span>
+                <span className="i-urgency__progress">
+                  <span className="i-urgency__progress-fill" style={{width: `${takenPercent}%`}} />
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/urgency/urgency-item/editor.scss

@@ -0,0 +1,99 @@
+.i-urgency {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .components-notice {
+    margin: 0;
+  }
+}
+
+.i-urgency__card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 16px;
+  border-radius: 8px;
+  background: var(--urgency-background, #f3f4f6);
+  text-align: center;
+
+  &.--text-sm {
+    .i-urgency__label {
+      font-size: 14px;
+    }
+
+    .i-urgency__unit-label {
+      font-size: 12px;
+    }
+  }
+
+  &.--text-lg {
+    .i-urgency__label {
+      font-size: 18px;
+    }
+
+    .i-urgency__unit-label {
+      font-size: 16px;
+    }
+  }
+}
+
+.i-urgency__label {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.i-urgency__countdown {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+
+.i-urgency__unit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-width: 64px;
+  padding: 10px 8px;
+  border-radius: 6px;
+  background: var(--urgency-number-background, #fff);
+}
+
+.i-urgency__number,
+.i-urgency__value {
+  font-size: var(--urgency-number-size, 28px);
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.i-urgency__unit-label {
+  font-size: 14px;
+  color: var(--urgency-text-color, #50575e);
+}
+
+.i-urgency__progress {
+  display: block;
+  width: 240px;
+  max-width: 100%;
+  height: 8px;
+  border-radius: 4px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.i-urgency__progress-fill {
+  display: block;
+  height: 100%;
+  background: #1e2d45;
+}
+
+.i-urgency__number-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
+}