sakana-element 2.2.0 → 2.4.0

package/dist/theme/Tooltip.css

@@ -1,29 +1,29 @@
 /* Tooltip Variables */
-.px-tooltip[data-v-4e2bfb45] {
-  --px-popover-bg-color: var(--px-bg-color);
-  --px-popover-font-size: var(--px-font-size-base);
-  --px-popover-border-color: var(--px-border-color-dark);
-  --px-popover-padding: 10px 14px;
-  --px-popover-shadow-color: var(--px-shadow-color);
+.px-tooltip[data-v-d982dfd2] {
+  --px-tooltip-bg-color: var(--px-bg-color);
+  --px-tooltip-font-size: var(--px-font-size-base);
+  --px-tooltip-border-color: var(--px-border-color-dark);
+  --px-tooltip-padding: 10px 14px;
+  --px-tooltip-shadow-color: var(--px-shadow-color);
   display: inline-block;
 }
 /* Base Tooltip Styles - Pixel Game Style */
 /* No smooth transitions for pixel feel */
-.px-tooltip .fade-enter-active[data-v-4e2bfb45],
-  .px-tooltip .fade-leave-active[data-v-4e2bfb45] {
+.px-tooltip .fade-enter-active[data-v-d982dfd2],
+  .px-tooltip .fade-leave-active[data-v-d982dfd2] {
     transition: none;
 }
-.px-tooltip .fade-enter-from[data-v-4e2bfb45],
-  .px-tooltip .fade-leave-to[data-v-4e2bfb45] {
+.px-tooltip .fade-enter-from[data-v-d982dfd2],
+  .px-tooltip .fade-leave-to[data-v-d982dfd2] {
     opacity: 0;
 }
 /* Popper container - Pixel style box */
-.px-tooltip .px-tooltip__popper[data-v-4e2bfb45] {
+.px-tooltip .px-tooltip__popper[data-v-d982dfd2] {
     background: transparent;
-    padding: var(--px-popover-padding);
+    padding: var(--px-tooltip-padding);
     color: var(--px-text-color-primary);
     line-height: 1.5;
-    font-size: var(--px-popover-font-size);
+    font-size: var(--px-tooltip-font-size);
     font-family: var(--px-font-family);
     word-break: break-all;
     box-sizing: border-box;
@@ -35,15 +35,15 @@
 
     /* Pixel shadow via drop-shadow (respects clip-path shape) */
     filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-popover-shadow-color)
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-tooltip-shadow-color)
     );
 }
 /* Border layer — filled with border color, clipped to pixel shape */
-.px-tooltip .px-tooltip__popper[data-v-4e2bfb45]::before {
+.px-tooltip .px-tooltip__popper[data-v-d982dfd2]::before {
       content: "";
       position: absolute;
       inset: 0;
-      background: var(--px-popover-border-color);
+      background: var(--px-tooltip-border-color);
       clip-path: polygon(
         0 4px,
         2px 4px,
@@ -68,12 +68,12 @@
       );
       z-index: -1;
 }
-/* Fill layer — inset by border width, filled with bg color */
-.px-tooltip .px-tooltip__popper[data-v-4e2bfb45]::after {
+/* Fill layer — inset by border width, filled with bg color, beveled */
+.px-tooltip .px-tooltip__popper[data-v-d982dfd2]::after {
       content: "";
       position: absolute;
       inset: 2px;
-      background: var(--px-popover-bg-color);
+      background: var(--px-tooltip-bg-color);
       clip-path: polygon(
         0 4px,
         2px 4px,
@@ -96,16 +96,140 @@
         2px calc(100% - 4px),
         0 calc(100% - 4px)
       );
+      box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.08);
       z-index: -1;
 }
-/* Hide arrow for pixel style - pixel boxes don't need arrows */
-.px-tooltip .px-tooltip__popper #arrow[data-v-4e2bfb45] {
-      display: none;
+/* Pixel arrow — base */
+.px-tooltip .px-tooltip__popper .px-tooltip__arrow[data-v-d982dfd2] {
+      position: absolute;
+      background: var(--px-tooltip-border-color);
+      z-index: 1;
+}
+/* Top placement → arrow points down at bottom edge */
+.px-tooltip .px-tooltip__popper[data-popper-placement^='top'] .px-tooltip__arrow[data-v-d982dfd2] {
+      bottom: -6px;
+      width: 10px;
+      height: 6px;
+      clip-path: polygon(
+        0 0, 10px 0,
+        10px 2px, 8px 2px,
+        8px 4px, 6px 4px,
+        6px 6px, 4px 6px,
+        4px 4px, 2px 4px,
+        2px 2px, 0 2px
+      );
+}
+/* Bottom placement → arrow points up at top edge */
+.px-tooltip .px-tooltip__popper[data-popper-placement^='bottom'] .px-tooltip__arrow[data-v-d982dfd2] {
+      top: -6px;
+      width: 10px;
+      height: 6px;
+      clip-path: polygon(
+        4px 0, 6px 0,
+        6px 2px, 8px 2px,
+        8px 4px, 10px 4px,
+        10px 6px, 0 6px,
+        0 4px, 2px 4px,
+        2px 2px, 4px 2px
+      );
+}
+/* Left placement → arrow points right at right edge */
+.px-tooltip .px-tooltip__popper[data-popper-placement^='left'] .px-tooltip__arrow[data-v-d982dfd2] {
+      right: -6px;
+      width: 6px;
+      height: 10px;
+      clip-path: polygon(
+        0 0, 2px 0,
+        2px 2px, 4px 2px,
+        4px 4px, 6px 4px,
+        6px 6px, 4px 6px,
+        4px 8px, 2px 8px,
+        2px 10px, 0 10px
+      );
+}
+/* Right placement → arrow points left at left edge */
+.px-tooltip .px-tooltip__popper[data-popper-placement^='right'] .px-tooltip__arrow[data-v-d982dfd2] {
+      left: -6px;
+      width: 6px;
+      height: 10px;
+      clip-path: polygon(
+        6px 0, 6px 10px,
+        4px 10px, 4px 8px,
+        2px 8px, 2px 6px,
+        0 6px, 0 4px,
+        2px 4px, 2px 2px,
+        4px 2px, 4px 0
+      );
 }
 /* Dark tooltip variant */
-.px-tooltip--dark .px-tooltip__popper[data-v-4e2bfb45] {
-    --px-popover-bg-color: var(--px-text-color-primary);
-    --px-popover-border-color: var(--px-text-color-primary);
-    --px-popover-shadow-color: rgba(0, 0, 0, 0.4);
+.px-tooltip--dark .px-tooltip__popper[data-v-d982dfd2] {
+    --px-tooltip-bg-color: var(--px-text-color-primary);
+    --px-tooltip-border-color: var(--px-text-color-primary);
+    --px-tooltip-shadow-color: rgba(0, 0, 0, 0.4);
     color: var(--px-bg-color);
 }
+.px-tooltip--dark .px-tooltip__popper[data-v-d982dfd2]::after {
+      box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.15), inset -2px -2px 0 rgba(0, 0, 0, 0.2);
+}
+/* Light tooltip variant */
+.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+    --px-tooltip-bg-color: var(--px-bg-color);
+    --px-tooltip-border-color: var(--px-border-color);
+    color: var(--px-text-color-primary);
+}
+/* Type variants — themed colors */
+.px-tooltip--primary .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-primary);
+      --px-tooltip-border-color: var(--px-color-primary-dark);
+      --px-tooltip-shadow-color: var(--px-color-primary-dark);
+      color: #fff;
+}
+.px-tooltip--primary.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-primary-light-9);
+      --px-tooltip-border-color: var(--px-color-primary);
+      color: var(--px-color-primary);
+}
+.px-tooltip--success .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-success);
+      --px-tooltip-border-color: var(--px-color-success-dark);
+      --px-tooltip-shadow-color: var(--px-color-success-dark);
+      color: #fff;
+}
+.px-tooltip--success.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-success-light-9);
+      --px-tooltip-border-color: var(--px-color-success);
+      color: var(--px-color-success);
+}
+.px-tooltip--info .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-info);
+      --px-tooltip-border-color: var(--px-color-info-dark);
+      --px-tooltip-shadow-color: var(--px-color-info-dark);
+      color: #fff;
+}
+.px-tooltip--info.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-info-light-9);
+      --px-tooltip-border-color: var(--px-color-info);
+      color: var(--px-color-info);
+}
+.px-tooltip--warning .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-warning);
+      --px-tooltip-border-color: var(--px-color-warning-dark);
+      --px-tooltip-shadow-color: var(--px-color-warning-dark);
+      color: #fff;
+}
+.px-tooltip--warning.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-warning-light-9);
+      --px-tooltip-border-color: var(--px-color-warning);
+      color: var(--px-color-warning);
+}
+.px-tooltip--danger .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-danger);
+      --px-tooltip-border-color: var(--px-color-danger-dark);
+      --px-tooltip-shadow-color: var(--px-color-danger-dark);
+      color: #fff;
+}
+.px-tooltip--danger.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
+      --px-tooltip-bg-color: var(--px-color-danger-light-9);
+      --px-tooltip-border-color: var(--px-color-danger);
+      color: var(--px-color-danger);
+}

