@rynt/sdk 0.9.53

package/src/shared/ui/navigation/Tabs.vue

@@ -0,0 +1,37 @@
+<template>
+  <div :class="tabsClasses">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    /** default: нижний бордер; pills: секции форм; rail: сайд нав как на zaklauncher.xyz */
+    variant?: 'default' | 'pills' | 'rail';
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    variant: 'default',
+    orientation: 'horizontal',
+  });
+
+  const tabsClasses = computed(() => {
+    if (props.variant === 'rail') {
+      return cn('rnt-rail-tabs', props.class);
+    }
+
+    const baseClasses = 'flex';
+
+    const orientationClasses = {
+      horizontal: 'gap-1 border-b border-border',
+      vertical: 'flex-col gap-1',
+    };
+
+    return cn(baseClasses, orientationClasses[props.orientation], props.class);
+  });
+</script>

package/src/shared/ui/navigation/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue';
+export { default as Tab } from './Tab.vue';
+export { default as NavItem } from './NavItem.vue';
+

package/src/shared/ui/primitives/Action.vue

@@ -0,0 +1,19 @@
+<template>
+  <button ref="element" v-bind="$attrs">
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLButtonElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/Block.vue

@@ -0,0 +1,28 @@
+<template>
+  <component :is="as" ref="element" v-bind="$attrs">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+withDefaults(
+  defineProps<{
+    as?: 'div' | 'section' | 'article' | 'main' | 'header' | 'footer' | 'aside';
+  }>(),
+  {
+    as: 'div',
+  },
+);
+
+const element = ref<HTMLElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/CanvasView.vue

@@ -0,0 +1,19 @@
+<template>
+  <canvas ref="element" v-bind="$attrs">
+    <slot />
+  </canvas>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLCanvasElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/Control.vue

@@ -0,0 +1,24 @@
+<template>
+  <input ref="element" v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLInputElement | null>(null);
+
+defineExpose({
+  element,
+  click: () => element.value?.click(),
+  get files() {
+    return element.value?.files ?? null;
+  },
+  get value() {
+    return element.value?.value;
+  },
+});
+</script>

package/src/shared/ui/primitives/ControlSelect.vue

@@ -0,0 +1,19 @@
+<template>
+  <select ref="element" v-bind="$attrs">
+    <slot />
+  </select>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLSelectElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/ControlTextarea.vue

@@ -0,0 +1,17 @@
+<template>
+  <textarea ref="element" v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLTextAreaElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/FieldLabel.vue

@@ -0,0 +1,19 @@
+<template>
+  <label ref="element" v-bind="$attrs">
+    <slot />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLLabelElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/Form.vue

@@ -0,0 +1,19 @@
+<template>
+  <form ref="element" v-bind="$attrs">
+    <slot />
+  </form>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLFormElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/Heading.vue

@@ -0,0 +1,29 @@
+<template>
+  <component :is="tag" ref="element" v-bind="$attrs">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+  }>(),
+  {
+    level: 2,
+  },
+);
+
+const element = ref<HTMLHeadingElement | null>(null);
+const tag = computed(() => `h${props.level}`);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/Image.vue

@@ -0,0 +1,17 @@
+<template>
+  <img ref="element" v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLImageElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/LineBreak.vue

@@ -0,0 +1,3 @@
+<template>
+  <br />
+</template>

package/src/shared/ui/primitives/Link.vue

@@ -0,0 +1,19 @@
+<template>
+  <a ref="element" v-bind="$attrs">
+    <slot />
+  </a>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLAnchorElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/List.vue

@@ -0,0 +1,28 @@
+<template>
+  <component :is="ordered ? 'ol' : 'ul'" ref="element" v-bind="$attrs">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+withDefaults(
+  defineProps<{
+    ordered?: boolean;
+  }>(),
+  {
+    ordered: false,
+  },
+);
+
+const element = ref<HTMLUListElement | HTMLOListElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/ListItem.vue

@@ -0,0 +1,19 @@
+<template>
+  <li ref="element" v-bind="$attrs">
+    <slot />
+  </li>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLLIElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/OptionItem.vue

@@ -0,0 +1,19 @@
+<template>
+  <option ref="element" v-bind="$attrs">
+    <slot />
+  </option>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLOptionElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/Text.vue

@@ -0,0 +1,28 @@
+<template>
+  <component :is="as" ref="element" v-bind="$attrs">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+withDefaults(
+  defineProps<{
+    as?: 'p' | 'span' | 'strong' | 'code';
+  }>(),
+  {
+    as: 'p',
+  },
+);
+
+const element = ref<HTMLElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/VideoView.vue

@@ -0,0 +1,19 @@
+<template>
+  <video ref="element" v-bind="$attrs">
+    <slot />
+  </video>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const element = ref<HTMLVideoElement | null>(null);
+
+defineExpose({
+  element,
+});
+</script>

package/src/shared/ui/primitives/index.ts

