@ahrowe/ui 0.20.0 → 0.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/common/actionIcon/actionIcon.mjs +1 -1
- package/dist/esm/common/actionIcon/actionIcon.mjs.map +1 -1
- package/dist/esm/common/alert/alert.mjs +1 -1
- package/dist/esm/common/alert/alert.mjs.map +1 -1
- package/dist/esm/common/alert/alert.types.mjs.map +1 -1
- package/dist/esm/common/avatar/avatar.mjs +1 -1
- package/dist/esm/common/avatar/avatar.mjs.map +1 -1
- package/dist/esm/common/breadcrumb/breadcrumb.mjs +1 -1
- package/dist/esm/common/breadcrumb/breadcrumb.mjs.map +1 -1
- package/dist/esm/common/button/button.mjs +1 -1
- package/dist/esm/common/button/button.mjs.map +1 -1
- package/dist/esm/common/button/button.types.mjs.map +1 -1
- package/dist/esm/common/emptyState/emptyState.mjs +1 -1
- package/dist/esm/common/emptyState/emptyState.mjs.map +1 -1
- package/dist/esm/common/fab/fab.mjs +1 -1
- package/dist/esm/common/fab/fab.mjs.map +1 -1
- package/dist/esm/common/rating/rating.mjs +1 -1
- package/dist/esm/common/rating/rating.mjs.map +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.mjs +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.mjs.map +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.types.mjs.map +1 -1
- package/dist/esm/common/splitButton/splitButton.mjs +1 -1
- package/dist/esm/common/splitButton/splitButton.mjs.map +1 -1
- package/dist/esm/common/stepper/stepper.mjs +1 -1
- package/dist/esm/common/stepper/stepper.mjs.map +1 -1
- package/dist/esm/common/stepper/stepper.module.mjs.map +1 -1
- package/dist/esm/common/stepper/stepper.types.mjs.map +1 -1
- package/dist/esm/common/tabHeader/tabHeader.mjs +1 -1
- package/dist/esm/common/tabHeader/tabHeader.mjs.map +1 -1
- package/dist/esm/common/timeline/timeline.mjs +1 -1
- package/dist/esm/common/timeline/timeline.mjs.map +1 -1
- package/dist/esm/common/timeline/timeline.module.mjs +1 -1
- package/dist/esm/common/timeline/timeline.module.mjs.map +1 -1
- package/dist/esm/common/timeline/timeline.types.mjs.map +1 -1
- package/dist/esm/common/utils/renderIcon.mjs +2 -0
- package/dist/esm/common/utils/renderIcon.mjs.map +1 -0
- package/dist/index.cjs +6 -6
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/package/common/actionButtons/actionButtons.types.d.ts +3 -3
- package/dist/types/package/common/actionIcon/actionIcon.types.d.ts +2 -2
- package/dist/types/package/common/alert/alert.types.d.ts +2 -2
- package/dist/types/package/common/avatar/avatar.types.d.ts +2 -2
- package/dist/types/package/common/breadcrumb/breadcrumb.types.d.ts +2 -2
- package/dist/types/package/common/button/button.types.d.ts +2 -2
- package/dist/types/package/common/emptyState/emptyState.types.d.ts +2 -2
- package/dist/types/package/common/fab/fab.types.d.ts +2 -2
- package/dist/types/package/common/rating/rating.types.d.ts +2 -2
- package/dist/types/package/common/sectionHeader/sectionHeader.types.d.ts +2 -2
- package/dist/types/package/common/splitButton/splitButton.types.d.ts +2 -2
- package/dist/types/package/common/stepper/stepper.types.d.ts +3 -3
- package/dist/types/package/common/tabHeader/tabHeader.types.d.ts +2 -2
- package/dist/types/package/common/timeline/timeline.types.d.ts +3 -3
- package/dist/types/package/common/types/actions.types.d.ts +2 -2
- package/dist/types/package/common/types/icon.types.d.ts +17 -0
- package/dist/types/package/common/utils/renderIcon.d.ts +29 -0
- package/docs/ActionIcon.md +1 -1
- package/docs/Alert.md +1 -1
- package/docs/Avatar.md +1 -1
- package/docs/Breadcrumb.md +1 -1
- package/docs/Button.md +1 -1
- package/docs/CLAUDE.md +22 -0
- package/docs/EmptyState.md +1 -1
- package/docs/Rating.md +1 -1
- package/docs/SectionHeader.md +2 -2
- package/docs/Stepper.md +1 -1
- package/docs/TabHeader.md +1 -1
- package/docs/Timeline.md +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.module.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.module.pcss"],"sourcesContent":[".stepper {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--stepper-*` variables via ThemeProvider (theme-wide) or `style`\n (per instance) to override; unset ones fall back to the values below. */\n --custom-stepper-marker-size: var(--stepper-marker-size, 40px);\n --custom-stepper-marker-radius: var(--stepper-marker-radius, var(--default-border-radius));\n --custom-stepper-idle-color: var(--stepper-idle-color, var(--primary-lighter));\n --custom-stepper-active-color: var(--stepper-active-color, var(--primary-color));\n --custom-stepper-done-color: var(--stepper-done-color, var(--primary-color));\n --custom-stepper-error-color: var(--stepper-error-color, var(--error-color));\n --custom-stepper-connector-color: var(--stepper-connector-color, var(--primary-color));\n --custom-stepper-connector-thickness: var(--stepper-connector-thickness, 3px);\n --custom-stepper-connector-idle-thickness: var(--stepper-connector-idle-thickness, 1px);\n --custom-stepper-gap: var(--stepper-gap, 12px);\n --custom-stepper-text-on-marker: var(--stepper-text-on-marker, var(--text-on-primary));\n\n user-select: none;\n color: var(--text-color);\n\n &-vertical {\n display: flex;\n flex-flow: column;\n }\n\n &:not(.stepper-vertical) {\n display: flex;\n align-items: center;\n }\n &-label-bottom:not(.stepper-vertical) {\n padding-bottom: 46px;\n }\n &-label-top:not(.stepper-vertical) {\n padding-top: 46px;\n }\n\n /* Entry --------------------------------------------------------------- */\n &-entry {\n display: flex;\n align-items: flex-start;\n gap: var(--custom-stepper-gap);\n box-sizing: border-box;\n }\n &:not(.stepper-vertical) &-entry {\n position: relative;\n flex: 0 0 auto;\n align-items: center;\n gap: 0;\n }\n &-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n &-entry-disabled {\n opacity: 0.5;\n }\n\n &-entry-number {\n width: var(--custom-stepper-marker-size);\n height: var(--custom-stepper-marker-size);\n box-sizing: border-box;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--custom-stepper-idle-color);\n color: var(--custom-stepper-idle-color);\n border-radius: var(--custom-stepper-marker-radius);\n font-weight: 600;\n font-size: calc(var(--custom-stepper-marker-size) * 0.4);\n box-shadow: inset 0px 0px 0px var(--custom-stepper-done-color);\n transition: all 0.4s;\n }\n &-entry-active &-entry-number {\n border: 2px solid var(--custom-stepper-active-color);\n color: var(--custom-stepper-active-color);\n transform: scale3d(1.1, 1.1, 1);\n }\n &-entry-done &-entry-number {\n border-color: var(--custom-stepper-done-color);\n color: var(--custom-stepper-text-on-marker);\n background-color: var(--custom-stepper-done-color);\n box-shadow: inset 0px 0px 0px 30px var(--custom-stepper-done-color);\n transform: none;\n }\n &-entry-error &-entry-number {\n border: 2px solid var(--custom-stepper-error-color);\n color: var(--custom-stepper-error-color);\n box-shadow: inset 0px 0px 0px var(--custom-stepper-error-color);\n transform: none;\n }\n\n &-checkmark path {\n stroke: var(--custom-stepper-text-on-marker);\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n animation: showCheckmark 0.4s 0.2s forwards;\n }\n\n &-marker-cell {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n width: var(--custom-stepper-marker-size);\n }\n &-rail-segment {\n flex: 1 1 0;\n min-height: 0;\n width: var(--custom-stepper-connector-idle-thickness);\n background-size: 100% 200%;\n background-image: linear-gradient(\n 180deg,\n var(--custom-stepper-connector-color) 0 50%,\n var(--custom-stepper-idle-color) 50% 100%\n );\n background-position: 0 100%;\n transition: background-position 0.4s, width 0.4s;\n }\n &-rail-filled {\n width: var(--custom-stepper-connector-thickness);\n background-position: 0 0;\n }\n &-rail-hidden {\n background-image: none;\n background-color: transparent;\n }\n\n &-entry-labels {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n align-self: center;\n }\n &-entry-label {\n color: var(--text-color);\n }\n &-description {\n color: var(--text-dark);\n font-size: var(--text-small-font-size, 0.85em);\n }\n &-optional {\n color: var(--text-light);\n font-size: var(--text-small-font-size, 0.85em);\n font-style: italic;\n }\n\n &:not(.stepper-vertical) &-entry-labels {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: max-content;\n max-width: 160px;\n text-align: center;\n align-items: center;\n }\n &-label-bottom:not(.stepper-vertical) &-entry-labels {\n top: calc(var(--custom-stepper-marker-size) + 6px);\n }\n &-label-top:not(.stepper-vertical) &-entry-labels {\n bottom: calc(var(--custom-stepper-marker-size) + 6px);\n }\n\n &-connector {\n flex: 1 1 auto;\n min-width: 24px;\n height: var(--custom-stepper-connector-idle-thickness);\n background-size: 200% 100%;\n background-image: linear-gradient(\n 90deg,\n var(--custom-stepper-connector-color) 0 50%,\n var(--custom-stepper-idle-color) 50% 100%\n );\n background-position: 100% 0;\n transition: background-position 0.6s, height 0.4s, width 0.4s;\n\n &-filled {\n height: var(--custom-stepper-connector-thickness);\n background-position: 0 0;\n }\n }\n\n &-step {\n display: grid;\n grid-template-columns: var(--custom-stepper-marker-size) 1fr;\n column-gap: var(--custom-stepper-gap);\n }\n &-vertical &-entry {\n grid-column: 1 / -1;\n align-items: stretch;\n }\n &-vertical &-connector {\n grid-column: 1;\n justify-self: center;\n flex: none;\n width: var(--custom-stepper-connector-idle-thickness);\n min-width: 0;\n height: 100%;\n min-height: 24px;\n background-size: 100% 200%;\n background-image: linear-gradient(\n 180deg,\n var(--custom-stepper-connector-color) 0 50%,\n var(--custom-stepper-idle-color) 50% 100%\n );\n background-position: 0 100%;\n transition: background-position 0.4s, width 0.4s;\n\n &-filled {\n width: var(--custom-stepper-connector-thickness);\n background-position: 0 0;\n }\n }\n &-vertical &-content {\n grid-column: 2;\n }\n\n &-vertical.stepper-label-left &-step {\n grid-template-columns: 1fr var(--custom-stepper-marker-size);\n }\n &-vertical.stepper-label-left &-entry {\n flex-direction: row-reverse;\n }\n &-vertical.stepper-label-left &-connector {\n grid-column: 2;\n }\n &-vertical.stepper-label-left &-content {\n grid-column: 1;\n text-align: right;\n }\n\n &-content {\n overflow: hidden;\n transition: height 0.25s ease;\n }\n &-content-inner {\n padding: 4px 0 12px;\n }\n\n /* Outlined: completed markers stay ringed (a coloured check, no solid fill) */\n &-outlined {\n --stepper-text-on-marker: var(--custom-stepper-done-color);\n\n & .stepper-entry-done .stepper-entry-number {\n box-shadow: none;\n background-color: transparent;\n color: var(--custom-stepper-done-color);\n }\n }\n &-dots {\n --stepper-marker-size: 16px;\n --stepper-marker-radius: 50%;\n --stepper-gap: 10px;\n\n & .stepper-entry-number {\n font-size: 0;\n border-width: 2px;\n }\n & .stepper-entry-number
|
|
1
|
+
{"version":3,"file":"stepper.module.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.module.pcss"],"sourcesContent":[".stepper {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--stepper-*` variables via ThemeProvider (theme-wide) or `style`\n (per instance) to override; unset ones fall back to the values below. */\n --custom-stepper-marker-size: var(--stepper-marker-size, 40px);\n --custom-stepper-marker-radius: var(--stepper-marker-radius, var(--default-border-radius));\n --custom-stepper-idle-color: var(--stepper-idle-color, var(--primary-lighter));\n --custom-stepper-active-color: var(--stepper-active-color, var(--primary-color));\n --custom-stepper-done-color: var(--stepper-done-color, var(--primary-color));\n --custom-stepper-error-color: var(--stepper-error-color, var(--error-color));\n --custom-stepper-connector-color: var(--stepper-connector-color, var(--primary-color));\n --custom-stepper-connector-thickness: var(--stepper-connector-thickness, 3px);\n --custom-stepper-connector-idle-thickness: var(--stepper-connector-idle-thickness, 1px);\n --custom-stepper-gap: var(--stepper-gap, 12px);\n --custom-stepper-text-on-marker: var(--stepper-text-on-marker, var(--text-on-primary));\n\n user-select: none;\n color: var(--text-color);\n\n &-vertical {\n display: flex;\n flex-flow: column;\n }\n\n &:not(.stepper-vertical) {\n display: flex;\n align-items: center;\n }\n &-label-bottom:not(.stepper-vertical) {\n padding-bottom: 46px;\n }\n &-label-top:not(.stepper-vertical) {\n padding-top: 46px;\n }\n\n /* Entry --------------------------------------------------------------- */\n &-entry {\n display: flex;\n align-items: flex-start;\n gap: var(--custom-stepper-gap);\n box-sizing: border-box;\n }\n &:not(.stepper-vertical) &-entry {\n position: relative;\n flex: 0 0 auto;\n align-items: center;\n gap: 0;\n }\n &-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n &-entry-disabled {\n opacity: 0.5;\n }\n\n &-entry-number {\n width: var(--custom-stepper-marker-size);\n height: var(--custom-stepper-marker-size);\n box-sizing: border-box;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--custom-stepper-idle-color);\n color: var(--custom-stepper-idle-color);\n border-radius: var(--custom-stepper-marker-radius);\n font-weight: 600;\n font-size: calc(var(--custom-stepper-marker-size) * 0.4);\n box-shadow: inset 0px 0px 0px var(--custom-stepper-done-color);\n transition: all 0.4s;\n }\n &-entry-active &-entry-number {\n border: 2px solid var(--custom-stepper-active-color);\n color: var(--custom-stepper-active-color);\n transform: scale3d(1.1, 1.1, 1);\n }\n &-entry-done &-entry-number {\n border-color: var(--custom-stepper-done-color);\n color: var(--custom-stepper-text-on-marker);\n background-color: var(--custom-stepper-done-color);\n box-shadow: inset 0px 0px 0px 30px var(--custom-stepper-done-color);\n transform: none;\n }\n &-entry-error &-entry-number {\n border: 2px solid var(--custom-stepper-error-color);\n color: var(--custom-stepper-error-color);\n box-shadow: inset 0px 0px 0px var(--custom-stepper-error-color);\n transform: none;\n }\n\n &-checkmark path {\n stroke: var(--custom-stepper-text-on-marker);\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n animation: showCheckmark 0.4s 0.2s forwards;\n }\n\n &-marker-cell {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n width: var(--custom-stepper-marker-size);\n }\n &-rail-segment {\n flex: 1 1 0;\n min-height: 0;\n width: var(--custom-stepper-connector-idle-thickness);\n background-size: 100% 200%;\n background-image: linear-gradient(\n 180deg,\n var(--custom-stepper-connector-color) 0 50%,\n var(--custom-stepper-idle-color) 50% 100%\n );\n background-position: 0 100%;\n transition: background-position 0.4s, width 0.4s;\n }\n &-rail-filled {\n width: var(--custom-stepper-connector-thickness);\n background-position: 0 0;\n }\n &-rail-hidden {\n background-image: none;\n background-color: transparent;\n }\n\n &-entry-labels {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n align-self: center;\n }\n &-entry-label {\n color: var(--text-color);\n }\n &-description {\n color: var(--text-dark);\n font-size: var(--text-small-font-size, 0.85em);\n }\n &-optional {\n color: var(--text-light);\n font-size: var(--text-small-font-size, 0.85em);\n font-style: italic;\n }\n\n &:not(.stepper-vertical) &-entry-labels {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: max-content;\n max-width: 160px;\n text-align: center;\n align-items: center;\n }\n &-label-bottom:not(.stepper-vertical) &-entry-labels {\n top: calc(var(--custom-stepper-marker-size) + 6px);\n }\n &-label-top:not(.stepper-vertical) &-entry-labels {\n bottom: calc(var(--custom-stepper-marker-size) + 6px);\n }\n\n &-connector {\n flex: 1 1 auto;\n min-width: 24px;\n height: var(--custom-stepper-connector-idle-thickness);\n background-size: 200% 100%;\n background-image: linear-gradient(\n 90deg,\n var(--custom-stepper-connector-color) 0 50%,\n var(--custom-stepper-idle-color) 50% 100%\n );\n background-position: 100% 0;\n transition: background-position 0.6s, height 0.4s, width 0.4s;\n\n &-filled {\n height: var(--custom-stepper-connector-thickness);\n background-position: 0 0;\n }\n }\n\n &-step {\n display: grid;\n grid-template-columns: var(--custom-stepper-marker-size) 1fr;\n column-gap: var(--custom-stepper-gap);\n }\n &-vertical &-entry {\n grid-column: 1 / -1;\n align-items: stretch;\n }\n &-vertical &-connector {\n grid-column: 1;\n justify-self: center;\n flex: none;\n width: var(--custom-stepper-connector-idle-thickness);\n min-width: 0;\n height: 100%;\n min-height: 24px;\n background-size: 100% 200%;\n background-image: linear-gradient(\n 180deg,\n var(--custom-stepper-connector-color) 0 50%,\n var(--custom-stepper-idle-color) 50% 100%\n );\n background-position: 0 100%;\n transition: background-position 0.4s, width 0.4s;\n\n &-filled {\n width: var(--custom-stepper-connector-thickness);\n background-position: 0 0;\n }\n }\n &-vertical &-content {\n grid-column: 2;\n }\n\n &-vertical.stepper-label-left &-step {\n grid-template-columns: 1fr var(--custom-stepper-marker-size);\n }\n &-vertical.stepper-label-left &-entry {\n flex-direction: row-reverse;\n }\n &-vertical.stepper-label-left &-connector {\n grid-column: 2;\n }\n &-vertical.stepper-label-left &-content {\n grid-column: 1;\n text-align: right;\n }\n\n &-content {\n overflow: hidden;\n transition: height 0.25s ease;\n }\n &-content-inner {\n padding: 4px 0 12px;\n }\n\n /* Outlined: completed markers stay ringed (a coloured check, no solid fill) */\n &-outlined {\n --stepper-text-on-marker: var(--custom-stepper-done-color);\n\n & .stepper-entry-done .stepper-entry-number {\n box-shadow: none;\n background-color: transparent;\n color: var(--custom-stepper-done-color);\n }\n }\n &-dots {\n --stepper-marker-size: 16px;\n --stepper-marker-radius: 50%;\n --stepper-gap: 10px;\n\n & .stepper-entry-number {\n font-size: 0;\n border-width: 2px;\n }\n /* The dots variant shows no marker content at all: the number is killed by\n font-size: 0 above, and every element child (the checkmark, a FontAwesome\n icon, a custom icon element) is hidden here — matching on `svg` alone would\n miss a custom icon that isn't one. */\n & .stepper-entry-number > * {\n display: none;\n }\n }\n}\n\n@keyframes showCheckmark {\n to {\n stroke-dashoffset: 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .stepper-content {\n transition: none;\n }\n .stepper-entry-number,\n .stepper-connector,\n .stepper-rail-segment {\n transition: none;\n }\n .stepper-checkmark path {\n animation: none;\n stroke-dashoffset: 0;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.types.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.types.ts"],"sourcesContent":["import type React from 'react';\nimport type {
|
|
1
|
+
{"version":3,"file":"stepper.types.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\n/** Layout direction of the stepper. */\nexport enum StepperAlignment {\n Horizontal = 'horizontal',\n Vertical = 'vertical',\n}\n\n/** Visual preset for the step markers and connectors. */\nexport enum StepperStyleType {\n /** Numbered markers, filled solid on completion (the default look). */\n Default = 'default',\n /** Numbered markers that stay ringed when completed (a coloured check, no solid fill). */\n Outlined = 'outlined',\n /** Minimal dots without numbers, for a compact onboarding or carousel style. */\n Dots = 'dots',\n}\n\n/**\n * Which step bodies (`step.content`) are expanded. Only affects vertical\n * steppers with per-step `content`; ignored otherwise.\n */\nexport enum StepperCollapse {\n /** Every step body stays expanded. */\n None = 'none',\n /** Only the current step's body is expanded (classic vertical wizard). */\n ActiveOnly = 'activeOnly',\n /** Completed (past) step bodies collapse; current and upcoming stay expanded. */\n Completed = 'completed',\n}\n\n/**\n * Where the label block sits relative to the marker. Horizontal steppers use\n * `Top`/`Bottom`; vertical steppers use `Left`/`Right`. An out-of-orientation\n * value falls back to that orientation's default.\n */\nexport enum StepperLabelPlacement {\n Top = 'top',\n Bottom = 'bottom',\n Left = 'left',\n Right = 'right',\n}\n\nexport type StepperSlots =\n | 'root'\n | 'entry'\n | 'entryNumber'\n | 'entryLabel'\n | 'connector'\n | 'description'\n | 'content'\n | 'optional'\n | 'icon';\n\nexport interface StepperStep {\n /** Primary label for the step. */\n label: React.ReactNode;\n /** Secondary line shown under the label. */\n description?: React.ReactNode;\n /** Collapsible body content, rendered under the label (vertical only). */\n content?: React.ReactNode;\n /** Icon shown in the marker instead of the step number — a FontAwesome icon or any node. */\n icon?: IconContent;\n /** Marks the step as errored, recolouring the marker with `--stepper-error-color`. */\n error?: boolean;\n /** `true` renders an \"Optional\" hint; a node renders custom hint text. */\n optional?: boolean | React.ReactNode;\n /** Disables this step: never clickable, dimmed. */\n disabled?: boolean;\n}\n\nexport interface StepperProps extends HtmlProps {\n steps?: StepperStep[];\n currentStep?: number;\n alignment?: StepperAlignment | 'horizontal' | 'vertical';\n onStepClicked?: ((index: number) => void) | null;\n /** Allow clicking any step, not just completed ones. */\n nonLinear?: boolean;\n /** Hide the label text (and description) beneath each step entry. */\n hideLabels?: boolean;\n /** Visual preset for markers and connectors (default `Default`). */\n styleType?: StepperStyleType;\n /** Which step bodies are expanded. Vertical `content` only (default `None`). */\n collapse?: StepperCollapse;\n /** Label position relative to the marker (default: horizontal `Bottom`, vertical `Right`). */\n labelPlacement?: StepperLabelPlacement;\n className?: string;\n style?: React.CSSProperties;\n classNames?: SlotClassNames<StepperSlots>;\n styles?: SlotStyles<StepperSlots>;\n}\n"],"mappings":"AAKA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,WAAA,aACA,EAAA,SAAA,YACF,EAAA,CAAA,CAAA,EAGY,EAAL,SAAA,EAAA,OAEL,GAAA,QAAA,UAEA,EAAA,SAAA,WAEA,EAAA,KAAA,QACF,EAAA,CAAA,CAAA,EAMY,EAAL,SAAA,EAAA,OAEL,GAAA,KAAA,OAEA,EAAA,WAAA,aAEA,EAAA,UAAA,aACF,EAAA,CAAA,CAAA,EAOY,EAAL,SAAA,EAAA,OACL,GAAA,IAAA,MACA,EAAA,OAAA,SACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"../interactableDiv/index.mjs";import
|
|
1
|
+
import{renderIcon as e}from"../utils/renderIcon.mjs";import t from"../interactableDiv/index.mjs";import n from"./tabHeader.module.mjs";import"react";import r from"classnames";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o({tabs:o=[],currentTab:s,onChange:c,className:l,style:u,classNames:d,styles:f,...p}){return i(`div`,{...p,role:`tablist`,className:r(n.tabHeader,d?.root,l),style:{...f?.root,...u},children:o.map(o=>{let l=o.id===s,u=!!o.title||!!o.subtitle;return a(t,{role:`tab`,"aria-selected":l,"aria-disabled":o.disabled||void 0,tabIndex:o.disabled?-1:0,className:r(n.tabHeaderTab,{[n.tabHeaderTabActive]:l},{[n.tabHeaderTabDisabled]:o.disabled},d?.tab),style:f?.tab,onClick:()=>{o.disabled||l||c(o.id)},children:[e(o.icon,{className:r(n.tabHeaderIcon,d?.icon),style:f?.icon}),u&&a(`div`,{className:r(n.tabHeaderLabels,d?.labels),style:f?.labels,children:[o.title&&i(`span`,{className:r(n.tabHeaderTitle,d?.title),style:f?.title,children:o.title}),o.subtitle&&i(`span`,{className:r(n.tabHeaderSubtitle,d?.subtitle),style:f?.subtitle,children:o.subtitle})]})]},o.id)})})}export{o as default};
|
|
2
2
|
//# sourceMappingURL=tabHeader.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabHeader.mjs","names":[],"sources":["../../../../package/common/tabHeader/tabHeader.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\
|
|
1
|
+
{"version":3,"file":"tabHeader.mjs","names":[],"sources":["../../../../package/common/tabHeader/tabHeader.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\n\nimport InteractableDiv from '../interactableDiv';\nimport type { TabHeaderProps, TabHeaderTab } from './tabHeader.types';\n\nimport styles from './tabHeader.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nfunction TabHeader({\n tabs = [],\n currentTab,\n onChange,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: TabHeaderProps) {\n return (\n <div\n {...rest}\n role=\"tablist\"\n className={cx(styles.tabHeader, classNames?.root, className)}\n style={{ ...slotStyles?.root, ...style }}\n >\n {tabs.map((tab: TabHeaderTab) => {\n const isActive = tab.id === currentTab;\n const hasLabels = !!tab.title || !!tab.subtitle;\n\n return (\n <InteractableDiv\n key={tab.id}\n role=\"tab\"\n aria-selected={isActive}\n aria-disabled={tab.disabled || undefined}\n tabIndex={tab.disabled ? -1 : 0}\n className={cx(\n styles.tabHeaderTab,\n { [styles.tabHeaderTabActive]: isActive },\n { [styles.tabHeaderTabDisabled]: tab.disabled },\n classNames?.tab\n )}\n style={slotStyles?.tab}\n onClick={() => {\n if (tab.disabled || isActive) return;\n onChange(tab.id);\n }}\n >\n {renderIcon(tab.icon, {\n className: cx(styles.tabHeaderIcon, classNames?.icon),\n style: slotStyles?.icon,\n })}\n {hasLabels && (\n <div className={cx(styles.tabHeaderLabels, classNames?.labels)} style={slotStyles?.labels}>\n {tab.title && (\n <span className={cx(styles.tabHeaderTitle, classNames?.title)} style={slotStyles?.title}>\n {tab.title}\n </span>\n )}\n {tab.subtitle && (\n <span className={cx(styles.tabHeaderSubtitle, classNames?.subtitle)} style={slotStyles?.subtitle}>\n {tab.subtitle}\n </span>\n )}\n </div>\n )}\n </InteractableDiv>\n );\n })}\n </div>\n );\n}\n\nexport default TabHeader;\n"],"mappings":"iOASA,SAAS,EAAU,CACjB,OAAO,CAAC,EACR,aACA,WACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACc,CACjB,OACE,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,UACL,UAAW,EAAG,EAAO,UAAW,GAAY,KAAM,CAAS,EAC3D,MAAO,CAAE,GAAG,GAAY,KAAM,GAAG,CAAM,WAEtC,EAAK,IAAK,GAAsB,CAC/B,IAAM,EAAW,EAAI,KAAO,EACtB,EAAY,CAAC,CAAC,EAAI,OAAS,CAAC,CAAC,EAAI,SAEvC,OACE,EAAC,EAAD,CAEE,KAAK,MACL,gBAAe,EACf,gBAAe,EAAI,UAAY,IAAA,GAC/B,SAAU,EAAI,SAAW,GAAK,EAC9B,UAAW,EACT,EAAO,aACP,EAAG,EAAO,oBAAqB,CAAS,EACxC,EAAG,EAAO,sBAAuB,EAAI,QAAS,EAC9C,GAAY,GACd,EACA,MAAO,GAAY,IACnB,YAAe,CACT,EAAI,UAAY,GACpB,EAAS,EAAI,EAAE,CACjB,WAhBF,CAkBG,EAAW,EAAI,KAAM,CACpB,UAAW,EAAG,EAAO,cAAe,GAAY,IAAI,EACpD,MAAO,GAAY,IACrB,CAAC,EACA,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,gBAAiB,GAAY,MAAM,EAAG,MAAO,GAAY,gBAAnF,CACG,EAAI,OACH,EAAC,OAAD,CAAM,UAAW,EAAG,EAAO,eAAgB,GAAY,KAAK,EAAG,MAAO,GAAY,eAC/E,EAAI,KACD,CAAA,EAEP,EAAI,UACH,EAAC,OAAD,CAAM,UAAW,EAAG,EAAO,kBAAmB,GAAY,QAAQ,EAAG,MAAO,GAAY,kBACrF,EAAI,QACD,CAAA,CAEL,GAEQ,GAnCV,EAAI,EAmCM,CAErB,CAAC,CACE,CAAA,CAET"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"../interactableDiv/index.mjs";import
|
|
1
|
+
import{renderIcon as e}from"../utils/renderIcon.mjs";import t from"../interactableDiv/index.mjs";import n from"./timeline.module.mjs";import{TimelineAlignment as r,TimelineItemStatus as i}from"./timeline.types.mjs";import"react";import a from"classnames";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";var l={[i.Primary]:n.timelineDotPrimary,[i.Success]:n.timelineDotSuccess,[i.Warn]:n.timelineDotWarn,[i.Error]:n.timelineDotError};function u({items:u=[],alignment:d=r.Left,className:f,style:p,classNames:m,styles:h,...g}){return s(`div`,{...g,className:a(n.timeline,{[n.timelineRight]:d===r.Right,[n.timelineAlternate]:d===r.Alternate},m?.root,f),style:{...h?.root,...p},children:u.map((f,p)=>{let g=f.id??p,_=p===u.length-1,v=d===r.Alternate&&p%2==1,y=!!f.onClick&&!f.disabled,b=c(o,{children:[c(`div`,{className:a(n.timelineMarker,m?.marker),style:h?.marker,children:[s(`div`,{className:a(n.timelineDot,{[n.timelineDotWithIcon]:!!f.icon},l[f.status??i.Default],m?.dot),style:h?.dot,children:f.icon?e(f.icon):null}),!_&&s(`div`,{className:a(n.timelineConnector,m?.connector),style:h?.connector})]}),c(`div`,{className:a(n.timelineContent,m?.content),style:h?.content,children:[c(`div`,{className:n.timelineHeader,children:[s(`div`,{className:a(n.timelineTitle,m?.title),style:h?.title,children:f.title}),f.timestamp!=null&&s(`div`,{className:a(n.timelineTimestamp,m?.timestamp),style:h?.timestamp,children:f.timestamp})]}),f.description!=null&&s(`div`,{className:a(n.timelineDescription,m?.description),style:h?.description,children:f.description}),f.content]})]}),x=a(n.timelineItem,{[n.timelineItemRight]:v},{[n.timelineItemClickable]:y},{[n.timelineItemDisabled]:f.disabled},m?.item);return y?s(t,{className:x,style:h?.item,onClick:f.onClick,children:b},g):s(`div`,{className:x,style:h?.item,"aria-disabled":f.disabled||void 0,children:b},g)})})}export{u as default};
|
|
2
2
|
//# sourceMappingURL=timeline.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport
|
|
1
|
+
{"version":3,"file":"timeline.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport InteractableDiv from '../interactableDiv';\nimport styles from './timeline.module.pcss';\nimport { TimelineAlignment, TimelineItemStatus, type TimelineProps, type TimelineItem } from './timeline.types';\nimport { renderIcon } from '../utils/renderIcon';\n\n// TimelineItemStatus.Default is intentionally absent: it uses .timeline-dot's own\n// background-color, so no modifier class is needed for it.\nconst STATUS_CLASS: Partial<Record<TimelineItemStatus, string>> = {\n [TimelineItemStatus.Primary]: styles.timelineDotPrimary,\n [TimelineItemStatus.Success]: styles.timelineDotSuccess,\n [TimelineItemStatus.Warn]: styles.timelineDotWarn,\n [TimelineItemStatus.Error]: styles.timelineDotError,\n};\n\nexport default function Timeline({\n items = [],\n alignment = TimelineAlignment.Left,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: TimelineProps) {\n return (\n <div\n {...rest}\n className={cx(\n styles.timeline,\n {\n [styles.timelineRight]: alignment === TimelineAlignment.Right,\n [styles.timelineAlternate]: alignment === TimelineAlignment.Alternate,\n },\n classNames?.root,\n className,\n )}\n style={{ ...slotStyles?.root, ...style }}\n >\n {items.map((item: TimelineItem, index: number) => {\n const key = item.id ?? index;\n const isLast = index === items.length - 1;\n const isAlternateRight = alignment === TimelineAlignment.Alternate && index % 2 === 1;\n const isClickable = !!item.onClick && !item.disabled;\n\n const itemContent = (\n <>\n <div className={cx(styles.timelineMarker, classNames?.marker)} style={slotStyles?.marker}>\n <div\n className={cx(\n styles.timelineDot,\n { [styles.timelineDotWithIcon]: !!item.icon },\n STATUS_CLASS[item.status ?? TimelineItemStatus.Default],\n classNames?.dot,\n )}\n style={slotStyles?.dot}\n >\n {item.icon ? renderIcon(item.icon) : null}\n </div>\n {!isLast && (\n <div className={cx(styles.timelineConnector, classNames?.connector)} style={slotStyles?.connector} />\n )}\n </div>\n <div className={cx(styles.timelineContent, classNames?.content)} style={slotStyles?.content}>\n <div className={styles.timelineHeader}>\n <div className={cx(styles.timelineTitle, classNames?.title)} style={slotStyles?.title}>\n {item.title}\n </div>\n {item.timestamp != null && (\n <div className={cx(styles.timelineTimestamp, classNames?.timestamp)} style={slotStyles?.timestamp}>\n {item.timestamp}\n </div>\n )}\n </div>\n {item.description != null && (\n <div className={cx(styles.timelineDescription, classNames?.description)} style={slotStyles?.description}>\n {item.description}\n </div>\n )}\n {item.content}\n </div>\n </>\n );\n\n const itemClassName = cx(\n styles.timelineItem,\n { [styles.timelineItemRight]: isAlternateRight },\n { [styles.timelineItemClickable]: isClickable },\n { [styles.timelineItemDisabled]: item.disabled },\n classNames?.item,\n );\n\n if (isClickable) {\n return (\n <InteractableDiv\n key={key}\n className={itemClassName}\n style={slotStyles?.item}\n onClick={item.onClick}\n >\n {itemContent}\n </InteractableDiv>\n );\n }\n\n return (\n <div key={key} className={itemClassName} style={slotStyles?.item} aria-disabled={item.disabled || undefined}>\n {itemContent}\n </div>\n );\n })}\n </div>\n );\n}\n"],"mappings":"+TASA,IAAM,EAA4D,EAC/D,EAAmB,SAAU,EAAO,oBACpC,EAAmB,SAAU,EAAO,oBACpC,EAAmB,MAAO,EAAO,iBACjC,EAAmB,OAAQ,EAAO,gBACrC,EAEA,SAAwB,EAAS,CAC/B,QAAQ,CAAC,EACT,YAAY,EAAkB,KAC9B,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACa,CAChB,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,SACP,EACG,EAAO,eAAgB,IAAc,EAAkB,OACvD,EAAO,mBAAoB,IAAc,EAAkB,SAC9D,EACA,GAAY,KACZ,CACF,EACA,MAAO,CAAE,GAAG,GAAY,KAAM,GAAG,CAAM,WAEtC,EAAM,KAAK,EAAoB,IAAkB,CAChD,IAAM,EAAM,EAAK,IAAM,EACjB,EAAS,IAAU,EAAM,OAAS,EAClC,EAAmB,IAAc,EAAkB,WAAa,EAAQ,GAAM,EAC9E,EAAc,CAAC,CAAC,EAAK,SAAW,CAAC,EAAK,SAEtC,EACJ,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAY,MAAM,EAAG,MAAO,GAAY,gBAAlF,CACE,EAAC,MAAD,CACE,UAAW,EACT,EAAO,YACP,EAAG,EAAO,qBAAsB,CAAC,CAAC,EAAK,IAAK,EAC5C,EAAa,EAAK,QAAU,EAAmB,SAC/C,GAAY,GACd,EACA,MAAO,GAAY,aAElB,EAAK,KAAO,EAAW,EAAK,IAAI,EAAI,IAClC,CAAA,EACJ,CAAC,GACA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,kBAAmB,GAAY,SAAS,EAAG,MAAO,GAAY,SAAY,CAAA,CAEnG,IACL,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,gBAAiB,GAAY,OAAO,EAAG,MAAO,GAAY,iBAApF,CACE,EAAC,MAAD,CAAK,UAAW,EAAO,wBAAvB,CACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,cAAe,GAAY,KAAK,EAAG,MAAO,GAAY,eAC7E,EAAK,KACH,CAAA,EACJ,EAAK,WAAa,MACjB,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,kBAAmB,GAAY,SAAS,EAAG,MAAO,GAAY,mBACrF,EAAK,SACH,CAAA,CAEJ,IACJ,EAAK,aAAe,MACnB,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,oBAAqB,GAAY,WAAW,EAAG,MAAO,GAAY,qBACzF,EAAK,WACH,CAAA,EAEN,EAAK,OACH,GACL,CAAA,CAAA,EAGE,EAAgB,EACpB,EAAO,aACP,EAAG,EAAO,mBAAoB,CAAiB,EAC/C,EAAG,EAAO,uBAAwB,CAAY,EAC9C,EAAG,EAAO,sBAAuB,EAAK,QAAS,EAC/C,GAAY,IACd,EAeA,OAbI,EAEA,EAAC,EAAD,CAEE,UAAW,EACX,MAAO,GAAY,KACnB,QAAS,EAAK,iBAEb,CACc,EANV,CAMU,EAKnB,EAAC,MAAD,CAAe,UAAW,EAAe,MAAO,GAAY,KAAM,gBAAe,EAAK,UAAY,IAAA,YAC/F,CACE,EAFK,CAEL,CAET,CAAC,CACE,CAAA,CAET"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={timeline:`timeline_VtQdt`,"timeline-item":`timeline-item_s8-U2`,timelineItem:`timeline-item_s8-U2`,"timeline-item-connector":`timeline-item-connector_06FQ0`,timelineItemConnector:`timeline-item-connector_06FQ0`,"timeline-item-clickable":`timeline-item-clickable_0w8zK`,timelineItemClickable:`timeline-item-clickable_0w8zK`,"timeline-item-disabled":`timeline-item-disabled_EkWVA`,timelineItemDisabled:`timeline-item-disabled_EkWVA`,"timeline-marker":`timeline-marker_u6jDA`,timelineMarker:`timeline-marker_u6jDA`,"timeline-dot":`timeline-dot_l-s7C`,timelineDot:`timeline-dot_l-s7C`,"timeline-dot-primary":`timeline-dot-primary_5Uk-e`,timelineDotPrimary:`timeline-dot-primary_5Uk-e`,"timeline-dot-success":`timeline-dot-success_iEoLv`,timelineDotSuccess:`timeline-dot-success_iEoLv`,"timeline-dot-warn":`timeline-dot-warn_-6G8K`,timelineDotWarn:`timeline-dot-warn_-6G8K`,"timeline-dot-error":`timeline-dot-error_-10M7`,timelineDotError:`timeline-dot-error_-10M7`,"timeline-connector":`timeline-connector_VuXnH`,timelineConnector:`timeline-connector_VuXnH`,"timeline-content":`timeline-content_K4Ztg`,timelineContent:`timeline-content_K4Ztg`,"timeline-header":`timeline-header_xr4Tw`,timelineHeader:`timeline-header_xr4Tw`,"timeline-title":`timeline-title_MZ26k`,timelineTitle:`timeline-title_MZ26k`,"timeline-timestamp":`timeline-timestamp_-0w-N`,timelineTimestamp:`timeline-timestamp_-0w-N`,"timeline-description":`timeline-description_WcWIu`,timelineDescription:`timeline-description_WcWIu`,"timeline-right":`timeline-right_fZEKn`,timelineRight:`timeline-right_fZEKn`,"timeline-alternate":`timeline-alternate_Kv9LY`,timelineAlternate:`timeline-alternate_Kv9LY`,"timeline-item-right":`timeline-item-right_s5ELB`,timelineItemRight:`timeline-item-right_s5ELB`};export{e as default};
|
|
1
|
+
var e={timeline:`timeline_VtQdt`,"timeline-item":`timeline-item_s8-U2`,timelineItem:`timeline-item_s8-U2`,"timeline-item-connector":`timeline-item-connector_06FQ0`,timelineItemConnector:`timeline-item-connector_06FQ0`,"timeline-item-clickable":`timeline-item-clickable_0w8zK`,timelineItemClickable:`timeline-item-clickable_0w8zK`,"timeline-item-disabled":`timeline-item-disabled_EkWVA`,timelineItemDisabled:`timeline-item-disabled_EkWVA`,"timeline-marker":`timeline-marker_u6jDA`,timelineMarker:`timeline-marker_u6jDA`,"timeline-dot":`timeline-dot_l-s7C`,timelineDot:`timeline-dot_l-s7C`,"timeline-dot-with-icon":`timeline-dot-with-icon_6JK7D`,timelineDotWithIcon:`timeline-dot-with-icon_6JK7D`,"timeline-dot-primary":`timeline-dot-primary_5Uk-e`,timelineDotPrimary:`timeline-dot-primary_5Uk-e`,"timeline-dot-success":`timeline-dot-success_iEoLv`,timelineDotSuccess:`timeline-dot-success_iEoLv`,"timeline-dot-warn":`timeline-dot-warn_-6G8K`,timelineDotWarn:`timeline-dot-warn_-6G8K`,"timeline-dot-error":`timeline-dot-error_-10M7`,timelineDotError:`timeline-dot-error_-10M7`,"timeline-connector":`timeline-connector_VuXnH`,timelineConnector:`timeline-connector_VuXnH`,"timeline-content":`timeline-content_K4Ztg`,timelineContent:`timeline-content_K4Ztg`,"timeline-header":`timeline-header_xr4Tw`,timelineHeader:`timeline-header_xr4Tw`,"timeline-title":`timeline-title_MZ26k`,timelineTitle:`timeline-title_MZ26k`,"timeline-timestamp":`timeline-timestamp_-0w-N`,timelineTimestamp:`timeline-timestamp_-0w-N`,"timeline-description":`timeline-description_WcWIu`,timelineDescription:`timeline-description_WcWIu`,"timeline-right":`timeline-right_fZEKn`,timelineRight:`timeline-right_fZEKn`,"timeline-alternate":`timeline-alternate_Kv9LY`,timelineAlternate:`timeline-alternate_Kv9LY`,"timeline-item-right":`timeline-item-right_s5ELB`,timelineItemRight:`timeline-item-right_s5ELB`};export{e as default};
|
|
2
2
|
//# sourceMappingURL=timeline.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline.module.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.module.pcss"],"sourcesContent":[".timeline {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--timeline-*` variables via ThemeProvider (theme-wide) or `style`\n (per instance) to override; unset ones fall back to the values below. */\n --custom-timeline-dot-size: var(--timeline-dot-size, 14px);\n --custom-timeline-dot-color: var(--timeline-dot-color, var(--primary-color));\n --custom-timeline-dot-border: var(--timeline-dot-border, var(--background));\n --custom-timeline-line-color: var(--timeline-line-color, var(--border-color));\n --custom-timeline-line-thickness: var(--timeline-line-thickness, 2px);\n --custom-timeline-gap: var(--timeline-gap, 16px);\n --custom-timeline-item-gap: var(--timeline-item-gap, 20px);\n --custom-timeline-icon-dot-size: var(--timeline-icon-dot-size, 28px);\n\n display: flex;\n flex-direction: column;\n color: var(--text-color);\n\n &-item {\n display: flex;\n gap: var(--custom-timeline-gap);\n border-radius: var(--default-border-radius);\n\n &:last-child &-connector {\n display: none;\n }\n }\n\n &-item-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background-color 0.15s ease;\n margin: 0px -10px;\n padding: 0px 10px;\n\n &:hover {\n background-color: var(--background-accent-light);\n }\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n }\n\n &-item-disabled {\n opacity: 0.5;\n }\n\n &-marker {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n }\n\n &-dot {\n width: var(--custom-timeline-dot-size);\n height: var(--custom-timeline-dot-size);\n border-radius: 50%;\n background-color: var(--custom-timeline-dot-color);\n box-shadow: 0 0 0 3px var(--custom-timeline-dot-border);\n flex-shrink: 0;\n\n
|
|
1
|
+
{"version":3,"file":"timeline.module.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.module.pcss"],"sourcesContent":[".timeline {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--timeline-*` variables via ThemeProvider (theme-wide) or `style`\n (per instance) to override; unset ones fall back to the values below. */\n --custom-timeline-dot-size: var(--timeline-dot-size, 14px);\n --custom-timeline-dot-color: var(--timeline-dot-color, var(--primary-color));\n --custom-timeline-dot-border: var(--timeline-dot-border, var(--background));\n --custom-timeline-line-color: var(--timeline-line-color, var(--border-color));\n --custom-timeline-line-thickness: var(--timeline-line-thickness, 2px);\n --custom-timeline-gap: var(--timeline-gap, 16px);\n --custom-timeline-item-gap: var(--timeline-item-gap, 20px);\n --custom-timeline-icon-dot-size: var(--timeline-icon-dot-size, 28px);\n\n display: flex;\n flex-direction: column;\n color: var(--text-color);\n\n &-item {\n display: flex;\n gap: var(--custom-timeline-gap);\n border-radius: var(--default-border-radius);\n\n &:last-child &-connector {\n display: none;\n }\n }\n\n &-item-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background-color 0.15s ease;\n margin: 0px -10px;\n padding: 0px 10px;\n\n &:hover {\n background-color: var(--background-accent-light);\n }\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n }\n\n &-item-disabled {\n opacity: 0.5;\n }\n\n &-marker {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n }\n\n &-dot {\n width: var(--custom-timeline-dot-size);\n height: var(--custom-timeline-dot-size);\n border-radius: 50%;\n background-color: var(--custom-timeline-dot-color);\n box-shadow: 0 0 0 3px var(--custom-timeline-dot-border);\n flex-shrink: 0;\n }\n\n /* Set by the component whenever the item has an icon — not inferred from the\n rendered markup (`:has(svg)`), which would miss a custom icon element that\n isn't an <svg>, e.g. an <img>. */\n &-dot-with-icon {\n width: var(--custom-timeline-icon-dot-size);\n height: var(--custom-timeline-icon-dot-size);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-on-primary);\n font-size: calc(var(--custom-timeline-icon-dot-size) * 0.5);\n }\n\n &-dot-primary {\n background-color: var(--primary-color);\n }\n &-dot-success {\n background-color: var(--success-color);\n }\n &-dot-warn {\n background-color: var(--warn-color);\n }\n &-dot-error {\n background-color: var(--error-color);\n }\n\n &-connector {\n flex: 1 1 auto;\n width: var(--custom-timeline-line-thickness);\n min-height: 12px;\n background-color: var(--custom-timeline-line-color);\n margin: 4px 0;\n }\n\n &-content {\n flex: 1 1 auto;\n min-width: 0;\n padding-bottom: var(--custom-timeline-item-gap);\n }\n\n &-header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n }\n\n &-title {\n font-weight: 600;\n color: var(--text-color);\n }\n\n &-timestamp {\n flex-shrink: 0;\n color: var(--text-dark);\n font-size: var(--text-small-font-size, 0.85em);\n white-space: nowrap;\n }\n\n &-description {\n color: var(--text-dark);\n margin-top: 2px;\n }\n\n /* Right: markers + line on the right, content on the left */\n &-right &-item {\n flex-direction: row-reverse;\n text-align: right;\n }\n &-right &-header {\n flex-direction: row-reverse;\n }\n\n /* Alternate: two-column layout, entries alternating left/right of a centered line */\n &-alternate &-item {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: start;\n gap: var(--custom-timeline-gap);\n }\n &-alternate &-marker {\n grid-column: 2;\n grid-row: 1;\n }\n &-alternate &-content {\n grid-column: 1;\n grid-row: 1;\n text-align: right;\n }\n &-alternate &-header {\n flex-direction: row-reverse;\n }\n &-alternate &-item-right &-content {\n grid-column: 3;\n text-align: left;\n }\n &-alternate &-item-right &-header {\n flex-direction: row;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline.types.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.types.ts"],"sourcesContent":["import type React from 'react';\nimport type {
|
|
1
|
+
{"version":3,"file":"timeline.types.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\n/** Layout of entries relative to the connecting line. */\nexport enum TimelineAlignment {\n /** Line and markers on the left, content to the right (the default). */\n Left = 'left',\n /** Line and markers on the right, content to the left. */\n Right = 'right',\n /** Line down the center, entries alternating left/right. */\n Alternate = 'alternate',\n}\n\n/** Semantic colour for an entry's marker, matching the theme's status colours. */\nexport enum TimelineItemStatus {\n Default = 'default',\n Primary = 'primary',\n Success = 'success',\n Warn = 'warn',\n Error = 'error',\n}\n\nexport type TimelineSlots =\n | 'root'\n | 'item'\n | 'marker'\n | 'dot'\n | 'connector'\n | 'content'\n | 'title'\n | 'description'\n | 'timestamp';\n\nexport interface TimelineItem {\n /** Stable identity for the entry, used as its React key. Falls back to its array index when omitted; pass one whenever `items` can be reordered or have entries prepended (e.g. a live \"newest first\" audit log), so React doesn't misattribute row state across the shift. */\n id?: string | number;\n /** Primary label for the entry. */\n title: React.ReactNode;\n /** Secondary line under the title. */\n description?: React.ReactNode;\n /** Rendered next to the title, e.g. a date or relative time (\"2 hours ago\"). */\n timestamp?: React.ReactNode;\n /** Icon shown in the marker instead of a plain dot — a FontAwesome icon or any node. */\n icon?: IconContent;\n /** Semantic marker colour (default `Default`). */\n status?: TimelineItemStatus;\n /** Extra content rendered under the description, e.g. a diff, an attachment, an actor avatar. */\n content?: React.ReactNode;\n /** Makes the whole entry clickable (e.g. to open the full record), rendering it as an accessible button. */\n onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n /** Disables the entry: never clickable, dimmed. Only relevant alongside `onClick`. */\n disabled?: boolean;\n}\n\nexport interface TimelineProps extends HtmlProps {\n /** The entries to render, in display order (typically newest first for an audit log). */\n items?: TimelineItem[];\n /** Layout of entries relative to the connecting line (default `Left`). */\n alignment?: TimelineAlignment;\n className?: string;\n style?: React.CSSProperties;\n classNames?: SlotClassNames<TimelineSlots>;\n styles?: SlotStyles<TimelineSlots>;\n}\n"],"mappings":"AAKA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,KAAA,OAEA,EAAA,MAAA,QAEA,EAAA,UAAA,aACF,EAAA,CAAA,CAAA,EAGY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{FontAwesomeIcon as e}from"@fortawesome/react-fontawesome";import{jsx as t}from"react/jsx-runtime";function n(e){return typeof e==`object`&&!!e&&`prefix`in e&&`iconName`in e&&`icon`in e}function r(r,i={}){let{className:a,style:o}=i;return r==null?null:n(r)?t(e,{icon:r,className:a,style:o}):a||o?t(`span`,{className:a,style:o,children:r}):r}export{r as renderIcon};
|
|
2
|
+
//# sourceMappingURL=renderIcon.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"renderIcon.mjs","names":[],"sources":["../../../../package/common/utils/renderIcon.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport type { IconDefinition } from '@fortawesome/fontawesome-svg-core';\n\nimport type { IconContent } from '../types/icon.types';\n\n/** FontAwesome's own `style` type — `CSSProperties` plus its `--fa-*` variables. */\ntype FaStyle = CSSProperties & Record<`--fa-font-${string}`, string>;\n\ninterface RenderIconOptions {\n /** Class applied to the rendered icon (or to the wrapper span for a custom element). */\n className?: string;\n /** Inline style applied to the rendered icon (or to the wrapper span for a custom element). */\n style?: CSSProperties;\n}\n\n/**\n * Narrows an `IconContent` to a FontAwesome `IconDefinition`.\n *\n * Both halves of the union are plain objects (a React element is one too), so\n * they can only be told apart structurally: an icon definition always carries\n * `prefix`, `iconName` and the `icon` tuple.\n */\nexport function isIconDefinition(icon: IconContent | null | undefined): icon is IconDefinition {\n return (\n typeof icon === 'object' &&\n icon !== null &&\n 'prefix' in icon &&\n 'iconName' in icon &&\n 'icon' in icon\n );\n}\n\n/**\n * Renders an `icon` prop that may be either a FontAwesome `IconDefinition` or an\n * arbitrary React element.\n *\n * A definition goes through `FontAwesomeIcon`; an element is returned untouched\n * unless a `className`/`style` was given, in which case it is wrapped in a\n * `<span>` carrying them so component and consumer slot styling still lands\n * somewhere. Note that a custom element is not sized by FontAwesome's `1em`\n * geometry — size it yourself if the surrounding layout expects a square icon.\n */\nexport function renderIcon(icon: IconContent | null | undefined, options: RenderIconOptions = {}): ReactNode {\n const { className, style } = options;\n\n if (icon === null || icon === undefined) return null;\n\n if (isIconDefinition(icon)) {\n return <FontAwesomeIcon icon={icon} className={className} style={style as FaStyle} />;\n }\n\n if (className || style) {\n return <span className={className} style={style}>{icon}</span>;\n }\n\n return icon;\n}\n"],"mappings":"yGAuBA,SAAgB,EAAiB,EAA8D,CAC7F,OACE,OAAO,GAAS,YAChB,GACA,WAAY,GACZ,aAAc,GACd,SAAU,CAEd,CAYA,SAAgB,EAAW,EAAsC,EAA6B,CAAC,EAAc,CAC3G,GAAM,CAAE,YAAW,SAAU,EAY7B,OAVI,GAAS,KAAmC,KAE5C,EAAiB,CAAI,EAChB,EAAC,EAAD,CAAuB,OAAiB,YAAkB,OAAmB,CAAA,EAGlF,GAAa,EACR,EAAC,OAAD,CAAiB,YAAkB,iBAAQ,CAAW,CAAA,EAGxD,CACT"}
|