rxn-ui 0.4.0

package/src/components/input-base/types.ts

@@ -0,0 +1,7 @@
+export type InputProps = {
+  disabled?: boolean
+  cls?: { container?: string; error?: string; input?: string }
+  error?: string
+  defaultErrorMessage?: string
+  isPending?: boolean
+}

package/src/components/range-base/RangeBase.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useVars } from '../../composables/useWars'
+import { cssSizeToNumber, cssValueToUnit } from '../../utils/cssParser'
+import { mergeDefaultProps } from '../../utils/mergeDefaultProps'
+import type { RangeBaseProps, RangeBaseVars } from './types'
+
+const {
+  min = 0,
+  max = 100,
+  variant = 'default',
+  hasThumb = true,
+  isVertical = false,
+  ...props
+} = defineProps<RangeBaseProps>()
+
+const vars = computed(() =>
+  mergeDefaultProps<RangeBaseVars>({ thumb: { size: '2rem' } }, props.vars),
+)
+
+const range = defineModel<number>({ default: 50 })
+
+const progressPercent = computed(() => {
+  const percent = ((range.value - min) / (max - min)) * 100
+  const thumbSize = cssSizeToNumber(vars.value.thumb?.size)
+  const unit = cssValueToUnit(vars.value.thumb?.size)
+  const thumbOffset = (0.5 - percent / 100) * thumbSize
+
+  return hasThumb ? `calc(${percent}% + ${thumbOffset}${unit})` : `${percent}%`
+})
+
+const progressBackground = computed(() => {
+  const color = variant === 'secondary' ? 'var(--muted)' : 'var(--primary)'
+  const fade = `oklch(from ${color} l c h / 0.75)`
+  return `linear-gradient(${isVertical ? 'to bottom' : 'to left'}, ${color}, ${fade})`
+})
+
+const thumbSize = computed(() => {
+  if (!hasThumb) return '0px'
+  return typeof vars.value.thumb?.size === 'number'
+    ? `${vars.value.thumb?.size}px`
+    : vars.value.thumb?.size
+})
+
+const varsStyle = useVars('range', [vars.value])
+
+const progressStyle = computed(() => {
+  return isVertical
+    ? { height: progressPercent.value, width: '100%' }
+    : { width: progressPercent.value, height: '100%' }
+})
+</script>
+
+<template>
+  <div :class="['container', { 'is-vertical': isVertical }, cls?.container]" :style="varsStyle">
+    <div :class="['wrapper', cls?.wrapper]">
+      <div :class="['progress', cls?.progress]" :style="progressStyle" />
+
+      <input
+        v-model="range"
+        type="range"
+        :min="min"
+        :max="max"
+        :class="['range-input', { 'hide-thumb': !hasThumb }, cls?.input]"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+}
+.container.is-vertical {
+  width: fit-content;
+  height: stretch;
+  display: flex;
+  flex-direction: vertical;
+  align-items: end;
+  & .wrapper {
+    width: var(--range-progress-width, 1.6rem);
+    height: var(--range-progress-height);
+    /* Меняем ориентацию через writing-mode, но БЕЗ appearance: slider-vertical */
+    writing-mode: bt-lr;
+    writing-mode: vertical-lr;
+    direction: rtl;
+  }
+}
+.wrapper {
+  box-shadow: var(--shadow-inset);
+  border-radius: calc(1px * Infinity);
+  width: var(--range-progress-width, 100%);
+  height: var(--range-progress-height, 1.6rem);
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: var(--background);
+  transition:
+    background-color 250ms ease-out,
+    box-shadow 250ms ease-out;
+}
+.progress {
+  border-radius: calc(1px * Infinity);
+  background: v-bind(progressBackground);
+  position: absolute;
+}
+
+.range-input {
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: calc(1px * Infinity);
+  outline-offset: 0.4rem;
+  &:focus-visible {
+    outline: 0.2rem solid var(--foreground);
+  }
+}
+.range-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  cursor: grab;
+  height: v-bind(thumbSize);
+  aspect-ratio: 1;
+  border-radius: calc(1px * Infinity);
+  background-color: var(--background);
+  border: 1px solid var(--color-highlight);
+  box-shadow: var(--shadow-inset);
+  transition:
+    background-color 250ms ease-out,
+    box-shadow 250ms ease-out;
+}
+.range-input::-moz-range-thumb {
+  -webkit-appearance: none;
+  cursor: grab;
+  height: v-bind(thumbSize);
+  aspect-ratio: 1;
+  border-radius: calc(1px * Infinity);
+  background-color: var(--background);
+  border: 1px solid var(--color-highlight);
+  box-shadow: var(--shadow-inset);
+  transition:
+    background-color 250ms ease-out,
+    box-shadow 250ms ease-out;
+}
+.range-input.hide-thumb::-webkit-slider-thumb {
+  cursor: default;
+  visibility: hidden;
+}
+.range-input.hide-thumb::-moz-range-thumb {
+  cursor: default;
+  visibility: hidden;
+}
+.range-input:not(.hide-thumb):active::-webkit-slider-thumb {
+  cursor: grabbing;
+}
+
+.range-input:active::-webkit-slider-thumb {
+  box-shadow: var(--shadow-raised);
+}
+.range-input:active::-moz-range-thumb {
+  box-shadow: var(--shadow-raised);
+}
+</style>

