pxd 0.0.55 → 0.0.61

package/dist/components/project-banner/index.d.vue.ts

@@ -0,0 +1,18 @@
+import type { ProjectBannerProps } from './types';
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    action?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProjectBannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProjectBannerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/project-banner/index.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { tv } from "tailwind-variants";
+import { computed } from "vue";
+defineOptions({
+  name: "PProjectBanner",
+  inheritAttrs: false
+});
+const props = defineProps({
+  label: { type: [String, Number, Array, null], required: false },
+  variant: { type: String, required: false }
+});
+const projectBannerVariant = tv({
+  slots: {
+    base: "gap-x-2 py-2 leading-5 min-h-10 text-sm flex w-full -translate-y-px items-center justify-center border-y",
+    action: "ml-6 md:ml-0 font-medium cursor-pointer underline underline-offset-3 motion-safe:transition-colors"
+  },
+  variants: {
+    variant: {
+      warning: {
+        base: "border-amber-400 bg-amber-100 text-amber-900",
+        action: "text-amber-1000 decoration-amber-400 hover:border-amber-500 hover:text-amber-900"
+      },
+      success: {
+        base: "border-green-400 bg-green-100 text-green-900",
+        action: "text-green-1000 decoration-green-400 hover:border-green-500 hover:text-green-900"
+      },
+      error: {
+        base: "border-red-400 bg-red-100 text-red-900",
+        action: "text-red-1000 decoration-red-400 hover:border-red-500 hover:text-red-900"
+      },
+      info: {
+        base: "border-blue-400 bg-blue-100 text-blue-900",
+        action: "text-blue-1000 decoration-blue-400 hover:border-blue-500 hover:text-blue-900"
+      }
+    }
+  }
+});
+const computedClasses = computed(() => projectBannerVariant({ variant: props.variant }));
+</script>
+
+<template>
+  <aside :class="computedClasses.base()" v-bind="$attrs">
+    <div class="gap-2 px-6 md:justify-center md:flex-row md:items-center flex w-full flex-col">
+      <div class="gap-2 flex items-center">
+        <div v-if="$slots.icon" aria-hidden="true" class="shrink-0">
+          <slot name="icon"></slot>
+        </div>
+
+        <p class="my-0!">
+          <slot>{{ label }}</slot>
+        </p>
+      </div>
+
+      <div v-if="$slots.action" :class="computedClasses.action()">
+        <slot name="action"></slot>
+      </div>
+    </div>
+  </aside>
+</template>

package/dist/components/project-banner/types.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentLabel } from '../../types/shared'
+
+export type ProjectBannerVariant = 'warning' | 'error' | 'success' | 'info'
+
+export interface ProjectBannerProps {
+  label?: ComponentLabel
+  variant?: ProjectBannerVariant
+}

package/dist/components/radio/index.vue

@@ -1,12 +1,12 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
-import { useUniqueId } from "../../composables/use-unique-id-context";
 import { useRadioGroupContext } from "../../contexts/radio";
 import { getUniqueId } from "../../utils/uid";
