@pgcorp/ui-kit 0.1.0

package/src/components/shared/data-display/SSectionHeader.css

@@ -0,0 +1,84 @@
+@reference "../../../styles/reference.css";
+
+.s-section-header {
+  @apply flex min-w-0 flex-wrap items-start justify-between gap-3;
+}
+
+.s-section-header[data-spacing-after='sm'] {
+  @apply mb-2;
+}
+
+.s-section-header[data-spacing-after='md'] {
+  @apply mb-3;
+}
+
+.s-section-header[data-divider='true'] {
+  @apply border-b border-surface-200 pb-3 dark:border-surface-700;
+}
+
+.s-section-header[data-padding='sm'] {
+  @apply p-2;
+}
+
+.s-section-header[data-padding='md'] {
+  @apply p-4;
+}
+
+.s-section-header[data-divider='true'][data-padding='sm'] {
+  @apply pb-2;
+}
+
+.s-section-header[data-divider='true'][data-padding='md'] {
+  @apply pb-4;
+}
+
+.s-section-header__copy {
+  @apply min-w-0 flex-1;
+}
+
+.s-section-header__eyebrow {
+  @apply text-xs font-semibold uppercase text-surface-500 dark:text-surface-400;
+}
+
+.s-section-header__title {
+  @apply m-0 break-words text-base font-semibold text-surface-900 dark:text-surface-50;
+}
+
+.s-section-header[data-size='sm'] .s-section-header__title {
+  @apply text-sm;
+}
+
+.s-section-header[data-variant='display'] .s-section-header__title {
+  @apply text-xl font-semibold uppercase tracking-[0.22em] text-surface-700 dark:text-surface-200;
+}
+
+.s-section-header__eyebrow + .s-section-header__title {
+  @apply mt-1;
+}
+
+.s-section-header__description,
+.s-section-header__meta {
+  @apply mt-1 min-w-0 break-words text-xs text-surface-500 dark:text-surface-400;
+  overflow-wrap: anywhere;
+}
+
+.s-section-header__trailing {
+  @apply flex min-w-0 flex-wrap items-center justify-end gap-2;
+}
+
+.s-section-header__badges,
+.s-section-header__actions {
+  @apply flex min-w-0 flex-wrap items-center justify-end gap-2;
+}
+
+.s-section-header[data-trailing-layout='stacked'] .s-section-header__trailing,
+.s-section-header[data-trailing-layout='stacked'] .s-section-header__actions {
+  @apply w-full justify-start;
+}
+
+@media (max-width: 639px) {
+  .s-section-header[data-trailing-layout='responsive'] .s-section-header__trailing,
+  .s-section-header[data-trailing-layout='responsive'] .s-section-header__actions {
+    @apply w-full justify-start;
+  }
+}

package/src/components/shared/data-display/SSectionHeader.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+withDefaults(defineProps<{
+  title: string
+  eyebrow?: string | null
+  description?: string | null
+  meta?: string | null
+  headingLevel?: 2 | 3 | 4
+  size?: 'sm' | 'md'
+  variant?: 'default' | 'display'
+  divider?: boolean
+  padding?: 'none' | 'sm' | 'md'
+  spacingAfter?: 'none' | 'sm' | 'md'
+  trailingLayout?: 'responsive' | 'inline' | 'stacked'
+}>(), {
+  eyebrow: undefined,
+  description: undefined,
+  meta: undefined,
+  headingLevel: 3,
+  size: 'md',
+  variant: 'default',
+  divider: false,
+  padding: 'none',
+  spacingAfter: 'none',
+  trailingLayout: 'responsive',
+})
+
+const ownedAttrs = useOwnedAttrs({ component: 'SSectionHeader', owner: 'section header root' })
+</script>
+
+<template>
+  <header
+    v-bind="ownedAttrs.bindings()"
+    class="s-section-header"
+    :data-size="size"
+    :data-variant="variant"
+    :data-divider="divider || undefined"
+    :data-padding="padding"
+    :data-spacing-after="spacingAfter"
+    :data-trailing-layout="trailingLayout"
+  >
+    <div class="s-section-header__copy">
+      <div v-if="eyebrow" class="s-section-header__eyebrow">{{ eyebrow }}</div>
+      <component :is="`h${headingLevel}`" class="s-section-header__title">{{ title }}</component>
+      <p v-if="description" class="s-section-header__description">{{ description }}</p>
+      <p v-if="meta" class="s-section-header__meta">{{ meta }}</p>
+    </div>
+    <div v-if="$slots.badges || $slots.actions" class="s-section-header__trailing">
+      <div v-if="$slots.badges" class="s-section-header__badges"><slot name="badges" /></div>
+      <div v-if="$slots.actions" class="s-section-header__actions"><slot name="actions" /></div>
+    </div>
+  </header>
+</template>
+
+<style lang="postcss" src="./SSectionHeader.css" scoped></style>

