@okaapp/oka-ui-sv 0.2.1 → 0.4.0

package/README.md

@@ -76,12 +76,15 @@ OKA UI comes with several built-in themes:
 - Badge
 - Button
 - Checkbox
+- Dialog
 - Input
 - Loading
 - Pagination
+- PinInput
 - Select (Single & Multi)
 - Separator
 - Sidebar
+- Tooltips
 
 ### Usage Example
 

package/dist/components/aaengine-set/auto-buton/AutoButton.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import "./auto-button.css";
+    import EngineOrb from "../engine-orb/EngineOrb.svelte";
+
+    type props = {
+        label: string;
+        onclick?: any;
+        isLoading?: boolean;
+        disabled?: boolean;
+    };
+
+    let {
+        label,
+        onclick,
+        isLoading = false,
+        disabled = false,
+        ...restProps
+    }: props = $props();
+</script>
+
+<button
+    class={`auto-button ${isLoading && "auto-button__loading"} ${disabled && "auto-button__disabled"}`}
+    {onclick}
+    disabled={disabled || onclick}
+    {...restProps}
+>
+    <div
+        class={`auto-button-inner ${isLoading && "auto-button-inner__loading"}`}
+    >
+        <EngineOrb />
+        <div class="auto-button__content">
+            <span
+                class={`auto-button__title ${isLoading && "auto-button__title__loading"} ${disabled && "auto-button__title__disabled"}`}
+            >
+                {#if isLoading}
+                    Chờ chút nha...
+                {:else}
+                    {label}
+                {/if}
+            </span>
+            <span
+                class={`auto-button__subtitle ${isLoading && "auto-button__subtitle__loading"} ${disabled && "auto-button__subtitle__disabled"}`}
+                >Powered by AA.Engine</span
+            >
+        </div>
+    </div>
+</button>

package/dist/components/aaengine-set/auto-buton/AutoButton.svelte.d.ts

@@ -0,0 +1,10 @@
+import "./auto-button.css";
+type props = {
+    label: string;
+    onclick?: any;
+    isLoading?: boolean;
+    disabled?: boolean;
+};
+declare const AutoButton: import("svelte").Component<props, {}, "">;
+type AutoButton = ReturnType<typeof AutoButton>;
+export default AutoButton;

package/dist/components/aaengine-set/auto-buton/auto-button.css

@@ -0,0 +1,82 @@
+.auto-button {
+    border-radius: 80px;
+    background-color: var(--surface-primary);
+    border: 1px solid var(--accent-primary);
+    padding: 8px 20px 8px 8px;
+    width: fit-content;
+    transition: all;
+    transition-duration: 200ms;
+    cursor: pointer;
+}
+
+.auto-button:hover {
+    border: 1px solid var(--accent-secondary);
+}
+
+.auto-button:active {
+    scale: 0.98;
+    background-color: var(--surface-secondary-surface);
+}
+
+.auto-button__loading {
+    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    border: 1px solid var(--stroke-light);
+    cursor: wait;
+}
+
+.auto-button__loading:hover {
+    border: 1px solid var(--stroke-light);
+}
+
+.auto-button__disabled {
+    border: 1px solid var(--stroke-light);
+    cursor: not-allowed;
+    filter: grayscale(100%)
+}
+
+.auto-button__disabled:hover {
+    border: 1px solid var(--stroke-light);
+}
+
+.auto-button-inner {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    overflow: hidden;
+    gap: 8px;
+    width: fit-content;
+}
+
+.auto-button__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    flex-shrink: 0;
+    position: relative;
+    width: fit-content;
+}
+
+.auto-button__title {
+    flex-shrink: 0;
+    font-size: 16px;
+    font-weight: 600;
+    text-align: left;
+    color: var(--content-secondary);
+    line-height: 1.5;
+}
+
+.auto-button__subtitle {
+    flex-shrink: 0;
+    font-size: 12px;
+    font-weight: 300;
+    text-align: left;
+    color: var(--stroke-bold);
+    line-height: 1.5;
+}
+
+@keyframes pulse {
+    50% {
+        opacity: 0.5;
+    }
+}

