pxd 0.0.55 → 0.0.61

package/dist/components/carousel-group/index.vue

@@ -1,368 +0,0 @@
-<script setup>
-import ChevronRightIcon from "@gdsicon/vue/chevron-right";
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
-import { usePointerGesture } from "../../composables/use-pointer-gesture";
-import { provideCarouselGroupContext } from "../../contexts/carousel";
-import { getCssUnitValue } from "../../utils/format";
-import { throttle } from "../../utils/throttle";
-defineOptions({
-  name: "PCarouselGroup"
-});
-const props = defineProps({
-  index: { type: Number, required: false, default: 0 },
-  loop: { type: Boolean, required: false, default: true },
-  arrow: { type: Boolean, required: false, default: true },
-  height: { type: [Number, String], required: false, default: 180 },
-  autoplay: { type: Boolean, required: false, default: true },
-  interval: { type: Number, required: false, default: 3e3 },
-  indicator: { type: Boolean, required: false, default: true },
-  direction: { type: String, required: false, default: "horizontal" },
-  indicatorType: { type: String, required: false, default: "line" },
-  indicatorPosition: { type: String, required: false, default: "bottom" },
-  pauseOnHover: { type: Boolean, required: false, default: true },
-  toggleOnWheel: { type: Boolean, required: false }
-});
-const emits = defineEmits(["change"]);
-const THROTTLE_INTERVALS = 550;
-const TRANSITION_CLASSES = ["transition-transform", "duration-500"];
-let autoPlayRafId = null;
-let autoPlaySession = 0;
-let isPointerEntering = false;
-const carousels = ref([]);
-const sliderRef = shallowRef();
-const virtualIndex = shallowRef(props.index);
-const correctIndex = computed(() => {
-  const index = virtualIndex.value;
-  if (index >= carousels.value.length) {
-    return 0;
-  }
-  if (index <= -1) {
-    return carousels.value.length - 1;
-  }
-  return index;
-});
-const computedStyle = computed(() => {
-  const translateValue = virtualIndex.value * -100;
-  const styles = {
-    transform: props.direction === "horizontal" ? `translateX(${translateValue}%)` : `translateY(${translateValue}%)`
-  };
-  return styles;
-});
-function translateItems() {
-  carousels.value.forEach((carousel, index) => {
-    carousel.translateItem(index, virtualIndex.value);
-  });
-}
-const onToggleClick = throttle(
-  (delta) => {
-    const length = carousels.value.length;
-    if (length === 0) {
-      return;
-    }
-    if (props.loop) {
-      virtualIndex.value += delta;
-      translateItems();
-    } else {
-      virtualIndex.value = Math.max(0, Math.min(virtualIndex.value + delta, length - 1));
-    }
-    emits("change", correctIndex.value);
-    nextTick(onPointerLeave);
-  },
-  THROTTLE_INTERVALS,
-  { edges: ["leading"] }
-);
-function onWheelToggle(ev) {
-  if (!props.toggleOnWheel) {
-    return;
-  }
-  const length = carousels.value.length;
-  if (length <= 1) {
-    return;
-  }
-  const delta = ev.deltaY > 0 ? 1 : -1;
-  const indexBefore = virtualIndex.value;
-  const lastIndex = length - 1;
-  if (!props.loop) {
-    const isAtFirstAndGoPrev = indexBefore <= 0 && delta < 0;
-    const isAtLastAndGoNext = indexBefore >= lastIndex && delta > 0;
-    if (isAtFirstAndGoPrev || isAtLastAndGoNext) {
-      return;
-    }
-  }
-  if (ev.cancelable) {
-    ev.preventDefault();
-  }
-  onToggleClick(delta);
-}
-function resetContainerPosition(resetIndex) {
-  const containerClassList = sliderRef.value.classList;
-  containerClassList.remove(...TRANSITION_CLASSES);
-  virtualIndex.value = resetIndex;
-  translateItems();
-  setTimeout(() => {
-    containerClassList.add(...TRANSITION_CLASSES);
-  }, 0);
-}
-function onTransitionsEnd(ev) {
-  if (ev.propertyName !== "transform" || ev.target !== sliderRef.value) {
-    return;
-  }
-  if (!props.loop) {
-    return;
-  }
-  if (virtualIndex.value >= carousels.value.length) {
-    resetContainerPosition(0);
-  } else if (virtualIndex.value <= -1) {
-    resetContainerPosition(carousels.value.length - 1);
-  }
-}
-function clearAutoPlayTimer() {
-  autoPlaySession++;
-  if (autoPlayRafId != null) {
-    cancelAnimationFrame(autoPlayRafId);
-    autoPlayRafId = null;
-  }
-}
-function setAutoPlayTimer() {
-  const mySession = autoPlaySession;
-  const startTime = performance.now();
-  const onAnimationFrame = () => {
-    if (mySession !== autoPlaySession || isPointerEntering) {
-      return;
-    }
-    const currentTime = performance.now();
-    const elapsedTime = currentTime - startTime;
-    if (elapsedTime >= props.interval) {
-      onToggleClick(1);
-      return;
-    }
-    autoPlayRafId = requestAnimationFrame(onAnimationFrame);
-  };
-  autoPlayRafId = requestAnimationFrame(onAnimationFrame);
-}
-function onPointerEnter() {
-  if (props.pauseOnHover) {
-    isPointerEntering = true;
-    clearAutoPlayTimer();
-  }
-}
-function onPointerLeave() {
-  isPointerEntering = false;
-  if (!props.autoplay) {
-    return;
-  }
-  clearAutoPlayTimer();
-  setAutoPlayTimer();
-}
-function onIndicatorClick(ev) {
-  clearAutoPlayTimer();
-  const targetEl = ev.target.closest("[data-index]");
-  const targetIndex = Number(targetEl?.dataset.index);
-  if (Number.isNaN(targetIndex)) {
-    return;
-  }
-  const deltaIndex = targetIndex - virtualIndex.value;
-  if (deltaIndex !== 0) {
-    onToggleClick(deltaIndex);
-  }
-  nextTick(onPointerLeave);
-}
-function registerCarousel(state) {
-  carousels.value.push(state);
-}
-function unregisterCarousel(id) {
-  carousels.value = carousels.value.filter(({ uid }) => uid !== id);
-}
-usePointerGesture(sliderRef, {
-  axis: () => props.direction === "horizontal" ? "x" : "y",
-  directionGuard: (d) => {
-    if (props.direction === "horizontal") {
-      return d === "left" || d === "right";
-    }
-    return d === "up" || d === "down";
-  },
-  onRelease(hit, dir, kind) {
-    if (!hit || !dir || kind === "longpress") {
-      return;
-    }
-    if (dir === "left" || dir === "up") {
-      onToggleClick(1);
-    } else if (dir === "right" || dir === "down") {
-      onToggleClick(-1);
-    }
-  }
-});
-provideCarouselGroupContext({
-  props,
-  carousels,
-  registerCarousel,
-  unregisterCarousel
-});
-onMounted(async () => {
-  onPointerLeave();
-  await nextTick();
-  translateItems();
-});
-onBeforeUnmount(() => {
-  clearAutoPlayTimer();
-  carousels.value = [];
-});
-</script>
-
-<template>
-  <div
-    tabindex="-1"
-    :data-direction="direction"
-    :data-indicator-type="indicatorType"
-    :data-indicator-position="indicatorPosition"
-    class="pxd-carousel-group group relative w-full touch-none overflow-hidden"
-    :style="{ height: getCssUnitValue(height) }"
-    @pointerenter="onPointerEnter"
-    @pointerleave="onPointerLeave"
-    @wheel="onWheelToggle"
-  >
-    <div class="pxd-carousel-group--container size-full">
-      <div
-        ref="sliderRef"
-        class="pxd-carousel-group--slider translate-z-0 size-full"
-        :style="computedStyle"
-        :class="TRANSITION_CLASSES"
-        @transitionend="onTransitionsEnd"
-      >
-        <slot />
-      </div>
-    </div>
-
-    <div
-      v-if="indicator"
-      class="pxd-carousel-group--indicator gap-2 absolute flex w-max items-center"
-      @click="onIndicatorClick"
-    >
-      <slot name="indicator" :current="correctIndex + 1" :total="carousels.length">
-        <button
-          v-for="(_, i) in carousels.length"
-          :key="i"
-          :data-index="i"
-          class="pxd-carousel-group--indicator-item relative h-(--carousel-dot-height) w-(--carousel-dot-width) cursor-pointer appearance-none rounded-full bg-gray-alpha-200 font-inherit self-focus-ring outline-none hover:bg-gray-alpha-400 motion-safe:transition-colors"
-          :class="{ 'bg-primary!': i === correctIndex }"
-        />
-      </slot>
-    </div>
-
-    <div v-if="arrow" class="pxd-carousel-group--toggler gap-2 absolute flex">
-      <button
-        type="button"
-        aria-label="Carousel arrow left"
-        class="pxd-carousel-group--prev-btn p-1.5 cursor-pointer appearance-none rounded-md bg-gray-alpha-100 font-inherit text-foreground-secondary self-focus-ring outline-none hover:bg-background-hover active:bg-background-active disabled:pointer-events-none motion-safe:transition-colors"
-        @click="onToggleClick(-1)"
-      >
-        <ChevronRightIcon class="rotate-180" />
-      </button>
-
-      <button
-        type="button"
-        aria-label="Carousel arrow right"
-        class="pxd-carousel-group--next-btn p-1.5 cursor-pointer appearance-none rounded-md bg-gray-alpha-100 font-inherit text-foreground-secondary self-focus-ring outline-none hover:bg-background-hover active:bg-background-active disabled:pointer-events-none motion-safe:transition-colors"
-        @click="onToggleClick(1)"
-      >
-        <ChevronRightIcon />
-      </button>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss">
-.pxd-carousel-group {
-  &[data-indicator-type='dot'] {
-    --carousel-dot-width: 8px;
-    --carousel-dot-height: 8px;
-  }
-
-  &[data-indicator-type='line'] {
-    &[data-indicator-position='top'],
-    &[data-indicator-position='bottom'] {
-      --carousel-dot-width: 16px;
-      --carousel-dot-height: 4px;
-    }
-
-    &[data-indicator-position='left'],
-    &[data-indicator-position='right'] {
-      --carousel-dot-width: 4px;
-      --carousel-dot-height: 16px;
-    }
-  }
-
-  &[data-indicator-position='top'] {
-    .pxd-carousel-group--indicator {
-      left: 12px;
-      top: 8px;
-    }
-
-    .pxd-carousel-group--toggler {
-      right: 8px;
-      top: 8px;
-    }
-  }
-
-  &[data-indicator-position='bottom'] {
-    .pxd-carousel-group--indicator {
-      left: 12px;
-      bottom: 8px;
-    }
-
-    .pxd-carousel-group--toggler {
-      right: 8px;
-      bottom: 8px;
-    }
-  }
-
-  &[data-indicator-position='left'] {
-    .pxd-carousel-group--indicator {
-      left: 8px;
-      top: 12px;
-    }
-
-    .pxd-carousel-group--toggler {
-      left: 8px;
-      bottom: 8px;
-    }
-  }
-
-  &[data-indicator-position='right'] {
-    .pxd-carousel-group--indicator {
-      right: 8px;
-      top: 12px;
-    }
-
-    .pxd-carousel-group--toggler {
-      right: 8px;
-      bottom: 8px;
-    }
-  }
-
-  &[data-direction='horizontal'] .pxd-carousel-group--slider {
-    display: flex;
-  }
-
-  &[data-direction='vertical'] {
-    .pxd-carousel-group--prev-btn,
-    .pxd-carousel-group--next-btn {
-      transform: rotate(90deg);
-    }
-  }
-
-  &[data-indicator-position='left'],
-  &[data-indicator-position='right'] {
-    .pxd-carousel-group--indicator,
-    .pxd-carousel-group--toggler {
-      flex-direction: column;
-    }
-  }
-}
-
-.pxd-carousel-group--indicator-item::before {
-  content: '';
-  position: absolute;
-  inset: -4px;
-}
-</style>

