czero 0.1.0 → 0.2.0

package/dist/components.css

@@ -189,8 +189,48 @@
 }
 .cz-btn-danger:hover { opacity: 0.9; }
 
+.cz-btn-link {
+  background-color: transparent;
+  color: hsl(var(--cz-color-primary));
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.cz-btn-link:hover { text-decoration-thickness: 2px; }
+
+/* Button Icon Size */
+.cz-btn-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+}
+.cz-btn-icon.cz-btn-sm { width: 2rem; height: 2rem; }
+.cz-btn-icon.cz-btn-lg { width: 3rem; height: 3rem; }
+
+/* Button Loading State */
+.cz-btn-loading { position: relative; }
+.cz-btn-spinner {
+  width: 1rem;
+  height: 1rem;
+  animation: cz-spin 0.75s linear infinite;
+  flex-shrink: 0;
+}
+.cz-btn-content { opacity: 1; }
+
 /* ===== INPUT ===== */
 
+.cz-input-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.cz-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
 .cz-input {
   width: 100%;
   border-radius: var(--cz-radius-md);
@@ -206,7 +246,8 @@
 
 .cz-input:focus {
   outline: none;
-  box-shadow: 0 0 0 2px hsl(var(--cz-color-ring));
+  border-color: hsl(var(--cz-color-ring));
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-ring) / 0.2);
 }
 
 .cz-input:disabled {
@@ -218,7 +259,50 @@
   border-color: hsl(var(--cz-color-danger));
 }
 .cz-input-error:focus {
-  box-shadow: 0 0 0 2px hsl(var(--cz-color-danger));
+  border-color: hsl(var(--cz-color-danger));
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-danger) / 0.2);
+}
+
+/* Input with Icons */
+.cz-input-has-left-icon .cz-input { padding-left: 2.5rem; }
+.cz-input-has-right-icon .cz-input { padding-right: 2.5rem; }
+
+.cz-input-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 100%;
+  color: hsl(var(--cz-color-mutedFg));
+  pointer-events: none;
+}
+.cz-input-icon svg { width: 1rem; height: 1rem; }
+.cz-input-icon-left { left: 0; }
+.cz-input-icon-right { right: 0; }
+
+/* Input Clear Button */
+.cz-input-clear {
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 100%;
+  color: hsl(var(--cz-color-mutedFg));
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color var(--cz-transition-fast);
+}
+.cz-input-clear:hover { color: hsl(var(--cz-color-fg)); }
+.cz-input-clear svg { width: 0.875rem; height: 0.875rem; }
+
+/* Input Description */
+.cz-input-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
 }
 
 /* Input Sizes */
@@ -226,6 +310,7 @@
 .cz-input-md { height: 2.5rem; padding: 0 0.75rem; font-size: var(--cz-font-size-md); }
 .cz-input-lg { height: 3rem; padding: 0 1rem; font-size: var(--cz-font-size-lg); }
 
+
 /* ===== CARD ===== */
 
 .cz-card {
@@ -334,3 +419,1495 @@
   font-size: var(--cz-font-size-sm);
   color: hsl(var(--cz-color-danger));
 }