-import { radioVariant } from "./cn";
 defineOptions({
   name: "PRadio",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -15,50 +15,92 @@ defineOptions({
 const props = defineProps({
   label: { type: [String, Number, Array, null], required: false },
   value: { type: [String, Number, Boolean], required: true },
-  required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   modelValue: { type: [String, Number, Boolean], required: false }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
+const radioVariant = tv({
+  base: "pxd-radio--inner size-4 after:content-empty after:size-2 inline-flex items-center justify-center rounded-full border peer-focus-ring after:scale-40 after:rounded-full after:bg-primary after:opacity-0 peer-checked:after:scale-100 peer-checked:after:opacity-100 motion-safe:transition-colors motion-safe:after:transition-all",
+  variants: {
+    checked: {
+      true: {
+        base: "border-primary bg-background-100 peer-checked:after:scale-100",
+        disabled: "border-gray-500 bg-gray-100 peer-disabled:after:bg-gray-500"
+      },
+      false: {
+        base: "border-gray-alpha-400 bg-background-100 group-hover/radio:bg-gray-200",
+        disabled: "border-gray-500 bg-gray-100"
+      }
+    },
+    disabled: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      checked: true,
+      disabled: false,
+      class: "border-primary bg-background-100 peer-checked:after:scale-100"
+    },
+    {
+      checked: true,
+      disabled: true,
+      class: "border-gray-500 bg-gray-100 peer-disabled:after:bg-gray-500"
+    },
+    {
+      checked: false,
+      disabled: false,
+      class: "border-gray-alpha-400 bg-background-100 group-hover/radio:bg-gray-200"
+    },
+    { checked: false, disabled: true, class: "border-gray-500 bg-gray-100" }
+  ],
+  defaultVariants: {
+    checked: false,
+    disabled: false
+  }
+});
 const uniqueId = getUniqueId();
-const modelValue = useModelValue(props, emits);
-const radioGroupName = useUniqueId("RadioGroupName");
 const radioGroupContext = useRadioGroupContext();
-const isChecked = computed(
-  () => (radioGroupContext?.modelValue ?? modelValue.value) === props.value
+const radioGroupName = radioGroupContext?.name ?? getUniqueId();
+const modelValue = useModelValue(
+  radioGroupContext?.props ?? props,
+  radioGroupContext?.emits ?? emits
 );
-const computedDisabled = computed(() => props.disabled || radioGroupContext?.disabled);
-const computedRequired = computed(() => props.required || radioGroupContext?.required);
+const isChecked = computed(() => modelValue.value === props.value);
+const isDisabled = computed(() => props.disabled || radioGroupContext?.props.disabled);
 const computedClasses = computed(() => {
   return radioVariant({
     checked: isChecked.value,
-    disabled: computedDisabled.value
+    disabled: isDisabled.value
   });
 });
-function onChangeValue() {
-  emits("update:modelValue", props.value);
+function onInputChange() {
+  if (isDisabled.value) {
+    return;
+  }
+  modelValue.value = props.value;
 }
 </script>
 
 <template>
   <label
     role="radio"
-    :aria-checked="isChecked"
-    :data-disabled="computedDisabled"
-    class="pxd-radio group/radio gap-2 inline-flex max-w-full cursor-pointer touch-manipulation items-center data-[disabled=true]:cursor-not-allowed"
-    :class="{ 'is-disabled text-gray-500': computedDisabled }"
+    :aria-selected="isChecked"
+    :data-disabled="isDisabled"
+    class="pxd-radio group/radio gap-2 inline-flex max-w-full cursor-pointer touch-manipulation items-center data-[disabled=true]:cursor-not-allowed data-[disabled=true]:text-gray-500"
     :for="uniqueId"
+    v-bind="$attrs"
   >
     <input
       :id="uniqueId"
       type="radio"
       :value="value"
-      class="peer smallest"
+      class="peer visually-hidden"
       :checked="isChecked"
       :name="radioGroupName"
-      :required="computedRequired"
-      :disabled="computedDisabled"
-      @change="onChangeValue"
+      :disabled="isDisabled"
+      @change="onInputChange"
     />
 
     <span aria-hidden="true" :class="computedClasses" />

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

@@ -1,9 +1,8 @@
-import type { ComponentLabel, ComponentOption, ComponentValue } from '../../types/shared'
+import type { ComponentLabel, ComponentValue } from '../../types/shared'
 
 export interface RadioProps {
   label?: ComponentLabel
   value: ComponentValue
-  required?: boolean
   disabled?: boolean
   modelValue?: ComponentValue
 }
@@ -12,15 +11,3 @@ export interface RadioEmits {
   change: [NonNullable<RadioProps['modelValue']>]
   'update:modelValue': [NonNullable<RadioProps['modelValue']>]
 }
-
-export interface RadioGroupProps {
-  disabled?: boolean
-  required?: boolean
-  modelValue?: ComponentValue
-  options?: ComponentOption[]
-}
-
-export interface RadioGroupEmits {
-  change: [NonNullable<RadioGroupProps['modelValue']>]
-  'update:modelValue': [NonNullable<RadioGroupProps['modelValue']>]
-}

package/dist/components/radio-group/index.d.vue.ts

@@ -1,4 +1,4 @@
-import type { RadioGroupProps } from '../radio/types';
+import type { RadioGroupProps } from './types';
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
@@ -9,9 +9,7 @@ declare const __VLS_base: import("vue").DefineComponent<RadioGroupProps, {}, {},
 }, string, import("vue").PublicProps, Readonly<RadioGroupProps> & Readonly<{
     onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | undefined>) => any) | undefined;
-}>, {
-    options: import("../../types/shared").ComponentOption[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,7 +1,6 @@
 <script setup>
-import { useModelValue } from "../../composables/use-model-value";
-import { provideUniqueId } from "../../composables/use-unique-id-context";
 import { provideRadioGroupContext } from "../../contexts/radio";
+import { getUniqueId } from "../../utils/uid";
 import PRadio from "../radio/index.vue";
 import PStack from "../stack/index.vue";
 defineOptions({
@@ -14,27 +13,23 @@ defineOptions({
 });
 const props = defineProps({
   disabled: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
   modelValue: { type: [String, Number, Boolean], required: false },
-  options: { type: Array, required: false, default: () => [] }
+  options: { type: Array, required: false }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const modelValue = useModelValue(props, emits);
-provideUniqueId("RadioGroupName");
-provideRadioGroupContext(props);
+provideRadioGroupContext({ props, emits, name: getUniqueId() });
 </script>
 
 <template>
-  <PStack class="pxd-radio-group" role="radiogroup" aria-label="Radio Group" v-bind="$attrs">
+  <PStack
+    class="pxd-radio-group"
+    role="radiogroup"
+    aria-label="Radio Group"
+    aria-multiselectable="false"
+    v-bind="$attrs"
+  >
     <slot>
-      <PRadio
-        v-for="option in options"
-        :key="option.value"
-        v-model="modelValue"
-        :label="option.label"
-        :value="option.value"
-        :disabled="option.disabled"
-      />
+      <PRadio v-for="option in options" :key="option.value" v-bind="option" />
     </slot>
   </PStack>
 </template>

package/dist/components/radio-group/types.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentOption, ComponentValue } from '../../types/shared'
+
+export interface RadioGroupProps {
+  disabled?: boolean
+  modelValue?: ComponentValue
+  options?: ComponentOption[]
+}
+
+export interface RadioGroupEmits {
+  change: [NonNullable<RadioGroupProps['modelValue']>]
+  'update:modelValue': [NonNullable<RadioGroupProps['modelValue']>]
+}

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

@@ -1,13 +1,4 @@
-import type { ComponentDirection } from '../../types/shared/props'
-
-export interface ResizableProps {
-  direction?: ComponentDirection
-}
-
-export interface ResizablePanelProps {
-  size?: number | null
-  minSize?: number
-}
+import type { ComponentDirection } from '../../types/shared'
 
 export interface PanelConfig {
   id: string
@@ -21,3 +12,7 @@ export interface HandleConfig {
   order: number
   onDrag: (delta: { deltaX: number; deltaY: number }) => void
 }
+
+export interface ResizableProps {
+  direction?: ComponentDirection
+}

package/dist/components/resizable-handle/index.vue

@@ -6,8 +6,8 @@ defineOptions({
   name: "PResizableHandle",
   inheritAttrs: false
 });
-const resizableContext = useResizableContext();
 const uniqueId = getUniqueId();
+const resizableContext = useResizableContext();
 let isDragging = false;
 let startPosition = { x: 0, y: 0 };
 function onDrag(delta) {

package/dist/components/resizable-panel/index.d.vue.ts

@@ -1,4 +1,4 @@
-import type { ResizablePanelProps } from '../resizable/types';
+import type { ResizablePanelProps } from './types';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

package/dist/components/resizable-panel/index.vue

@@ -3,7 +3,8 @@ import { computed, onBeforeUnmount, onMounted, watch } from "vue";
 import { useResizableContext } from "../../contexts/resizable";
 import { getUniqueId } from "../../utils/uid";
 defineOptions({
-  name: "PResizablePanel"
+  name: "PResizablePanel",
+  inheritAttrs: false
 });
 const props = defineProps({
   size: { type: [Number, null], required: false, default: null },
@@ -50,7 +51,11 @@ watch(
 </script>
 
 <template>
-  <div class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden" :style="computedStyle">
+  <div
+    class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden"
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
     <slot />
   </div>
 </template>

package/dist/components/resizable-panel/types.d.ts

@@ -0,0 +1,4 @@
+export interface ResizablePanelProps {
+  size?: number | null
+  minSize?: number
+}

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

@@ -0,0 +1,29 @@
+import type { ScrollableProps } from './types';
+declare function scrollTo(top: number, left: number): void;
+declare function forceUpdate(): void;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ScrollableProps, {
+    scrollTo: typeof scrollTo;
+    forceUpdate: typeof forceUpdate;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    scroll: (args_0: Event) => any;
+    bottom: (args_0: import("../../types/shared").ComponentDirection, args_1: Event) => any;
+}, string, import("vue").PublicProps, Readonly<ScrollableProps> & Readonly<{
+    onScroll?: ((args_0: Event) => any) | undefined;
+    onBottom?: ((args_0: import("../../types/shared").ComponentDirection, args_1: Event) => any) | undefined;
+}>, {
+    fader: boolean;
+    scrollbar: boolean;
+    bottomThreshold: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};