package/dist/theme/Validator.css

@@ -0,0 +1,25 @@
+.px-validator[data-v-9c099378] {
+  display: inline-flex;
+  flex-direction: column;
+  font-family: var(--px-font-family);
+}
+.px-validator__content[data-v-9c099378] {
+  display: contents;
+}
+.px-validator__hint[data-v-9c099378] {
+  min-height: 1.4em;
+  padding-top: 4px;
+  font-size: var(--px-font-size-small);
+  color: var(--px-color-danger);
+  line-height: 1.4;
+  transition: opacity 0.15s ease;
+}
+.px-validator__hint.is-hidden[data-v-9c099378] {
+  opacity: 0;
+  pointer-events: none;
+}
+.px-validator__hint-text[data-v-9c099378] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}

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

@@ -1,10 +1,8 @@
 export type AvatarSize = 'large' | 'default' | 'small';
 export type AvatarShape = 'circle' | 'square';
-export type AvatarStatus = 'online' | 'offline';
 export interface AvatarProps {
     size?: AvatarSize;
     shape?: AvatarShape;
     border?: boolean;
     color?: string;
-    status?: AvatarStatus;
 }

package/dist/types/components/ChatBubble/constants.d.ts

@@ -0,0 +1,2 @@
+import { ColorTemplate } from '@sakana-element/utils';
+export declare const CHAT_COLOR_TEMPLATES: Record<string, ColorTemplate>;