package/dist/components/checkbox/cn.d.ts

@@ -1,67 +0,0 @@
-export declare const checkboxVariant: import("tailwind-variants").TVReturnType<{
-    checked: {
-        true: {
-            inner: string;
-        };
-        false: {
-            inner: string;
-        };
-    };
-    disabled: {
-        true: {
-            wrapper: string;
-            inner: string;
-        };
-        false: {
-            wrapper: string;
-            inner: string;
-        };
-    };
-}, {
-    wrapper: string;
-    inner: string;
-}, undefined, {
-    checked: {
-        true: {
-            inner: string;
-        };
-        false: {
-            inner: string;
-        };
-    };
-    disabled: {
-        true: {
-            wrapper: string;
-            inner: string;
-        };
-        false: {
-            wrapper: string;
-            inner: string;
-        };
-    };
-}, {
-    wrapper: string;
-    inner: string;
-}, import("tailwind-variants").TVReturnType<{
-    checked: {
-        true: {
-            inner: string;
-        };
-        false: {
-            inner: string;
-        };
-    };
-    disabled: {
-        true: {
-            wrapper: string;
-            inner: string;
-        };
-        false: {
-            wrapper: string;
-            inner: string;
-        };
-    };
-}, {
-    wrapper: string;
-    inner: string;
-}, undefined, unknown, unknown, undefined>>;

