@okaapp/oka-ui-sv 0.2.1 → 0.3.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/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/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,10 +6,12 @@ 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 SVG31 } from './components/illustrations/SVG31.svelte';

package/dist/index.js

@@ -7,10 +7,12 @@ 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';

package/package.json

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