package/dist/types/components/ChatBubble/index.d.ts

@@ -0,0 +1,27 @@
+export declare const PxChatBubble: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').ChatBubbleProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        placement: import('packages/core').ChatBubblePlacement;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').ChatBubbleProps> & Readonly<{}>, {}, {}, {}, {}, {
+        placement: import('packages/core').ChatBubblePlacement;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').ChatBubbleProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    placement: import('packages/core').ChatBubblePlacement;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        avatar?(_: {}): any;
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export * from './types';

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

@@ -0,0 +1,10 @@
+export type ChatBubbleType = 'primary' | 'success' | 'info' | 'warning' | 'danger';
+export type ChatBubblePlacement = 'start' | 'end';
+export interface ChatBubbleProps {
+    placement?: ChatBubblePlacement;
+    type?: ChatBubbleType;
+    color?: string;
+    name?: string;
+    time?: string;
+    status?: string;
+}

package/dist/types/components/Checkbox/constants.d.ts

@@ -0,0 +1,5 @@
+import { ColorTemplate } from '@sakana-element/utils';
+import { InjectionKey } from 'vue';
+import { CheckboxGroupContext } from './types';
+export declare const CHECKBOX_GROUP_CTX_KEY: InjectionKey<CheckboxGroupContext>;
+export declare const CHECKBOX_COLOR_TEMPLATES: Record<string, ColorTemplate>;

package/dist/types/components/Checkbox/index.d.ts

@@ -0,0 +1,94 @@
+export declare const PxCheckbox: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').CheckboxProps> & Readonly<{
+        onChange?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    }>, {
+        focus(): void;
+        checked: import('vue').ComputedRef<boolean>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        change: (value: boolean) => any;
+        "update:modelValue": (value: boolean) => any;
+    }, import('vue').PublicProps, {
+        disabled: boolean;
+        modelValue: boolean;
+        indeterminate: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        inputRef: HTMLInputElement;
+    }, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').CheckboxProps> & Readonly<{
+        onChange?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    }>, {
+        focus(): void;
+        checked: import('vue').ComputedRef<boolean>;
+    }, {}, {}, {}, {
+        disabled: boolean;
+        modelValue: boolean;
+        indeterminate: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').CheckboxProps> & Readonly<{
+    onChange?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    focus(): void;
+    checked: import('vue').ComputedRef<boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: boolean) => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, {
+    disabled: boolean;
+    modelValue: boolean;
+    indeterminate: boolean;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export declare const PxCheckboxGroup: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').CheckboxGroupProps> & Readonly<{
+        onChange?: ((value: import('packages/core').CheckboxValueType[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import('packages/core').CheckboxValueType[]) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        change: (value: import('packages/core').CheckboxValueType[]) => any;
+        "update:modelValue": (value: import('packages/core').CheckboxValueType[]) => any;
+    }, import('vue').PublicProps, {
+        disabled: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').CheckboxGroupProps> & Readonly<{
+        onChange?: ((value: import('packages/core').CheckboxValueType[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import('packages/core').CheckboxValueType[]) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        disabled: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').CheckboxGroupProps> & Readonly<{
+    onChange?: ((value: import('packages/core').CheckboxValueType[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import('packages/core').CheckboxValueType[]) => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: import('packages/core').CheckboxValueType[]) => any;
+    "update:modelValue": (value: import('packages/core').CheckboxValueType[]) => any;
+}, string, {
+    disabled: boolean;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export * from './types';

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

@@ -0,0 +1,46 @@
+import { ComputedRef } from 'vue';
+export type CheckboxValueType = string | number | boolean;
+export type CheckboxType = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export interface CheckboxProps {
+    modelValue?: boolean;
+    value?: CheckboxValueType;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    size?: 'small' | 'large';
+    type?: CheckboxType;
+    color?: string;
+    label?: string;
+    name?: string;
+    id?: string;
+}
+export interface CheckboxEmits {
+    (e: 'update:modelValue', value: boolean): void;
+    (e: 'change', value: boolean): void;
+}
+export interface CheckboxInstance {
+    focus(): void;
+    checked: ComputedRef<boolean>;
+}
+export interface CheckboxGroupProps {
+    modelValue: CheckboxValueType[];
+    disabled?: boolean;
+    size?: 'small' | 'large';
+    type?: CheckboxType;
+    color?: string;
+    min?: number;
+    max?: number;
+}
+export interface CheckboxGroupEmits {
+    (e: 'update:modelValue', value: CheckboxValueType[]): void;
+    (e: 'change', value: CheckboxValueType[]): void;
+}
+export interface CheckboxGroupContext {
+    modelValue: ComputedRef<CheckboxValueType[]>;
+    disabled: ComputedRef<boolean>;
+    size: ComputedRef<'small' | 'large' | undefined>;
+    type: ComputedRef<CheckboxType | undefined>;
+    color: ComputedRef<string | undefined>;
+    min: ComputedRef<number | undefined>;
+    max: ComputedRef<number | undefined>;
+    changeEvent(value: CheckboxValueType[]): void;
+}

package/dist/types/components/Collapse/index.d.ts

@@ -1,10 +1,10 @@
 export declare const PxCollapse: {
     new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').CollapseProps> & Readonly<{
-        "onUpdate:modelValue"?: ((value: import('packages/core').CollapseItemName[]) => any) | undefined;
         onChange?: ((value: import('packages/core').CollapseItemName[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import('packages/core').CollapseItemName[]) => any) | undefined;
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-        "update:modelValue": (value: import('packages/core').CollapseItemName[]) => any;
         change: (value: import('packages/core').CollapseItemName[]) => any;
+        "update:modelValue": (value: import('packages/core').CollapseItemName[]) => any;
     }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
@@ -13,18 +13,18 @@ export declare const PxCollapse: {
         M: {};
         Defaults: {};
     }, Readonly<import('packages/core').CollapseProps> & Readonly<{
-        "onUpdate:modelValue"?: ((value: import('packages/core').CollapseItemName[]) => any) | undefined;
         onChange?: ((value: import('packages/core').CollapseItemName[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import('packages/core').CollapseItemName[]) => any) | undefined;
     }>, {}, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & import('vue').ComponentOptionsBase<Readonly<import('packages/core').CollapseProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: import('packages/core').CollapseItemName[]) => any) | undefined;
     onChange?: ((value: import('packages/core').CollapseItemName[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import('packages/core').CollapseItemName[]) => any) | undefined;
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: import('packages/core').CollapseItemName[]) => any;
     change: (value: import('packages/core').CollapseItemName[]) => any;
+    "update:modelValue": (value: import('packages/core').CollapseItemName[]) => any;
 }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;

package/dist/types/components/Diff/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const DEFAULT_POSITION = 50;
+export declare const DEFAULT_DIFF_PIXEL_SIZE = 8;
+export declare const DEFAULT_DIFF_BACKGROUND = "#FFFFFF";
+export declare const PRESET_DIFF_COLORS: Set<string>;

package/dist/types/components/Diff/index.d.ts

@@ -0,0 +1,67 @@
+export declare const PxDiff: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').DiffProps> & Readonly<{
+        onError?: ((event: Event) => any) | undefined;
+        onChange?: ((position: number) => any) | undefined;
+        onRendered?: (() => any) | undefined;
+    }>, {
+        setPosition: (pos: number) => void;
+        getPosition: () => number;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        error: (event: Event) => any;
+        change: (position: number) => any;
+        rendered: () => any;
+    }, import('vue').PublicProps, {
+        pixelSize: number;
+        grayscale: boolean;
+        background: string;
+        initialPosition: number;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        containerRef: HTMLDivElement;
+        canvasRef: HTMLCanvasElement;
+        originRef: HTMLImageElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').DiffProps> & Readonly<{
+        onError?: ((event: Event) => any) | undefined;
+        onChange?: ((position: number) => any) | undefined;
+        onRendered?: (() => any) | undefined;
+    }>, {
+        setPosition: (pos: number) => void;
+        getPosition: () => number;
+    }, {}, {}, {}, {
+        pixelSize: number;
+        grayscale: boolean;
+        background: string;
+        initialPosition: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').DiffProps> & Readonly<{
+    onError?: ((event: Event) => any) | undefined;
+    onChange?: ((position: number) => any) | undefined;
+    onRendered?: (() => any) | undefined;
+}>, {
+    setPosition: (pos: number) => void;
+    getPosition: () => number;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    error: (event: Event) => any;
+    change: (position: number) => any;
+    rendered: () => any;
+}, string, {
+    pixelSize: number;
+    grayscale: boolean;
+    background: string;
+    initialPosition: number;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        before?(_: {}): any;
+        after?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export * from './types';

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

@@ -0,0 +1,29 @@
+export interface DiffProps {
+    /** Single image source — "after" side auto-pixelates this image */
+    src?: string;
+    /** Pixel block size for pixelation (default: 8) */
+    pixelSize?: number;
+    /** Apply grayscale transform to the pixelated side */
+    grayscale?: boolean;
+    /** Constrain colors to a custom palette (hex strings or RGB tuples) */
+    palette?: string[] | number[][];
+    /** Background color for transparent areas (default: '#FFFFFF') */
+    background?: string;
+    /** Initial slider position 0-100 (default: 50) */
+    initialPosition?: number;
+    /** Container width */
+    width?: number | string;
+    /** Container height */
+    height?: number | string;
+    /** Handle accent color (preset name or hex) */
+    color?: string;
+}
+export interface DiffEmits {
+    (e: 'change', position: number): void;
+    (e: 'rendered'): void;
+    (e: 'error', event: Event): void;
+}
+export interface DiffInstance {
+    setPosition(position: number): void;
+    getPosition(): number;
+}

package/dist/types/components/Divider/index.d.ts

@@ -0,0 +1,30 @@
+export declare const PxDivider: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').DividerProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        direction: "horizontal" | "vertical";
+        contentPosition: "left" | "center" | "right";
+        borderStyle: import('packages/core').DividerBorderStyle;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').DividerProps> & Readonly<{}>, {}, {}, {}, {}, {
+        direction: "horizontal" | "vertical";
+        contentPosition: "left" | "center" | "right";
+        borderStyle: import('packages/core').DividerBorderStyle;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').DividerProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    direction: "horizontal" | "vertical";
+    contentPosition: "left" | "center" | "right";
+    borderStyle: import('packages/core').DividerBorderStyle;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export * from './types';

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

@@ -0,0 +1,10 @@
+export type DividerType = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type DividerBorderStyle = 'solid' | 'dashed' | 'dotted';
+export interface DividerProps {
+    direction?: 'horizontal' | 'vertical';
+    contentPosition?: 'left' | 'center' | 'right';
+    type?: DividerType;
+    color?: string;
+    borderStyle?: DividerBorderStyle;
+    content?: string;
+}

package/dist/types/components/Drawer/constants.d.ts

@@ -0,0 +1 @@
+export declare const DRAWER_DEFAULT_SIZE = "300px";