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

package/src/web/button/button.css

@@ -0,0 +1 @@
+.ttdk-button{box-sizing:border-box;font-family:var(--ttdk-font-sans);font-weight:var(--ttdk-ui-font-weight,600);font-size:var(--ttdk-ui-font-size,inherit);cursor:pointer;user-select:none;white-space:nowrap;vertical-align:middle;transition:var(--ttdk-ui-transition,background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease, opacity .1s ease);border-style:solid;border-width:var(--ttdk-ui-border-width,1px);border-color:var(--ttdk-ui-border-color,transparent);border-radius:var(--ttdk-ui-border-radius,initial);outline:var(--ttdk-ui-outline,none);padding:var(--ttdk-ui-padding,initial);height:var(--ttdk-ui-height,initial);min-height:var(--ttdk-ui-min-height,initial);width:var(--ttdk-ui-width,initial);min-width:var(--ttdk-ui-min-width,initial);box-shadow:var(--ttdk-ui-box-shadow,none);opacity:var(--ttdk-ui-opacity,1);filter:var(--ttdk-ui-filter,none);transform:var(--ttdk-ui-transform,none);justify-content:center;align-items:center;gap:8px;text-decoration:none;display:inline-flex;&:hover:not(:disabled)[style*=--ttdk-ui-hover-background]{background:var(--ttdk-ui-hover-background)!important}&:hover:not(:disabled)[style*=--ttdk-ui-hover-color]{color:var(--ttdk-ui-hover-color)!important}&:hover:not(:disabled)[style*=--ttdk-ui-hover-border-color]{border-color:var(--ttdk-ui-hover-border-color)!important}&:hover:not(:disabled)[style*=--ttdk-ui-hover-transform]{transform:var(--ttdk-ui-hover-transform)!important}&:hover:not(:disabled)[style*=--ttdk-ui-hover-opacity]{opacity:var(--ttdk-ui-hover-opacity)!important}&:hover:not(:disabled)[style*=--ttdk-ui-hover-box-shadow]{box-shadow:var(--ttdk-ui-hover-box-shadow)!important}&:active:not(:disabled)[style*=--ttdk-ui-active-background]{background:var(--ttdk-ui-active-background)!important}&:active:not(:disabled)[style*=--ttdk-ui-active-color]{color:var(--ttdk-ui-active-color)!important}&:active:not(:disabled)[style*=--ttdk-ui-active-transform]{transform:var(--ttdk-ui-active-transform)!important}&:active:not(:disabled)[style*=--ttdk-ui-active-opacity]{opacity:var(--ttdk-ui-active-opacity)!important}&:focus-visible[style*=--ttdk-ui-focus-outline]{outline:var(--ttdk-ui-focus-outline)!important}&:focus-visible[style*=--ttdk-ui-focus-box-shadow]{box-shadow:var(--ttdk-ui-focus-box-shadow)!important}& svg,& .ttdk-icon{color:var(--ttdk-ui-icon-color,currentColor);width:var(--ttdk-ui-icon-size,1em);height:var(--ttdk-ui-icon-size,1em)}&[data-appearance=solid][data-variant=primary],&[data-variant=primary]:not([data-appearance]){background-color:var(--ttdk-brand-default);color:var(--ttdk-color-white);border-color:var(--ttdk-brand-default);&:hover:not(:disabled){background-color:var(--ttdk-brand-strong);border-color:var(--ttdk-brand-strong);color:var(--ttdk-color-white)}}&[data-appearance=solid][data-variant=info],&[data-variant=info]:not([data-appearance]){background-color:var(--ttdk-bg-status-info);color:var(--ttdk-color-white);border-color:var(--ttdk-bg-status-info);&:hover:not(:disabled){background-color:var(--ttdk-bg-status-info-strong);border-color:var(--ttdk-bg-status-info-strong);color:var(--ttdk-color-white)}}&[data-appearance=solid][data-variant=warning],&[data-variant=warning]:not([data-appearance]){background-color:var(--ttdk-bg-status-warning);color:var(--ttdk-color-black);border-color:var(--ttdk-bg-status-warning);&:hover:not(:disabled){background-color:var(--ttdk-bg-status-warning-strong);border-color:var(--ttdk-bg-status-warning-strong);color:var(--ttdk-color-white)}}&[data-appearance=solid][data-variant=danger],&[data-variant=danger]:not([data-appearance]){background-color:var(--ttdk-bg-status-error);color:var(--ttdk-color-white);border-color:var(--ttdk-bg-status-error);&:hover:not(:disabled){background-color:var(--ttdk-bg-status-error-strong);border-color:var(--ttdk-bg-status-error-strong);color:var(--ttdk-color-white)}}&[data-appearance=solid][data-variant=neutral],&[data-variant=neutral]:not([data-appearance]){background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary);&:hover:not(:disabled){background-color:var(--ttdk-stroke-divider);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary)}}&[data-appearance=solid][data-variant=disabled],&[data-variant=disabled]:not([data-appearance]){background-color:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important;color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important}&[data-appearance=soft][data-variant=primary]{background-color:var(--ttdk-brand-subtle);border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default);&:hover:not(:disabled){background-color:var(--ttdk-color-brand-green-100);border-color:var(--ttdk-brand-strong);color:var(--ttdk-brand-strong)}}&[data-appearance=soft][data-variant=info]{background-color:var(--ttdk-bg-status-info-subtle);border-color:var(--ttdk-stroke-status-info);color:var(--ttdk-text-icon-status-info);&:hover:not(:disabled){border-color:var(--ttdk-text-icon-status-info-strong);color:var(--ttdk-text-icon-status-info-strong);background-color:#2196f333}}&[data-appearance=soft][data-variant=warning]{background-color:var(--ttdk-bg-status-warning-subtle);border-color:var(--ttdk-stroke-status-warning);color:var(--ttdk-text-icon-status-warning);&:hover:not(:disabled){border-color:var(--ttdk-text-icon-status-warning-strong);color:var(--ttdk-text-icon-status-warning-strong);background-color:#fb8c0033}}&[data-appearance=soft][data-variant=danger]{background-color:var(--ttdk-bg-status-error-subtle);border-color:var(--ttdk-stroke-status-error);color:var(--ttdk-text-icon-status-error);&:hover:not(:disabled){border-color:var(--ttdk-text-icon-status-error-strong);color:var(--ttdk-text-icon-status-error-strong);background-color:#d0021b33}}&[data-appearance=soft][data-variant=neutral]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary);&:hover:not(:disabled){background-color:var(--ttdk-stroke-divider);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary)}}&[data-appearance=soft][data-variant=disabled]{background-color:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important;color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important}&[data-appearance=outline][data-variant=primary]{border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default);background-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-brand-subtle);border-color:var(--ttdk-brand-strong);color:var(--ttdk-brand-strong)}}&[data-appearance=outline][data-variant=info]{border-color:var(--ttdk-stroke-status-info);color:var(--ttdk-text-icon-status-info);background-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-info-subtle);border-color:var(--ttdk-text-icon-status-info-strong);color:var(--ttdk-text-icon-status-info-strong)}}&[data-appearance=outline][data-variant=warning]{border-color:var(--ttdk-stroke-status-warning);color:var(--ttdk-text-icon-status-warning);background-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-warning-subtle);border-color:var(--ttdk-text-icon-status-warning-strong);color:var(--ttdk-text-icon-status-warning-strong)}}&[data-appearance=outline][data-variant=danger]{border-color:var(--ttdk-stroke-status-error);color:var(--ttdk-text-icon-status-error);background-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-error-subtle);border-color:var(--ttdk-text-icon-status-error-strong);color:var(--ttdk-text-icon-status-error-strong)}}&[data-appearance=outline][data-variant=neutral]{border-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary);background-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary)}}&[data-appearance=outline][data-variant=disabled]{border-color:var(--ttdk-stroke-subtle)!important;color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important;background-color:#0000!important}&[data-appearance=link][data-variant=primary]{color:var(--ttdk-brand-default);text-underline-offset:4px;background-color:#0000;border-color:#0000;text-decoration:none;&:hover:not(:disabled){color:var(--ttdk-brand-strong);background-color:#0000;text-decoration:underline}}&[data-appearance=link][data-variant=info]{color:var(--ttdk-text-icon-status-info);text-underline-offset:4px;background-color:#0000;border-color:#0000;text-decoration:none;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-info-strong);background-color:#0000;text-decoration:underline}}&[data-appearance=link][data-variant=warning]{color:var(--ttdk-text-icon-status-warning);text-underline-offset:4px;background-color:#0000;border-color:#0000;text-decoration:none;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-warning-strong);background-color:#0000;text-decoration:underline}}&[data-appearance=link][data-variant=danger]{color:var(--ttdk-text-icon-status-error);text-underline-offset:4px;background-color:#0000;border-color:#0000;text-decoration:none;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-error-strong);background-color:#0000;text-decoration:underline}}&[data-appearance=link][data-variant=neutral]{color:var(--ttdk-text-icon-primary);text-underline-offset:4px;background-color:#0000;border-color:#0000;text-decoration:none;&:hover:not(:disabled){color:var(--ttdk-text-icon-secondary);background-color:#0000;text-decoration:underline}}&[data-appearance=link][data-variant=disabled]{color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important;background-color:#0000!important;border-color:#0000!important;text-decoration:none!important}&[data-appearance=ghost][data-variant=primary]{color:var(--ttdk-brand-default);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-brand-subtle);color:var(--ttdk-brand-strong);border-color:#0000}&:active:not(:disabled){background-color:var(--ttdk-color-brand-green-100);color:var(--ttdk-brand-strong);border-color:#0000}}&[data-appearance=ghost][data-variant=info]{color:var(--ttdk-text-icon-status-info);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-info-subtle);color:var(--ttdk-text-icon-status-info-strong);border-color:#0000}&:active:not(:disabled){color:var(--ttdk-text-icon-status-info-strong);background-color:#2196f333;border-color:#0000}}&[data-appearance=ghost][data-variant=warning]{color:var(--ttdk-text-icon-status-warning);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-warning-subtle);color:var(--ttdk-text-icon-status-warning-strong);border-color:#0000}&:active:not(:disabled){color:var(--ttdk-text-icon-status-warning-strong);background-color:#fb8c0033;border-color:#0000}}&[data-appearance=ghost][data-variant=danger]{color:var(--ttdk-text-icon-status-error);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-error-subtle);color:var(--ttdk-text-icon-status-error-strong);border-color:#0000}&:active:not(:disabled){color:var(--ttdk-text-icon-status-error-strong);background-color:#d0021b33;border-color:#0000}}&[data-appearance=ghost][data-variant=neutral]{color:var(--ttdk-text-icon-primary);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-primary);border-color:#0000}&:active:not(:disabled){background-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary);border-color:#0000}}&[data-appearance=ghost][data-variant=disabled]{color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important;background-color:#0000!important;border-color:#0000!important}&[data-size=small],&[data-size=sm]{border-radius:var(--ttdk-radius-xs,6px);gap:6px;height:36px;padding:0 12px;font-size:12px;line-height:16px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:16px;height:16px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,16px)!important;height:var(--ttdk-ui-icon-size,16px)!important}}&[data-size=medium],&[data-size=md]{border-radius:var(--ttdk-radius-sm,8px);gap:8px;height:48px;padding:0 16px;font-size:16px;line-height:24px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:20px;height:20px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,20px)!important;height:var(--ttdk-ui-icon-size,20px)!important}}&[data-size=large],&[data-size=lg]{border-radius:var(--ttdk-radius-sm,8px);gap:8px;height:56px;padding:0 20px;font-size:18px;line-height:26px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:24px;height:24px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,24px)!important;height:var(--ttdk-ui-icon-size,24px)!important}}&[data-size=xs]{border-radius:var(--ttdk-radius-xs,4px);gap:4px;height:28px;padding:0 8px;font-size:11px;line-height:16px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:14px;height:14px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,14px)!important;height:var(--ttdk-ui-icon-size,14px)!important}}&[data-size=xl]{border-radius:var(--ttdk-radius-sm,8px);gap:8px;height:48px;padding:0 16px;font-size:16px;line-height:24px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:20px;height:20px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,20px)!important;height:var(--ttdk-ui-icon-size,20px)!important}}&[data-size="2xl"]{border-radius:var(--ttdk-radius-sm,8px);gap:10px;height:56px;padding:0 24px;font-size:18px;line-height:26px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:24px;height:24px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,24px)!important;height:var(--ttdk-ui-icon-size,24px)!important}}&[data-icon-only=true]{aspect-ratio:1;justify-content:center;padding:0}&[data-block=true]{width:100%}&[data-underline=none],&[data-appearance=link][data-underline=none]{text-decoration:none!important;&:hover:not(:disabled){text-decoration:none!important}}&[data-underline=always]{text-decoration:underline!important}&>svg,&>span:not(.ttdk-button-spinner)>svg{pointer-events:none;flex-shrink:0}& .ttdk-button-spinner{width:var(--ttdk-ui-icon-size,20px);height:var(--ttdk-ui-icon-size,20px);flex-shrink:0;justify-content:center;align-items:center;line-height:1;animation:1.2s steps(12,end) infinite ttdk-button-spin;display:inline-flex}& .ttdk-button-spinner svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;display:block;width:100%!important;height:100%!important}&[data-size=xs] .ttdk-button-spinner,&[data-size=xs] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,14px)!important;height:var(--ttdk-ui-icon-size,14px)!important}&[data-size=small] .ttdk-button-spinner,&[data-size=sm] .ttdk-button-spinner,&[data-size=small] .ttdk-button-spinner svg,&[data-size=sm] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,16px)!important;height:var(--ttdk-ui-icon-size,16px)!important}&[data-size=medium] .ttdk-button-spinner,&[data-size=md] .ttdk-button-spinner,&[data-size=medium] .ttdk-button-spinner svg,&[data-size=md] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,20px)!important;height:var(--ttdk-ui-icon-size,20px)!important}&[data-size=large] .ttdk-button-spinner,&[data-size=lg] .ttdk-button-spinner,&[data-size=large] .ttdk-button-spinner svg,&[data-size=lg] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,24px)!important;height:var(--ttdk-ui-icon-size,24px)!important}&[data-size=xl] .ttdk-button-spinner,&[data-size=xl] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,20px)!important;height:var(--ttdk-ui-icon-size,20px)!important}&[data-size="2xl"] .ttdk-button-spinner,&[data-size="2xl"] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,24px)!important;height:var(--ttdk-ui-icon-size,24px)!important}&:active:not(:disabled){scale:.98}&:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--ttdk-brand-default) 30%, transparent);outline:none}&[data-variant=danger]:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--ttdk-bg-status-error) 30%, transparent)}&:disabled:not([data-loading=true]),&[disabled]:not([data-loading=true]),&[data-disabled=true]:not([data-loading=true]){pointer-events:none;background-color:var(--ttdk-bg-secondary-disabled)!important;color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important;box-shadow:none!important;border-color:#0000!important}&[data-loading=true]{pointer-events:none;cursor:wait!important}&[data-loading=true][data-icon-only=true]>:not(.ttdk-button-spinner){display:none}}.ttdk-button[data-rounded=none]{border-radius:0}.ttdk-button[data-rounded=sm]{border-radius:4px}.ttdk-button[data-rounded=md]{border-radius:6px}.ttdk-button[data-rounded=lg]{border-radius:8px}.ttdk-button[data-rounded=full]{border-radius:9999px}.dark .ttdk-button,html.dark .ttdk-button,[data-mode=dark] .ttdk-button,[data-theme=dark] .ttdk-button{&[data-appearance=solid][data-variant=neutral],&[data-variant=neutral]:not([data-appearance]){background-color:var(--ttdk-bg-stay-black);border-color:var(--ttdk-bg-stay-black);color:var(--ttdk-text-icon-stay-white);&:hover:not(:disabled){color:var(--ttdk-text-icon-stay-white);background-color:#2f2f2f;border-color:#2f2f2f}}&[data-appearance=soft][data-variant=neutral]{background-color:var(--ttdk-color-neutral-900);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary);&:hover:not(:disabled){background-color:var(--ttdk-color-neutral-800);border-color:var(--ttdk-stroke-stay-white);color:var(--ttdk-text-icon-primary)}}&[data-appearance=outline][data-variant=neutral]{background-color:var(--ttdk-bg-stay-black);border-color:var(--ttdk-stroke-stay-white);color:var(--ttdk-text-icon-primary);&:hover:not(:disabled){color:var(--ttdk-text-icon-primary);background-color:#ffffff14}}&[data-appearance=link][data-variant=neutral]{color:var(--ttdk-text-icon-primary);&:hover:not(:disabled){color:var(--ttdk-text-icon-stay-white)}}&[data-appearance=soft][data-variant=primary]{background-color:var(--ttdk-brand-subtle-dark);border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default);&:hover:not(:disabled){border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default);background-color:#16b3ac40}}&[data-appearance=outline][data-variant=primary]{border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default);background-color:#0000;&:hover:not(:disabled){background-color:#16b3ac26}}&[data-appearance=soft][data-variant=info]{background-color:var(--ttdk-bg-status-info-subtle);border-color:var(--ttdk-stroke-status-info);color:var(--ttdk-text-icon-status-info);&:hover:not(:disabled){background-color:#2196f340}}&[data-appearance=soft][data-variant=warning]{background-color:var(--ttdk-bg-status-warning-subtle);border-color:var(--ttdk-stroke-status-warning);color:var(--ttdk-text-icon-status-warning);&:hover:not(:disabled){background-color:#fb8c0040}}&[data-appearance=soft][data-variant=danger]{background-color:var(--ttdk-bg-status-error-subtle);border-color:var(--ttdk-stroke-status-error);color:var(--ttdk-text-icon-status-error);&:hover:not(:disabled){background-color:#d0021b40}}&[data-appearance=ghost][data-variant=primary]{color:var(--ttdk-brand-default);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-brand-subtle-dark);color:var(--ttdk-brand-default);border-color:#0000}}&[data-appearance=ghost][data-variant=neutral]{color:var(--ttdk-text-icon-primary);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-color-neutral-800);color:var(--ttdk-text-icon-primary);border-color:#0000}}&[data-appearance=ghost][data-variant=info]{color:var(--ttdk-text-icon-status-info);background-color:#0000;border-color:#0000;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-info);background-color:#2196f340;border-color:#0000}}&[data-appearance=ghost][data-variant=warning]{color:var(--ttdk-text-icon-status-warning);background-color:#0000;border-color:#0000;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-warning);background-color:#fb8c0040;border-color:#0000}}&[data-appearance=ghost][data-variant=danger]{color:var(--ttdk-text-icon-status-error);background-color:#0000;border-color:#0000;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-error);background-color:#d0021b40;border-color:#0000}}&[data-appearance=solid][data-variant=primary],&[data-variant=primary]:not([data-appearance]),&[data-appearance=solid][data-variant=info],&[data-variant=info]:not([data-appearance]),&[data-appearance=solid][data-variant=danger],&[data-variant=danger]:not([data-appearance]){color:#fff;&:hover:not(:disabled){color:#fff}}&[data-appearance=solid][data-variant=warning],&[data-variant=warning]:not([data-appearance]){color:var(--ttdk-color-black);&:hover:not(:disabled){color:var(--ttdk-color-black)}}&[data-appearance=solid][data-variant=warning]:hover:not(:disabled),&[data-variant=warning]:not([data-appearance]):hover:not(:disabled){background-color:var(--ttdk-bg-status-warning-strong)}&[data-appearance=solid][data-variant=info]:hover:not(:disabled),&[data-variant=info]:not([data-appearance]):hover:not(:disabled){background-color:var(--ttdk-bg-status-info-strong)}&[data-appearance=solid][data-variant=danger]:hover:not(:disabled),&[data-variant=danger]:not([data-appearance]):hover:not(:disabled){background-color:var(--ttdk-bg-status-error-strong)}&:disabled:not([data-loading=true]),&[disabled]:not([data-loading=true]),&[data-disabled=true]:not([data-loading=true]),&[data-variant=disabled]{background-color:var(--ttdk-bg-secondary-disabled)!important;color:var(--ttdk-text-icon-disabled)!important;border-color:#0000!important}}[data-sonner-toasters]{font-family:var(--ttdk-font-sans);-webkit-font-smoothing:antialiased}@keyframes ttdk-button-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/src/web/button/button.tsx

@@ -0,0 +1,287 @@
+"use client";
+import * as React from "react";
+
+export type ButtonUiProps = UiProps;
+export interface ButtonProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Varian warna semantik tombol:
+   * - `'primary'`: Teal utama.
+   * - `'info'`: Biru informasi.
+   * - `'warning'`: Kuning peringatan.
+   * - `'danger'`: Merah bahaya.
+   * - `'neutral'`: Abu-abu netral.
+   * - `'disabled'`: Tombol non-aktif.
+   *
+   * @default 'primary'
+   */
+  variant?: "primary" | "info" | "warning" | "danger" | "neutral" | "disabled";
+
+  /**
+   * Gaya tampilan visual tombol:
+   * - `'solid'`: Latar belakang warna solid pekat (default).
+   * - `'soft'`: Latar belakang warna transparan lembut.
+   * - `'outline'`: Garis tepi dengan latar belakang transparan.
+   * - `'link'`: Teks tautan tanpa border/latar, dengan garis bawah saat hover.
+   * - `'ghost'`: Transparan tanpa outline/border, dengan latar lembut saat hover.
+   *
+   * @default 'solid'
+   */
+  appearance?: "solid" | "soft" | "outline" | "link" | "ghost";
+
+  /**
+   * Tipe tombol HTML native.
+   * @default 'button'
+   */
+  type?: "button" | "submit" | "reset";
+
+  /**
+   * Skala ukuran tombol:
+   * - `'sm'`: 36px
+   * - `'md'`: 48px (standar)
+   * - `'lg'`: 56px
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Mode negatif — kontras tinggi di atas latar gelap.
+   * @default false
+   */
+  negative?: boolean;
+
+  /**
+   * Radius sudut tombol.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar)
+   * - `'lg'`: 12px
+   * - `'full'`: 9999px (pill)
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Mode tombol ikon persegi (aspek rasio 1:1).
+   * @default false
+   */
+  iconOnly?: boolean;
+
+  /**
+   * Full-width — melebar 100% dari container.
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Tampilkan spinner & nonaktifkan tombol saat proses async.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Nonaktifkan tombol dari interaksi pengguna.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Warna kustom untuk ikon di dalam tombol (misal: '#fff', '#0968F6').
+   */
+  iconColor?: string;
+
+  /**
+   * Ukuran kustom untuk ikon di dalam tombol (misal: '16px', '20px').
+   */
+  iconSize?: string;
+
+  /**
+   * Kustomisasi visual — seperti style object tapi dengan support pseudo-class.
+   *
+   * @example
+   * ```tsx
+   * <Button
+   *   ui={{
+   *     background: '#7c3aed',
+   *     color: 'white',
+   *     borderRadius: '99px',
+   *     hover: {
+   *       background: '#6d28d9',
+   *       transform: 'scale(1.02)',
+   *     },
+   *     active: {
+   *       opacity: '0.9',
+   *     }
+   *   }}
+   * />
+   * ```
+   */
+  ui?: UiProps;
+
+  /**
+   * Event handler saat tombol diklik.
+   */
+  onClick?: (event?: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten tombol — teks, ikon, atau JSX.
+   */
+  children?: any;
+}
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Button(props: ButtonProps) {
+  return (
+    <button
+      className={`ttdk-button ${props.className || ""}`.trim()}
+      type={props.type || "button"}
+      data-variant={props.variant || "primary"}
+      data-appearance={props.appearance || "solid"}
+      data-size={props.size || "md"}
+      data-negative={props.negative ? "true" : undefined}
+      data-rounded={props.rounded}
+      data-icon-only={props.iconOnly}
+      data-block={props.block ? "true" : undefined}
+      data-loading={props.loading ? "true" : undefined}
+      disabled={props.disabled || props.variant === "disabled" || props.loading}
+      style={{
+        ...buildUiVars(props.ui),
+        ...(props.iconColor
+          ? {
+              "--ttdk-ui-icon-color": props.iconColor,
+            }
+          : {}),
+        ...(props.iconSize
+          ? {
+              "--ttdk-ui-icon-size": props.iconSize,
+            }
+          : {}),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+      onClick={(event) => {
+        props.onClick?.(event);
+      }}
+    >
+      {props.loading ? (
+        <span className="ttdk-button-spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24">
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.175"
+              transform="rotate(0 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.25"
+              transform="rotate(30 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.325"
+              transform="rotate(60 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.4"
+              transform="rotate(90 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.475"
+              transform="rotate(120 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.55"
+              transform="rotate(150 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.625"
+              transform="rotate(180 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.7"
+              transform="rotate(210 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.775"
+              transform="rotate(240 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.85"
+              transform="rotate(270 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.925"
+              transform="rotate(300 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="1"
+              transform="rotate(330 12 12)"
+            />
+          </svg>
+        </span>
+      ) : null}
+      <>{props.children}</>
+    </button>
+  );
+}
+
+export default Button;
+
+export { Button };

package/src/web/button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './button';
+export { default } from './button'

package/src/web/button/manifest.json

@@ -0,0 +1,177 @@
+{
+  "name": "@ttdk-design-system/button",
+  "component": "Button",
+  "folder": "button",
+  "description": "TTDK Button component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "button.css",
+      "importPath": "web/button/button.css"
+    }
+  ],
+  "props": {
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style kustom.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "| 'primary'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'neutral'\n  | 'disabled'",
+      "optional": true,
+      "default": "primary",
+      "description": "Varian warna semantik tombol: - `'primary'`: Teal utama. - `'info'`: Biru informasi. - `'warning'`: Kuning peringatan. - `'danger'`: Merah bahaya. - `'neutral'`: Abu-abu netral. - `'disabled'`: Tombol non-aktif.",
+      "example": null,
+      "param": null
+    },
+    "appearance": {
+      "name": "appearance",
+      "type": "'solid' | 'soft' | 'outline' | 'link' | 'ghost'",
+      "optional": true,
+      "default": "solid",
+      "description": "Gaya tampilan visual tombol: - `'solid'`: Latar belakang warna solid pekat (default). - `'soft'`: Latar belakang warna transparan lembut. - `'outline'`: Garis tepi dengan latar belakang transparan. - `'link'`: Teks tautan tanpa border/latar, dengan garis bawah saat hover. - `'ghost'`: Transparan tanpa outline/border, dengan latar lembut saat hover.",
+      "example": null,
+      "param": null
+    },
+    "type": {
+      "name": "type",
+      "type": "'button' | 'submit' | 'reset'",
+      "optional": true,
+      "default": "button",
+      "description": "Tipe tombol HTML native.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran tombol: - `'sm'`: 36px - `'md'`: 48px (standar) - `'lg'`: 56px",
+      "example": null,
+      "param": null
+    },
+    "negative": {
+      "name": "negative",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mode negatif — kontras tinggi di atas latar gelap.",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Radius sudut tombol. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar) - `'lg'`: 12px - `'full'`: 9999px (pill)",
+      "example": null,
+      "param": null
+    },
+    "iconOnly": {
+      "name": "iconOnly",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mode tombol ikon persegi (aspek rasio 1:1).",
+      "example": null,
+      "param": null
+    },
+    "block": {
+      "name": "block",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Full-width — melebar 100% dari container.",
+      "example": null,
+      "param": null
+    },
+    "loading": {
+      "name": "loading",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Tampilkan spinner & nonaktifkan tombol saat proses async.",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Nonaktifkan tombol dari interaksi pengguna.",
+      "example": null,
+      "param": null
+    },
+    "iconColor": {
+      "name": "iconColor",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Warna kustom untuk ikon di dalam tombol (misal: '#fff', '#0968F6').",
+      "example": null,
+      "param": null
+    },
+    "iconSize": {
+      "name": "iconSize",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Ukuran kustom untuk ikon di dalam tombol (misal: '16px', '20px').",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual — seperti style object tapi dengan support pseudo-class. ```tsx <Button ui={{ background: '#7c3aed', color: 'white', borderRadius: '99px', hover: { background: '#6d28d9', transform: 'scale(1.02)', }, active: { opacity: '0.9', } }} /> ```",
+      "example": null,
+      "param": null
+    },
+    "onClick": {
+      "name": "onClick",
+      "type": "(event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event handler saat tombol diklik.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten tombol — teks, ikon, atau JSX.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/calendar/AI_GUIDE.md

@@ -0,0 +1,151 @@
+# <Calendar /> — TTDK Component Reference
+
+TTDK Calendar component with multi-theme support.
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/calendar/calendar.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Calendar from "@ttdk-design-system/library-react/web/calendar";
+
+// Vue 3
+import Calendar from "@ttdk-design-system/library-vue/web/calendar";
+
+// Svelte
+import Calendar from "@ttdk-design-system/library-svelte/web/calendar";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value?` | `any` | `-` | Nilai tanggal terpilih pada mode controlled. - Single: string ('YYYY-MM-DD') atau Date - Range: { start: string | Date | null, end: string | Date | null } - Multiple: string[] atau Date[] |
+| `defaultValue?` | `any` | `-` | Nilai awal tanggal terpilih pada mode uncontrolled. |
+| `id?` | `string` | `-` | Atribut ID unik untuk elemen root kalender. |
+| `range?` | `boolean` | `false` | Mengaktifkan mode pemilihan rentang tanggal (start date - end date). |
+| `multiple?` | `boolean` | `false` | Mengaktifkan mode pemilihan banyak tanggal sekaligus. |
+| `min?` | `string | Date` | `-` | Batas tanggal paling awal yang dapat dipilih. |
+| `minValue?` | `string | Date` | `-` | Alias untuk min (kompatibel Nuxt UI: min-value). |
+| `max?` | `string | Date` | `-` | Batas tanggal paling akhir yang dapat dipilih. |
+| `maxValue?` | `string | Date` | `-` | Alias untuk max (kompatibel Nuxt UI: max-value). |
+| `isDateDisabled?` | `(date: Date) => boolean` | `-` | Fungsi untuk menonaktifkan tanggal tertentu secara spesifik (misal: hari libur / akhir pekan). |
+| `isDateUnavailable?` | `(date: Date) => boolean` | `-` | Fungsi untuk menandai tanggal tidak tersedia (ditampilkan coret strikethrough). |
+| `numberOfMonths?` | `number` | `1` | Jumlah bulan yang ditampilkan secara berdampingan. |
+| `weekStartsOn?` | `0 | 1 | 2 | 3 | 4 | 5 | 6` | `1` | Hari awal dalam seminggu: - 0 = Minggu (Sunday) - 1 = Senin (Monday) |
+| `locale?` | `string` | `id-ID` | Kode lokal bahasa kalender (misal: 'id-ID', 'en-US'). |
+| `month?` | `number` | `-` | Bulan yang sedang ditampilkan (1 - 12) pada mode navigasi controlled. |
+| `year?` | `number` | `-` | Tahun yang sedang ditampilkan (misal: 2026) pada mode navigasi controlled. |
+| `defaultMonth?` | `number` | `-` | Bulan awal yang sedang ditampilkan (1 - 12). |
+| `defaultYear?` | `number` | `-` | Tahun awal yang sedang ditampilkan. |
+| `yearControls?` | `boolean` | `true` | Menampilkan tombol navigasi lompat tahun (<< dan >>). |
+| `showOutsideDays?` | `boolean` | `true` | Menampilkan hari-hari redup di luar bulan yang aktif (leading & trailing days). |
+| `fixedWeeks?` | `boolean` | `true` | Selalu merender 6 baris minggu agar tinggi kalender konsisten stabil antar bulan. |
+| `dateMarkers?` | `DateMarker[]` | `-` | Daftar penanda agenda / jadwal faskes pada tanggal tertentu. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran kalender (sm: kompak 32px, md: standar 38px, lg: besar 44px). |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'` | `md` | Radius sudut kelengkungan container kalender. |
+| `variant?` | `'default' | 'bordered' | 'card' | 'flat'` | `bordered` | Varian visual tampilan kalender: - 'default': Bersih dengan background putih/gelap. - 'bordered': Dengan bingkai border solid luar. - 'card': Dengan elevasi bayangan halus kartu. - 'flat': Minimalis tanpa border dan tanpa shadow. |
+| `disabled?` | `boolean` | `false` | Menonaktifkan seluruh kalender dari interaksi. |
+| `readOnly?` | `boolean` | `false` | Mode hanya-baca (read-only). |
+| `onValueChange?` | `(value: any) => void` | `-` | Callback event saat nilai tanggal berubah. |
+| `onChange?` | `(event: any) => void` | `-` | Callback event native saat nilai berubah. |
+| `onMonthChange?` | `(month: number, year: number) => void` | `-` | Callback saat navigasi bulan atau tahun berubah. |
+| `onYearChange?` | `(month: number, year: number) => void` | `-` | Callback saat tahun tampilan kalender berubah. |
+| `defaultViewMode?` | `'day' | 'month' | 'year'` | `day` | Mode tampilan awal kalender ('day', 'month', 'year'). |
+| `viewMode?` | `'day' | 'month' | 'year'` | `-` | Mode tampilan kalender saat ini ('day', 'month', 'year') untuk mode controlled. |
+| `onViewModeChange?` | `(mode: 'day' | 'month' | 'year') => void` | `-` | Callback saat mode tampilan kalender berubah ('day', 'month', 'year'). |
+| `className?` | `string` | `-` | Class CSS kustom untuk container utama. |
+| `style?` | `any` | `-` | Inline style CSS kustom untuk container utama. |
+| `headerClass?` | `string` | `-` | Class CSS kustom untuk header kalender. |
+| `headerStyle?` | `UiProps` | `-` | Inline style kustom untuk header kalender. |
+| `navBtnClass?` | `string` | `-` | Class CSS kustom untuk tombol navigasi. |
+| `navBtnStyle?` | `UiProps` | `-` | Inline style kustom untuk tombol navigasi. |
+| `cellClass?` | `string` | `-` | Class CSS kustom untuk cell tanggal. |
+| `cellStyle?` | `UiProps` | `-` | Inline style kustom untuk cell tanggal. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular UiProps. |
+
+### Sub-interface: `DateRange`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `start` | `string | Date | null` | `-` |  |
+| `end` | `string | Date | null` | `-` |  |
+
+### Sub-interface: `DateMarker`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `date` | `string` | `-` |  |
+| `color?` | `string` | `-` |  |
+| `tooltip?` | `string` | `-` |  |
+| `dot?` | `boolean` | `-` |  |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Calendar from "@ttdk-design-system/library-react/web/calendar";
+import "@ttdk-design-system/library-react/web/calendar/calendar.css";
+
+export function Example() {
+  const [selectedDate, setSelectedDate] = useState("2026-10-13");
+
+  return (
+    <div style={{ maxWidth: '320px' }}>
+      <Calendar
+        value={selectedDate}
+        onChange={(date) => setSelectedDate(date)}
+      />
+      <div style={{ marginTop: '12px', fontSize: '14px' }}>
+        Tanggal terpilih: <strong>{selectedDate}</strong>
+      </div>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Calendar from "@ttdk-design-system/library-vue/web/calendar";
+import "@ttdk-design-system/library-vue/web/calendar/calendar.css";
+
+const selectedDate = ref("2026-10-13");
+</script>
+
+<template>
+  <div style="max-width: 320px;">
+    <Calendar
+      :value="selectedDate"
+      @change="(date: any) => (selectedDate = date)"
+    />
+    <div style="margin-top: 12px; font-size: 14px;">
+      Tanggal terpilih: <strong>{{ selectedDate }}</strong>
+    </div>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Calendar from "@ttdk-design-system/library-svelte/web/calendar";
+  import "@ttdk-design-system/library-svelte/web/calendar/calendar.css";
+
+  let selectedDate = "2026-10-13";
+</script>
+
+<div style="max-width: 320px;">
+  <Calendar
+    value={selectedDate}
+    on:change={(e) => (selectedDate = e.detail)}
+  />
+  <div style="margin-top: 12px; font-size: 14px;">
+    Tanggal terpilih: <strong>{selectedDate}</strong>
+  </div>
+</div>
+```