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

package/src/web/pagination/pagination-first.tsx

@@ -0,0 +1,155 @@
+"use client";
+import * as React from "react";
+
+export interface PaginationFirstProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+   */
+  href?: string;
+
+  /**
+   * Teks label tombol opsional.
+   */
+  text?: string;
+
+  /**
+   * Mode hanya menampilkan ikon tanpa teks.
+   * @default true
+   */
+  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 first page'
+   */
+  ariaLabel?: string;
+
+  /**
+   * Ikon kustom untuk tombol first page (menggantikan <<).
+   */
+  icon?: any;
+}
+
+/**
+ * Tombol navigasi langsung ke halaman pertama (Compound PaginationFirst).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function PaginationFirst(props: PaginationFirstProps) {
+  return (
+    <>
+      {Boolean(props.href) && !props.disabled ? (
+        <a
+          href={props.href}
+          className={`ttdk-pagination-link ttdk-pagination-first ${
+            props.className || ""
+          }`.trim()}
+          aria-label={props.ariaLabel || "Go to first page"}
+          data-size={props.size || "md"}
+          data-disabled={props.disabled ? "true" : "false"}
+          style={{
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+              ...props.style,
+          }}
+          onClick={(e) => {
+            if (props.disabled) {
+              e.preventDefault();
+              return;
+            }
+            if (props.onClick) {
+              props.onClick(e);
+            }
+          }}
+        >
+          {props.icon ? <>{props.icon}</> : null}
+          {!props.icon ? (
+            <svg
+              className="ttdk-pagination-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+            >
+              <polyline points="11 17 6 12 11 7" />
+              <polyline points="18 17 13 12 18 7" />
+            </svg>
+          ) : null}
+          {!props.iconOnly && Boolean(props.text) ? (
+            <span className="ttdk-pagination-first-text">{props.text}</span>
+          ) : null}
+        </a>
+      ) : null}
+      {!props.href || Boolean(props.disabled) ? (
+        <button
+          type="button"
+          className={`ttdk-pagination-link ttdk-pagination-first ${
+            props.className || ""
+          }`.trim()}
+          aria-label={props.ariaLabel || "Go to first page"}
+          data-size={props.size || "md"}
+          data-disabled={props.disabled ? "true" : "false"}
+          disabled={props.disabled}
+          style={{
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+          onClick={(e) => {
+            if (!props.disabled && props.onClick) {
+              props.onClick(e);
+            }
+          }}
+        >
+          {props.icon ? <>{props.icon}</> : null}
+          {!props.icon ? (
+            <svg
+              className="ttdk-pagination-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+            >
+              <polyline points="11 17 6 12 11 7" />
+              <polyline points="18 17 13 12 18 7" />
+            </svg>
+          ) : null}
+          {!props.iconOnly && Boolean(props.text) ? (
+            <span className="ttdk-pagination-first-text">{props.text}</span>
+          ) : null}
+        </button>
+      ) : null}
+    </>
+  );
+}
+
+export default PaginationFirst;

package/src/web/pagination/pagination-item.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+export interface PaginationItemProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Kustomisasi visual granular li.ttdk-pagination-item (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten pagination item.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen pembungkus item halaman `<li>` (Compound PaginationItem ala Shadcn UI).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function PaginationItem(props: PaginationItemProps) {
+  return (
+    <li
+      className={`ttdk-pagination-item ${props.className || ""}`.trim()}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <>{props.children}</>
+    </li>
+  );
+}
+
+export default PaginationItem;

package/src/web/pagination/pagination-last.tsx

@@ -0,0 +1,155 @@
+"use client";
+import * as React from "react";
+
+export interface PaginationLastProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+   */
+  href?: string;
+
+  /**
+   * Teks label tombol opsional.
+   */
+  text?: string;
+
+  /**
+   * Mode hanya menampilkan ikon tanpa teks.
+   * @default true
+   */
+  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 last page'
+   */
+  ariaLabel?: string;
+
+  /**
+   * Ikon kustom untuk tombol last page (menggantikan >>).
+   */
+  icon?: any;
+}
+
+/**
+ * Tombol navigasi langsung ke halaman terakhir (Compound PaginationLast).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function PaginationLast(props: PaginationLastProps) {
+  return (
+    <>
+      {Boolean(props.href) && !props.disabled ? (
+        <a
+          href={props.href}
+          className={`ttdk-pagination-link ttdk-pagination-last ${
+            props.className || ""
+          }`.trim()}
+          aria-label={props.ariaLabel || "Go to last page"}
+          data-size={props.size || "md"}
+          data-disabled={props.disabled ? "true" : "false"}
+          style={{
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+              ...props.style,
+          }}
+          onClick={(e) => {
+            if (props.disabled) {
+              e.preventDefault();
+              return;
+            }
+            if (props.onClick) {
+              props.onClick(e);
+            }
+          }}
+        >
+          {!props.iconOnly && Boolean(props.text) ? (
+            <span className="ttdk-pagination-last-text">{props.text}</span>
+          ) : null}
+          {props.icon ? <>{props.icon}</> : null}
+          {!props.icon ? (
+            <svg
+              className="ttdk-pagination-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+            >
+              <polyline points="13 17 18 12 13 7" />
+              <polyline points="6 17 11 12 6 7" />
+            </svg>
+          ) : null}
+        </a>
+      ) : null}
+      {!props.href || Boolean(props.disabled) ? (
+        <button
+          type="button"
+          className={`ttdk-pagination-link ttdk-pagination-last ${
+            props.className || ""
+          }`.trim()}
+          aria-label={props.ariaLabel || "Go to last page"}
+          data-size={props.size || "md"}
+          data-disabled={props.disabled ? "true" : "false"}
+          disabled={props.disabled}
+          style={{
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+          onClick={(e) => {
+            if (!props.disabled && props.onClick) {
+              props.onClick(e);
+            }
+          }}
+        >
+          {!props.iconOnly && Boolean(props.text) ? (
+            <span className="ttdk-pagination-last-text">{props.text}</span>
+          ) : null}
+          {props.icon ? <>{props.icon}</> : null}
+          {!props.icon ? (
+            <svg
+              className="ttdk-pagination-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+            >
+              <polyline points="13 17 18 12 13 7" />
+              <polyline points="6 17 11 12 6 7" />
+            </svg>
+          ) : null}
+        </button>
+      ) : null}
+    </>
+  );
+}
+
+export default PaginationLast;

package/src/web/pagination/pagination-link.tsx

@@ -0,0 +1,121 @@
+"use client";
+import * as React from "react";
+
+export interface PaginationLinkProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Menandai item sebagai halaman yang sedang aktif saat ini.
+   * @default false
+   */
+  isActive?: boolean;
+
+  /**
+   * Menonaktifkan link atau tombol halaman.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Ukuran link pagination.
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg" | "icon";
+
+  /**
+   * URL tujuan navigasi (jika menggunakan tautan anchor <a>).
+   */
+  href?: string;
+
+  /**
+   * Kustomisasi visual granular tombol link pagination (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Callback saat link atau tombol diklik.
+   */
+  onClick?: (event?: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Label aksesibilitas ARIA.
+   */
+  ariaLabel?: string;
+
+  /**
+   * Konten teks atau elemen anak di dalam link pagination.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen tombol atau link nomor halaman (Compound PaginationLink ala Shadcn UI).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function PaginationLink(props: PaginationLinkProps) {
+  return (
+    <>
+      {Boolean(props.href) && !props.disabled ? (
+        <a
+          href={props.href}
+          className={`ttdk-pagination-link ${props.className || ""}`.trim()}
+          aria-current={props.isActive ? "page" : undefined}
+          aria-label={props.ariaLabel}
+          data-active={props.isActive ? "true" : "false"}
+          data-size={props.size || "md"}
+          data-disabled={props.disabled ? "true" : "false"}
+          style={{
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+              ...props.style,
+          }}
+          onClick={(e) => {
+            if (props.disabled) {
+              e.preventDefault();
+              return;
+            }
+            if (props.onClick) {
+              props.onClick(e);
+            }
+          }}
+        >
+          <>{props.children}</>
+        </a>
+      ) : null}
+      {!props.href || Boolean(props.disabled) ? (
+        <button
+          type="button"
+          className={`ttdk-pagination-link ${props.className || ""}`.trim()}
+          aria-current={props.isActive ? "page" : undefined}
+          aria-label={props.ariaLabel}
+          data-active={props.isActive ? "true" : "false"}
+          data-size={props.size || "md"}
+          data-disabled={props.disabled ? "true" : "false"}
+          disabled={props.disabled}
+          style={{
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+          onClick={(e) => {
+            if (!props.disabled && props.onClick) {
+              props.onClick(e);
+            }
+          }}
+        >
+          <>{props.children}</>
+        </button>
+      ) : null}
+    </>
+  );
+}
+
+export default PaginationLink;

package/src/web/pagination/pagination-next.tsx

@@ -0,0 +1,158 @@
+"use client";
+import * as React from "react";
+
+export interface PaginationNextProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * 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;
+}
+
+/**
+ * Tombol navigasi ke halaman selanjutnya (Compound PaginationNext ala Shadcn UI).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function PaginationNext(props: PaginationNextProps) {
+  return (
+    <>
+      {Boolean(props.href) && !props.disabled ? (
+        <a
+          href={props.href}
+          className={`ttdk-pagination-link ttdk-pagination-next ${
+            props.className || ""
+          }`.trim()}
+          aria-label={props.ariaLabel || "Go to next page"}
+          data-size={props.size || "md"}
+          data-disabled={props.disabled ? "true" : "false"}
+          style={{
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+              ...props.style,
+          }}
+          onClick={(e) => {
+            if (props.disabled) {
+              e.preventDefault();
+              return;
+            }
+            if (props.onClick) {
+              props.onClick(e);
+            }
+          }}
+        >
+          {!props.iconOnly ? (
+            <span className="ttdk-pagination-next-text">
+              {props.text || "Next"}
+            </span>
+          ) : null}
+          {props.icon ? <>{props.icon}</> : null}
+          {!props.icon ? (
+            <svg
+              className="ttdk-pagination-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+            >
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          ) : null}
+        </a>
+      ) : null}
+      {!props.href || Boolean(props.disabled) ? (
+        <button
+          type="button"
+          className={`ttdk-pagination-link ttdk-pagination-next ${
+            props.className || ""
+          }`.trim()}
+          aria-label={props.ariaLabel || "Go to next page"}
+          data-size={props.size || "md"}
+          data-disabled={props.disabled ? "true" : "false"}
+          disabled={props.disabled}
+          style={{
+            ...buildUiVars(props.ui),
+            ...((props as any)["style"] || {}),
+          }}
+          onClick={(e) => {
+            if (!props.disabled && props.onClick) {
+              props.onClick(e);
+            }
+          }}
+        >
+          {!props.iconOnly ? (
+            <span className="ttdk-pagination-next-text">
+              {props.text || "Next"}
+            </span>
+          ) : null}
+          {props.icon ? <>{props.icon}</> : null}
+          {!props.icon ? (
+            <svg
+              className="ttdk-pagination-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+            >
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          ) : null}
+        </button>
+      ) : null}
+    </>
+  );
+}
+
+export default PaginationNext;