package/dist/components/aaengine-set/engine-orb/EngineOrb.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import "./engine-orb.css";
+</script>
+
+<div class="spinning-container">
+    <svg
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        class="w-12 h-12 relative"
+        preserveAspectRatio="xMidYMid meet"
+    >
+        <g clip-path="url(#clip0_761_1252)">
+            <ellipse
+                class="liquid-0"
+                cx="24"
+                cy="38.5"
+                rx="16"
+                ry="9.5"
+                fill="url(#paint0_radial_761_1252)"
+                style="animation: liquid1 8s linear infinite; filter: blur(4px);"
+            ></ellipse>
+            <ellipse
+                class="liquid-1"
+                cx="24"
+                cy="13.5"
+                rx="22"
+                ry="13.5"
+                fill="url(#paint1_radial_761_1252)"
+                style="animation: liquid2 8s linear infinite; filter: blur(4px);"
+            ></ellipse>
+            <foreignObject x="-8" y="-8" width="63.9297" height="64"
+                ><div
+                    xmlns="http://www.w3.org/1999/xhtml"
+                    style="backdrop-filter:blur(4px);clip-path:url(#bgblur_1_761_1252_clip_path);height:100%;width:100%"
+                ></div></foreignObject
+            >
+            <ellipse
+                data-figma-bg-blur-radius="8"
+                cx="23.9646"
+                cy="24"
+                rx="23.9646"
+                ry="24"
+                fill="var(--surface-primary, #fff)"
+                fill-opacity="0.16"
+            ></ellipse>
+        </g>
+        <defs>
+            <clipPath
+                id="bgblur_1_761_1252_clip_path"
+                transform="translate(8 8)"
+            >
+                <ellipse cx="23.9646" cy="24" rx="23.9646" ry="24"></ellipse>
+            </clipPath>
+            <radialGradient
+                id="paint0_radial_761_1252"
+                cx="0"
+                cy="0"
+                r="1"
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="translate(24 38.5) rotate(90) scale(15.4375 26)"
+            >
+                <stop stop-color="var(--accent-secondary, #4750FF)"></stop>
+                <stop
+                    offset="1"
+                    stop-color="var(--accent-secondary, #4750FF)"
+                    stop-opacity="0"
+                ></stop>
+            </radialGradient>
+            <radialGradient
+                id="paint1_radial_761_1252"
+                cx="0"
+                cy="0"
+                r="1"
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="translate(24 13.5) rotate(90) scale(20.25 33)"
+            >
+                <stop stop-color="var(--accent-primary, #58C4F5)"></stop>
+                <stop
+                    offset="1"
+                    stop-color="var(--accent-primary, #58C4F5)"
+                    stop-opacity="0"
+                ></stop>
+            </radialGradient>
+            <clipPath id="clip0_761_1252">
+                <rect
+                    width="48"
+                    height="48"
+                    rx="24"
+                    fill="var(--surface-primary, #fff)"
+                ></rect>
+            </clipPath>
+        </defs>
+    </svg>
+</div>

package/dist/components/aaengine-set/engine-orb/EngineOrb.svelte.d.ts

@@ -0,0 +1,19 @@
+import "./engine-orb.css";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const EngineOrb: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type EngineOrb = InstanceType<typeof EngineOrb>;
+export default EngineOrb;

package/dist/components/aaengine-set/engine-orb/engine-orb.css

