sakana-element 2.3.0 → 2.4.1

package/dist/theme/Skeleton.css

@@ -0,0 +1,192 @@
+/* ─── Skeleton Variables ─── */
+.px-skeleton {
+  --px-skeleton-bg-color: var(--px-fill-color-darker, #e0e0e0);
+  --px-skeleton-shimmer-color: var(--px-fill-color-light, #f5f5f5);
+  --px-skeleton-border-color: var(--px-border-color, #c0c0c0);
+  --px-skeleton-shadow-color: var(--px-shadow-color, rgba(0, 0, 0, 0.15));
+
+  /* Inset bevels (sunken look — opposite of Button's raised look) */
+  --px-skeleton-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.3);
+  --px-skeleton-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.12);
+
+  /* Dither overlay color */
+  --px-skeleton-dither-color: rgba(255, 255, 255, 0.15);
+}
+/* ─── Base bone / row — positioned container ─── */
+.px-skeleton__bone,
+.px-skeleton__row {
+  display: block;
+  position: relative;
+  background: transparent;
+
+  /* Pixel drop-shadow traces the pseudo-element shapes */
+  filter: drop-shadow(2px 2px 0 var(--px-skeleton-shadow-color));
+}
+/* Border layer */
+.px-skeleton__bone::before, .px-skeleton__row::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-skeleton-border-color);
+    z-index: -1;
+}
+/* Fill layer — inset by border width */
+.px-skeleton__bone::after, .px-skeleton__row::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    background: var(--px-skeleton-bg-color);
+    box-shadow:
+      var(--px-skeleton-inset-highlight),
+      var(--px-skeleton-inset-shadow);
+    z-index: -1;
+}
+.px-skeleton__bone {
+  width: 100%;
+  height: 16px;
+}
+/* ─── Clip-paths per variant ─── */
+/* Rectangular / Text — 2px chamfered pixel corners */
+.px-skeleton--rectangular .px-skeleton__bone::before,
+  .px-skeleton--rectangular .px-skeleton__bone::after,
+  .px-skeleton--rectangular .px-skeleton__row::before,
+  .px-skeleton--rectangular .px-skeleton__row::after,
+  .px-skeleton--text .px-skeleton__bone::before,
+  .px-skeleton--text .px-skeleton__bone::after,
+  .px-skeleton--text .px-skeleton__row::before,
+  .px-skeleton--text .px-skeleton__row::after {
+    clip-path: polygon(
+      0 2px, 2px 2px, 2px 0,
+      calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
+      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
+      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+    );
+}
+/* Rounded — 4px staircase corners */
+.px-skeleton--rounded .px-skeleton__bone::before,
+  .px-skeleton--rounded .px-skeleton__bone::after {
+    clip-path: polygon(
+      0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
+      calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
+      100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
+      4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
+    );
+}
+/* Circular — 4-step staircase pixel circle (matching Avatar/Button) */
+.px-skeleton--circular .px-skeleton__bone::before,
+  .px-skeleton--circular .px-skeleton__bone::after {
+    clip-path: polygon(
+      0 10px, 2px 10px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 10px 2px, 10px 0,
+      calc(100% - 10px) 0, calc(100% - 10px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 10px, 100% 10px,
+      100% calc(100% - 10px), calc(100% - 2px) calc(100% - 10px), calc(100% - 2px) calc(100% - 6px), calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px), calc(100% - 6px) calc(100% - 4px), calc(100% - 6px) calc(100% - 2px), calc(100% - 10px) calc(100% - 2px), calc(100% - 10px) 100%,
+      10px 100%, 10px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 10px), 0 calc(100% - 10px)
+    );
+}
+/* ─── Animation: Shimmer — Scanline sweep ─── */
+@keyframes px-skeleton-shimmer {
+0%   { background-position: -30% 0, 0 0;
+}
+100% { background-position: 130% 0, 0 0;
+}
+}
+.px-skeleton.is-animated.is-animation-shimmer .px-skeleton__bone::after,
+  .px-skeleton.is-animated.is-animation-shimmer .px-skeleton__row::after {
+    background:
+      /* Narrow hard-edged highlight band — scanline-like */
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        transparent 40%,
+        var(--px-skeleton-shimmer-color) 45%,
+        var(--px-skeleton-shimmer-color) 55%,
+        transparent 60%,
+        transparent 100%
+      ),
+      var(--px-skeleton-bg-color);
+    background-size: 200% 100%, 100% 100%;
+    animation: px-skeleton-shimmer 1.5s steps(12, jump-none) infinite;
+}
+/* ─── Animation: Pulse — Two-frame blink ─── */
+@keyframes px-skeleton-pulse {
+0%, 100% { opacity: 1;
+}
+50%      { opacity: 0.5;
+}
+}
+.px-skeleton.is-animated.is-animation-pulse .px-skeleton__bone::after,
+  .px-skeleton.is-animated.is-animation-pulse .px-skeleton__row::after {
+    animation: px-skeleton-pulse 1.2s steps(2, jump-none) infinite;
+}
+/* ─── Animation: Dither — Checkerboard dissolve ─── */
+@keyframes px-skeleton-dither {
+0%   { background-position: 0 0, 0 0;
+}
+25%  { background-position: 2px 0, 0 0;
+}
+50%  { background-position: 2px 2px, 0 0;
+}
+75%  { background-position: 0 2px, 0 0;
+}
+100% { background-position: 0 0, 0 0;
+}
+}
+.px-skeleton.is-animated.is-animation-dither .px-skeleton__bone::after,
+  .px-skeleton.is-animated.is-animation-dither .px-skeleton__row::after {
+    background:
+      /* 2×2 pixel checkerboard dither pattern */
+      repeating-conic-gradient(
+        var(--px-skeleton-dither-color) 0% 25%,
+        transparent 0% 50%
+      ) 0 0 / 4px 4px,
+      var(--px-skeleton-bg-color);
+    animation: px-skeleton-dither 1.6s steps(4, jump-none) infinite;
+}
+/* ─── Text variant — thin horizontal bars ─── */
+.px-skeleton--text .px-skeleton__bone {
+    height: 12px;
+}
+.px-skeleton--text .px-skeleton__row {
+    height: 12px;
+    margin-bottom: 8px;
+}
+.px-skeleton--text .px-skeleton__row:last-child {
+      margin-bottom: 0;
+}
+/* ─── Circular variant ─── */
+.px-skeleton--circular .px-skeleton__bone {
+    width: 40px;
+    height: 40px;
+}
+/* ─── Size: Large ─── */
+.px-skeleton--large .px-skeleton__bone {
+    height: 24px;
+}
+.px-skeleton--large .px-skeleton__row {
+    height: 18px;
+}
+.px-skeleton--large.px-skeleton--circular .px-skeleton__bone {
+    width: 56px;
+    height: 56px;
+}
+/* ─── Size: Small ─── */
+.px-skeleton--small .px-skeleton__bone {
+    height: 12px;
+}
+.px-skeleton--small .px-skeleton__row {
+    height: 10px;
+    margin-bottom: 6px;
+}
+.px-skeleton--small.px-skeleton--circular .px-skeleton__bone {
+    width: 28px;
+    height: 28px;
+}
+/* ─── Dark mode ─── */
+.px-dark .px-skeleton {
+  --px-skeleton-bg-color: var(--px-fill-color-darker, #3a3a3a);
+  --px-skeleton-shimmer-color: var(--px-fill-color, #4a4a4a);
+  --px-skeleton-border-color: var(--px-border-color, #555);
+  --px-skeleton-shadow-color: rgba(0, 0, 0, 0.3);
+  --px-skeleton-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-skeleton-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
+  --px-skeleton-dither-color: rgba(255, 255, 255, 0.08);
+}

package/dist/{es/theme → theme}/Switch.css

@@ -6,6 +6,14 @@
   --px-switch-off-border-color: var(--px-border-color);
   --px-switch-shadow-color: var(--px-shadow-color);
   --px-switch-handle-color: var(--px-color-white);
+
+  /* Track groove (sunken bevel) */
+  --px-switch-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.12);
+  --px-switch-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.1);
+
+  /* Handle (raised bevel) */
+  --px-switch-handle-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.3);
+  --px-switch-handle-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.12);
 }
 /* Base Switch Styles - Pixel Toggle */
 .px-switch {
@@ -40,6 +48,8 @@
 }
 .px-switch.is-checked .px-switch__core::after {
         background: var(--px-switch-on-color);
+        box-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.06),
+                    inset -2px -2px 0 0 rgba(255, 255, 255, 0.15);
 }
 .px-switch.is-checked .px-switch__core {
 
@@ -141,7 +151,7 @@
     );
     z-index: 0;
 }