+
+/* ===== TEXTAREA ===== */
+
+.cz-textarea-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.cz-textarea {
+  width: 100%;
+  min-height: 5rem;
+  border-radius: var(--cz-radius-md);
+  border: 1px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  color: hsl(var(--cz-color-fg));
+  transition: all var(--cz-transition-fast);
+  resize: vertical;
+  font-family: inherit;
+}
+
+.cz-textarea::placeholder {
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-textarea:focus {
+  outline: none;
+  border-color: hsl(var(--cz-color-ring));
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-ring) / 0.2);
+}
+
+.cz-textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-textarea-error {
+  border-color: hsl(var(--cz-color-danger));
+}
+.cz-textarea-error:focus {
+  border-color: hsl(var(--cz-color-danger));
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-danger) / 0.2);
+}
+
+.cz-textarea-auto-resize {
+  overflow: hidden;
+  resize: none;
+}
+
+.cz-textarea-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* Textarea Sizes */
+.cz-textarea-sm { padding: 0.375rem 0.5rem; font-size: var(--cz-font-size-sm); }
+.cz-textarea-md { padding: 0.5rem 0.75rem; font-size: var(--cz-font-size-md); }
+.cz-textarea-lg { padding: 0.75rem 1rem; font-size: var(--cz-font-size-lg); }
+
+/* ===== SWITCH ===== */
+
+.cz-switch {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: 2.75rem;
+  height: 1.5rem;
+  border-radius: var(--cz-radius-full);
+  background-color: hsl(var(--cz-color-muted));
+  transition: all var(--cz-transition-fast);
+  cursor: pointer;
+}
+
+.cz-switch:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-switch[data-state="checked"] {
+  background-color: hsl(var(--cz-color-primary));
+}
+
+.cz-switch.cz-switch-checked {
+  background-color: hsl(var(--cz-color-primary));
+}
+
+.cz-switch.cz-disabled,
+.cz-switch:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cz-switch-thumb {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--cz-radius-full);
+  background-color: hsl(var(--cz-color-bg));
+  box-shadow: var(--cz-shadow-sm);
+  transition: transform var(--cz-transition-fast);
+  transform: translateX(0.125rem);
+}
+
+.cz-switch[data-state="checked"] .cz-switch-thumb,
+.cz-switch.cz-switch-checked .cz-switch-thumb {
+  transform: translateX(calc(2.75rem - 1.25rem - 0.125rem));
+}
+
+/* Switch Sizes */
+.cz-switch-sm { width: 2rem; height: 1.125rem; }
+.cz-switch-sm .cz-switch-thumb { width: 0.875rem; height: 0.875rem; transform: translateX(0.125rem); }
+.cz-switch-sm[data-state="checked"] .cz-switch-thumb,
+.cz-switch-sm.cz-switch-checked .cz-switch-thumb { transform: translateX(calc(2rem - 0.875rem - 0.125rem)); }
+
+.cz-switch-md { width: 2.75rem; height: 1.5rem; }
+.cz-switch-md .cz-switch-thumb { width: 1.25rem; height: 1.25rem; transform: translateX(0.125rem); }
+.cz-switch-md[data-state="checked"] .cz-switch-thumb,
+.cz-switch-md.cz-switch-checked .cz-switch-thumb { transform: translateX(calc(2.75rem - 1.25rem - 0.125rem)); }
+
+.cz-switch-lg { width: 3.5rem; height: 1.875rem; }
+.cz-switch-lg .cz-switch-thumb { width: 1.625rem; height: 1.625rem; transform: translateX(0.125rem); }
+.cz-switch-lg[data-state="checked"] .cz-switch-thumb,
+.cz-switch-lg.cz-switch-checked .cz-switch-thumb { transform: translateX(calc(3.5rem - 1.625rem - 0.125rem)); }
+
+/* Switch with Label */
+.cz-switch-container {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+.cz-switch-container.cz-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cz-switch-label-left { flex-direction: row-reverse; }
+.cz-switch-label-right { flex-direction: row; }
+
+.cz-switch-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.cz-switch-label {
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-fg));
+  line-height: 1.5;
+}
+
+.cz-switch-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== AVATAR ===== */
+
+.cz-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--cz-radius-full);
+  background-color: hsl(var(--cz-color-muted));
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.cz-avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cz-avatar-fallback {
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-mutedFg));
+  text-transform: uppercase;
+}
+
+/* Avatar Sizes */
+.cz-avatar-sm { width: 2rem; height: 2rem; font-size: var(--cz-font-size-xs); }
+.cz-avatar-md { width: 2.5rem; height: 2.5rem; font-size: var(--cz-font-size-sm); }
+.cz-avatar-lg { width: 3.5rem; height: 3.5rem; font-size: var(--cz-font-size-md); }
+
+/* ===== SEPARATOR ===== */
+
+.cz-separator {
+  background-color: hsl(var(--cz-color-border));
+  flex-shrink: 0;
+}
+
+.cz-separator-horizontal {
+  height: 1px;
+  width: 100%;
+}
+
+.cz-separator-vertical {
+  width: 1px;
+  height: 100%;
+  align-self: stretch;
+}
+
+/* ===== ALERT ===== */
+
+.cz-alert {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: var(--cz-spacing-md) var(--cz-spacing-lg);
+  border-radius: var(--cz-radius-md);
+  border: 1px solid transparent;
+}
+
+.cz-alert-title {
+  font-weight: var(--cz-font-weight-semibold);
+  font-size: var(--cz-font-size-sm);
+}
+
+.cz-alert-content {
+  font-size: var(--cz-font-size-sm);
+}
+
+/* Alert Variants */
+.cz-alert-info {
+  background-color: hsl(var(--cz-color-primary) / 0.1);
+  border-color: hsl(var(--cz-color-primary) / 0.3);
+  color: hsl(var(--cz-color-primary));
+}
+
+.cz-alert-success {
+  background-color: hsl(var(--cz-color-success) / 0.1);
+  border-color: hsl(var(--cz-color-success) / 0.3);
+  color: hsl(var(--cz-color-success));
+}
+
+.cz-alert-warning {
+  background-color: hsl(var(--cz-color-warning) / 0.1);
+  border-color: hsl(var(--cz-color-warning) / 0.3);
+  color: hsl(var(--cz-color-warning));
+}
+
+.cz-alert-danger {
+  background-color: hsl(var(--cz-color-danger) / 0.1);
+  border-color: hsl(var(--cz-color-danger) / 0.3);
+  color: hsl(var(--cz-color-danger));
+}
+
+/* ===== CHECKBOX ===== */
+
+.cz-checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cz-checkbox-wrapper.cz-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-checkbox {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--cz-radius-sm);
+  border: 2px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  transition: all var(--cz-transition-fast);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.cz-checkbox:hover {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-checkbox:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-checkbox[data-state="checked"],
+.cz-checkbox[data-state="indeterminate"] {
+  background-color: hsl(var(--cz-color-primary));
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-checkbox-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--cz-color-primaryFg));
+  width: 100%;
+  height: 100%;
+}
+
+.cz-checkbox-indicator svg {
+  width: 12px;
+  height: 12px;
+}
+
+.cz-checkbox-label {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-fg));
+}
+
+/* Checkbox Sizes */
+.cz-checkbox-sm { width: 1rem; height: 1rem; }
+.cz-checkbox-sm .cz-checkbox-indicator svg { width: 10px; height: 10px; }
+
+.cz-checkbox-md { width: 1.25rem; height: 1.25rem; }
+.cz-checkbox-md .cz-checkbox-indicator svg { width: 12px; height: 12px; }
+
+.cz-checkbox-lg { width: 1.5rem; height: 1.5rem; }
+.cz-checkbox-lg .cz-checkbox-indicator svg { width: 14px; height: 14px; }
+
+/* Checkbox with Description */
+.cz-checkbox-wrapper-with-description {
+  align-items: flex-start;
+}
+.cz-checkbox-wrapper-with-description .cz-checkbox {
+  margin-top: 0.125rem;
+}
+
+.cz-checkbox-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.cz-checkbox-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== RADIO GROUP ===== */
+
+.cz-radio-group {
+  display: flex;
+  gap: 0.5rem;
+}
+.cz-radio-group-vertical { flex-direction: column; }
+.cz-radio-group-horizontal { flex-direction: row; flex-wrap: wrap; }
+
+.cz-radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cz-radio-wrapper.cz-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-radio-wrapper-with-description {
+  align-items: flex-start;
+}
+.cz-radio-wrapper-with-description .cz-radio {
+  margin-top: 0.125rem;
+}
+
+.cz-radio {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--cz-radius-full);
+  border: 2px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  transition: all var(--cz-transition-fast);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.cz-radio:hover {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-radio:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-radio:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-radio[data-state="checked"] {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-radio-indicator {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: var(--cz-radius-full);
+  background-color: hsl(var(--cz-color-primary));
+  transform: scale(0);
+  transition: transform var(--cz-transition-fast);
+}
+
+.cz-radio[data-state="checked"] .cz-radio-indicator {
+  transform: scale(1);
+}
+
+.cz-radio-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.cz-radio-label {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-radio-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== TOOLTIP ===== */
+
+.cz-tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.cz-tooltip {
+  position: absolute;
+  z-index: 50;
+  padding: 0.375rem 0.75rem;
+  font-size: var(--cz-font-size-sm);
+  background-color: hsl(var(--cz-color-fg));
+  color: hsl(var(--cz-color-bg));
+  border-radius: var(--cz-radius-md);
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: var(--cz-shadow-md);
+}
+
+.cz-tooltip-top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.5rem;
+}
+
+.cz-tooltip-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0.5rem;
+}
+
+.cz-tooltip-left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 0.5rem;
+}
+
+.cz-tooltip-right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0.5rem;
+}
+
+/* ===== PROGRESS ===== */
+
+.cz-progress {
+  width: 100%;
+  background-color: hsl(var(--cz-color-muted));
+  border-radius: var(--cz-radius-full);
+  overflow: hidden;
+}
+
+.cz-progress-bar {
+  height: 100%;
+  width: 100%;
+  border-radius: var(--cz-radius-full);
+  transition: transform var(--cz-transition-normal);
+}
+
+/* Progress Sizes */
+.cz-progress-sm { height: 0.375rem; }
+.cz-progress-md { height: 0.5rem; }
+.cz-progress-lg { height: 0.75rem; }
+
+/* Progress Variants */
+.cz-progress-default { background-color: hsl(var(--cz-color-primary)); }
+.cz-progress-success { background-color: hsl(var(--cz-color-success)); }
+.cz-progress-warning { background-color: hsl(var(--cz-color-warning)); }
+.cz-progress-danger { background-color: hsl(var(--cz-color-danger)); }
+
+/* ===== SKELETON ===== */
+
+@keyframes cz-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.cz-skeleton {
+  background-color: hsl(var(--cz-color-muted));
+  animation: cz-skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.cz-skeleton-text {
+  height: 1rem;
+  width: 100%;
+  border-radius: var(--cz-radius-sm);
+}
+
+.cz-skeleton-circular {
+  border-radius: var(--cz-radius-full);
+}
+
+.cz-skeleton-rectangular {
+  border-radius: var(--cz-radius-md);
+}
+
+/* ===== TABS ===== */
+
+.cz-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.cz-tabs-list {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-bottom: 1px solid hsl(var(--cz-color-border));
+  padding-bottom: 0;
+}
+
+.cz-tabs-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-mutedFg));
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-tabs-trigger:hover {
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-tabs-trigger-active {
+  color: hsl(var(--cz-color-primary));
+  border-bottom-color: hsl(var(--cz-color-primary));
+}
+
+.cz-tabs-trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-ring));
+  border-radius: var(--cz-radius-sm);
+}
+
+.cz-tabs-content {
+  padding-top: var(--cz-spacing-lg);
+}
+
+/* ===== DIALOG ===== */
+
+.cz-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.cz-dialog-content {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 51;
+  background-color: hsl(var(--cz-color-bg));
+  border-radius: var(--cz-radius-lg);
+  box-shadow: var(--cz-shadow-lg);
+  max-width: 32rem;
+  width: calc(100% - 2rem);
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
+  padding: var(--cz-spacing-lg);
+}
+
+.cz-dialog-close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: var(--cz-radius-sm);
+  font-size: 1.25rem;
+  color: hsl(var(--cz-color-mutedFg));
+  cursor: pointer;
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-dialog-close:hover {
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-bottom: var(--cz-spacing-md);
+}
+
+.cz-dialog-title {
+  font-size: var(--cz-font-size-lg);
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-fg));
+  margin: 0;
+}
+
+.cz-dialog-description {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+  margin: 0;
+}
+
+.cz-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding-top: var(--cz-spacing-lg);
+}
+
+/* ===== SELECT ===== */
+
+.cz-select {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0 0.75rem;
+  border-radius: var(--cz-radius-md);
+  border: 1px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  color: hsl(var(--cz-color-fg));
+  font-size: var(--cz-font-size-md);
+  transition: all var(--cz-transition-fast);
+  cursor: pointer;
+}
+
+.cz-select:hover {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-select:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-ring));
+}
+
+.cz-select:disabled,
+.cz-select[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-select[data-placeholder] {
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-select-icon {
+  color: hsl(var(--cz-color-mutedFg));
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+}
+
+/* Select Sizes */
+.cz-select-sm { height: 2rem; padding: 0 0.5rem; font-size: var(--cz-font-size-sm); }
+.cz-select-md { height: 2.5rem; padding: 0 0.75rem; font-size: var(--cz-font-size-md); }
+.cz-select-lg { height: 3rem; padding: 0 1rem; font-size: var(--cz-font-size-lg); }
+
+/* Select Content (Dropdown) */
+.cz-select-content {
+  z-index: 50;
+  min-width: 8rem;
+  max-height: 15rem;
+  overflow: hidden;
+  background-color: hsl(var(--cz-color-bg));
+  border: 1px solid hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-md);
+  box-shadow: var(--cz-shadow-lg);
+}
+
+.cz-select-viewport {
+  padding: 0.25rem;
+}
+
+.cz-select-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-fg));
+  border-radius: var(--cz-radius-sm);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+.cz-select-item:hover,
+.cz-select-item[data-highlighted] {
+  background-color: hsl(var(--cz-color-muted));
+}
+
+.cz-select-item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cz-select-item-indicator {
+  width: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--cz-color-primary));
+}
+
+.cz-select-separator {
+  height: 1px;
+  background-color: hsl(var(--cz-color-border));
+  margin: 0.25rem 0;
+}
+
+.cz-select-label {
+  padding: 0.375rem 0.75rem;
+  font-size: var(--cz-font-size-xs);
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== RADIO GROUP ===== */
+
+.cz-radio-group {
+  display: flex;
+}
+
+.cz-radio-group-vertical {
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cz-radio-group-horizontal {
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.cz-radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cz-radio-wrapper.cz-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-radio {
+  all: unset;
+  box-sizing: border-box;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--cz-radius-full);
+  border: 2px solid hsl(var(--cz-color-border));
+  background-color: hsl(var(--cz-color-bg));
+  transition: all var(--cz-transition-fast);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.cz-radio:hover {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-radio:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+.cz-radio:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cz-radio[data-state="checked"] {
+  border-color: hsl(var(--cz-color-primary));
+}
+
+.cz-radio-indicator {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: var(--cz-radius-full);
+  background-color: hsl(var(--cz-color-primary));
+}
+
+.cz-radio-label {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-fg));
+}
+
+/* ===== TABLE ===== */
+
+.cz-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.cz-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--cz-font-size-sm);
+}
+
+.cz-table-header {
+  background-color: hsl(var(--cz-color-muted));
+}
+
+.cz-table-row {
+  border-bottom: 1px solid hsl(var(--cz-color-border));
+  transition: background-color var(--cz-transition-fast);
+}
+
+.cz-table-body .cz-table-row:hover {
+  background-color: hsl(var(--cz-color-muted) / 0.5);
+}
+
+.cz-table-head {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-fg));
+  white-space: nowrap;
+}
+
+.cz-table-cell {
+  padding: 0.75rem 1rem;
+  color: hsl(var(--cz-color-fg));
+}
+
+/* ===== ACCORDION ===== */
+
+.cz-accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.cz-accordion-item {
+  border-bottom: 1px solid hsl(var(--cz-color-border));
+}
+
+.cz-accordion-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1rem 0;
+  font-size: var(--cz-font-size-md);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-fg));
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-accordion-trigger:hover {
+  color: hsl(var(--cz-color-primary));
+}
+
+.cz-accordion-icon {
+  transition: transform var(--cz-transition-fast);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-accordion-icon-expanded,
+.cz-accordion-trigger[data-state="open"] .cz-accordion-icon {
+  transform: rotate(180deg);
+}
+
+.cz-accordion-content {
+  overflow: hidden;
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-accordion-content[data-state="open"] {
+  animation: cz-accordion-down var(--cz-transition-fast) ease-out;
+}
+
+.cz-accordion-content[data-state="closed"] {
+  animation: cz-accordion-up var(--cz-transition-fast) ease-out;
+}
+
+.cz-accordion-content-inner {
+  padding-bottom: 1rem;
+}
+
+@keyframes cz-accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes cz-accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+/* ===== STACK ===== */
+
+.cz-stack {
+  display: flex;
+}
+
+.cz-stack-row { flex-direction: row; }
+.cz-stack-column { flex-direction: column; }
+
+.cz-stack-gap-xs { gap: var(--cz-spacing-xs); }
+.cz-stack-gap-sm { gap: var(--cz-spacing-sm); }
+.cz-stack-gap-md { gap: var(--cz-spacing-md); }
+.cz-stack-gap-lg { gap: var(--cz-spacing-lg); }
+.cz-stack-gap-xl { gap: var(--cz-spacing-xl); }
+
+.cz-stack-align-start { align-items: flex-start; }
+.cz-stack-align-center { align-items: center; }
+.cz-stack-align-end { align-items: flex-end; }
+.cz-stack-align-stretch { align-items: stretch; }
+
+.cz-stack-justify-start { justify-content: flex-start; }
+.cz-stack-justify-center { justify-content: center; }
+.cz-stack-justify-end { justify-content: flex-end; }
+.cz-stack-justify-between { justify-content: space-between; }
+.cz-stack-justify-around { justify-content: space-around; }
+
+.cz-stack-wrap { flex-wrap: wrap; }
+
+/* ===== SPINNER ===== */
+
+.cz-spinner {
+  display: inline-flex;
+  animation: cz-spin 1s linear infinite;
+}
+
+.cz-spinner-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.cz-spinner-track {
+  opacity: 0.2;
+}
+
+.cz-spinner-indicator {
+  opacity: 1;
+}
+
+/* Spinner Sizes */
+.cz-spinner-sm { width: 1rem; height: 1rem; }
+.cz-spinner-md { width: 1.5rem; height: 1.5rem; }
+.cz-spinner-lg { width: 2rem; height: 2rem; }
+
+/* Spinner Variants */
+.cz-spinner-default { color: hsl(var(--cz-color-fg)); }
+.cz-spinner-primary { color: hsl(var(--cz-color-primary)); }
+
+/* ===== ASPECT RATIO ===== */
+
+.cz-aspect-ratio {
+  position: relative;
+  width: 100%;
+}
+
+.cz-aspect-ratio-content {
+  position: absolute;
+  inset: 0;
+}
+
+.cz-aspect-ratio-content > * {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ===== BREADCRUMB ===== */
+
+.cz-breadcrumb {
+  display: flex;
+  align-items: center;
+}
+
+.cz-breadcrumb-list {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.cz-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.cz-breadcrumb-link {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+  text-decoration: none;
+  transition: color var(--cz-transition-fast);
+}
+
+.cz-breadcrumb-link:hover {
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-breadcrumb-separator {
+  color: hsl(var(--cz-color-mutedFg));
+  display: inline-flex;
+}
+
+.cz-breadcrumb-page {
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-fg));
+}
+
+/* ===== LABEL (extended) ===== */
+
+.cz-label-required {
+  color: hsl(var(--cz-color-danger));
+  margin-left: 0.125rem;
+}
+
+/* ===== VISUALLY HIDDEN ===== */
+
+.cz-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ===== CONTAINER ===== */
+
+.cz-container {
+  width: 100%;
+  padding-left: var(--cz-spacing-lg);
+  padding-right: var(--cz-spacing-lg);
+}
+
+.cz-container-centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cz-container-sm { max-width: 640px; }
+.cz-container-md { max-width: 768px; }
+.cz-container-lg { max-width: 1024px; }
+.cz-container-xl { max-width: 1280px; }
+.cz-container-full { max-width: 100%; }
+
+/* ===== GRID ===== */
+
+.cz-grid {
+  display: grid;
+}
+
+.cz-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+.cz-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cz-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.cz-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+.cz-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
+.cz-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
+.cz-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
+
+.cz-grid-gap-xs { gap: var(--cz-spacing-xs); }
+.cz-grid-gap-sm { gap: var(--cz-spacing-sm); }
+.cz-grid-gap-md { gap: var(--cz-spacing-md); }
+.cz-grid-gap-lg { gap: var(--cz-spacing-lg); }
+.cz-grid-gap-xl { gap: var(--cz-spacing-xl); }
+
+/* ===== KBD ===== */
+
+.cz-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem 0.375rem;
+  font-size: var(--cz-font-size-xs);
+  font-family: var(--cz-font-mono, ui-monospace, monospace);
+  font-weight: var(--cz-font-weight-medium);
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-fg));
+  border: 1px solid hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-sm);
+  box-shadow: 0 1px 0 hsl(var(--cz-color-border));
+}
+
+/* ===== CODE ===== */
+
+.cz-code {
+  display: inline;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875em;
+  font-family: var(--cz-font-mono, ui-monospace, monospace);
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-fg));
+  border-radius: var(--cz-radius-sm);
+}
+
+/* ===== SCROLL AREA ===== */
+
+.cz-scroll-area {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--cz-color-border)) transparent;
+}
+
+.cz-scroll-area::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.cz-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cz-scroll-area::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-full);
+}
+
+.cz-scroll-area::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== DROPDOWN MENU ===== */
+
+.cz-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.cz-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.cz-dropdown-content {
+  position: absolute;
+  top: 100%;
+  margin-top: 0.25rem;
+  z-index: 50;
+  min-width: 10rem;
+  background-color: hsl(var(--cz-color-bg));
+  border: 1px solid hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-md);
+  box-shadow: var(--cz-shadow-lg);
+  padding: 0.25rem;
+  animation: cz-fade-in 0.15s ease-out;
+}
+
+.cz-dropdown-align-start { left: 0; }
+.cz-dropdown-align-center { left: 50%; transform: translateX(-50%); }
+.cz-dropdown-align-end { right: 0; }
+
+.cz-dropdown-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-fg));
+  background: transparent;
+  border: none;
+  border-radius: var(--cz-radius-sm);
+  cursor: pointer;
+  text-align: left;
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-dropdown-item:hover {
+  background-color: hsl(var(--cz-color-muted));
+}
+
+.cz-dropdown-item:focus {
+  outline: none;
+  background-color: hsl(var(--cz-color-muted));
+}
+
+.cz-dropdown-separator {
+  height: 1px;
+  background-color: hsl(var(--cz-color-border));
+  margin: 0.25rem 0;
+}
+
+.cz-dropdown-label {
+  padding: 0.5rem 0.75rem;
+  font-size: var(--cz-font-size-xs);
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+/* ===== TOAST ===== */
+
+.cz-toaster {
+  position: fixed;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  max-width: 24rem;
+  width: 100%;
+  pointer-events: none;
+}
+
+.cz-toaster-top-left { top: 0; left: 0; }
+.cz-toaster-top-center { top: 0; left: 50%; transform: translateX(-50%); }
+.cz-toaster-top-right { top: 0; right: 0; }
+.cz-toaster-bottom-left { bottom: 0; left: 0; }
+.cz-toaster-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
+.cz-toaster-bottom-right { bottom: 0; right: 0; }
+
+.cz-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  background-color: hsl(var(--cz-color-bg));
+  border: 1px solid hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-lg);
+  box-shadow: var(--cz-shadow-lg);
+  pointer-events: auto;
+  animation: cz-slide-in 0.3s ease-out;
+}
+
+@keyframes cz-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.cz-toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.cz-toast-title {
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-semibold);
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-toast-description {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+  margin-top: 0.125rem;
+}
+
+.cz-toast-close {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: hsl(var(--cz-color-mutedFg));
+  cursor: pointer;
+  border-radius: var(--cz-radius-sm);
+  font-size: 1rem;
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-toast-close:hover {
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-fg));
+}
+
+/* Toast Variants */
+.cz-toast-success {
+  border-left: 4px solid hsl(var(--cz-color-success));
+}
+
+.cz-toast-warning {
+  border-left: 4px solid hsl(var(--cz-color-warning));
+}
+
+.cz-toast-danger {
+  border-left: 4px solid hsl(var(--cz-color-danger));
+}
+
+/* ===== TAG ===== */
+
+.cz-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: var(--cz-radius-full);
+  font-weight: var(--cz-font-weight-medium);
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-tag-content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cz-tag-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  color: inherit;
+  opacity: 0.6;
+  transition: opacity var(--cz-transition-fast);
+  border-radius: var(--cz-radius-full);
+}
+
+.cz-tag-remove:hover {
+  opacity: 1;
+}
+
+/* Tag Sizes */
+.cz-tag-sm { padding: 0.125rem 0.5rem; font-size: var(--cz-font-size-xs); }
+.cz-tag-md { padding: 0.25rem 0.625rem; font-size: var(--cz-font-size-sm); }
+.cz-tag-lg { padding: 0.375rem 0.75rem; font-size: var(--cz-font-size-md); }
+
+/* Tag Variants */
+.cz-tag-default {
+  background-color: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-tag-primary {
+  background-color: hsl(var(--cz-color-primary));
+  color: hsl(var(--cz-color-primaryFg));
+}
+
+.cz-tag-secondary {
+  background-color: hsl(var(--cz-color-secondary));
+  color: hsl(var(--cz-color-secondaryFg));
+}
+
+.cz-tag-success {
+  background-color: hsl(142 76% 36%);
+  color: white;
+}
+
+.cz-tag-warning {
+  background-color: hsl(38 92% 50%);
+  color: white;
+}
+
+.cz-tag-danger {
+  background-color: hsl(var(--cz-color-danger));
+  color: white;
+}
+
+/* ===== SCROLL AREA ===== */
+
+.cz-scroll-area {
+  overflow: hidden;
+}
+
+.cz-scroll-area-viewport {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.cz-scroll-area-scrollbar {
+  display: flex;
+  touch-action: none;
+  user-select: none;
+  padding: 2px;
+  background-color: transparent;
+  transition: background-color var(--cz-transition-fast);
+}
+
+.cz-scroll-area-scrollbar:hover {
+  background-color: hsl(var(--cz-color-muted) / 0.5);
+}
+
+.cz-scroll-area-scrollbar-vertical {
+  width: 10px;
+}
+
+.cz-scroll-area-scrollbar-horizontal {
+  flex-direction: column;
+  height: 10px;
+}
+
+.cz-scroll-area-thumb {
+  flex: 1;
+  background-color: hsl(var(--cz-color-border));
+  border-radius: var(--cz-radius-full);
+  position: relative;
+  transition: background-color var(--cz-transition-fast);
+}
+
+.cz-scroll-area-thumb::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.cz-scroll-area-thumb:hover {
+  background-color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-scroll-area-corner {
+  background-color: hsl(var(--cz-color-muted));
+}