@@ -0,0 +1,19 @@
+export { default as Action } from './Action.vue';
+export { default as Block } from './Block.vue';
+export { default as CanvasView } from './CanvasView.vue';
+export { default as Control } from './Control.vue';
+export { default as ControlSelect } from './ControlSelect.vue';
+export { default as ControlTextarea } from './ControlTextarea.vue';
+export { default as FieldLabel } from './FieldLabel.vue';
+export { default as Form } from './Form.vue';
+export { default as Heading } from './Heading.vue';
+export { default as Image } from './Image.vue';
+export { default as Link } from './Link.vue';
+export { default as LineBreak } from './LineBreak.vue';
+export { default as List } from './List.vue';
+export { default as ListItem } from './ListItem.vue';
+export { default as OptionItem } from './OptionItem.vue';
+export { default as Text } from './Text.vue';
+export { default as VideoView } from './VideoView.vue';
+export { resolveElement } from './resolveElement';
+export type { PrimitiveElementRef } from './resolveElement';

package/src/shared/ui/primitives/resolveElement.ts

@@ -0,0 +1,25 @@
+export type PrimitiveElementRef<T extends Element> =
+  | T
+  | { element?: T | null }
+  | null
+  | undefined;
+
+export const resolveElement = <T extends Element>(
+  value: PrimitiveElementRef<T> | PrimitiveElementRef<T>[],
+): T | null => {
+  const candidate = Array.isArray(value) ? value[0] : value;
+
+  if (!candidate) return null;
+  if (typeof Element !== 'undefined' && candidate instanceof Element)
+    return candidate;
+
+  if (
+    typeof candidate === 'object' &&
+    candidate !== null &&
+    'element' in candidate
+  ) {
+    return (candidate as { element?: T | null }).element ?? null;
+  }
+
+  return null;
+};

package/src/shared/ui/special/AngularAccent.vue

@@ -0,0 +1,106 @@
+<template>
+  <div
+    :class="accentClasses"
+    :style="accentStyle"
+  />
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    variant?: 'gradient' | 'solid';
+    position?: 'left' | 'right' | 'top' | 'bottom' | 'inset' | 'top-right';
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'indigo' | 'green' | 'purple';
+    gradient?: 'indigo-to-transparent' | 'white-to-transparent' | 'black-overlay';
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    variant: 'gradient',
+    position: 'left',
+    size: 'md',
+    color: 'indigo',
+    gradient: 'indigo-to-transparent',
+  });
+
+  const sizeMap = {
+    sm: { width: 'w-24', height: 'h-full' },
+    md: { width: 'w-32', height: 'h-full' },
+    lg: { width: 'w-40', height: 'h-full' },
+    'top-right': { width: 'w-24', height: 'h-24' },
+    inset: { width: 'w-full', height: 'h-full' },
+  };
+
+  const colorMap = {
+    indigo: 'from-primary/12 to-transparent',
+    green: 'from-green-500/10 to-transparent',
+    purple: 'from-accent-secondary/12 to-transparent',
+  };
+
+  const gradientMap = {
+    'indigo-to-transparent': 'from-primary/12 to-transparent',
+    'white-to-transparent': 'from-white/5 to-transparent',
+    'black-overlay': 'bg-foreground/20',
+  };
+
+  const clipPathMap = {
+    left: 'polygon(0 0, 100% 0, 85% 100%, 0 100%)',
+    right: 'polygon(15% 0, 100% 0, 100% 100%, 0 100%)',
+    top: 'polygon(0 0, 100% 0, 100% 85%, 0 100%)',
+    bottom: 'polygon(0 15%, 100% 0, 100% 100%, 0 100%)',
+    inset: 'none',
+    'top-right': 'polygon(30% 0, 100% 0, 100% 70%)',
+  };
+
+  const gradientDirectionMap = {
+    left: 'bg-gradient-to-r',
+    right: 'bg-gradient-to-l',
+    top: 'bg-gradient-to-b',
+    bottom: 'bg-gradient-to-t',
+  };
+
+  const accentClasses = computed(() => {
+    const baseClasses = 'absolute';
+  const positionClasses = {
+    left: 'left-0 top-0',
+    right: 'right-0 top-0',
+    top: 'top-0 left-0 w-full',
+    bottom: 'bottom-0 left-0 w-full',
+    inset: 'inset-0',
+    'top-right': 'top-0 right-0',
+  };
+
+    const variantClasses = {
+      gradient: props.gradient === 'black-overlay' 
+        ? gradientMap[props.gradient]
+        : props.gradient && gradientMap[props.gradient]
+          ? (() => {
+              const dir = props.position === 'top-right' ? 'l' : props.position === 'inset' ? 'r' : gradientDirectionMap[props.position as keyof typeof gradientDirectionMap]?.split('-')[2] || 'r';
+              return `bg-gradient-to-${dir} ${gradientMap[props.gradient]}`;
+            })()
+          : props.position in gradientDirectionMap
+            ? `${gradientDirectionMap[props.position as keyof typeof gradientDirectionMap]} ${colorMap[props.color]}`
+            : `bg-gradient-to-r ${colorMap[props.color]}`,
+      solid: `bg-${props.color}-500/10`,
+    };
+
+    const size = props.position === 'inset' || props.position === 'top-right'
+      ? sizeMap[props.position]
+      : sizeMap[props.size];
+
+    return cn(
+      baseClasses,
+      positionClasses[props.position],
+      size.width,
+      size.height,
+      variantClasses[props.variant]
+    );
+  });
+
+  const accentStyle = computed(() => {
+    return { 'clip-path': clipPathMap[props.position] };
+  });
+</script>
+