-/* Fill layer — pixel shape */
+/* Fill layer — pixel shape with sunken groove bevel */
 .px-switch__core::after {
     content: "";
     position: absolute;
@@ -169,6 +179,7 @@
       2px calc(100% - 4px),
       0 calc(100% - 4px)
     );
+    box-shadow: var(--px-switch-inset-shadow), var(--px-switch-inset-highlight);
     z-index: 0;
 }
 /* The toggle handle - pixel square */
@@ -178,7 +189,7 @@
     width: 18px;
     height: 18px;
     background: transparent;
-    transition: none;
+    transition: left 0.15s steps(3);
     z-index: 2;
     display: flex;
     align-items: center;
@@ -205,7 +216,7 @@
         0 calc(100% - 2px)
       );
 }
-/* Handle fill layer */
+/* Handle fill layer — raised bevel like a game D-pad button */
 .px-switch__core .px-switch__core-action::after {
       content: "";
       position: absolute;
@@ -225,6 +236,7 @@
         2px calc(100% - 2px),
         0 calc(100% - 2px)
       );
+      box-shadow: var(--px-switch-handle-highlight), var(--px-switch-handle-shadow);
 }
 /* Icon inside thumb */
 .px-switch__core .px-switch__core-action .px-switch__icon {
@@ -302,3 +314,10 @@
       var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
     );
 }