@@ -0,0 +1,52 @@
+    @keyframes spin {
+        from {
+            transform: rotate(0deg);
+        }
+
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes liquid1 {
+
+        0%,
+        100% {
+            transform: scale(0.8) translateX(0) translateY(0);
+        }
+
+        50% {
+            transform: scale(1.4) translateX(4px) translateY(-2px);
+        }
+    }
+
+    @keyframes liquid2 {
+
+        0%,
+        100% {
+            transform: scale(1.4) translateX(0) translateY(0);
+        }
+
+        50% {
+            transform: scale(0.7) translateX(-2px) translateY(1px);
+        }
+    }
+
+    .liquid-0 {
+        transform-origin: 24px 38.5px;
+        animation: liquid1 8s ease-in-out infinite;
+    }
+
+    .liquid-1 {
+        transform-origin: 24px 13.5px;
+        animation: liquid2 8s ease-in-out infinite;
+    }
+
+    .spinning-container {
+        width: 48px;
+        height: 48px;
+        border-radius: 9999px !important;
+        overflow: clip;
+        animation: spin 8s linear infinite;
+        transform-origin: 24px 24px;
+    }

package/dist/components/core/dialog/Dialog.svelte

@@ -12,6 +12,7 @@
         description?: Snippet;
         contentProps?: WithoutChild<Dialog.ContentProps>;
         actionButtons?: Snippet;
+        size?: "sm" | "md" | "lg";
     };
 
     let {
@@ -23,8 +24,15 @@
         subtitle,
         description,
         actionButtons,
+        size = "md",
         ...restProps
     }: Props = $props();
+
+    const sizeClass = {
+        sm: "dialog-content--sm",
+        md: "dialog-content--md",
+        lg: "dialog-content--lg",
+    };
 </script>
 
 <Dialog.Root bind:open {...restProps}>
@@ -33,7 +41,10 @@
     </Dialog.Trigger>
     <Dialog.Portal>
         <Dialog.Overlay class="dialog-overlay" />
-        <Dialog.Content {...contentProps} class="dialog-content">
+        <Dialog.Content
+            {...contentProps}
+            class={`dialog-content ${sizeClass[size]}`}
+        >
             <div class="dialog-topbar">
                 <div class="dialog-topbar-content">
                     <Dialog.Title class="dialog-title">

package/dist/components/core/dialog/Dialog.svelte.d.ts

@@ -8,6 +8,7 @@ type Props = Dialog.RootProps & {
     description?: Snippet;
     contentProps?: WithoutChild<Dialog.ContentProps>;
     actionButtons?: Snippet;
+    size?: "sm" | "md" | "lg";
 };
 declare const Dialog: import("svelte").Component<Props, {}, "open">;
 type Dialog = ReturnType<typeof Dialog>;

package/dist/components/core/dialog/dialog.css

@@ -21,11 +21,32 @@
     width: fit-content;
     max-width: 800px;
     min-width: 480px;
+    max-height: calc(100vh - 48px);
     border-radius: 12px;
     background-color: var(--surface-primary);
     transform: translate(-50%, -50%);
     outline: none;
     overflow: clip;
+    display: flex;
+    flex-direction: column;
+}
+
+.dialog-content--sm {
+    width: 480px;
+    min-width: 480px;
+    max-width: 480px;
+}
+
+.dialog-content--md {
+    width: 600px;
+    min-width: 600px;
+    max-width: 600px;
+}
+
+.dialog-content--lg {
+    width: 800px;
+    min-width: 800px;
+    max-width: 800px;
 }
 
 .dialog-content[data-state="open"] {
@@ -83,9 +104,8 @@
 .dialog-body {
     display: flex;
     flex-direction: column;
-    width: fit-content;
+    width: 100%;
     min-width: 480px;
-    max-width: 480px;
     padding: 16px;
     gap: 16px;
 }

package/dist/components/core/input/Input.svelte

@@ -17,9 +17,12 @@
         placeholder = "Nhập vào đây",
         ref = $bindable(null),
         value = $bindable(),
+        invalid = $bindable(false),
         class: className,
         ...restProps
-    }: Props = $props();
+    }: Props & {
+        invalid?: boolean;
+    } = $props();
 </script>
 
 <input
@@ -27,6 +30,7 @@
     bind:this={ref}
     data-slot="input"
     class="input focus-override"
+    class:input--invalid={invalid}
     style="font: inherit;"
     bind:value
     {...restProps}

package/dist/components/core/input/Input.svelte.d.ts

@@ -9,6 +9,9 @@ type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type?: InputType;
     files?: undefined;
 })>;