package/dist/components/checkbox/cn.js

@@ -1,31 +0,0 @@
-import { tv } from "tailwind-variants";
-export const checkboxVariant = tv({
-  slots: {
-    wrapper: "pxd-checkbox group/checkbox gap-2 inline-flex max-w-full cursor-pointer touch-manipulation items-center data-[disabled=true]:cursor-not-allowed",
-    inner: "pxd-checkbox--inner size-4 inline-flex shrink-0 transform-gpu items-center justify-center overflow-hidden rounded-sm border peer-focus-ring motion-safe:transition-colors"
-  },
-  variants: {
-    checked: {
-      true: {
-        inner: "border-primary bg-primary"
-      },
-      false: {
-        inner: "border-gray-alpha-400 bg-background-100 group-hover/checkbox:bg-gray-200"
-      }
-    },
-    disabled: {
-      true: {
-        wrapper: "is-disabled text-gray-500",
-        inner: ""
-      },
-      false: {
-        wrapper: "",
-        inner: ""
-      }
-    }
-  },
-  compoundVariants: [
-    { checked: true, disabled: true, inner: "border-gray-600 bg-gray-600" },
-    { checked: false, disabled: true, inner: "border-gray-500 bg-gray-100" }
-  ]
-});

package/dist/components/chip/cn.d.ts

