@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/web/pagination/pagination-next.svelte.d.ts

@@ -0,0 +1,75 @@
+import { SvelteComponent } from "svelte";
+export interface PaginationNextProps {
+    /**
+     * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+     */
+    href?: string;
+    /**
+     * Teks label tombol.
+     * @default 'Next'
+     */
+    text?: string;
+    /**
+     * Mode hanya menampilkan ikon tanpa teks.
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Menonaktifkan tombol.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Skala ukuran tombol.
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg" | "icon";
+    /**
+     * Kustomisasi visual granular tombol navigasi (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Callback saat tombol diklik.
+     */
+    onClick?: (event?: any) => void;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Label aksesibilitas ARIA.
+     * @default 'Go to next page'
+     */
+    ariaLabel?: string;
+    /**
+     * Ikon kustom untuk tombol next page (menggantikan >).
+     */
+    icon?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        href?: PaginationNextProps["href"];
+        disabled?: PaginationNextProps["disabled"];
+        className?: PaginationNextProps["className"];
+        ariaLabel?: PaginationNextProps["ariaLabel"];
+        size?: PaginationNextProps["size"];
+        ui?: PaginationNextProps["ui"];
+        onClick?: PaginationNextProps["onClick"];
+        iconOnly?: PaginationNextProps["iconOnly"];
+        text?: PaginationNextProps["text"];
+        icon?: PaginationNextProps["icon"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type PaginationNextProps_ = typeof __propDef.props;
+export type PaginationNextEvents = typeof __propDef.events;
+export type PaginationNextSlots = typeof __propDef.slots;
+export default class PaginationNext extends SvelteComponent<PaginationNextProps_, PaginationNextEvents, PaginationNextSlots> {
+}
+export {};

package/dist/web/pagination/pagination-previous.svelte

@@ -0,0 +1,99 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let href = void 0;
+export let disabled = void 0;
+export let className = void 0;
+export let ariaLabel = void 0;
+export let size = void 0;
+export let ui = void 0;
+export let onClick = void 0;
+export let icon = void 0;
+export let iconOnly = void 0;
+export let text = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+{#if Boolean(href) && !disabled}
+  <a
+    style={stringifyStyles({
+      ...buildUiVars(ui),
+    })}
+    {href}
+    class={`ttdk-pagination-link ttdk-pagination-prev ${
+      className || ""
+    }`.trim()}
+    aria-label={ariaLabel || "Go to previous page"}
+    data-size={size || "md"}
+    data-disabled={disabled ? "true" : "false"}
+    on:click={(e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      if (onClick) {
+        onClick(e);
+      }
+    }}
+  >
+    {#if icon}
+      {icon}
+    {/if}
+    {#if !icon}
+      <svg
+        class="ttdk-pagination-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        aria-hidden="true"><polyline points="15 18 9 12 15 6" /></svg
+      >
+    {/if}
+    {#if !iconOnly}
+      <span class="ttdk-pagination-prev-text">{text || "Previous"}</span>
+    {/if}</a
+  >
+{/if}
+
+{#if !href || Boolean(disabled)}
+  <button
+    style={stringifyStyles({
+      ...buildUiVars(ui),
+    })}
+    type="button"
+    class={`ttdk-pagination-link ttdk-pagination-prev ${
+      className || ""
+    }`.trim()}
+    aria-label={ariaLabel || "Go to previous page"}
+    data-size={size || "md"}
+    data-disabled={disabled ? "true" : "false"}
+    {disabled}
+    on:click={(e) => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    }}
+  >
+    {#if icon}
+      {icon}
+    {/if}
+    {#if !icon}
+      <svg
+        class="ttdk-pagination-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        aria-hidden="true"><polyline points="15 18 9 12 15 6" /></svg
+      >
+    {/if}
+    {#if !iconOnly}
+      <span class="ttdk-pagination-prev-text">{text || "Previous"}</span>
+    {/if}</button
+  >
+{/if}

package/dist/web/pagination/pagination-previous.svelte.d.ts

@@ -0,0 +1,75 @@
+import { SvelteComponent } from "svelte";
+export interface PaginationPreviousProps {
+    /**
+     * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+     */
+    href?: string;
+    /**
+     * Teks label tombol.
+     * @default 'Previous'
+     */
+    text?: string;
+    /**
+     * Mode hanya menampilkan ikon tanpa teks.
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Menonaktifkan tombol.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Skala ukuran tombol.
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg" | "icon";
+    /**
+     * Kustomisasi visual granular tombol navigasi (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Callback saat tombol diklik.
+     */
+    onClick?: (event?: any) => void;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Label aksesibilitas ARIA.
+     * @default 'Go to previous page'
+     */
+    ariaLabel?: string;
+    /**
+     * Ikon kustom untuk tombol previous page (menggantikan <).
+     */
+    icon?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        href?: PaginationPreviousProps["href"];
+        disabled?: PaginationPreviousProps["disabled"];
+        className?: PaginationPreviousProps["className"];
+        ariaLabel?: PaginationPreviousProps["ariaLabel"];
+        size?: PaginationPreviousProps["size"];
+        ui?: PaginationPreviousProps["ui"];
+        onClick?: PaginationPreviousProps["onClick"];
+        icon?: PaginationPreviousProps["icon"];
+        iconOnly?: PaginationPreviousProps["iconOnly"];
+        text?: PaginationPreviousProps["text"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type PaginationPreviousProps_ = typeof __propDef.props;
+export type PaginationPreviousEvents = typeof __propDef.events;
+export type PaginationPreviousSlots = typeof __propDef.slots;
+export default class PaginationPrevious extends SvelteComponent<PaginationPreviousProps_, PaginationPreviousEvents, PaginationPreviousSlots> {
+}
+export {};

package/dist/web/pagination/pagination.css

@@ -0,0 +1 @@
+.ttdk-pagination{box-sizing:border-box;font-family:var(--ttdk-font-sans);line-height:var(--ttdk-line-height-tight);user-select:none;justify-content:center;align-items:center;width:100%;max-width:100%;display:flex}.ttdk-pagination-auto-wrapper{justify-content:center;align-items:center;gap:var(--ttdk-spacing-md);flex-wrap:wrap;width:100%;display:flex}.ttdk-pagination-limit{align-items:center;gap:var(--ttdk-spacing-xs);font-size:var(--ttdk-font-size-12);color:var(--ttdk-text-icon-secondary);display:inline-flex}.ttdk-pagination-limit-label{font-size:var(--ttdk-font-size-12);font-weight:var(--ttdk-font-weight-medium);color:var(--ttdk-text-icon-secondary);white-space:nowrap}.ttdk-pagination-limit-select{height:32px;padding:0 var(--ttdk-spacing-xs);border-radius:var(--ttdk-radius-input-md);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);background-color:var(--ttdk-bg-base-primary);color:var(--ttdk-text-icon-primary);font-size:var(--ttdk-font-size-12);font-family:inherit;font-weight:var(--ttdk-font-weight-medium);cursor:pointer;outline:none;transition:border-color .15s,box-shadow .15s}.ttdk-pagination-limit-select:focus{border-color:var(--ttdk-stroke-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--ttdk-stroke-border-focus) 20%, transparent)}.ttdk-pagination-content{justify-content:center;align-items:center;gap:var(--ttdk-spacing-xxs);flex-flow:wrap;max-width:100%;margin:0;padding:0;list-style:none;display:inline-flex}.ttdk-pagination-item{align-items:center;margin:0;padding:0;display:inline-flex}.ttdk-pagination-link{box-sizing:border-box;font-family:inherit;font-weight:var(--ttdk-font-weight-medium);cursor:pointer;white-space:nowrap;vertical-align:middle;border:var(--ttdk-stroke-width-thin) solid transparent;color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));border-radius:var(--ttdk-radius-input-lg);background-color:#0000;outline:none;justify-content:center;align-items:center;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s;display:inline-flex}.ttdk-pagination-link:hover:not([data-disabled=true]):not(:disabled){background-color:var(--ttdk-brand-subtle);color:var(--ttdk-brand-default)}.ttdk-pagination-link:focus-visible{outline:2px solid var(--ttdk-stroke-border-focus);outline-offset:2px}.ttdk-pagination-link[data-active=true]{background-color:var(--ttdk-brand-default);color:var(--ttdk-text-icon-stay-white);border-color:var(--ttdk-brand-default);font-weight:var(--ttdk-font-weight-semibold)}.ttdk-pagination-link[data-active=true]:hover:not([data-disabled=true]):not(:disabled){background-color:var(--ttdk-brand-strong);border-color:var(--ttdk-brand-strong);color:var(--ttdk-text-icon-stay-white)}.ttdk-pagination-link[data-disabled=true],.ttdk-pagination-link:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ttdk-pagination-icon{width:var(--ttdk-font-size-16);height:var(--ttdk-font-size-16);stroke:currentColor;stroke-width:var(--ttdk-stroke-width-med);stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.ttdk-pagination[data-size=sm] .ttdk-pagination-link,.ttdk-pagination-link[data-size=sm]{min-width:28px;height:28px;padding:0 var(--ttdk-spacing-xs);font-size:var(--ttdk-font-size-12);border-radius:var(--ttdk-radius-input-md);gap:var(--ttdk-spacing-xxs)}.ttdk-pagination[data-size=sm] .ttdk-pagination-icon,.ttdk-pagination-link[data-size=sm] .ttdk-pagination-icon{width:var(--ttdk-font-size-14);height:var(--ttdk-font-size-14)}.ttdk-pagination[data-size=sm] .ttdk-selectbox-control{height:28px;min-height:28px;font-size:var(--ttdk-font-size-12);padding:0 8px}.ttdk-pagination .ttdk-pagination-link,.ttdk-pagination[data-size=md] .ttdk-pagination-link,.ttdk-pagination-link[data-size=md]{min-width:36px;height:36px;padding:0 var(--ttdk-spacing-sm);font-size:var(--ttdk-font-size-14);border-radius:var(--ttdk-radius-input-lg);gap:6px}.ttdk-pagination .ttdk-pagination-icon,.ttdk-pagination[data-size=md] .ttdk-pagination-icon,.ttdk-pagination-link[data-size=md] .ttdk-pagination-icon{width:var(--ttdk-font-size-16);height:var(--ttdk-font-size-16)}.ttdk-pagination[data-size=lg] .ttdk-pagination-link,.ttdk-pagination-link[data-size=lg]{min-width:44px;height:44px;padding:0 var(--ttdk-spacing-md);font-size:var(--ttdk-font-size-16);border-radius:var(--ttdk-radius-input-lg);gap:var(--ttdk-spacing-xs)}.ttdk-pagination[data-size=lg] .ttdk-pagination-icon,.ttdk-pagination-link[data-size=lg] .ttdk-pagination-icon{width:var(--ttdk-font-size-18);height:var(--ttdk-font-size-18)}.ttdk-pagination-first,.ttdk-pagination-last{padding:0 var(--ttdk-spacing-xs)}.ttdk-pagination-prev{padding-left:var(--ttdk-spacing-xs)}.ttdk-pagination-next{padding-right:var(--ttdk-spacing-xs)}.ttdk-pagination-ellipsis{min-width:36px;height:36px;color:var(--ttdk-text-icon-disabled);justify-content:center;align-items:center;display:inline-flex}.ttdk-pagination[data-size=sm] .ttdk-pagination-ellipsis{min-width:28px;height:28px}.ttdk-pagination[data-size=lg] .ttdk-pagination-ellipsis{min-width:44px;height:44px}.ttdk-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html.dark .ttdk-pagination-link,body.dark .ttdk-pagination-link,.dark .ttdk-pagination-link{color:var(--ttdk-text-icon-primary)}html.dark .ttdk-pagination-link:hover:not([data-disabled=true]):not(:disabled),body.dark .ttdk-pagination-link:hover:not([data-disabled=true]):not(:disabled),.dark .ttdk-pagination-link:hover:not([data-disabled=true]):not(:disabled){background-color:color-mix(in srgb, var(--ttdk-brand-default) 15%, transparent);color:var(--ttdk-brand-default)}html.dark .ttdk-pagination-link[data-active=true],body.dark .ttdk-pagination-link[data-active=true],.dark .ttdk-pagination-link[data-active=true]{background-color:var(--ttdk-brand-default);color:var(--ttdk-text-icon-stay-white);border-color:var(--ttdk-brand-default)}html.dark .ttdk-pagination-limit,body.dark .ttdk-pagination-limit,html.dark .ttdk-pagination-limit-label,body.dark .ttdk-pagination-limit-label,.dark .ttdk-pagination-limit,.dark .ttdk-pagination-limit-label{color:var(--ttdk-text-icon-secondary)}html.dark .ttdk-pagination-limit-select,body.dark .ttdk-pagination-limit-select,.dark .ttdk-pagination-limit-select{background-color:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-primary)}html.dark .ttdk-pagination-ellipsis,body.dark .ttdk-pagination-ellipsis,.dark .ttdk-pagination-ellipsis{color:var(--ttdk-text-icon-disabled)}@media (width<=640px){.ttdk-pagination-prev-text,.ttdk-pagination-next-text{display:none}.ttdk-pagination-prev,.ttdk-pagination-next{padding:0 var(--ttdk-spacing-xs)}}