package/src/components/shared/data-display/SStatus.css

@@ -0,0 +1,90 @@
+@reference "../../../styles/reference.css";
+
+.s-status {
+  @apply inline-flex min-w-0 items-center font-medium;
+}
+
+.s-status[data-size='xs'] {
+  @apply gap-1 text-[10px] leading-4;
+}
+
+.s-status[data-size='sm'] {
+  @apply gap-1.5 text-xs leading-4;
+}
+
+.s-status[data-size='md'] {
+  @apply gap-1.5 text-sm leading-5;
+}
+
+.s-status[data-appearance='soft'] {
+  @apply rounded-full border px-2 py-0.5;
+}
+
+.s-status__icon {
+  @apply inline-flex shrink-0 items-center justify-center;
+}
+
+.s-status[data-size='xs'] .s-status__icon {
+  @apply h-3 w-3;
+}
+
+.s-status[data-size='sm'] .s-status__icon {
+  @apply h-3.5 w-3.5;
+}
+
+.s-status[data-size='md'] .s-status__icon {
+  @apply h-4 w-4;
+}
+
+.s-status__icon-graphic {
+  @apply h-full w-full;
+}
+
+.s-status__label {
+  @apply min-w-0;
+  overflow-wrap: anywhere;
+}
+
+.s-status[data-label-visibility='sr-only'] .s-status__label {
+  @apply sr-only;
+}
+
+.s-status[data-tone='neutral'] {
+  @apply text-surface-500 dark:text-surface-400;
+}
+
+.s-status[data-tone='info'] {
+  @apply text-info-700 dark:text-info-300;
+}
+
+.s-status[data-tone='success'] {
+  @apply text-success-700 dark:text-success-300;
+}
+
+.s-status[data-tone='warn'] {
+  @apply text-warn-700 dark:text-warn-300;
+}
+
+.s-status[data-tone='danger'] {
+  @apply text-danger-700 dark:text-danger-300;
+}
+
+.s-status[data-appearance='soft'][data-tone='neutral'] {
+  @apply border-surface-200 bg-surface-100 dark:border-surface-700 dark:bg-surface-800;
+}
+
+.s-status[data-appearance='soft'][data-tone='info'] {
+  @apply border-info-200 bg-info-50 dark:border-info-800 dark:bg-info-950;
+}
+
+.s-status[data-appearance='soft'][data-tone='success'] {
+  @apply border-success-200 bg-success-50 dark:border-success-800 dark:bg-success-950;
+}
+
+.s-status[data-appearance='soft'][data-tone='warn'] {
+  @apply border-warn-200 bg-warn-50 dark:border-warn-800 dark:bg-warn-950;
+}
+
+.s-status[data-appearance='soft'][data-tone='danger'] {
+  @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950;
+}

package/src/components/shared/data-display/SStatus.vue

@@ -0,0 +1,79 @@
+<template>
+  <span
+    v-bind="ownedAttrs.bindings()"
+    class="s-status"
+    :data-tone="tone"
+    :data-appearance="appearance"
+    :data-size="size"
+    :data-label-visibility="labelVisibility"
+    :title="title"
+    :role="liveAttributes.role"
+    :aria-live="liveAttributes.ariaLive"
+    :aria-atomic="liveAttributes.ariaAtomic"
+    data-testid="s-status"
+  >
+    <span v-if="resolvedIcon" class="s-status__icon" aria-hidden="true">
+      <component :is="resolvedIcon" class="s-status__icon-graphic" />
+    </span>
+    <span class="s-status__label">{{ label }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, markRaw, toRaw, type Component } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+
+import {
+  resolveFeedbackLive,
+  resolveFeedbackPresentation,
+  type FeedbackLiveMode,
+  type FeedbackTone,
+} from '../../../internal/feedbackPresentation'
+
+defineOptions({ inheritAttrs: false })
+
+export type StatusTone = FeedbackTone
+export type StatusAppearance = 'text' | 'soft'
+export type StatusSize = 'xs' | 'sm' | 'md'
+export type StatusLiveMode = Exclude<FeedbackLiveMode, 'auto'>
+
+export interface StatusPresentation {
+  label: string
+  tone?: StatusTone
+  title?: string
+  icon?: Component | null
+}
+
+const props = withDefaults(defineProps<{
+  label: string
+  tone?: StatusTone
+  appearance?: StatusAppearance
+  size?: StatusSize
+  /** Видимость текстовой подписи при сохранении accessible name. / Text-label visibility while preserving the accessible name. */
+  labelVisibility?: 'visible' | 'sr-only'
+  title?: string
+  icon?: Component | null
+  live?: StatusLiveMode
+}>(), {
+  tone: 'neutral',
+  appearance: 'text',
+  size: 'md',
+  labelVisibility: 'visible',
+  title: undefined,
+  icon: undefined,
+  live: 'off',
+})
+
+const defaultIcon = computed<Component>(() => resolveFeedbackPresentation(props.tone).icon)
+const ownedAttrs = useOwnedAttrs({ component: 'SStatus', owner: 'status root' })
+const liveAttributes = computed(() => resolveFeedbackLive(props.tone, props.live))
+
+const resolvedIcon = computed<Component | null>(() => {
+  if (props.icon === null) {
+    return null
+  }
+  return markRaw(toRaw(props.icon ?? defaultIcon.value) as Component)
+})
+</script>
+
+<style lang="postcss" src="./SStatus.css" scoped></style>