@@ -1,49 +0,0 @@
-export declare const chipVariant: import("tailwind-variants").TVReturnType<{
-    variant: {
-        primary: string;
-        error: string;
-        warning: string;
-        success: string;
-        secondary: string;
-    };
-    inset: {
-        true: {};
-        false: string;
-    };
-    hasLabel: {
-        true: {};
-        false: string;
-    };
-}, undefined, "pxd-chip--label text-xs top-0 right-0 absolute rounded-full border border-background-100 motion-safe:transition-all", {
-    variant: {
-        primary: string;
-        error: string;
-        warning: string;
-        success: string;
-        secondary: string;
-    };
-    inset: {
-        true: {};
-        false: string;
-    };
-    hasLabel: {
-        true: {};
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        primary: string;
-        error: string;
-        warning: string;
-        success: string;
-        secondary: string;
-    };
-    inset: {
-        true: {};
-        false: string;
-    };
-    hasLabel: {
-        true: {};
-        false: string;
-    };
-}, undefined, "pxd-chip--label text-xs top-0 right-0 absolute rounded-full border border-background-100 motion-safe:transition-all", unknown, unknown, undefined>>;

package/dist/components/chip/cn.js

@@ -1,26 +0,0 @@
-import { tv } from "tailwind-variants";
-export const chipVariant = tv({
-  base: "pxd-chip--label text-xs top-0 right-0 absolute rounded-full border border-background-100 motion-safe:transition-all",
-  variants: {
-    variant: {
-      primary: "bg-primary text-background-100",
-      error: "bg-red-700 text-background-100 dark:text-gray-1000",
-      warning: "bg-amber-700 text-gray-1000 dark:text-gray-100",
-      success: "bg-green-700 text-background-100 dark:text-gray-1000",
-      secondary: "bg-gray-700 text-background-100 dark:text-gray-1000"
-    },
-    inset: {
-      true: {},
-      false: "translate-x-1/2 -translate-y-1/3"
-    },
-    hasLabel: {
-      true: {},
-      false: "size-(--chip-size)"
-    }
-  },
-  defaultVariants: {
-    variant: "primary",
-    inset: false,
-    hasLabel: false
-  }
-});

