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

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

@@ -0,0 +1,158 @@
+"use client";
+import * as React from "react";
+
+export interface PaginationPreviousProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * 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;
+}
+
+/**
+ * Tombol navigasi ke halaman sebelumnya (Compound PaginationPrevious ala Shadcn UI).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function PaginationPrevious(props: PaginationPreviousProps) {
+  return (
+    <>
+      {Boolean(props.href) && !props.disabled ? (
+        <a
+          href={props.href}
+          className={`ttdk-pagination-link ttdk-pagination-prev ${
+            props.className || ""
+          }`.trim()}
+          aria-label={props.ariaLabel || "Go to previous 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="15 18 9 12 15 6" />
+            </svg>
+          ) : null}
+          {!props.iconOnly ? (
+            <span className="ttdk-pagination-prev-text">
+              {props.text || "Previous"}
+            </span>
+          ) : null}
+        </a>
+      ) : null}
+      {!props.href || Boolean(props.disabled) ? (
+        <button
+          type="button"
+          className={`ttdk-pagination-link ttdk-pagination-prev ${
+            props.className || ""
+          }`.trim()}
+          aria-label={props.ariaLabel || "Go to previous 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="15 18 9 12 15 6" />
+            </svg>
+          ) : null}
+          {!props.iconOnly ? (
+            <span className="ttdk-pagination-prev-text">
+              {props.text || "Previous"}
+            </span>
+          ) : null}
+        </button>
+      ) : null}
+    </>
+  );
+}
+
+export default PaginationPrevious;

package/src/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)}}