-declare const Input: import("svelte").Component<Props, {}, "ref" | "value">;
+type $$ComponentProps = Props & {
+    invalid?: boolean;
+};
+declare const Input: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "invalid">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/core/input/input.css

@@ -24,7 +24,6 @@
 }
 
 .input:hover {
-    background-color: var(--surface-secondary);
     border-color: var(--stroke-medium);
 }
 

package/dist/components/core/pin-input/PinInput.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import "./pin-input.css";
+    import { PinInput, type WithoutChildrenOrChild } from "bits-ui";
+
+    let {
+        ref = $bindable(null),
+        value = $bindable(""),
+        maxlength = 6,
+        disabled = false,
+        ...props
+    }: WithoutChildrenOrChild<PinInput.RootProps> = $props();
+</script>
+
+<PinInput.Root
+    {maxlength}
+    bind:value
+    bind:ref
+    {disabled}
+    class={`pin-input-root ${disabled ? "pin-input--disabled" : ""}`}
+    {...props}
+>
+    {#snippet children({ cells })}
+        <div class="pin-input">
+            {#each cells as cell, i (i)}
+                <PinInput.Cell {cell} class="pin-input__cell">
+                    {#if cell.char !== null}
+                        <div class="pin-input__char">
+                            {cell.char}
+                        </div>
+                    {/if}
+                    {#if cell.hasFakeCaret}
+                        <div class="pin-input__caret"></div>
+                    {/if}
+                </PinInput.Cell>
+            {/each}
+        </div>
+    {/snippet}
+</PinInput.Root>

package/dist/components/core/pin-input/PinInput.svelte.d.ts

@@ -0,0 +1,5 @@
+import "./pin-input.css";
+import { PinInput } from "bits-ui";
+declare const PinInput: import("svelte").Component<Omit<PinInput.RootProps, "children">, {}, "ref" | "value">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/components/core/pin-input/pin-input.css

@@ -0,0 +1,103 @@
+.pin-input {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.pin-input--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.pin-input__cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    font-size: 20px;
+    font-weight: 600;
+    border: 2px solid var(--stroke-light);
+    background-color: var(--surface-primary);
+    color: var(--content-primary);
+    border-radius: 12px;
+    transition: all 300ms ease;
+    outline: none;
+    cursor: text;
+    position: relative;
+}
+
+.pin-input .pin-input__cell:hover {
+    border-color: var(--stroke-medium) !important;
+}
+
+.pin-input__cell:hover {
+    border-color: var(--stroke-medium) !important;
+}
+
+.pin-input__cell[data-active] {
+    border-color: var(--accent-primary);
+    background-color: var(--surface-secondary);
+    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.1);
+}
+
+.pin-input__cell[data-inactive] {
+    border-color: var(--stroke-light);
+}
+
+/* Caret animation for the active cell */
+.pin-input__caret {
+    position: absolute;
+    width: 2px;
+    height: 24px;
+    background-color: var(--accent-primary);
+    animation: caret-blink 1s ease-in-out infinite;
+    pointer-events: none;
+}
+
+@keyframes caret-blink {
+
+    0%,
+    49% {
+        opacity: 1;
+    }
+
+    50%,
+    100% {
+        opacity: 0;
+    }
+}
+
+/* Root container adjustments */
+.pin-input-root {
+    display: flex;
+    gap: 8px;
+    position: relative;
+}
+
+.pin-input-root[disabled] .pin-input__cell {
+    background-color: var(--surface-tertiary);
+    border-color: var(--stroke-muted);
+    color: var(--content-tertiary);
+    cursor: not-allowed;
+}
+
+.pin-input-root[disabled] .pin-input__cell:hover {
+    border-color: var(--stroke-muted);
+}
+
+/* Text character styling */
+.pin-input__char {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-variant: tabular-nums;
+}
+
+/* Focus visible state */
+.pin-input__cell:focus-visible {
+    outline: 2px solid var(--accent-primary);
+    outline-offset: 2px;
+}

package/dist/components/core/tooltips/Tooltips.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import "./tooltips.css";
+    import { Tooltip } from "bits-ui";
+    import type { Snippet } from "svelte";
+
+    let {
+        children,
+        trigger,
+        delayDuration = 200,
+        ...props
+    }: Tooltip.RootProps & {
+        trigger: Snippet;
+        children: Snippet;
+    } = $props();
+</script>
+
+<Tooltip.Provider delayDuration={200}>
+    <Tooltip.Root {delayDuration} {...props}>
+        <Tooltip.Trigger class="tooltip-trigger">
+            {@render trigger()}
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+            <Tooltip.Content class="tooltip-content" sideOffset={8}>
+                {@render children()}
+            </Tooltip.Content>
+        </Tooltip.Portal>
+    </Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/core/tooltips/Tooltips.svelte.d.ts

@@ -1,26 +1,10 @@
-export default Tooltips;
-type Tooltips = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+import "./tooltips.css";
+import { Tooltip } from "bits-ui";
+import type { Snippet } from "svelte";
+type $$ComponentProps = Tooltip.RootProps & {
+    trigger: Snippet;
+    children: Snippet;
 };
-declare const Tooltips: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const Tooltips: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tooltips = ReturnType<typeof Tooltips>;
+export default Tooltips;

package/dist/components/core/tooltips/tooltips.css

@@ -0,0 +1,37 @@
+.tooltip-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: help;
+    outline: none;
+}
+
+.tooltip-content {
+    background-color: var(--content-primary);
+    color: var(--content-inversed);
+    padding: 12px 12px;
+    border-radius: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    max-width: 200px;
+    word-wrap: break-word;
+    /* box-shadow: 0 0 12px rgba(0, 0, 0, 0.12); */
+    animation: tooltip-in 200ms ease-out;
+    z-index: 1000;
+}
+
+@keyframes tooltip-in {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.tooltip-provider {
+    position: relative;
+}

package/dist/components/illustrations/SVG31.svelte

@@ -21,7 +21,7 @@
                     ><g style="fill:#000" class="frame-children"
                         ><path
                             d="M81.902 130.6c28.001 0 50.702-22.7 50.702-50.8S109.904 29 81.902 29c-28 0-50.7 22.7-50.7 50.8s22.7 50.8 50.7 50.8"
-                            style="fill: var(--surface-tertiary, #f3f3f4);fill-opacity:1"
+                            style="fill: var(--stroke-muted, #f3f3f4);fill-opacity:1"
                             class="fills"
                         /><path
                             d="M111.346 36.635c1.508 0 2.784 1.155 2.784 2.77v81.727c0 1.501-1.16 2.771-2.784 2.771H50.908c-1.508 0-2.784-1.155-2.784-2.77V39.405c0-1.5 1.16-2.77 2.784-2.77z"
@@ -37,7 +37,7 @@
                             class="fills"
                         /><path
                             d="M111.114 42.984a.913.913 0 0 0-.928-.923H52.185c-.465 0-.93.346-.93.923.697 29.897.93 63.719-2.32 72.492l55.567-.808c3.364-15.237 5.916-42.595 6.612-71.684"
-                            style="fill: var(--surface-tertiary, #f3f3f4);fill-opacity:1"
+                            style="fill: var(--stroke-muted, #f3f3f4);fill-opacity:1"
                             class="fills"
                         /><g filter="url(#a)" style="fill:#000"
                             ><defs
@@ -81,7 +81,7 @@
                             /></g
                         ><path
                             d="M109.374 75.883c-1.624 28.165-26.797 34.053-29.812 34.399-1.393.115-4.061.346-8.817.346 12.528-5.772 19.257-16.16 19.14-24.24 6.033.46 16.473 0 19.489-10.505"
-                            style="fill: var(--surface-tertiary, #f3f3f4);fill-opacity:1"
+                            style="fill: var(--stroke-muted, #f3f3f4);fill-opacity:1"
                             class="fills"
                         /><defs
                             ><linearGradient
@@ -103,7 +103,7 @@
                             class="fills"
                         /><path
                             d="M81.07 36.982c.927 0 1.623-.693 1.623-1.616s-.696-1.616-1.624-1.616c-.927 0-1.624.692-1.624 1.616 0 .923.812 1.616 1.624 1.616"
-                            style="fill: var(--surface-tertiary, #f3f3f4);fill-opacity:1"
+                            style="fill: var(--stroke-muted, #f3f3f4);fill-opacity:1"
                             class="fills"
                         /><path
                             d="M94.758 40.445c-.348 1.962-1.973 3.578-4.06 3.578H71.44c-2.088 0-3.712-1.616-4.06-3.578z"

package/dist/components/styling/oka-style-provider/OKAStyleProvider.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
     import "./oka-style.css";
+    import { Tooltip } from "bits-ui";
     let { children, ...props } = $props();
 </script>
 
 <div id="oka-style-container" {...props}>
-    {@render children()}
+    <Tooltip.Provider>
+        {@render children()}
+    </Tooltip.Provider>
 </div>

package/dist/index.d.ts

@@ -6,12 +6,16 @@ export { default as Dialog } from './components/core/dialog/Dialog.svelte';
 export { default as Input } from './components/core/input/Input.svelte';
 export { default as Loading } from './components/core/loading/Loading.svelte';
 export { default as Pagination } from './components/core/pagination/Pagination.svelte';
+export { default as PinInput } from './components/core/pin-input/PinInput.svelte';
 export { default as SingleSelect } from './components/core/select/SingleSelect.svelte';
 export { default as MultiSelect } from './components/core/select/MultiSelect.svelte';
 export { default as Separator } from './components/core/separator/Separator.svelte';
 export { default as Sidebar } from './components/core/sidebar/Sidebar.svelte';
+export { default as Tooltips } from './components/core/tooltips/Tooltips.svelte';
 export { default as OKAStyleProvider } from './components/styling/oka-style-provider/OKAStyleProvider.svelte';
 export { default as ThemeSwitcher } from './components/styling/theme-switcher/ThemeSwitcher.svelte';
+export { default as AutoButton } from './components/aaengine-set/auto-buton/AutoButton.svelte';
+export { default as EngineOrb } from './components/aaengine-set/engine-orb/EngineOrb.svelte';
 export { default as SVG31 } from './components/illustrations/SVG31.svelte';
 export type * from './components/core/select/Types.js';
 export type * from './components/core/sidebar/Types.js';

package/dist/index.js

@@ -7,12 +7,17 @@ export { default as Dialog } from './components/core/dialog/Dialog.svelte';
 export { default as Input } from './components/core/input/Input.svelte';
 export { default as Loading } from './components/core/loading/Loading.svelte';
 export { default as Pagination } from './components/core/pagination/Pagination.svelte';
+export { default as PinInput } from './components/core/pin-input/PinInput.svelte';
 export { default as SingleSelect } from './components/core/select/SingleSelect.svelte';
 export { default as MultiSelect } from './components/core/select/MultiSelect.svelte';
 export { default as Separator } from './components/core/separator/Separator.svelte';
 export { default as Sidebar } from './components/core/sidebar/Sidebar.svelte';
+export { default as Tooltips } from './components/core/tooltips/Tooltips.svelte';
 // Styling & theming
 export { default as OKAStyleProvider } from './components/styling/oka-style-provider/OKAStyleProvider.svelte';
 export { default as ThemeSwitcher } from './components/styling/theme-switcher/ThemeSwitcher.svelte';
+// AA Engine components
+export { default as AutoButton } from './components/aaengine-set/auto-buton/AutoButton.svelte';
+export { default as EngineOrb } from './components/aaengine-set/engine-orb/EngineOrb.svelte';
 // Misc
 export { default as SVG31 } from './components/illustrations/SVG31.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@okaapp/oka-ui-sv",
-	"version": "0.2.1",
+	"version": "0.4.0",
 	"description": "OKA UI Svelte components library for the Appta software platform",
 	"license": "MIT",
 	"scripts": {