package/dist/components/choicebox-group/index.vue

@@ -1,65 +0,0 @@
-<script setup>
-import { computed, markRaw, useAttrs } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import {
-  provideChoiceboxGroupContext,
-  provideChoiceboxGroupModelValue
-} from "../../contexts/choicebox";
-import PCheckboxGroup from "../checkbox-group/index.vue";
-import PChoicebox from "../choicebox/index.vue";
-import PRadioGroup from "../radio-group/index.vue";
-defineOptions({
-  name: "PChoiceboxGroup",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
-});
-const props = defineProps({
-  label: { type: [String, Number, Array, null], required: false },
-  multiple: { type: Boolean, required: false },
-  required: { type: Boolean, required: false, default: false },
-  disabled: { type: Boolean, required: false, default: false },
-  options: { type: Array, required: false },
-  modelValue: { type: [String, Number, Boolean, Array], required: false, default: "" }
-});
-const emits = defineEmits(["change", "update:modelValue"]);
-const attrs = useAttrs();
-const modelValue = useModelValue(props, emits);
-const renderComponent = computed(() => markRaw(props.multiple ? PCheckboxGroup : PRadioGroup));
-const computedAttrs = computed(() => {
-  const { disabled, multiple, required, options } = props;
-  const { class: classes, ...rest } = attrs;
-  return {
-    role: multiple ? "group" : "radiogroup",
-    "aria-required": required,
-    "aria-multiselectable": multiple,
-    gap: attrs.gap || "3",
-    disabled,
-    required,
-    options,
-    ...rest
-  };
-});
-provideChoiceboxGroupContext(props);
-provideChoiceboxGroupModelValue(modelValue);
-</script>
-
-<template>
-  <Component
-    :is="renderComponent"
-    v-model="modelValue"
-    class="pxd-choicebox-group w-full"
-    v-bind="computedAttrs"
-  >
-    <slot>
-      <PChoicebox
-        v-for="option in options"
-        :key="option.value"
-        v-model="modelValue"
-        v-bind="option"
-      />
-    </slot>
-  </Component>
-</template>

package/dist/components/error/cn.d.ts

@@ -1,22 +0,0 @@
-export declare const errorVariant: import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "pxd-error flex text-red-900", {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "pxd-error flex text-red-900", unknown, unknown, undefined>>;

package/dist/components/error/cn.js

@@ -1,15 +0,0 @@
-import { tv } from "tailwind-variants";
-export const errorVariant = tv({
-  base: "pxd-error flex text-red-900",
-  variants: {
-    size: {
-      xs: "text-xs [--mt:2px]",
-      sm: "text-13px [--mt:2px]",
-      md: "text-sm [--mt:2px]",
-      lg: "text-base [--mt:4px]"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});