pxd 0.0.61 → 0.0.62

package/dist/components/snippet/index.vue

@@ -4,6 +4,7 @@ import CopyIcon from "@gdsicon/vue/copy";
 import { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { useCopyClick } from "../../composables/use-copy-click";
+import { BASIC_MIN_HEIGHTS } from "../../constants/size";
 import { useConfigProvider } from "../../contexts/config-provider";
 import { getCssUnitValue, isTruthyProp, toArray } from "../../utils/format";
 defineOptions({
@@ -19,12 +20,12 @@ const props = defineProps({
 });
 const emits = defineEmits(["copy"]);
 const snippetVariant = tv({
-  base: "pxd-snippet pr-12 relative flex items-center rounded-lg border motion-safe:transition-all",
+  base: "pxd-snippet pl-3 pr-1.5 gap-4 relative flex items-center rounded-lg border tabular-nums motion-safe:transition-appearance",
   variants: {
     size: {
-      sm: "min-h-7.5 pl-3.5 pr-1.5 py-2 text-sm",
-      md: "min-h-9 pl-3.5 pr-2.5 py-2.5 text-sm",
-      lg: "min-h-10 pl-3.5 pr-3.5 py-3 text-base"
+      sm: `${BASIC_MIN_HEIGHTS.sm} py-2 text-sm`,
+      md: `${BASIC_MIN_HEIGHTS.md} py-2.5 text-sm`,
+      lg: `${BASIC_MIN_HEIGHTS.lg} py-3 text-base`
     },
     variant: {
       default: "border-gray-alpha-300 bg-background-100",
@@ -64,7 +65,7 @@ async function onCopyButtonClick() {
 
 <template>
   <div :class="computedClasses" :style="{ width: getCssUnitValue(props.width) }" v-bind="$attrs">
-    <div class="pxd-snippet--container">
+    <div class="pxd-snippet--container flex-1">
       <pre
         v-for="(t, i) of computedTextArray"
         :key="i"
@@ -75,14 +76,16 @@ async function onCopyButtonClick() {
       >
     </div>
 
-    <div
-      class="right-1 p-2 absolute top-1/2 -translate-y-1/2 cursor-pointer rounded-md select-none hover:bg-background-hover active:bg-background-active"
-      :class="{ copied: isCopied }"
-      @click="onCopyButtonClick"
-    >
-      <Transition name="pxd-transition--fade-scale" mode="out-in">
-        <Component :is="renderIcon" class="text-sm" />
-      </Transition>
+    <div class="min-w-5 relative shrink-0">
+      <button
+        class="right-0 p-1.5 absolute top-1/2 -translate-y-1/2 cursor-pointer appearance-none rounded-sm self-focus-ring outline-none select-none hover:bg-background-hover hover:shadow-border-base active:bg-background-active motion-safe:transition-appearance"
+        :class="{ copied: isCopied }"
+        @click="onCopyButtonClick"
+      >
+        <Transition name="pxd-transition--fade-scale" mode="out-in">
+          <Component :is="renderIcon" class="text-sm pointer-events-none" />
+        </Transition>
+      </button>
     </div>
   </div>
 </template>

package/dist/components/spinner/index.vue

@@ -10,7 +10,9 @@ const OPACITY_STEP = 1 / ITEMS_COUNT;
 
 <template>
   <div
-    class="pxd-spinner transform-origin-center motion-safe:animate-spin pointer-events-none relative size-em overflow-hidden text-gray-700 content-visibility-auto intrinsic-size-auto"
+    aria-hidden="true"
+    aria-label="Loading"
+    class="pxd-spinner leading-0 transform-origin-center motion-safe:animate-spin pointer-events-none relative inline-block size-em overflow-hidden text-gray-700 content-visibility-auto intrinsic-size-auto"
     v-bind="$attrs"
   >
     <div class="pxd-spinner-container top-0 left-0 absolute size-full">

package/dist/components/stack/index.d.vue.ts

@@ -4,10 +4,10 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<StackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StackProps> & Readonly<{}>, {
+    scale: number;
     as: import("../../types/shared").ComponentAs;
     align: import("./types").Align;
     wrap: boolean;
-    scale: number;
     justify: import("./types").Align;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/stack/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { getResponsiveValue } from "../../utils/responsive";
+import { getResponsiveValue } from "../../utils/get";
 defineOptions({
   name: "PStack",
   inheritAttrs: false

package/dist/components/switch/index.d.vue.ts

@@ -10,8 +10,8 @@ declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {},
     onChange?: ((args_0: NonNullable<string | number | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<string | number | undefined>) => any) | undefined;
 }>, {
-    options: import("../../types/shared").ComponentOption[];
     modelValue: string | number;
+    options: import("../../types/shared").ComponentOption[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/switch/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
+import { BASIC_HEIGHTS } from "../../constants/size";
 import { useConfigProvider } from "../../contexts/config-provider";
 import { provideSwitchContext } from "../../contexts/switch";
 import { getFallbackValue } from "../../utils/get";
@@ -23,9 +24,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const SIZES = {
-  sm: "h-7.5",
-  md: "h-9",
-  lg: "h-10"
+  sm: `${BASIC_HEIGHTS.sm} text-13`,
+  md: `${BASIC_HEIGHTS.md} text-sm`,
+  lg: `${BASIC_HEIGHTS.lg} text-base`
 };
 const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);

package/dist/components/switch-item/index.vue

@@ -19,7 +19,7 @@ const props = defineProps({
 });
 const emits = defineEmits([]);
 const switchVariant = tv({
-  base: "pxd-switch-item--label px-2.5 text-sm font-medium flex size-full items-center justify-center truncate rounded-sm text-foreground-secondary peer-focus-ring select-none peer-checked:bg-gray-100 peer-disabled:cursor-not-allowed peer-disabled:text-gray-800 empty:hidden hover:text-foreground motion-safe:transition-all",
+  base: "pxd-switch-item--label px-2.5 font-medium flex size-full items-center justify-center truncate rounded-sm text-foreground-secondary peer-focus-ring outline-none select-none peer-checked:bg-gray-100 peer-disabled:cursor-not-allowed peer-disabled:text-gray-800 empty:hidden hover:text-foreground motion-safe:transition-appearance",
   variants: {
     disabled: {
       true: "",

package/dist/components/tabs/index.d.vue.ts

@@ -0,0 +1,12 @@
+import type { TabsProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<TabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: import("./types").TabsValue) => any;
+    "update:modelValue": (args_0: import("./types").TabsValue) => any;
+}, string, import("vue").PublicProps, Readonly<TabsProps> & Readonly<{
+    onChange?: ((args_0: import("./types").TabsValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: import("./types").TabsValue) => any) | undefined;
+}>, {
+    variant: "default" | "secondary";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/tabs/index.vue

@@ -0,0 +1,270 @@
+<script setup>
+import ChevronRightIcon from "@gdsicon/vue/chevron-right";
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, useSlots, watch } from "vue";
+import { useModelValue } from "../../composables/use-model-value";
+import { toArray } from "../../utils/format";
+defineOptions({
+  name: "PTabs",
+  inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+const props = defineProps({
+  variant: { type: String, required: false, default: "default" },
+  keepAlive: { type: Boolean, required: false },
+  modelValue: { type: [String, Number], required: false }
+});
+const emits = defineEmits(["change", "update:modelValue"]);
+const slots = useSlots();
+const modelValue = useModelValue(props, emits);
+const scrollRef = shallowRef();
+const innerNavRef = shallowRef();
+const overflowing = shallowRef(false);
+const canScrollLeft = shallowRef(false);
+const canScrollRight = shallowRef(false);
+let resizeObserver = null;
+const renderSlots = computed(() => {
+  const renders = slots.default?.();
+  return toArray(renders);
+});
+function isActiveTab(value) {
+  return modelValue.value === value;
+}
+function updateScrollState() {
+  const el = scrollRef.value;
+  if (!el) {
+    overflowing.value = false;
+    canScrollLeft.value = false;
+    canScrollRight.value = false;
+    return;
+  }
+  const { scrollLeft, scrollWidth, clientWidth } = el;
+  const edge = 2;
+  overflowing.value = scrollWidth > clientWidth + edge;
+  canScrollLeft.value = scrollLeft > edge;
+  canScrollRight.value = scrollLeft + clientWidth < scrollWidth - edge;
+}
+function scrollTabs(direction) {
+  const el = scrollRef.value;
+  if (!el) {
+    return;
+  }
+  const delta = Math.max(Math.floor(el.clientWidth * 0.65), 96);
+  el.scrollBy({
+    left: direction === "next" ? delta : -delta,
+    behavior: "smooth"
+  });
+}
+function scrollActiveTabIntoView() {
+  const wrap = scrollRef.value;
+  const nav = innerNavRef.value;
+  if (!wrap || !nav || !overflowing.value) {
+    return;
+  }
+  const active = nav.querySelector('[role="tab"][aria-selected="true"]');
+  if (!active) {
+    return;
+  }
+  const tabLeft = active.offsetLeft;
+  const tabRight = tabLeft + active.offsetWidth;
+  const viewLeft = wrap.scrollLeft;
+  const viewRight = viewLeft + wrap.clientWidth;
+  if (tabLeft < viewLeft) {
+    wrap.scrollTo({ left: tabLeft, behavior: "smooth" });
+  } else if (tabRight > viewRight) {
+    wrap.scrollTo({ left: tabRight - wrap.clientWidth, behavior: "smooth" });
+  }
+}
+function teardownScrollObservers() {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+}
+function setupScrollObservers() {
+  teardownScrollObservers();
+  const scrollEl = scrollRef.value;
+  const navEl = innerNavRef.value;
+  if (typeof ResizeObserver === "undefined" || !scrollEl) {
+    updateScrollState();
+    return;
+  }
+  resizeObserver = new ResizeObserver(() => {
+    updateScrollState();
+  });
+  resizeObserver.observe(scrollEl);
+  if (navEl) {
+    resizeObserver.observe(navEl);
+  }
+  updateScrollState();
+}
+function onTabClick(ev) {
+  const target = ev.currentTarget;
+  if (target.disabled) {
+    return;
+  }
+  modelValue.value = target.value;
+}
+onMounted(() => {
+  nextTick(setupScrollObservers);
+});
+onBeforeUnmount(() => {
+  teardownScrollObservers();
+});
+watch(
+  renderSlots,
+  () => {
+    nextTick(() => {
+      setupScrollObservers();
+    });
+  },
+  { flush: "post" }
+);
+watch(
+  modelValue,
+  () => {
+    nextTick(() => {
+      updateScrollState();
+      scrollActiveTabIntoView();
+    });
+  },
+  { flush: "post" }
+);
+</script>
+
+<template>
+  <div class="pxd-tabs" v-bind="$attrs">
+    <div
+      class="pxd-tabs--header min-w-0 text-sm relative flex items-stretch"
+      :data-variant="variant"
+    >
+      <button
+        v-if="overflowing"
+        type="button"
+        class="pxd-tabs--arrow px-1.5 inline-flex shrink-0 items-center justify-center self-stretch border-r border-border text-foreground-secondary self-focus-ring outline-none hover:text-foreground enabled:cursor-pointer disabled:pointer-events-none disabled:border-transparent disabled:opacity-35 motion-safe:transition-colors"
+        :disabled="!canScrollLeft"
+        aria-label="Scroll tabs left"
+        @click="scrollTabs('prev')"
+      >
+        <ChevronRightIcon class="size-4 rotate-180" aria-hidden="true" />
+      </button>
+
+      <div
+        ref="scrollRef"
+        class="pxd-tabs--scroll min-h-0 min-w-0 scrollbar-none flex-1 overflow-x-auto overscroll-x-contain has-focus-visible:overflow-x-visible"
+        @scroll.passive="updateScrollState"
+      >
+        <div ref="innerNavRef" role="tablist" class="pxd-tabs--nav inline-flex flex-nowrap">
+          <template v-for="(slot, index) in renderSlots" :key="slot.props.value ?? index">
+            <button
+              role="tab"
+              :id="`tab-${slot.props.value}`"
+              :value="slot.props.value"
+              :disabled="slot.props.disabled"
+              :tabindex="isActiveTab(slot.props.value) ? 0 : -1"
+              :aria-controls="`tab-panel-${slot.props.value}`"
+              :aria-selected="isActiveTab(slot.props.value)"
+              class="pxd-tabs--nav-item flex cursor-pointer items-center justify-center self-focus-ring outline-none enabled:hover:text-foreground disabled:cursor-not-allowed disabled:text-foreground-secondary motion-safe:transition-colors"
+              @click="onTabClick"
+            >
+              <template v-if="slot.children?.label">
+                <Component :is="slot.children.label" />
+              </template>
+              <template v-else>
+                {{ slot.props.label }}
+              </template>
+            </button>
+          </template>
+        </div>
+      </div>
+
+      <button
+        v-if="overflowing"
+        type="button"
+        class="pxd-tabs--arrow px-1.5 inline-flex shrink-0 items-center justify-center self-stretch border-l border-border text-foreground-secondary self-focus-ring outline-none hover:text-foreground enabled:cursor-pointer disabled:pointer-events-none disabled:border-transparent disabled:opacity-35 motion-safe:transition-colors"
+        :disabled="!canScrollRight"
+        aria-label="Scroll tabs right"
+        @click="scrollTabs('next')"
+      >
+        <ChevronRightIcon class="size-4" aria-hidden="true" />
+      </button>
+    </div>
+
+    <div role="tabpanel" class="pxd-tabs--content">
+      <template v-for="(slot, index) in renderSlots" :key="slot.props.value ?? index">
+        <div
+          class="pxd-tabs--panel"
+          :id="`tab-panel-${slot.props.value}`"
+          :aria-labelledby="`tab-${slot.props.value}`"
+        >
+          <KeepAlive v-if="keepAlive">
+            <Component v-if="isActiveTab(slot.props.value)" :is="slot.children?.default" />
+          </KeepAlive>
+          <Component :is="slot.children?.default" v-else-if="isActiveTab(slot.props.value)" />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+.pxd-tabs--header {
+  &[data-variant='default'] {
+    padding-bottom: 1px;
+    box-shadow: 0 -1px 0 0 var(--color-border) inset;
+
+    & + .pxd-tabs--content {
+      padding-top: 0.75rem;
+    }
+
+    .pxd-tabs--scroll {
+      margin-bottom: -1px;
+    }
+
+    .pxd-tabs--nav {
+      gap: 1.5rem;
+    }
+
+    .pxd-tabs--nav-item {
+      border-bottom: 2px solid transparent;
+      padding: 0.875rem 0.375rem;
+
+      &:not(:disabled) {
+        color: var(--color-gray-900);
+      }
+
+      &[aria-selected='true'] {
+        border-color: currentColor;
+        color: var(--color-primary);
+      }
+    }
+  }
+
+  &[data-variant='secondary'] {
+    & + .pxd-tabs--content {
+      padding-top: 0.5rem;
+    }
+
+    .pxd-tabs--nav {
+      gap: 0.5rem;
+    }
+
+    .pxd-tabs--nav-item {
+      height: 1.5rem;
+      padding: 0 0.375rem;
+      border-radius: var(--radius-md);
+      font-size: var(--text-13);
+      background-color: var(--color-gray-alpha-200);
+
+      &:disabled {
+        background-color: var(--color-gray-100);
+      }
+
+      &[aria-selected='true'] {
+        background-color: var(--color-primary);
+        color: var(--color-gray-100);
+      }
+    }
+  }
+}
+</style>

package/dist/components/tabs/types.d.ts

@@ -0,0 +1,12 @@
+export type TabsValue = string | number
+
+export interface TabsProps {
+  variant?: 'default' | 'secondary'
+  keepAlive?: boolean
+  modelValue?: TabsValue
+}
+
+export interface TabsEmits {
+  change: [TabsValue]
+  'update:modelValue': [TabsValue]
+}

package/dist/components/tabs-item/index.d.vue.ts

@@ -0,0 +1,4 @@
+import type { TabsItemProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<TabsItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabsItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/tabs-item/index.vue

@@ -0,0 +1,16 @@
+<script setup>
+defineOptions({
+  name: "PTabsItem",
+  inheritAttrs: false
+});
+const props = defineProps({
+  label: { type: [String, Number, Array, null], required: false },
+  value: { type: [String, Number], required: true },
+  disabled: { type: Boolean, required: false }
+});
+defineEmits([]);
+</script>
+
+<template>
+
+</template>

package/dist/components/tabs-item/types.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentLabel } from '../../types/shared'
+import type { TabsValue } from '../tabs/types'
+
+export interface TabsItemProps {
+  label?: ComponentLabel
+  value: TabsValue
+  disabled?: boolean
+}
+
+export interface TabsItemEmits {}

package/dist/components/text/index.vue

@@ -2,7 +2,7 @@
 import { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { getCssUnitValue } from "../../utils/format";
-import { getResponsiveValue } from "../../utils/responsive";
+import { getResponsiveValue } from "../../utils/get";
 defineOptions({
   name: "PText",
   inheritAttrs: false

package/dist/components/textarea/index.d.vue.ts

@@ -2,13 +2,13 @@ import type { TextareaProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<TextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any;
     "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any;
-    blur: (args_0: FocusEvent) => any;
     focus: (args_0: FocusEvent) => any;
+    blur: (args_0: FocusEvent) => any;
 }, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{
     onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any) | undefined;
-    onBlur?: ((args_0: FocusEvent) => any) | undefined;
     onFocus?: ((args_0: FocusEvent) => any) | undefined;
+    onBlur?: ((args_0: FocusEvent) => any) | undefined;
 }>, {
     modelValue: import("../../types/shared").ComponentLabel;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/textarea/index.vue

@@ -81,7 +81,7 @@ function onInputChange(event) {
 <template>
   <label
     :for="uniqueId"
-    class="pxd-textarea pxd-input--border flex size-full min-h-inherit max-w-full items-center justify-center overflow-hidden rounded-md bg-background-100 motion-safe:transition-all"
+    class="pxd-textarea pxd-input--border flex size-full min-h-inherit max-w-full items-center justify-center overflow-hidden rounded-md bg-background-100 motion-safe:transition-appearance"
     :class="computedClasses"
     v-bind="$attrs"
   >

package/dist/components/time-picker/index.d.vue.ts

@@ -1,15 +1,13 @@
 import type { TimePickerProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<TimePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (args_0: MouseEvent) => any;
-    change: (args_0: boolean) => any;
+    change: (args_0: string) => any;
     "update:modelValue": (args_0: string) => any;
 }, string, import("vue").PublicProps, Readonly<TimePickerProps> & Readonly<{
-    onSelect?: ((args_0: MouseEvent) => any) | undefined;
-    onChange?: ((args_0: boolean) => any) | undefined;
+    onChange?: ((args_0: string) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {
-    format: string;
     modelValue: Date | string | number | null;
+    format: string;
     closeOnPressEscape: boolean;
     presets: import("./types").DateTimePreset[];
     prefixIcon: boolean;