package/src/components/range-base/RangeOutput.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{ range: number; max: number }>()
+</script>
+
+<template>
+  <output class="output" :style="{ minWidth: `${String(max).length}ch` }">
+    {{ range }}
+  </output>
+</template>
+
+<style scoped>
+.output {
+  font-size: 1.5rem;
+  font-weight: bold;
+  font-variant-numeric: tabular-nums;
+}
+</style>

package/src/components/range-base/types.ts

@@ -0,0 +1,16 @@
+import { type CSSProperties } from 'vue'
+
+export type RangeBaseVars = {
+  progress?: { height?: CSSProperties['height']; width?: CSSProperties['width'] }
+  thumb?: { size?: CSSProperties['height'] }
+}
+
+export type RangeBaseProps = {
+  min?: number
+  max?: number
+  variant?: 'default' | 'secondary'
+  hasThumb?: boolean
+  cls?: { input?: string; progress?: string; wrapper?: string; container?: string }
+  vars?: RangeBaseVars
+  isVertical?: boolean
+}

package/src/components/switch-base/SwitchBase.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+const modelValue = defineModel({ default: false })
+defineProps<{ isDisabled?: boolean }>()
+</script>
+
+<template>
+  <label :class="['wrapper', { 'is-disabled': isDisabled }]">
+    <input type="checkbox" v-model="modelValue" />
+    <div class="switch">
+      <div class="thumb" />
+    </div>
+    <slot />
+  </label>
+</template>
+
+<style scoped>
+.wrapper {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+input {
+  appearance: none;
+  &:focus-visible + .switch {
+    outline: 0.2rem solid var(--foreground);
+    outline-offset: 0.4rem;
+  }
+  &:checked + .switch {
+    background-color: var(--primary);
+    border: 0.1rem solid var(--primary);
+  }
+  &:checked + .switch .thumb {
+    transform: translateX(2.6rem);
+    &::before {
+      background-color: var(--primary);
+    }
+  }
+}
+
+.switch {
+  height: 2.2rem;
+  width: 4.8rem;
+  border-radius: calc(1px * Infinity);
+  background-color: var(--background);
+  box-shadow: var(--shadow-inset);
+  border: 0.1rem solid var(--color-highlight);
+  transition:
+    background-color 250ms ease-out,
+    box-shadow 250ms ease-out;
+}
+
+.thumb {
+  display: grid;
+  place-content: center;
+  height: 2rem;
+  aspect-ratio: 1;
+  border-radius: calc(1px * Infinity);
+  background-color: var(--background);
+  box-shadow: var(--shadow-inset);
+  transform: translateX(0);
+  transition: all 200ms ease-out;
+  border: 0.1rem solid var(--color-highlight);
+  &::before {
+    content: '';
+    width: 0.4rem;
+    aspect-ratio: 1;
+    background-color: var(--muted-foreground);
+    border-radius: calc((1px * Infinity));
+  }
+}
+</style>

package/src/components/tabs/TabsBase.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { provide, readonly, ref } from 'vue'
+
+import { TabsKey } from './context'
+
+const props = defineProps<{ defaultValue?: string }>()
+const activeTab = ref(props.defaultValue || '')
+
+const setActiveTab = (value: string) => (activeTab.value = value)
+
+provide(TabsKey, {
+  activeTab: readonly(activeTab),
+  setActiveTab,
+})
+</script>
+
+<template>
+  <section class="tabs-base">
+    <slot />
+  </section>
+</template>

package/src/components/tabs/TabsIndicator.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="indicator">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.indicator {
+  position: absolute;
+  border-radius: var(--radius-sm);
+  background-color: var(--background);
+  box-shadow: var(--shadow-raised);
+  transition: all 0.2s;
+  border: 0.1rem solid var(--background);
+}
+</style>

package/src/components/tabs/TabsList.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="list">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.list {
+  position: relative;
+  padding: 0.4rem;
+  display: inline-flex;
+  height: 4.8rem;
+  align-items: center;
+  justify-content: center;
+  gap: 1.6rem;
+  border-radius: var(--radius-2xl);
+  background: linear-gradient(
+    to left,
+    var(--background),
+    oklch(from var(--highlight) l c h / 0.75)
+  );
+  color: var(--muted-foreground);
+  box-shadow: var(--shadow-raised);
+  border: 0.3rem solid var(--background);
+}
+</style>

package/src/components/tabs/TabsPanel.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { useTabsContext } from './context'
+
+const props = defineProps<{ value: string }>()
+const { activeTab } = useTabsContext()
+
+const isActive = computed(() => activeTab.value === props.value)
+</script>
+
+<template>
+  <section v-if="isActive" class="content">
+    <slot />
+  </section>
+</template>

package/src/components/tabs/TabsTab.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { useTabsContext } from './context'
+
+const props = defineProps<{ value: string }>()
+const { activeTab, setActiveTab } = useTabsContext()
+
+const selectTab = () => setActiveTab(props.value)
+
+const isSelected = computed(() => activeTab.value === props.value || null)
+</script>
+
+<template>
+  <button :data-selected="isSelected" @click="selectTab" type="button">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: var(--radius-xl);
+  padding: 0.8rem 1.6rem;
+  transition:
+    color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+  position: relative;
+  z-index: 10;
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  &:focus-visible {
+    outline: 0.2rem solid var(--foreground);
+    outline-offset: 0.2rem;
+  }
+  &:hover {
+    color: var(--foreground);
+  }
+  &[data-selected] {
+    background-color: var(--background);
+    color: var(--foreground);
+    box-shadow: var(--shadow-inset);
+  }
+}
+</style>