+/* Dark mode bevel adjustments */
+html.dark .px-switch {
+  --px-switch-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.25);
+  --px-switch-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.05);
+  --px-switch-handle-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
+  --px-switch-handle-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
+}

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/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/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/Dropdown/index.d.ts

@@ -69,8 +69,8 @@ export declare const PxDropdown: {
             }, string, {
                 effect: import('packages/core').TooltipEffect;
                 transition: string;
-                trigger: "hover" | "click" | "contextmenu";
                 placement: import('@popperjs/core').Placement;
+                trigger: "hover" | "click" | "contextmenu";
                 showTimeout: number;
                 hideTimeout: number;
                 enterable: boolean;
@@ -97,15 +97,15 @@ export declare const PxDropdown: {
         } & Readonly<{
             effect: import('packages/core').TooltipEffect;
             transition: string;
-            trigger: "hover" | "click" | "contextmenu";
             placement: import('@popperjs/core').Placement;
+            trigger: "hover" | "click" | "contextmenu";
             showTimeout: number;
             hideTimeout: number;
             enterable: boolean;
         }> & Omit<Readonly<import('packages/core').TooltipProps> & Readonly<{
             "onVisible-change"?: ((value: boolean) => any) | undefined;
             "onClick-outside"?: (() => any) | undefined;
-        }>, "toggle" | "show" | "hide" | ("effect" | "transition" | "trigger" | "placement" | "showTimeout" | "hideTimeout" | "enterable")> & import('vue').ShallowUnwrapRef<{
+        }>, "toggle" | "show" | "hide" | ("effect" | "transition" | "placement" | "trigger" | "showTimeout" | "hideTimeout" | "enterable")> & import('vue').ShallowUnwrapRef<{
             show(): void;
             hide(): void;
             toggle(): void;

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

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

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

@@ -0,0 +1,59 @@
+export declare const PxFilter: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').FilterProps> & Readonly<{
+        onChange?: ((value: import('packages/core').FilterValueType | import('packages/core').FilterValueType[] | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import('packages/core').FilterValueType | import('packages/core').FilterValueType[] | undefined) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        change: (value: import('packages/core').FilterValueType | import('packages/core').FilterValueType[] | undefined) => any;
+        "update:modelValue": (value: import('packages/core').FilterValueType | import('packages/core').FilterValueType[] | undefined) => any;
+    }, import('vue').PublicProps, {
+        disabled: boolean;
+        multiple: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').FilterProps> & Readonly<{
+        onChange?: ((value: import('packages/core').FilterValueType | import('packages/core').FilterValueType[] | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import('packages/core').FilterValueType | import('packages/core').FilterValueType[] | undefined) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        disabled: boolean;
+        multiple: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').FilterProps> & Readonly<{
+    onChange?: ((value: import('packages/core').FilterValueType | import('packages/core').FilterValueType[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import('packages/core').FilterValueType | import('packages/core').FilterValueType[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: import('packages/core').FilterValueType | import('packages/core').FilterValueType[] | undefined) => any;
+    "update:modelValue": (value: import('packages/core').FilterValueType | import('packages/core').FilterValueType[] | undefined) => any;
+}, string, {
+    disabled: boolean;
+    multiple: 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 PxFilterItem: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').FilterItemProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').FilterItemProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').FilterItemProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, 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;
+    };
+}) & import('vue').Plugin;
+export * from './types';

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

@@ -0,0 +1,38 @@
+import { ComputedRef } from 'vue';
+export type FilterValueType = string | number;
+export type FilterType = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export interface FilterOptionProps {
+    value: FilterValueType;
+    label: string;
+    disabled?: boolean;
+}
+export interface FilterProps {
+    modelValue?: FilterValueType | FilterValueType[];
+    options?: FilterOptionProps[];
+    name?: string;
+    disabled?: boolean;
+    size?: 'small' | 'large';
+    type?: FilterType;
+    color?: string;
+    multiple?: boolean;
+}
+export interface FilterEmits {
+    (e: 'update:modelValue', value: FilterValueType | FilterValueType[] | undefined): void;
+    (e: 'change', value: FilterValueType | FilterValueType[] | undefined): void;
+}
+export interface FilterItemProps {
+    value: FilterValueType;
+    label?: string;
+    disabled?: boolean;
+}
+export interface FilterContext {
+    modelValue: ComputedRef<FilterValueType | FilterValueType[] | undefined>;
+    disabled: ComputedRef<boolean>;
+    size: ComputedRef<'small' | 'large' | undefined>;
+    type: ComputedRef<FilterType | undefined>;
+    color: ComputedRef<string | undefined>;
+    name: ComputedRef<string | undefined>;
+    multiple: ComputedRef<boolean>;
+    hasSelection: ComputedRef<boolean>;
+    changeEvent(value: FilterValueType | undefined): void;
+}

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

@@ -24,3 +24,4 @@ export * from './types';
  */
 export declare function registerDefaultPixelIcons(): void;
 export { defaultPixelIcons } from './icons';
+export { registerPixelIcon, registerPixelIcons, hasPixelIcon, getRegisteredIconNames, getPixelIcon, resolveIconName, getIconNameMap, } from '@sakana-element/utils';

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

@@ -0,0 +1,3 @@
+import { KbdKey, KbdKeyInfo } from './types';
+export declare const KBD_KEY_MAP: Record<KbdKey, KbdKeyInfo>;
+export declare const ARROW_KEYS: Set<KbdKey>;

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

@@ -0,0 +1,24 @@
+export declare const PxKbd: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').KbdProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        size: import('packages/core').KbdSize;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLSpanElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').KbdProps> & Readonly<{}>, {}, {}, {}, {}, {
+        size: import('packages/core').KbdSize;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').KbdProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    size: import('packages/core').KbdSize;
+}, {}, 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/Kbd/types.d.ts

@@ -0,0 +1,10 @@
+export type KbdSize = 'small' | 'default' | 'large';
+export type KbdKey = 'command' | 'shift' | 'ctrl' | 'alt' | 'option' | 'enter' | 'delete' | 'escape' | 'tab' | 'capslock' | 'up' | 'down' | 'left' | 'right' | 'space' | 'win' | 'fn' | 'home' | 'end' | 'pageup' | 'pagedown';
+export interface KbdKeyInfo {
+    label: string;
+    icon?: string;
+}
+export interface KbdProps {
+    size?: KbdSize;
+    keys?: KbdKey[];
+}

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

@@ -15,9 +15,9 @@ export declare const PxPixelate: {
         error: (event: Event) => any;
         rendered: () => any;
     }, import('vue').PublicProps, {
-        background: string;
         pixelSize: number;
         grayscale: boolean;
+        background: string;
     }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
         canvasRef: HTMLCanvasElement;
         originRef: HTMLImageElement;
@@ -41,9 +41,9 @@ export declare const PxPixelate: {
         };
         getImageData: () => ImageData | null;
     }, {}, {}, {}, {
-        background: string;
         pixelSize: number;
         grayscale: boolean;
+        background: string;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -64,8 +64,8 @@ export declare const PxPixelate: {
     error: (event: Event) => any;
     rendered: () => any;
 }, string, {
-    background: string;
     pixelSize: number;
     grayscale: boolean;
+    background: string;
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & import('vue').Plugin;
 export * from './types';