package/src/components/shared/data-display/STable.css

@@ -0,0 +1,83 @@
+@reference "../../../styles/reference.css";
+
+.s-table-wrapper {
+  @apply w-full min-w-0 overflow-auto rounded-lg border border-surface-200 bg-surface-0;
+  @apply dark:border-surface-700 dark:bg-surface-800;
+}
+
+.s-table-wrapper[data-surface="plain"] {
+  @apply rounded-none border-0 bg-transparent dark:bg-transparent;
+}
+
+.s-table-wrapper[data-max-height="sm"] { max-block-size: var(--s-scroll-viewport-max-block-size-sm); }
+.s-table-wrapper[data-max-height="md"] { max-block-size: var(--s-scroll-viewport-max-block-size-md); }
+.s-table-wrapper[data-max-height="lg"] { max-block-size: var(--s-scroll-viewport-max-block-size-lg); }
+
+.s-table {
+  @apply min-w-full border-collapse text-left text-sm;
+}
+
+.s-table-wrapper[data-min-width="md"] .s-table {
+  min-inline-size: var(--s-table-inline-size-md);
+}
+
+.s-table-wrapper[data-min-width="lg"] .s-table {
+  min-inline-size: var(--s-table-inline-size-lg);
+}
+
+.s-table-header th {
+  @apply sticky top-0 border-b border-surface-200 bg-surface-50 px-4 py-3;
+  z-index: var(--s-layer-sticky);
+  min-height: var(--s-density-row-comfortable);
+  @apply text-xs font-semibold uppercase tracking-wider text-surface-500;
+  @apply dark:border-surface-700 dark:bg-surface-800 dark:text-surface-400;
+}
+
+.s-table-header th[data-width="auto"] { inline-size: auto; }
+.s-table-header th[data-width="xs"] { inline-size: var(--s-table-column-inline-size-xs); }
+.s-table-header th[data-width="sm"] { inline-size: var(--s-table-column-inline-size-sm); }
+.s-table-header th[data-width="md"] { inline-size: var(--s-table-column-inline-size-md); }
+.s-table-header th[data-width="lg"] { inline-size: var(--s-table-column-inline-size-lg); }
+.s-table-header th[data-width="xl"] { inline-size: var(--s-table-column-inline-size-xl); }
+.s-table-header th[data-width="fill"] { inline-size: 100%; }
+.s-table-header th[data-min-width="xs"] { min-inline-size: var(--s-table-column-inline-size-xs); }
+.s-table-header th[data-min-width="sm"] { min-inline-size: var(--s-table-column-inline-size-sm); }
+.s-table-header th[data-min-width="md"] { min-inline-size: var(--s-table-column-inline-size-md); }
+.s-table-header th[data-min-width="lg"] { min-inline-size: var(--s-table-column-inline-size-lg); }
+.s-table-header th[data-min-width="xl"] { min-inline-size: var(--s-table-column-inline-size-xl); }
+
+.s-table-body tr {
+  @apply border-b border-surface-100 dark:border-surface-700/50;
+}
+
+.s-table-body tr:last-child {
+  @apply border-b-0;
+}
+
+.s-table-body tr:hover {
+  @apply bg-surface-50/50 dark:bg-surface-800/20;
+}
+
+.s-table-body td {
+  @apply px-4 py-3 align-middle text-surface-700 dark:text-surface-300;
+  height: var(--s-density-row-comfortable);
+}
+
+.s-table[data-density="compact"] th { @apply px-3 py-2; }
+.s-table[data-density="compact"] td { @apply px-2 py-1.5; height: var(--s-density-row-compact); }
+
+.s-table [data-align="center"] { text-align: center; }
+.s-table [data-align="right"] { text-align: right; }
+
+.s-table-body tr[data-state="inserted"] td {
+  @apply bg-success-50 dark:bg-success-950/25;
+}
+
+.s-table-body tr[data-state="updated"] td,
+.s-table-body td[data-state="pending"] {
+  @apply bg-primary-50 dark:bg-primary-950/25;
+}
+
+.s-table-body tr[data-state="deleted"] td {
+  @apply bg-danger-50 text-danger-700 line-through dark:bg-danger-950/25 dark:text-danger-300;
+}