package/src/components/tabs/context.ts

@@ -0,0 +1,12 @@
+import { type InjectionKey, inject } from 'vue'
+
+import type { TabsContext } from './types'
+
+export const TabsKey: InjectionKey<TabsContext> = Symbol('TabsContext')
+
+export function useTabsContext() {
+  const context = inject(TabsKey)
+  if (!context) throw new Error('Tabs components must be used within TabsBase')
+
+  return context
+}

package/src/components/tabs/types.ts

@@ -0,0 +1,6 @@
+import type { Ref } from 'vue'
+
+export type TabsContext = {
+  activeTab: Readonly<Ref<string>>
+  setActiveTab: (value: string) => void
+}

package/src/components/theme-toggle/ThemeToggle.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import MoonIcon from '../assets/MoonIcon.vue'
+import SunIcon from '../assets/SunIcon.vue'
+import useTheme from '../composables/useTheme'
+import ButtonBase from './button-base/ButtonBase.vue'
+
+const { currentTheme, toggleTheme } = useTheme()
+</script>
+
+<template>
+  <ButtonBase
+    @click="toggleTheme()"
+    :aria-label="`Switch to ${currentTheme === 'dark' ? 'light' : 'dark'} theme`"
+    class="theme-toggle-btn"
+    shape="radius-circle"
+  >
+    <MoonIcon v-if="currentTheme === 'dark'" class="moon" />
+    <SunIcon v-else />
+  </ButtonBase>
+</template>
+
+<style scoped>
+.theme-toggle-btn {
+  font-size: 1.5rem;
+}
+.moon {
+  height: 2rem;
+  width: 2rem;
+}
+</style>

package/src/styles/style.css

@@ -0,0 +1,136 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@14..36,300;14..36,400;14..36,500;14..36,600;14..36,700&display=swap');
+@import 'variables.css';
+@layer theme, base, components, utilities;
+
+@layer base {
+  :root {
+    &[data-theme='light'] {
+      color-scheme: light;
+    }
+    &[data-theme='dark'] {
+      color-scheme: dark;
+    }
+
+    color-scheme: light dark;
+    scroll-behavior: smooth;
+    font-size: 10px;
+    font-family: 'DM Sans', sans-serif;
+  }
+
+  body {
+    background: var(--background);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    font-size: 1.6rem;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :disabled,
+  [aria-busy='true'],
+  .is-disabled {
+    pointer-events: none;
+    color: var(--color-neutral-500);
+    opacity: 0.45;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  img,
+  picture,
+  svg,
+  video {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+}
+
+@layer components {
+  h1 {
+    font-size: var(--text-2xl);
+  }
+  h2 {
+    font-size: var(--text-xl);
+  }
+  h3 {
+    font-size: var(--text-lg);
+  }
+  ::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  .font-xs {
+    font-size: var(--text-xs);
+    /* line-height: var(--leading-relaxed); */
+  }
+  .font-sm {
+    font-size: var(--text-sm);
+    /* line-height: var(--leading-normal); */
+  }
+  .font-base {
+    font-size: var(--text-base);
+    /* line-height: var(--leading-normal); */
+  }
+  .font-lg {
+    font-size: var(--text-lg);
+    /* line-height: var(--leading-normal); */
+  }
+  .font-xl {
+    font-size: var(--text-xl);
+    /* line-height: var(--leading-snug); */
+  }
+  .font-2xl {
+    font-size: var(--text-2xl);
+    /* line-height: var(--leading-tight); */
+  }
+  .font-3xl {
+    font-size: var(--text-3xl);
+    /* line-height: 1; */
+  }
+  .font-4xl {
+    font-size: var(--text-4xl);
+    /* line-height: 1; */
+  }
+}