@de-kit/st-ui 0.1.8 → 0.1.10

package/dist/lib/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.js","names":[],"sources":["../../src/lib/slot.tsx"],"sourcesContent":["import {\n  forwardRef,\n  isValidElement,\n  type CSSProperties,\n  type ElementType,\n  type ForwardedRef,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { cn } from './cn';\n\ninterface SlotProps {\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  onClick?: MouseEventHandler<HTMLElement>;\n  disabled?: boolean;\n  [key: string]: unknown;\n}\n\ntype AnyHandler = (...args: unknown[]) => void;\n\nconst isHandlerKey = (key: string) => /^on[A-Z]/.test(key);\n\nconst asHandler = (value: unknown): AnyHandler | undefined => {\n  if (typeof value !== 'function') return undefined;\n  return value as AnyHandler;\n};\n\nconst asClassName = (value: unknown) => {\n  if (typeof value === 'string' || typeof value === 'number')\n    return String(value);\n  return undefined;\n};\n\nconst asStyle = (value: unknown): CSSProperties | undefined => {\n  if (!value || typeof value !== 'object' || Array.isArray(value))\n    return undefined;\n  return value as CSSProperties;\n};\n\nconst isPrevented = (event: unknown) =>\n  typeof event === 'object' &&\n  event !== null &&\n  'defaultPrevented' in event &&\n  event.defaultPrevented === true;\n\nconst composeHandlers = (childHandler: unknown, slotHandler: unknown) => {\n  const child = asHandler(childHandler);\n  const slot = asHandler(slotHandler);\n  if (!child) return slot;\n  if (!slot) return child;\n\n  return (...args: unknown[]) => {\n    child(...args);\n    if (!isPrevented(args[0])) slot(...args);\n  };\n};\n\nconst warnsOnRefRead = (getter: PropertyDescriptor['get']) => {\n  if (!getter || !('isReactWarning' in getter)) return false;\n  return Boolean((getter as { isReactWarning?: boolean }).isReactWarning);\n};\n\nconst readRef = (source: object): Ref<HTMLElement> | undefined => {\n  if (!('ref' in source)) return undefined;\n  const value = (source as { ref?: Ref<HTMLElement> | null }).ref;\n  return value ?? undefined;\n};\n\n// React 18 кладёт ref на элемент, React 19 — в props. Геттер-заглушка\n// ругается при чтении «не той» стороны, поэтому берём ту, что без предупреждения.\nconst getElementRef = (element: object) => {\n  const props =\n    'props' in element && element.props && typeof element.props === 'object'\n      ? element.props\n      : {};\n  const propsGetter = Object.getOwnPropertyDescriptor(props, 'ref')?.get;\n  if (warnsOnRefRead(propsGetter)) return readRef(element);\n\n  const elementGetter = Object.getOwnPropertyDescriptor(element, 'ref')?.get;\n  if (warnsOnRefRead(elementGetter)) return readRef(props);\n\n  return readRef(props) ?? readRef(element);\n};\n\nconst mergeProps = (\n  childProps: Record<string, unknown>,\n  slotProps: SlotProps,\n) => {\n  const merged: Record<string, unknown> = { ...slotProps };\n\n  for (const key of Object.keys(childProps)) {\n    if (key === 'ref') continue;\n\n    const childValue = childProps[key];\n    const slotValue = slotProps[key];\n\n    if (key === 'className') continue;\n\n    if (key === 'style') {\n      merged.style = { ...asStyle(slotValue), ...asStyle(childValue) };\n      continue;\n    }\n\n    if (key === 'onClick') continue;\n\n    if (isHandlerKey(key)) {\n      merged[key] = composeHandlers(childValue, slotValue);\n      continue;\n    }\n\n    if (\n      (key === 'disabled' && slotProps.disabled) ||\n      (key === 'aria-busy' && slotProps['aria-busy']) ||\n      (key === 'aria-disabled' && slotProps['aria-disabled'])\n    ) {\n      continue;\n    }\n\n    merged[key] = childValue;\n  }\n\n  const className = cn(\n    asClassName(slotProps.className),\n    asClassName(childProps.className),\n  );\n  if (className) merged.className = className;\n  if (slotProps.onClick) merged.onClick = slotProps.onClick;\n\n  return merged;\n};\n\nconst attachRef = (\n  ref: ForwardedRef<HTMLElement> | Ref<HTMLElement> | undefined,\n  node: HTMLElement | null,\n) => {\n  if (typeof ref === 'function') return ref(node);\n  if (ref) ref.current = node;\n  return undefined;\n};\n\n/** Сливает пропы в единственного ребёнка, без своего DOM-узла. Как Radix Slot. */\nexport const Slot = forwardRef(function Slot(\n  props: SlotProps,\n  slotRef: ForwardedRef<HTMLElement>,\n) {\n  const { children, ...slotProps } = props;\n\n  if (!isValidElement(children)) {\n    throw new Error('Button с asChild ждёт ровно один React-элемент.');\n  }\n\n  const childProps = children.props as Record<string, unknown>;\n  const childRef = getElementRef(children);\n  const Comp = children.type as ElementType;\n  const merged = mergeProps(childProps, slotProps);\n\n  return (\n    <Comp\n      {...merged}\n      ref={(node: HTMLElement | null) => {\n        const slotCleanup = attachRef(slotRef, node);\n        const childCleanup = attachRef(childRef, node);\n        if (\n          typeof slotCleanup !== 'function' &&\n          typeof childCleanup !== 'function'\n        ) {\n          return undefined;\n        }\n\n        return () => {\n          if (typeof slotCleanup === 'function') slotCleanup();\n          else attachRef(slotRef, null);\n          if (typeof childCleanup === 'function') childCleanup();\n          else attachRef(childRef, null);\n        };\n      }}\n    />\n  );\n});\n"],"mappings":"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"}

package/dist/styles/global.scss

@@ -1,201 +1,201 @@
-// База приложения. Шрифт Inter подключает хост — файлы лежат в splittest-frontend/src/app/fonts.
-// Токены (`--color-*`) подключает вход пакета, этот файл их не эмитит.
-@use './mixins.scss' as mixins;
-
-:root {
-  --window-max-height: 100vh;
-  --wrapper-padding: 20px;
-
-  @include mixins.min-width(md) {
-    --wrapper-padding: 30px;
-  }
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-* {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-html,
-body {
-  height: 100%;
-  scrollbar-gutter: stable;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  font-family: var(--font-sans);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: var(--color-foreground);
-  background-color: var(--color-background);
-  font-size: var(--text-sm);
-  line-height: var(--text-sm--line-height);
-  font-weight: 400;
-
-  &::after {
-    content: '';
-    display: block;
-    background-color: var(--color-overlay);
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 100;
-    opacity: 0;
-    visibility: hidden;
-    transition:
-      opacity 0.3s ease,
-      visibility 0.3s ease;
-  }
-}
-
-.body {
-  &--close {
-    height: 100vh;
-    overflow-y: hidden;
-  }
-
-  &--modal {
-    &::after {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-}
-
-#root {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.main {
-  flex: 1 0 auto;
-}
-
-.wrapper {
-  min-width: 340px;
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: var(--wrapper-padding);
-  padding-right: var(--wrapper-padding);
-
-  @include mixins.min-width(md) {
-    max-width: 680px;
-  }
-
-  @include mixins.min-width(lg) {
-    max-width: 1000px;
-  }
-}
-
-.scroll-block::-webkit-scrollbar {
-  -webkit-appearance: none;
-  width: 8px;
-  height: 8px;
-}
-
-// Ползунок — производная от текста, обводка — от фона: в тёмной теме
-// ползунок светлеет вместе с ней, как и остальные серые в этом файле.
-.scroll-block::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: color-mix(
-    in srgb,
-    var(--color-foreground) 24%,
-    var(--color-background)
-  );
-  box-shadow: 0 0 1px
-    color-mix(in srgb, var(--color-background) 50%, transparent);
-}
-
-a {
-  text-decoration: none;
-  transition: color 0.3s ease;
-  color: var(--color-foreground);
-}
-
-button {
-  color: var(--color-foreground);
-  font-size: var(--text-sm);
-  font-family: var(--font-sans);
-
-  &:not(:disabled) {
-    cursor: pointer;
-  }
-}
-
-img {
-  display: block;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  tr {
-    vertical-align: top;
-  }
-
-  td {
-    word-break: break-word;
-    border-top: 1px solid var(--color-border);
-    padding: 15px 0;
-  }
-
-  tr:last-of-type td {
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  th {
-    color: var(--color-muted-foreground);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    text-align: left;
-    font-weight: normal;
-    padding: 15px 0;
-  }
-}
-
-h1,
-h2,
-h3 {
-  text-align: left;
-  font-weight: 900;
-}
-
-h1 {
-  font-size: var(--text-2xl);
-  line-height: var(--text-2xl--line-height);
-
-  @include mixins.min-width(md) {
-    font-size: var(--text-3xl);
-    line-height: var(--text-3xl--line-height);
-  }
-}
-
-h2 {
-  font-size: var(--text-2xl);
-  line-height: var(--text-2xl--line-height);
-}
-
-h3 {
-  font-size: var(--text-lg);
-  line-height: var(--text-lg--line-height);
-}
-
-h4 {
-  font-size: var(--text-sm);
-  line-height: var(--text-sm--line-height);
-}
+// База приложения. Шрифт Inter подключает хост — файлы лежат в splittest-frontend/src/app/fonts.
+// Токены (`--color-*`) подключает вход пакета, этот файл их не эмитит.
+@use './mixins.scss' as mixins;
+
+:root {
+  --window-max-height: 100vh;
+  --wrapper-padding: 20px;
+
+  @include mixins.min-width(md) {
+    --wrapper-padding: 30px;
+  }
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+* {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+html,
+body {
+  height: 100%;
+  scrollbar-gutter: stable;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--color-foreground);
+  background-color: var(--color-background);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
+  font-weight: 400;
+
+  &::after {
+    content: '';
+    display: block;
+    background-color: var(--color-overlay);
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease;
+  }
+}
+
+.body {
+  &--close {
+    height: 100vh;
+    overflow-y: hidden;
+  }
+
+  &--modal {
+    &::after {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.main {
+  flex: 1 0 auto;
+}
+
+.wrapper {
+  min-width: 340px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--wrapper-padding);
+  padding-right: var(--wrapper-padding);
+
+  @include mixins.min-width(md) {
+    max-width: 680px;
+  }
+
+  @include mixins.min-width(lg) {
+    max-width: 1000px;
+  }
+}
+
+.scroll-block::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 8px;
+  height: 8px;
+}
+
+// Ползунок — производная от текста, обводка — от фона: в тёмной теме
+// ползунок светлеет вместе с ней, как и остальные серые в этом файле.
+.scroll-block::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: color-mix(
+    in srgb,
+    var(--color-foreground) 24%,
+    var(--color-background)
+  );
+  box-shadow: 0 0 1px
+    color-mix(in srgb, var(--color-background) 50%, transparent);
+}
+
+a {
+  text-decoration: none;
+  transition: color 0.3s ease;
+  color: var(--color-foreground);
+}
+
+button {
+  color: var(--color-foreground);
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+
+  tr {
+    vertical-align: top;
+  }
+
+  td {
+    word-break: break-word;
+    border-top: 1px solid var(--color-border);
+    padding: 15px 0;
+  }
+
+  tr:last-of-type td {
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  th {
+    color: var(--color-muted-foreground);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    text-align: left;
+    font-weight: normal;
+    padding: 15px 0;
+  }
+}
+
+h1,
+h2,
+h3 {
+  text-align: left;
+  font-weight: 900;
+}
+
+h1 {
+  font-size: var(--text-2xl);
+  line-height: var(--text-2xl--line-height);
+
+  @include mixins.min-width(md) {
+    font-size: var(--text-3xl);
+    line-height: var(--text-3xl--line-height);
+  }
+}
+
+h2 {
+  font-size: var(--text-2xl);
+  line-height: var(--text-2xl--line-height);
+}
+
+h3 {
+  font-size: var(--text-lg);
+  line-height: var(--text-lg--line-height);
+}
+
+h4 {
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
+}

package/dist/styles/mixins.scss

@@ -1,51 +1,51 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:math';
-@use 'sass:meta';
-
-// Брейкпоинты для адаптивной вёрстки и единственный их источник: vars.scss
-// генерирует из этого же списка --breakpoint-*. Отдельный список нужен потому,
-// что в @media custom properties не работают.
-$breakpoints: (
-  sm: 480px,
-  md: 680px,
-  lg: 1000px,
-  xl: 1200px,
-);
-
-// Единицы, которые понимает @media. Проверяем их, потому что sass разбирает
-// имя вроде `2xl` как число 2 с единицей xl: без проверки оно уехало бы в
-// @media как есть и правило молча пропало бы.
-$-length-units: 'px', 'em', 'rem';
-
-// Имя брейкпоинта или произвольный размер: breakpoint(md), breakpoint(900px).
-// Список проверяем первым, иначе имя, начинающееся с цифры, до него не дойдёт.
-@function breakpoint($point) {
-  @if map.has-key($breakpoints, $point) {
-    @return map.get($breakpoints, $point);
-  }
-
-  @if meta.type-of($point) ==
-    'number' and
-    list.index($-length-units, math.unit($point))
-  {
-    @return $point;
-  }
-
-  @error 'Нет брейкпоинта «#{$point}». Есть: #{map.keys($breakpoints)} или размер в px, em, rem.';
-}
-
-// От брейкпоинта и шире, включая его.
-@mixin min-width($point) {
-  @media (min-width: breakpoint($point)) {
-    @content;
-  }
-}
-
-// Уже брейкпоинта, не включая его: граница 679.98px, а не 680px, иначе на
-// ровно 680px сработали бы оба правила сразу.
-@mixin max-width($point) {
-  @media (max-width: (breakpoint($point) - 0.02px)) {
-    @content;
-  }
-}
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+
+// Брейкпоинты для адаптивной вёрстки и единственный их источник: vars.scss
+// генерирует из этого же списка --breakpoint-*. Отдельный список нужен потому,
+// что в @media custom properties не работают.
+$breakpoints: (
+  sm: 480px,
+  md: 680px,
+  lg: 1000px,
+  xl: 1200px,
+);
+
+// Единицы, которые понимает @media. Проверяем их, потому что sass разбирает
+// имя вроде `2xl` как число 2 с единицей xl: без проверки оно уехало бы в
+// @media как есть и правило молча пропало бы.
+$-length-units: 'px', 'em', 'rem';
+
+// Имя брейкпоинта или произвольный размер: breakpoint(md), breakpoint(900px).
+// Список проверяем первым, иначе имя, начинающееся с цифры, до него не дойдёт.
+@function breakpoint($point) {
+  @if map.has-key($breakpoints, $point) {
+    @return map.get($breakpoints, $point);
+  }
+
+  @if meta.type-of($point) ==
+    'number' and
+    list.index($-length-units, math.unit($point))
+  {
+    @return $point;
+  }
+
+  @error 'Нет брейкпоинта «#{$point}». Есть: #{map.keys($breakpoints)} или размер в px, em, rem.';
+}
+
+// От брейкпоинта и шире, включая его.
+@mixin min-width($point) {
+  @media (min-width: breakpoint($point)) {
+    @content;
+  }
+}
+
+// Уже брейкпоинта, не включая его: граница 679.98px, а не 680px, иначе на
+// ровно 680px сработали бы оба правила сразу.
+@mixin max-width($point) {
+  @media (max-width: (breakpoint($point) - 0.02px)) {
+    @content;
+  }
+}